/* =============================================================================
 * exp.css — shell chrome for the experimental clients. The shell owns only the
 * META layer (top bar: switch concept · settings/theme · ping) and a shared
 * overlay modal. Each concept fully owns its stage and its own look.
 * ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --bg: #0e1013; --panel: #171a1f; --edge: #2a2f37; --ink: #e8eaed; --dim: #8b93a0; --accent: #6ea8fe;
  --good: #5fd68a; --bad: #ff6b7d; --gold: #e0b24a; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
code { font-family: ui-monospace, Consolas, monospace; background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; }

.exp-app { display: flex; flex-direction: column; height: 100vh; }
.exp-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--edge); flex-shrink: 0; }
.exp-brand { font-weight: 800; letter-spacing: .3px; color: var(--gold); white-space: nowrap; }
.exp-brand small { color: var(--dim); font-weight: 500; margin-left: 6px; }
.exp-ic { border: 1px solid var(--edge); background: transparent; color: var(--ink); border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.exp-ic:hover { border-color: var(--accent); }
.exp-ping { font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.exp-ping .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.exp-ping.on .dot { background: var(--good); box-shadow: 0 0 6px var(--good); }

/* /live spectate chrome — real client, read-only */
.exp-livebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--edge); flex-shrink: 0; }
.exp-live-title { font: 600 14px Georgia, serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.exp-live-title b { color: var(--ink); font-weight: 700; margin-left: 4px; }
.exp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 0 0 rgba(214,95,107,.7); animation: exp-livepulse 1.8s infinite; }
.exp-live.on .exp-live-dot, .exp-livebar .exp-ping.on ~ .exp-live-dot { background: var(--bad); }
@keyframes exp-livepulse { 70% { box-shadow: 0 0 0 6px transparent; } }
.exp-live-sub { color: var(--dim); font-size: 12px; }
.exp-live-sp { flex: 1; min-width: 8px; }
.exp-live-ver { color: var(--dim); font: 11px ui-monospace, monospace; }
.exp-live-btn { background: var(--panel); color: var(--ink); border: 1px solid var(--edge); border-radius: 6px;
  padding: 4px 10px; min-height: 24px; font-size: 12px; text-decoration: none; }
