:root{--background: #141414;--surface: #f7f3ea;--surface-muted: #e8e2d4;--ink: #171717;--soft-ink: #59544c;--line: #37322d;--shadow: rgba(0, 0, 0, .24);--cyan: #37c8c3;--blue: #4d8dff;--green: #7bc950;--yellow: #f3cd45;--orange: #f08a3e;--pink: #e95888;--violet: #8b6be8;--cell: min(4.2vh, 2.05rem);color:var(--ink);background:var(--background);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;letter-spacing:0;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;margin:0;background:linear-gradient(135deg,rgba(55,200,195,.2),transparent 32%),linear-gradient(315deg,rgba(240,138,62,.18),transparent 30%),var(--background);overflow-x:hidden;overscroll-behavior:none}button{font:inherit}.app-shell{width:100%;min-height:100vh;display:grid;place-items:center;padding:1.5rem}.game-layout{width:min(100%,68rem);display:grid;gap:1rem;padding:1rem;border:2px solid #2a2825;border-radius:8px;background:var(--surface);box-shadow:0 1.25rem 3rem var(--shadow)}.game-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.25rem .25rem 0}.eyebrow{margin:0 0 .15rem;color:var(--soft-ink);font-size:.78rem;font-weight:700;text-transform:uppercase}h1,h2,p{margin:0}h1{color:var(--ink);font-size:2rem;line-height:1}.status-pill{min-width:5.5rem;padding:.45rem .7rem;border:2px solid var(--line);border-radius:999px;background:var(--ink);color:var(--surface);font-size:.78rem;font-weight:800;text-align:center}.status-pill.paused{background:var(--yellow);color:var(--ink)}.status-pill.lost{background:var(--pink)}.play-area{display:grid;grid-template-columns:minmax(7.25rem,.8fr) auto minmax(10rem,1fr);gap:1rem;align-items:stretch}.side-rail{min-width:0;display:flex;flex-direction:column;gap:.75rem;padding:.9rem;border:2px solid var(--line);border-radius:8px;background:#fffaf0}.panel-title{color:var(--soft-ink);font-size:.85rem;text-transform:uppercase}.piece-frame,.queue-frame{display:grid;justify-items:center;gap:.45rem}.queue-frame{max-height:calc(var(--cell) * 13.2);overflow:hidden}.stats-grid{display:grid;gap:.65rem}.stat{display:grid;gap:.2rem;padding:.75rem;border:2px solid #cfc4b1;border-radius:8px;background:var(--surface)}.stat span{color:var(--soft-ink);font-size:.78rem;font-weight:700}.stat strong{color:var(--ink);font-size:1.35rem;line-height:1}.board-wrap{position:relative;display:grid;place-items:center;padding:.65rem;border:3px solid var(--ink);border-radius:8px;background:#22201e}.game-board,.piece-view{border-spacing:0;border-collapse:collapse;table-layout:fixed}.game-board{border:2px solid #111;background:#161514}.game-block{width:var(--cell);height:var(--cell);min-width:var(--cell);min-height:var(--cell);padding:0;border:1px solid rgba(255,255,255,.08)}.game-board .block-empty{background:linear-gradient(135deg,rgba(255,255,255,.035),transparent),#171615}.piece-view .block-empty{background:transparent;border-color:transparent}.piece-i{background:linear-gradient(135deg,#8ff4ef,var(--cyan))}.piece-j{background:linear-gradient(135deg,#8bb4ff,var(--blue))}.piece-l{background:linear-gradient(135deg,#ffc47b,var(--orange))}.piece-o{background:linear-gradient(135deg,#ffe977,var(--yellow))}.piece-s{background:linear-gradient(135deg,#a7eb77,var(--green))}.piece-t{background:linear-gradient(135deg,#b7a0ff,var(--violet))}.piece-z{background:linear-gradient(135deg,#ff8bac,var(--pink))}.piece-preview{background:repeating-linear-gradient(45deg,#ffffff2e 0,#ffffff2e .25rem,#ffffff0f .25rem,#ffffff0f .5rem),#3d3a35}.state-overlay{position:absolute;top:.65rem;right:.65rem;bottom:.65rem;left:.65rem;display:grid;place-content:center;gap:1rem;border-radius:6px;background:#141414d1;color:var(--surface);text-align:center}.state-overlay strong{font-size:1.4rem}.primary-action,.icon-button{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--line);border-radius:8px;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.primary-action{gap:.45rem;padding:.65rem .9rem;background:var(--yellow);color:var(--ink);font-weight:800}.controls{display:grid;grid-template-columns:repeat(9,minmax(2.75rem,1fr));gap:.5rem}.icon-button{min-height:3rem;background:var(--ink);color:var(--surface)}.icon-button svg,.primary-action svg{width:1.15rem;height:1.15rem;stroke-width:2.3}.icon-button:hover,.primary-action:hover{transform:translateY(-1px);box-shadow:0 .35rem #000}.icon-button:active,.primary-action:active{transform:translateY(1px);box-shadow:none}.icon-button:focus-visible,.primary-action:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}@media(max-width:900px){:root{--cell: min(3.9vh, 1.78rem)}.app-shell{place-items:start center;padding:1rem}.play-area{grid-template-columns:1fr auto}.left-rail{order:2}.board-wrap{order:1;grid-row:span 2}.right-rail{order:3}.controls{grid-template-columns:repeat(5,minmax(2.75rem,1fr))}}@media(max-width:680px){:root{--cell: min(4.1vw, 1.42rem)}.app-shell{padding:.75rem}.game-layout{gap:.75rem;padding:.75rem}.game-header{align-items:start}h1{font-size:1.45rem}.play-area{grid-template-columns:1fr}.board-wrap,.left-rail,.right-rail{order:initial}.side-rail{padding:.7rem}.left-rail{display:none}.right-rail{grid-template-columns:1fr 1fr;align-items:start}.stats-grid{grid-template-columns:repeat(3,1fr)}.stat{padding:.55rem}.stat strong{font-size:1rem}.controls{grid-template-columns:repeat(3,minmax(3rem,1fr))}}@media(max-height:620px)and (min-width:681px){:root{--cell: 1.3rem}.app-shell{place-items:start center}}