:root{--bg:#11140f;--surface:#181d15;--surface-2:#202718;--text:#f2f0df;--muted:#a9ae91;--line:#f2f0df29;--cell:#252d20;--cell-raised:#34412a;--accent:#d9ff52;--danger:#ff6b52;--clear:#72e8c5;--shadow:0 32px 80px #0000005c;--font:"Trebuchet MS", "Avenir Next", Verdana, sans-serif;font-family:var(--font);color:var(--text);background:radial-gradient(circle at top left, #d9ff522e, transparent 34rem), radial-gradient(circle at bottom right, #72e8c51f, transparent 28rem), var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button{font:inherit}#root{min-height:100svh}.game-shell{grid-template-columns:minmax(240px,.72fr) minmax(340px,1fr);align-items:center;gap:clamp(18px,3vw,42px);min-height:100svh;padding:clamp(18px,4vw,56px);display:grid;position:relative;overflow:hidden}.game-shell:before{z-index:-1;content:"";border:1px solid #f2f0df1f;border-radius:34px;position:absolute;inset:16px}.status-panel,.tray-panel{flex-direction:column;justify-content:space-between;gap:32px;padding-block:clamp(4px,2vw,22px);animation:.52s both rise-in;display:flex}.tray-panel{justify-self:center;width:min(100%,640px);animation-delay:.11s}.board-panel{place-items:center;gap:clamp(20px,3vw,32px);min-width:0;animation:.62s cubic-bezier(.2,.9,.2,1) both board-in;display:grid;position:relative}.eyebrow{color:var(--accent);letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px;font-size:.76rem;font-weight:800}h1,h2,p,dl{margin:0}h1{letter-spacing:-.08em;text-transform:uppercase;max-width:8ch;font-size:clamp(3.7rem,9vw,7.8rem);line-height:.82}h2{color:var(--text);letter-spacing:-.05em;font-size:clamp(1.3rem,3vw,2.1rem);line-height:1.02}.intro,.control-copy p{max-width:30rem;color:var(--muted);font-size:1rem;line-height:1.7}.intro{margin-top:24px}.score-strip{gap:14px;display:grid}.score-strip div{border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;padding-bottom:12px;display:flex}.score-strip dt{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.82rem}.score-strip dd{color:var(--accent);letter-spacing:-.08em;font-size:clamp(2rem,4vw,3.5rem);font-weight:900}.control-copy{gap:18px;display:grid}.control-actions{flex-wrap:wrap;gap:10px;display:flex}.control-copy button,.game-over button{color:#11140f;background:var(--accent);cursor:pointer;border:0;border-radius:999px;width:fit-content;padding:13px 20px;font-weight:900;transition:transform .18s,filter .18s}.control-copy button.camera-toggle{color:var(--text);background:#f2f0df14;border:1px solid #f2f0df2e}.control-copy button:disabled{cursor:wait;filter:saturate(.5);opacity:.7}.control-copy button:hover,.game-over button:hover{filter:brightness(1.05);transform:translateY(-2px)}.camera-status{min-height:2.8em;color:var(--muted);font-size:.9rem;line-height:1.55}.board-frame{background:linear-gradient(145deg, #ffffff14, transparent 34%), var(--surface);width:min(100%,640px);box-shadow:var(--shadow);border:1px solid #f2f0df2e;border-radius:clamp(22px,4vw,40px);padding:clamp(12px,2.3vw,26px)}.board-grid{aspect-ratio:1;touch-action:none;gap:clamp(4px,.8vw,8px);display:grid}.board-cell{background:linear-gradient(145deg, #ffffff0a, transparent), var(--cell);border:1px solid #f2f0df0f;border-radius:clamp(6px,1.15vw,13px);transition:transform .15s,background .15s,box-shadow .15s,border-color .15s;position:relative}.board-cell:hover,.board-cell:focus-visible{border-color:#d9ff526b;outline:0;transform:translateY(-1px)}.board-cell.is-filled{background:radial-gradient(circle at 30% 24%, #ffffff52, transparent 24%), linear-gradient(145deg, var(--accent), #95cf34);border-color:#d9ff5261;box-shadow:inset 0 -6px #11140f2e}.board-cell.is-preview-valid{background:#d9ff526b;border-color:#d9ff52d9;box-shadow:0 0 0 2px #d9ff523d}.board-cell.is-preview-invalid{background:#ff6b5252;border-color:#ff6b52e6}.board-cell.will-clear:after{border-radius:inherit;background:var(--clear);opacity:.62;content:"";animation:.76s ease-in-out infinite alternate pulse-clear;position:absolute;inset:20%}.game-over{width:min(86%,360px);color:var(--text);box-shadow:var(--shadow);text-align:center;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#11140fe0;border:1px solid #f2f0df33;border-radius:24px;gap:18px;padding:24px;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.game-over button{justify-self:center}.piece-tray{flex-flow:wrap;justify-content:center;align-items:flex-end;gap:clamp(18px,3vw,34px);width:100%;display:flex}.piece-button{width:max-content;max-width:100%;color:var(--text);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:0 0;border:0;place-items:center;padding:0;transition:opacity .18s,transform .18s;display:grid}.piece-button:hover:not(:disabled),.piece-button.is-selected{transform:translate(-4px)}.piece-button:active:not(:disabled){cursor:grabbing}.piece-button:disabled{cursor:not-allowed}.piece-grid{pointer-events:none;place-content:start;gap:4px;width:82px;height:82px;display:grid}.mini-cell{border-radius:clamp(6px,1.15vw,13px);width:18px;height:18px}.mini-cell.filled{background:var(--accent);box-shadow:inset 0 -6px #11140f2e}.drag-ghost{z-index:20;pointer-events:none;place-items:center;display:grid;position:fixed;transform:translate(-50%,-50%)}.drag-ghost .piece-grid{place-content:start}.drag-ghost .mini-cell{border-radius:clamp(6px,1.15vw,13px)}.camera-feed{z-index:12;aspect-ratio:4/3;width:min(28vw,180px);box-shadow:var(--shadow);object-fit:cover;opacity:.72;pointer-events:none;background:#11140fb8;border:1px solid #f2f0df2e;border-radius:18px;display:none;position:fixed;bottom:22px;right:22px;transform:scaleX(-1)}.camera-feed.is-active{display:block}.hand-cursor{z-index:30;border:2px solid var(--accent);pointer-events:none;background:#d9ff521f;border-radius:50%;width:30px;height:30px;transition:background .12s,height .12s,width .12s;position:fixed;transform:translate(-50%,-50%);box-shadow:0 0 0 8px #d9ff521f,0 0 30px #d9ff5266}.hand-cursor.is-pinching{background:var(--accent);width:22px;height:22px}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes board-in{0%{opacity:0;transform:scale(.96)rotate(-1.5deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes pulse-clear{0%{transform:scale(.7)}to{transform:scale(1)}}@media (width<=1240px){.game-shell{grid-template-columns:1fr;padding:18px}.status-panel,.tray-panel{align-items:stretch;padding-block:0}h1{max-width:none}.score-strip{grid-template-columns:repeat(3,1fr)}.score-strip div{gap:4px;display:grid}.piece-tray{align-items:flex-start}}@media (width<=640px){.game-shell:before{border-radius:22px;inset:8px}.score-strip{grid-template-columns:1fr}.score-strip div{display:flex}.board-frame{padding:10px}.board-grid{gap:4px}.piece-button{justify-items:center}}