.exp-live-btn:hover { border-color: var(--accent); }
.exp-live-btn.play { background: var(--good); color: #06210f; border: 0; font-weight: 600; }
.exp-live.embed .exp-livebar { padding: 6px 10px; }
.exp-live.embed .exp-live-sub, .exp-live.embed .exp-live-ver,
.exp-live.embed .exp-live-btn { display: none; }
.exp-live.embed .exp-livebar { display: none; }
.spectate-mode .exp-live.embed .exp-stage.bridge_roster .br-view { --sw: min(260px, 28%); --ch: 180px; }
.spectate-mode .exp-live.embed .exp-stage.bridge_roster .br-centerrow { height: 120px; }
.spectate-mode .exp-live.embed .exp-stage.bridge_roster .br-header.br-hero { padding: 6px 10px; min-height: 0; }

/* /live spectate: watch-only — game stage is not playable; top bar site links stay clickable */
.spectate-mode .exp-stage button,
.spectate-mode .exp-stage a,
.spectate-mode .exp-stage input,
.spectate-mode .exp-stage select,
.spectate-mode .exp-stage textarea,
.spectate-mode .exp-stage [onclick],
.spectate-mode .exp-stage .br-mhit,
.spectate-mode .exp-stage .uf.foe,
.spectate-mode .exp-stage .br-toast {
  pointer-events: none !important;
  cursor: default !important;
}
.spectate-mode .exp-scrim,
.spectate-mode .exp-ov,
.spectate-mode .exp-menu { display: none !important; }
.spectate-mode .exp-stage input.br-cmd.spectate { pointer-events: none; }

.exp-stagewrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.exp-stage { position: absolute; inset: 0; overflow: auto; }
.exp-tagline { padding: 5px 14px; font-size: 11px; color: var(--dim); background: var(--panel); border-bottom: 1px solid var(--edge); flex-shrink: 0; }
.exp-tagline b { color: var(--accent); }

/* shared overlay any concept can pop for nav panels (character/shop/…) */
.exp-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60; display: none; }
.exp-scrim.show { display: block; }
.exp-ov { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 61; width: min(560px,94vw); max-height: 84vh; overflow: auto; display: none;
  background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.exp-ov.show { display: block; }
.exp-ovtop { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--edge); font-weight: 700; color: var(--accent); }
.exp-ovtop button { border: none; background: none; color: var(--dim); font-size: 18px; }
.exp-ovbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
/* the overlay reuses the poc NAV builder classes (poc-ovrow etc.) — mirror the essentials */
.poc-ovrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--edge); font-size: 13px; }
/* overlay header — title + a meta chip (count / gold / points) on the right */
.poc-ovhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-weight: 700; margin: 0 0 4px; }
.poc-ovhead .poc-ovmeta { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--dim); border: 1px solid var(--edge); border-radius: 7px; padding: 3px 9px; }
.poc-ovhead .poc-ovmeta.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, var(--edge)); }
.poc-ovsec { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 8px 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--edge); }
.poc-ovsec:first-child { margin-top: 0; }
.poc-ovcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
/* ── card: the shared row unit for inventory / gear / shop / training / keys ── */
.poc-card { --q: var(--edge); display: flex; align-items: center; gap: 11px; background: color-mix(in srgb, var(--bg) 55%, var(--panel)); border: 1px solid var(--edge); border-left: 3px solid var(--q); border-radius: 8px; padding: 8px 11px; }
.poc-card.dim { opacity: .5; } .poc-card.here { border-color: color-mix(in srgb, var(--accent) 55%, var(--edge)); }
.poc-cava { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; font-size: 17px; background: color-mix(in srgb, var(--q) 16%, var(--bg)); }
.poc-cbadge { position: absolute; bottom: -3px; right: -3px; background: var(--edge); color: var(--ink); font-size: 9px; line-height: 1; border-radius: 5px; padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--ink) 20%, var(--edge)); }
.poc-cmain { flex: 1; min-width: 0; } .poc-cname { font-size: 13px; color: var(--ink); display: flex; align-items: baseline; gap: 7px; }
.poc-cname > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.poc-cq { font-size: 10px; color: var(--q); text-transform: capitalize; flex: 0 0 auto; }
.poc-csub { font-size: 11px; color: var(--dim); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poc-cacts { display: flex; gap: 5px; flex: 0 0 auto; }
/* rarity ramp (drives --q for the left edge, avatar tint, quality label) */
.q-common { --q: #6b727e; } .q-uncommon { --q: var(--good); } .q-rare { --q: var(--accent); } .q-epic { --q: #b98cff; } .q-legendary { --q: var(--gold); }
.q-material { --q: #b98a5a; } .q-quest { --q: var(--gold); }
/* buttons — one pill vocabulary, semantic variants */
.poc-ovbtn { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--edge)); background: transparent; color: var(--accent); border-radius: 6px; padding: 4px 11px; font-size: 11.5px; transition: .1s; }
.poc-ovbtn:hover { background: var(--accent); color: #0b0e13; }
.poc-ovbtn.good { border-color: color-mix(in srgb, var(--good) 45%, var(--edge)); color: var(--good); } .poc-ovbtn.good:hover { background: var(--good); color: #0b0e13; }
.poc-ovbtn.gold { border-color: color-mix(in srgb, var(--gold) 45%, var(--edge)); color: var(--gold); } .poc-ovbtn.gold:hover { background: var(--gold); color: #0b0e13; }
.poc-ovbtn.ghost { border-color: var(--edge); color: var(--dim); } .poc-ovbtn.ghost:hover { background: var(--edge); color: var(--ink); }
.poc-ovbtn.off, .poc-ovbtn:disabled { opacity: .4; pointer-events: none; }
/* inputs inside an overlay (filters, quantities) match the login field styling */
.exp-ov input, .exp-ov select { background: var(--bg); border: 1px solid var(--edge); color: var(--ink); border-radius: 8px; padding: 8px 11px; font-size: 13px; font-family: inherit; }
.exp-ov input:focus, .exp-ov select:focus { outline: none; border-color: var(--accent); }
/* stat tiles (character sheet) */
.poc-tile { background: color-mix(in srgb, var(--bg) 55%, var(--panel)); border: 1px solid var(--edge); border-radius: 8px; padding: 8px 10px; }
.poc-tile .k { font-size: 10px; color: var(--dim); text-transform: capitalize; } .poc-tile .v { font-size: 18px; font-weight: 700; color: var(--ink); } .poc-tile .v .poc-up { font-size: 12px; }
.poc-dim { color: var(--dim); } .poc-good { color: var(--good); } .poc-bad { color: var(--bad); } .poc-up { color: var(--good); font-weight: 700; } .poc-q { color: var(--gold); font-weight: 800; }
.poc-repwarn { margin: 6px 0; padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid var(--gold); color: var(--gold); }
.poc-repwarn.crit { background: color-mix(in srgb, var(--bad) 16%, transparent); border-color: var(--bad); color: var(--bad); }
.poc-repcond { color: var(--gold); font-weight: 700; } .poc-repcond.crit { color: var(--bad); }
.poc-zrow { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13px; } .poc-zrow.here { color: var(--accent); }
.poc-zrow > span:first-child { flex: 1; } .poc-zrow b { font-variant-numeric: tabular-nums; color: var(--ink); }
.poc-zbar { flex: 0 0 110px; height: 7px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; } .poc-zbar i { display: block; height: 100%; background: var(--accent); }
.poc-objs { margin: 4px 0; padding-left: 18px; } .poc-objs li { font-size: 12.5px; line-height: 1.5; } .poc-objs li.done { opacity: .5; text-decoration: line-through; }
.poc-setline { font-size: 12.5px; padding: 2px 0; } .poc-quest { margin-bottom: 12px; } .poc-slot { color: var(--dim); font-size: 11px; text-transform: capitalize; min-width: 84px; } .poc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.poc-target { border: 1px solid var(--bad); border-radius: 12px; padding: 12px; } .poc-target-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .poc-target-face { font-size: 30px; } .poc-target-name { font-weight: 700; font-size: 16px; }
.poc-bar { position: relative; height: 16px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; } .poc-bar i { position: absolute; inset: 0; width: 0; } .poc-bar.hp i { background: linear-gradient(90deg,var(--bad),#ff9a7a); } .poc-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; }
.poc-tacts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .poc-tact { border: 1px solid var(--edge); background: var(--panel); color: var(--ink); border-radius: 7px; padding: 5px 10px; font-size: 12px; }
.poc-list { display: flex; flex-wrap: wrap; gap: 6px; } .poc-ent { border: 1px solid var(--edge); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; } .poc-hpmini { display: inline-block; width: 42px; height: 5px; background: rgba(0,0,0,.4); border-radius: 3px; overflow: hidden; } .poc-hpmini i { display: block; height: 100%; background: var(--bad); }

/* header dropdown menu (settings / theme) */
.exp-menu { position: fixed; z-index: 62; min-width: 200px; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55); padding: 6px; display: none; }
.exp-menu.show { display: block; }
.exp-menusec { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); padding: 7px 8px 3px; }
/* WCAG 2.5.8 — this one rule IS the house chrome (tour · guide · report · back · sign out),
   so the 24px tap floor is declared here rather than left to the padding's arithmetic. */
.exp-menuitem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; color: var(--ink); font-size: 12.5px; padding: 6px 9px; min-height: 24px; border-radius: 7px; }
.exp-menuitem:hover { background: rgba(255,255,255,.06); } .exp-menuitem.on { color: var(--accent); }
.exp-sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--edge); }

/* login / character gate */
.exp-gate { display: grid; place-items: center; height: 100vh; padding: 20px; }
.exp-card { width: min(420px,94vw); background: var(--panel); border: 1px solid var(--edge); border-radius: 16px; padding: 26px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.exp-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--gold); } .exp-card p.sub { margin: 0 0 18px; color: var(--dim); font-size: 13px; }
.exp-card label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 4px; }
.exp-card input { width: 100%; background: var(--bg); border: 1px solid var(--edge); color: var(--ink); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.exp-card input:focus { outline: none; border-color: var(--accent); }
.exp-row { display: flex; gap: 10px; margin-top: 16px; } .exp-btn { flex: 1; border: 1px solid var(--accent); background: var(--accent); color: #0b0e13; border-radius: 8px; padding: 11px; font-weight: 700; } .exp-btn.ghost { background: transparent; color: var(--ink); }
.exp-err { color: var(--bad); font-size: 12.5px; min-height: 18px; margin-top: 10px; }
.exp-charrow { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--edge); border-radius: 10px; padding: 12px 14px; background: var(--bg); margin: 8px 0; } .exp-charrow:hover { border-color: var(--accent); }

/* mobile: fuller-bleed overlay + touch-sized targets (base client is desktop-dense; bump for touch) */
@media (max-width: 760px) {
  .exp-ov { width: 96vw; max-height: 90vh; border-radius: 12px; }
  .exp-ovtop { padding: 10px 14px; } .exp-ovtop button { width: 40px; height: 40px; font-size: 22px; }
  .exp-ovbody { padding: 12px; }
  .poc-card { padding: 10px; } .poc-cacts { gap: 6px; }
  .poc-ovbtn { min-height: 40px; padding: 9px 14px; font-size: 13px; display: inline-flex; align-items: center; }
  .poc-tile { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ═══ WoW-style login + character forge (CSS-only, no art assets) ═══════════════
   A dark atmospheric backdrop, gold trim, faux-parchment panels. --gold/--accent
   come from the active theme so it re-skins with the theme picker. */
.wow-gate, .wow-select, .wow-create { position: fixed; inset: 0; overflow: auto; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; }
/* the sky: layered radial glows over a deep vertical fade — reads as a dusk horizon */
.wow-gate-sky, .wow-sky { position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(120% 80% at 50% -10%, rgba(224,178,74,.16), transparent 55%),
  radial-gradient(90% 60% at 50% 115%, rgba(110,168,254,.10), transparent 60%),
  linear-gradient(180deg, #05070c 0%, #0b1018 45%, #0a0a0f 100%); }
.wow-gate-sky::after, .wow-sky::after { content:''; position:absolute; inset:0;
  background: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,.4), transparent); opacity:.6; }

.wow-logo { margin-top: 9vh; text-align: center; }
.wow-logo h1 { margin: 0; font: 700 15px/1 Georgia, 'Times New Roman', serif; letter-spacing: 3px;
  text-transform: uppercase; color: var(--dim); }
.wow-logo h1 b { display: block; margin-top: 6px; font-size: 46px; letter-spacing: 4px; color: var(--gold);
  text-shadow: 0 0 24px rgba(224,178,74,.45), 0 2px 2px #000; }
.wow-tag { margin: 14px 0 0; color: var(--dim); font: italic 14px/1.4 Georgia, serif; }

.wow-loginbox { margin: auto; width: min(360px, 90vw); background: rgba(12,15,22,.82);
  border: 1px solid var(--edge); border-top: 2px solid var(--gold); border-radius: 12px;
  padding: 24px 26px 22px; box-shadow: 0 24px 70px rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.wow-loginbox label { display: block; font: 11px/1 Georgia, serif; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold); margin: 14px 0 6px; }
.wow-loginbox input { width: 100%; background: #060810; border: 1px solid var(--edge); color: var(--ink);
  border-radius: 6px; padding: 11px 12px; font-size: 15px; }
.wow-loginbox input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(224,178,74,.2); }

.wow-btn { border: 1px solid var(--accent); background: transparent; color: var(--ink); border-radius: 7px;
  padding: 11px 20px; min-height: 24px; font: 700 14px/1 Georgia, serif; letter-spacing: 1px; cursor: pointer; }
.wow-btn:hover:not(:disabled) { border-color: var(--gold); }
.wow-btn:disabled { opacity: .4; cursor: default; }
.wow-btn.ghost { border-color: var(--edge); color: var(--dim); }
.wow-btn.gold { border-color: var(--gold);
  background: linear-gradient(180deg, rgba(224,178,74,.95), rgba(180,132,42,.95)); color: #1a1206;
  text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.wow-btn.gold:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 18px rgba(224,178,74,.35); }
.wow-loginbox .wow-btn { width: 100%; margin-top: 18px; padding: 13px; font-size: 15px; }
/* WCAG 2.5.8 (24x24): measured at 17px tall — the glyph box was the hit box. Type size is
   unchanged; only the padding grew, absorbed by the login box's own margin. */
.wow-link { display: block; width: 100%; margin-top: 12px; background: none; border: none; cursor: pointer;
  color: var(--dim); font: 13px Georgia, serif; text-decoration: underline;
  padding: 7px 0; min-height: 24px; }
.wow-link:hover { color: var(--gold); }
.wow-err { color: #e0736b; font-size: 12.5px; min-height: 18px; margin-top: 8px; text-align: center; }
.wow-foot { margin: 10px 0 14px; color: var(--dim); font-size: 11px; opacity: .6; }
.wow-dim { color: var(--dim); }

/* character select (roster) */
.wow-select-head { display: flex; align-items: baseline; gap: 14px; margin: 6vh 0 18px; }
.wow-select-head h2 { margin: 0; color: var(--gold); font: 700 26px Georgia, serif; letter-spacing: 2px; }
.wow-realm { color: var(--dim); font: 13px Georgia, serif; }
.wow-roster { width: min(560px, 94vw); display: flex; flex-direction: column; gap: 11px; }
.wow-hero { display: flex; align-items: center; gap: 15px; padding: 14px 16px; cursor: pointer; width: 100%;
  text-align: left; color: var(--ink); background: rgba(12,15,22,.78);
  border: 1px solid var(--edge); border-left: 3px solid transparent; border-radius: 12px; position: relative; overflow: hidden; }
.wow-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 140% at -5% 50%, color-mix(in srgb, var(--hue) 16%, transparent), transparent 45%); }
.wow-hero:hover { border-color: var(--hue, var(--accent)); }
.wow-hero.sel { border-color: var(--gold); border-left-color: var(--gold); background: rgba(224,178,74,.09); }
.wow-hero-portrait { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center;
  font: 700 26px Georgia, serif; color: var(--hue, var(--gold)); background: #090c14;
  border: 1px solid color-mix(in srgb, var(--hue, var(--gold)) 55%, var(--edge));
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--hue, var(--gold)) 22%, transparent); position: relative; }
/* class marks (static/art/marks/<archetype id>.png) — pixel art, never smoothed. */
.wow-mark { image-rendering: pixelated; display: block; }
h3 > .wow-mark, .wow-pick > .wow-mark { display: inline-block; vertical-align: -6px; margin-right: 8px; }
.wow-hero-portrait.ghost { color: var(--dim); border-style: dashed; box-shadow: none; font-size: 30px; }
.wow-lvl { position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  display: grid; place-items: center; font: 700 11px Georgia, serif; color: #10131a;
  background: var(--gold); border: 1px solid #090c14; }
.wow-hero-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wow-hero-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wow-hero-name b { font: 700 17px Georgia, serif; color: var(--ink);
  text-shadow: 0 0 12px color-mix(in srgb, var(--hue, var(--gold)) 40%, transparent); }
.wow-para { color: var(--gold); font: 700 12px Georgia, serif; }
.wow-title { color: var(--dim); font: italic 12px Georgia, serif; }
.wow-hero-sub { color: var(--dim); font-size: 13px; }
.wow-hero-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.wow-stat { color: var(--ink); font-size: 12.5px; opacity: .85; white-space: nowrap; }
.wow-hero-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  color: var(--dim); font-size: 12px; text-align: right; }
.wow-hero-loc { color: var(--accent); }
.wow-hero-time { color: var(--gold); }
.wow-hero-add { cursor: pointer; opacity: .8; } .wow-hero-add:hover { opacity: 1; }
.wow-select-foot, .wow-cr-btns { display: flex; gap: 12px; margin: 22px 0; }

