/* ══════════════════════════════════════════════════════════════════════════
   theme-solarena.css — "Solarena" arcane-gold visual identity.

   Loaded LAST in <head> (after index.html's inline <style>) so it wins the
   cascade over the legacy cyber/cyan styling. Strategy:
     • redefine :root tokens → the whole site inherits the new palette
     • re-tone shared components (shell, buttons, panels, chips, home)
   Rarity/type colors (uncommon-green, rare-blue, epic-purple, legendary-gold,
   atk-red / def-blue / heal-green) are intentionally preserved.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* fonts (referenced by the font-family swap across every css/js file) */
  --f-display: 'Marcellus', Georgia, serif;      /* display / headings / numbers */
  --f-label:   'Marcellus SC', Georgia, serif;   /* small-caps letterspaced labels */
  --f-body:    'Spectral', Georgia, serif;        /* body copy */
  --f-mono:    'Spectral', Georgia, serif;        /* was Space Mono — align via tabular-nums */

  /* ── arcane palette (semantic) ── */
  --so-bg0:#09070c; --so-bg1:#100d15; --so-bg2:#1a1520;
  --so-gold:#c7a15c;         /* muted filigree gold — borders, labels */
  --so-gold-bright:#e6c987;  /* bright gold — numbers, highlights */
  --so-gold-deep:#b78a3e;    /* dark gold — gradient anchor */
  --so-ink:#ece3d0; --so-ink-bright:#f4ecd9; --so-ink-mut:#c3b89f;
  --so-ink-dim:#a99f8c; --so-ink-faint:#8a8069; --so-ink-foot:#7a715d;
  --so-red:#d0503f; --so-red-deep:#b8382f; --so-rank:#c98a4a;
  --so-green:#6bbd7a; --so-green-bright:#7ec98a;
  --so-blue:#9db8c7;
  --so-bd:rgba(199,161,92,.22); --so-bd2:rgba(199,161,92,.34);
  --so-bd3:rgba(199,161,92,.5); --so-bd-soft:rgba(199,161,92,.14);
  --so-panel:linear-gradient(180deg, rgba(28,23,34,.72), rgba(16,13,20,.72));
  --so-card:linear-gradient(180deg, rgba(30,24,36,.6), rgba(16,13,20,.5));
  --so-hairline:linear-gradient(90deg, transparent, rgba(199,161,92,.7) 20%, rgba(230,201,135,.9) 50%, rgba(199,161,92,.7) 80%, transparent);

  /* ── remap legacy tokens so all 7 stylesheets adopt the theme ── */
  --dark:#09070c; --dark2:#100d15;
  --card:#181320; --card2:#221a2c;
  --border:rgba(199,161,92,.22); --border2:rgba(199,161,92,.34);
  --text:#ece3d0; --text2:#c3b89f; --text3:#8a8069;
  --cyan:#e6c987; --cyan-dim:#b78a3e;      /* primary accent → gold */
  --cy:#e6c987; --cyanp:#c7a15c;
  --gold:#e6c987; --ag:#e6c987;
  --green:#6bbd7a; --green-dim:#4f9e63;
  --red:#d0503f;
  --purple:#a074c8; --purple-dim:#7d5fa8;  /* kept violet-ish for epic rarity */
  --radius:0px;
}

