/* Space and Blocks: paper blocks on a cutting mat. */
:root{--mat:#1f6f5c;--mat-deep:#175647;--print:#f3ecd2;--ink:#12362d;--sun:#f2b23a}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;color:var(--print);font-family:"DIN Alternate","Avenir Next Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;background-color:var(--mat);background-image:linear-gradient(rgba(243,236,210,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(243,236,210,.07) 1px,transparent 1px);background-size:24px 24px}
.app{height:100vh;height:100dvh;max-width:620px;margin:0 auto;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
header{display:flex;align-items:center;gap:8px;padding:0 0 4px;min-height:44px}
/* The button back to all games */
.back{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:inherit}
.back::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:.16}
.back:active::before{opacity:.3}
.back svg{position:relative;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.back:focus-visible{outline:3px solid #fff;outline-offset:2px}
h1{margin:0 auto 0 0;font-size:min(22px,6vw);font-weight:700;letter-spacing:.01em;white-space:nowrap}
header p{margin:0;font-size:15px;white-space:nowrap}

/* The space, and the blocks that go in it */
.stage{position:relative;flex:1;min-height:0;touch-action:none}
.board{position:absolute;border-radius:2px;background-color:var(--mat-deep);background-image:linear-gradient(rgba(243,236,210,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(243,236,210,.16) 1px,transparent 1px);background-size:var(--cell) var(--cell);outline:2px dashed rgba(243,236,210,.75);outline-offset:3px}
.board.done{outline:3px solid var(--sun)}
.ghost{position:absolute;left:0;top:0}
.ghost i{position:absolute;width:var(--cell);height:var(--cell);background:rgba(243,236,210,.26);outline:1px solid rgba(243,236,210,.65);outline-offset:-1px}
.piece{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform .16s ease-out;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.28))}
.piece i{position:absolute;width:var(--cell);height:var(--cell);background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);pointer-events:auto;touch-action:none;cursor:grab}
.piece.placed{filter:none}
.piece.held{z-index:5;filter:drop-shadow(0 10px 8px rgba(0,0,0,.35))}

.status{display:flex;align-items:baseline;justify-content:space-between;gap:12px;height:52px;padding:6px 0;font-size:15px;line-height:1.3}
.status p{margin:0}
.clock{white-space:nowrap;font-variant-numeric:tabular-nums}
#best{margin-left:10px;opacity:.75}
footer{display:flex;align-items:center;gap:8px}
footer .gap{flex:1}
button{-webkit-appearance:none;appearance:none;min-height:46px;padding:0 16px;border:0;border-radius:10px;background:var(--print);color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.4;cursor:default}
button.go{background:var(--sun)}
button:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.piece{transition:none}}