*{box-sizing:border-box} :root{color-scheme:dark;font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#f2f4ff;background:#101528}body{margin:0;background:radial-gradient(ellipse at 15% 0,#253664 0,transparent 45%),radial-gradient(ellipse at 95% 70%,#392344 0,transparent 45%),#101528}main{max-width:1260px;margin:auto;padding:30px}header{text-align:center;position:relative;margin-bottom:26px}.back{position:absolute;left:0;top:0;color:#abb8d7;text-decoration:none;font-size:14px}.eyebrow{color:#b4c2e2;letter-spacing:3px;font-size:11px;font-weight:800}h1{font-size:clamp(36px,5vw,64px);letter-spacing:-3px;margin:7px 0;line-height:1.1;font-weight:1000}h1 span{color:#ffe68b}header p{color:#b3bfd8;margin:12px 0;font-size:15px}.toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:20px 0}button,select{font:inherit;font-size:13px;font-weight:800;color:#e9edff;background:#29324c;border:1px solid #44506b;border-radius:12px;padding:13px 15px;cursor:pointer;min-height:44px}button:hover{filter:brightness(1.15);transform:translateY(-1px)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffe68b;outline-offset:3px}.primary{background:#ffe48a;color:#343047;border-color:#ffe48a;box-shadow:0 3px 0 #b89945}.toolbar label{font-size:12px;color:#bfcbe3;display:flex;align-items:center;gap:8px}.toolbar select{padding:12px 5px}.toggle{margin-left:auto}.toggle input{accent-color:#ffe48a;width:18px;height:18px}.arena-shell{border:1px solid #4e5a75;border-radius:22px;overflow:hidden;box-shadow:0 20px 60px #0004}.scoreboard{display:flex;align-items:center;gap:28px;padding:20px 26px;background:#1c243b}.team{flex:1;display:flex;flex-direction:column;gap:6px}.team>span{font-weight:900;font-size:12px;letter-spacing:1.5px}.team strong{font-size:23px}.blue{color:#77d8ff}.pink{color:#ff97aa;text-align:right}.meter{height:5px;border-radius:5px;background:#ffffff15;margin-top:3px;overflow:hidden}.meter i{display:block;width:100%;height:100%;background:currentColor;transition:width .15s}.pink .meter i{margin-left:auto}.round{text-align:center}.round span{font-size:10px;color:#a0aec9;letter-spacing:2px}.round strong{display:block;font-size:24px;margin-top:6px}.field{position:relative;background:#235657}canvas{display:block;width:100%;height:auto}.field-tag{position:absolute;left:20px;bottom:16px;font-size:9px;letter-spacing:2px;color:#c4eed591;pointer-events:none}.field-tag span{margin:0 8px}.status{display:flex;justify-content:space-between;gap:15px;background:#1c243b;padding:15px 22px;font-size:12px;color:#d3ddf2}#record{color:#a4b3d1;white-space:nowrap}.result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#101b36be;backdrop-filter:blur(4px);padding:16px}.result[hidden]{display:none}.result>span{font-size:48px}.result h2{font-size:clamp(23px,4vw,42px);margin:10px 0;color:#ffe48a}.result p{margin:0 0 20px;color:#d5dff3}.abilities{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.abilities article{display:flex;gap:13px;background:#20273d;border:1px solid #35405a;border-radius:17px;padding:20px 16px}.ability-icon{font-size:25px;border-radius:13px;width:48px;height:48px;display:grid;place-items:center;flex-shrink:0}.close{background:#f5ac6533}.far{background:#72dfff25}.bomb{background:#b295ff33}small{font-size:9px;letter-spacing:1px;color:#a9b6d1}article h2{font-size:18px;margin:5px 0}article p{font-size:12px;color:#b6c1d8;line-height:1.6;margin:5px 0 12px}.chips{display:flex;flex-wrap:wrap;gap:5px}.chips span{font-size:9px;background:#ffffff09;padding:5px 7px;border-radius:5px;color:#d4dcef}footer{text-align:center;color:#8e9db9;font-size:11px;line-height:2;padding:24px 0 0}@media(max-width:760px){main{padding:16px 10px}.back{position:static;display:block;text-align:left;margin-bottom:15px}.abilities{grid-template-columns:1fr}.toolbar{justify-content:center}.toggle{margin-left:0}.scoreboard{padding:14px;gap:12px}.team>span{font-size:9px}.team strong{font-size:18px}.status{font-size:10px;padding:12px}.field-tag{display:none}.result>span{font-size:28px}.result p{font-size:12px;margin-bottom:10px}.result h2{margin:4px 0}.result button{padding:9px}}

.hero-help{margin:0 0 18px;padding:14px 18px;background:#ffe48a10;border:1px solid #ffe48a44;border-radius:14px;font-size:13px;line-height:1.8;color:#e1e7f5}.hero-help strong{color:#ffe48a;margin-right:8px}.hero-help span{color:#afbdd7;font-size:12px}canvas{touch-action:none;cursor:crosshair}

.hero-health{display:flex;align-items:center;gap:24px;background:#171f34;padding:14px 26px;border-top:1px solid #35405a}.hero-health label{flex:1;color:#ffe48a;font-size:12px;font-weight:bold}.hero-health label:last-child{color:#ff97aa}.hero-health strong{float:right}.hero-health>span{font-size:10px;color:#aebbd3}.hero-health progress{display:block;width:100%;height:12px;margin-top:8px;accent-color:#ffe48a}.hero-health label:last-child progress{accent-color:#ff819b}@media(max-width:600px){.hero-health{padding:12px;gap:15px}.hero-health>span{display:none}.hero-health label{font-size:10px}}

.story{padding:20px 24px;background:linear-gradient(110deg,#293d56,#343050);border:1px solid #637091;border-radius:18px}.story h2{margin:8px 0;color:#ffe48a;font-size:24px}.story p{color:#d7e3f5;line-height:1.6;margin:8px 0}.story #map{color:#ffe48a;font-size:21px;letter-spacing:3px;margin:12px 0}.story small{color:#b8c7de}@media(max-width:600px){.story{padding:16px}.story #map{font-size:15px;letter-spacing:0}.status{flex-wrap:wrap}}

/* Keep the controls, shields and battlefield together in the first screen. */
main{padding:16px 24px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;text-align:left}
header .back{position:static;margin:0;white-space:nowrap}
header h1{font-size:30px;letter-spacing:-1px;margin:0}
header p{font-size:12px;margin:0}
.play-area{position:relative}
.play-area .toolbar{position:sticky;top:0;z-index:10;margin:0;padding:10px 12px;background:#1c243b;border:1px solid #4e5a75;border-bottom:0;border-radius:16px 16px 0 0;gap:8px}
.toolbar button,.toolbar select{padding:10px 11px}
.arena-shell{border-radius:0 0 20px 20px}
.scoreboard{padding:10px 20px;gap:20px}
.team{gap:3px}.team strong{font-size:19px}.round strong{font-size:20px;margin-top:3px}
.hero-health{padding:10px 20px}.hero-health progress{margin-top:5px}
.field{display:grid;place-items:center;background:#173e40}
.field canvas{width:min(100%, calc(max(240px, 100svh - 280px) * 1.896551724));height:auto}
.status{flex-wrap:wrap;padding:10px 16px;gap:6px 14px}
.story{margin-top:20px}.hero-help{margin:16px 0 0}
button:disabled{cursor:default;opacity:.55;transform:none}
@media(max-width:760px){
  main{padding:10px}header{gap:10px}header h1{font-size:25px}header p{display:none}
  .play-area .toolbar{justify-content:flex-start;padding:8px;gap:6px}
  .toolbar button,.toolbar select{font-size:11px;padding:8px;min-height:44px}
  .toolbar label{font-size:11px}.toolbar .toggle{margin-left:0}
  .scoreboard{padding:10px 12px}.hero-health{padding:10px 12px}
  .field canvas{width:100%}
}

.command-deck{display:flex;align-items:center;gap:16px;padding:14px;background:linear-gradient(120deg,#26364b,#24253f);border:1px solid #4e5a75;border-bottom:0;flex-wrap:wrap}.aura-panel{flex:1;min-width:260px}.aura-options{display:flex;gap:6px;margin:7px 0}.aura-options button{padding:9px;font-size:12px}.aura-options button[aria-pressed="true"]{background:#ffe48a;color:#263047;border-color:#ffe48a}#aura-bastion[aria-pressed="true"]{background:#91caff}#aura-celeridad[aria-pressed="true"]{background:#b9a1ff}#auraHint{font-size:11px;color:#d0dbee}.mana-panel{width:160px;font-size:11px}.mana-panel strong{float:right}.mana-panel progress{width:100%;accent-color:#ab99ff;margin:8px 0}.mana-panel small{letter-spacing:0}.spell{display:flex;flex-direction:column;gap:6px;text-align:left;background:#203e42;border-color:#477566}.spell:last-child{background:#38324b;border-color:#746489}.spell span{font-size:11px;color:#e2d599}.spell small{letter-spacing:0;font-weight:normal}.field canvas{width:min(100%, calc(max(240px, 100svh - 395px) * 1.896551724))}@media(max-width:760px){.command-deck{gap:10px;padding:10px}.aura-panel{min-width:100%}.mana-panel{width:100%}.spell{flex:1;font-size:11px;padding:10px}.field canvas{width:100%}}