/* Character creation: the new layout wearing the original 90s radioactive skin.
   Colors, slab headings and lettering come from radioactive-lobby.css; this file adds layout,
   tidier cards and modernized chunky buttons. Selectors start with html[data-art-style] body #menu to win. */

/* "Make it yours" banner removed: it repeated what the sections already say */
html[data-art-style] body #menu .build-heading{display:none}

@media(min-width:701px){
  html[data-art-style] body #menu{--rad-ink:#182016;--rad-edge:#0d1510;--rad-lime:var(--accent,#ceff24);--rad-pink:var(--pink,#ff3993);--rad-orange:#ff8a29;--rad-cream:#f5f0d6;--rad-panel:#17241ee8;--rad-olive:#7e9650;--ui-font:var(--font-body)}

  /* Sections sit on the theme's olive-rimmed panels so the new layout reads cleanly over the art */
  html[data-art-style] body #menu :is(.character-panel,.champion-stage,#ability-picker,#ultimate-picker,.launch-panel){background:var(--rad-panel);border:2px solid var(--rad-olive);border-radius:6px;box-shadow:4px 5px #060b08;padding:18px}
  html[data-art-style] body #menu .build-panel{background:none;border:0;box-shadow:none;padding:0;display:grid;gap:20px}

  /* Buttons: same cream / lime / pink palette, modernized - even sizing, rounded corners, hard offset shadow that presses in */
  html[data-art-style] body #menu :is(.difficulty-options button,.factions button){min-height:44px;padding:10px 14px;border:3px solid var(--rad-edge);border-radius:8px;box-shadow:3px 3px var(--rad-edge);font:800 13px/1.15 var(--ui-font);letter-spacing:.03em;text-transform:uppercase;transform:none;clip-path:none;transition:transform .08s,box-shadow .08s,background-color .12s}
  html[data-art-style] body #menu #open-wardrobe,html[data-art-style] body #menu #create-room,html[data-art-style] body #menu #join-room,html[data-art-style] body #menu #find-public{min-height:44px;padding:10px 14px;border:3px solid var(--rad-edge);border-radius:8px;box-shadow:3px 3px var(--rad-edge);font:800 13px/1.15 var(--ui-font);letter-spacing:.03em;text-transform:uppercase;transform:none;clip-path:none;transition:transform .08s,box-shadow .08s,background-color .12s}
  html[data-art-style] body #menu :is(.difficulty-options button,.factions button):hover:not(:disabled),html[data-art-style] body #menu :is(#open-wardrobe,#create-room,#join-room,#find-public):hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px var(--rad-edge)}
  html[data-art-style] body #menu :is(.difficulty-options button,.factions button):active:not(:disabled),html[data-art-style] body #menu :is(#open-wardrobe,#create-room,#join-room,#find-public):active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px var(--rad-edge)}
  html[data-art-style] body #menu :is(.difficulty-options button,.factions button)[aria-pressed=true]{box-shadow:3px 3px var(--rad-pink)}
  html[data-art-style] body #menu .difficulty-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
  html[data-art-style] body #menu .factions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px}
  html[data-art-style] body #menu .factions button{min-height:62px;padding:10px 14px;text-align:left;font:400 22px/1.05 var(--lettering);letter-spacing:.04em;text-transform:none}
  html[data-art-style] body #menu .factions button small{display:block;margin-top:3px;font:600 12px/1.3 var(--ui-font);text-transform:none;letter-spacing:0}
  html[data-art-style] body #menu .factions button[data-team=alliance][aria-pressed=true]{box-shadow:3px 3px var(--rad-pink)}
  html[data-art-style] body #menu .factions button[data-team=horde][aria-pressed=true]{box-shadow:3px 3px var(--rad-lime)}
  html[data-art-style] body #menu #open-wardrobe{margin-top:16px;display:flex;justify-content:space-between;align-items:center}

  /* Class tiles */
  html[data-art-style] body #menu .class-heading{display:flex;align-items:center;gap:12px;margin:0 0 10px}
  html[data-art-style] body #menu #classes{gap:8px;margin:0 0 14px}
  html[data-art-style] body #menu #classes .class-card{border-radius:8px;transition:transform .1s}
  html[data-art-style] body #menu #classes .class-card:hover{transform:translateY(-2px)}
  html[data-art-style] body #menu #classes .class-card strong{font-size:12px}

  /* Champion stage */
  html[data-art-style] body #menu .champion-stage{display:flex;flex-direction:column;align-items:center;overflow:hidden}
  html[data-art-style] body #menu .champion-caption{width:100%;text-align:center}
  html[data-art-style] body #menu .champion-caption p{text-align:center}
  html[data-art-style] body #menu #class-detail{text-align:left;margin-top:10px}

  /* Ability and ultimate cards: art beside the name, equal heights, footer pinned - in the original card colors */
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .loadout-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:stretch}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"art title" "art type" "rules rules" "footer footer";gap:6px 12px;height:100%;min-height:0;padding:12px;text-align:left;background:var(--card-paper,#16251e);color:var(--rad-cream);border:3px solid var(--rad-edge);border-radius:8px;box-shadow:3px 4px #08110b;clip-path:none;transform:none;border-image:none;transition:transform .1s,box-shadow .1s,border-color .1s}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card[aria-pressed=true]{border-color:var(--rad-lime);box-shadow:0 0 0 1px var(--rad-lime),3px 4px #08110b}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-art{grid-area:art;width:76px;height:76px;aspect-ratio:1;margin:0;padding:0;border-radius:6px;overflow:visible;position:relative;align-self:start}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-art .spell-icon{width:76px;height:76px;margin:0;border-radius:6px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-check{top:-6px;right:-6px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-title{grid-area:title;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0;padding:0;min-height:0;background:none;border:0}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-title b{font:400 21px/1.05 var(--lettering);letter-spacing:.03em;color:var(--rad-cream)}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-slot{position:static;flex:none}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-type{grid-area:type;display:block;font-size:0;margin:0;padding:0;background:none;border:0}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-type>span{display:inline-block;font:400 14px/1 var(--lettering);letter-spacing:.06em;color:var(--rad-ink);background:var(--rad-orange);border:2px solid var(--rad-edge);padding:3px 7px;transform:rotate(-2deg)}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-rules{grid-area:rules;margin:2px 0 0;padding:0;min-height:0;background:none;border:0}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-rules strong{display:block;font:400 19px/1.1 var(--lettering);letter-spacing:.04em;color:var(--rad-lime);margin:0 0 5px}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-rules small{display:block;font:13px/1.45 var(--ui-font);color:#e6e1c7}
  html[data-art-style] body #menu :is(#ability-picker,#ultimate-picker) .ability-card .card-footer{grid-area:footer;display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0 0;padding:8px 0 0;border-top:2px solid #ffffff1a;background:none}
  html[data-art-style] body #menu #ultimate-picker .loadout-slots{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

  /* Play panel layout (button colors stay the theme's) */
  html[data-art-style] body #menu .launch-panel{display:grid;gap:16px}
  html[data-art-style] body #menu #mode-picker{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 16px;margin:0}
  html[data-art-style] body #menu #mode-picker .setup-note{grid-column:1/-1;margin:2px 0 0}
  /* Map tiles sit in Play your way so the other battlegrounds are easy to find. */
  html[data-art-style] body #menu #mode-picker #map-picker{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px}
  html[data-art-style] body #menu #mode-picker .map-options{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin:0}
  html[data-art-style] body #menu #mode-picker .map-options button{padding:0}
  html[data-art-style] body #menu #mode-picker .map-options img{height:58px}
  html[data-art-style] body #menu .launch-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:20px;align-items:end;padding-top:14px;border-top:2px dashed #7e965066}
  html[data-art-style] body #menu .multiplayer-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:end}
  html[data-art-style] body #menu .multiplayer-box label,html[data-art-style] body #menu .multiplayer-box #room-help{grid-column:1/-1}
  /* Public play is the main online button; private rooms sit under it */
  html[data-art-style] body #menu .multiplayer-box :is(#find-public,#create-room,#join-room){grid-column:1/-1;width:100%}
  html[data-art-style] body #menu #find-public{background:#d0ff42;color:#12160b}
  html[data-art-style] body #menu #find-public:hover:not(:disabled){outline:2px solid #ffe46b;outline-offset:2px}
  html[data-art-style] body #menu #player-name{min-height:44px;border-radius:8px}
  html[data-art-style] body #menu .play-actions{position:static;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;background:none;border:0;box-shadow:none;padding:0;margin:0}
  html[data-art-style] body #menu .play-actions #start{min-height:58px;font-size:26px}
  html[data-art-style] body #menu .play-actions #enter-training{grid-column:1/-1}

  /* Readable notes */
  html[data-art-style] body #menu :is(.deck-help,.setup-note,#room-help){font-size:13px;line-height:1.45}
}