@media (max-width: 760px) {
  .wow-hero-meta { display: none; }
  .wow-hero-portrait { width: 48px; height: 48px; font-size: 22px; }
}

/* character forge (create) */
.wow-cr-cols { display: grid; grid-template-columns: 200px 1fr 200px; gap: 18px; width: min(920px, 96vw);
  margin: 5vh 0 0; align-items: start; }
.wow-cr-col h4 { margin: 0 0 10px; color: var(--gold); font: 12px Georgia, serif; letter-spacing: 2px;
  text-transform: uppercase; text-align: center; }
.wow-picks { display: flex; flex-direction: column; gap: 7px; }
.wow-pick { text-align: left; padding: 10px 12px; cursor: pointer; color: var(--ink);
  background: rgba(12,15,22,.7); border: 1px solid var(--edge); border-radius: 8px; font: 14px Georgia, serif; }
.wow-pick:hover { border-color: var(--accent); }
.wow-pick.sel { border-color: var(--gold); background: rgba(224,178,74,.1); color: var(--gold); }
.wow-cr-detail { min-height: 240px; padding: 4px 8px; }
.wow-cr-detail h3 { margin: 0 0 10px; color: var(--gold); font: 700 22px Georgia, serif; }
.wow-cr-detail p { margin: 0 0 12px; line-height: 1.5; font-size: 14px; }
.wow-stats { font: 13px 'Courier New', monospace; color: var(--accent); letter-spacing: 1px; }

