/* A shared, quiet visual language for the menu and combat interface. */
:root { --ui-bg:#0c111be8; --ui-line:#ffffff17; --ui-dim:#8e9bac; --ui-accent:#a8e8da; }
button,select { -webkit-tap-highlight-color:transparent; }
:is(button,select,[tabindex]):focus-visible { outline:2px solid #aff3df; outline-offset:4px; }
#select.menu-shell { grid-template-columns:minmax(0,1fr) 330px; grid-template-rows:94px 1fr auto 54px; column-gap:80px; padding:0 max(32px,calc((100vw - 1200px)/2)); background:linear-gradient(90deg,#080d16f5 0%,#080d16c9 55%,#0a1019df),url('assets/menu/moonfall-arena.png') center/cover; }
.menu-top { border-bottom:1px solid var(--ui-line); }
.wordmark { font-size:22px; letter-spacing:3px; color:#f4f6fb; }
.wordmark small { color:var(--ui-accent); letter-spacing:2px; font-size:10px; }
.menu-tools { display:flex; gap:9px; align-items:center; }
#language { border:1px solid var(--ui-line); color:#dce4ef; background:#161d29; padding:10px; border-radius:9px; font:600 11px system-ui; }
.menu-tools .secondary-action { border-color:transparent; background:transparent; color:#acb9cb; }
.secondary-action,.netbtn { border:1px solid #ffffff1c; border-radius:9px; background:#ffffff06; color:#c4cfdf; font:600 12px system-ui; padding:12px 15px; }
.secondary-action:hover,.netbtn:hover { border-color:#ffffff40; background:#ffffff0b; }
.primary-action { background:#b2efdf; color:#102522; border:0; border-radius:10px; padding:16px 20px; box-shadow:0 4px 20px #4adaad12; font:750 13px system-ui!important; }
.primary-action:hover:not(:disabled) { background:#cff8ed; }
.roster-section { padding:38px 0; }
.hero-focus { display:flex; align-items:center; gap:30px; min-height:230px; margin-bottom:32px; }
.selected-portrait { width:160px; height:160px; flex:0 0 160px; background-repeat:no-repeat; border-radius:32px; border:1px solid color-mix(in srgb,var(--hero-color) 40%,transparent); box-shadow:0 0 70px color-mix(in srgb,var(--hero-color) 14%,transparent),inset 0 0 30px #0009; }
.hero-intro { min-width:0; }
#selected-role { font:650 10px system-ui; letter-spacing:2px; text-transform:uppercase; color:var(--hero-color); }
#select #selected-hero { font:650 clamp(32px,3.6vw,50px)/1.1 system-ui; color:#f5f7fa; letter-spacing:-1.6px; margin:12px 0; text-shadow:none; }
#hero-summary { color:#9cacc0; font:14px/1.7 system-ui; max-width:300px; margin:0; }
#select .classes { grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px; }
#select .card { background:#ffffff03; border:1px solid transparent; border-radius:12px; padding:8px 3px 10px; overflow:visible; }
#select .card.selected { border-color:color-mix(in srgb,var(--class-color) 50%,transparent); background:color-mix(in srgb,var(--class-color) 8%,transparent); box-shadow:0 3px 20px #0003; }
#select .card:hover { background:#ffffff09; border-color:#ffffff35; }
.hero-mark { width:52px; height:52px; border-radius:9px; }
#select .card .name { font:500 9px system-ui; white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; color:#93a2b5; }
#select .card.selected .name { color:#edf2f7; }
.hero-check { display:none; }
.ability-section { margin-top:28px; border-top:1px solid var(--ui-line); padding-top:20px; }
#select .ability-section h2 { font:600 10px system-ui; color:#8c9bb0; letter-spacing:1.5px; margin:0 0 13px; }
.hero-detail { gap:10px; margin:0; }
.menu-ability { width:60px; height:60px; border:1px solid #ffffff2a; border-radius:12px; background:#0a111c; padding:0; cursor:help; transition:transform .15s,border-color .15s; }
.menu-ability:hover,.menu-ability:focus-visible { transform:translateY(-3px); border-color:var(--ui-accent); }
.menu-ability i { inset:3px; border-radius:8px; }
.menu-ability kbd { background:#080d17dc; color:#f1f5fa; font:650 9px/17px system-ui; left:5px; right:auto; bottom:4px; padding:0 5px; border-radius:4px; }
.home-layout { padding:40px 0; }
.play-panel { padding:28px; border:1px solid #ffffff15; border-radius:20px; background:linear-gradient(150deg,#1d2836a8,#111925e8); box-shadow:0 18px 70px #0003; backdrop-filter:blur(18px); }
.play-heading { font:650 22px system-ui; color:#f0f5fa; margin:0 0 24px; letter-spacing:-.4px; }
.field-label { font:500 10px system-ui; letter-spacing:.3px; color:#96a5b8; }
.menu-shell input:not([type=checkbox]),.settings-dialog input:not([type=range]) { border-color:#ffffff14; border-radius:9px; padding:13px; background:#080f1b70; color:#f0f4f9; width:100%; }
.mode-options { gap:6px; padding:4px; margin:17px 0; border:1px solid #ffffff09; border-radius:10px; background:#080f1b60; }
.mode-choice { padding:10px; background:transparent; border-color:transparent; border-radius:7px; font-size:13px!important; color:#8e9bad; }
.mode-choice.on { background:#ffffff0f; border-color:#ffffff16; color:#eef6f5; }
.join-row { grid-template-columns:minmax(0,1fr) 64px; gap:7px; }
.local-actions { border-color:var(--ui-line); margin-top:24px; padding-top:20px; }
.local-actions .secondary-action { font-size:11px!important; }
.difficulty { gap:20px; margin-top:17px; }.menu-shell .opt { color:#8494a9; }.menu-shell .opt.on { color:#b2efdf; border-color:#b2efdf80; }
.menu-footer { border-color:var(--ui-line); color:#687b91; }.menu-controls { font:10px system-ui; letter-spacing:1px; }
.menu-footer>a { color:#687b91; }
.settings-dialog,.ranking-dialog { --edge:#ffffff20; border:1px solid #ffffff20; border-radius:20px; background:linear-gradient(145deg,#1a2533,#101722); color:#dce5ef; padding:28px; box-shadow:0 25px 100px #000a; }
.settings-dialog { width:min(420px,calc(100vw - 28px)); }.settings-dialog::backdrop { background:#030710bd; backdrop-filter:blur(10px); }
.settings-dialog select { display:block; width:100%; margin:8px 0 10px; padding:11px 12px; border:1px solid #ffffff20; border-radius:9px; background:#101a27; color:#e4ecf5; font:inherit; color-scheme:dark; }
.settings-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:15px; }.settings-heading h2 { font:650 22px system-ui; margin:0; }
.settings-dialog details { padding:16px 0; border-top:1px solid #ffffff12; margin:0; }.settings-dialog summary { color:#c4cfdf; font:600 13px system-ui; cursor:pointer; }.settings-dialog .field-label { margin-top:16px; }
.audio-settings small { display:none; }.audio-settings .secondary-action { margin-top:10px; }
.ranking-heading h1 { font:650 30px system-ui; letter-spacing:-1px; }.ranking-heading small { color:#8eacb8; }
.ranking-tabs [aria-pressed=true] { border-color:#a7e7d89c; background:#a7e7d814; color:#bcf2e6; }
.ranking-dialog th { color:#8abeb4; }.ranking-dialog tbody tr:first-child { color:#bcf2e6; background:#a7e7d808; }
.ranking-note { font-size:11px; }
#select.in-lobby { grid-template-rows:94px auto auto auto 54px; }.in-lobby .hero-focus { display:none; }.in-lobby .ability-section { margin-top:14px; padding-top:12px; }.in-lobby .roster-section { padding:18px 0; }.in-lobby .hero-detail { margin:0; }
.team-panel { border-color:#98d2ff24; border-top-color:#98d2ff80; border-radius:14px; background:#1421329c; }.team-panel.red { border-color:#ed718124; border-top-color:#ed718180; }
.player-slot { border-radius:9px; background:#070f1b70; border-color:#ffffff0b; }.slot-info strong { font-weight:600; }.slot-mark { border-radius:7px; }

/* The combat dock is one component, with health above the ability tray. */
.combat-dock { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:min(600px,calc(100vw - 32px)); border:1px solid #ffffff24; border-radius:21px; background:linear-gradient(160deg,#182536ef,#0b1221ed); box-shadow:0 12px 45px #0007; backdrop-filter:blur(14px); }
.combat-dock .hud-left { position:relative; bottom:auto; left:auto; transform:none; padding:13px 18px 8px; gap:13px; background:none; }
.combat-dock .portrait { width:40px; height:40px; border-radius:11px; border:1px solid #ffffff45; box-shadow:none; }
.combat-dock .bars { flex:1; min-width:0; }
.combat-dock .hp { width:100%; height:15px; border-radius:5px; border:0; background:#050c17; }
.combat-dock .hp i { background:linear-gradient(90deg,#3caa98,#9ce5cf); border-radius:5px; }.combat-dock .hp .hp-text { font:650 10px/15px system-ui; color:#fff; }
.combat-dock .energy { width:100%; height:5px; margin-top:5px; border:0; border-radius:3px; background:#050c17; }.combat-dock .energy i { background:linear-gradient(90deg,#6b80d5,#a9bbff); }.combat-dock .energy-text { display:none; }
.combat-dock .hud-abilities { position:relative; left:auto; bottom:auto; transform:none; display:flex; justify-content:center; gap:10px; padding:10px 14px 16px; border:0; background:none; border-radius:0; box-shadow:none; }
.combat-dock .slot { position:relative; width:66px; height:66px; border-radius:12px; padding:0; border:1px solid #ffffff32; background:#070e18; box-shadow:none; cursor:help; pointer-events:auto; transition:transform .15s,border-color .15s; }
.combat-dock .slot:hover { transform:translateY(-3px); border-color:#b3f3e2; }.combat-dock .slot.ready { border-color:#8ed0bf70; box-shadow:none; }.combat-dock .slot.ult { border-color:#b9a1eb; }
.combat-dock .slot .icon { inset:3px; border-radius:8px; opacity:1; }.combat-dock .slot .ring { inset:3px; border-radius:8px; z-index:2; }.combat-dock .slot .name { display:none; }
.combat-dock .slot .key { top:5px; left:5px; right:auto; bottom:auto; background:#050b15de; color:#e9effa; padding:2px 5px; border-radius:4px; font:700 9px system-ui; border:0; z-index:3; }
.combat-dock .slot .cd { z-index:3; font:750 23px/60px system-ui; color:#fff; text-shadow:0 2px 5px #000; }.combat-dock .slot .cost { display:none; }.combat-dock .slot.notready .icon { filter:grayscale(.9); opacity:.4; }
.combat-dock .statuses { position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); margin:0; }.statuses .aura { width:38px; height:38px; flex-basis:38px; border-radius:9px; }.statuses .effect-art { border-radius:8px; overflow:hidden; }
.combat-dock .castbar { position:absolute; left:50%; bottom:calc(100% + 64px); transform:translateX(-50%); width:min(330px,80vw); height:24px; min-height:24px; border:1px solid #b5cfaa6b; border-radius:8px; background:#0b1622e8; }.cast-hint { display:none; }.castbar .cast-name { font:600 11px/24px system-ui; }
.hud-top { top:18px; padding:8px 18px; gap:22px; border:1px solid #ffffff1f; border-radius:14px; background:#101b2bdd; box-shadow:0 5px 22px #0003; }.hud-top .team span,.hud-top .arena,.hud-top .sub { display:none; }.hud-top .mid { min-width:94px; }.hud-top .phase { font:600 10px system-ui; letter-spacing:1px; color:#c4d3df; }.hud-top .team b { font:600 26px system-ui; }.hud-top .red { color:#ff536f; }.hud-top .blue { color:#86caff; }
.arena-frames { top:104px; width:195px; gap:8px; }.arena-frames.allies { left:24px; }.arena-frames.opponents { right:24px; }.arena-frame { border:1px solid #ffffff14; border-left:2px solid #75bcdf; border-radius:11px; padding:10px; background:#101c2ce0; box-shadow:0 5px 15px #0002; gap:9px; }.opponents .arena-frame { border-left-color:#ff536f; }.arena-frame.self { border-color:#88d7c75a; border-left-color:#a9e7d6; }
.frame-portrait { border-radius:7px; width:30px; height:30px; flex-basis:30px; border-color:#ffffff22; }.frame-name { font:600 10px system-ui; color:#c8d5e2; margin-bottom:6px; }.frame-health { height:12px; border:0; border-radius:3px; overflow:hidden; background:#070d17; }.frame-health>b { font:600 8px/12px system-ui; }.frame-health>i { background:#40889f; }.opponents .frame-health>i { background:#ba3c57; }.frame-effects { margin-top:6px; }.frame-effects .aura,.plate-effects .aura { border-radius:5px; }
.hud-stats { display:none; }.control-alert { top:25%; border:1px solid #f2caa240; border-radius:10px; background:#201c23e8; color:#f2d2a9; font:700 14px system-ui; padding:12px 22px; letter-spacing:1px; }
.trainbar { left:24px; bottom:24px; padding:11px; width:155px; border:1px solid #ffffff16; border-radius:12px; background:#0e1929e3; }.trainbar .tlabel,.trainbar .tsep { display:none; }.trainbar .opt { color:#a0b6c9; border-color:#ffffff18; border-radius:6px; }.trainbar .opt.on { border-color:#a8e8da80; color:#b8f3e2; }
.ability-tooltip { position:fixed; z-index:100; width:min(320px,calc(100vw - 24px)); padding:19px; background:linear-gradient(145deg,#1b293a,#101a28); border:1px solid #85d4bd65; border-radius:15px; box-shadow:0 15px 60px #0009; pointer-events:none; color:#dce7ef; font-family:system-ui; }
.ability-tooltip[hidden] { display:none; }.tooltip-heading { display:flex; gap:13px; align-items:center; }.tooltip-heading>i { display:block; flex:0 0 45px; height:45px; border-radius:9px; border:1px solid #ffffff30; }.tooltip-heading strong { display:block; font:650 16px/1.3 system-ui; }.tooltip-heading small { display:block; color:#91d6c2; font:650 10px system-ui; letter-spacing:.5px; margin-bottom:5px; }.ability-tooltip p { color:#a9b9cc; font:12px/1.7 system-ui; margin:15px 0; }.ability-tooltip dl { display:grid; grid-template-columns:1fr auto; gap:8px 20px; padding-top:13px; border-top:1px solid #ffffff14; margin:0; font:11px system-ui; }.ability-tooltip dt { color:#879db2; }.ability-tooltip dd { color:#e4edf4; font-weight:650; margin:0; text-align:right; }
@media(max-width:1050px) { #select.menu-shell { column-gap:35px; padding:0 28px; grid-template-columns:minmax(0,1fr) 290px; }.hero-focus { gap:20px; }.selected-portrait { width:110px; height:110px; flex-basis:110px; border-radius:23px; }.hero-mark { width:40px; height:40px; }#select .classes { grid-template-columns:repeat(4,minmax(0,1fr)); }#select .card { display:flex; flex-direction:row; gap:7px; padding:6px; }#select .card .name { font-size:10px; }.play-panel { padding:23px; } }
@media(max-width:760px) {
  #select.menu-shell { display:flex; padding:0 20px; }.menu-top { min-height:76px; }.wordmark { font-size:17px; letter-spacing:2px; }.wordmark small { display:none; }.menu-tools { gap:2px; }.menu-tools .secondary-action { font-size:10px!important; padding:9px; }#language { padding:9px 4px; }
  .roster-section { padding:24px 0; }.hero-focus { min-height:0; margin-bottom:22px; gap:20px; }.selected-portrait { width:86px; height:86px; flex-basis:86px; border-radius:19px; }#select #selected-hero { font-size:30px; margin:8px 0; letter-spacing:-.7px; }#selected-role { font-size:8px; letter-spacing:1px; }#hero-summary { font-size:11px; line-height:1.6; }.hero-mark { width:36px; height:36px; }#select .card .name { font-size:9px; }
  .ability-section { margin-top:20px; padding-top:16px; }.hero-detail { gap:8px; }.menu-ability { width:48px; height:48px; border-radius:10px; }.menu-ability kbd { font-size:8px; }.home-layout { padding:0 0 25px; }.play-panel { padding:22px; border-radius:16px; }.play-heading { margin-bottom:18px; font-size:18px; }
  .combat-dock { bottom:12px; width:calc(100vw - 24px); border-radius:17px; }.combat-dock .hud-left { padding:10px 13px 4px; gap:10px; }.combat-dock .portrait { width:32px; height:32px; border-radius:9px; }.combat-dock .hud-abilities { gap:6px; padding:9px 8px 12px; }.combat-dock .slot { width:clamp(38px,11.6vw,58px); height:clamp(38px,11.6vw,58px); border-radius:9px; }.combat-dock .slot .key { font-size:7px; padding:1px 3px; top:4px; left:4px; }.combat-dock .slot .cd { font-size:19px; line-height:42px; }.statuses .aura { width:32px; height:32px; flex-basis:32px; }.combat-dock .statuses { bottom:calc(100% + 10px); }.combat-dock .hp { height:12px; }.combat-dock .hp .hp-text { font-size:9px; line-height:12px; }
  .hud-top { top:12px; padding:6px 13px; gap:16px; }.hud-top .team b { font-size:22px; }.hud-top .mid { min-width:80px; }.hud-top .phase { font-size:9px; }
  .arena-frames { top:78px; width:133px; gap:6px; }.arena-frames.allies { left:10px; }.arena-frames.opponents { right:10px; }.arena-frame { padding:7px; gap:6px; border-radius:9px; }.frame-portrait { width:23px; height:23px; flex-basis:23px; }.frame-name { font-size:9px; }.frame-health>b { font-size:7px; }.frame-effects .aura { width:21px; height:21px; flex-basis:21px; }
  .trainbar { width:auto; left:12px; bottom:150px; max-width:130px; padding:7px; gap:5px; }.trainbar .opt { font-size:9px; }.trainbar .trskill { display:none; }.control-alert { top:38%; font-size:11px; padding:9px 15px; }
  #select.in-lobby .classes { grid-template-columns:repeat(4,minmax(0,1fr)); }#select.in-lobby .card { flex-direction:column; }.in-lobby .hero-mark { width:40px; height:40px; }.in-lobby .menu-ability { width:45px; height:45px; }
}
@media(prefers-reduced-motion:reduce) { .menu-ability,.combat-dock .slot { transition:none; } }

body:has(#select:not(.hidden)) .hud,body:has(#endscreen:not(.hidden)) .hud { display:none; }

.combat-dock .energy { width:calc(100% - 42px); height:6px; overflow:visible; }
.combat-dock .energy i { border-radius:3px; }
.combat-dock .energy-text { display:block; inset:auto; right:-42px; top:-3px; width:37px; text-align:right; font:650 8px/12px system-ui; color:#9daed1; }

/* Keep all art inside one square viewport at every responsive size. */
.menu-ability{flex:0 0 auto;aspect-ratio:1;isolation:isolate;overflow:hidden;box-sizing:border-box;}
.menu-ability i,.combat-dock .slot .icon{display:block;background-repeat:no-repeat;overflow:hidden;box-sizing:border-box;}
.menu-ability i{position:absolute;inset:3px;width:auto;height:auto;}
.menu-ability kbd{max-width:calc(100% - 10px);overflow:hidden;white-space:nowrap;line-height:15px;}
.round-timer{display:block;font:700 21px/1.2 system-ui;color:#f4ead7;font-variant-numeric:tabular-nums;letter-spacing:1px;margin-top:3px;}

.sudden{top:94px!important;left:50%;max-width:calc(100vw - 28px);padding:9px 16px;border:1px solid #fb78915e;border-radius:9px;background:#351523e8;color:#ffc1ca;font:700 11px/1.4 system-ui;letter-spacing:.7px;white-space:normal;text-align:center;}
@media(max-width:700px){.sudden{top:84px!important;font-size:10px;}}