/* Wide screens: champion preview pinned on the left while you build on the right */
@media(min-width:1001px){
  html[data-art-style] body #menu main.selection{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);grid-template-areas:"stage char" "stage build" "stage launch" "stage extra";gap:20px;align-items:start}
  html[data-art-style] body #menu main.selection>.character-panel{grid-area:char;width:auto}
  html[data-art-style] body #menu main.selection>.champion-stage{grid-area:stage;width:auto;position:sticky;top:16px;align-self:start}
  html[data-art-style] body #menu main.selection>.build-panel{grid-area:build;width:auto}
  html[data-art-style] body #menu main.selection>.launch-panel{grid-area:launch;width:auto}
  html[data-art-style] body #menu main.selection>div:not([class]){grid-area:extra}
  html[data-art-style] body #menu .character-panel{display:block}
  html[data-art-style] body #menu #classes{grid-template-columns:repeat(9,minmax(0,1fr))}
  html[data-art-style] body #menu #classes .class-card{width:auto;height:auto;aspect-ratio:1}
  html[data-art-style] body #menu #champion-preview{height:360px;top:0}
  html[data-art-style] body #menu .stage-halo{max-height:420px}
}

/* Hover states. The theme's catch-all hover turns buttons cream with dark text and carries an ID,
   so these use #menu#menu: cards stay dark and readable, selected buttons keep their color. */
