/* Art-first cards: square atlas illustrations, compact rules, no filler height. */
html #menu .loadout-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-items:start}
html #menu .ability-card{--card-ink:#f5f0d6;--card-edge:#8caa45;--card-paper:#16251e;}
html #menu :is(.loadout-slots,.launcher-dialog .ability-grid)>button.ability-card,
html #menu button.ultimate-card{
  display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;
  padding:0;border:3px solid var(--card-edge);border-image:none;
  border-radius:12px 15px 11px 14px;background:var(--card-paper);color:var(--card-ink);
  text-align:left;box-shadow:inset 0 0 0 1px #b1cc5740,3px 5px #08110bd9;
  overflow:hidden;transform:none;isolation:isolate;transition:transform .12s,border-color .12s;
}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-title{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:46px;flex:0 0 auto;padding:10px 11px;background:#111c17;border-bottom:2px solid #8caa45}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-title b{font:400 21px/1.12 var(--lettering,Impact,sans-serif);color:var(--card-ink);letter-spacing:.3px;overflow-wrap:anywhere}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-slot{font:700 12px var(--font-body);color:#d7ff49;border:1px solid #8caa45;border-radius:50%;min-width:25px;height:25px;text-align:center;line-height:23px;flex:none}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-art{display:block;position:relative;flex:0 0 auto;width:100%;aspect-ratio:1;height:auto;background:#111c17;overflow:hidden;border:0;border-radius:0}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-art .spell-icon{display:block;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;opacity:1;filter:none}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-type{display:flex;justify-content:space-between;gap:6px;font:400 15px/1.3 var(--lettering,Impact,sans-serif);text-transform:uppercase;letter-spacing:.45px;padding:7px 10px;border-bottom:1px solid #74943b;color:#daff66;background:#213626;flex:0 0 auto}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-type>span{color:#d3e2b6;font-size:12px;text-align:right}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-rules{display:block;flex:0 0 auto;padding:11px 12px;min-height:0;background:#16251e}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-rules strong{display:block;color:#e3ff79;font:400 20px/1.2 var(--lettering,Impact,sans-serif)}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-rules small{display:block;color:#f1ecd8;font:500 13px/1.55 var(--font-body);margin:8px 0 0}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-footer{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;padding:9px 10px;border-top:2px solid #8caa45;font:400 13px/1.25 var(--lettering,Impact,sans-serif);color:#ffbc68;background:#101c17;flex:0 0 auto}
html #menu :is(.ability-card,#loadout-browser .ability-card) .card-footer>span:last-child{color:#d7ff49}
html #menu :is(.loadout-slots,.launcher-dialog .ability-grid)>button.ability-card:hover:not(:disabled),
html #menu button.ultimate-card:hover:not(:disabled){background:var(--card-paper);border-color:#9ab94e;box-shadow:inset 0 0 0 1px #b1cc5740,3px 6px #08110b;transform:translateY(-3px);color:var(--card-ink)}
html #menu .launcher-dialog .ability-card[aria-pressed=true]{border-color:#739841;box-shadow:inset 0 0 0 1px #d7ff49,0 0 0 2px #a8c665}
html #menu .launcher-dialog .ability-card:disabled{opacity:.8;filter:saturate(.8);background:var(--card-paper);color:var(--card-ink)}
html #menu .launcher-dialog .ability-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
html #menu .launcher-dialog:has(.ability-card){width:min(1120px,calc(100vw - 32px))}
html #menu .card-tradeoffs{display:block;padding:12px 16px;border-top:1px dashed #8caa45;background:#1e3023}
html #menu #loadout-browser .card-tradeoffs .ability-starting{display:none}
html #menu #loadout-browser .card-tradeoffs :is(em,small){font:500 12px/1.5 var(--font-body);color:#e6ebcf}
html #menu #loadout-browser .card-tradeoffs .ability-tradeoff b{display:inline;font:400 18px var(--lettering,Impact,sans-serif);color:#d7ff49}
html #menu :is(.loadout-slots,.launcher-dialog .ability-grid)>button.ability-card{aspect-ratio:auto}

/* The painted icon is the button. Labels sit on a dark ink strip over its edge. */
html[data-art-style=radioactive] #menu .class-card{display:block;position:relative;aspect-ratio:1;min-height:0;padding:0;border:0;border-image:none;background:transparent;border-radius:6px;overflow:hidden;box-shadow:2px 3px #080f0a;isolation:isolate}
html[data-art-style=radioactive] #menu .class-card .spell-icon{display:block;width:100%;height:100%;margin:0;border:0;border-radius:0;box-shadow:none;filter:none;opacity:1}
html[data-art-style=radioactive] #menu .class-card strong{position:absolute;bottom:5px;left:5px;right:5px;padding:5px 2px 4px;font:400 15px/1.15 var(--lettering);letter-spacing:.35px;color:#f5f0d6;background:#101912eb;text-shadow:1px 2px #000;border-radius:2px 5px;overflow-wrap:normal}
html[data-art-style=radioactive] #menu .class-card:is(:hover,[aria-pressed=true]){background:transparent;box-shadow:0 0 0 2px #ceff24,2px 4px #080f0a;transform:none}
html[data-art-style=radioactive] #menu .class-card[aria-pressed=true] strong{color:#ceff24}
html[data-art-style=radioactive] #menu .class-card[aria-pressed=true]:before{display:none}
html[data-art-style=radioactive] #menu .class-card[aria-pressed=true]:after{display:block;content:'✓';position:absolute;right:5px;top:5px;padding:2px 5px;color:#ceff24;background:#101912eb;border-radius:4px;font:900 14px var(--font-body)}
html[data-art-style=radioactive] #menu .selection{grid-template-columns:210px minmax(200px,.5fr) minmax(600px,1.5fr);gap:22px}
html[data-art-style=radioactive] #menu .champion-stage{min-height:0;height:auto}
html[data-art-style=radioactive] #menu #champion-preview{width:100%;left:0;top:0;height:410px}
html[data-art-style=radioactive] #menu .champion-caption{margin-top:-30px}
html[data-art-style=radioactive] #menu #champion-facing{top:310px;right:0}
html[data-art-style=radioactive] #menu #champion-name{font-size:43px}
@media(min-width:1600px){
  html[data-art-style=radioactive] #menu .selection{grid-template-columns:230px minmax(240px,.5fr) minmax(800px,1.5fr);gap:24px}
  html[data-art-style=radioactive] #menu #champion-preview{height:460px}
  html[data-art-style=radioactive] #menu #champion-facing{top:350px}
}
@media(max-width:1200px){
  html[data-art-style=radioactive] #menu .selection{grid-template-columns:260px minmax(0,1fr)}
  html[data-art-style=radioactive] #menu .champion-stage{min-height:0}
  html[data-art-style=radioactive] #menu .build-panel{grid-column:1/-1;display:block}
  html #menu .loadout-slots{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
  html #menu :is(.ability-card,#loadout-browser .ability-card) .card-title b{font-size:19px}
}
@media(max-width:700px){
  html #menu .loadout-slots,html #menu .launcher-dialog .ability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html #menu :is(.ability-card,#loadout-browser .ability-card) .card-title b{font-size:22px}
  html #menu :is(.ability-card,#loadout-browser .ability-card) .card-title{padding:10px;gap:4px}
  html #menu :is(.ability-card,#loadout-browser .ability-card) .card-rules{padding:12px}
  html #menu :is(.ability-card,#loadout-browser .ability-card) .card-type{padding:8px 10px;flex-wrap:wrap}
  html #menu :is(.ability-card,#loadout-browser .ability-card) .card-footer{padding:10px;font-size:13px;flex-wrap:wrap}
  html #menu :is(.ability-card,#loadout-browser .ability-card) .card-slot{min-width:21px;height:21px;line-height:19px;font-size:10px}
}
@media(max-width:550px){
  html[data-art-style=radioactive] #menu .selection{grid-template-columns:minmax(0,1fr)}
  html[data-art-style=radioactive] #menu #champion-preview{height:285px;top:0}
  html[data-art-style=radioactive] #menu #champion-facing{top:205px;right:12%}
  html[data-art-style=radioactive] #menu .champion-caption{margin-top:-25px}
  html[data-art-style=radioactive] #menu #champion-name{font-size:37px}
  html #menu .loadout-slots{gap:10px}
  html #menu .launcher-dialog .ability-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html #menu .ability-card{transition:none;transform:none}}

html #menu #loadout-browser button.ability-card[aria-pressed=true]{border-color:#739841;box-shadow:inset 0 0 0 1px #d7ff49,0 0 0 2px #a8c665}
html #menu #loadout-browser button.ability-card:hover:not(:disabled){border-color:#9ab94e;background:var(--card-paper)}

html #menu #loadout-browser .card-tradeoffs :is(.ability-role,.ability-tradeoff){display:block;color:#e6ebcf;font:500 12px/1.5 var(--font-body);margin-top:7px}

/* Checkmarks are part of the art window, so selection never hides the rules. */
html #menu .card-check{position:absolute;right:8px;top:8px;width:29px;height:29px;display:grid;place-items:center;border:2px solid #101c17;border-radius:7px 3px;background:#d7ff49;color:#142010;font:900 22px/1 var(--font-body);box-shadow:2px 3px #091109}
html #menu .loadout-slots>button.ability-card[aria-pressed=true]{border-color:#caff38;box-shadow:0 0 0 1px #caff3866,3px 4px #08110b;background:var(--card-paper)}
html #menu .loadout-slots>button.ability-card.replacing{border-color:#ffb443;box-shadow:0 0 0 3px #ffb443}
html #menu .loadout-slots>button.ability-card.replacing .card-check{background:#ffb443}
html #menu .deck-help{font:500 13px/1.5 var(--font-body);color:#f0efd6;background:#13231ded;padding:11px 13px;border-left:3px solid #caff38;border-radius:3px 8px;margin:8px 0 12px}
html #menu .ultimate-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
html #menu .ultimate-choice{--card-edge:#c48c42}
html #menu .ultimate-choice .card-title{background:#302116;border-bottom-color:#c48c42}
html #menu .ultimate-choice .card-type{background:#35291d;color:#ffce7c}
html #menu #loadout-browser .incoming-details{padding:14px 20px;color:#e9efd7;background:#182b20;font:500 13px/1.5 var(--font-body)}
html #menu #loadout-browser .incoming-details :is(strong,em,small){display:block;margin:5px 0;color:#e9efd7}
html #menu #loadout-browser .incoming-details b{color:#d7ff49}
@media(max-width:700px){
 html #menu .ultimate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 html #menu :is(.ability-card,#loadout-browser .ability-card) .card-title b{font-size:20px}
 html #menu .launcher-dialog .ability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Class mastery: XP bar, pair picks and locked cards (locked cards stay equippable for the Training Yard). */
.mastery-panel{margin:0 0 12px;padding:10px 12px;border:1px solid #d0ff4255;border-radius:8px;background:#141c14cc;color:#e9efdf;font-size:12px;line-height:1.45}
.mastery-panel b{display:block;color:#d0ff42;letter-spacing:.06em;font-size:12px}
.mastery-panel p{margin:4px 0 0;color:#cbd6c6}
.mastery-panel small{display:block;margin-top:4px;color:#aab8b4;font-size:11px}
.mastery-bar{height:8px;margin-top:6px;border-radius:4px;background:#ffffff1a;overflow:hidden}
.mastery-bar i{display:block;height:100%;background:linear-gradient(90deg,#9be22b,#d0ff42)}
.ability-card.locked{filter:grayscale(.75) brightness(.8)}
.ability-card.locked .card-footer span:last-child{color:#ff8fc4}
.ability-card.locked[aria-pressed=true]{filter:grayscale(.35)}
.mastery-gain{color:#d0ff42;font-weight:700}
/* Class move: fixed per class, so a card without button states. Pips compare mobility on the card and class tiles. */
html[data-art-style] body #menu #ultimate-picker .move-label{margin-top:22px}
html[data-art-style] body #menu #ultimate-picker .ability-card.class-move-card{border-style:dashed;border-color:#8caa45;cursor:default}
html[data-art-style] body #menu#menu #ultimate-picker .ability-card.class-move-card:hover:not(:disabled){transform:none;border-color:#8caa45;background-color:var(--card-paper,#16251e)}
html[data-art-style] body #menu #ultimate-picker .ability-card .card-slot[data-key-label]{width:auto;border-radius:6px;padding:0 6px}
html[data-art-style] body #menu #ultimate-picker .ability-card.class-move-card .move-glyph{display:grid;place-items:center;width:100%;height:100%;font:900 46px/1 var(--font-body);background:#111c17;border-radius:6px}
html[data-art-style] body #menu #ultimate-picker .ability-card.class-move-card .card-rules strong{display:flex;align-items:center;gap:8px}
#menu .deck-help kbd{font:700 11px var(--font-body);padding:1px 5px;border:1px solid #8caa45;border-radius:4px;color:#d7ff49}
@media(max-width:700px){
  html[data-art-style] body #menu #ultimate-picker .ability-card.class-move-card .move-glyph{font-size:24px}
}