:root{--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:0;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#cbd5e1;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 20% 10%,#14b8a629,#0000 28rem),radial-gradient(circle at 84% 18%,#f472b61a,#0000 24rem),linear-gradient(145deg,#020617 0%,#101827 52%,#070b14 100%)}@media (width<=1024px){:root{font-size:16px}}#root{min-height:100svh}body{margin:0}*{box-sizing:border-box}.game-shell{box-sizing:border-box;place-items:center;min-height:100svh;padding:24px;display:grid}.play-area{grid-template-columns:minmax(260px,430px) minmax(220px,300px);align-items:start;gap:24px;width:min(100%,980px);display:grid}.board-wrap{justify-self:center;width:100%;max-width:430px;position:relative}.board{aspect-ratio:1/2;box-sizing:border-box;background:linear-gradient(#0f172ad6,#020617f5),repeating-linear-gradient(0deg,#0000 0 calc(5% - 1px),#94a3b80f calc(5% - 1px) 5%);border:1px solid #94a3b838;border-radius:8px;grid-template-rows:repeat(20,1fr);grid-template-columns:repeat(10,1fr);gap:3px;padding:8px;display:grid;box-shadow:0 22px 70px #0000006b}.cell,.preview-cell{background:#0f172ad1;border-radius:4px;min-width:0;min-height:0;box-shadow:inset 0 0 0 1px #94a3b80f}.cell-i{background:linear-gradient(135deg,#5eead4,#0891b2)}.cell-j{background:linear-gradient(135deg,#60a5fa,#1d4ed8)}.cell-l{background:linear-gradient(135deg,#fbbf24,#f97316)}.cell-o{background:linear-gradient(135deg,#fde047,#eab308)}.cell-s{background:linear-gradient(135deg,#86efac,#16a34a)}.cell-t{background:linear-gradient(135deg,#c084fc,#7c3aed)}.cell-z{background:linear-gradient(135deg,#fb7185,#e11d48)}.cell-i,.cell-j,.cell-l,.cell-o,.cell-s,.cell-t,.cell-z,.preview-cell[class*=cell-]{box-shadow:inset 0 2px #ffffff52,inset 0 -3px #0f172a33,0 5px 14px #00000047}.panel{gap:16px;display:grid}.brand,.stat,.preview-panel,.controls{background:#0f172aad;border:1px solid #94a3b82e;border-radius:8px;box-shadow:0 18px 50px #00000038}.brand{text-align:left;padding:20px}.brand span,.stat span,.preview-panel span,.controls span{color:#94a3b8;text-transform:uppercase;font-size:.78rem;font-weight:800;display:block}.brand strong{color:#f8fafc;margin-top:6px;font-size:clamp(2rem,8vw,3.6rem);line-height:.96;display:block}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.stat{text-align:left;padding:14px}.stat strong{color:#f8fafc;font-family:var(--mono);margin-top:8px;font-size:1.35rem;line-height:1;display:block}.preview-panel{justify-items:start;gap:14px;padding:18px;display:grid}.next-piece{aspect-ratio:1;grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);gap:4px;width:128px;display:grid}.controls{flex-wrap:wrap;align-items:center;gap:8px;padding:16px;display:flex}.controls span{flex:1 0 100%}kbd{color:#e2e8f0;min-width:34px;min-height:32px;font-family:var(--mono);box-sizing:border-box;background:#020617b3;border:1px solid #94a3b838;border-radius:6px;place-items:center;padding:0 10px;font-size:.85rem;display:inline-grid}button{color:#042f2e;min-height:44px;font:800 .95rem/1 var(--sans);cursor:pointer;background:linear-gradient(135deg,#99f6e4,#22d3ee);border:1px solid #5eead461;border-radius:7px;transition:transform .14s,box-shadow .14s,border-color .14s}button:hover{transform:translateY(-1px);box-shadow:0 12px 28px #22d3ee2e}button:focus-visible{outline-offset:3px;outline:3px solid #5eead473}.restart{width:100%}.game-over{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;background:#020617d1;border-radius:8px;place-content:center;justify-items:center;gap:14px;padding:24px;display:grid;position:absolute;inset:8px}.game-over h2{color:#f8fafc;margin:0;font-size:clamp(2rem,9vw,4rem);line-height:1}.game-over p{color:#cbd5e1;font-family:var(--mono)}@media (width<=760px){.game-shell{place-items:start center;padding:14px}.play-area{grid-template-columns:1fr;gap:14px}.board-wrap{max-width:min(100%,46svh)}.panel{grid-template-columns:1fr 1fr;gap:10px;width:100%}.brand,.stats-grid,.controls,.restart{grid-column:1/-1}.brand{padding:16px}.brand strong{font-size:2rem}.preview-panel{padding:14px}.next-piece{width:min(100%,104px)}}