html[data-art-style] body #menu#menu :is(#ability-picker,#ultimate-picker) .ability-card:hover:not(:disabled){background-color:#1d3127;color:var(--card-ink,#f5f0d6);border-color:var(--pink,#ff3993);box-shadow:3px 4px #08110b}
html[data-art-style] body #menu#menu :is(#ability-picker,#ultimate-picker) .ability-card[aria-pressed=true]:hover:not(:disabled){border-color:var(--accent,#ceff24)}
@media(min-width:701px){
  html[data-art-style] body #menu#menu :is(#ability-picker,#ultimate-picker) .ability-card:hover:not(:disabled){transform:translateY(-2px)}
  html[data-art-style] body #menu#menu .difficulty-options button[aria-pressed=true]:hover:not(:disabled){background:var(--accent,#ceff24);color:#16200d;border-color:#0d1510}
  html[data-art-style] body #menu#menu .factions button[data-team=alliance][aria-pressed=true]:hover{background:#ffb42c;color:#151b11}
  html[data-art-style] body #menu#menu .factions button[data-team=horde][aria-pressed=true]:hover{background:var(--pink,#ff3993);color:#151b11}
  html[data-art-style] body #menu#menu #classes .class-card:hover:not(:disabled){background-color:transparent;color:inherit}
}

