:root{--bg:#eef4f8;--paper:#fff;--ink:#24333f;--muted:#71838d;--line:#d8e5ea;--teal:#18b9c2;--teal2:#0b9199;--purple:#742ef0}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}
body{padding:8px;background:radial-gradient(circle at 8% 8%,rgba(116,46,240,.07),transparent 20%),var(--bg)}
button{font:inherit}.game-shell{width:min(1180px,100%);margin:auto;padding:10px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 16px 42px rgba(35,67,79,.1)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 4px 10px}.topbar strong{display:block;font-size:1.05rem}.topbar span{display:block;margin-top:2px;color:var(--muted);font-size:.76rem;font-weight:800}
.progress{padding:7px 11px;border-radius:999px;color:#fff;background:var(--purple);font-size:.78rem;font-weight:900}
.toolbar{display:grid;grid-template-columns:repeat(5,1fr) 1.18fr;gap:5px}.tool{min-height:36px;padding:6px 8px;border:1px solid #cbdce3;border-radius:10px;background:#fff;color:#405966;font-weight:900;cursor:pointer}
.tool.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--teal),var(--teal2))}.tool:disabled{opacity:.42;cursor:not-allowed}
.statusbar{min-height:42px;margin-top:6px;padding:8px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;background:#fbfdfe;font-size:.86rem;font-weight:800}
.board-wrap{margin-top:7px}#board{display:block;width:100%;height:min(67vh,650px);min-height:440px;touch-action:none}
.board-bg{fill:#f7fbfd;stroke:#d9e7ec;stroke-width:2;stroke-dasharray:7 6}
.target-piece{fill:#dce5e9;stroke:#cbd6db;stroke-width:1;stroke-linejoin:round;pointer-events:none}
.game-piece{cursor:grab;touch-action:none}
.game-piece.dragging{cursor:grabbing}
.game-piece .piece-visible{stroke-width:2.4;stroke-linejoin:round;paint-order:stroke fill;filter:drop-shadow(0 5px 7px rgba(27,61,75,.12))}
.game-piece.dragging .piece-visible{filter:none}
.game-piece.selected .piece-visible{filter:drop-shadow(0 0 8px rgba(116,46,240,.22))}
.game-piece.placed .piece-visible{filter:none}
.piece-hit{fill:transparent;stroke:transparent;stroke-width:22;pointer-events:all}
.hint{margin-top:7px;min-height:50px;padding:7px 10px;display:flex;align-items:center;gap:8px;border:1px solid #e2daf6;border-radius:14px;background:#fbf8ff;color:#5e6873;font-size:.78rem}.hint img{width:38px;height:38px;object-fit:contain}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:18px;background:rgba(25,29,34,.55);backdrop-filter:blur(5px)}.modal[hidden]{display:none}
.modal-card{width:min(390px,100%);padding:24px;text-align:center;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(25,35,42,.24)}.modal-card h2{margin:5px 0}.modal-card p{color:#657782}.emoji{font-size:2.5rem}
@media(max-width:600px){body{padding:4px}.game-shell{padding:6px;border-radius:16px}.toolbar{display:flex;gap:4px;flex-wrap:nowrap}.icon-mobile{flex:0 0 38px;width:38px;padding:0;font-size:0;display:grid;place-items:center}.icon-mobile::before{content:attr(data-icon);font-size:1.05rem}.icon-mobile span{display:none}#checkBtn{flex:1;min-width:104px;padding:0 7px;font-size:.78rem}.statusbar{min-height:36px;padding:6px 8px;font-size:.75rem}#board{height:430px;min-height:430px}.hint{font-size:.7rem}.hint img{width:30px;height:30px}}


/* V3 — interaction cleanup */
.game-shell,
.game-shell *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.hint,
.hint img{
  -webkit-user-select:none;
  user-select:none;
  pointer-events:none;
}

.hint img{
  -webkit-user-drag:none;
}

#board{
  touch-action:none;
  overscroll-behavior:contain;
}

.stage-progress{display:flex;align-items:center;gap:9px}
.stage-progress>strong{min-width:56px;padding:7px 10px;text-align:center;border-radius:999px;color:#fff;background:var(--purple);font-size:.78rem;font-weight:900}
.stage-dots{display:flex;gap:4px}
.stage-dot{width:8px;height:8px;border-radius:50%;background:#d9e5e9}
.stage-dot.done{background:var(--teal)}
.stage-dot.current{background:var(--purple);transform:scale(1.2)}
@media(max-width:600px){.stage-dots{display:none}}