:root{--bg:#07060f;--bg2:#120f26;--panel:#ffffff0a;--line:#ffffff1f;--text:#e8e6ff;--muted:#9a96c4;--on:#00f0ff;--on2:#ff2bd6;--off:#1a1733;--gold:#ffd84d;--danger:#ff4d6d;--flip:.2s;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(circle at 50% -10%, var(--bg2), var(--bg) 60%) fixed;color:var(--text);min-width:320px}#app{max-width:640px;margin:0 auto;padding:16px 12px 32px}.screen{animation:.25s fade;display:none}.screen.active{display:block}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}h1,h2{margin:0}.logo{text-align:center;letter-spacing:.04em;color:#fff;text-shadow:0 0 6px var(--on), 0 0 18px var(--on), 0 0 40px var(--on);margin-top:6vh;font-size:clamp(2rem,9vw,3.4rem)}.logo span{color:#fff;text-shadow:0 0 6px var(--on2), 0 0 18px var(--on2), 0 0 40px var(--on2)}.tagline{text-align:center;color:var(--muted);margin:12px 0 28px}.menu-buttons{gap:12px;max-width:360px;margin:0 auto;display:grid}.btn{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;border-radius:12px;padding:12px 16px;transition:border-color .15s,box-shadow .15s,transform .1s,background .15s}.btn:hover{border-color:var(--on);box-shadow:0 0 12px #00f0ff59}.btn:active{transform:scale(.97)}.btn:focus-visible,.cell:focus-visible,.level:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;border-color:var(--line)}.btn.primary{border-color:var(--on);background:linear-gradient(90deg,#00f0ff40,#ff2bd640);font-weight:600}.btn.danger:hover{border-color:var(--danger);box-shadow:0 0 12px #ff4d6d66}.btn.small{padding:8px 12px;font-size:.9rem}.row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.row .btn{flex:auto}.random-box{border:1px solid var(--line);border-radius:12px;margin:0;padding:8px 10px 12px}.random-box legend{color:var(--muted);padding:0 6px;font-size:.9rem}.help{max-width:420px;color:var(--muted);margin:28px auto 0}.help summary{cursor:pointer}.help ul{padding-left:20px;line-height:1.5}kbd{border:1px solid var(--line);border-radius:4px;padding:0 4px;font-size:.85em}.bar{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-bottom:14px;display:grid}.bar h2{text-align:center;text-shadow:0 0 10px var(--on);font-size:1.25rem}.total-stars{color:var(--gold);white-space:nowrap}.level-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;display:grid}.level{font:inherit;color:var(--text);aspect-ratio:1;border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:4px;transition:box-shadow .15s,border-color .15s;display:flex}.level:not(:disabled):hover{border-color:var(--on);box-shadow:0 0 14px #00f0ff66}.level .num{font-size:1.5rem;font-weight:700}.level .meta{color:var(--muted);font-size:.7rem}.level:disabled{opacity:.45;cursor:not-allowed}.level .lock{font-size:1.3rem}.stars{color:var(--gold);letter-spacing:2px;font-size:.85rem}.stars .empty{color:#ffffff2e}.stars.big{text-align:center;text-shadow:0 0 12px #ffd84d99;margin:8px 0;font-size:2.4rem}.hud{grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 14px;display:grid}.hud div,.win-stats div{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:10px;padding:6px 4px}.hud dt,.win-stats dt{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}.hud dd,.win-stats dd{font-variant-numeric:tabular-nums;margin:2px 0 0;font-size:1.15rem;font-weight:600}.board{--size:5;grid-template-columns:repeat(var(--size), 1fr);border:1px solid var(--line);background:#00000059;border-radius:18px;gap:clamp(4px,1.6vw,10px);width:min(100%,520px);margin:0 auto;padding:clamp(8px,2.5vw,16px);display:grid;box-shadow:inset 0 0 30px #0009}.cell{aspect-ratio:1;background:var(--off);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background var(--flip) ease, box-shadow var(--flip) ease, transform var(--flip) ease, border-color var(--flip) ease;border:1px solid #ffffff0f;border-radius:clamp(6px,2vw,12px);padding:0}.cell:hover{border-color:#00f0ff80}.cell.on{background:radial-gradient(circle at 35% 30%, #fff 0%, var(--on) 35%, #008c9e 100%);border-color:var(--on);box-shadow:0 0 8px var(--on), 0 0 22px #00f0ff8c}.cell.flip{animation:pop var(--flip) ease}@keyframes pop{50%{transform:scale(.88)}}.cell.hint{outline:3px dashed var(--on2);outline-offset:-3px;animation:.9s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 20px var(--on2), 0 0 36px var(--on2)}}.board.won .cell{cursor:default}.status{text-align:center;min-height:1.4em;color:var(--muted);margin:10px 0}.controls{grid-template-columns:repeat(3,1fr);gap:8px;max-width:520px;margin:0 auto;display:grid}dialog{color:var(--text);border:1px solid var(--on);background:linear-gradient(160deg,#1a1535,#0c0a1c);border-radius:18px;width:min(92vw,420px);padding:20px;box-shadow:0 0 30px #00f0ff59}dialog[open]{animation:.25s fade}dialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#03020ab3}dialog h2{text-align:center;text-shadow:0 0 10px var(--on2)}.win-stats{grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0;display:grid}.unlock{text-align:center;color:var(--on);min-height:1.2em}@media (width<=420px){#app{padding:10px 8px 24px}.hud dd{font-size:1rem}.controls .btn{padding:10px 4px;font-size:.85rem}.win-stats{grid-template-columns:repeat(2,1fr)}.level-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}}@media (prefers-reduced-motion:reduce){:root{--flip:.15s}.cell.hint{animation:none}}
