:root { color-scheme: dark; --bg:#0e1116; --panel:#171c23; --panel2:#1d242e; --line:#303a44; --ink:#f4f7fb; --muted:#9dabba; --lime:#b9ff49; --red:#ff8787; --shadow:0 24px 70px rgba(0,0,0,.27); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 49% -12%,#27372e 0%,transparent 55%),var(--bg); min-height:100vh; }
button,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,select:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
button:disabled { cursor:not-allowed; }
[hidden] { display:none !important; }
.app-shell { max-width:1170px; margin:auto; padding:0 22px 70px; }
.topbar { min-height:82px; padding:10px 0; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; border-bottom:1px solid #ffffff14; }
.platform-nav { flex:0 0 100%; }
.platform-back { display:inline-flex; align-items:center; min-height:32px; color:var(--ink); font-size:12px; text-underline-offset:4px; }
.platform-back:hover { color:var(--lime); }
.platform-back:focus-visible { outline:2px solid var(--lime); outline-offset:4px; border-radius:3px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); font-size:19px; font-weight:800; letter-spacing:.06em; text-decoration:none; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; height:37px; min-width:47px; padding:0 5px; background:var(--lime); color:#101713; border-radius:9px; font-size:16px; letter-spacing:-.1em; }
.brand-divider { font-size:13px; opacity:.65; margin:0 2px; }
.brand-light { font-weight:400; margin-left:2px; }
.build-tag { font-size:10px; font-weight:750; letter-spacing:.13em; color:var(--lime); background:#b9ff4917; border:1px solid #b9ff492e; padding:7px 9px; border-radius:6px; }
.top-actions { display:flex; align-items:center; margin-left:auto; gap:18px; }
.text-btn { color:var(--muted); border:0; background:transparent; padding:8px 0; font-size:12px; font-weight:650; }
.text-btn:hover { color:var(--ink); }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; margin-top:26px; }
.game-panel { border:1px solid var(--line); background:#151b22; border-radius:20px; padding:27px 29px 20px; box-shadow:var(--shadow); min-width:0; }
.level-top { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.eyebrow,.board-label,.aside-title,.level-picker-wrap label { font-size:10px; font-weight:750; letter-spacing:.15em; color:var(--muted); }
h1 { margin:6px 0 8px; font-size:clamp(28px,3.5vw,38px); letter-spacing:-.06em; line-height:1.05; }
h1 span,.guide-card h2 span { color:var(--lime); }
.stage-name { font-size:13px; color:#d7e0e9; }
.level-picker-wrap { display:grid; gap:8px; flex:0 0 auto; }
#level-picker { width:159px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#222b34; padding:9px 8px; font-size:11px; }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:23px 0 18px; }
.stat { display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:var(--panel2); border:1px solid #ffffff0b; border-radius:10px; }
.stat span { color:var(--muted); font-size:9px; letter-spacing:.075em; font-weight:800; }
.stat strong { font-size:20px; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.board-shell { background:#10151b; border:1px solid #34404b; border-radius:13px; padding:13px 13px 16px; position:relative; }
.board-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px; }
.hint-mode { color:#9caeab; font-size:11px; text-align:right; }
.board { width:100%; max-width:459px; margin:auto; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:4px; aspect-ratio:1; }
.cell { display:grid; place-items:center; min-width:0; padding:0; width:100%; border:1px solid #3b4a54; border-radius:6px; background:#26313a; color:var(--ink); font-size:clamp(13px,2.3vw,24px); font-weight:800; font-variant-numeric:tabular-nums; transition:background .12s ease, border-color .12s ease, transform .12s ease; }
.cell--blocked { background:#151b22; border:1px solid #ffffff08; cursor:default; border-radius:4px; }
.cell--empty { background:#202932; color:#58646f; }
.cell--empty:hover { background:#303e45; border-color:#718277; }
.cell--digit { box-shadow:inset 0 1px 0 #ffffff12; }
.cell-dot { font-size:18px; font-weight:400; opacity:.42; }
.cell--placeable .cell-dot { color:#a8b8c7; }
.cell--target { background:#263c32; border-color:#89cc60; box-shadow:inset 0 0 0 1px #a0ea7244; }
.cell--target .cell-dot { color:var(--lime); opacity:1; }
.direction-chooser { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; min-width:min(325px,90%); background:#242e36; border:1px solid #7dad61; box-shadow:0 12px 50px #000b; padding:17px; border-radius:12px; text-align:center; }
.direction-label { font-size:12px; margin-bottom:12px; color:var(--ink); }
.direction-options { display:flex; flex-direction:column; gap:7px; }
.direction-options button { background:#34414a; border:1px solid #53616c; padding:10px; border-radius:7px; color:var(--ink); font-size:13px; }
.direction-options button:hover { border-color:var(--lime); }
.toast { min-height:43px; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px 4px 5px; font-size:12px; color:#bec8d1; line-height:1.4; }
.toast.is-error { color:var(--red); animation:shake .22s ease; }
@keyframes shake { 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-4px) } 75%{ transform:translateX(4px) } }
.bank-area { border-top:1px solid #ffffff1b; padding-top:17px; }
.bank-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.bank-heading h2 { font-size:13px; margin:0; letter-spacing:-.01em; }
.bank-heading span { font-size:11px; color:var(--muted); }
.bank-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.bank-slot { display:grid; place-items:center; height:64px; min-width:0; padding:4px; border-radius:10px; border:1px solid #424f59; background:#26323b; color:var(--ink); font-size:24px; font-weight:800; box-shadow:inset 0 1px 0 #ffffff0b; }
.bank-slot:hover { background:#34434c; transform:translateY(-1px); }
.bank-slot--selected,.bank-slot--selected:hover { background:#b9ff491c; color:var(--lime); border-color:var(--lime); box-shadow:0 0 0 2px #b9ff4930; }
.bank-slot--special { font-size:13px; letter-spacing:-.02em; }
.bank-slot--empty { border:1px dashed #34424b; background:transparent; color:#576673; font-size:18px; }
.second-bank { margin-top:19px; }
.apply-special { margin-top:10px; width:100%; background:var(--lime); border:0; padding:12px; color:#142013; border-radius:9px; font-size:13px; font-weight:800; }
.apply-special:hover { filter:brightness(1.06); }
.bank-meta { color:#81919d; font-size:10px; margin-top:12px; }
.game-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #ffffff12; margin-top:22px; padding-top:15px; }
.footer-button { background:transparent; border:1px solid #56636a; border-radius:8px; color:#d9e2e9; padding:10px 13px; font-size:12px; font-weight:650; }
.footer-button:hover { border-color:var(--lime); }
.game-footer span { color:#788994; font-size:10px; }
.side-panel { display:grid; gap:16px; }
.guide-card,.tip-card,.progress-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:23px; }
.tiny-dot { display:inline-block; border-radius:50%; width:7px; height:7px; background:var(--lime); vertical-align:middle; margin-right:7px; }
.guide-card h2 { font-size:26px; letter-spacing:-.045em; line-height:1.15; margin:15px 0; }
.guide-card p,.tip-card p,.progress-card p { font-size:12px; color:#aab9c6; line-height:1.7; margin:11px 0 0; }
.guide-card strong { color:#fff; }
.mini-example { margin-top:18px; padding:15px 3px; border-top:1px solid #ffffff17; border-bottom:1px solid #ffffff17; display:flex; align-items:center; gap:6px; justify-content:center; }
.mini-example span,.mini-example em,.mini-example small { height:34px; width:31px; border-radius:6px; display:grid; place-items:center; font-size:17px; font-weight:800; background:#2b353d; color:#fff; font-style:normal; }
.mini-example b { font-size:18px; color:var(--lime); }
.mini-example i { font-style:normal; margin:0 4px; color:var(--muted); }
.mini-example em { color:var(--lime); background:#334533; }
.mini-example small { color:#72818e; background:#232c34; }
.mini-note { margin-top:10px !important; }
.tip-card p { color:#dce6e9; }
.progress-value { display:flex; align-items:baseline; gap:7px; margin:17px 0 11px; }
.progress-value strong { font-size:27px; }
.progress-value span { font-size:12px; color:var(--muted); }
.progress-bar { height:7px; background:#37444a; border-radius:20px; overflow:hidden; }
.progress-bar span { display:block; width:0; height:100%; background:var(--lime); transition:width .25s; }
.aside-foot { padding:5px 8px; color:#6c7b89; font-size:11px; line-height:1.6; }
.overlay { position:fixed; inset:0; z-index:10; background:#060a0dc9; backdrop-filter:blur(5px); display:grid; place-items:center; padding:16px; }
.result-dialog { width:min(420px,100%); padding:30px 27px; border-radius:18px; border:1px solid #45564a; background:#1b242b; text-align:center; box-shadow:var(--shadow); }
.result-symbol { width:60px; height:60px; border-radius:50%; background:#b9ff491c; color:var(--lime); display:grid; place-items:center; margin:0 auto 14px; font-size:34px; }
.result-kicker { color:var(--lime); font-size:11px; font-weight:750; letter-spacing:.15em; }
.result-dialog h2 { font-size:27px; margin:10px 0; }
.result-dialog p { color:var(--muted); font-size:13px; line-height:1.5; }
.result-summary { display:flex; justify-content:space-between; padding:16px 5px; margin:20px 0; border-top:1px solid #ffffff1b; border-bottom:1px solid #ffffff1b; }
.result-summary div { display:grid; gap:7px; }
.result-summary span { color:var(--muted); font-size:10px; }
.result-summary strong { font-size:19px; }
.result-actions { display:grid; gap:9px; }
.primary-button,.secondary-button { padding:12px; border-radius:9px; font-size:13px; font-weight:800; }
.primary-button { border:0; background:var(--lime); color:#152216; }
.secondary-button { border:1px solid #556570; background:#2b3940; color:#f5f7fa; }
.help-dialog { width:min(540px,calc(100% - 20px)); background:#1b242b; color:var(--ink); border:1px solid #59665d; border-radius:15px; padding:26px; max-height:min(700px,90vh); box-shadow:var(--shadow); }
.help-dialog::backdrop { background:#000a; }
.help-head { display:flex; justify-content:space-between; align-items:center; }
.help-dialog h2 { margin:0; font-size:23px; }
.help-dialog ol { padding-left:21px; font-size:13px; line-height:1.7; color:#c6d2da; }
.help-dialog li { margin:11px 0; }
.help-dialog strong { color:var(--lime); }
.help-dialog code { background:#34424a; border-radius:4px; padding:2px 4px; color:#fff; }
.help-foot { color:#96a4b0; font-size:12px; line-height:1.6; }
.help-dialog .primary-button { width:100%; margin-top:14px; }
@media (max-width:850px) { .layout { grid-template-columns:1fr; } .side-panel { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-card { grid-row:span 2; } .aside-foot { grid-column:1/-1; } .game-panel { max-width:720px; width:100%; margin:auto; } }
@media (max-width:530px) { .app-shell { padding:0 10px 30px; } .topbar { height:62px; gap:8px; } .brand { font-size:15px; gap:7px; } .brand-mark { min-width:34px; height:31px; font-size:13px; border-radius:7px; } .build-tag { display:none; } .top-actions { gap:11px; } .text-btn { font-size:11px; } .layout { margin-top:10px; gap:14px; } .game-panel { padding:16px 11px; border-radius:14px; } .eyebrow { font-size:9px; } h1 { font-size:31px; } .stage-name { font-size:11px; } #level-picker { width:120px; font-size:10px; } .stat-grid { gap:6px; margin:16px 0 12px; } .stat { padding:10px 7px; gap:6px; } .stat span { font-size:8px; letter-spacing:0; } .stat strong { font-size:17px; } .board-shell { padding:10px 7px 12px; } .board { gap:3px; } .cell { font-size:clamp(13px,4.6vw,20px); border-radius:5px; } .bank-slot { height:56px; } .bank-grid { gap:7px; } .bank-heading { margin-bottom:8px; } .bank-heading span { font-size:10px; } .side-panel { grid-template-columns:1fr; } .guide-card { grid-row:auto; } .aside-foot { grid-column:auto; } .game-footer span { text-align:right; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
/* V0.4 playtest: clear praise, readable score breakdown, and truly opaque pause. */
.praise { display:grid; justify-items:center; gap:3px; text-align:center; padding:11px; margin-top:8px; background:rgba(185,255,73,.09); border:1px solid rgba(185,255,73,.35); border-radius:11px; color:var(--lime); animation:praise-in .22s ease; }
.praise strong { font-size:clamp(20px,4vw,29px); letter-spacing:.06em; font-weight:900; }
.praise span { font-size:12px; color:#d7e4cf; }
.praise--sweep { background:#275038; border-color:#b9ff49; }
@keyframes praise-in {from{transform:scale(.94);opacity:.3;}to{transform:scale(1);opacity:1;}}
.chain-counter { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:9px 12px; border:1px solid #3b5340; border-radius:8px; color:#b9ff49; font-size:11px; font-weight:800; letter-spacing:.08em; }
.chain-counter strong { font-size:18px; }
.score-breakdown { width:100%; display:grid; gap:10px; }
.score-breakdown>div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.score-breakdown span { color:var(--muted); font-size:12px; }
.score-breakdown strong { font-size:14px; font-variant-numeric:tabular-nums; }
.score-breakdown>.total-row { padding-top:12px; margin-top:4px; border-top:1px solid #ffffff2d; }
.score-breakdown>.total-row span,.score-breakdown>.total-row strong { color:var(--lime); font-weight:850; }
.score-breakdown>.total-row strong {font-size:23px;}
.result-summary { display:block; text-align:left; margin:18px 0; padding:15px 4px; }
.run-meta { text-align:center; font-size:10px; color:var(--muted); margin-top:15px; }
.pause-top { color:var(--lime); border:1px solid #52634e; padding:9px 12px; border-radius:8px; }
.pause-overlay { position:fixed; inset:0; z-index:30; background:#0e1116; display:grid; place-items:center; padding:16px; }
.pause-dialog { background:#1b242b; width:min(390px,100%); padding:38px 28px; border:1px solid #41514a; border-radius:19px; box-shadow:0 30px 100px #000b; text-align:center; }
.pause-mark { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 15px; border-radius:50%; background:#b9ff4925; color:var(--lime); font-size:30px; }
.pause-dialog h2 { font-size:31px; margin:10px 0; }
.pause-dialog p { color:#a9b9c6; font-size:13px; line-height:1.6; margin:0 0 25px; }
.pause-dialog button { width:100%; }
@media(max-width:530px){.pause-top{padding:7px;font-size:11px;}.top-actions{gap:6px;}.result-dialog{padding:22px 21px;}}
@media(max-width:530px){.topbar{height:auto;min-height:62px;}.build-tag{display:inline-flex;font-size:9px;padding:4px 6px;}.top-actions{flex-basis:100%;justify-content:flex-end;}.platform-back{min-height:36px;}}
/* V0.5: subtle result animations; animated zeros are transient, never board data. */
.cell--zero-anim { position:relative; animation:zero-cell-pulse .38s ease-out; }
.cell--zero-anim::after {content:"0"; position:absolute; inset:0; display:grid; place-items:center; color:var(--lime); font-size:1.1em; font-weight:800; pointer-events:none; animation:zero-ghost .37s ease-out forwards;}
.cell--split-anim { animation:split-return .42s cubic-bezier(.2,.7,.3,1.2); }
@keyframes zero-ghost {0%{opacity:1;transform:scale(1.23);}55%{opacity:.8;}100%{opacity:0;transform:scale(.35);}}
@keyframes zero-cell-pulse {0%{box-shadow:0 0 0 2px var(--lime);}100%{box-shadow:0 0 0 0 transparent;}}
@keyframes split-return {0%{transform:scale(.75);filter:brightness(2)}55%{transform:scale(1.15);}100%{transform:scale(1);filter:none;}}
.unlock-banner {background:#b9ff491d;border:1px solid #b9ff4970;border-radius:10px;padding:12px;color:var(--lime);font-weight:900;font-size:16px;margin:14px 0;animation:praise-in .3s ease;}
.unlock-banner small {display:block;color:#b7cdb4;font-size:11px;font-weight:500;margin-top:5px;}

/* V0.8 progression and personal-best surfaces: small, informational, no forced tutorial. */
.personal-record { margin-top:13px; padding:12px 13px; border-radius:9px; border:1px solid #405348; background:#1d2c27; display:grid; gap:6px; }
.personal-record strong { color:var(--lime); font-size:10px; letter-spacing:.09em; }
.personal-record span { color:#cad8cf; font-size:11px; line-height:1.6; }
.result-pb { background:#28352d; border:1px solid #617e50; color:#dee5db; border-radius:9px; padding:10px; font-size:11px; font-weight:800; letter-spacing:.04em; }
.result-pb--new { background:#354b2d; border-color:var(--lime); color:var(--lime); animation:praise-in .3s ease; }
#level-picker option:disabled { color:#87929c; }