/* ── base ── */
html.sa-preload { background:#09070c; }
body {
  font-family: var(--f-body);
  color: var(--so-ink);
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(70% 55% at 78% 108%, rgba(180,70,52,.10), transparent 60%),
    radial-gradient(70% 55% at 16% 110%, rgba(70,120,150,.10), transparent 60%),
    radial-gradient(120% 80% at 50% -10%, #1a1520 0%, #100d15 46%, #09070c 100%) fixed;
  min-height:100vh;
}
h1,h2,h3,h4 { font-family: var(--f-display); font-weight:400; letter-spacing:.3px; }
::selection { background: rgba(199,161,92,.3); color:#fff; }
:focus-visible { outline:2px solid var(--so-gold); outline-offset:2px; border-radius:0; }
/* thin gold scrollbar */
* { scrollbar-color: var(--so-gold-deep) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:rgba(199,161,92,.35); border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(199,161,92,.55); background-clip:content-box; }

/* kill rounded corners across the legacy components (engraved look) */
.pvp-btn,.btn-primary,.btn-secondary,.icon-btn,.connect-btn,.wallet-badge,.lang-sel,
.sa-card,.feature-card,.arena-card,.arena-panel,.bt-panel,.dg-card,.dg-diff,.modal,
.side-panel,.cg-card,.cg-note,.jackpot-pill,.chat-badge,.toast,.wallet-opt,.pf-input,
.chat-input,.wager-input,.wager-quick,.lobby-code,.lobby-big,.sa-qbtn,.sa-statcard,
.bounty-panel,.sa-action,.shop-item,.shop-btn,.hist-tag,.h-chip,.lb-tier,.bt-style,
.gb-card,.codex-style,.bounty-badge,.bounty-claim,.pf-title,.pf-preset,.pf-accent,
.lb2-source,.lb-tab,.docs-navlink,.hist-mode,.bt-mode,.dg-diffs,.deck-back,.pf-back,
.faucet-btn,.adj-btn,.spin-main-btn,.wallet-disc,.docs-table,.hist-table,.arena-room
{ border-radius:0 !important; }

/* ══════════════════ FRAME ══════════════════ */
/* Full-bleed: header + wallet sit flush to the window edges (no "window-in-a-window").
   Individual panels/cards below still carry the bordered arcane look. */
#app { position:relative; background:transparent; }
/* ornamental gold top hairline spanning the whole window top */
#app::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--so-hairline); z-index:5;
}
/* keep the inner page content readable/centered on ultra-wide screens */
main#main { max-width:1180px; margin:0 auto; width:100%; padding-top:28px; }
/* one consistent gap between the header and every page's content (was 16–30px, page-dependent) */
#page-gacha, #page-codex, #page-docs { padding-top:0; }
.sa-home, .lb2, .shop, .hist, .dg, .pf, .lobby { padding-top:0; }

/* language switcher — in the footer (in-flow, not floating) */
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-lang { background:transparent; border:1px solid var(--so-bd); color:var(--so-ink-dim);
  font-family:var(--f-label); letter-spacing:1px; font-size:11px; padding:5px 9px; cursor:pointer; }
.footer-lang:hover { border-color:var(--so-gold); color:var(--so-gold-bright); }

.demo-ribbon {
  background:linear-gradient(180deg, rgba(199,161,92,.08), transparent);
  border-bottom:1px solid var(--so-bd);
  color:var(--so-ink-dim); font-family:var(--f-body); font-size:11.5px;
  text-align:center; padding:8px 20px; line-height:1.5;
}
.demo-ribbon strong { color:var(--so-gold-bright); font-weight:500; }

/* ══════════════════ NAV (header) ══════════════════ */
nav[aria-label="Primary"] {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; gap:14px;
  border-bottom:1px solid var(--so-bd2);
  background:linear-gradient(180deg, rgba(199,161,92,.05), transparent);
}
.nav-logo {
  display:flex; align-items:center; background:none; border:none; cursor:pointer; padding:0; line-height:0;
}
.nav-logo-img { height:42px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); transition:filter .15s, transform .15s; }
.nav-logo:hover .nav-logo-img { filter:drop-shadow(0 0 10px rgba(199,161,92,.45)); transform:translateY(-1px); }

.nav-wallet { display:flex; align-items:center; gap:8px; font-family:var(--f-body); }
.nav-wallet .sa-bal {
  font-family:var(--f-display); font-size:14px; color:var(--so-ink-mut);
  border:1px solid var(--so-bd); padding:6px 12px; white-space:nowrap; letter-spacing:.5px;
}
.nav-wallet .sa-bal.ag b { color:var(--so-gold-bright); font-weight:400; }
.nav-wallet .sa-bal.sol b { color:var(--so-ink-mut); font-weight:400; }
.icon-btn {
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--so-bd); color:var(--so-ink-dim);
  font-family:var(--f-display); font-size:15px; cursor:pointer; border-radius:0; transition:.15s;
}
.icon-btn:hover, .icon-btn.on, .icon-btn.active { border-color:var(--so-bd3); color:var(--so-gold-bright); background:rgba(199,161,92,.08); }
.lang-sel {
  background:transparent; border:1px solid var(--so-bd); color:var(--so-ink-dim);
  font-family:var(--f-body); font-size:12px; padding:7px 8px; cursor:pointer;
}
.wallet-badge {
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
  background:rgba(199,161,92,.07); border:1px solid var(--so-bd3); color:#f0e6cf;
  font-family:var(--f-body); font-size:13px; cursor:pointer; transition:.15s;
}
.wallet-badge:hover { background:rgba(199,161,92,.14); }
.wallet-dot { width:6px; height:6px; border-radius:50%; background:var(--so-green-bright); box-shadow:0 0 8px var(--so-green-bright); }
.wallet-addr { font-family:var(--f-body); color:#f0e6cf; }
.wallet-devnet { font-family:var(--f-display); font-size:12px; color:var(--so-gold-bright); }
.wallet-disc { background:transparent; border:1px solid var(--so-bd); color:var(--so-ink-faint); width:34px; height:34px; cursor:pointer; transition:.15s; }
.wallet-disc:hover { color:var(--so-red); border-color:rgba(208,80,63,.5); }
.connect-btn {
  background:linear-gradient(180deg,#d8a05a,#b8382f); color:#160b0a; border:none;
  font-family:var(--f-label); letter-spacing:2px; font-size:13px; padding:9px 18px; cursor:pointer;
  box-shadow:0 8px 22px rgba(180,56,47,.3);
}
.connect-btn:hover { filter:brightness(1.07); }

/* ══════════════════ FOOTER ══════════════════ */
footer {
  border-top:1px solid var(--so-bd); background:transparent; margin-top:0;
  padding:16px 30px; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.footer-logo { font-family:var(--f-label); font-size:12px; letter-spacing:3px; color:var(--so-gold); }
.footer-links span, .footer-links a { color:var(--so-ink-faint); font-size:11.5px; }
.footer-disclaimer { font-family:var(--f-body); font-style:italic; font-size:11px; color:var(--so-ink-foot); max-width:420px; text-align:right; line-height:1.5; }

/* ══════════════════ BOTTOM NAV (mobile) ══════════════════ */
.bottom-nav { background:rgba(9,7,12,.94); border-top:1px solid var(--so-bd2); }
.bottom-nav button { color:var(--so-ink-faint); font-family:var(--f-label); font-size:9px; letter-spacing:1px; }
.bottom-nav button.active { color:var(--so-gold-bright); }
.bottom-nav .bn-ico { color:inherit; }

/* ══════════════════ CONNECT GATE ══════════════════ */
.cg-card { background:var(--so-card); border:1px solid var(--so-bd2); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.cg-logo { text-align:center; margin-bottom:18px; }
.cg-logo img { height:62px; width:auto; display:inline-block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
.cg-title { font-family:var(--f-display); color:var(--so-ink-bright); font-weight:400; }
.cg-sub { color:var(--so-ink-mut); }
.cg-hint { color:var(--so-ink-faint); }
.cg-hint a { color:var(--so-gold-bright); }
.cg-note { font-family:var(--f-label); letter-spacing:1px; color:var(--so-gold); background:rgba(199,161,92,.07); border:1px solid var(--so-bd); }

/* ══════════════════ BUTTONS ══════════════════ */
.pvp-btn, .btn-primary {
  background:linear-gradient(180deg,#d8a05a,#b8382f); color:#160b0a; border:none;
  font-family:var(--f-label); letter-spacing:2px; text-transform:none;
  box-shadow:0 8px 22px rgba(180,56,47,.32); cursor:pointer; transition:.15s;
}
.pvp-btn:hover, .btn-primary:hover { filter:brightness(1.07); transform:translateY(-1px); }
/* alt / secondary = gold ghost */
.pvp-btn.alt, .btn-secondary {
  background:rgba(199,161,92,.06); color:var(--so-gold-bright); border:1px solid var(--so-bd3);
  box-shadow:none;
}
.pvp-btn.alt:hover, .btn-secondary:hover { background:rgba(199,161,92,.14); filter:none; }
.pvp-btn.alt.on { border-color:var(--so-gold-bright); background:rgba(199,161,92,.16); }
.adj-btn, .faucet-btn { background:transparent; border:1px solid var(--so-bd); color:var(--so-ink-dim); cursor:pointer; }
.adj-btn:hover, .faucet-btn:hover { border-color:var(--so-bd3); color:var(--so-gold-bright); }
.spin-main-btn { background:linear-gradient(180deg,#d8a05a,#b8382f); color:#160b0a; border:none; font-family:var(--f-label); letter-spacing:2px; }

/* generic back button used across pages */
.deck-back, .pf-back {
  background:transparent; border:1px solid var(--so-bd); color:var(--so-ink-dim);
  font-family:var(--f-label); letter-spacing:1px; font-size:11px; padding:7px 14px; cursor:pointer;
}
.deck-back:hover, .pf-back:hover { border-color:var(--so-bd3); color:var(--so-gold-bright); }

/* ══════════════════ PANELS / CARDS ══════════════════ */
.sa-card, .feature-card, .arena-card, .arena-panel, .bt-panel, .dg-card, .side-panel,
.shop, .lb2, .hist, .pf-card, .docs-content, .arena-room {
  background:var(--so-card); border:1px solid var(--so-bd2);
}
.feature-card:hover, .arena-card:hover { border-color:var(--so-bd3); transform:translateY(-2px); }
.modal, #gacha-overlay-body { background:var(--so-panel); border:1px solid var(--so-bd2); box-shadow:0 40px 100px rgba(0,0,0,.6); }
.modal-overlay, #gacha-overlay, .arena-overlay { background:rgba(7,6,11,.86); backdrop-filter:blur(6px); }

/* section titles (deck-head / shop-head / lb2-head / hist-head / dg h2 …) */
.deck-head h2, .shop-head h2, .lb2-head h2, .hist-head h2, .dg-card h2,
.lobby-head h2, .modal-title, .docs-content h1 {
  font-family:var(--f-display); font-weight:400; color:var(--so-ink-bright); letter-spacing:.5px;
}
.deck-head .sa-sub, .shop-sub, .lb2-sub, .hist-sub, .dg-sub, .lobby-head p { color:var(--so-ink-mut); }

/* ══════════════════ CHIPS / BADGES / DIVIDERS ══════════════════ */
.jackpot-pill { background:rgba(199,161,92,.08); border:1px solid var(--so-bd3); color:var(--so-gold-bright); font-family:var(--f-label); letter-spacing:1px; }
.chat-badge { background:var(--so-red); color:#fff; font-family:var(--f-display); }
.bt-style { border:1px solid var(--so-bd2); background:rgba(199,161,92,.06); color:var(--so-ink-mut); font-family:var(--f-label); letter-spacing:1px; }
.hist-tag.win, .h-chip.w { color:var(--so-green-bright); border-color:rgba(107,189,122,.4); }
.hist-tag.lose { color:var(--so-red); }
.sa-pos { color:var(--so-green-bright); }
.sa-neg { color:var(--so-red); }

/* ══════════════════ FORM INPUTS ══════════════════ */
.pf-input, .chat-input, .wager-input, .lobby-code, .wager-quick, select, input[type=text], input[type=number] {
  background:rgba(9,7,12,.6); border:1px solid var(--so-bd); color:var(--so-ink); font-family:var(--f-body);
}
.pf-input:focus, .chat-input:focus, .wager-input:focus, .lobby-code:focus { border-color:var(--so-gold); outline:none; }
.wager-quick.on, .wager-quick:hover { border-color:var(--so-gold); color:var(--so-gold-bright); }

/* ══════════════════ TOASTS ══════════════════ */
.toast { background:var(--so-panel); border:1px solid var(--so-bd2); color:var(--so-ink); font-family:var(--f-body); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.toast.success { border-color:rgba(107,189,122,.5); }
.toast.error { border-color:rgba(208,80,63,.5); }
.toast.info { border-color:var(--so-bd3); }

/* ══════════════════ WALLET MODAL ══════════════════ */
.wallet-opt { background:rgba(9,7,12,.5); border:1px solid var(--so-bd2); color:var(--so-ink); }
.wallet-opt:hover { border-color:var(--so-gold); background:rgba(199,161,92,.08); }

/* ══════════════════ CHAT ══════════════════ */
#chat-panel { background:var(--so-bg1); border-left:1px solid var(--so-bd2); }
.chat-head { border-bottom:1px solid var(--so-bd); }
.chat-title { font-family:var(--f-display); color:var(--so-ink-bright); }
.chat-form { border-top:1px solid var(--so-bd); }
.chat-from { font-family:var(--f-display); color:var(--so-gold); }
.chat-text { background:rgba(255,255,255,.03); border:1px solid var(--so-bd); }
.chat-msg.mine .chat-text { background:rgba(199,161,92,.10); border-color:var(--so-bd2); }
.chat-send { background:linear-gradient(180deg,#d8a05a,#b8382f); color:#160b0a; font-family:var(--f-label); letter-spacing:1px; }

/* ════════════════════════════════════════════════════════════════════════
   HOME PAGE  (matches the Solarena mockup)
   ════════════════════════════════════════════════════════════════════════ */
.sa-home { max-width:1000px; margin:0 auto; padding:30px 34px 40px; }

/* hero */
.sa-hero {
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding:30px 34px; border:1px solid var(--so-bd2);
  background:linear-gradient(115deg, rgba(40,28,26,.5), rgba(20,16,26,.4)); overflow:hidden;
}
.sa-hero::after {   /* faint arcane sigil */
  content:""; position:absolute; right:150px; top:50%; transform:translateY(-50%);
  width:240px; height:240px; border-radius:50%; border:1px solid rgba(199,161,92,.12);
  box-shadow:inset 0 0 60px rgba(199,161,92,.06); pointer-events:none;
}
.sa-hero > div:first-child { position:relative; max-width:640px; }
.sa-welcome { font-family:var(--f-display); font-weight:400; font-size:46px; line-height:1.04; letter-spacing:.5px; color:#f4ecd9; margin:0; text-transform:none; }
.sa-welcome::before {
  content:"◆ The Arena Awaits"; display:block; font-family:var(--f-label);
  font-size:11px; letter-spacing:4px; color:var(--so-gold); margin-bottom:12px; font-weight:400;
}
.sa-welcome-sub { font-family:var(--f-body); font-size:15.5px; line-height:1.6; color:var(--so-ink-mut); margin-top:14px; }

/* day-streak orb */
.sa-streak {
  position:relative; flex:none; width:128px; height:128px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 36% 30%, #241a2c, #120e18);
  border:1px solid var(--so-bd3); box-shadow:0 0 0 6px rgba(199,161,92,.06), inset 0 0 28px rgba(0,0,0,.6);
  min-width:0;
}
.sa-streak-num { font-family:var(--f-display); font-size:48px; color:var(--so-gold-bright); line-height:1; text-shadow:none; }
.sa-streak-lbl { font-family:var(--f-label); font-size:9px; letter-spacing:2px; color:var(--so-gold); margin-top:5px; text-transform:none; }

/* ornamental divider between hero and quicknav */
.sa-divider { display:flex; align-items:center; gap:14px; margin:24px 0; }
.sa-divider::before, .sa-divider::after { content:""; flex:1; height:1px; }
.sa-divider::before { background:linear-gradient(90deg, transparent, rgba(199,161,92,.45)); }
.sa-divider::after { background:linear-gradient(90deg, rgba(199,161,92,.45), transparent); }
.sa-divider span { color:var(--so-gold); font-size:12px; }
/* quicknav pills */
.sa-quicknav { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 22px; justify-content:center; }
.sa-qbtn {
  flex:0 1 auto; min-width:170px; display:flex; align-items:center; justify-content:center;
  padding:14px 22px; background:rgba(199,161,92,.04); border:1px solid var(--so-bd2); color:var(--so-gold-bright);
  font-family:var(--f-label); letter-spacing:3px; font-size:13px; cursor:pointer; transition:.15s;
}
.sa-qbtn:hover { background:rgba(199,161,92,.1); border-color:var(--so-bd3); }

/* stat cards row (profile / pvp / pve) */
.sa-statcards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:22px; }
.sa-sgroup, .sa-pcard {
  background:var(--so-card); border:1px solid var(--so-bd2); padding:22px; text-align:left;
  display:flex; flex-direction:column; gap:0; color:var(--so-ink);
}
/* profile card = mini banner + overlapping avatar + name / title / bio */
.sa-pcard { cursor:pointer; padding:0; overflow:hidden; text-align:center; }
.sa-pcard:hover { border-color:var(--so-bd3); }
.sa-pc-banner { height:76px; width:100%; background-size:cover; background-position:center; border-bottom:1px solid var(--so-bd2); }
.sa-pc-av { margin:-44px 0 0; display:flex; justify-content:center; }
/* size comes from avatarHTML(p,80) inline; here we just add the ring */
.sa-pc-av .av-photo, .sa-pc-av img, .sa-pc-av span { border-radius:50% !important; border:2px solid var(--so-bg1) !important; box-shadow:0 0 0 1px var(--so-gold); }
/* info block fills the height below the avatar so the card isn't top-heavy */
.sa-pc-info { padding:14px 18px 22px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.sa-pc-name { font-family:var(--f-display); font-size:22px; color:#f4ecd9; }
.sa-pc-title { font-family:var(--f-label); font-size:11.5px; letter-spacing:2px; color:var(--so-gold); margin-top:6px; }
.sa-pc-bio { font-family:var(--f-body); font-style:italic; font-size:13.5px; color:var(--so-ink-mut); margin-top:11px; line-height:1.45; }

.sa-sg-title { display:flex; align-items:center; gap:9px; font-family:var(--f-label); font-size:11px; letter-spacing:3px; color:var(--so-ink-dim); margin-bottom:16px; }
/* stat row grows to fill the space between the title and (for PvE) the XP bar, centered → no empty gap */
.sa-sg-cards { display:flex; gap:0; flex:1; align-items:center; align-content:center; justify-content:center; }
/* no more boxes around the stats — just centered value/label with a gold bar between */
.sa-mini { min-width:0; background:none !important; border:none !important; padding:0 34px; position:relative; text-align:center; }
.sa-mini + .sa-mini::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:50px;
  background:linear-gradient(180deg, transparent, rgba(199,161,92,.7) 24%, rgba(230,201,135,.95) 50%, rgba(199,161,92,.7) 76%, transparent);
}
.sa-mini-v { font-family:var(--f-display); font-size:27px; color:#f4ecd9; line-height:1.1; }
.sa-mini-l { font-family:var(--f-label); font-size:10px; letter-spacing:1px; color:var(--so-ink-faint); margin-top:3px; }
.sa-lvl { font-family:var(--f-label); font-size:10px; letter-spacing:1px; color:#0d0a10; background:var(--so-green-bright); padding:2px 9px; margin-left:auto; }
/* xp bar (pve card) */
.sa-xp { margin-top:20px; }
.sa-xp-top { display:flex; justify-content:space-between; font-family:var(--f-label); font-size:12.5px; letter-spacing:.5px; color:var(--so-ink-mut); margin-bottom:9px; }
.sa-xp-bar { height:13px; background:rgba(0,0,0,.45); border:1px solid var(--so-bd); overflow:hidden; }
.sa-xp-fill { height:100%; background:linear-gradient(90deg,#b78a3e,#e6c987); }

/* hub: actions + bounties */
.sa-hub { display:grid; grid-template-columns:1fr 1.15fr; gap:20px; }
.sa-actions { display:flex; flex-direction:column; gap:20px; }
.sa-action { padding:28px; border:1px solid var(--so-bd2); background:var(--so-card); position:relative; overflow:hidden; }
.sa-action.pvp { border-color:rgba(208,80,63,.55); background:linear-gradient(150deg, rgba(120,40,34,.5), rgba(20,14,18,.6)); }
.sa-action:hover { transform:translateY(-2px); }
.sa-action-ico { margin-bottom:6px; }
.sa-action-ico svg { width:26px; height:26px; }
.sa-action.pvp .sa-action-ico { color:var(--so-red); }
.sa-action.pve .sa-action-ico { color:var(--so-green); }
.sa-action h3 { font-family:var(--f-display); font-weight:400; font-size:25px; letter-spacing:.5px; color:#f4ecd9; margin-bottom:22px; text-transform:none; }
.sa-action p { font-family:var(--f-body); font-size:14.5px; line-height:1.6; color:var(--so-ink-mut); margin-bottom:20px; }
.sa-action .pvp-btn { width:100%; text-align:center; padding:14px; }
.sa-action.pve .pvp-btn { background:rgba(199,161,92,.05); color:var(--so-gold-bright); border:1px solid var(--so-bd3); box-shadow:none; }
/* on hover each launch button matches the color of the animation behind it */
.sa-action.pvp:hover .pvp-btn { background:linear-gradient(180deg,#ff9a3c,#e0451f); color:#1c0a03; box-shadow:0 0 22px rgba(255,110,40,.5); }
.sa-action.pve:hover .pvp-btn { background:rgba(107,189,122,.16); color:var(--so-green-bright); border-color:var(--so-green-bright); box-shadow:0 0 18px rgba(107,189,122,.4); }
/* hover FX canvases: PvP = inferno, PvE = ember sparks. Faded in on hover; content stays above. */
.sa-action.pvp .pvp-fire, .sa-action.pve .pve-embers { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .55s ease; pointer-events:none; z-index:0; }
.sa-action.pvp:hover .pvp-fire, .sa-action.pve:hover .pve-embers { opacity:1; }
.sa-action .sa-action-ico, .sa-action h3, .sa-action .pvp-btn { position:relative; z-index:1; }

/* daily bounties */
.bounty-panel { background:var(--so-card); border:1px solid var(--so-bd2); padding:26px; }
.bounty-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-family:var(--f-display); font-size:21px; font-weight:400; letter-spacing:.3px; text-transform:none; color:#f4ecd9; }
.bounty-head > span:first-child::before { content:"✦ "; color:var(--so-gold); }
.bounty-badge { font-family:var(--f-label); font-size:11px; letter-spacing:1px; color:var(--so-gold); border:1px solid var(--so-bd2); padding:4px 11px; }
.bounty-badge.all { color:var(--so-green-bright); border-color:rgba(107,189,122,.4); background:rgba(107,189,122,.08); }
.bounty-locked { color:var(--so-ink-faint); }
.bounty { display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--so-bd); }
.bounty:first-of-type { border-top:none; }
.bounty-emoji { font-size:17px; }
.bounty-mid { flex:1; }
.bounty-name { font-family:var(--f-body); font-weight:600; font-size:15px; color:#f4ecd9; }
.bounty-desc { font-family:var(--f-body); font-size:12.5px; color:var(--so-ink-faint); margin-top:1px; }
.bounty-bar { height:4px; background:rgba(0,0,0,.4); margin-top:7px; overflow:hidden; }
.bounty-bar i { display:block; height:100%; background:linear-gradient(90deg,#b78a3e,#e6c987); }
.bounty-amt { font-family:var(--f-display); font-size:16px; color:var(--so-gold-bright); }
.bounty-claim { font-family:var(--f-label); letter-spacing:1px; font-size:11px; color:#160b0a; background:linear-gradient(180deg,#d8a05a,#b8382f); border:none; padding:7px 12px; cursor:pointer; }
.bounty-claim:hover { filter:brightness(1.08); }
.bounty-ok { color:var(--so-green-bright); font-size:16px; }
.bounty.is-done { opacity:.55; }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:900px) {
  .sa-statcards { grid-template-columns:1fr; }
  .sa-hub { grid-template-columns:1fr; }
  .sa-hero { flex-direction:column; align-items:flex-start; }
  .sa-hero::after { display:none; }
  .sa-welcome { font-size:36px; }
}
@media (max-width:600px) {
  body { }
  nav[aria-label="Primary"] { padding:12px 16px; flex-wrap:wrap; }
  .sa-home { padding:20px 16px 40px; }
  .footer-disclaimer { text-align:center; max-width:100%; }
  footer { flex-direction:column; text-align:center; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PHASE 2 — per-page arcane-gold overrides (drafted by fan-out, harmonized)
   ══════════════════════════════════════════════════════════════════════════ */

/* ===== LOBBY ===== */

/* ── head / sub ── */
.lobby-head h2 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--so-ink-bright);
  letter-spacing: 0.5px;
}
.lobby-sub {
  font-family: var(--f-body);
  color: var(--so-ink-faint);
}

/* ── MENU: two grand arena gates ── */
.lobby-big {
  background: var(--so-card);
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  color: var(--so-ink-bright);
  font-family: var(--f-body);
  box-shadow: inset 0 1px 0 rgba(199,161,92,.08), 0 10px 30px rgba(0,0,0,.35);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.lobby-big:hover {
  border-color: var(--so-gold-bright);
  box-shadow: inset 0 0 40px rgba(199,161,92,.06), 0 0 26px rgba(199,161,92,.14);
}
/* Quick match = gold / hero gate */
.lobby-big:not(.alt) {
  border-color: var(--so-bd3);
  background:
    linear-gradient(180deg, rgba(199,161,92,.10), rgba(184,56,47,.05)),
    var(--so-card);
}
.lobby-big:not(.alt):hover {
  border-color: var(--so-gold-bright);
  box-shadow: inset 0 0 50px rgba(199,161,92,.10), 0 0 30px rgba(199,161,92,.20);
}
/* Rooms = quieter alt gate */
.lobby-big.alt {
  background: rgba(199,161,92,.04);
  border-color: var(--so-bd2);
}
.lobby-big.alt:hover {
  border-color: var(--so-gold);
}

.lobby-big-ico {
  color: var(--so-gold-bright);
  text-shadow: 0 0 18px rgba(199,161,92,.3);
}
.lobby-big.alt .lobby-big-ico {
  color: var(--so-gold);
  text-shadow: none;
}
.lobby-big-t {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--so-ink-bright);
  letter-spacing: 1px;
}
.lobby-big-sub {
  font-family: var(--f-label);
  letter-spacing: 2px;
  color: var(--so-gold);
}
.lobby-big.alt .lobby-big-sub {
  color: var(--so-ink-dim);
}

/* ── CTA row (host / join by code / refresh) ── */
.lobby-code {
  background: var(--so-panel);
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  color: var(--so-ink-bright);
  font-family: var(--f-display);
  letter-spacing: 0.25em;
  text-align: center;
}
.lobby-code::placeholder {
  color: var(--so-ink-faint);
  letter-spacing: 0.15em;
}
.lobby-code:focus {
  border-color: var(--so-gold-bright);
  outline: none;
  box-shadow: 0 0 0 1px rgba(199,161,92,.18);
}

/* ── section headers ── */
.lobby-sec {
  font-family: var(--f-label);
  letter-spacing: 2px;
  color: var(--so-gold);
  border-bottom: 1px solid var(--so-bd);
}
.lobby-sec.live {
  color: var(--so-red);
}
.lobby-count {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--so-ink-bright);
  background: rgba(199,161,92,.08);
  border: 1px solid var(--so-bd);
  border-radius: 0;
}

/* ── rows ── */
.lobby-list { }
.lobby-row {
  background: var(--so-card);
  border: 1px solid var(--so-bd);
  border-radius: 0;
  transition: border-color .18s, background .18s;
}
.lobby-row:hover {
  border-color: var(--so-bd3);
  background: rgba(199,161,92,.04);
}
.lobby-row.live {
  border-color: rgba(208,80,63,.3);
  background: linear-gradient(180deg, rgba(208,80,63,.05), rgba(16,13,20,.5));
}

.lobby-empty {
  font-family: var(--f-body);
  color: var(--so-ink-faint);
  border: 1px dashed var(--so-bd);
  border-radius: 0;
  background: rgba(199,161,92,.02);
}

/* ── avatar ── */
.lobby-ava {
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  font-family: var(--f-display);
  color: var(--so-ink-bright);
}

/* ── who / name / meta ── */
.lobby-nm {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--so-ink-bright);
  letter-spacing: 0.4px;
}
.lobby-meta {
  font-family: var(--f-label);
  letter-spacing: 1px;
  color: var(--so-ink-faint);
}
.lobby-vs {
  font-family: var(--f-label);
  letter-spacing: 2px;
  color: var(--so-red);
}

/* ── stake pill ── */
.lobby-stake {
  font-family: var(--f-label);
  letter-spacing: 1px;
  color: var(--so-ink-dim);
}
.lobby-stake b {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--so-gold-bright);
  letter-spacing: 0.5px;
}

/* ── live pulse dot ── */
.lobby-live-dot {
  background: var(--so-red);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(208,80,63,.6);
}

/* ===== ARENA (stake / #page-gacha renderHome) ===== */

/* deck-head title + sub + back button (page-specific, not in shared shell) */
.arena-title { font-family:var(--f-display); font-weight:400; color:var(--so-ink-bright); letter-spacing:.5px; }
.arena-sub2 { font-family:var(--f-label); letter-spacing:1px; color:var(--so-ink-dim); }
.arena-back { background:rgba(199,161,92,.06); border:1px solid var(--so-bd3); color:var(--so-gold-bright); font-family:var(--f-label); letter-spacing:1px; border-radius:0; }
.arena-back:hover { border-color:var(--so-gold-bright); color:var(--so-gold-bright); background:rgba(199,161,92,.12); }

/* ── player card head (.arena-panel already carries the panel styling) ── */
.ap-avatar { background:var(--so-panel); border:1px solid var(--so-gold); color:var(--so-gold-bright); font-family:var(--f-display); border-radius:50%; }
.ap-name { font-family:var(--f-display); font-weight:400; color:var(--so-ink-bright); }
.ap-addr { font-family:var(--f-label); letter-spacing:1px; color:var(--so-ink-faint); }

/* stat tiles */
.ap-stat { background:var(--so-panel); border:1px solid var(--so-bd); border-radius:0; }
.ap-stat b { font-family:var(--f-display); font-weight:400; color:var(--so-gold-bright); }
.ap-stat span { font-family:var(--f-label); letter-spacing:1.5px; color:var(--so-ink-dim); }

/* section label */
.ap-label { font-family:var(--f-label); letter-spacing:2px; color:var(--so-gold); }

/* ── quick-wager stake buttons (container .wager-quick.big → child <button>) ── */
.wager-quick.big button {
  background:rgba(9,7,12,.6); border:1px solid var(--so-bd); color:var(--so-ink-mut);
  font-family:var(--f-label); letter-spacing:1px; border-radius:0;
}
.wager-quick.big button:hover { border-color:var(--so-gold); color:var(--so-gold-bright); }
.wager-quick.big button.on { border-color:var(--so-gold-bright); color:var(--so-gold-bright); background:rgba(199,161,92,.12); }

/* ── stake summary strip ── */
.arena-summary { background:var(--so-card); border:1px solid var(--so-bd2); border-radius:0; }
.arena-summary div { border-right:1px solid var(--so-bd); }
.arena-summary b { font-family:var(--f-display); font-weight:400; color:var(--so-ink-bright); }
.arena-summary .green { color:var(--so-green-bright); }
.arena-summary .cyan { color:var(--so-blue); }
.arena-summary span { font-family:var(--f-label); letter-spacing:1.5px; color:var(--so-ink-dim); }

/* ── deck-lock note (pick-styles reminder) ── */
.deck-lock-note {
  background:rgba(199,161,92,.06); border:1px solid var(--so-bd2); color:var(--so-gold);
  font-family:var(--f-body); border-radius:0;
}

/* ── CTA row (buttons themed by shell; only the danger cancel needs re-toning) ── */
.arena-cta .cancel { color:var(--so-red) !important; border-color:rgba(208,80,63,.4) !important; }

/* ── room row hint caption (.arena-room panel + .pvp-btn.alt.on themed by shell) ── */
.arena-room-hint { font-family:var(--f-body); color:var(--so-ink-faint); }

/* ===== BATTLE ===== */
/* layout fix: fit the centered content column */
#page-battle { max-width: 1180px; }

/* top banner */
.bt-banner { background: var(--so-card); border: 1px solid var(--so-bd2); border-radius: 0; }
.bt-round { font-family: var(--f-label); font-weight: 400; color: var(--so-gold); letter-spacing: 2px; }
.bt-round b { font-family: var(--f-display); color: var(--so-gold-bright); }
.bt-mode.pve { color: var(--so-green-bright); background: rgba(107,189,122,.10); border: 1px solid rgba(107,189,122,.35); border-radius: 0; font-family: var(--f-label); font-weight: 400; letter-spacing: 1px; }
.bt-mode.pvp { color: var(--so-red); background: rgba(208,80,63,.10); border: 1px solid rgba(208,80,63,.35); border-radius: 0; font-family: var(--f-label); font-weight: 400; letter-spacing: 1px; }
.bt-reward { font-family: var(--f-display); font-size: 13px; color: var(--so-gold-bright); letter-spacing: .5px; }

/* speed selector */
.bt-speed { color: var(--so-ink-faint); font-family: var(--f-label); letter-spacing: 2px; }
.bt-speed button { background: rgba(199,161,92,.06); border: 1px solid var(--so-bd); border-radius: 0; color: var(--so-ink-dim); font-family: var(--f-display); }
.bt-speed button.on, .bt-speed button:hover { border-color: var(--so-bd3); color: var(--so-gold-bright); background: rgba(199,161,92,.12); }

/* fighter panels — gold (you) / red (enemy) sides */
.bt-panel.you { border-color: var(--so-bd3); box-shadow: 0 0 22px rgba(199,161,92,.08); }
.bt-panel.enemy { border-color: rgba(208,80,63,.4); box-shadow: none; }
.bt-phead { font-family: var(--f-label); font-weight: 400; letter-spacing: 3px; color: var(--so-gold); }
.bt-panel.enemy .bt-phead { color: var(--so-red); }

/* banner strip identity */
.bt-name { font-family: var(--f-display); font-weight: 400; color: var(--so-ink-bright); letter-spacing: .5px; }
.bt-addr { font-family: var(--f-body); color: var(--so-ink-faint); }
.bt-title { font-family: var(--f-label); letter-spacing: 1px; color: var(--so-ink-dim); }
.bt-rank { font-family: var(--f-label); letter-spacing: 1px; }
.bt-ava { border-radius: 0; border: 1px solid var(--so-bd3); color: var(--so-gold-bright); font-family: var(--f-display); }
.bt-ava.enemy { border-color: rgba(208,80,63,.5); color: var(--so-red); }

/* HP rows + bars */
.bt-hp-row { color: var(--so-ink-faint); font-family: var(--f-label); letter-spacing: 1px; text-transform: none; }
.bt-hp-row b { font-family: var(--f-display); color: var(--so-ink-bright); }
.bt-shield { font-family: var(--f-body); color: var(--so-blue); }
.bt-hpbar { background: var(--so-panel); border: 1px solid var(--so-bd); border-radius: 0; }
.bt-hp { background: linear-gradient(90deg, var(--so-gold-deep), var(--so-gold-bright)); }
.bt-hp.opp { background: linear-gradient(90deg, var(--so-red-deep), var(--so-red)); }

/* labels */
.bt-label { color: var(--so-gold); font-family: var(--f-label); letter-spacing: 2px; text-transform: none; }

/* played-card slot */
.bt-slot { background: var(--so-panel); border: 1px solid var(--so-bd); border-radius: 0; color: var(--so-ink-faint); }
.bt-slotcard b { font-family: var(--f-display); }
.bt-slotcard i { font-family: var(--f-label); letter-spacing: 1px; color: var(--so-ink-faint); text-transform: none; }
/* PRESERVE type colors: atk red / def blue / heal green */
.bt-slotcard.fx-atk b { color: #ff6b6b; }
.bt-slotcard.fx-def b { color: #4da6ff; }
.bt-slotcard.fx-heal b { color: var(--so-green-bright); }

/* opponent face-down cards */
.bt-back { border-radius: 0; border: 1px solid var(--so-bd2); background: repeating-linear-gradient(135deg, rgba(199,161,92,.10) 0 8px, rgba(16,13,20,.6) 8px 16px); box-shadow: inset 0 0 10px rgba(199,161,92,.08); color: var(--so-ink-faint); }

/* center — engraved VS + status */
.bt-vs { font-family: var(--f-display); font-weight: 400; color: var(--so-red); text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 0 20px rgba(208,80,63,.30); }
.bt-status { font-family: var(--f-body); color: var(--so-ink-mut); background: var(--so-card); border: 1px solid var(--so-bd); border-radius: 0; }
.bt-status.you { color: var(--so-gold-bright); border-color: var(--so-bd3); }

/* combat log */
.bt-logtoggle { background: rgba(199,161,92,.06); border: 1px solid var(--so-bd); color: var(--so-ink-dim); border-radius: 0; font: 400 11px var(--f-label); letter-spacing: 2px; }
.bt-logtoggle:hover { border-color: var(--so-bd3); color: var(--so-gold-bright); }
.bt-log { background: var(--so-panel); border: 1px solid var(--so-bd); border-radius: 0; font-family: var(--f-body); color: var(--so-ink-dim); }
.bt-logrow .l-you { color: var(--so-gold-bright); }
.bt-logrow .l-opp { color: var(--so-red); }
.bt-logrow .l-crit { color: var(--so-gold-bright); font-weight: 700; }
/* PRESERVE type colors in log fx */
.bt-logrow .fx-atk { color: #ff6b6b; }
.bt-logrow .fx-def { color: #4da6ff; }
.bt-logrow .fx-heal { color: var(--so-green-bright); }
/* act banner + crit (gacha.css overrides) */
.bt-log .l-act { color: var(--so-gold); font-family: var(--f-label); letter-spacing: 2px; }

/* CTA row */
.bt-cta .pvp-btn.on { border-color: var(--so-gold-bright) !important; color: var(--so-gold-bright) !important; background: rgba(199,161,92,.12); box-shadow: none; }
.bt-cta .cancel { color: var(--so-red) !important; border-color: rgba(208,80,63,.45) !important; }

/* ── center-stage card-flip animation ── */
.fxcard-face { border-radius: 0; }
.fxcard-back { border: 2px solid var(--so-gold); background: repeating-linear-gradient(135deg, rgba(199,161,92,.14) 0 8px, rgba(16,13,20,.7) 8px 16px); box-shadow: 0 0 26px rgba(199,161,92,.35); }
.fxcard-front { background: var(--so-card); border: 2px solid var(--so-bd2); }
/* PRESERVE type accents on the flip card */
.fxcard-front.t-atk { border-color: #ff6b6b; box-shadow: 0 0 34px rgba(255,107,107,.45); }
.fxcard-front.t-def { border-color: #4da6ff; box-shadow: 0 0 34px rgba(77,166,255,.45); }
.fxcard-front.t-heal { border-color: var(--so-green); box-shadow: 0 0 34px rgba(107,189,122,.45); }
.fxcard-front.t-atk .cicon, .fxcard-front.t-atk .fxcard-val { color: #ff6b6b; }
.fxcard-front.t-def .cicon, .fxcard-front.t-def .fxcard-val { color: #4da6ff; }
.fxcard-front.t-heal .cicon, .fxcard-front.t-heal .fxcard-val { color: var(--so-green-bright); }
.fxcard-val { font-family: var(--f-display); font-weight: 400; }
.fxcard-name { font-family: var(--f-label); letter-spacing: 1px; color: var(--so-ink-faint); text-transform: none; }

/* ── gacha.css battle-overlay bars (legacy #gacha-overlay path) ── */
.gb-hpbar { background: var(--so-panel); border: 1px solid var(--so-bd); border-radius: 0; }
.gb-hp { background: linear-gradient(90deg, var(--so-gold-deep), var(--so-gold-bright)); }
.gb-hp.opp { background: linear-gradient(90deg, var(--so-red-deep), var(--so-red)); }
.gb-hpnum { font-family: var(--f-display); color: var(--so-ink-bright); }
.gb-fname { color: var(--so-ink-faint); font-family: var(--f-label); letter-spacing: 1px; text-transform: none; }
.gb-turn { font-family: var(--f-body); color: var(--so-ink-faint); }
.gb-turn.you { color: var(--so-gold-bright); }
.gb-turn.opp { color: var(--so-ink-mut); }
/* PRESERVE type colors in stage fx */
.gb-fx { font-family: var(--f-display); }
.gb-fx.me b { color: var(--so-green-bright); }
.gb-fx.opp b { color: var(--so-red); }
.gb-fx.fx-def b { color: #4da6ff; }
.gb-fx.fx-heal b { color: var(--so-green-bright); }
.gb-back { color: var(--so-ink-faint); }
.gb-oppcards .gb-empty { color: var(--so-ink-faint); font-family: var(--f-body); }
.gb-legend { font-family: var(--f-label); letter-spacing: 1px; color: var(--so-ink-faint); }
.gb-shield { font-family: var(--f-body); color: var(--so-blue); }
.gb-plays { font-family: var(--f-body); color: var(--so-ink-faint); }

/* ===== PROFILE ===== */
/* Hero banner — gold-framed, engraved. Keep uploaded bannerImg / preset gradients (inline). */
.pf-banner {
  border-radius: 0;
  background-color: var(--so-panel);
  border: 1px solid var(--so-bd2);
  box-shadow: inset 0 -60px 80px -30px rgba(10,7,14,.92), inset 0 0 0 1px rgba(199,161,92,.08);
}
.pf-welcome {
  font: 400 14px var(--f-body);
  color: var(--so-ink-mut);
  background: rgba(199,161,92,.06);
  border: 1px solid var(--so-bd);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 16px;
}

/* Avatar disc on the banner — gold ring, ink-dark inset. Keep radial/photo bg (inline). */
.pf-ava {
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 400;
  color: #160b0a;
  border: 3px solid var(--so-gold);
  box-shadow: 0 6px 24px rgba(10,7,14,.6), 0 0 0 1px rgba(10,7,14,.9);
}

/* Section cards + engraved gold headers with a gold tick bar */
.pf-card {
  background: var(--so-card);
  border: 1px solid var(--so-bd);
  border-radius: 0;
}
.pf-h {
  font: 400 15px var(--f-label);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--so-gold-bright);
}
.pf-h::before {
  border-radius: 0;
  background: var(--so-gold);
  box-shadow: none;
}
.pf-hint {
  font: 400 13px var(--f-body);
  color: var(--so-ink-faint);
}

/* Avatar emoji picker grid */
.pf-avpick {
  background: rgba(199,161,92,.05);
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  color: var(--so-ink);
}
.pf-avpick:hover { border-color: var(--so-bd3); }
.pf-avpick.on {
  border-color: var(--so-gold-bright);
  background: rgba(199,161,92,.12);
  box-shadow: 0 0 0 1px rgba(199,161,92,.3);
}

/* Labels + inputs */
.pf-lbl {
  font: 400 11px var(--f-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--so-gold);
}
.pf-input {
  background: var(--so-panel);
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  color: var(--so-ink-bright);
  font: 400 15px var(--f-body);
}
.pf-input:focus {
  border-color: var(--so-gold);
  box-shadow: 0 0 0 2px rgba(199,161,92,.15);
}

/* Accent swatches — keep the chosen colours (inline bg), re-tone the selected ring to gold */
.pf-accent { border: 2px solid transparent; }
.pf-accent.on {
  border-color: var(--so-gold-bright);
  box-shadow: 0 0 0 2px rgba(199,161,92,.3), 0 0 10px currentColor;
}

/* Banner presets — keep gradient thumbnails (inline), gold selected frame */
.pf-preset {
  border-radius: 0;
  border: 1px solid var(--so-bd2);
  font: 400 13px var(--f-body);
  color: var(--so-ink-bright);
}
.pf-preset span {
  font-family: var(--f-label);
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(10,7,14,.85);
  background: linear-gradient(transparent, rgba(10,7,14,.55));
}
.pf-preset:hover { border-color: var(--so-bd3); }
.pf-preset.on {
  border-color: var(--so-gold-bright);
  box-shadow: 0 0 0 1px var(--so-gold-bright), 0 0 14px rgba(199,161,92,.35);
}

/* Titles — small-caps tags */
.pf-title {
  background: rgba(199,161,92,.05);
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  color: var(--so-ink-mut);
  font: 400 12px var(--f-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pf-title:hover:not(.locked) {
  border-color: var(--so-gold);
  color: var(--so-ink-bright);
}
.pf-title.eq {
  border-color: var(--so-gold-bright);
  color: var(--so-gold-bright);
  background: rgba(199,161,92,.12);
  box-shadow: none;
}
.pf-title.locked { opacity: .45; }
.pf-title.shop { color: var(--so-rank); }
.pf-title.shop.eq { color: var(--so-gold-bright); }

/* Career stats — big display numbers over engraved panels */
.pf-stat {
  background: var(--so-panel);
  border: 1px solid var(--so-bd);
  border-radius: 0;
}
.pf-stat-val {
  font: 400 28px var(--f-display);
  color: var(--so-ink-bright);
}
.pf-stat-lbl {
  font: 400 10px var(--f-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--so-gold);
}

/* PvE XP bar */
.pf-xp-top {
  font: 400 12px var(--f-label);
  letter-spacing: 1px;
  color: var(--so-ink-dim);
}
.pf-xp-bar {
  background: var(--so-panel);
  border: 1px solid var(--so-bd);
  border-radius: 0;
}
.pf-xp-fill {
  background: linear-gradient(90deg, var(--so-gold-deep), var(--so-gold-bright));
  border-radius: 0;
}

/* ---- in-battle banner strip (fighter identity) ---- */
.bt-bstrip {
  border-radius: 0;
  background-color: var(--so-panel);
  box-shadow: inset 0 0 0 1px rgba(199,161,92,.14);
}
.bt-bstrip::after { background: linear-gradient(90deg, rgba(10,7,14,.62), rgba(10,7,14,.14)); }
.bt-bstrip.rev::after { background: linear-gradient(270deg, rgba(10,7,14,.62), rgba(10,7,14,.14)); }
.bt-bstrip .bt-ava {
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 400;
  color: #160b0a;
  box-shadow: 0 0 0 2px var(--so-gold), 0 2px 10px rgba(10,7,14,.55);
}
.bt-bstrip .bt-name {
  font: 400 15px var(--f-display);
  color: var(--so-ink-bright);
  text-shadow: 0 1px 3px rgba(10,7,14,.7);
}
.bt-title {
  background: rgba(10,7,14,.45);
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  color: var(--so-gold);
  font: 400 10px var(--f-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.bt-rank {
  font: 400 12px var(--f-label);
  letter-spacing: 2px;
  text-shadow: 0 1px 3px rgba(10,7,14,.8);
}

/* result-screen ELO line — keep win/loss semantic hues, re-toned */
.duel-result-elo {
  font: 400 14px var(--f-label);
  letter-spacing: 1px;
  color: var(--so-ink-mut);
}
.duel-result-elo .sa-pos { color: var(--so-green-bright); }
.duel-result-elo .sa-neg { color: var(--so-red); }

/* ===== DUNGEON ===== */
/* .dg-card panel bg/border, .dg-card h2, .dg-sub are already themed in the shared shell — not re-output. PvE accent = green. */

/* leaf emoji — small gold-tinted glow, keep the emoji itself */
.dg-leaf { filter: drop-shadow(0 0 8px rgba(199,161,92,.28)); }

/* difficulty buttons */
.dg-diff {
  background: rgba(199,161,92,.05);
  border: 1px solid var(--so-bd2);
}
.dg-diff b {
  font-family: var(--f-label);
  letter-spacing: 2px;
  color: var(--so-ink-bright);
}
.dg-diff span {
  font-family: var(--f-display);
  color: var(--so-gold-bright);
}
.dg-diff:hover {
  border-color: var(--so-green);
  color: var(--so-ink-bright);
}
/* selected — green since PvE, per convention */
.dg-diff.on {
  border-color: var(--so-green-bright);
  background: rgba(107,189,122,.12);
  box-shadow: 0 0 12px rgba(107,189,122,.22);
}
.dg-diff.on b { color: var(--so-ink-bright); }
.dg-diff.on span { color: var(--so-green-bright); }

/* draw / enter hint + closing note */
.dg-drawhint {
  font-family: var(--f-body);
  color: var(--so-ink-dim);
}
.dg-note {
  font-family: var(--f-body);
  font-style: italic;
  color: var(--so-ink-faint);
}

/* ===== SHOP ===== */
.shop-head h2 { font-family: var(--f-display); font-weight: 400; letter-spacing: 1px; color: var(--so-ink-bright); }
.shop-sub { font-family: var(--f-body); color: var(--so-ink-mut); }

/* gold balance */
.shop-bal { font-family: var(--f-display); font-weight: 400; letter-spacing: .5px; color: var(--so-ink-dim); }
.shop-bal b { color: var(--so-gold-bright); font-weight: 400; }

/* empty / not-connected state */
.shop-empty { font-family: var(--f-body); color: var(--so-ink-mut); }

/* category headers — engraved small-caps with a gold rule */
.shop-sec-h {
  font-family: var(--f-label); letter-spacing: 2px; text-transform: none;
  color: var(--so-gold); border-radius: 0;
}
.shop-sec-h::before { background: var(--so-gold); box-shadow: none; border-radius: 0; }

/* item cards */
.shop-item {
  background: var(--so-card); border: 1px solid var(--so-bd);
  border-radius: 0; box-shadow: none;
}
.shop-item.owned { border-color: var(--so-bd2); }
.shop-item.eq { border-color: var(--so-gold-bright); background: rgba(199,161,92,.12); box-shadow: none; }
.shop-item:hover { border-color: var(--so-bd2); box-shadow: none; }

.shop-item-title { font-family: var(--f-body); color: var(--so-ink); }
.shop-item-tag { font-family: var(--f-label); letter-spacing: 1px; text-transform: none; color: var(--so-ink-dim); }

/* buy button = CTA; ghost = equip */
.shop-btn {
  background: linear-gradient(180deg,#d8a05a,#b8382f); border: none; color: #160b0a;
  font-family: var(--f-label); letter-spacing: 2px; border-radius: 0;
}
.shop-btn:hover { filter: brightness(1.06); }
.shop-btn.ghost {
  background: rgba(199,161,92,.06); border: 1px solid var(--so-bd3);
  color: var(--so-gold-bright); letter-spacing: 2px;
}

/* equipped tag */
.shop-eq { font-family: var(--f-label); letter-spacing: 1.5px; color: var(--so-gold-bright); }

/* gold price */
.shop-price { color: inherit; }

/* title-preview swatch (its own name plate — not a cosmetic product colour) */
.shop-item-prev.tt .bt-name {
  font-family: var(--f-display); font-weight: 400;
  background: var(--so-panel); border: 1px solid var(--so-bd2);
  border-radius: 0; color: var(--so-ink-bright);
}

/* disclaimer */
.shop-disclaimer {
  font-family: var(--f-body); font-style: italic; color: var(--so-ink-faint);
  border-top: 1px solid var(--so-bd);
}

/* ===== LEADERBOARD ===== */

/* wrapper + heading */
.lb2 {}
.lb2-head h2 { font: 400 26px var(--f-display); letter-spacing: 1px; color: var(--so-ink-bright); }
.lb2-sub { font-family: var(--f-body); color: var(--so-ink-mut); }

/* your-rank banner — prominent gold-framed hero */
.your-rank-banner {
  background: var(--so-panel);
  border: 1px solid var(--so-bd3);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(199,161,92,.08), 0 0 22px rgba(199,161,92,.06);
}
.yr-rank { font-family: var(--f-display); font-weight: 400; color: var(--so-gold-bright); text-shadow: 0 0 14px rgba(199,161,92,.25); }
.yr-info {}
.yr-label { font-family: var(--f-label); letter-spacing: 2px; color: var(--so-gold); text-transform: uppercase; }
.yr-addr { font-family: var(--f-body); color: var(--so-ink-mut); }
.yr-addr b { font-family: var(--f-display); font-weight: 400; color: var(--so-ink-bright); }
.yr-stats span { font: 400 9px var(--f-label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--so-ink-dim); }
.yr-stats b { font: 400 17px var(--f-display); color: var(--so-gold-bright); }

/* season-rewards annotation */
.lb-rewards {
  background: linear-gradient(120deg, rgba(199,161,92,.14), rgba(199,161,92,.02));
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  font-family: var(--f-body);
  color: var(--so-ink-mut);
}
.lb-rewards-ico { color: var(--so-gold-bright); }
.lb-rewards b { color: var(--so-gold-bright); font-weight: 400; }
.lb-rewards i { color: var(--so-ink-faint); font-style: italic; }

/* tabs row + LIVE/DEMO source toggle */
.lb2-tabsrow {}
.lb2-source {
  font: 400 10px var(--f-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-ink-dim);
  background: rgba(199,161,92,.06);
  border: 1px solid var(--so-bd);
  border-radius: 0;
}
.lb2-source:hover { color: var(--so-gold-bright); border-color: var(--so-bd3); }
.lb2-source.on { color: var(--so-green-bright); border-color: rgba(107,189,122,.42); }
.lb2-dot { border-radius: 50%; background: var(--so-ink-faint); }
.lb2-source.on .lb2-dot { background: var(--so-green-bright); box-shadow: 0 0 7px var(--so-green-bright); }
.lb2-swap { font-style: normal; color: var(--so-ink-dim); letter-spacing: .5px; text-transform: none; }

/* empty-board hint */
.lb2-empty {
  font-family: var(--f-body);
  color: var(--so-ink-mut);
  background: rgba(199,161,92,.05);
  border: 1px dashed var(--so-bd2);
  border-radius: 0;
}

/* table + rows */
.lb2-table {}
.lb-row2 {
  background: var(--so-card);
  border: 1px solid var(--so-bd);
  border-radius: 0;
}
.lb-row2.me {
  background: rgba(199,161,92,.12);
  border-color: var(--so-gold-bright);
}
.lb-row2.offline {}
.lb-row2:not(.lb-headrow):not(.me):hover { border-color: var(--so-bd3); }

/* header row — small-caps gold */
.lb-headrow { background: transparent !important; border: none !important; }
.lb-headrow .lb-who,
.lb-headrow .lb-tier-h,
.lb-headrow .lb-c {
  font: 400 10px var(--f-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--so-gold);
}
.lb-headrow .lb-c.on { color: var(--so-gold-bright); }

/* rank / medals — keep gold/silver/bronze */
.lb-pos { font: 400 15px var(--f-display); color: var(--so-ink-dim); }
.lb-medal {}
.lb-medal.m1 { filter: drop-shadow(0 0 4px rgba(230,201,135,.4)); }

/* avatar chip */
.lb-av {
  background: var(--so-panel);
  border: 1px solid var(--so-bd);
  border-radius: 50%;
  font: 400 14px var(--f-display);
  color: var(--so-ink-mut);
}
.lb-av.sim { opacity: .82; }
.lb-av.me { border-color: var(--so-gold-bright); box-shadow: 0 0 0 1px var(--so-gold-bright), 0 0 10px rgba(199,161,92,.28); }

/* presence dots */
.lb-pres { border: 2px solid #0d0a12; }
.lb-pres.on { background: var(--so-green-bright); box-shadow: 0 0 6px var(--so-green-bright); }
.lb-pres.off { background: var(--so-ink-faint); }

/* who / name */
.lb-nm { font: 400 15px var(--f-display); color: var(--so-ink-bright); }
.lb-youtag { font: 400 10px var(--f-label); letter-spacing: 1.5px; text-transform: uppercase; color: var(--so-gold-bright); font-style: normal; }

/* rank tier badge — keep tier hue (inline color from JS), just re-tone the frame */
.lb-tier { font: 400 10px var(--f-label); letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid; border-radius: 0; }

/* stat cells */
.lb-c { font: 400 14px var(--f-display); color: var(--so-ink-mut); }
.lb-c.on { color: var(--so-ink-bright); }
.lb-row2.me .lb-c.on { color: var(--so-gold-bright); }
.lb-headrow .lb-c.on { color: var(--so-gold-bright); }

/* reward-zone accent bar */
.lb-row2.in-rewards { border-color: var(--so-bd3); box-shadow: inset 3px 0 0 var(--so-gold); }

/* footer note */
.lb2-foot { font-family: var(--f-body); font-style: italic; color: var(--so-ink-foot); }

/* ===== HISTORY ===== */

/* ── summary stat blocks ── */
.hist-summary .hist-sm {
  background: var(--so-panel);
  border: 1px solid var(--so-bd);
  border-radius: 0;
}
.hist-sm b {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--so-ink-bright);
}
.hist-sm b.sa-pos { color: var(--so-green-bright); }
.hist-sm b.sa-neg { color: var(--so-red); }
.hist-sm span {
  font-family: var(--f-label);
  letter-spacing: 1.5px;
  text-transform: none;
  color: var(--so-ink-faint);
}

/* ── filter tabs (All / PvP / PvE) ── */
.hist-tabs.lb2-tabs {
  background: rgba(199,161,92,.05);
  border: 1px solid var(--so-bd);
  border-radius: 0;
  padding: 4px;
}
.hist-tabs .lb-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--so-ink-dim);
  font-family: var(--f-label);
  letter-spacing: 2px;
  cursor: pointer;
}
.hist-tabs .lb-tab:hover {
  color: var(--so-gold-bright);
}
.hist-tabs .lb-tab.active {
  color: var(--so-gold-bright);
  border-color: var(--so-gold-bright);
  background: rgba(199,161,92,.12);
}

/* ── table shell ── */
.hist-table-wrap {
  background: var(--so-panel);
  border: 1px solid var(--so-bd2);
  border-radius: 0;
}
.hist-table th {
  font-family: var(--f-label);
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: none;
  color: var(--so-gold);
  border-bottom: 1px solid var(--so-bd2);
}
.hist-table td {
  color: var(--so-ink-mut);
  border-bottom: 1px solid var(--so-bd);
  font-family: var(--f-body);
}
.hist-table tr:last-child td { border-bottom: none; }

.hist-when {
  color: var(--so-ink-faint);
  font-family: var(--f-body);
}
.hist-opp { color: var(--so-ink); }

/* ── result tags ── */
.hist-tag {
  font-family: var(--f-label);
  font-weight: 400;
  letter-spacing: 1.5px;
  border-radius: 0;
}
.hist-tag.win {
  color: var(--so-green-bright);
  background: rgba(107,189,122,.09);
  border: 1px solid rgba(107,189,122,.4);
}
.hist-tag.lose {
  color: var(--so-red);
  background: rgba(208,80,63,.08);
  border: 1px solid rgba(208,80,63,.4);
}
.hist-tag.push {
  color: var(--so-ink-dim);
  background: rgba(199,161,92,.05);
  border: 1px solid var(--so-bd2);
}

/* ── mode badges ── */
.hist-mode {
  font-family: var(--f-label);
  font-weight: 400;
  letter-spacing: 1.5px;
  border-radius: 0;
}
.hist-mode.pvp {
  color: var(--so-red);
  border: 1px solid rgba(208,80,63,.4);
}
.hist-mode.pve {
  color: var(--so-green-bright);
  border: 1px solid rgba(107,189,122,.4);
}

/* ── misc cells ── */
.hist-free, .hist-dim {
  color: var(--so-ink-faint);
  font-family: var(--f-label);
  letter-spacing: 1px;
}
.hist-empty {
  color: var(--so-ink-faint);
  font-family: var(--f-body);
  font-style: italic;
}

/* ===== DOCS ===== */

/* layout wrapper + article body — parchment ink, generous line-height */
.docs-wrap { color: var(--so-ink-mut); font-family: var(--f-body); }

/* side nav (.docs-content panel bg/border + h1 display already themed in shell) */
.docs-nav { border-right: 1px solid var(--so-bd); }
.docs-nav-h {
  font-family: var(--f-label); letter-spacing: 2px; font-size: 12px;
  color: var(--so-gold); text-transform: uppercase;
}
.docs-navlink {
  font-family: var(--f-body); color: var(--so-ink-dim);
  border-left: 2px solid transparent; letter-spacing: .2px; transition: .15s;
}
.docs-navlink:hover { color: var(--so-gold-bright); }
.docs-navlink.on {
  color: var(--so-gold-bright); border-left-color: var(--so-gold-bright);
  background: rgba(199,161,92,.10);
}

/* article headings */
.docs h1, .docs-content h1 {
  font-family: var(--f-display); font-weight: 400;
  color: var(--so-ink-bright); letter-spacing: .5px;
}
.docs h2, .docs-content h2 {
  font-family: var(--f-display); font-weight: 400; letter-spacing: .4px;
  color: var(--so-gold-bright);
  border-bottom: 1px solid var(--so-bd2);
}

/* body copy — Spectral, roomy line-height */
.docs p { font-family: var(--f-body); color: var(--so-ink-mut); line-height: 1.7; }
.docs ul, .docs ol { font-family: var(--f-body); color: var(--so-ink-mut); line-height: 1.75; }
.docs li { color: var(--so-ink-mut); }
.docs strong { color: var(--so-ink-bright); font-weight: 600; }
.docs em { color: var(--so-gold-bright); font-style: italic; }

/* note box — re-toned from red to a warm gold/parchment aside */
.docs-note {
  background: rgba(199,161,92,.07);
  border: 1px solid var(--so-bd2);
  border-left: 3px solid var(--so-gold);
  border-radius: 0;
  color: var(--so-ink-mut);
  font-family: var(--f-body);
}
.docs-note strong { color: var(--so-gold-bright); }

/* data tables — gold small-caps head, parchment rows, gold-tinted rules */
.docs-table {
  background: var(--so-card);
  border: 1px solid var(--so-bd2);
  border-radius: 0;
  color: var(--so-ink-mut);
}
.docs-table th, .docs-table td { border-bottom: 1px solid var(--so-bd); }
.docs-table thead th {
  background: rgba(199,161,92,.06);
  color: var(--so-gold);
  font-family: var(--f-label); letter-spacing: 1.5px; font-weight: 400;
  border-bottom: 1px solid var(--so-bd2);
}
.docs-table tbody tr:last-child td { border-bottom: none; }
.docs-table td { font-family: var(--f-body); color: var(--so-ink); }
.docs-table td:first-child { font-family: var(--f-body); color: var(--so-ink-mut); }
.docs-table b { color: var(--so-ink-bright); }

/* rarity legend dots keep their semantic hue (PRESERVE); base dot re-toned */
.docs-dot { background: var(--so-ink-faint); }
.docs-dot.rare { background: #4DA6FF; }
.docs-dot.epic { background: var(--purple); }
.docs-dot.legendary { background: var(--gold); }

/* ===== CODEX (deck illustrations kept from batch 22 — page chrome only) ===== */
.codex-hint { font-family:var(--f-body); color:var(--so-ink-faint); }
.codex-cards { border-top:1px solid var(--so-bd); }
.codex-style { border-color:var(--so-bd2); }

/* ===== shared page header (deck-head used by arena/codex/etc) ===== */
.deck-head { border-bottom:1px solid var(--so-bd); }
.deck-head .deck-sub, .deck-sub { font-family:var(--f-body); color:var(--so-ink-mut); }
