@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#111a1c;--panel:#1b2929;--paper:#f0ecdf;--quiet:#a2ada4;--muted:#71817a;--mint:#b5d8c2;--acid:#d8eb8a;--coral:#f28b72;--gold:#e9c578;--mono:"DM Mono",Consolas,monospace;--sans:Manrope,Arial,sans-serif;font-family:var(--sans)}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--paper);background:radial-gradient(ellipse at 48% -12%,#34433e,#202e2d 28%,var(--bg) 70%)}button,a{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--acid);outline-offset:3px}.app{width:min(1300px,100%);margin:auto;padding:24px clamp(12px,3vw,42px)}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff19;padding:0 2px 18px}.brand{display:flex;gap:10px;align-items:center;color:var(--paper);text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.2em}.brand b{color:var(--mint)}.logo{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--mint);border-radius:50%;color:var(--acid);font-size:20px}.header-actions{display:flex;gap:10px;align-items:center}.save-label,.icon{height:36px;border:1px solid #ffffff20;background:#ffffff06;border-radius:99px;color:var(--quiet)}.save-label{display:grid;place-items:center;padding:0 12px;font:9px var(--mono);letter-spacing:.1em}.icon{width:38px;cursor:pointer}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;margin-top:20px}.game-panel,.sidebar{border:1px solid #c0d7c51b;border-radius:14px;background:linear-gradient(145deg,#202f2fe8,#172324);box-shadow:0 22px 65px #0002}.game-panel{min-width:0;min-height:680px;padding:21px 23px 15px;display:flex;flex-direction:column;overflow:hidden}.hud{display:flex;justify-content:space-between;gap:15px}.eyebrow{margin:0;color:var(--muted);font:9px var(--mono);letter-spacing:.15em}.hud h2{font-size:15px;margin:7px 0 0}.stats{display:flex;gap:18px;text-align:right}.stats div{min-width:38px}.stats b{display:block;font:20px var(--mono);font-weight:500}.stats small{display:block;margin-top:4px;color:var(--muted);font:8px var(--mono);letter-spacing:.1em}.arena{position:relative;flex:1;min-height:410px;display:grid;place-items:center;touch-action:manipulation}.arena canvas{display:block;width:min(100%,600px);height:auto;aspect-ratio:1;max-height:min(590px,64vh);touch-action:manipulation}.arena-tip{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--muted);font:8px var(--mono);letter-spacing:.1em;pointer-events:none}.bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #ffffff17;padding-top:14px}.bottom p{font-size:11px;color:var(--quiet);line-height:1.5}kbd{border:1px solid #73827955;border-radius:4px;padding:3px 5px;color:var(--paper);font:9px var(--mono)}.buttons{display:flex;gap:8px;flex-shrink:0}.primary,.secondary{padding:12px 14px;border-radius:6px;cursor:pointer;font-size:9px;font-weight:800;letter-spacing:.08em}.primary{border:1px solid var(--acid);background:var(--acid);color:#19231d;min-width:145px}.primary:hover{background:#e5f5a5}.secondary{border:1px solid #b5d8c23b;background:#ffffff06}.secondary:hover{border-color:#b5d8c2a0}.toast{min-height:12px;margin:7px 0 0;text-align:center;color:var(--acid);font:9px var(--mono);letter-spacing:.1em;opacity:0}.toast.show{opacity:1}.sidebar{padding:21px;display:flex;flex-direction:column;gap:12px}.sidebar h1{margin:6px 0;font-size:20px;letter-spacing:-.05em}.mode{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:12px;border:1px solid #ffffff1b;border-radius:8px;background:#101a1b75;cursor:pointer}.mode.active,.mode:hover{border-color:#b5d8c27c;background:#b5d8c20b}.symbol{display:grid;place-items:center;flex:0 0 34px;height:34px;border:1px solid #ffffff24;border-radius:50%;color:var(--mint);font-size:17px}.mode span:nth-child(2){flex:1}.mode b,.mode small{display:block}.mode b{font-size:12px;margin-bottom:4px}.mode small{font-size:9px;color:var(--quiet);line-height:1.45}.mode i{font-style:normal;color:var(--muted)}.rule{height:1px;background:#ffffff17;margin:4px 0}.side-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font:8px var(--mono);letter-spacing:.1em}.link{border:0;background:none;color:var(--mint);font:8px var(--mono);cursor:pointer}.progress-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.progress-row>b{font:15px var(--mono)}.progress-row small{color:var(--muted);font-size:10px}.progress-row>span{font:8px var(--mono);color:var(--muted)}.track{height:4px;margin-top:8px;background:#ffffff17;border-radius:8px;overflow:hidden}.track i{display:block;height:100%;width:0;background:var(--acid);transition:width .3s}.muted{color:var(--muted);font-size:9px;line-height:1.6;margin:8px 0 0}.records{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.records div{border:1px solid #ffffff18;border-radius:7px;padding:11px;background:#ffffff04}.records b,.records small{display:block}.records b{font:18px var(--mono);font-weight:500}.records small{margin-top:4px;font:8px var(--mono);color:var(--muted)}.side-foot{margin-top:auto;padding-top:8px}footer{display:flex;justify-content:space-between;gap:12px;margin:13px 4px 0;color:#71817a9c;font:8px var(--mono);letter-spacing:.07em}.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:#0a1112dc;backdrop-filter:blur(9px)}.overlay[hidden]{display:none}.dialog{width:min(560px,100%);max-height:90vh;overflow:auto;padding:clamp(22px,4vw,36px);border:1px solid #b5d8c236;border-radius:13px;background:linear-gradient(145deg,#283735,#172425);box-shadow:0 30px 100px #0008}.dialog.wide{width:min(820px,100%)}.dialog h3{margin:12px 0 10px;font-size:clamp(34px,6vw,50px);line-height:.98;letter-spacing:-.075em}.dialog p{color:var(--quiet);font-size:12px;line-height:1.7}.dialog .eyebrow{color:var(--mint)}.dialog-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.dialog-actions button{flex:1}.dialog-meta{display:flex;gap:9px;margin-top:18px;color:var(--muted);font:8px var(--mono)}.pill{padding:6px 8px;border:1px solid #b5d8c234;border-radius:30px;color:var(--mint)}.stage-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;margin:18px 0}.stage-card{aspect-ratio:1;border:1px solid #ffffff20;border-radius:6px;background:#101a1b;color:var(--quiet);font:10px var(--mono);cursor:pointer}.stage-card.open{color:var(--paper)}.stage-card.done{border-color:#b5d8c277;color:var(--mint)}.stage-card.current{border-color:var(--acid);background:#d8eb8a14;color:var(--acid)}.stage-card:disabled{opacity:.35;cursor:not-allowed}.stars{display:block;font-size:7px;color:var(--gold)}.result-stars{font-size:25px;color:var(--gold)}.result-stars span{color:#f0ecdf40}@media(max-width:980px){.layout{grid-template-columns:minmax(0,1fr) 270px}.game-panel{padding:17px;min-height:620px}.sidebar{padding:16px}.stats{gap:12px}.bottom{align-items:flex-start;flex-direction:column}.buttons{width:100%}.buttons .primary{flex:1}}@media(max-width:720px){.layout{grid-template-columns:1fr}.game-panel{min-height:0}.arena{min-height:0}.arena canvas{max-height:78vw}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sidebar>div:first-child,.mode,.rule,.side-foot{grid-column:1/-1}.side-foot{margin-top:0}.bottom{flex-direction:column}.bottom p{margin:0}.buttons{width:100%}.secondary{flex:1}.stage-grid{grid-template-columns:repeat(10,minmax(20px,1fr));gap:5px}}@media(max-width:480px){.app{padding:12px 9px}.save-label{display:none}.game-panel{padding:13px}.stats{gap:8px}.stats b{font-size:16px}.stats small{font-size:7px}.arena canvas{max-height:88vw}.arena-tip{font-size:7px}.sidebar{grid-template-columns:1fr;padding:13px}.sidebar>div:first-child,.mode,.rule,.side-foot{grid-column:auto}.footer{font-size:7px;flex-direction:column}.stage-grid{grid-template-columns:repeat(5,1fr)}.stage-card{aspect-ratio:1.25}.dialog{padding:21px}.dialog-actions{flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}