.match-panel{background:#fff;overflow:hidden}
.match-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;flex-wrap:wrap}
.match-head h2{font-size:clamp(2rem,5vw,3.3rem);margin:.2rem 0}
.match-kicker{text-transform:uppercase;letter-spacing:.12em;color:#e30620;font-weight:900}
.match-level{display:grid;gap:.45rem;min-width:180px}
.match-level select{padding:.8rem;border:2px solid #111;border-radius:9px;background:#fff;font-weight:800}
.match-instruction,.match-move{max-width:840px;margin:1rem auto;padding:.85rem 1rem;border-radius:10px;background:#f3f4f6;color:#374151}
.match-move{text-align:center;font-weight:800;background:#fff7d6}
.match-meta{width:max-content;max-width:100%;margin:.5rem auto 0;padding:.45rem .8rem;border:1px solid #d1d5db;border-radius:999px;font-weight:800;color:#374151}
.match-game{display:flex;justify-content:center;align-items:center;gap:8px;padding:30px 10px 45px;min-height:190px;overflow-x:auto}
.match-char{position:relative;flex:0 0 70px;width:70px;height:126px}
.match-char.operator,.match-char.equal{flex-basis:55px;width:55px}
.match-stick{position:absolute;border:0;padding:0;margin:0;background:transparent;cursor:pointer;z-index:2;touch-action:manipulation}
.match-stick::before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,#8b4513 0 78%,#d93025 79% 100%);box-shadow:0 1px 2px #0004}
.match-stick.off::before{display:block;opacity:1;background:#e5e7eb;box-shadow:inset 0 0 0 1px #cbd5e1}
.match-stick.on:hover::before,.match-stick.selected::before{outline:4px solid #ffcf33;outline-offset:2px}
.match-stick.off.target:hover::before,.match-stick.off.target:active::before{background:#bde7c4;outline:3px solid #198754}
.match-stick.h{width:52px;height:8px;left:9px}
.match-stick.v{width:8px;height:52px}
.match-stick.v::before{background:linear-gradient(180deg,#8b4513 0 78%,#d93025 79% 100%)}
.match-stick.v.off::before{background:#e5e7eb}
.seg-a{top:4px}.seg-g{top:59px}.seg-d{top:114px}
.seg-f{left:4px;top:10px}.seg-b{right:4px;top:10px}
.seg-e{left:4px;top:66px}.seg-c{right:4px;top:66px}
.operator .seg-g,.equal .seg-g,.equal .seg-d{left:2px;width:51px}
.operator .seg-v{left:24px;top:36px}
.equal .seg-g{top:46px}.equal .seg-d{top:72px}
.operator .seg-g{top:59px}
.match-toolbar{justify-content:center}
.match-panel .status{min-height:48px;margin-top:1rem}
.match-panel .status.ok{background:#dff7e6;color:#126b31}
.match-panel .status.bad{background:#ffe1e1;color:#9b1c1c}
.match-stick.solution-removed::before{opacity:1!important;background:#ffb3b3!important;box-shadow:inset 0 0 0 3px #c62828!important}
.match-stick.solution-added::before{opacity:1!important;background:#2fb45a!important;box-shadow:0 0 0 4px #bce8c9!important}

@media(max-width:650px){
  .match-panel{width:100%;padding:12px 8px 20px!important;box-sizing:border-box}
  .match-panel *{box-sizing:border-box}
  .match-head{gap:8px}.match-head h2{font-size:28px;line-height:1.08}.match-head .lead{font-size:16px;line-height:1.35}
  .match-level{width:100%;gap:5px}.match-level select{width:100%;padding:10px 12px;font-size:16px}
  .match-instruction,.match-move{width:100%;margin:8px 0;padding:9px 10px;font-size:14px;line-height:1.3}
  .match-meta{margin:8px auto 2px;padding:6px 9px;font-size:12px;text-align:center}
  .match-game{width:100%;height:124px;min-height:124px;gap:0;padding:8px 7px 14px;overflow:visible;box-sizing:border-box}
  .match-char{flex:0 0 50px;width:50px;height:102px;transform:none;margin:0}
  .match-char.operator,.match-char.equal{flex:0 0 38px;width:38px;height:102px}
  .match-stick.h{width:40px;height:7px;left:6px}.match-stick.v{width:7px;height:42px}
  .seg-a{top:2px}.seg-g{top:47px}.seg-d{top:92px}
  .seg-f{left:2px;top:7px}.seg-b{right:2px;top:7px}.seg-e{left:2px;top:52px}.seg-c{right:2px;top:52px}
  .operator .seg-g,.equal .seg-g,.equal .seg-d{left:2px;width:36px}
  .operator .seg-v{left:16px;top:30px;width:7px;height:42px}.operator .seg-g{top:47px}
  .equal .seg-g{top:38px}.equal .seg-d{top:59px}
  .match-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0!important}
  .match-toolbar button{width:100%!important;min-width:0!important;min-height:40px!important;margin:0!important;padding:7px 4px!important;font-size:13px!important;line-height:1.2!important}
  .match-toolbar button:last-child{grid-column:1/-1}
  .match-panel .status{min-height:0;margin-top:8px;font-size:14px;line-height:1.3;padding:10px}.match-panel .status:empty{display:none}
  .match-char strong{font-size:9px!important;padding:4px 5px!important;bottom:-25px!important}
}

@media(max-width:390px){
  .match-game{padding-left:8px;padding-right:8px}
  .match-char{flex-basis:46px;width:46px}.match-char.operator,.match-char.equal{flex-basis:34px;width:34px}
  .match-stick.h{width:36px;left:5px}.operator .seg-g,.equal .seg-g,.equal .seg-d{width:30px}.operator .seg-v{left:13px}
}