/* Leaderboard: a modal table in the radioactive lobby style */
.leaderboard-dialog{width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:22px 24px;border:2px solid #b9ff2c;border-radius:6px;background:#12161e;color:#f1f3df;box-shadow:0 0 0 4px #12161e,0 0 30px #b9ff2c55;font-family:var(--font-body)}
.leaderboard-dialog::backdrop{background:#05080bcc}
.leaderboard-dialog header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.leaderboard-dialog .eyebrow{color:#ff5fa8;font:800 11px/1.2 var(--font-body);letter-spacing:1.5px}
.leaderboard-dialog h2{margin:4px 0 0;color:#d0ff42;font:400 30px/1 var(--font-stencil);letter-spacing:1px;text-shadow:2px 2px 0 #3a4a10}
.leaderboard-dialog [data-close]{min-height:38px;padding:8px 14px;border:1px solid #ffffff30;border-radius:4px;background:#ffffff0d;color:#e9efdf;font:800 11px var(--font-body);letter-spacing:1px;cursor:pointer}
.leaderboard-rules{margin:12px 0 14px;color:#bfccc3;font-size:13px;line-height:1.45}
.leaderboard-body{overflow:auto;max-height:calc(100vh - 230px)}
.leaderboard-table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.leaderboard-table th,.leaderboard-table td{padding:9px 10px;border-bottom:1px solid #ffffff14;text-align:right;white-space:nowrap}
.leaderboard-table thead th{position:sticky;top:0;background:#1b212b;color:#aab8b4;font:800 11px var(--font-body);letter-spacing:.8px;text-transform:uppercase}
.leaderboard-table th:nth-child(2),.leaderboard-table td:nth-child(2){text-align:left;width:100%}
.leaderboard-table tbody th{color:#f7f9ea;font-weight:700}
.leaderboard-table tbody tr:nth-child(-n+3) td:first-child{color:#d0ff42;font-weight:800}
.leaderboard-table thead button{all:unset;cursor:pointer;padding:2px 0;border-bottom:2px solid transparent}
.leaderboard-table thead button:hover,.leaderboard-table thead button:focus-visible{color:#f1f3df;border-bottom-color:#ffffff55}
.leaderboard-table thead button.active{color:#d0ff42;border-bottom-color:#d0ff42}
.leaderboard-empty,.leaderboard-note{padding:18px 4px;color:#aab8b4;text-align:center;white-space:normal}
.leaderboard-note{padding:10px 0 0;font-size:12px;text-align:left}
@media(max-width:700px){.leaderboard-dialog{padding:16px 14px}.leaderboard-dialog h2{font-size:24px}.leaderboard-table{font-size:12px}.leaderboard-table th,.leaderboard-table td{padding:7px 6px}.leaderboard-table th:nth-child(7),.leaderboard-table td:nth-child(7){display:none}}
#open-leaderboard{width:100%;margin-top:8px;min-height:40px}
html[data-art-style=radioactive] #menu #open-leaderboard{background:#2a1b2c;color:#ff8fc4;border:2px solid #c9729f;padding:8px 10px;font:800 11px/1.2 var(--font-body);letter-spacing:.5px;min-height:36px;border-radius:0}
html[data-art-style=radioactive] #menu #open-leaderboard:hover:not(:disabled){background:#3d2340;color:#ffb3d6;border-color:var(--pink,#ff4fa0)}
html[data-art-style] body #menu .play-actions #open-leaderboard{grid-column:1/-1}
@media(max-width:700px){html[data-art-style] body #menu .play-actions #open-leaderboard{min-height:0;padding:5px 6px;font-size:10px}}
#menu .lobby-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Ability cards: reach line and the live preview slot (ability-stage.js). The canvas only exists in the active card. */
html[data-art-style] body #menu #ability-picker .ability-card{grid-template-rows:auto auto 1fr auto auto auto;grid-template-areas:"art title" "art type" "rules rules" "reach reach" "stage stage" "footer footer"}
html[data-art-style] body #menu #ability-picker .ability-card .card-reach{grid-area:reach;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font:var(--bb-label-s,700 11px sans-serif);letter-spacing:.04em;text-transform:uppercase;color:var(--bb-lime,#ceff24)}
html[data-art-style] body #menu #ability-picker .ability-card .card-reach small{font-size:10px;color:var(--bb-text-dim,#aab8b4);text-transform:none;letter-spacing:0}
html[data-art-style] body #menu #ability-picker .ability-card .card-stage{grid-area:stage;display:block}
html[data-art-style] body #menu #ability-picker .ability-card .card-stage:empty{display:none}
html[data-art-style] body #menu #ability-picker .ability-stage{display:block;width:100%;height:150px;image-rendering:pixelated;background:#0b120e;border:2px solid var(--bb-ink,#05080c);border-radius:4px}
html[data-art-style] body #menu #ability-picker .ability-card .card-reach b{color:var(--bb-lime,#ceff24);font:700 11px/1.3 var(--font-body,sans-serif);letter-spacing:.04em}

/* Starting level (test starts, solo and private rooms): a stepper and a slider, 1-20. */