:root{--bg1:#0b0820;--bg2:#1a0f3d;--bg3:#04121f;--text:#e8e6ff;--muted:#9a95c9;--accent:#38e8ff;--accent2:#ff4fd8;--panel:#ffffff0d;--panel-border:#8c78ff40}*{box-sizing:border-box}html,body{background:radial-gradient(ellipse at 20% 0%, var(--bg2) 0%, transparent 60%), radial-gradient(ellipse at 90% 100%, #0d2a44 0%, transparent 55%), linear-gradient(160deg, var(--bg1), var(--bg3));min-height:100%;color:var(--text);background-attachment:fixed;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{min-height:100dvh}.app{max-width:560px;padding:12px 12px calc(12px + env(safe-area-inset-bottom));flex-direction:column;gap:10px;margin:0 auto;display:flex}.top{justify-content:space-between;align-items:center;display:flex}.logo{letter-spacing:.04em;color:var(--accent);text-shadow:0 0 8px #38e8ffb3,0 0 22px #38e8ff59;margin:0;font-size:clamp(1.5rem,5vw,2rem);font-weight:800}.logo span{color:var(--accent2);text-shadow:0 0 8px #ff4fd8b3,0 0 22px #ff4fd859}.hud{grid-template-columns:repeat(4,1fr) auto;align-items:stretch;gap:8px;display:grid}.stat{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;flex-direction:column;align-items:center;padding:6px 8px;display:flex;box-shadow:inset 0 0 12px #785aff1f}.stat .label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.68rem}.stat .value{font-variant-numeric:tabular-nums;font-size:1.15rem;font-weight:700}.stat .value.bump{animation:.35s bump}#combo.hot{color:#ffd23f;text-shadow:0 0 10px #ffd23fcc}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.3)}to{transform:scale(1)}}.btn{font:inherit;border:1px solid var(--panel-border);color:var(--text);background:var(--panel);cursor:pointer;border-radius:12px;padding:8px 14px;font-weight:700;transition:transform .1s,box-shadow .2s,background .2s}.btn:hover{box-shadow:0 0 14px #38e8ff59}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.45;cursor:default;box-shadow:none}.btn:focus-visible,.board:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.btn.hint{color:#ffd23f;border-color:#ffd23f73}.btn.hint small{opacity:.8;font-weight:400}.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#120a2a;border:none;padding:12px 22px;font-size:1.05rem;box-shadow:0 0 18px #ff4fd873}.board-wrap{position:relative}.board{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:1px solid var(--panel-border);cursor:pointer;background:#0503148c;border-radius:18px;width:100%;height:auto;max-height:calc(100dvh - 210px);display:block;box-shadow:0 0 30px #5a3cff2e,inset 0 0 40px #00000080}.board.shake{animation:.3s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.piece .hex{stroke-width:1.5px}.piece.star-born .hex{animation:.8s starflash}@keyframes starflash{0%{filter:brightness(3)}to{filter:brightness()}}.piece .symbol{fill:#ffffff8c;pointer-events:none}.cursor-hex{fill:#ffffff14;stroke:#fff;stroke-width:2.5px;filter:url(#glow)}.cursor-tri{fill:none;stroke:#ffffff8c;stroke-width:2px;stroke-dasharray:4 4}.cursor-dot{fill:#fff;filter:url(#glow)}.cursor.hint .cursor-hex{stroke:#ffd23f;animation:.8s ease-in-out infinite pulse}.cursor.hint .cursor-dot{fill:#ffd23f}@keyframes pulse{50%{stroke-opacity:.25}}.hint-arrow{fill:#ffd23f;text-anchor:middle;dominant-baseline:central;filter:url(#glow);font-size:26px;font-weight:800}.popups{pointer-events:none;position:absolute;inset:0;overflow:hidden}.popup{color:#fff;text-shadow:0 0 8px var(--accent), 0 0 16px var(--accent);white-space:nowrap;font-size:clamp(1rem,4vw,1.4rem);font-weight:800;animation:1s ease-out forwards floatup;position:absolute;transform:translate(-50%,-50%)}.popup.combo{color:#ffd23f;text-shadow:0 0 8px #ff9f1c,0 0 18px #ff4fd8;font-size:clamp(1.2rem,5vw,1.8rem)}.popup.star{color:#fff;text-shadow:0 0 10px #fff,0 0 20px #ff4fd8}.popup.minus{color:#ff6b8b;text-shadow:0 0 8px #ff2d55}@keyframes floatup{0%{opacity:0;transform:translate(-50%,-30%)scale(.7)}15%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}to{opacity:0;transform:translate(-50%,-160%)scale(1)}}.help{color:var(--muted);text-align:center;margin:0;font-size:.78rem;line-height:1.5}.seed{color:#6b6699;text-align:center;margin:0;font-size:.7rem}kbd{border:1px solid var(--panel-border);background:#ffffff0f;border-radius:4px;padding:1px 5px;font-family:inherit;font-size:.72rem}.modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;background:#03020cb3;place-items:center;animation:.3s fadein;display:grid;position:fixed;inset:0}.modal[hidden]{display:none}.modal-card{border:1px solid var(--panel-border);text-align:center;background:linear-gradient(160deg,#1d1248,#0c1b30);border-radius:20px;min-width:260px;padding:28px 32px;box-shadow:0 0 40px #ff4fd84d}.modal-card h2{color:var(--accent2);text-shadow:0 0 12px #ff4fd8b3;margin:0 0 12px;font-size:1.8rem}.final{margin:6px 0;font-size:1.2rem}.final.small{color:var(--muted);font-size:.95rem}.new-record{color:#ffd23f;text-shadow:0 0 10px #ffd23fcc;font-weight:800}.modal-card .btn{margin-top:14px}@keyframes fadein{0%{opacity:0}to{opacity:1}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=420px){.app{gap:8px;padding:8px}.hud{grid-template-columns:repeat(4,1fr)}.btn.hint{grid-column:1/-1}.stat .value{font-size:1rem}.board{max-height:calc(100dvh - 250px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}
