:root{
  color-scheme:dark;
  --accent:#ce6054;
  --paper:#1d282b;
  --paper-ink:#fff8e8;
  --ink:#eee7d9;
  --surface:#11191c;
  --on-accent:#fff8e8;
  --line:#344248;
}
body{background:radial-gradient(ellipse at 50% -25%,#263036 0%,var(--surface) 54%);min-height:100vh}
.brand-mark{color:#171b1c}
.outline-button{border-color:#647176}
.intro-copy,.character-subtitle,.bio p,.choose-wrap>span,.palette-name,.check-label,.text-button,.slider-row>span,footer,dialog p{color:#c2b8a9}
.tiny-label,.arena-bottom,.arena-caption{color:#bcb4a6}
.workshop{border-bottom:1px solid var(--line)}
.arena{color:var(--paper-ink);border-top-color:var(--accent)}
.arena:before{opacity:.045}
.arena-lines{border-color:color-mix(in srgb,var(--paper-ink) 15%,transparent)}
.arena-caption,.arena-bottom{color:var(--paper-ink);opacity:.72}
.arena-bottom{border-top-color:color-mix(in srgb,var(--paper-ink) 18%,transparent)}
.hero:before{background:linear-gradient(180deg,#172126,color-mix(in srgb,var(--accent) 80%,#172126))}
.hero[aria-pressed=true]:before{opacity:.8}
.hero-label{color:var(--paper-ink)}
.hero-label .number{color:var(--paper-ink);opacity:.55}
.hero[aria-pressed=true] .hero-label{background:var(--accent);color:var(--on-accent)}
.hero[aria-pressed=true] .number{color:var(--on-accent);opacity:.75}
.hero .character-art{filter:drop-shadow(0 9px 7px #0008)}
.hero:not([aria-pressed=true]) .character-art{filter:saturate(.75) drop-shadow(0 9px 7px #0008)}
.hero .character-art.is-cropped{background-size:100% 100%;background-position:center}
.hero .selection-diamond{background:var(--accent)}
.details .eyebrow{color:var(--accent)}
.details .stat-track i.filled{background:var(--accent)}
.details .choose{background:var(--accent);color:var(--on-accent)}
.stat-track i{background:#3c4a50}
.swatch{border-color:#172023;outline-color:#748087;background:var(--a)}
.custom-colors{display:flex;align-items:flex-start}
.custom-colors input[type=color]{border-color:#5e6c71}
kbd{border-color:#58666a}
dialog{box-shadow:0 28px 80px #0009}

/* Weapon choices follow the selected character and keep the art direction compact. */
.weapon-control{grid-column:1/-1;border-top:1px solid var(--line);padding-top:19px;display:grid;grid-template-columns:minmax(155px,.9fr) minmax(0,3.6fr);gap:26px;align-items:start}
.weapon-heading{display:flex;flex-direction:column;gap:7px;padding-top:4px}
.weapon-heading #weapon-for{font-size:11px;letter-spacing:1.3px;color:var(--accent)}
.weapon-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.weapon-option{display:flex;align-items:center;text-align:left;gap:13px;min-height:66px;padding:11px 15px;background:transparent;border:1px solid var(--line);transition:background .2s,border-color .2s,transform .2s}
.weapon-option:hover{transform:translateY(-2px);border-color:var(--accent)}
.weapon-option:disabled{opacity:.5;transform:none;border-color:var(--line)}
.weapon-option[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent)}
.weapon-number{font:700 20px 'Barlow Condensed',Impact,sans-serif;color:var(--accent)}
.weapon-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.weapon-copy strong{font:600 19px 'Barlow Condensed',Impact,sans-serif;letter-spacing:.5px}
.weapon-copy small{font-size:14px;line-height:1.35;color:var(--ink);opacity:.75}
.weapon-copy{flex:1}
.weapon-preview{position:relative;flex:0 0 96px;width:96px;height:80px;margin-left:auto;border:1px solid #506068;background:radial-gradient(ellipse at center,#2b363d,#131b20 80%);box-shadow:inset 0 0 0 3px #11191c;overflow:hidden}
.weapon-preview canvas{display:block;width:100%;height:100%;object-fit:contain}
.weapon-option[aria-pressed="true"] .weapon-preview{border-color:var(--accent)}
.weapon-check{position:absolute;right:4px;bottom:1px;color:var(--accent);opacity:0;font-size:16px;text-shadow:0 1px 4px #000}
.weapon-option[aria-pressed="true"] .weapon-check{opacity:1}
@media(max-width:650px){.weapon-control{grid-template-columns:1fr;gap:10px}.weapon-heading{flex-direction:row;align-items:center;justify-content:space-between}.weapon-options{gap:8px}.weapon-option{padding:9px;gap:8px}.weapon-copy strong{font-size:17px}.weapon-copy small{font-size:14px}}
@media(max-width:750px){.weapon-options{grid-template-columns:1fr}.weapon-preview{flex-basis:84px;width:84px;height:72px}}

/* Keep customization beside the fellowship so every change stays in view. */
.selection-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:20px;align-items:stretch}
.selection-layout:has(.workshop[hidden]){grid-template-columns:minmax(0,1fr)}
.selection-layout .arena{grid-column:1;grid-row:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.selection-layout .characters{height:clamp(340px,29vw,440px);padding:64px 12px 35px}
.selection-layout .arena-bottom{margin-top:auto}
.selection-layout .art-area{inset:0 -10% 44px}
.selection-layout .hero-label{padding:7px;gap:6px}
.selection-layout .hero-label strong{font-size:20px;letter-spacing:1px}
.selection-layout .workshop{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:22px;padding:22px 18px;border:1px solid var(--line);border-top:3px solid var(--accent);background:#172125}
.selection-layout .workshop[hidden]{display:none}
.selection-layout .workshop-title{display:block}
.selection-layout .workshop-title h3{margin:5px 0 8px;font-size:28px}
.selection-layout .workshop-title .tiny-label{display:block}
.selection-layout .tiny-label,.selection-layout .size-control>label:first-child{font-size:12px}
.selection-layout .check-label,.selection-layout .palette-name,.selection-layout .text-button{font-size:13px}
.selection-layout .palettes{gap:13px;margin:13px 0}
.selection-layout .swatch{width:43px;height:29px}
.selection-layout .weapon-control{display:flex;flex-direction:column;gap:12px;padding-top:16px}
.selection-layout .weapon-heading{width:100%;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.selection-layout .weapon-options{width:100%;grid-template-columns:1fr;gap:8px}
.selection-layout .weapon-option{gap:8px;padding:9px;min-height:80px}
.selection-layout .weapon-number{font-size:17px}
.selection-layout .weapon-copy strong{font-size:18px}
.selection-layout .weapon-copy small{font-size:12px}
.selection-layout .weapon-preview{flex-basis:64px;width:64px;height:60px}
@media(max-width:1000px) and (min-width:701px){.selection-layout{grid-template-columns:minmax(0,1fr) 264px;gap:14px}.selection-layout .characters{height:auto;flex-wrap:wrap;justify-content:center;padding:50px 8px 25px;gap:20px 0}.selection-layout .hero{flex:0 0 33.333%;height:205px}.selection-layout .hero-label strong{font-size:18px}.selection-layout .workshop{padding:18px 14px}}
@media(max-width:700px){.selection-layout{grid-template-columns:1fr;gap:16px}.selection-layout .arena{grid-column:1;grid-row:1}.selection-layout .workshop{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 16px}.selection-layout .workshop[hidden]{display:none}.selection-layout .workshop-title{grid-column:1/-1;display:flex;align-items:center;gap:15px}.selection-layout .workshop-title .tiny-label{display:none}.selection-layout .workshop-title h3{margin:0}.selection-layout .characters{height:auto;flex-wrap:wrap;justify-content:center;padding:45px 10px 25px;gap:25px 0}.selection-layout .hero{flex:0 0 33.333%;height:220px}.selection-layout .art-area{inset:0 -10% 35px}.selection-layout .weapon-control{grid-column:1/-1}.selection-layout .weapon-copy small{font-size:14px}.selection-layout .weapon-preview{flex-basis:84px;width:84px;height:72px}.selection-layout .swatch{width:28px;height:27px}.selection-layout .palettes{gap:8px}.selection-layout .check-label{font-size:12px}}