*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:dark;--color-bg: #07060c;--color-panel: #100e1a;--color-panel-raised: #171426;--color-line: #2a2540;--color-cyan: #2be9ff;--color-magenta: #ff2bd6;--color-yellow: #f4ff3c;--color-text: #eef0ff;--color-muted: #8d89ab;--font-display: "Press Start 2P", system-ui, sans-serif}body{min-height:100dvh;background:var(--color-bg);color:var(--color-text)}.page{max-width:60ch;margin-inline:auto;padding:3rem 2rem;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center}.page h1{font-family:var(--font-display);font-size:2rem;color:var(--color-cyan);text-shadow:0 0 12px color-mix(in srgb,var(--color-cyan) 70%,transparent)}.page p{color:var(--color-muted)}.game{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 1rem 1.5rem;overflow-x:hidden}.game:after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;mix-blend-mode:overlay;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0px,rgba(255,255,255,.04) 1px,transparent 1px,transparent 3px)}.wordmark{display:flex;gap:.2em;margin:.25rem 0 0;font-family:var(--font-display);font-size:clamp(1.4rem,6vw,2.4rem);text-transform:uppercase;letter-spacing:.04em;line-height:1}.wordmark__part--cyan{color:var(--color-cyan);text-shadow:2px 0 var(--color-magenta),-2px 0 var(--color-yellow),0 0 12px color-mix(in srgb,var(--color-cyan) 70%,transparent)}.wordmark__part--magenta{color:var(--color-magenta);text-shadow:2px 0 var(--color-yellow),-2px 0 var(--color-cyan),0 0 12px color-mix(in srgb,var(--color-magenta) 70%,transparent)}.game__layout{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1rem;width:100%;max-width:640px}@media(min-width:900px){.game__layout{max-width:min(1200px,92vw)}.board__grid{width:min(40dvh,480px)}.panel{width:min(22vw,240px)}}.board{position:relative;padding:6px;background:var(--color-panel);border:2px solid var(--color-cyan);box-shadow:0 0 4px var(--color-cyan),0 0 20px color-mix(in srgb,var(--color-cyan) 35%,transparent);animation:borderPulse 3.5s ease-in-out infinite alternate}@keyframes borderPulse{0%{box-shadow:0 0 4px var(--color-cyan),0 0 14px color-mix(in srgb,var(--color-cyan) 25%,transparent)}to{box-shadow:0 0 6px var(--color-cyan),0 0 24px color-mix(in srgb,var(--color-cyan) 45%,transparent)}}.board__grid{display:flex;flex-direction:column;gap:1px;background:var(--color-line);width:min(80vw,260px);aspect-ratio:1 / 2}.board__row{display:flex;flex:1;gap:1px}.cell{flex:1;background:var(--color-bg)}.cell--filled{background:var(--cell-color);box-shadow:inset 0 0 5px #00000080}.cell--active{background:var(--cell-color);box-shadow:0 0 8px var(--cell-color),inset 0 0 4px #ffffff80}.cell--ghost{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-text) 35%,transparent)}.cell--clearing{background:#fff;box-shadow:0 0 12px #fff;animation:clearFlash .13s ease-in-out 2}@keyframes clearFlash{0%{opacity:1}to{opacity:.3}}.overlay{position:absolute;inset:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:1rem;text-align:center;background:#07060ce6;animation:snapIn .15s ease-out}@keyframes snapIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.overlay__title{font-family:var(--font-display);font-size:clamp(1rem,5vw,1.4rem);text-transform:uppercase;color:var(--color-yellow);text-shadow:0 0 10px color-mix(in srgb,var(--color-yellow) 60%,transparent)}.overlay__body{color:var(--color-text);font-size:.9rem}.overlay__badge{font-family:var(--font-display);font-size:.65rem;color:var(--color-magenta);text-shadow:0 0 8px color-mix(in srgb,var(--color-magenta) 60%,transparent)}.btn{font-family:var(--font-display);font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;padding:.7em 1.1em;color:var(--color-cyan);background:transparent;border:2px solid var(--color-cyan);border-radius:0;cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out,box-shadow .12s ease-out,transform .12s ease-out}.btn:hover,.btn:focus-visible{background:var(--color-cyan);color:var(--color-bg);box-shadow:0 0 14px var(--color-cyan);transform:translateY(-1px)}.btn--primary{color:var(--color-magenta);border-color:var(--color-magenta)}.btn--primary:hover,.btn--primary:focus-visible{background:var(--color-magenta);color:var(--color-bg);box-shadow:0 0 14px var(--color-magenta)}.panel{display:flex;flex-direction:column;gap:.85rem;width:min(80vw,200px);padding:.85rem;background:var(--color-panel);border:2px solid var(--color-line)}.panel__stat h2{margin:0 0 .25rem;font-family:var(--font-display);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}.panel__stat p{margin:0;font-family:var(--font-display);font-size:1.05rem;color:var(--color-yellow);text-shadow:0 0 8px color-mix(in srgb,var(--color-yellow) 50%,transparent)}.preview{display:grid;gap:2px;width:64px;height:64px;background:var(--color-line)}.preview__cell{background:var(--color-bg)}.preview__cell--filled{background:var(--cell-color);box-shadow:0 0 6px var(--cell-color)}.panel__actions{display:flex;flex-wrap:wrap;gap:.5rem}.controls{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"rotate rotate rotate" "left down right" "drop drop drop";gap:.5rem;width:min(80vw,260px)}.controls__btn{font-family:var(--font-display);font-size:.6rem;letter-spacing:.04em;padding:.75em .5em;color:var(--color-cyan);background:var(--color-panel);border:2px solid var(--color-line);border-radius:0;cursor:pointer;transition:border-color .12s ease-out,box-shadow .12s ease-out,transform .1s ease-out}.controls__btn:hover,.controls__btn:focus-visible{border-color:var(--color-cyan);box-shadow:0 0 10px color-mix(in srgb,var(--color-cyan) 60%,transparent)}.controls__btn:active{transform:scale(.94)}.controls__btn--rotate{grid-area:rotate}.controls__btn--left{grid-area:left}.controls__btn--down{grid-area:down}.controls__btn--right{grid-area:right}.controls__btn--drop{grid-area:drop;color:var(--color-magenta)}@media(hover:hover)and (pointer:fine){.controls{display:none}}