/* forge: live starting-stat grid + optimal-heritage hints (2026-07-22) */
.wow-pick { position: relative; }
.wow-pick-prim { float: right; font: 11px 'Courier New', monospace; letter-spacing: 1px; color: var(--accent);
  opacity: .8; border: 1px solid var(--edge); border-radius: 4px; padding: 1px 5px; }
.wow-pick-star { float: right; color: var(--gold); font-size: 13px; margin-left: 6px; }
.wow-pick.opt { border-color: rgba(224,178,74,.55); box-shadow: inset 0 0 0 1px rgba(224,178,74,.12); }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 4px; }
.sp-cell { display: flex; align-items: baseline; gap: 6px; padding: 6px 9px; border: 1px solid var(--edge);
  border-radius: 6px; background: rgba(12,15,22,.6); }
.sp-cell.prim { border-color: var(--gold); background: rgba(224,178,74,.09); }
.sp-cell .sp-k { font: 11px 'Courier New', monospace; letter-spacing: 1px; color: var(--dim); min-width: 26px; }
.sp-cell.prim .sp-k { color: var(--gold); }
.sp-cell .sp-v { font: 700 16px Georgia, serif; color: var(--ink); }
.sp-cell.prim .sp-v { color: var(--gold); }
.sp-cell .sp-d { margin-left: auto; font: 11px 'Courier New', monospace; }
.sp-d.up { color: #6fce7a; } .sp-d.dn { color: #d67878; }
.sp-prim { color: var(--gold); }
.sp-capline { font-size: 11px; color: var(--dim); margin: 0 0 8px; font-style: italic; }
.sp-opt { margin: 8px 0 10px; padding: 8px 11px; border-radius: 7px; font-size: 13px; line-height: 1.4;
  background: rgba(78,195,224,.07); border: 1px solid rgba(78,195,224,.25); color: var(--ink); }
.sp-opt.ok { background: rgba(224,178,74,.08); border-color: rgba(224,178,74,.35); color: var(--gold); }
.sp-suggest { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 6px; }
.sp-sug { cursor: pointer; font: 13px Georgia, serif; color: var(--ink); background: rgba(12,15,22,.6);
  border: 1px solid var(--edge); border-radius: 999px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 6px; }
.sp-sug:hover { border-color: var(--accent); }
.sp-sug.opt { border-color: rgba(224,178,74,.5); color: var(--gold); }
.sp-sug.on { background: rgba(224,178,74,.14); box-shadow: inset 0 0 0 1px rgba(224,178,74,.5); }
.sp-sug span { font: 10px 'Courier New', monospace; letter-spacing: 1px; color: var(--accent); opacity: .8;
  border: 1px solid var(--edge); border-radius: 4px; padding: 0 4px; }
.sp-sug.opt span { color: var(--gold); border-color: rgba(224,178,74,.4); }
.wow-cr-bar { width: min(920px, 96vw); margin: 20px 0 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wow-cr-bar #ch-name { width: min(360px, 90vw); text-align: center; background: #060810; border: 1px solid var(--edge);
  border-bottom: 2px solid var(--gold); color: var(--ink); border-radius: 6px; padding: 12px; font: 16px Georgia, serif; }
.wow-cr-bar #ch-name:focus { outline: none; box-shadow: 0 0 0 2px rgba(224,178,74,.2); }
.wow-toggle { color: var(--dim); font-size: 13px; display: flex; align-items: center; gap: 7px; cursor: pointer; }

/* forge flare: signature kit + scrolling combat preview + gender + random name */
.wow-cr-sec { margin: 14px 0 7px; color: var(--gold); font: 11px Georgia, serif; letter-spacing: 2px;
  text-transform: uppercase; border-top: 1px solid var(--edge); padding-top: 10px; }
.wow-kit { display: flex; flex-direction: column; gap: 6px; }
.wow-kit-row { display: flex; gap: 9px; align-items: flex-start; }
.wow-kit-glyph { flex: 0 0 auto; color: var(--gold); font-size: 14px; line-height: 1.4; }
.wow-kit-row b { font-size: 13.5px; } .wow-kit-row small { display: block; color: var(--dim); font-size: 12px; line-height: 1.35; }
.wow-combat { height: 92px; overflow: hidden; position: relative; background: #06080e;
  border: 1px solid var(--edge); border-left: 2px solid var(--accent); border-radius: 7px; padding: 0 12px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.wow-combat-scroll { animation: cpscroll 14s linear infinite; }
@keyframes cpscroll { from { transform: translateY(0) } to { transform: translateY(-50%) } }
.cp-line { font: 12.5px/1.9 ui-monospace, 'Courier New', monospace; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-hit { color: var(--accent); } .cp-num { color: var(--gold); } .cp-dim { color: #5f5545; font-style: italic; }
.wow-namerow { display: flex; gap: 8px; width: min(400px, 92vw); }
.wow-namerow #ch-name { flex: 1; margin: 0; }
.wow-dice { flex: 0 0 auto; width: 46px; font-size: 20px; cursor: pointer; background: #060810;
  border: 1px solid var(--edge); border-radius: 6px; color: var(--ink); }
.wow-dice:hover { border-color: var(--gold); }
.wow-genders { display: flex; gap: 8px; }
.wow-gender { padding: 7px 14px; cursor: pointer; color: var(--dim); font: 13px Georgia, serif;
  background: rgba(12,15,22,.7); border: 1px solid var(--edge); border-radius: 20px; }
.wow-gender:hover { border-color: var(--accent); }
.wow-gender.sel { border-color: var(--gold); color: var(--gold); background: rgba(224,178,74,.1); }

.known-issues { font-size: 11px; margin: 0 10px 8px; padding: 8px 10px; border: 1px solid var(--edge);
  border-radius: 8px; background: color-mix(in srgb, var(--panel) 88%, transparent); max-width: 420px; }
.known-hdr { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.known-row { padding: 4px 0; border-top: 1px solid var(--edge); }
.known-row:first-of-type { border-top: 0; }
.known-body { color: var(--dim); font-size: 10px; }

@media (max-width: 760px) {
  .wow-logo { margin-top: 5vh; } .wow-logo h1 b { font-size: 34px; }
  .wow-cr-cols { grid-template-columns: 1fr; }
  .wow-cr-detail { order: -1; min-height: 0; }
  .wow-btn { padding: 13px 18px; }
}