:root{--bg:#07090f;--panel:#111725e6;--line:#2a3550;--ink:#e8eefc;--dim:#93a0bd;--gold:#ffcb3d;--hot:#ff5a3d;--blue:#4aa8ff;font-family:system-ui,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}
#g-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#g-app{position:relative;z-index:1;height:100%}
.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:22px 32px;opacity:0;transition:opacity .25s;overflow:auto}
.screen.active{display:flex;opacity:1}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Title */
#screen-title{align-items:center;justify-content:center;gap:36px}
.logo-wrap{position:relative;text-align:center}
#g-logo-fx{position:absolute;left:50%;top:50%;width:900px;height:300px;transform:translate(-50%,-55%);pointer-events:none}
#g-logo{position:relative;margin:0;font-size:clamp(56px,10vw,128px);font-weight:900;letter-spacing:.06em;line-height:.95;background:linear-gradient(180deg,#fff7d6 0%,#ffd23d 40%,#ff8a1a 75%,#d6381c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px #ff8a1a88) drop-shadow(0 6px 0 #3a1406);font-style:italic}
#g-logo small{display:block;font-size:.3em;letter-spacing:.55em;font-style:normal;background:linear-gradient(90deg,#9fd8ff,#ffffff,#9fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.tagline{position:relative;margin:14px 0 0;color:var(--dim);letter-spacing:.2em;text-transform:uppercase;font-size:13px}
.title-menu{display:flex;flex-direction:column;gap:12px;width:min(340px,80vw)}
.menu-btn{position:relative;padding:16px 22px;border:2px solid #ffffff22;border-radius:14px;background:linear-gradient(180deg,#1b2338ee,#0e1322ee);font-size:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;transition:transform .12s,border-color .12s,box-shadow .12s}
.menu-btn small{display:block;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--dim);text-transform:none;margin-top:2px}
.menu-btn:not(:disabled):hover,.menu-btn:not(:disabled):focus-visible{transform:translateX(6px);border-color:var(--gold);box-shadow:0 0 24px #ffb02e55,inset 0 0 18px #ffb02e22;outline:none}
.menu-btn:not(:disabled):hover::before,.menu-btn:not(:disabled):focus-visible::before{content:'▶';position:absolute;left:-26px;color:var(--gold)}
.foot{position:absolute;bottom:14px;color:#5f6b86;font-size:11px;margin:0}

/* Bars, panels, pills */
.bar{display:grid;grid-template-columns:150px 1fr 150px;align-items:center;margin-bottom:16px}
.bar h2{margin:0;text-align:center;font-size:24px;letter-spacing:.04em}
.bar h2 small{display:block;font-size:12px;font-weight:500;color:var(--dim);letter-spacing:.08em}
.back{justify-self:start;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 14px;color:var(--dim)}
.back:hover{color:var(--ink);border-color:var(--dim)}
.pill{justify-self:end;padding:6px 14px;border-radius:999px;background:#1c2540;border:1px solid var(--line);font-weight:700}
.pill.full{background:#3a2a06;border-color:var(--gold);color:var(--gold)}
.coins{color:var(--gold)}
.panel,.detail{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;backdrop-filter:blur(4px)}
.primary{padding:12px 26px;border-radius:12px;border:0;background:linear-gradient(180deg,#ffd23d,#ff8a1a);color:#2a1205;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 0 #8a3a08}
.primary:not(:disabled):hover{filter:brightness(1.08)}
.ghost{padding:12px 20px;border-radius:12px;background:none;border:1px solid var(--line);color:var(--dim)}
#g-app .actions,.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;padding:0}
#g-app .actions button,.modal .actions button{flex:none;font-size:inherit}
.note{color:var(--dim);font-size:12px}
.sub{color:var(--dim);margin:0 0 10px}

/* Modes */
.mode-list{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:16px;flex:1;max-height:420px}
.mode{position:relative;text-align:left;border-radius:18px;border:2px solid var(--line);background:linear-gradient(160deg,#1a2240,#0d1120);padding:20px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.mode h3{margin:0;font-size:22px}
.mode p{margin:0;color:var(--dim)}
.mode.available{border-color:var(--gold);box-shadow:0 0 36px #ff9a2e33}
.mode.available:hover,.mode.available:focus-visible{box-shadow:0 0 50px #ff9a2e66;transform:translateY(-3px)}
.mode.locked{filter:grayscale(.8);opacity:.6;cursor:not-allowed}
.mode .preview{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:10px 0}.mode .preview canvas{width:70px;height:70px;image-rendering:pixelated}
.mode .lock{font-size:40px;margin-top:auto;opacity:.6}
.phases{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.phase{padding:6px 10px;border-radius:10px;border:1px solid var(--line);font-size:12px;color:var(--dim)}
.phase.on{border-color:var(--gold);color:var(--gold);font-weight:700}

/* Team building */
.team-layout{flex:1;display:grid;grid-template-columns:1fr 380px;gap:16px;min-height:0}
.pool{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-content:start;overflow:auto;padding:4px}
.card{position:relative;border:2px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#182038,#0e1322);padding:10px 10px 12px;text-align:center;transition:transform .12s,border-color .12s}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:#7f8fb5;outline:none}
.card.picked{border-color:var(--gold);box-shadow:0 0 22px #ffb02e55}
.card .badge{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#2a1205;font-weight:800;line-height:24px;font-size:13px}
.card canvas{width:96px;height:96px;image-rendering:pixelated}
.card .nm{font-weight:800;font-size:15px;margin:2px 0 6px}
.card .bst{font-size:11px;color:var(--dim);margin-top:6px}
.types{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.type{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 0 #0006;text-transform:uppercase}
.detail{overflow:auto}
.detail h3{margin:0 0 4px;font-size:22px}
.stat{display:grid;grid-template-columns:62px 34px 1fr;gap:8px;align-items:center;font-size:12px;margin:3px 0}
.stat i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#4aa8ff,#7dffb2)}
.stat i.hi{background:linear-gradient(90deg,#ffcb3d,#ff6a2a)}
.moves{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px}
.moves td,.moves th{padding:5px 4px;border-bottom:1px solid #ffffff12;text-align:left}
.moves th{color:var(--dim);font-weight:600}
.kv{font-size:12px;color:var(--dim);margin:8px 0}
.kv b{color:var(--ink)}
.team-foot{display:flex;align-items:center;gap:16px;margin-top:14px}
.slots{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.slot{height:74px;border:2px dashed var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;color:#4f5b78;font-size:12px;background:#0b0f1acc}
.slot.full{border-style:solid;border-color:#ffcb3d88;color:var(--ink);font-weight:700}
.slot canvas{width:56px;height:56px;image-rendering:pixelated}

/* Hub */
.route{display:flex;align-items:center;gap:0;margin:6px 0 18px;overflow-x:auto;padding:6px 4px}
.node{flex:0 0 auto;width:124px;border:2px solid var(--line);border-radius:14px;padding:10px;background:#0e1322;text-align:center;font-size:12px;color:var(--dim)}
.node b{display:block;color:var(--ink);font-size:13px}
.node.done{border-color:#3dd68c;color:#3dd68c}
.node.current{border-color:var(--gold);box-shadow:0 0 22px #ffb02e55;color:var(--gold)}
.node.boss{background:linear-gradient(180deg,#2a0e14,#0e1322)}
.link{flex:0 0 26px;height:3px;background:var(--line)}
.link.done{background:#3dd68c}
.hub-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
.mini-team{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.mini{border:1px solid var(--line);border-radius:12px;padding:6px;text-align:center;font-size:11px;background:#0b0f1a}
.mini canvas{width:64px;height:64px;image-rendering:pixelated}
.mini.unbuilt{opacity:.55}
.mini .ph{width:64px;height:64px;margin:0 auto;border-radius:50%;background:radial-gradient(circle,#2a3550,#141b2c);display:flex;align-items:center;justify-content:center;font-size:26px;color:#5f6b86}
.hp{height:5px;border-radius:3px;background:#1d2540;margin-top:4px;overflow:hidden}.hp i{display:block;height:100%;background:#3dd68c}
.modal{border:1px solid var(--line);border-radius:18px;background:#0f1424;color:var(--ink);padding:22px;width:min(640px,92vw)}
.modal::backdrop{background:#000a}
.modal h3{margin:0 0 6px}
.modal p{color:var(--dim);margin:0 0 14px}
@media (max-width:1000px){.team-layout{grid-template-columns:1fr}.pool{grid-template-columns:repeat(2,1fr)}.mode-list{grid-template-columns:1fr 1fr}.hub-grid{grid-template-columns:1fr}}

/* The battle (the arena dialog from the practice duel, in Gauntlet mode: only battle controls). */
.gauntlet-battle .arena-settings label:not(.keep),.gauntlet-battle #arena-auto,.gauntlet-battle #arena-reset,.gauntlet-battle #arena-inspect,.gauntlet-battle #arena-step,.gauntlet-battle #arena-mega-pick{display:none!important}
.gauntlet-battle{font-family:system-ui,sans-serif}
body{font-family:system-ui,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink)}
/* style.css is loaded for the battle window; keep its page-level rules (green canvas backdrop,
   Outfit headings, muted paragraph colour, light buttons) out of the Gauntlet menus. */
#g-bg,#g-logo-fx,#g-app canvas{background:transparent}
#g-app h1,#g-app h2,#g-app h3{font-family:system-ui,'Segoe UI',Roboto,sans-serif;letter-spacing:normal}
#g-app #g-logo{letter-spacing:.06em;font-weight:900}
#g-app p{color:var(--dim)}
#g-app header.bar{height:auto;overflow:visible;background:none;border:0;border-radius:0;padding:0;margin-top:0}
#g-app .bar i{display:inline;height:auto;background:none}
#g-app .actions .primary,.modal .actions .primary{background:linear-gradient(180deg,#ffd23d,#ff8a1a);color:#2a1205}
#g-app .actions .primary:disabled{background:#2a3550;color:var(--dim);box-shadow:none}
#g-app .actions{flex-wrap:nowrap}
#g-app .actions .ghost,.modal .actions .ghost{background:none;color:var(--dim)}
.gauntlet-battle > p:last-child{display:none}
.modal canvas{background:transparent}
/* ---- Gauntlet battle screen: full screen, the canvas does the talking (broadcast HUD) ---- */
.gauntlet-battle{background:#05070d!important;color:#e8eefc;border:0!important;padding:8px 10px!important}
.gauntlet-battle[open]{display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.gauntlet-battle .library-heading{grid-column:1;grid-row:1;display:flex;align-items:center;gap:12px;margin:0;padding:0;border:0}
.gauntlet-battle .library-heading .eyebrow{color:#ffd23d;font-size:10px;letter-spacing:.2em}
.gauntlet-battle .library-heading h2{color:#fff;font-size:15px!important;letter-spacing:.06em;margin:0!important}
.gauntlet-battle #close-arena{order:-1;background:#1a1f33;color:#e8eefc;border:2px solid #2c3554;border-radius:10px;padding:6px 12px;font-weight:700}
.gauntlet-battle .arena-settings{grid-column:2;grid-row:1;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:8px;margin:0;padding:0;background:none;border:0}
.gauntlet-battle .arena-settings label.keep{display:flex;align-items:center;gap:6px;color:#93a0bd;font-size:10px;letter-spacing:.12em}
.gauntlet-battle .arena-settings button,.gauntlet-battle .arena-settings select{background:#1a1f33;color:#e8eefc;border:2px solid #2c3554;border-radius:10px;padding:6px 12px;font:700 12px system-ui,sans-serif;letter-spacing:.04em}
.gauntlet-battle .arena-settings button:disabled{opacity:.4}
.gauntlet-battle .arena-score,.gauntlet-battle #arena-log{display:none!important}
.gauntlet-battle .arena-stage{grid-column:1/-1;grid-row:2;height:100%;min-height:0;border:0!important;background:#05070d!important;border-radius:12px}
.gauntlet-battle .arena-stage canvas{background:#05070d!important}
.gauntlet-battle #arena-moves{grid-column:1/-1;grid-row:3;display:grid!important;grid-template-columns:repeat(4,1fr);gap:10px;padding:0!important;margin:0}
.gauntlet-battle #arena-moves button{display:flex;align-items:center;gap:12px;min-height:58px;background:linear-gradient(180deg,#1d2440,#121729);border:3px solid #14121f;box-shadow:inset 0 0 0 2px #2c3554,0 4px 0 #0a0c16;border-left:10px solid var(--mt,#888);border-radius:12px;color:#fff;padding:8px 14px;font:800 15px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;text-align:left;cursor:pointer}
.gauntlet-battle #arena-moves button:not(:disabled):hover{filter:brightness(1.15);transform:translateY(-1px)}
.gauntlet-battle #arena-moves button:disabled{opacity:.55}
.gauntlet-battle #arena-moves kbd{background:var(--mt,#888);color:#14121f;border:2px solid #14121f;border-radius:8px;min-width:30px;padding:5px 0;text-align:center;font:900 15px system-ui,sans-serif}
.gauntlet-battle #arena-moves span{display:flex;flex-direction:column;gap:3px}
.gauntlet-battle #arena-moves small{color:#9fb0d6;font:700 10px system-ui,sans-serif;letter-spacing:.1em}
/* team points */
.budget{display:flex;align-items:center;gap:12px;margin:-6px 0 12px}
.budget-track{flex:1;height:12px;border-radius:8px;background:#151b2e;border:2px solid #2a3550;overflow:hidden}
.budget-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4aa8ff,#ffcb3d);transition:width .2s}
#team-budget b{color:var(--gold);font-size:1.15em}
#team-budget.low b{color:var(--hot)}
#team-budget.shake{animation:budget-shake .35s}
@keyframes budget-shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
#pool .card{position:relative}
#pool .card .cost{position:absolute;top:8px;left:8px;display:flex;align-items:baseline;gap:2px;background:#ffcb3d;color:#2a1205;border:2px solid #14121f;border-radius:10px;padding:2px 7px;font-weight:900;font-size:15px;box-shadow:0 2px 0 #8a3a08}
#pool .card .cost small{font-size:9px;letter-spacing:.06em}
#pool .card.unaffordable{opacity:.45;filter:grayscale(.6)}
/* ---- Settings window ---- */
.hub-right{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.gear{padding:8px 12px!important;font-size:13px}
dialog.settings{width:min(760px,94vw);max-height:88vh;padding:0;overflow:hidden;display:none;flex-direction:column}
dialog.settings[open]{display:flex}
.set-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 8px}
.set-head h3{margin:0;font-size:20px}
.set-tabs{display:flex;gap:6px;padding:0 16px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.set-tabs button{background:none;border:1px solid transparent;color:var(--dim);border-radius:10px;padding:8px 14px;font-weight:700;cursor:pointer}
.set-tabs button[aria-selected="true"]{background:#1d2440;border-color:#2c3554;color:#fff;box-shadow:inset 0 -3px 0 var(--gold)}
.set-panel{padding:14px 20px;overflow:auto;flex:1}
.set-lead{color:var(--dim);margin:0 0 10px}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #1f2740;cursor:pointer}
.set-row span b{display:block;color:var(--ink)}
.set-row small,.key-row small{display:block;color:var(--dim);font-size:12px;margin-top:3px;line-height:1.4}
.set-row select{background:#1a1f33;color:var(--ink);border:2px solid #2c3554;border-radius:10px;padding:7px 10px;font-weight:700}
.rng{display:flex;align-items:center;gap:10px}.rng input{width:200px;accent-color:var(--gold)}.rng output{min-width:44px;text-align:right;font-weight:800;color:var(--gold)}
.switch{appearance:none;width:46px;height:26px;border-radius:13px;background:#2a3550;position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#cdd6ea;transition:left .15s}
.switch:checked{background:#3aa65a}.switch:checked::after{left:23px;background:#fff}
.keys{display:grid;gap:6px}
.key-row{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:center;padding:10px 12px;background:#121829;border:1px solid #1f2740;border-radius:12px}
.key-row b{color:var(--ink)}
.kbds{display:flex;gap:5px;flex-wrap:wrap}
.kbds kbd{min-width:30px;text-align:center;padding:6px 8px;border-radius:8px;background:#e8eefc;color:#14121f;font:800 13px system-ui,sans-serif;box-shadow:0 3px 0 #7a849c}
.guide{background:#121829;border:1px solid #1f2740;border-radius:12px;margin:0 0 8px;padding:0 14px}
.guide summary{cursor:pointer;font-weight:800;padding:12px 0;color:var(--ink)}
.guide p{margin:0 0 12px;color:#c4cde2;line-height:1.55}
.set-actions{display:flex;justify-content:flex-end;padding-top:14px}
.set-foot{margin:0;padding:10px 20px 14px;color:var(--dim);font-size:12px;border-top:1px solid var(--line)}
.gauntlet-battle .arena-settings button{white-space:nowrap}
.gauntlet-battle #arena-dodge{display:none}

/* Start screen: the first click/key also unlocks sound (browsers require it before music can play).
   Until then the title menu is hidden and a blinking prompt sits in its place. */
#g-splash{text-align:center;cursor:pointer;padding:30px 60px;transition:opacity .4s}
#g-splash.gone{opacity:0;pointer-events:none}
#screen-title:has(#g-splash:not(.gone)) .title-menu{display:none}
.splash-press{color:#fff;font-weight:800;letter-spacing:.3em;font-size:18px;animation:splash-blink 1.2s steps(2) infinite;text-shadow:0 0 12px #ff8a1a88}
.splash-note{margin-top:12px;color:var(--dim);font-size:13px;letter-spacing:.1em}
@keyframes splash-blink{50%{opacity:.25}}