/* The same square grid is used for logic, artwork, gates and hit testing. */
html, body { height:100%; overscroll-behavior:none; }
html, body, body * {
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.game { height:100svh; min-height:0; padding-top:max(12px,env(safe-area-inset-top)); }
.game-board {
  --frame:20px;
  width:min(calc(100vw - 30px), calc((100svh - 280px) * .666667 + 40px), 440px);
  padding:28px 18px;
  border-radius:22px; margin-top:12px;
}
.board-interior { border:0; border-radius:5px; }
.blocks-layer { overflow:hidden; border-radius:5px; touch-action:none; }
.gate-top { top:-25px; height:24px; border-radius:5px 5px 2px 2px; }
.gate-bottom { bottom:-25px; height:24px; border-radius:2px 2px 5px 5px; }
.gate-left { left:-18px; width:17px; border-radius:5px 2px 2px 5px; }
.gate-right { right:-18px; width:17px; border-radius:2px 5px 5px 2px; }
.gate { border:1px solid #ffffff80; box-shadow:inset 0 2px #fff9,inset 0 -4px #0005,0 2px 3px #120831; }
.gate.locked {
  border-color:#f7fbff;
  background:linear-gradient(145deg,#e8edf4 0 12%,#8f9aaa 38%,#525d6e 68%,#c8d0da 100%);
  box-shadow:inset 0 2px #fff,inset 0 -4px #303948,0 2px 5px #080c16;
}
.gate-lock-art { position:absolute; left:50%; top:50%; z-index:1; width:min(62%,calc(var(--cell-size) * .62)); height:calc(var(--cell-size) * .62); transform:translate(-50%,-50%); pointer-events:none; }
.gate-left.locked .gate-lock-art, .gate-right.locked .gate-lock-art { width:calc(var(--cell-size) * .56); height:calc(var(--cell-size) * .56); }
.gate-lock-count {
  position:absolute; left:50%; top:-11px; z-index:2; transform:translateX(-50%); display:grid; place-items:center; min-width:25px; height:25px; padding:0 5px;
  border:2px solid #f8fbff; border-radius:10px; background:linear-gradient(#7c8797,#3a4454);
  box-shadow:inset 0 2px #ffffff99,0 2px 3px #111827; color:#fff; font-size:15px; font-weight:1000; line-height:1; text-shadow:0 2px #111827;
}
.block.vertical-piece {
  background:var(--piece-color);
  border:2px solid #17102c; border-radius:8px;
  box-shadow:inset 0 2px #fff9,inset 0 -4px #0005,0 2px 3px #050119;
  overflow:hidden; transition:filter .12s; touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.block.vertical-piece::after { inset:0; border:1px solid #fff7; border-radius:6px; box-shadow:inset 0 -3px 4px #0006; }
.brick-art { position:absolute; width:var(--cell-size); height:var(--cell-size); pointer-events:none; }
.brick-art svg { display:block; width:100%; height:100%; pointer-events:none; }
.block.selected { outline:2px solid #fff3c5; outline-offset:-3px; filter:brightness(1.12); }
.block.dragging { filter:brightness(1.13); z-index:5; }
.level-label { font-size:.62rem; letter-spacing:.08em; height:20px; }
.status { margin-top:13px; letter-spacing:.04em; font-size:.68rem; }
.boosters { padding:6px 0 0; margin-top:auto; }
.booster { width:50px; height:50px; }
.topbar { height:113px; }
.debug-toggle {
  position:fixed; right:max(14px,env(safe-area-inset-right)); bottom:max(14px,env(safe-area-inset-bottom)); z-index:20;
  width:48px; height:48px; border:2px solid #f7dc75; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg,#ffdb58,#bd7612 58%,#6e3608); box-shadow:inset 0 2px #fff5bb, inset 0 -5px #743606, 0 4px 10px #07041d;
}
.debug-toggle svg { width:27px; fill:#fff9d6; filter:drop-shadow(0 2px #5f2a09); }
.debug-card { width:min(360px,100%); }
.debug-card label { display:block; margin:14px 0 6px; color:#f8e98e; font-size:.75rem; font-weight:1000; letter-spacing:.1em; text-transform:uppercase; }
.debug-card select { width:100%; min-height:43px; border:2px solid #aaa1ff; border-radius:12px; padding:0 10px; background:#1b1552; color:#fff5d3; font:inherit; font-weight:800; }
.debug-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.debug-actions .continue { min-height:44px; font-size:.68rem; }
.debug-actions .debug-wide { grid-column:1 / -1; }
.debug-close { margin-top:12px; min-height:43px; background:linear-gradient(#a69bff,#604cc2); color:#fff5d3; border-color:#dcd5ff; box-shadow:inset 0 3px #fff8, inset 0 -5px #30206e,0 4px #24145e; }
@media(max-height:650px) {
  .topbar { height:96px; }
  .controls { top:35px; }
  .round { height:48px; width:48px; }
  .game-board { width:min(calc(100vw - 30px),calc((100svh - 215px) * .666667 + 40px),440px); margin-top:4px; }
  .boosters { display:none; }
  .status { margin-top:6px; min-height:18px; }
}
@media(prefers-reduced-motion:reduce) { .shatter { display:none; } }