:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#080e19;color:#e9f2ff}
*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #ffda87;outline-offset:2px}
.demo-wrapper{max-width:860px;margin:0 auto;padding:22px 12px 60px}.masthead{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:0 0 18px}.wordmark{letter-spacing:.27em;color:#9fe1d8;font-size:12px;font-weight:800}.masthead h1{font-size:clamp(25px,4vw,36px);margin:5px 0 5px;font-weight:650}.subline{color:#a5b5c9;font-size:13px;line-height:1.5;max-width:640px}.small-pill{display:inline-block;border:1px solid #46646f;border-radius:99px;font-size:10px;letter-spacing:.1em;padding:8px 11px;color:#addad7;white-space:nowrap}.chooser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:14px}.choice{text-align:left;border:1px solid #293e56;color:#dceafe;background:linear-gradient(135deg,#121d30,#111a29);border-radius:12px;padding:13px;min-height:110px}.choice.active{border-color:#82d7c7;box-shadow:0 0 0 1px #4ba99c inset}.choice .tier{font-size:9px;letter-spacing:.13em;color:#8fd2d0}.choice strong{display:block;font-size:15px;margin:8px 0 5px}.choice span:last-child{display:block;font-size:11px;color:#99aabc;line-height:1.4}.launcher{display:flex;align-items:center;gap:12px;margin:0 0 14px}.launcher button{background:#7cd5c5;color:#0d2932;padding:12px 24px;border:0;border-radius:9px;font-weight:800}.launcher p{font-size:11px;color:#92a5b9}.frame{border:1px solid #30445b;border-radius:15px;background:#0f1826;overflow:hidden;box-shadow:0 25px 80px #0007}.frame header{height:42px;background:#111d2b;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.eyebrow{font-size:10px;letter-spacing:.16em;color:#ade6d9;font-weight:800}.dim{font-weight:400;color:#678692}.quit{border:0;background:transparent;color:#a9c7d3;font-size:25px;line-height:1;padding:0 4px}.arena{--arena:#16283a;--accent:#8ad8c7;min-height:290px;background:radial-gradient(ellipse at 50% 115%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 55%),linear-gradient(160deg,var(--arena),#0b1325 88%);position:relative;isolation:isolate;overflow:hidden;padding:17px 24px 0}.stars{position:absolute;inset:0;opacity:.24;background-image:radial-gradient(#d7f7ff 1px,transparent 1px),radial-gradient(#d7f7ff .8px,transparent 1px);background-size:49px 47px,87px 84px;background-position:0 0,23px 35px;z-index:-1}.scene-head{display:flex;justify-content:space-between;color:#aac2ce;font-size:10px;letter-spacing:.12em;gap:10px}.arena h1{font-weight:500;font-size:clamp(21px,4.5vw,32px);margin:20px 0 3px;text-align:center;text-shadow:0 2px 20px #000}.scene-flavor{font-size:12px;color:#bdc9d6;text-align:center}.combatants{display:flex;gap:13px;justify-content:center;align-items:flex-end;flex-wrap:wrap;padding:20px 0 25px;min-height:180px}.enemy-card{background:#121d32dc;border:1px solid #607087aa;box-shadow:0 9px 35px #03081488;border-radius:9px;padding:10px;text-align:center;min-width:125px;max-width:200px;flex:0 1 180px}.enemy-glyph{color:var(--accent);font-size:45px;line-height:1.2;text-shadow:0 0 25px var(--accent)}.enemy-card .name{font-size:12px;font-weight:750;margin:7px 0 3px}.stat{font-size:11px;color:#b4c7d5;margin:4px 0 6px}.hp-track{height:6px;background:#34404c;border-radius:8px;overflow:hidden}.hp-fill{height:100%;background:linear-gradient(90deg,#e69686,#edc088);transition:width .2s}.phase-name{font-size:9px;color:#f6bcd1;letter-spacing:.1em}.down{opacity:.33;filter:grayscale(1)}.ground{height:2px;margin:0 -24px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.4}.squad,.commands,.log{padding:13px 17px;border-top:1px solid #263a50}.section-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;color:#a5b8cf;font-weight:800;margin-bottom:12px}.allies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ally-card{border:1px solid #2a4257;background:#152135;padding:11px;border-radius:9px}.ally-card.active{border-color:#73cdbd;box-shadow:0 0 0 1px #73cdbd inset}.ally-name{font-weight:700;font-size:13px}.charge{height:3px;background:#27344b;margin-top:9px}.charge>div{height:100%;background:#9f91ec}.charge-txt{font-size:10px;color:#a8a0d3;margin-top:3px}.moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.move,.target{border-radius:8px;border:1px solid #38556a;background:#203349;color:#e4f3fd;min-height:40px;padding:10px;font-size:12px}.move.selected{background:#366e73;border-color:#9de3d6}.move small{font-size:8px;color:#ffe0a1;display:block;letter-spacing:.1em;margin-top:2px}.target-label{font-size:10px;color:#a9c8ce;margin-top:15px;margin-bottom:7px;letter-spacing:.14em}.targets{display:flex;flex-wrap:wrap;gap:8px}.target{border-color:#68a79d}.log-lines{font-size:11px;color:#aebcce;line-height:1.7;min-height:40px}.log-lines>div:last-child{color:#dfe9f4}.outcome{text-align:center;padding:28px 20px 33px;border-top:1px solid #416257;background:linear-gradient(#13313b,#0e1a2b)}.outcome h2{font-size:24px;margin:0 0 8px;letter-spacing:.07em}.outcome p{font-size:13px;color:#c7d9e4}.payout{font-size:12px;color:#a7edc9;margin:16px 0}.primary{border:0;background:#86d6c4;color:#0c2832;font-weight:800;border-radius:9px;padding:12px 22px}.notice{color:#ffcf9a;font-size:11px;margin-top:12px}.frame footer{border-top:1px solid #1d2e41;padding:10px 18px;font-size:10px;color:#667e93;text-align:center}.devnote{font-size:12px;color:#839fb4;margin-top:13px;line-height:1.5}#battle:empty{display:none}
@media(max-width:480px){.demo-wrapper{padding:13px 9px 35px}.masthead{align-items:start}.small-pill{font-size:8px}.chooser{gap:6px}.choice{min-height:126px;padding:10px 7px}.choice strong{font-size:12px}.choice span:last-child{font-size:10px}.arena{padding:15px 10px 0;min-height:265px}.ground{margin:0 -10px}.combatants{gap:7px;min-height:165px}.enemy-card{min-width:92px;flex:1 1 100px;padding:8px}.enemy-glyph{font-size:35px}.squad,.commands,.log{padding:12px 10px}.allies{gap:5px}.ally-card{padding:8px 6px}.ally-name{font-size:11px}.ally-card .stat{font-size:10px}.moves{gap:6px}.move{padding:8px 5px;font-size:11px}.eyebrow{font-size:9px}.dim{display:none}}