:root{--black:#0f1a20;--gunmetal:#202b31;--charcoal:#16262E;--alabaster:#e0e2db;--timberwolf:#c9c5ba;--muted:#8a9a9e;--blue:#388697;--olive:#6f732f;--gold:#c99703;--jasper:#cd533b;--cordovan:#8a3033;--orange:#c15f3c}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--black);color:var(--alabaster);font-family:Nunito,sans-serif;display:flex;align-items:center;justify-content:center;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#root{display:flex;align-items:center;justify-content:center}.stage{position:relative;width:min(96vw,853px);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2px #2a3a42,0 18px 50px #0009}canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;image-rendering:pixelated;display:block}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6%;text-align:center;z-index:5;animation:fade .35s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}h1.title{font-family:"Press Start 2P",monospace;font-size:clamp(20px,4.6vw,42px);line-height:1.25;margin:0;color:var(--alabaster);text-shadow:0 3px 0 var(--orange),0 4px 0 var(--cordovan),0 8px 18px rgba(0,0,0,.7);letter-spacing:1px}.amp{color:var(--gold)}.sub{font-family:Philosopher,serif;color:var(--timberwolf);margin-top:14px;font-size:clamp(14px,2.2vw,20px)}.blink{margin-top:34px;font-family:"Press Start 2P",monospace;font-size:clamp(9px,1.5vw,13px);color:var(--blue);animation:blink 1.1s steps(2) infinite;cursor:pointer}@keyframes blink{50%{opacity:0}}.panel-title{font-family:Philosopher,serif;font-weight:700;font-size:clamp(20px,3.4vw,30px);color:var(--alabaster);margin:0 0 4px}.panel-note{font-family:Philosopher,serif;color:var(--muted);margin:0 0 20px;font-size:clamp(13px,1.9vw,16px)}.classes{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%}.class-card{flex:1 1 200px;max-width:240px;min-width:170px;background:var(--gunmetal);border:1px solid rgba(56,134,151,.25);border-radius:12px;padding:16px 14px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}.class-card:hover,.class-card.sel{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 22px #00000073}.class-emoji{font-size:34px;line-height:1}.class-name{font-family:Philosopher,serif;font-weight:700;font-size:20px;margin:8px 0 2px}.class-role{color:var(--blue);font-size:13px;margin-bottom:8px;min-height:34px}.class-stats{font-size:12.5px;color:var(--timberwolf);line-height:1.5}.class-stats b{color:var(--alabaster)}.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;width:100%;max-width:680px;text-align:left;font-size:clamp(11px,1.6vw,14px)}.howto-grid .row{display:flex;gap:10px;align-items:flex-start;padding:5px 0;border-bottom:1px dashed rgba(138,154,158,.2)}.howto-grid .ic{font-size:18px;flex:0 0 22px;text-align:center}.howto-grid .k{color:var(--gold);font-weight:700;font-family:Philosopher,serif}.howto-grid .v{color:var(--timberwolf)}.btn{margin-top:24px;font-family:"Press Start 2P",monospace;font-size:12px;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:14px 22px;cursor:pointer;transition:background .15s,transform .1s;box-shadow:0 4px #25606c}.btn:hover{background:#41a0b4}.btn:active{transform:translateY(3px);box-shadow:0 1px #25606c}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.gold{background:var(--gold);box-shadow:0 4px #8f6c02;color:#1c1300}.btn.gold:hover{background:#e3ad12}.battleUI{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none}.bars{position:absolute;left:3%;bottom:30%;width:42%;max-width:330px;background:#0f1a20db;border:1px solid #2a3a42;border-radius:10px;padding:10px 12px}.bar-row{margin:6px 0}.bar-label{display:flex;justify-content:space-between;font-size:11px;font-family:Philosopher,serif;color:var(--timberwolf);margin-bottom:3px}.bar-label .tag{color:var(--muted);font-size:10px}.bar-track{height:13px;background:var(--charcoal);border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px #2a3a42}.bar-fill{height:100%;width:100%;border-radius:7px;transition:width .4s ease}.hp .bar-fill{background:linear-gradient(90deg,var(--olive),#8a9140)}.mp .bar-fill{background:linear-gradient(90deg,var(--blue),#54b6c9)}.who{font-family:Philosopher,serif;font-weight:700;font-size:14px;color:var(--alabaster);margin-bottom:2px}.log{position:absolute;left:3%;right:3%;bottom:3%;height:21%;background:#0f1a20eb;border:1px solid #2a3a42;border-radius:10px;padding:10px 14px;font-family:Philosopher,serif;font-size:clamp(13px,2vw,17px);color:var(--alabaster);display:flex;align-items:center}.cmd{position:absolute;right:3%;bottom:27%;display:flex;flex-direction:column;gap:7px;width:30%;max-width:215px;pointer-events:auto}.cmd-btn{font-family:Philosopher,serif;font-weight:700;font-size:15px;background:var(--gunmetal);color:var(--alabaster);border:1px solid #2a3a42;border-radius:8px;padding:9px 12px;cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;transition:background .12s,border-color .12s}.cmd-btn:hover:not(:disabled){background:#2a3a42;border-color:var(--gold)}.cmd-btn:disabled{opacity:.4;cursor:not-allowed}.cmd-btn .cost{font-size:11px;color:var(--blue)}.enemyHp{position:absolute;left:50%;transform:translate(-50%);top:7%;width:46%;max-width:360px;pointer-events:none}.enemyHp .who{text-align:center}.toast{position:absolute;left:50%;transform:translate(-50%);top:30%;font-family:"Press Start 2P",monospace;font-size:18px;pointer-events:none;opacity:0}.toast.pop{animation:pop 1s ease forwards}@keyframes pop{0%{opacity:1;top:30%}to{opacity:0;top:14%}}.hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-family:Philosopher,serif;color:var(--muted);font-size:13px;z-index:6;pointer-events:none}.dpad{position:absolute;left:12px;bottom:12px;z-index:6;opacity:.85}.dgrid{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:4px}.dbtn{background:#202b31e6;border:1px solid #2a3a42;border-radius:8px;color:var(--alabaster);font-size:20px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer}.dbtn:active{background:var(--blue)}.aBtn{position:absolute;right:14px;bottom:24px;z-index:6;width:64px;height:64px;border-radius:50%;background:var(--gold);color:#1c1300;border:none;font-family:"Press Start 2P",monospace;font-size:16px}@media (hover:none) and (pointer:coarse){.hint{display:none}}@media (max-width:760px),(orientation:landscape) and (max-height:560px){body{padding:0}.stage{border-radius:0;box-shadow:0 0 0 1px #2a3a42}.screen{overflow-y:auto;justify-content:safe center;padding:16px 5%;-webkit-overflow-scrolling:touch}.classes{gap:10px}.class-card{flex:1 1 130px;min-width:120px;max-width:300px;padding:11px 12px}.class-emoji{font-size:28px}.class-name{font-size:18px;margin:5px 0 2px}.class-role{min-height:0;margin-bottom:5px}.class-stats{font-size:12px}.btn{margin-top:16px}}@media (orientation:portrait) and (max-width:760px){.stage{width:100dvw;max-width:100dvw}}@media (orientation:landscape) and (max-height:560px){.stage{height:100dvh;width:auto;max-width:100dvw}}.rotate-hint{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:8;pointer-events:none;display:none;white-space:nowrap;background:#0f1a20eb;border:1px solid var(--gold);border-radius:20px;padding:6px 14px;font-family:Philosopher,serif;font-size:13px;color:var(--alabaster);box-shadow:0 4px 14px #00000080}.rotate-hint b{color:var(--gold)}@media (orientation:portrait) and (max-width:760px){.rotate-hint{display:block;animation:rhpulse 2.6s ease-in-out infinite}}@keyframes rhpulse{0%,to{opacity:.92}50%{opacity:.5}}.mage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;padding:2.4% 3%;gap:1.4%;background:radial-gradient(120% 80% at 50% -10%,rgba(56,134,151,.1),transparent 60%),linear-gradient(180deg,#101d24,#0b1419);font-family:Nunito,sans-serif;overflow:hidden}.mage.fx-overshoot{animation:shake .4s;box-shadow:inset 0 0 0 3px var(--jasper)}.mage.fx-success{box-shadow:inset 0 0 0 3px var(--olive)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.rail{display:flex;gap:5px;justify-content:center;margin-bottom:2px}.pip{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;background:var(--charcoal);color:var(--muted);border:1px solid #2a3a42}.pip.done{background:#6f732f59;color:var(--alabaster);border-color:var(--olive)}.pip.cur{background:var(--blue);color:#fff;border-color:var(--gold);box-shadow:0 0 0 2px #c9970366}.pip.locked{opacity:.45}.mage-head{text-align:center}.mage-eyebrow{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--gold);letter-spacing:.5px}.mage-title{font-family:Philosopher,serif;font-weight:700;font-size:clamp(18px,2.8vw,26px);color:var(--alabaster);margin:2px 0}.mage-goal{font-size:clamp(12px,1.7vw,15px);color:var(--timberwolf)}.mage-goal b{color:var(--blue)}.mage-intro{font-size:clamp(11px,1.5vw,13px);color:var(--muted);margin-top:4px;font-style:italic}.bench{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:2px;flex:1;align-content:flex-start;overflow:auto}.slot{background:#202b3199;border:1px solid #2a3a42;border-radius:10px;padding:8px 10px;min-width:150px;max-width:230px;flex:1 1 160px}.slot-head{font-family:Philosopher,serif;font-weight:700;font-size:14px;color:var(--alabaster);display:flex;align-items:center;gap:6px}.rglyph{color:var(--gold);font-size:15px}.slot-sub{font-size:10px;color:var(--muted);font-weight:400;margin-left:auto}.opts{display:flex;flex-direction:column;gap:5px;margin-top:6px}.opt{display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:left;background:var(--charcoal);color:var(--timberwolf);border:1px solid #2a3a42;border-radius:7px;padding:7px 9px;font-family:Nunito,sans-serif;font-size:12.5px;cursor:pointer;transition:.12s}.opt:hover:not(:disabled){border-color:var(--blue);color:var(--alabaster)}.opt.on{background:var(--blue);color:#fff;border-color:var(--gold)}.opt:disabled{opacity:.55;cursor:default}.ocost{font-size:10px;opacity:.8;flex-shrink:0}.incant{display:flex;align-items:center;gap:8px;background:#0f1a20b3;border:1px dashed rgba(201,151,3,.4);border-radius:8px;padding:7px 11px}.quill{color:var(--gold);font-size:15px}.sentence{font-family:Philosopher,serif;font-size:clamp(12px,1.8vw,16px);color:var(--alabaster)}.manifest{display:flex;gap:10px;align-items:center;border-radius:9px;padding:8px 12px;animation:fade .3s ease}.manifest .m-icon{font-size:26px;flex-shrink:0}.manifest .m-text{font-size:clamp(11px,1.6vw,14px);line-height:1.35}.manifest.success{background:#6f732f38;border:1px solid var(--olive);color:var(--alabaster)}.manifest.overshoot{background:#cd533b2e;border:1px solid var(--jasper);color:#f2d6cf}.manifest.weak,.manifest.fizzle{background:#8a9a9e24;border:1px solid var(--muted);color:var(--timberwolf)}.mage-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.score{display:flex;gap:14px;font-size:12px;color:var(--timberwolf)}.score b{color:var(--alabaster)}.cast-btn{font-family:"Press Start 2P",monospace;font-size:11px;background:var(--gold);color:#1c1300;border:none;border-radius:8px;padding:12px 18px;cursor:pointer;box-shadow:0 4px #8f6c02}.cast-btn span{font-size:9px;opacity:.8}.cast-btn:hover{background:#e3ad12}.cast-btn:active{transform:translateY(3px);box-shadow:0 1px #8f6c02}.cast-btn:disabled{opacity:.4;cursor:not-allowed}.cast-btn.go{background:var(--blue);color:#fff;box-shadow:0 4px #25606c}.win-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.rune-learned{font-size:12px;color:var(--gold)}.rune-learned b{color:var(--alabaster)}.stars{color:var(--gold);font-size:16px;letter-spacing:2px}.sandbox{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;padding:2% 3% 2.4%;gap:8px;background:linear-gradient(180deg,#101d24,#0b1419);font-family:Nunito,sans-serif}.sb-head{text-align:center}.sb-eyebrow{font-family:"Press Start 2P",monospace;font-size:7.5px;color:var(--gold);letter-spacing:.4px;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}.sb-eyebrow .live{color:var(--blue);background:#38869724;border:1px solid rgba(56,134,151,.4);border-radius:10px;padding:2px 7px}.sb-title{font-family:Philosopher,serif;font-weight:700;font-size:clamp(18px,2.6vw,25px);color:var(--alabaster);margin:2px 0}.sb-goal{font-size:clamp(11px,1.55vw,14px);color:var(--timberwolf);max-width:640px;margin:0 auto}.sb-goal b{color:var(--blue)}.sb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:2px 0}.sb-canvas{height:100%;max-width:100%;aspect-ratio:320/150;image-rendering:pixelated;border-radius:10px;border:1px solid #2a3a42;box-shadow:0 6px 18px #00000080}.sb-cast-veil{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a12178c;border-radius:10px;font-family:Philosopher,serif;font-size:18px;color:var(--gold);animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{50%{opacity:.5}}.sb-manifest{background:#0f1a20ed;border-radius:10px;padding:9px 13px;border:1px solid #2a3a42;animation:fade .3s ease;flex:0 0 auto}.sb-manifest.success{border-color:var(--olive);box-shadow:0 0 16px #6f732f4d}.sb-manifest.overshoot{border-color:var(--jasper)}.sb-manifest.weak{border-color:var(--muted)}.sb-narr{font-family:Philosopher,serif;font-size:clamp(12px,1.7vw,16px);color:var(--alabaster);line-height:1.3}.sb-teach{font-size:clamp(10px,1.4vw,12.5px);color:var(--gold);margin-top:5px}.sb-foot{display:flex;flex-direction:column;gap:6px}.sb-err{font-size:12px;color:var(--jasper);font-family:Philosopher,serif}.sb-input{width:100%;resize:none;background:var(--charcoal);color:var(--alabaster);border:1px solid #2a3a42;border-radius:9px;padding:9px 11px;font-family:Philosopher,serif;font-size:15px;outline:none}.sb-input:focus{border-color:var(--gold);box-shadow:0 0 0 2px #c9970340}.sb-input::placeholder{color:var(--muted)}.sb-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.sb-hint{font-size:11px;color:var(--muted)}.sb-clues{background:#0f1a20b3;border:1px solid #2a3a42;border-radius:9px;padding:7px 11px;margin-bottom:2px}.sb-clues-head{font-family:Nunito,sans-serif;font-size:11px;color:var(--gold);margin-bottom:5px}.sb-clue-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px}.sb-clue{display:flex;gap:7px;align-items:baseline;font-size:11.5px;color:var(--timberwolf)}.sb-clue-g{color:var(--blue);font-size:13px;flex:0 0 14px}.sb-clue-l{color:var(--muted)}.sb-clue b{color:var(--alabaster)}@media (max-width:560px){.sb-clue-grid{grid-template-columns:1fr}}@media (max-width:760px),(orientation:landscape) and (max-height:560px){.sandbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;padding:0;gap:0}.sb-stage{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;z-index:1}.sb-canvas{width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:contain;border:0;border-radius:0;box-shadow:none}.sb-head{position:absolute;top:0;left:0;right:0;z-index:4;pointer-events:none;text-align:left;padding:7px 12px 18px;background:linear-gradient(180deg,#080e13e0,#080e1380 58%,#080e1300)}.sb-eyebrow{justify-content:flex-start;font-size:6.5px;gap:6px}.sb-title{font-size:15px;margin:1px 0}.sb-goal{font-size:10.5px;max-width:none;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sb-clues{position:absolute;top:52px;left:0;right:0;z-index:4;margin:0;border:0;border-bottom:1px solid #2a3a42;border-radius:0;background:#080e13b8;padding:6px 12px;max-height:40%;overflow:auto}.sb-clue-grid{grid-template-columns:1fr;gap:2px}.sb-clue{font-size:10px}.sb-clues-head{font-size:9.5px;margin-bottom:3px}.sb-manifest{position:absolute;top:0;left:0;right:0;z-index:5;border:0;border-bottom:2px solid currentColor;border-radius:0;background:#080e1399;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);padding:9px 13px;animation:fade .3s ease;box-shadow:none}.sb-manifest.success{box-shadow:none}.sb-narr{font-size:13px}.sb-teach{font-size:10.5px;margin-top:3px}.sb-foot{position:absolute;bottom:0;left:0;right:0;z-index:6;gap:5px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(0deg,#080e13f2 62%,#080e1300)}.sb-input{font-size:14px}.sb-actions{gap:8px}.sb-hint{font-size:10px;line-height:1.2}.cast-btn{flex:0 0 auto}}