@font-face{font-family:New Rocker;src:local("New Rocker"),local("NewRocker-Regular"),url(../fonts/NewRocker-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{color-scheme:dark;--bg: #0f1419;--panel: #152028;--fg: #e7ecf1;--muted: #8b98a5;--accent: #3d9a6a;--border: #1e2a33;--font-ui: "New Rocker", "Segoe UI", sans-serif;--font-num: "Share Tech Mono", "Courier New", monospace;--mult-x1: #3d9a6a;--mult-x2: #3b82f6;--mult-x3: #a855f7;--mult-x4: #f59e0b;--mult-x5: #ef4444;font-family:var(--font-ui);line-height:1.3;color:var(--fg);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;-webkit-user-select:none;user-select:none}#app{height:100%;margin:0;padding:0;-webkit-user-select:none;user-select:none}button,input,.btn,.menu-item{-webkit-user-select:none;user-select:none}.shell{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:0}.header{flex:0 0 auto;text-align:center;margin:0;line-height:1}h1{margin:0;font-family:var(--font-ui);font-size:1.25rem;letter-spacing:.08em;color:var(--accent)}.menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 28%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.menu-overlay.hidden{display:none}.menu-panel{text-align:center;min-width:12rem;padding:1.25rem 1.5rem;background:var(--panel);border:1px solid var(--border);box-shadow:0 8px 32px color-mix(in srgb,#000 45%,transparent)}.menu-title{margin:0 0 .75rem;font-family:var(--font-ui);font-size:1.1rem;font-weight:400;letter-spacing:.06em;color:var(--accent)}.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}.menu-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:1px solid var(--border);background:var(--panel);color:var(--fg);font-family:var(--font-ui);font-size:.95rem;padding:.45rem 1rem;cursor:pointer;text-align:center}.menu-item:hover,.menu-item:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}.playfield{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:.5rem;margin:0}.board-wrap{position:relative;flex:0 0 auto}#board{display:block;outline:1px solid rgba(0,232,255,.28);outline-offset:1px;box-shadow:0 0 8px #00e8ff47,0 0 18px #ff00aa24}.hud{--hud-crt-bg: #05080f;--hud-crt-frame: #00e8ff;--hud-crt-frame-glow: rgba(255, 0, 170, .45);--hud-crt-scanline: rgba(0, 230, 255, .07);--hud-crt-scan-shade: rgba(0, 0, 0, .14);--hud-crt-inner-glow: rgba(0, 200, 255, .1);--hud-crt-corner: rgba(0, 245, 255, .55);position:relative;isolation:isolate;overflow:hidden;flex:0 0 auto;background:var(--hud-crt-bg);border:1px solid rgba(0,232,255,.28);outline:1px solid rgba(0,232,255,.28);outline-offset:1px;padding:.55rem .7rem;min-width:6.5rem;display:flex;flex-direction:column;justify-content:flex-start;gap:.45rem;box-shadow:0 0 8px #00e8ff47,0 0 18px #ff00aa24,inset 0 0 0 1.5px var(--hud-crt-frame),inset 0 0 10px var(--hud-crt-frame-glow)}.hud:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,var(--hud-crt-inner-glow) 0%,transparent 70%),radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(0,0,0,.45) 100%)}.hud:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:linear-gradient(var(--hud-crt-corner),var(--hud-crt-corner)) 3px 3px / 10px 2px no-repeat,linear-gradient(var(--hud-crt-corner),var(--hud-crt-corner)) 3px 3px / 2px 10px no-repeat,linear-gradient(var(--hud-crt-corner),var(--hud-crt-corner)) calc(100% - 3px) 3px / 10px 2px no-repeat,linear-gradient(var(--hud-crt-corner),var(--hud-crt-corner)) calc(100% - 3px) 3px / 2px 10px no-repeat,linear-gradient(var(--hud-crt-corner),var(--hud-crt-corner)) 3px calc(100% - 3px) / 10px 2px no-repeat,linear-gradient(var(--hud-crt-corner),var(--hud-crt-corner)) 3px calc(100% - 3px) / 2px 10px no-repeat,linear-gradient(var(--hud-crt-corner),var(--hud-crt-corner)) calc(100% - 3px) calc(100% - 3px) / 10px 2px no-repeat,linear-gradient(var(--hud-crt-corner),var(--hud-crt-corner)) calc(100% - 3px) calc(100% - 3px) / 2px 10px no-repeat,repeating-linear-gradient(to bottom,var(--hud-crt-scanline) 0,var(--hud-crt-scanline) 1px,transparent 1px,transparent 2px,var(--hud-crt-scan-shade) 2px,var(--hud-crt-scan-shade) 3px)}.hud>*{position:relative;z-index:1}.stat{display:flex;flex-direction:column;gap:.05rem}.stat span{font-family:var(--font-ui);font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.stat strong{font-family:var(--font-num);font-size:1.15rem;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.04em}.next-queue-wrap{display:flex;flex-direction:column;gap:.15rem;margin-top:.15rem}#next-queue{display:block;width:3rem;image-rendering:pixelated}.fly-piece{position:fixed;left:0;top:0;z-index:40;pointer-events:none;opacity:0;image-rendering:pixelated}.fly-piece.visible{opacity:1}.status{margin:0;font-family:var(--font-ui);font-size:.75rem;color:var(--muted);min-height:2em}.controls-hint{list-style:none;margin:-.15rem 0 0;padding:0;display:flex;flex-direction:column;gap:.1rem;font-family:var(--font-ui);font-size:.58rem;line-height:1.25;letter-spacing:.04em;color:var(--muted)}.controls-hint[hidden]{display:none}.controls-hint kbd{font-family:var(--font-ui);font-size:inherit;font-weight:400;color:var(--fg);opacity:.9}.gameover-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;padding:.75rem;text-align:center;background:color-mix(in srgb,#000 42%,transparent);pointer-events:auto}.gameover-overlay.hidden{display:none}.gameover-title{position:relative;margin:0;font-family:var(--font-ui);font-size:clamp(2.1rem,9vw,3.4rem);font-weight:400;letter-spacing:.06em;line-height:1.05;transform-origin:center center;transform:scale(1)}.gameover-overlay.gameover-animating .gameover-title{animation:gameover-title-bounce .7s cubic-bezier(.22,1,.36,1) both}.gameover-title-shadow,.gameover-title-fg{display:block}.gameover-title-shadow{position:absolute;top:0;right:0;bottom:0;left:0;color:#000;transform:translate(3px,3px);pointer-events:none;-webkit-user-select:none;user-select:none}.gameover-title-fg{position:relative;color:#ef4444}.gameover-scores{display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:7rem}.gameover-overlay.gameover-animating .gameover-scores,.gameover-overlay.gameover-animating .gameover-actions{animation:gameover-info-fade .45s ease-out .22s both}.gameover-scores .stat{align-items:center}.gameover-scores .stat span{color:color-mix(in srgb,var(--muted) 85%,#fff)}.gameover-scores .stat strong{font-size:1.35rem}.gameover-actions{display:flex;flex-direction:column;gap:.35rem;width:min(100%,9rem);margin-top:.15rem}@keyframes gameover-title-bounce{0%{transform:scale(0)}55%{transform:scale(1.22)}72%{transform:scale(.92)}86%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes gameover-info-fade{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.gameover-overlay.gameover-animating .gameover-title,.gameover-overlay.gameover-animating .gameover-scores,.gameover-overlay.gameover-animating .gameover-actions{animation:none}}.btn.hidden{display:none}.hud>.btn{margin-top:0}.hud>#end-ai-run:not(.hidden){margin-top:auto}.hud>#open-menu{margin-top:auto}.hud>#end-ai-run:not(.hidden)+#open-menu{margin-top:0}.btn{margin-top:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid color-mix(in srgb,var(--accent) 70%,#0a1014);background:var(--accent);color:#0a1014;font-family:var(--font-ui);font-size:.85rem;padding:.4rem .55rem;cursor:pointer;box-shadow:0 1px color-mix(in srgb,#000 35%,transparent)}.gameover-actions .btn{margin-top:0;width:100%;background:var(--accent);color:#0a1014;border-color:color-mix(in srgb,var(--accent) 55%,#fff)}.gameover-actions .btn:last-child{background:var(--panel);color:var(--fg);border-color:color-mix(in srgb,var(--border) 40%,var(--fg))}.gameover-actions #go-rank{background:color-mix(in srgb,#00e8ff 55%,var(--accent));border-color:#00e8ff;color:#05080f;box-shadow:0 0 10px #00e8ff59}.ranking-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:.75rem;background:radial-gradient(ellipse at 50% 20%,rgba(0,232,255,.12),transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(255,0,170,.1),transparent 50%),color-mix(in srgb,#05080f 88%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.ranking-panel{width:min(22rem,100%);max-height:min(92vh,40rem);overflow:auto;padding:1.1rem 1.15rem 1rem;background:#0a1018;border:1px solid rgba(0,232,255,.45);box-shadow:0 0 12px #00e8ff40,0 0 28px #ff00aa1f,inset 0 0 0 1px #00e8ff26}.ranking-title{margin:0;font-family:var(--font-ui);font-size:1.45rem;font-weight:400;letter-spacing:.12em;text-align:center;color:#00e8ff;text-shadow:0 0 12px rgba(0,232,255,.45)}.ranking-sub{margin:.25rem 0 .75rem;font-family:var(--font-num);font-size:.7rem;letter-spacing:.06em;text-align:center;color:var(--muted)}.ranking-board{display:flex;flex-direction:column;gap:.75rem}.rank-section{margin:0}.rank-heading{margin:0 0 .35rem;font-family:var(--font-ui);font-size:.78rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#f0a;text-shadow:0 0 8px rgba(255,0,170,.4)}.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem}.rank-row{display:grid;grid-template-columns:3.2rem 1fr 3.5rem;gap:.35rem;align-items:baseline;padding:.28rem .4rem;border:1px solid rgba(0,232,255,.18);background:color-mix(in srgb,#05080f 70%,#152028)}.rank-row.rank-empty{opacity:.55}.rank-pos{font-family:var(--font-num);font-size:.75rem;color:#00e8ff;letter-spacing:.04em}.rank-name{font-family:var(--font-ui);font-size:.85rem;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-score{font-family:var(--font-num);font-size:.95rem;text-align:right;color:#e7ecf1;letter-spacing:.04em}.ranking-form{margin-top:.85rem;display:flex;flex-direction:column;gap:.35rem}.ranking-label{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-ui);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.ranking-limit{font-family:var(--font-num);font-size:.65rem;letter-spacing:.04em;text-transform:none;color:color-mix(in srgb,var(--muted) 80%,#00e8ff)}.ranking-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;border:1px solid rgba(0,232,255,.4);background:#05080f;color:var(--fg);font-family:var(--font-num);font-size:1rem;letter-spacing:.06em;padding:.45rem .55rem;outline:none;-webkit-user-select:text;user-select:text}.ranking-input:focus{border-color:#00e8ff;box-shadow:0 0 0 1px #00e8ff59}.ranking-hint{margin:0;font-family:var(--font-num);font-size:.72rem;color:var(--muted);letter-spacing:.04em}.ranking-submit{margin-top:.25rem;width:100%;background:color-mix(in srgb,#00e8ff 55%,var(--accent));border-color:#00e8ff;color:#05080f}.ranking-submit:disabled{opacity:.55;cursor:not-allowed}.ranking-input:disabled{opacity:.55;cursor:not-allowed}.ranking-close{margin-top:.65rem;width:100%;background:var(--panel);color:var(--fg);border-color:color-mix(in srgb,var(--border) 40%,var(--fg))}.ranking-close:hover,.ranking-close:focus-visible{border-color:var(--accent);color:var(--accent);filter:none;background:color-mix(in srgb,var(--panel) 85%,var(--accent))}.btn:hover,.btn:focus-visible{filter:brightness(1.08);outline:none}.gameover-actions .btn:last-child:hover,.gameover-actions .btn:last-child:focus-visible{border-color:var(--accent);color:var(--accent);filter:none;background:color-mix(in srgb,var(--panel) 85%,var(--accent))}.points-popup{position:absolute;left:50%;top:18%;transform:translate(-50%,8px);z-index:20;display:flex;align-items:baseline;gap:.35rem;pointer-events:none;opacity:0;transition:opacity .35s ease,transform .35s ease}.points-popup.visible{opacity:1;transform:translate(-50%)}.points-popup.hiding{opacity:0;transform:translate(-50%,-12px)}.points-popup .mult{font-family:var(--font-ui);font-size:1.55rem;line-height:1;text-shadow:0 1px 4px color-mix(in srgb,#000 55%,transparent)}.points-popup .gain{font-family:var(--font-num);font-size:1.2rem;font-weight:400;color:var(--fg);letter-spacing:.04em;text-shadow:0 1px 4px color-mix(in srgb,#000 55%,transparent)}.points-popup.x1 .mult{color:var(--mult-x1)}.points-popup.x2 .mult{color:var(--mult-x2)}.points-popup.x3 .mult{color:var(--mult-x3)}.points-popup.x4 .mult{color:var(--mult-x4)}.points-popup.x5 .mult{color:var(--mult-x5)}
