/* ===================== HOLLOWCROSS - meta UI ===================== */
:root { --cred: #6fb6c9; --r-mythic: #e23b6d; --r-deity: #ffd970; }

/* NOTE: the unified GAME UI system (buttons, panels, HUD, fog, hub) lives at
   the BOTTOM of this file — it is the final cascade layer and wins over the
   base rules below. Edit the look there, not here. */

/* screen / view visibility (overrides base .screen rules) */
.screen { display: none; }
.screen.active { display: block; }
#screen-auth.active { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-height: 100vh; padding: 28px 14px; }
#screen-game.active { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-height: 100vh; }
.view { display: none; max-width: 1100px; margin: 0 auto; padding: 18px 14px 60px; position: relative; z-index: 1; }
.view.active { display: block; }
#topbar, .auth-box { position: relative; z-index: 2; }
.hidden { display: none !important; }

/* ---------- auth ---------- */
.auth-box {
  background: rgba(12,10,14,0.88); border: 1px solid #2a242f; border-radius: 12px;
  padding: 30px 34px; width: 380px; max-width: 92vw; text-align: center;
  box-shadow: 0 0 60px rgba(142,28,32,0.25);
}
.auth-box #logo { max-width: 220px; margin-bottom: 6px; }
.tabs { display: flex; gap: 6px; margin: 14px 0; }
.tab { flex: 1; background: #1a1620; border: 1px solid #2e2733; color: var(--muted); padding: 9px; border-radius: 6px; cursor: pointer; font-weight: 700; letter-spacing: 1px; }
.tab.active { background: linear-gradient(180deg,#b3262b,#6e1417); color: #fff; border-color: #d8b27a40; }
.auth-form { display: none; flex-direction: column; gap: 10px; }
.auth-form.active { display: flex; }
.auth-form input { padding: 12px; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; font-size: 15px; }
.auth-form button { margin-top: 4px; }
.auth-form .ghost { background: none; border: 1px solid #3a3340; color: var(--muted); }
/* Sign in with Steam */
.steam-login-wrap { display: flex; flex-direction: column; gap: 8px; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; letter-spacing: 2px; }
.auth-or span { text-transform: uppercase; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: #2c2630; }
.steam-btn { background: linear-gradient(180deg, #1b2838, #101822) !important; color: #c7d5e0 !important; border: 1px solid #2a475e !important; font-weight: 600; letter-spacing: .5px; }
.steam-btn:hover { color: #fff !important; border-color: #66c0f4 !important; background: linear-gradient(180deg, #24374a, #16212c) !important; }
/* add-to-home-screen banner (mobile web) */
.install-banner {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 80; display: flex; align-items: center; gap: 11px;
  background: linear-gradient(180deg, #17131c, #0e0b12); border: 1px solid var(--gold);
  border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.install-banner.hidden { display: none; }
.install-banner .ib-icon { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; }
.install-banner .ib-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.install-banner .ib-text b { color: var(--ink); font-size: 14px; }
.install-banner .ib-text small { color: var(--muted); font-size: 12px; }
.install-banner .ib-go { flex: 0 0 auto; padding: 8px 16px; font-size: 14px; margin: 0; }
.install-banner .ib-go.hidden { display: none; }
.install-banner .ib-x {
  flex: 0 0 auto; background: none; border: none; color: var(--muted);
  font-size: 17px; line-height: 1; padding: 6px; margin: 0; cursor: pointer;
}
.install-banner .ib-x:hover { color: var(--ink); }
/* "Four ways to play" tour — intro / interstitial / outro cards */
.teaser-ov { position: fixed; inset: 0; z-index: 8500; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(24,16,30,.9), rgba(4,3,6,.96)); padding: 16px; }
.teaser-ov.hidden { display: none; }
.teaser-box { max-width: 640px; width: 100%; text-align: center; background: linear-gradient(180deg,#15111b,#0c0a12);
  border: 1px solid var(--gold); border-radius: 14px; padding: 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.teaser-box h2 { color: var(--gold); letter-spacing: 3px; margin: 0 0 8px; font-size: 24px; text-transform: uppercase; }
.teaser-lead { color: var(--ink); font-size: 15px; line-height: 1.5; margin: 0 auto 18px; max-width: 520px; font-family: Georgia, serif; }
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 18px; }
.teaser-mode { background: rgba(12,9,16,.6); border: 1px solid #322a3a; border-radius: 10px; padding: 12px; text-align: center; }
.teaser-mode .tm-ic { font-size: 26px; }
.teaser-mode b { display: block; color: var(--gold); margin: 4px 0 3px; }
.teaser-mode small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.teaser-grid.pick { grid-template-columns: 1fr 1fr 1fr 1fr; }
.teaser-mode.pick { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.teaser-mode.pick:hover { border-color: var(--gold); background: rgba(200,164,90,.08); }
.teaser-mode.pick small { display: none; }
.teaser-reward { color: var(--gold); font-size: 14px; margin: 0 0 14px; letter-spacing: .5px; }
.teaser-reward b { color: #f2d98c; }
.teaser-btns { display: flex; gap: 10px; justify-content: center; }
@media (max-width: 560px) { .teaser-grid, .teaser-grid.pick { grid-template-columns: 1fr 1fr; } }
.verify-info { color: var(--muted); font-size: 14px; margin: 0; }
.auth-msg { margin-top: 12px; min-height: 20px; color: #e0a06a; font-size: 14px; }
.auth-msg.good { color: var(--gold); }

/* ---------- top bar ---------- */
#topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: 8px 16px; background: rgba(10,8,12,0.95); border-bottom: 1px solid #2a242f;
}
#topbar .brand { font-family: Georgia, serif; letter-spacing: 3px; color: var(--gold); font-weight: 700; }
#topbar nav { display: flex; gap: 4px; }
.navbtn { background: none; border: 1px solid transparent; color: var(--muted); padding: 7px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.navbtn:hover { color: var(--ink); }
.navbtn.active { color: var(--ink); border-color: #3a3340; background: #17131c; }
#topbar .spacer { flex: 1; }
#topbar .gems { font-weight: 700; color: #6fb6c9; }
#topbar .gems { white-space: nowrap; }
#topbar .gems .cur { display: inline-block; white-space: nowrap; }
#topbar .gems .cred { color: #d8b048; margin-left: 6px; }
#topbar .gems .lvl { color: var(--gold); margin-left: 6px; }
#topbar .who { color: var(--ink); }

/* player widget (click → profile) */
.pf-widget { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 3px 8px; border-radius: 10px; }
.pf-widget:hover { background: #17131c; }
.pf-widget-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #14111a; flex: 0 0 auto; }
.pf-widget-av img { width: 100%; height: 100%; object-fit: cover; }
.pf-widget-meta { display: flex; flex-direction: column; line-height: 1.15; }
.pf-widget-name { color: var(--ink); font-weight: 700; font-size: 13px; }
.pf-widget-lvl { color: var(--gold); font-size: 11px; }
.pf-widget-bar { width: 96px; height: 5px; background: #0c0a0e; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.pf-widget-bar div { height: 100%; background: linear-gradient(90deg, #8e1c20, #c8a45a); }

/* ---------- combat roles + synergy ---------- */
.role-badge { position: absolute; z-index: 4; top: 3px; left: 50%; transform: translateX(-50%); font-size: 13px; filter: drop-shadow(0 1px 2px #000); }
.tok-role { position: absolute; z-index: 3; top: 20px; left: 3px; font-size: 13px; filter: drop-shadow(0 1px 2px #000); }
.tr-mend { color: #6fc97a; } .tr-hex { color: #c98af0; }
.tr-guardian { color: #7aa8d8; } .tr-mender { color: #6fc97a; } .tr-hexer { color: #c98af0; } .tr-bruiser { color: #e8955a; } .tr-mage { color: #3aa8e8; }
.team-synergy { text-align: center; margin: -6px 0 14px; }
.ts-roles { font-size: 18px; letter-spacing: 5px; }
.ts-syn { color: var(--gold); font-size: 13px; margin-top: 3px; }

/* ---------- friends + chat ---------- */
.fr-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.fr-tab { background: #1a1620; border: 1px solid #2e2733; color: var(--muted); padding: 8px 16px; border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 700; }
.fr-tab.active { background: #15121a; color: var(--gold); border-bottom-color: var(--gold); }
.fr-pane { display: none; }
.fr-pane.active { display: block; }
.fr-add { display: flex; gap: 8px; margin-bottom: 12px; }
.fr-add input { flex: 1; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 10px; }
.fr-reqs { background: #15121a; border: 1px solid #2e2733; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.fr-req { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.mini { padding: 2px 8px; font-size: 12px; border-radius: 5px; }
.fr-split { display: flex; gap: 14px; }
.fr-list { flex: 0 0 220px; max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.fr-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: #14111a; border: 1px solid #2a242f; border-radius: 6px; cursor: pointer; }
.fr-item.active { border-color: var(--gold); }
.fr-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: 0 0 auto; }
.fr-dot.on { background: #6fc97a; box-shadow: 0 0 8px #6fc97a; }
.fr-chat { flex: 1; display: flex; flex-direction: column; background: #14111a; border: 1px solid #2a242f; border-radius: 8px; min-height: 360px; }
.fr-chat-head { padding: 10px 14px; border-bottom: 1px solid #2a242f; color: var(--gold); font-weight: 700; }
.fr-chat-log { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 220px; }
.fr-chat-log.tav { min-height: 50vh; }
.cmsg { background: #1a1620; border-radius: 8px; padding: 6px 10px; max-width: 80%; align-self: flex-start; font-size: 14px; }
.cmsg.me { align-self: flex-end; background: #2c1b1d; }
.cmsg b { color: var(--gold); margin-right: 4px; }
.fr-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #2a242f; }
.fr-chat-input input { flex: 1; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 9px; }
.navbtn.badge::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #6fc97a; box-shadow: 0 0 6px #6fc97a; }

/* ---------- in-battle (PvP) chat ---------- */
.match-chat { position: absolute; z-index: 35; bottom: 10px; right: 10px; width: 240px; background: rgba(10,8,12,0.9); border: 1px solid #2e2733; border-radius: 10px; display: flex; flex-direction: column; }
.mc-log { max-height: 160px; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.mcm { color: var(--ink); } .mcm b { color: var(--gold); } .mcm.me b { color: var(--cred); }
.mc-input { display: flex; border-top: 1px solid #2e2733; }
.mc-input input { flex: 1; background: transparent; border: none; color: var(--ink); padding: 8px; }
.mc-input button { background: var(--blood); color: #fff; border: none; padding: 0 12px; cursor: pointer; }
@media (max-width: 640px) { .match-chat { width: 160px; bottom: 6px; right: 6px; } .fr-split { flex-direction: column; } .fr-list { flex-basis: auto; max-height: 30vh; } }

/* ---------- guided tutorial coach ---------- */
#coach { position: fixed; z-index: 70; left: 50%; bottom: 18px; transform: translateX(-50%); width: 560px; max-width: 94vw; background: rgba(14,11,16,0.97); border: 1px solid var(--gold); border-radius: 12px; padding: 16px 18px; box-shadow: 0 0 40px rgba(200,164,90,0.3); display: flex; align-items: center; gap: 14px; }
#coach.hidden { display: none; }
#coach .coach-text { flex: 1; color: var(--ink); font-size: 14px; line-height: 1.5; }
#coach .coach-text b { color: var(--gold); }
#coach .coach-skip { position: absolute; top: 6px; right: 10px; color: var(--muted); font-size: 11px; cursor: pointer; }

/* ---------- how to play ---------- */
.howto-box { max-width: 640px; max-height: 88vh; overflow: auto; text-align: left; }
.howto-box .title { text-align: center; }
.howto-content h3 { color: var(--gold); margin: 16px 0 4px; font-family: Georgia, serif; }
.howto-content p { color: var(--ink); line-height: 1.55; margin: 0 0 6px; }
.howto-content ul { margin: 4px 0 8px; padding-left: 20px; color: var(--ink); }
.howto-content li { margin: 3px 0; line-height: 1.4; }
.howto-content b { color: var(--gold); }
#howto-close { margin-top: 12px; }

/* (game-style polish moved to the unified layer at the bottom of this file) */
.hub-hero { position: relative; }
.hub-card { position: relative; overflow: hidden; }

/* =====================================================================
   MOBILE — PORTRAIT
   ===================================================================== */
@media (orientation: portrait) and (max-width: 760px) {
  .battle-wrap { gap: 8px; }
  .bteam-cards { gap: 5px; flex-wrap: nowrap; }
  .tok { width: 60px; height: 84px; }
  .tok-name { display: none; }
  #vs-splash .vs-big, .vs-big { font-size: 26px; letter-spacing: 2px; }
  .reveal-cards { grid-template-columns: repeat(3, 30vw); }
  .reveal-slot { width: 30vw; height: 42vw; }
  .pf-widget-bar { width: 64px; }
  .panel { padding: 12px; }
  #coach { bottom: 8px; padding: 12px; }
  #coach .big { font-size: 13px; padding: 9px 12px; }
}

/* =====================================================================
   MOBILE — LANDSCAPE (short viewport height)
   ===================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
  #topbar { padding: 3px 8px; gap: 4px; }
  #topbar .brand { display: none; }
  #topbar .navbtn { padding: 4px 8px; font-size: 12px; }
  #topbar nav { order: 0; width: auto; }
  .pf-widget-bar, .pf-widget-lvl { display: none; }
  .pf-widget-av { width: 30px; height: 30px; }
  .view { padding: 8px 12px 28px; }
  .title { font-size: 22px; }
  .subtitle { font-size: 12px; margin: 2px 0; }
  .hub-logo { width: 36%; max-width: 260px; margin: 2px auto; animation: none; }
  .hub-cards { margin-top: 8px; gap: 8px; }
  .hub-card { padding: 8px 12px; flex: 1 1 30%; }
  .hub-card p { display: none; }
  .play-zone { gap: 8px; margin: 8px 0; }
  .play-card { width: 46%; padding: 10px 12px; }
  .play-card p { display: none; }
  /* battle fits the short height */
  #screen-game.active { padding: 4px; gap: 2px; }
  .battle-wrap { gap: 6px; flex: 1; justify-content: center; }
  .bteam-name { font-size: 11px; }
  .bteam-cards { gap: 5px; }
  .tok { width: 56px; height: 78px; }
  .tok-name { display: none; }
  #battle-status { font-size: 13px; }
  .battle-log { display: none; }
  .vs-big { font-size: 22px; }
  .match-chat { width: 150px; bottom: 6px; }
  .mc-log { max-height: 90px; }
  .reveal-box, .card-modal-box { max-height: 94vh; overflow: auto; }
  .reveal-cards { grid-template-columns: repeat(5, 64px); }
  .reveal-slot { width: 64px; height: 90px; }
  .sd-char { max-height: 60vh; }
  .sd-inner { justify-content: center; }
  #coach { bottom: 6px; padding: 8px 12px; width: 70vw; }
  #coach .coach-text { font-size: 12px; }
}

/* ---------- panels / hub ---------- */
.panel { background: rgba(14,12,16,0.7); border: 1px solid #2a242f; border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.panel h2 { margin: 0 0 14px; color: var(--gold); font-family: Georgia, serif; letter-spacing: 1px; }
.panel h2 small { color: var(--muted); font-weight: normal; font-size: 13px; letter-spacing: 0; }
.muted { color: var(--muted); }
.hub-hero { text-align: center; padding-top: 10px; }
.play-zone { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin: 18px 0; }
.play-card { background: rgba(14,12,16,0.8); border: 1px solid #2e2733; border-radius: 12px; padding: 18px 22px; width: 340px; max-width: 92vw; }
.play-card h3 { margin: 0 0 6px; color: var(--ink); }
.play-card .row { display: flex; gap: 10px; margin-top: 12px; }
.play-card select { flex: 1; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 10px; }
.hub-cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.hub-card { background: #15121a; border: 1px solid #2e2733; border-radius: 10px; padding: 16px 22px; cursor: pointer; min-width: 180px; transition: transform .1s, border-color .15s; }
.hub-card:hover { transform: translateY(-3px); border-color: var(--gold); }
.hub-card h3 { margin: 0 0 4px; color: var(--gold); }
.hub-card p { margin: 0; color: var(--muted); font-size: 13px; }

button.big { font-size: 16px; padding: 12px 26px; }
button.small { padding: 6px 12px; font-size: 13px; }
button.ghost { background: none; border: 1px solid #3a3340; color: var(--muted); }

/* ---------- shop ---------- */
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bundle { background: #15121a; border: 1px solid #2e2733; border-radius: 10px; padding: 14px; text-align: center; }
.bundle h4 { margin: 0 0 8px; color: var(--ink); }
.bundle-gems { font-size: 20px; color: #d8b048; font-weight: 800; margin-bottom: 10px; }
.pack-filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { background: #15121a; border: 1px solid #2e2733; color: var(--muted); padding: 7px 14px; border-radius: 20px; cursor: pointer; font-weight: 600; }
.chip.active { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pack-card { background: #15121a; border: 1px solid #2e2733; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; }
.pack-card h4 { margin: 0 0 6px; color: var(--gold); }
.pack-desc { color: var(--muted); font-size: 13px; flex: 1; }
.pack-buy { display: flex; gap: 8px; margin-top: 12px; }
.buy { background: linear-gradient(180deg,#b3262b,#6e1417); border: 1px solid #d8b27a40; color: #fff; padding: 9px 12px; border-radius: 6px; cursor: pointer; font-weight: 700; flex: 1; }
.buy.alt { background: linear-gradient(180deg,#2c6f86,#173f4d); }
.buy:disabled { filter: grayscale(.8) brightness(.6); cursor: default; }

/* ---------- collection ---------- */
.coll-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.coll-filters input, .coll-filters select { background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 9px; }
.coll-filters .ownedonly { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; justify-items: center; }

/* card badges / states (cards themselves styled in style.css) */
.card.locked { filter: grayscale(1) brightness(.4); }
.count-badge { position: absolute; z-index: 4; top: 50%; right: 3px; transform: translateY(-50%); background: #111; color: var(--gold); border: 1px solid var(--gold); border-radius: 10px; padding: 1px 7px; font-weight: 800; font-size: 12px; }
.new-badge { position: absolute; z-index: 4; top: 22px; right: 4px; background: #cf5a2a; color: #fff; border-radius: 4px; padding: 1px 6px; font-weight: 800; font-size: 10px; letter-spacing: 1px; }

/* mythic rarity */
.card.rarity-mythic { border-color: var(--r-mythic); box-shadow: 0 0 22px var(--r-mythic); }
/* deity rarity — above mythic, prismatic */
.card.rarity-deity { border-color: var(--r-deity); box-shadow: 0 0 28px var(--r-deity), 0 0 14px var(--r-deity); }
.tok.rarity-deity { border-color: var(--r-deity); box-shadow: 0 0 16px var(--r-deity); }
.rarity-tag-deity { border-left-color: var(--r-deity); }
.rar-deity { color: var(--r-deity); font-weight: 700; }
.reveal-slot.rarity-deity .flip-back { border-color: var(--r-deity); box-shadow: 0 0 24px var(--r-deity), 0 0 42px rgba(200,107,255,.6); }
.reveal-banner.deity { background: linear-gradient(90deg,#ff6b6b,#ffd93d,#6bff9e,#4d9bff,#c86bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 18px rgba(255,217,110,.5); }
.pack-odds .po-deity { color: var(--r-deity); font-weight: 700; }

/* ---------- salvage ---------- */
.salvage-rows { display: flex; flex-direction: column; gap: 10px; }
.salvage-row { display: flex; align-items: center; gap: 14px; background: #15121a; border: 1px solid #2e2733; border-left-width: 4px; border-radius: 8px; padding: 12px 16px; flex-wrap: wrap; }
.salvage-row .sname { font-weight: 700; min-width: 90px; }
.salvage-row .sdupes { flex: 1; min-width: 80px; color: var(--muted); }
.salvage-row .buy { flex: 0 0 auto; white-space: nowrap; }
.rarity-tag-common { border-left-color: #6b6b6b; }
.rarity-tag-rare { border-left-color: #3f7fb0; }
.rarity-tag-super { border-left-color: #8a4fb0; }
.rarity-tag-ultra { border-left-color: #c8a45a; }
.rarity-tag-legend { border-left-color: #cf5a2a; }
.rarity-tag-mythic { border-left-color: var(--r-mythic); }

/* ---------- overlays (pack reveal / game over) ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); }
.reveal-box { background: rgba(14,11,16,0.96); border: 1px solid #2e2733; border-radius: 14px; padding: 26px; text-align: center; max-width: 92vw; box-shadow: 0 0 80px rgba(207,90,42,0.3); }
.reveal-box h2 { color: var(--gold); font-family: Georgia, serif; letter-spacing: 2px; margin: 0 0 18px; }
.reveal-box h2.win { color: var(--gold); text-shadow: 0 0 18px var(--gold); }
.reveal-box h2.lose { color: #b03442; }
.reveal-cards { display: grid; grid-template-columns: repeat(4, 120px); gap: 12px; justify-content: center; margin-bottom: 20px; }
@media (max-width: 560px) { .reveal-cards { grid-template-columns: repeat(2, 120px); } }
.reveal-slot { animation: pop .45s cubic-bezier(.2,.9,.3,1.3) backwards; }
@keyframes pop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.go-rewards { margin: 6px 0 18px; color: var(--ink); font-size: 16px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.go-rewards .rw { background: #1a1620; border: 1px solid #3a3340; padding: 5px 12px; border-radius: 16px; font-weight: 700; }
.go-rewards .rw.muted { color: var(--muted); font-weight: normal; }
.go-rewards .lvlup { color: var(--gold); }

/* ---------- game status ---------- */
.game-status { text-align: center; color: var(--gold); min-height: 22px; letter-spacing: 1px; }

/* ---------- quests ---------- */
.navbtn.badge { position: relative; }
.navbtn.badge::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #cf5a2a; box-shadow: 0 0 6px #cf5a2a; }
.count-badge.inline { position: static; display: inline-block; vertical-align: middle; transform: none; top: auto; right: auto; }

.day-cycle { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.day { flex: 1; min-width: 92px; background: #14111a; border: 1px solid #2e2733; border-radius: 8px; padding: 10px; text-align: center; }
.day .dnum { display: block; color: var(--muted); font-size: 12px; }
.day .drw { display: block; color: var(--ink); font-weight: 700; font-size: 13px; margin-top: 4px; }
.day.next { border-color: var(--gold); box-shadow: 0 0 14px rgba(200,164,90,0.35); }
.day.past { opacity: 0.45; }

.quest-list { display: flex; flex-direction: column; gap: 10px; }
.quest { display: flex; align-items: center; gap: 14px; background: #14111a; border: 1px solid #2e2733; border-radius: 8px; padding: 12px 16px; }
.q-main { flex: 1; }
.q-bar { margin-top: 8px; height: 7px; background: #0c0a0e; border-radius: 4px; overflow: hidden; }
.q-bar div { height: 100%; background: linear-gradient(90deg, #8e1c20, #cf5a2a); }
.q-reward { color: #d8b048; font-weight: 700; min-width: 130px; text-align: right; font-size: 13px; }
.q-action { min-width: 110px; text-align: right; }
.q-prog { color: var(--muted); }
.q-claimed { color: #6fc97a; font-weight: 700; }

/* ---------- story / tutorial ---------- */
.story-box { background: rgba(12,10,14,0.97); border: 1px solid #3a2f33; border-radius: 14px; padding: 30px 34px; width: 560px; max-width: 92vw; box-shadow: 0 0 80px rgba(142,28,32,0.35); }
.story-box .title { font-size: 30px; margin: 0 0 14px; text-align: center; }
.story-text { color: var(--ink); line-height: 1.6; min-height: 150px; }
.story-text p { margin: 0 0 12px; }
.story-text b { color: var(--gold); }
.story-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
#story-dots { display: flex; gap: 7px; }
#story-dots .dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3340; }
#story-dots .dot.on { background: var(--gold); }

/* ---------- team builder ---------- */
.team-slots { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.slot { width: 120px; height: 168px; border-radius: 10px; position: relative; }
.slot.empty { border: 2px dashed #3a3340; display: flex; align-items: center; justify-content: center; color: #4a4350; font-size: 40px; }
.slot.filled { cursor: pointer; }
.slot .slot-x { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; color: #b03442; font-size: 11px; }
.pool-card { cursor: pointer; border-radius: 12px; transition: transform .1s; }
.pool-card:hover { transform: translateY(-4px); }
.pool-card.in-team { outline: 3px solid var(--gold); outline-offset: -2px; border-radius: 12px; box-shadow: 0 0 16px var(--gold); }

/* ---------- battle ---------- */
.battle-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.bteam { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bteam-name { color: var(--gold); letter-spacing: 2px; font-weight: 700; }
.bteam-cards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.battle-mid { text-align: center; }
#battle-status { color: var(--ink); letter-spacing: 3px; font-family: Georgia, serif; font-size: 18px; }

.tok { width: 92px; height: 124px; border-radius: 9px; position: relative; overflow: visible; background: #14111a; border: none; box-shadow: 0 3px 10px rgba(0,0,0,.6); transition: transform .12s, opacity .3s; }
.tok .card-frame { background-size: 108% 108%; background-position: center; }
.tok .card-art, .tok .card-frame, .tok .card-art-fallback { border-radius: 7px; }
.tok.rarity-rare { border-color: #3f7fb0; } .tok.rarity-super { border-color: #8a4fb0; }
.tok.rarity-ultra { border-color: #c8a45a; } .tok.rarity-legend { border-color: #cf5a2a; }
.tok.rarity-mythic { border-color: var(--r-mythic); box-shadow: 0 0 14px var(--r-mythic); }
.tok.dead { opacity: 0.25; filter: grayscale(1); transform: scale(.9); }
.tok.hit { animation: shake .25s; }
.tok.lunge-up { transform: translateY(-14px) scale(1.05); z-index: 5; }
.tok.lunge-down { transform: translateY(14px) scale(1.05); z-index: 5; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.tok-name { position: absolute; z-index: 3; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fff; text-shadow: 0 1px 2px #000; padding: 0 2px; }
.tok-atk { position: absolute; z-index: 3; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle,#d8b048,#7a5b14); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; border: 1px solid rgba(0,0,0,.5); }
.tok-guard { position: absolute; z-index: 3; top: 3px; right: 3px; font-size: 14px; }
.tok-kw { position: absolute; z-index: 3; top: 24px; right: 3px; font-size: 11px; }
.tok-hpbar { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; height: 14px; background: #0c0a0e; border-top: 1px solid #000; }
.tok-hpfill { height: 100%; width: 100%; background: #6fc97a; transition: width .25s; }
.tok-hp { position: absolute; inset: 0; text-align: center; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; line-height: 14px; }
.dmg { position: absolute; z-index: 6; top: 30%; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 18px; color: #ff6a6a; text-shadow: 0 1px 3px #000; animation: dfloat .9s ease-out forwards; pointer-events: none; }
.dmg.crit { color: #ffd24a; font-size: 22px; }
.dmg.heal { color: #6fc97a; }
@keyframes dfloat { from { opacity: 1; top: 40%; } to { opacity: 0; top: 5%; } }
.battle-log { max-width: 600px; margin: 0 auto; color: var(--muted); font-size: 12px; text-align: center; min-height: 40px; }
.battle-log div { opacity: .8; }

/* ---------- level / evo badges on cards ---------- */
.lvl-badge { position: absolute; z-index: 4; bottom: 30px; left: 4px; background: #111; color: var(--gold); border: 1px solid var(--gold); border-radius: 8px; padding: 0 6px; font-size: 10px; font-weight: 800; }
.evo-badge { position: absolute; z-index: 4; top: 4px; right: 4px; left: auto; color: #ffd24a; font-size: 12px; text-shadow: 0 1px 2px #000; }

/* ---------- upgrade view ---------- */
.upg-detail { display: flex; gap: 18px; align-items: center; min-height: 40px; margin-bottom: 10px; flex-wrap: wrap; }
.upg-card .card { width: 120px; height: 168px; }
.upg-info h3 { margin: 0 0 8px; color: var(--gold); }
.upg-info .stars { color: #ffd24a; }
.upg-stats { font-size: 16px; margin-bottom: 6px; }
.upg-lvl { margin-bottom: 6px; }
.upg-lvl .maxed { color: #6fc97a; font-weight: 800; margin-left: 6px; }
.upg-info .q-bar { width: 260px; max-width: 70vw; height: 8px; background: #0c0a0e; border-radius: 4px; overflow: hidden; margin: 4px 0; }
.upg-info .q-bar div { height: 100%; background: linear-gradient(90deg, #8e1c20, #c8a45a); }
.upg-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.upg-actions .upg-fodder { color: var(--ink); }
.upg-actions .gain { color: #6fc97a; font-weight: 700; }
.pool-card.target { outline: 3px solid var(--gold); outline-offset: -2px; box-shadow: 0 0 16px var(--gold); border-radius: 12px; }
.pool-card.fodder { outline: 4px solid var(--blood); outline-offset: -2px; box-shadow: inset 0 0 0 12px var(--blood), 0 0 18px var(--blood); border-radius: 12px; }

/* ---------- shop x10 ---------- */
.pack-buy.x5row, .pack-buy.x10row { margin-top: 6px; }
.buy.x5, .buy.x10 { font-size: 12px; padding: 6px 8px; opacity: .92; }
.buy .save { font-size: 10px; font-weight: 700; color: #8be29a; margin-left: 4px; }

/* large pulls scroll */
.reveal-cards { max-height: 70vh; overflow: auto; }

/* ---------- affinity icon image + DEF badge on cards ---------- */
.card-aff { overflow: hidden; }
.card-aff img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-def {
  position: absolute; z-index: 3; bottom: 4px; left: 50%; transform: translateX(-50%);
  min-width: 22px; height: 20px; padding: 0 4px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
  color: #fff; text-shadow: 0 1px 2px #000; background: radial-gradient(circle, #5a7fa8, #233a55); border: 1px solid rgba(0,0,0,.5);
}
.tok-def {
  position: absolute; z-index: 3; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 3px;
  border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px;
  color: #fff; text-shadow: 0 1px 2px #000; background: radial-gradient(circle, #5a7fa8, #233a55); border: 1px solid rgba(0,0,0,.5);
}

/* ability + true-damage popups */
.dmg.ability { color: #ffd24a; font-size: 15px; top: 20%; }
.dmg.true { color: #c98af0; }

/* ---------- card zoom / detail modal ---------- */
.cell { cursor: pointer; }
.card-modal-box { display: flex; gap: 26px; align-items: center; background: rgba(12,10,14,0.97); border: 1px solid #2e2733; border-radius: 14px; padding: 26px; max-width: 92vw; box-shadow: 0 0 80px rgba(0,0,0,.8); flex-wrap: wrap; justify-content: center; }
.big-card .card.bigcard { width: 264px; height: 370px; }
.bigcard .card-name { font-size: 16px; bottom: 48px; }
.bigcard .card-atk, .bigcard .card-def, .bigcard .card-hp { width: 36px; height: 36px; font-size: 18px; }
.bigcard .card-aff { width: 34px; height: 34px; top: 8px; right: 8px; }
.bigcard .evo-badge { font-size: 20px; top: 8px; left: 10px; }
.card-modal-info { max-width: 320px; }
.card-modal-info h2 { margin: 0 0 6px; color: var(--gold); }
.card-modal-info .stars { color: #ffd24a; }
.cm-tags { color: var(--muted); margin-bottom: 6px; }
.cm-matchup { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.cm-matchup b { color: var(--ink); }
.cm-stats { display: flex; gap: 16px; font-size: 17px; margin-bottom: 8px; }
.cm-stats b { color: var(--ink); }
.cm-lvl { color: var(--gold); margin-bottom: 8px; }
.cm-text { color: var(--ink); font-style: italic; opacity: .85; margin-bottom: 10px; }
.cm-owned { color: var(--muted); margin-bottom: 14px; }
.cm-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- team power ---------- */
.team-power { text-align: center; color: var(--gold); font-size: 18px; margin: 4px 0 14px; }
.team-power b { font-size: 22px; }

/* ---------- hub ---------- */
.hub-logo { display: block; width: 70%; max-width: 460px; margin: 6px auto 2px; filter: drop-shadow(0 6px 26px rgba(142,28,32,.55)); }
.hub-hero { padding: 14px 0 10px; }
.hub-cards { max-width: 880px; margin: 18px auto 0; }
.hub-card { background: linear-gradient(160deg, #1b1620, #100c14); border: 1px solid #2e2733; border-radius: 12px; transition: transform .12s, border-color .15s, box-shadow .15s; }
.hub-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 18px rgba(200,164,90,.15); }
.hub-card-wide { flex-basis: 100%; border-color: var(--gold); background: linear-gradient(160deg, #241019, #140a10); }
.hub-card-wide h3 { color: var(--r-legend); }

/* ---------- campaign / saga ---------- */
.camp-next { margin: 8px 0 10px; }
.cn-card { background: #15121a; border: 1px solid #2e2733; border-left: 4px solid var(--gold); border-radius: 10px; padding: 18px 22px; }
.cn-card.act { border-left-color: var(--r-legend); box-shadow: 0 0 18px rgba(207,90,42,.25); }
.cn-num { color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.cn-card h3 { margin: 4px 0; color: var(--gold); }
.cn-opp { color: var(--ink); margin-bottom: 4px; }
.cn-reward { color: #d8b048; font-size: 13px; margin-bottom: 12px; }
.camp-road { color: var(--muted); margin: 18px 0 8px; }
.camp-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; }
.camp-row { display: flex; align-items: center; gap: 12px; background: #14111a; border: 1px solid #2a242f; border-radius: 6px; padding: 8px 12px; }
.camp-row.done { opacity: .65; } .camp-row.locked { opacity: .4; } .camp-row.act { border-color: var(--r-legend); }
.cr-n { color: var(--muted); min-width: 46px; } .cr-t { flex: 1; } .cr-s { color: var(--gold); }

/* ---------- story dialogue scene ---------- */
.sd-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #0a0a0d; }
.sd-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.88)); }
.sd-inner { position: relative; z-index: 1; width: 100%; max-width: 820px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 100vh; padding: 20px; }
.sd-char { max-height: 50vh; max-width: 80vw; object-fit: contain; filter: drop-shadow(0 8px 24px #000); margin-bottom: -8px; }
.sd-box { width: 100%; background: rgba(10,8,12,0.93); border: 1px solid #3a2f33; border-radius: 12px; padding: 20px 24px; box-shadow: 0 0 40px rgba(0,0,0,.7); }
.sd-name { color: var(--gold); font-family: Georgia, serif; letter-spacing: 2px; font-size: 18px; margin-bottom: 8px; }
.sd-text { color: var(--ink); line-height: 1.65; font-size: 16px; min-height: 60px; }
.sd-box .big { margin-top: 14px; }

/* ---------- profile ---------- */
.profile-top { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.pf-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; position: relative; background: #14111a; flex: 0 0 auto; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-meta h2 { margin: 0 0 6px; color: var(--gold); }
.pf-level { margin-bottom: 6px; }
.pf-xpbar { width: 220px; max-width: 60vw; height: 8px; background: #0c0a0e; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.pf-xpbar div { height: 100%; background: linear-gradient(90deg, #8e1c20, #c8a45a); }
.pf-borders { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 8px; }
.pf-border-opt { background: #15121a; border: 1px solid #2e2733; border-radius: 10px; padding: 12px; text-align: center; cursor: pointer; }
.pf-border-opt.active { border-color: var(--gold); }
.pf-border-opt.locked { opacity: .5; cursor: default; }
.pf-swatch { width: 46px; height: 46px; border-radius: 50%; margin: 4px auto 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: #14111a; }
.pf-bname { font-weight: 700; font-size: 13px; } .pf-breq { font-size: 11px; }

/* avatar / swatch border styles (unlockable) */
.pfb-iron { box-shadow: 0 0 0 4px #4a4a4a; }
.pfb-founder { box-shadow: 0 0 0 4px #2e8f9e, 0 0 14px #2e8f9e; }
.pfb-bronze { box-shadow: 0 0 0 4px #8a5a2b; }
.pfb-silver { box-shadow: 0 0 0 4px #b9c2cc, 0 0 10px #b9c2cc88; }
.pfb-gold { box-shadow: 0 0 0 4px #c8a45a, 0 0 14px #c8a45a; }
.pfb-crimson { box-shadow: 0 0 0 4px #8e1c20, 0 0 16px #8e1c20; }
.pfb-ember { box-shadow: 0 0 0 4px #cf5a2a, 0 0 18px #cf5a2a; }
.pfb-oathbound { box-shadow: 0 0 0 4px #6fb6c9, 0 0 14px #6fb6c9; }
.pfb-knightfall { box-shadow: 0 0 0 4px #2a242f, 0 0 18px #000, inset 0 0 0 2px #555; }
.pfb-truthseeker { box-shadow: 0 0 0 4px #9b8fb0, 0 0 16px #9b8fb0; }
.pfb-hollowcrown { box-shadow: 0 0 0 5px #ffd24a, 0 0 26px #cf5a2a; }
.pfb-questmaster { box-shadow: 0 0 0 4px #6fc97a, 0 0 14px #6fc97a; }

/* ---------- card picker ---------- */
#picker .reveal-box { max-width: 780px; }
#picker-search { width: 100%; max-width: 400px; margin: 0 auto 12px; display: block; padding: 10px; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; }

/* ---------- animated pack opening (3D flip) ---------- */
.reveal-slot { width: 120px; height: 168px; perspective: 700px; animation: none; }
.reveal-slot .flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.3,1.25); transform: rotateY(180deg); }
.reveal-slot.flipped .flip { transform: rotateY(0deg); }
.flip-back, .flip-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; }
.flip-back { transform: rotateY(180deg); background: #1a1420 url('art/card-back.png?v=2') center/cover; border: 2px solid #3a3340; display: flex; align-items: center; justify-content: center; }
.flip-back::after { content: "✦"; color: #5a4a3a; font-size: 40px; }
.reveal-slot.rarity-ultra .flip-back { border-color: var(--r-ultra); box-shadow: 0 0 14px var(--r-ultra); }
.reveal-slot.rarity-legend .flip-back { border-color: var(--r-legend); box-shadow: 0 0 16px var(--r-legend); }
.reveal-slot.rarity-mythic .flip-back { border-color: var(--r-mythic); box-shadow: 0 0 20px var(--r-mythic); }
.reveal-banner { text-align: center; font-family: Georgia, serif; letter-spacing: 5px; font-size: 26px; margin-bottom: 14px; animation: pop .5s backwards; }
.reveal-banner.legend { color: var(--r-legend); text-shadow: 0 0 18px var(--r-legend); }
.reveal-banner.mythic { color: var(--r-mythic); text-shadow: 0 0 22px var(--r-mythic); }

/* ---------- affinity = generated symbol IMAGE, top-right ---------- */
.card-aff {
  top: 1px; right: 1px; left: auto; width: 26px; height: 26px;
  background: rgba(8,6,10,0.62); border-radius: 50%;
  box-shadow: 0 1px 3px #000, inset 0 0 0 1px rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; overflow: visible;
}
.card-aff .aff-img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 1px 1px #000); }
.bigcard .card-aff { width: 46px; height: 46px; top: 2px; right: 2px; }
.tok .card-aff { top: 0; left: 50%; right: auto; transform: translateX(-50%); width: 20px; height: 20px; }

/* ---------- role/type = circle, top-left ---------- */
.role-badge {
  position: absolute; z-index: 4; top: 1px; left: 1px; right: auto; transform: none;
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: rgba(0,0,0,0.6); border: 1.5px solid rgba(255,255,255,0.3); box-shadow: 0 1px 3px #000;
  filter: none;
}
.role-badge.role-guardian { border-color: #5a86b8; }
.role-badge.role-mender   { border-color: #6fc97a; }
.role-badge.role-hexer    { border-color: #c98af0; }
.role-badge.role-bruiser  { border-color: #cf5a2a; }
.role-badge.role-mage     { border-color: #3aa8e8; }
.bigcard .role-badge { width: 34px; height: 34px; font-size: 17px; }

/* ---------- ranked ladder ---------- */
.rk-top { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.rk-badge { width: 96px; height: 96px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: #cdb27a; flex: 0 0 auto; background: #15121a; box-shadow: inset 0 0 0 3px #4a4a4a; }
.rkt-husk { box-shadow: inset 0 0 0 3px #6b6b6b; }
.rkt-gravebound { box-shadow: inset 0 0 0 3px #6e7b52, 0 0 14px #6e7b5288; }
.rkt-revenant { box-shadow: inset 0 0 0 3px #3f7fb0, 0 0 14px #3f7fb088; }
.rkt-wraithknight { box-shadow: inset 0 0 0 3px #6fb6c9, 0 0 16px #6fb6c988; }
.rkt-bloodsworn { box-shadow: inset 0 0 0 3px #8e1c20, 0 0 16px #8e1c20; }
.rkt-deathless { box-shadow: inset 0 0 0 3px #8a4fb0, 0 0 18px #8a4fb0; }
.rkt-hollowlord { box-shadow: inset 0 0 0 4px #ffd24a, 0 0 26px #cf5a2a; color: #ffd24a; }
.rk-meta h2 { margin: 0 0 6px; color: var(--gold); }
.rk-lp { font-size: 16px; margin-bottom: 6px; }
.rk-bar { width: 280px; max-width: 70vw; height: 8px; background: #0c0a0e; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.rk-bar div { height: 100%; background: linear-gradient(90deg, #8e1c20, #c8a45a); }
.rk-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.rk-board { display: flex; flex-direction: column; gap: 3px; }
.rk-row { display: flex; align-items: center; gap: 12px; background: #14111a; border: 1px solid #2a242f; border-radius: 6px; padding: 8px 12px; }
.rk-row.me { border-color: var(--gold); background: #1a1510; }
.rk-rank { min-width: 36px; color: var(--gold); font-weight: 700; } .rk-name { flex: 1; } .rk-tier-s { min-width: 92px; } .rk-lp-s { color: #d8b048; font-weight: 700; }

/* ---------- VS splash ---------- */
.vs-splash { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,.85)); opacity: 0; transition: opacity .2s; }
.vs-splash.show { opacity: 1; }
.vs-big { font-family: Georgia, serif; font-size: 44px; letter-spacing: 6px; color: var(--ink); text-shadow: 0 0 22px var(--blood); animation: vspop .5s; text-align: center; }
.vs-sub { font-size: 22px; color: var(--gold); margin-top: 8px; }
@keyframes vspop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- compact picker grid (avatar / highlights) ---------- */
#picker-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; max-height: 58vh; overflow: auto; }
#picker-grid .cell .card { width: 72px; height: 100px; }
#picker-grid .card-name, #picker-grid .card-kw, #picker-grid .card-atk, #picker-grid .card-def, #picker-grid .card-hp, #picker-grid .count-badge, #picker-grid .lvl-badge, #picker-grid .evo-badge, #picker-grid .card-stars { display: none; }

/* evolution stars shown above the card name (all owned cards) */
.card-stars { position: absolute; z-index: 4; left: 24px; right: 22px; top: 2px; text-align: center; color: #ffd24a; font-size: 11px; letter-spacing: 1px; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.85); pointer-events: none; white-space: nowrap; overflow: hidden; }
.bigcard .card-stars { left: 30px; right: 28px; top: 4px; font-size: 15px; }
.evo-cost { font-size: 11px; opacity: .85; }
.upg-more { grid-column: 1 / -1; width: 100%; text-align: center; color: var(--muted); padding: 12px; font-size: 13px; }

/* ---------- MOBILE ---------- */
@media (max-width: 640px) {
  #topbar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  #topbar nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  #topbar .navbtn { padding: 6px 9px; font-size: 13px; white-space: nowrap; }
  #topbar .brand { font-size: 14px; } #topbar .who { display: none; }
  .view { padding: 12px 8px 56px; }
  .title { font-size: 30px; letter-spacing: 3px; }
  .card { width: 92px; height: 130px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
  .card-grid .card { width: 82px; height: 116px; }
  .card-atk, .card-hp, .card-cost { min-width: 20px; height: 20px; font-size: 11px; padding: 0 3px; }
  .bteam-cards { gap: 5px; }
  .tok { width: 62px; height: 86px; }
  .tok-name { font-size: 7px; bottom: 13px; }
  .tok-atk, .tok-def { width: 16px; height: 16px; font-size: 10px; }
  #battle-status { font-size: 15px; }
  .reveal-cards { grid-template-columns: repeat(3, 84px); }
  .reveal-slot { width: 84px; height: 118px; }
  .card-modal-box { flex-direction: column; gap: 12px; padding: 16px; }
  .big-card .card.bigcard { width: 200px; height: 280px; }
  .sd-char { max-height: 36vh; }
  .vs-big { font-size: 28px; letter-spacing: 3px; } .vs-sub { font-size: 16px; }
  .pf-borders { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .reveal-box, .card-modal-box { max-width: 94vw; }
  .play-card { width: 100%; }
  .hub-card { min-width: 0; flex: 1 1 42%; }
  .pf-avatar { width: 92px; height: 92px; }
  .panel { padding: 14px; }
}

/* =====================================================================
   BATTLE TOKEN REWORK — bigger tokens, role TL, affinity TR,
   DEF bottom-left, ATK(dmg) bottom-right, name above the HP bar.
   ===================================================================== */
.tok { width: 168px; height: 234px; border-radius: 12px; }
.bteam-cards { gap: 18px; }
.bteam-name { font-size: 20px; letter-spacing: 2px; }
#battle-status { font-size: 22px; }
.tok-stars { position: absolute; z-index: 3; left: 0; right: 0; bottom: 58px; text-align: center; color: #ffd24a; font-size: 13px; letter-spacing: 1px; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.85); pointer-events: none; }
.tok-lvl { position: absolute; z-index: 4; top: 38px; left: 4px; background: #111; color: var(--gold); border: 1px solid var(--gold); border-radius: 8px; padding: 0 5px; font-size: 10px; font-weight: 800; }
/* punchier combat animations */
.tok.lunge-up { transform: translateY(-24px) scale(1.14); z-index: 6; filter: drop-shadow(0 0 14px var(--gold)); }
.tok.lunge-down { transform: translateY(24px) scale(1.14); z-index: 6; filter: drop-shadow(0 0 14px var(--gold)); }
@keyframes hitflash { 0% { box-shadow: 0 0 0 0 rgba(255,80,80,0); } 30% { box-shadow: 0 0 26px 8px rgba(255,80,80,.9); } 100% { box-shadow: 0 0 0 0 rgba(255,80,80,0); } }
.tok.hit { animation: shake .25s, hitflash .4s; }
@keyframes tokdie { 0% { opacity: 1; transform: none; } 100% { opacity: .22; transform: scale(.82) rotate(-7deg); filter: grayscale(1); } }
.tok.dead { animation: tokdie .45s forwards; }

/* ===================== COMBAT FX ===================== */
.tok { overflow: visible; }
.fx { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 9; }
/* spell circles (heal / hex / lifesteal drain) — dashed rotating rune ring */
.fx-circle { width: 130%; height: 130%; border-radius: 50%; border: 3px dashed currentColor; box-shadow: 0 0 22px currentColor, inset 0 0 18px currentColor; animation: fxspin .95s ease-out forwards; }
.fx-circle::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px solid currentColor; opacity: .6; }
.fx-circle.heal { color: #6fc97a; } .fx-circle.hex { color: #c98af0; } .fx-circle.drain { color: #d8455c; }
@keyframes fxspin { 0% { transform: translate(-50%,-50%) rotate(0) scale(.35); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%,-50%) rotate(240deg) scale(1.15); opacity: 0; } }
/* impact burst, coloured by the attacker's affinity */
.fx-burst { width: 85%; height: 85%; border-radius: 50%; animation: fxburst .5s ease-out forwards; }
.fx-burst.big { width: 130%; height: 130%; }
.fx-burst.aff-SPIRIT { background: radial-gradient(circle, var(--aff-spirit), transparent 68%); }
.fx-burst.aff-FLESH { background: radial-gradient(circle, var(--aff-flesh), transparent 68%); }
.fx-burst.aff-BLOOD { background: radial-gradient(circle, var(--aff-blood), transparent 68%); }
.fx-burst.aff-VOID { background: radial-gradient(circle, var(--aff-void), transparent 68%); }
@keyframes fxburst { 0% { transform: translate(-50%,-50%) scale(.2); opacity: .95; } 100% { transform: translate(-50%,-50%) scale(1.5); opacity: 0; } }
/* ability cast aura on the caster */
.fx-cast { width: 140%; height: 140%; border-radius: 50%; animation: fxcast .6s ease-out forwards; }
.fx-cast.aff-SPIRIT { box-shadow: 0 0 34px 10px var(--aff-spirit); }
.fx-cast.aff-FLESH { box-shadow: 0 0 34px 10px var(--aff-flesh); }
.fx-cast.aff-BLOOD { box-shadow: 0 0 34px 10px var(--aff-blood); }
.fx-cast.aff-VOID { box-shadow: 0 0 34px 10px var(--aff-void); }
@keyframes fxcast { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55); } 45% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.25); } }
/* death flash */
.fx-death { width: 110%; height: 110%; border-radius: 50%; background: radial-gradient(circle, rgba(255,235,200,.85), transparent 62%); animation: fxdeath .55s ease-out forwards; }
@keyframes fxdeath { 0% { opacity: .85; transform: translate(-50%,-50%) scale(.8); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.7); } }
/* synergy aura sweep across a team */
.tok.aura { animation: tokaura .9s ease-out; }
@keyframes tokaura { 0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,.6); } 45% { box-shadow: 0 0 28px 7px var(--gold); } }
/* miss / block outcomes */
.dmg.miss { color: #cfcfcf; font-style: italic; font-size: 18px; }
.dmg.block { color: #6fb6c9; font-weight: 900; }
.tok.dodge { animation: dodge .3s ease-out; }
@keyframes dodge { 0% { transform: none; } 40% { transform: translateX(14px) rotate(6deg); opacity: .7; } 100% { transform: none; } }
.fx-shield { width: 120%; height: 120%; border-radius: 50%; border: 4px solid #6fb6c9; box-shadow: 0 0 26px #6fb6c9, inset 0 0 18px #6fb6c9; animation: fxshield .5s ease-out forwards; }
@keyframes fxshield { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); } }
.dmg { font-size: 24px; } .dmg.crit { font-size: 30px; }
#skip-btn { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: 18px; background: rgba(14,11,16,0.92); color: var(--gold); border: 1px solid var(--gold); border-radius: 10px; padding: 11px 26px; font-weight: 800; letter-spacing: 1px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.6); }
#skip-btn:hover { filter: brightness(1.15); }
#skip-btn.hidden { display: none; }
/* iOS Safari: its bottom toolbar hides bottom-fixed UI — lift the skip button to
   the top, and move the campaign story dialog (text + Next) to the top of the
   screen. iPhone/iPad only (.ios); all other phones keep the bottom layout. */
.ios #skip-btn { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 10px); }
.ios .sd-inner { justify-content: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
.ios .sd-char { max-height: 30vh; }
.ios .reveal-box { margin-bottom: env(safe-area-inset-bottom, 0px); }
.pf-rank { margin: 5px 0; font-size: 14px; }
.pf-rankbadge { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 6px; background: #15121a; color: #cdb27a; font-size: 12px; vertical-align: middle; }
.team-mode-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.tm-btn { background: #1a1620; border: 1px solid #2e2733; color: var(--muted); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 700; }
.tm-btn.active { background: #2c1b1d; color: var(--gold); border-color: var(--gold); }
.tok .card-aff { top: 1px; right: 1px; left: auto; transform: none; width: 30px; height: 30px; background: rgba(8,6,10,0.62); border-radius: 50%; box-shadow: 0 1px 3px #000, inset 0 0 0 1px rgba(255,255,255,0.18); }
.tok-role { top: 1px; left: 1px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; background: rgba(0,0,0,0.6); border: 1.5px solid rgba(255,255,255,0.3); box-shadow: 0 1px 3px #000; }
.tok-guard { top: 5px; left: 50%; right: auto; transform: translateX(-50%); font-size: 17px; }
.tok-kw { top: 38px; right: 6px; font-size: 14px; }
.tok-name { bottom: 40px; left: 0; right: 0; font-size: 12px; font-weight: 700; line-height: 1.15; padding: 2px 4px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(8,6,10,0.78)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tok-hpbar { height: 18px; }
.tok-hp { font-size: 12px; line-height: 18px; }
.tok-atk { top: auto; left: auto; bottom: 21px; right: 2px; width: 30px; height: 30px; font-size: 15px; }
.tok-def { top: auto; right: auto; bottom: 21px; left: 2px; width: 30px; height: 30px; min-width: 30px; font-size: 15px; }
.lvl-badge { bottom: auto; top: 38px; left: 5px; }
.evo-badge { top: 5px; right: 38px; left: auto; }

/* =====================================================================
   PERSISTENT CHAT / FRIENDS / GUILDS SIDEBAR (+ mobile slide toggle)
   ===================================================================== */
#sidebar.hidden { display: none; }
#sb-toggle { position: fixed; right: 14px; bottom: 16px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, #8e1c20, #5a1014); color: #fff; border: 1px solid var(--gold); font-size: 22px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.6); }
#sb-toggle:hover { filter: brightness(1.12); }
.sb-badge { position: absolute; top: -4px; right: -4px; background: var(--gold); color: #1a1206; border-radius: 10px; font-size: 11px; font-weight: 800; padding: 0 5px; }
.sb-badge.hidden { display: none; }
.sb-inner { position: fixed; top: 0; right: 0; height: 100%; width: 330px; max-width: 88vw; background: linear-gradient(180deg, #15121a, #0d0b10); border-left: 1px solid #2e2733; box-shadow: -6px 0 24px rgba(0,0,0,.5); display: flex; flex-direction: column; padding-top: 58px; transition: transform .25s ease; z-index: 55; }
#sidebar.collapsed .sb-inner { transform: translateX(100%); }
.sb-channels { display: flex; gap: 4px; padding: 8px; overflow-x: auto; border-bottom: 1px solid #2a242f; flex: 0 0 auto; }
.sb-chan { background: #1a1620; border: 1px solid #2e2733; color: var(--muted); padding: 7px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 700; position: relative; }
.sb-chan.active { background: #2c1b1d; color: var(--gold); border-color: var(--gold); }
.sb-new { font-size: 16px; }
.sb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #6fc97a; margin-left: 4px; box-shadow: 0 0 6px #6fc97a; }
.sb-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sb-head { padding: 8px 12px; color: var(--gold); font-weight: 700; border-bottom: 1px solid #2a242f; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sb-invite { background: #0c0a0e; color: var(--ink); border: 1px solid #3a3340; border-radius: 6px; padding: 4px; font-size: 12px; }
.sb-log { flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.sb-input { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #2a242f; }
.sb-input input { flex: 1; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 9px; }
.sb-input button { background: var(--blood); color: #fff; border: none; border-radius: 6px; padding: 0 14px; cursor: pointer; }
.sb-roster { padding: 10px; overflow: auto; }
.sb-rlist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fr-reqs { color: var(--gold); margin: 6px 0 2px; font-size: 13px; }
.mini.ghost { background: #241c24; }
/* chat message header: portrait · name · level (clickable -> profile) */
.cmsg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.cmsg-head.clickable { cursor: pointer; }
.cmsg-head.clickable:hover .cmsg-name { text-decoration: underline; }
.cmsg-av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #0c0a0e; border: 1px solid #2e2733; }
.cmsg-av img { width: 100%; height: 100%; object-fit: cover; }
.cmsg-name { font-size: 13px; color: var(--gold); }
.cmsg-lvl { margin-left: auto; font-size: 11px; color: var(--gold); opacity: .85; padding-left: 8px; }
.cmsg-body { font-size: 14px; word-break: break-word; }

/* story dialogue: highlight who's speaking */
#story-dialog .sd-name { color: #d8576f; font-weight: 800; letter-spacing: 1px; }
#story-dialog.you-speaking .sd-name { color: var(--gold); }
#story-dialog.you-speaking .sd-char { opacity: .35; filter: grayscale(.4); transition: opacity .2s; }

/* ===================== GAUNTLET (TACTICS) ===================== */
.tac-hud { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 15px; }
.tac-hud b { color: var(--gold); }
.tac-traits { display: flex; flex-wrap: wrap; gap: 8px; }
.tac-trait { background: #14111a; border: 1px solid #2e2733; border-radius: 14px; padding: 4px 11px; font-weight: 700; font-size: 13px; }
.tac-trait.t-affinity { color: #6fb6c9; border-color: #2e4a52; }
.tac-trait.t-role { color: var(--gold); border-color: #4a3f22; }
.tac-shop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tac-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #14111a; border: 1px solid #2a242f; border-radius: 10px; padding: 8px; }
.tac-slot.empty { opacity: .35; min-height: 120px; }
.tac-slot .card { width: 100%; max-width: 110px; height: auto; aspect-ratio: 5/7; }
.tac-slot .buy { width: 100%; }
.tac-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.tac-timer { font-weight: 800; min-width: 44px; text-align: center; padding: 6px 10px; border-radius: 6px; background: #241d1a; color: var(--gold); letter-spacing: 1px; }
.tac-goldbar { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: linear-gradient(90deg,#2a2210,#1a1408); border: 1px solid #4a3a18; color: #f0d78a; font-size: 14px; text-align: center; }
.tac-goldbar b { color: #ffdf80; }
.tac-timer.urgent { background: #4a1810; color: #ff9d7a; }
.tac-grid { display: flex; flex-wrap: wrap; gap: 10px; min-height: 40px; }
.tac-unit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tac-unit .card { width: 96px; height: 134px; }
.tac-ubtns { display: flex; gap: 4px; }
.tac-spare { position: absolute; top: 2px; right: 2px; z-index: 5; background: #111; color: var(--gold); border: 1px solid var(--gold); border-radius: 10px; font-size: 11px; font-weight: 800; padding: 0 6px; }

/* shop slot highlight when you already own the card (helps finish merges) */
.tac-slot.owned-hand { border-color: #6fb6c9; box-shadow: 0 0 12px rgba(111,182,201,.45); }
.tac-slot.owned-field { border-color: #e8c14a; box-shadow: 0 0 14px rgba(232,193,74,.55); background: #191408; }
.tac-owntag { align-self: stretch; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #0c0a0e; background: linear-gradient(90deg, #e8c14a, #f0d688); border-radius: 6px; padding: 1px 0; margin-bottom: 2px; }
.tac-slot.owned-hand .tac-owntag { background: linear-gradient(90deg, #6fb6c9, #9fd6e4); }
.tac-copies { align-self: center; font-size: 11px; font-weight: 800; color: var(--gold); background: rgba(12,10,14,0.75); border: 1px solid #4a3f2a; border-radius: 10px; padding: 0 7px; margin-bottom: 2px; }

/* fusion progress — spelled out on every unit so upgrading is obvious */
.tac-merge { font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #cdb27a; background: #1c1710; border: 1px solid #4a3f2a; border-radius: 9px; padding: 1px 7px; }
.tac-merge.close { color: #ffe089; border-color: var(--gold); box-shadow: 0 0 8px rgba(232,193,74,.4); }
.tac-merge.max { color: #ffd970; border-color: #ffd970; }
.tac-unit.fusing .card { outline: 2px solid rgba(232,193,74,.7); outline-offset: -2px; border-radius: 10px; }
.tac-unit.fusing { filter: drop-shadow(0 0 6px rgba(232,193,74,.35)); }
.tac-over { text-align: center; }
.tac-standings { display: flex; flex-direction: column; gap: 4px; }
.tac-rival { display: flex; align-items: center; gap: 8px; background: #14111a; border: 1px solid #2a242f; border-radius: 6px; padding: 5px 10px; font-size: 13px; }
.tac-rival.you { border-color: var(--gold); background: #1a1510; }
.tac-rival.dead { opacity: .45; }
.tac-rname { flex: 0 0 38%; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac-rhp { flex: 1; height: 8px; background: #0c0a0e; border-radius: 4px; overflow: hidden; }
.tac-rhpfill { display: block; height: 100%; background: linear-gradient(90deg, #8e1c20, #6fc97a); transition: width .3s; }
.tac-rival.dead .tac-rhpfill { background: #444; }
.tac-rhpn { flex: 0 0 28px; text-align: right; color: var(--muted); }
@media (max-width: 640px) {
  .tac-shop { grid-template-columns: repeat(3, 1fr); }
  .tac-unit .card { width: 78px; height: 110px; }
  .tac-hud { gap: 10px; font-size: 13px; }
}

/* ===================== MOBILE OVERFLOW GUARD ===================== */
@media (max-width: 640px) {
  .view, .panel, section { max-width: 100%; }
  .panel { overflow-wrap: anywhere; }
  /* keep button labels on ONE line — shrink text/padding instead of wrapping */
  button, .buy, .big { white-space: nowrap; }
  button.big { font-size: 13px; padding: 10px 12px; letter-spacing: .5px; }
  .buy { font-size: 13px; }
  .buy.mini, .mini { font-size: 12px; padding: 6px 9px; }
  input, select, textarea { max-width: 100%; min-width: 0; }
  /* rows shrink their members to fit; only stack if they truly can't */
  .play-card .row { flex-wrap: wrap; gap: 8px; }
  .play-card .row select, .play-card .row .big { flex: 1 1 auto; min-width: 0; }
  .rk-buttons .big, .rk-buttons .buy { flex: 1 1 auto; }
  .salvage-row { gap: 8px; }
  .salvage-row .buy { font-size: 12px; padding: 8px 10px; }
  .staff-row, .guild-create, .convert-row { gap: 6px; }
  .gd-stats { gap: 10px; font-size: 13px; }
  .exchange-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* other-player profile modal */
.pplayer-box { max-width: 460px; width: 92vw; text-align: left; position: relative; }
.modal-x { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; z-index: 2; }
.pp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.pp-av { width: 84px; height: 84px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: #0c0a0e; }
.pp-av img { width: 100%; height: 100%; object-fit: cover; }
.pp-meta h2 { margin: 0 0 2px; }
.pp-sub { color: var(--gold); margin: 14px 0 6px; font-family: Georgia, serif; }
.pp-highlights { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-highlights .card { width: 90px; height: 126px; }

/* staff name colouring in chat */
.cmsg b.staff-mod { color: #6fb6c9; }
.cmsg b.staff-admin { color: #e23b6d; }
.cmsg .staff-mark { font-size: 10px; opacity: .85; margin-left: 2px; }

/* =====================================================================
   GUILDS
   ===================================================================== */
.guild-event .ge-name { color: var(--gold); font-size: 18px; font-weight: 800; }
.guild-create { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.guild-create input { flex: 1; min-width: 120px; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 10px; }
#guild-tag { flex: 0 0 110px; text-transform: uppercase; }
.guild-list { display: flex; flex-direction: column; gap: 8px; }
.guild-card { display: flex; align-items: center; gap: 12px; background: #14111a; border: 1px solid #2a242f; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.guild-card:hover { border-color: var(--gold); }
.guild-card.equipped { border-color: var(--gold); box-shadow: 0 0 12px rgba(200,164,90,.3); }
.gc-tag { font-weight: 800; color: var(--gold); font-family: Georgia, serif; min-width: 54px; text-align: center; }
.gc-main { flex: 1; min-width: 0; }
.gc-name { font-weight: 700; }
.gc-worn { color: var(--gold); font-size: 11px; border: 1px solid var(--gold); border-radius: 6px; padding: 0 5px; margin-left: 6px; }
.gc-form { color: #cf8a2a; }
.gc-bar { height: 6px; background: #0c0a0e; border-radius: 3px; overflow: hidden; margin-top: 5px; }
.gc-bar div { height: 100%; background: linear-gradient(90deg, #8e1c20, #c8a45a); }
.gc-go { color: var(--muted); font-size: 22px; }
.gd-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; color: var(--ink); }
.gd-stats b { color: var(--gold); }
.gd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.guild-members { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.gm-row { display: flex; justify-content: space-between; background: #14111a; border: 1px solid #2a242f; border-radius: 6px; padding: 7px 10px; }
.guild-shop { display: flex; flex-direction: column; gap: 8px; }
.gs-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #14111a; border: 1px solid #2a242f; border-radius: 8px; padding: 10px 12px; }
.buy.mini { padding: 6px 12px; font-size: 13px; }

/* =====================================================================
   STAFF CONSOLE
   ===================================================================== */
.staff-card { background: #14111a; border: 1px solid #2a242f; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.6; }
.staff-grp { margin-bottom: 14px; }
.staff-grp > b { color: var(--gold); display: block; margin-bottom: 6px; }
.staff-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.staff-row input, .staff-row select { background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 8px; }
.mini-num { width: 84px; }
/* signup: country + ToS */
.auth-select { width: 100%; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 11px; margin: 0; }
.auth-field-label { display: block; text-align: left; font-size: 12px; color: var(--muted); margin: 2px 2px -4px; }
.tfa-box { background: #14111a; border: 1px solid #2a242f; border-radius: 8px; padding: 12px; margin-top: 10px; }
.twofa-qr { background: #fff; padding: 10px; border-radius: 8px; display: inline-block; line-height: 0; margin: 4px 0 8px; }
.twofa-qr img { display: block; }
.tfa-secret { font-family: monospace; font-size: 18px; letter-spacing: 2px; color: var(--gold); background: #0c0a0e; border: 1px dashed var(--gold); border-radius: 6px; padding: 10px; text-align: center; margin: 6px 0; word-break: break-all; }
.tfa-confirm { display: flex; gap: 8px; }
.tfa-confirm input { flex: 1; background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 9px; font-size: 16px; letter-spacing: 3px; text-align: center; }
.auth-foot, .hub-foot { text-align: center; font-size: 12px; color: var(--muted); margin-top: 14px; }
.auth-foot a, .hub-foot a { color: var(--gold); margin: 0 4px; }
.tos-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); text-align: left; line-height: 1.4; }
.tos-row input { margin-top: 2px; }
.tos-row a { color: var(--gold); }
/* pack drop-odds (clearly displayed) */
.pack-odds { background: #100d14; border: 1px solid #2a242f; border-left: 3px solid var(--gold); border-radius: 6px; padding: 7px 9px; margin: 6px 0; font-size: 11.5px; line-height: 1.6; color: var(--ink); }
.pack-odds b { color: var(--gold); }
.pack-odds .po-mythic { color: var(--r-mythic); font-weight: 700; }
.pack-odds .po-legend { color: #cf5a2a; } .pack-odds .po-ultra { color: #c8a45a; } .pack-odds .po-super { color: #8a4fb0; }

.ip-row { display: flex; align-items: center; gap: 8px; background: #14111a; border: 1px solid #2a242f; border-radius: 6px; padding: 6px 10px; margin: 4px 0; }
.ip-row code { flex: 1; color: var(--ink); font-size: 13px; }

.an-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.an-card { background: #14111a; border: 1px solid #2a242f; border-radius: 10px; padding: 12px 18px; text-align: center; min-width: 96px; }
.an-card .an-n { font-size: 26px; font-weight: 800; color: var(--gold); }
.an-card .an-l { font-size: 12px; color: var(--muted); }
/* analytics dashboard: bar charts */
.an-bars { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; max-width: 620px; }
.an-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.an-bl { flex: 0 0 110px; color: var(--ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bt { flex: 1; height: 14px; background: #14111a; border: 1px solid #2a242f; border-radius: 7px; overflow: hidden; }
.an-bf { display: block; height: 100%; border-radius: 7px; min-width: 2px; }
.an-bv { flex: 0 0 46px; color: var(--muted); font-weight: 700; }
/* card list */
.an-cardlist { display: flex; flex-direction: column; gap: 3px; max-width: 620px; }
.an-cr { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 0; }
.an-cr .an-crn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rar-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
/* accounts table */
.an-acc-bar { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.an-acc-bar input, .an-acc-bar select { background: #0c0a0e; border: 1px solid #3a3340; color: var(--ink); border-radius: 6px; padding: 6px 10px; font-size: 14px; }
.an-tablewrap { overflow-x: auto; border: 1px solid #2a242f; border-radius: 10px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.an-table th { text-align: left; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #2a242f; position: sticky; top: 0; background: #16131a; }
.an-table td { padding: 7px 10px; border-bottom: 1px solid #1c1820; }
.an-table tr:hover td { background: #16131a; }
.an-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; background: #2a2440; color: #b9a9e0; border-radius: 5px; padding: 1px 5px; }
.an-tag.bad { background: #4a1f22; color: #e08a8a; }
.an-tag.dc { background: #2a3050; color: #8fa8e0; }
.an-page { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0; }
/* ---- live presence line (real-time activity breakdown) ---- */
.an-live { background: #14111a; border: 1px solid #2a242f; border-left: 3px solid #6fc97a; border-radius: 10px; padding: 10px 14px; margin: 4px 0 10px; font-size: 15px; color: var(--ink); line-height: 1.9; }
.an-live .an-live-n { color: var(--gold); font-weight: 800; font-size: 20px; }
.an-live b { color: var(--gold); }
.an-actpip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 6px; vertical-align: middle; background: #6b6b6b; }
.an-actpip.an-act-lobby { background: #8a8275; }
.an-actpip.an-act-battler { background: #c8a45a; }
.an-actpip.an-act-gauntlet { background: #6fb6c9; }
.an-actpip.an-act-souls { background: #b9a9e0; }
.an-actpip.an-act-siege { background: #cf5a2a; }
/* ---- per-mode breakdown cards ---- */
.an-modes { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 10px; }
.an-mode { flex: 1 1 260px; min-width: 240px; background: #14111a; border: 1px solid #2a242f; border-top: 2px solid #2a242f; border-radius: 10px; padding: 10px 14px; }
.an-mode h4 { margin: 0 0 6px; color: var(--gold); font-size: 15px; }
.an-mode .an-card { min-width: 70px; padding: 8px 10px; }
.an-mode .an-card .an-n { font-size: 20px; }
.an-mode-battler { border-top-color: #c8a45a; }
.an-mode-gauntlet { border-top-color: #6fb6c9; }
.an-mode-souls { border-top-color: #b9a9e0; }
.an-mode-siege { border-top-color: #cf5a2a; }
/* ---- account presence dot + activity label ---- */
.pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.pip.on { background: #6fc97a; box-shadow: 0 0 6px rgba(111,201,122,0.8); }
.pip.off { background: #7a3a3a; }
.an-act { margin-left: 7px; font-size: 11px; color: #6fc97a; background: rgba(111,201,122,0.1); border-radius: 5px; padding: 1px 6px; }
.cmsg.sys { background: transparent; color: var(--gold); font-size: 12px; font-style: italic; align-self: center; text-align: center; max-width: 100%; }
.bad { color: #e2557a; } .good { color: #6fc97a; }

/* gem -> credit exchange tiers */
.exchange-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.exchange-card { background: #14111a; border: 1px solid #2a242f; border-radius: 10px; padding: 12px; text-align: center; }
.exchange-card .ex-gems { color: #6fb6c9; font-weight: 800; font-size: 16px; }
.exchange-card .ex-arrow { color: var(--muted); margin: 2px 0; }
.exchange-card .ex-cred { color: #d8b048; font-weight: 800; font-size: 16px; }
.exchange-card .ex-rate { font-size: 11px; margin: 4px 0 8px; }
.exchange-card .buy { width: 100%; }

/* XP bar text (mobile) + tooltip cursor (desktop) */
.pf-widget-bar { position: relative; cursor: help; }
.xp-text { display: none; position: absolute; inset: 0; text-align: center; font-size: 9px; font-weight: 800; color: #fff; -webkit-text-stroke: .4px #000; text-shadow: 0 0 2px #000, 0 1px 1px #000; }

/* mobile: bigger battle tokens than before + show names + in-bar XP text */
@media (orientation: portrait) and (max-width: 760px) {
  .tok { width: 64px; height: 90px; }
  .tok-name { display: block; bottom: 20px; font-size: 8px; }
  .tok .card-aff { width: 18px; height: 18px; top: 2px; right: 2px; }
  .tok-role { width: 16px; height: 16px; font-size: 9px; top: 2px; left: 2px; }
  .tok-atk, .tok-def { width: 17px; height: 17px; font-size: 10px; bottom: 14px; }
  .tok-hpbar { height: 12px; } .tok-hp { font-size: 9px; line-height: 12px; }
  .pf-widget-bar { height: 14px; width: 84px; }
  .xp-text { display: block; line-height: 14px; }
}
@media (max-width: 640px) {
  .tok { width: 64px; height: 90px; }
  .tok-name { display: block; bottom: 18px; font-size: 8px; }
  .tok-atk, .tok-def { width: 17px; height: 17px; font-size: 10px; bottom: 13px; }
  .tok-stars, .tok-lvl { display: none; }
  .pf-widget-bar { height: 14px; }
  .xp-text { display: block; line-height: 14px; }
}
@media (orientation: portrait) and (max-width: 760px) { .tok-stars, .tok-lvl { display: none; } }

/* ========================================================================
   HOLLOWCROSS GAME UI — unified dark-gothic system (FINAL LAYER).
   One coherent visual language: forged-gold primaries, steel secondaries,
   engraved rune tabs, translucent panels floating over rolling fog.
   Display font: Cinzel (Google Fonts CDN; degrades to Georgia serif).
   ======================================================================== */
:root {
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --gold-hi: #ecd9a8;
  --gold-mid: #c8a45a;
  --gold-lo: #7c5c22;
  --gold-edge: #3d2c10;
  --ember: #cf5a2a;
  --steel-hi: #55495f;
  --steel-mid: #322a3a;
  --steel-lo: #1d1824;
}

::selection { background: rgba(200,164,90,.35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #352c3d; border-radius: 5px; border: 2px solid #0c0a0e; }
::-webkit-scrollbar-thumb:hover { background: #4a3f52; }

/* ------------------------------------------------------------------
   AMBIENT ATMOSPHERE — rolling fog (3 layers) + rising embers.
   Fixed full-viewport layers under all UI (z-index 0; screens sit at 1+).
   GPU-only animation (transform/opacity), softness baked into the
   gradients (no filter: blur), pauses under prefers-reduced-motion.
   ------------------------------------------------------------------ */
#fx-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#fx-ambient .fog {
  position: absolute; left: -30%; top: -30%; width: 160%; height: 160%;
  background-repeat: no-repeat; will-change: transform, opacity;
}
.fog-a {
  background-image:
    radial-gradient(42% 34% at 28% 62%, rgba(150,138,168,.11), transparent 70%),
    radial-gradient(36% 30% at 72% 32%, rgba(122,110,140,.09), transparent 70%);
  animation: hcFogA 90s ease-in-out infinite alternate;
}
.fog-b {
  background-image:
    radial-gradient(46% 38% at 68% 74%, rgba(111,182,201,.06), transparent 70%),
    radial-gradient(30% 26% at 20% 22%, rgba(150,138,168,.08), transparent 70%);
  animation: hcFogB 64s ease-in-out infinite alternate;
}
.fog-c {
  background-image:
    radial-gradient(50% 42% at 50% 88%, rgba(142,28,32,.06), transparent 72%),
    radial-gradient(34% 30% at 84% 14%, rgba(200,164,90,.045), transparent 70%);
  animation: hcFogC 118s ease-in-out infinite alternate;
}
@keyframes hcFogA {
  from { transform: translate3d(-6%, -2%, 0) scale(1); opacity: .8; }
  50%  { opacity: 1; }
  to   { transform: translate3d(7%, 3%, 0) scale(1.14); opacity: .85; }
}
@keyframes hcFogB {
  from { transform: translate3d(5%, 2%, 0) scale(1.1); opacity: .9; }
  50%  { opacity: .65; }
  to   { transform: translate3d(-6%, -3%, 0) scale(1); opacity: 1; }
}
@keyframes hcFogC {
  from { transform: translate3d(-4%, 3%, 0) scale(1.05); opacity: .75; }
  to   { transform: translate3d(5%, -4%, 0) scale(1.18); opacity: 1; }
}
#fx-ambient .embers {
  position: absolute; left: 0; right: 0; top: 0; bottom: -860px;
  background-repeat: repeat; background-size: 860px 860px; opacity: .55;
  will-change: transform;
  background-image:
    radial-gradient(2px 2px at 12% 84%, rgba(240,190,110,.9) 45%, transparent),
    radial-gradient(1.5px 1.5px at 34% 30%, rgba(207,90,42,.8) 45%, transparent),
    radial-gradient(2.5px 2.5px at 57% 65%, rgba(232,150,80,.75) 45%, transparent),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(240,190,110,.7) 45%, transparent),
    radial-gradient(2px 2px at 90% 48%, rgba(207,90,42,.65) 45%, transparent),
    radial-gradient(1.5px 1.5px at 22% 55%, rgba(255,214,140,.6) 45%, transparent),
    radial-gradient(2px 2px at 66% 92%, rgba(232,150,80,.7) 45%, transparent),
    radial-gradient(1px 1px at 45% 8%, rgba(255,214,140,.55) 45%, transparent);
  animation: hcEmbersRise 46s linear infinite;
}
@keyframes hcEmbersRise { to { transform: translate3d(0, -860px, 0); } }

/* ------------------------------------------------------------------
   TYPOGRAPHY — Cinzel for everything that names or commands.
   ------------------------------------------------------------------ */
.title, .panel h2, .panel h3, .reveal-box h2, .howto-content h3,
.sd-name, .vs-big, .gc-tag, .reveal-banner, .pp-sub, .bteam-name,
.card-modal-info h2, .rk-meta h2, .pf-meta h2, .story-box .title,
.guild-event .ge-name, #battle-status {
  font-family: var(--font-display);
}
.subtitle { letter-spacing: .5px; }

/* ------------------------------------------------------------------
   SCREEN / VIEW TRANSITIONS — quick cinematic rise-in.
   ------------------------------------------------------------------ */
.screen.active, .view.active { animation: hcViewIn .28s cubic-bezier(.2,.7,.3,1) both; }
/* opacity-only: a `transform` here makes .view an ancestor containing block,
   which traps the position:fixed SOULS duel into a tiny box (see PERF/layout). */
@keyframes hcViewIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------------
   BUTTON SYSTEM
   primary        = forged gold (default button, .buy, .big)
   secondary      = forged steel (.buy.alt)
   danger         = blood red (.danger)
   ghost          = dark glass (.ghost)
   .mini          = compact
   All: extruded bottom edge, presses in on :active, ~150ms hover.
   ------------------------------------------------------------------ */
/* (primary gold button visuals REMOVED — replaced by the FORGED-EMBER button
   system in the POLISH PASS 2 layer at the very end of this file) */
button:disabled, .buy:disabled {
  filter: grayscale(.75) brightness(.55); transform: none; cursor: default;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 rgba(0,0,0,.4);
}
button:focus-visible, .buy:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; }

/* (button.big visuals also moved to the POLISH PASS 2 layer) */

/* secondary — forged steel with parchment text */
.buy.alt {
  color: var(--ink);
  background: linear-gradient(180deg, var(--steel-hi) 0%, var(--steel-mid) 55%, var(--steel-lo) 100%);
  border: 1px solid #6a5f76; border-bottom-color: #171220;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.35), 0 3px 0 #0d0a12, 0 8px 18px rgba(0,0,0,.5);
}
.buy.alt:hover { border-color: var(--gold-mid); filter: brightness(1.12); }
.buy.alt:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 #0d0a12, 0 3px 8px rgba(0,0,0,.5); }

/* danger — blood-forged (destructive actions) */
button.danger, .buy.danger, .danger-btn {
  color: #fff;
  background: linear-gradient(180deg, #d0484a 0%, #8e1c20 55%, #5c1013 100%);
  border: 1px solid #e0b878; border-bottom-color: #470d10;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.4), 0 3px 0 #400d10, 0 8px 18px rgba(0,0,0,.5);
}
button.danger:active, .buy.danger:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 0 #400d10, 0 3px 8px rgba(0,0,0,.5); }

/* ghost — dark glass */
button.ghost, .ghost {
  background: rgba(20,16,26,.55); color: var(--muted);
  border: 1px solid #3f3648; border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
  text-shadow: none;
}
button.ghost:hover, .ghost:hover { color: var(--ink); border-color: rgba(200,164,90,.45); filter: none; background: rgba(200,164,90,.07); }
button.ghost:active, .ghost:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }

.mini { border-radius: 3px; letter-spacing: .5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 rgba(0,0,0,.45); }
.mini:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 0 rgba(0,0,0,.4); }

/* filter chips */
.chip { border-radius: 4px; background: rgba(20,16,26,.7); border: 1px solid #3f3648; color: var(--muted); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.chip:hover { color: var(--ink); border-color: rgba(200,164,90,.4); filter: none; }
.chip.active { background: linear-gradient(180deg, #ecd9a8, #b98f42); color: #1c1206; border-color: #f4e3b2; box-shadow: 0 0 14px rgba(200,164,90,.35), 0 2px 0 var(--gold-edge); text-shadow: 0 1px 0 rgba(255,242,205,.4); }

/* engraved selector tabs (auth tabs, team-mode, friends tabs, sidebar channels) */
.tab, .tm-btn, .fr-tab, .sb-chan { background: rgba(20,16,26,.7); border: 1px solid #322a3a; color: var(--muted); box-shadow: 0 2px 0 rgba(0,0,0,.35); text-shadow: 0 1px 1px #000; }
.tab:hover, .tm-btn:hover, .fr-tab:hover, .sb-chan:hover { color: var(--ink); border-color: rgba(200,164,90,.35); filter: none; }
.tab.active, .tm-btn.active, .fr-tab.active, .sb-chan.active {
  background: linear-gradient(180deg, rgba(200,164,90,.18), rgba(200,164,90,.05));
  color: var(--gold-hi); border-color: rgba(200,164,90,.45);
  box-shadow: inset 0 -2px 0 var(--gold-mid), 0 0 12px rgba(200,164,90,.15);
  text-shadow: 0 0 8px rgba(200,164,90,.5);
}

/* ------------------------------------------------------------------
   INPUTS — inset iron with a gold focus glow.
   ------------------------------------------------------------------ */
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input:not([type]), select, textarea {
  background: linear-gradient(180deg, #0d0a11, #16121c);
  border: 1px solid #3f3648; color: var(--ink); border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gold-mid);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5), 0 0 10px rgba(200,164,90,.35);
}

/* ------------------------------------------------------------------
   PANELS — translucent forged steel floating over the fog,
   gold hairline at the top, engraved Cinzel headers.
   ------------------------------------------------------------------ */
.panel {
  background: linear-gradient(180deg, rgba(24,19,29,.86), rgba(11,9,14,.92));
  border: 1px solid rgba(200,164,90,.16); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(200,164,90,.12), inset 0 0 46px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.5);
  position: relative;
}
.panel::before {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,164,90,.55), transparent);
  pointer-events: none;
}
.panel h2 {
  letter-spacing: 1.5px; border-bottom: 1px solid rgba(200,164,90,.18); padding-bottom: 10px;
  text-shadow: 0 0 16px rgba(200,164,90,.25), 0 2px 3px #000;
}
.panel h2::before { content: "❖ "; color: var(--ember); text-shadow: 0 0 10px rgba(207,90,42,.6); }
.panel h3 { color: var(--gold-mid); letter-spacing: 1px; }

/* ------------------------------------------------------------------
   TOPBAR — game HUD header. One row; compact on phones (media rules
   further down re-assert the mobile metrics).
   ------------------------------------------------------------------ */
#topbar {
  background: linear-gradient(180deg, rgba(26,20,31,.92), rgba(12,9,16,.88));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200,164,90,.35);
  box-shadow: 0 1px 0 rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.55);
}
#topbar .brand {
  font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 4px;
  color: var(--gold-hi);
  text-shadow: 0 0 14px rgba(200,164,90,.5), 0 0 34px rgba(207,90,42,.25), 0 2px 2px #000;
}
/* nav — engraved rune tabs, lit when active */
.navbtn {
  background: none; border: 1px solid transparent; border-radius: 4px;
  color: #9a9083; font-size: 13px; font-weight: 700; letter-spacing: 1px;
  padding: 7px 11px; position: relative; box-shadow: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.05);
  transition: color .15s ease, background .15s ease, border-color .15s ease, text-shadow .15s ease;
}
.navbtn:hover { color: var(--ink); background: rgba(200,164,90,.06); border-color: rgba(200,164,90,.22); filter: none; }
.navbtn:active { transform: none; box-shadow: none; }
.navbtn.active {
  color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(200,164,90,.14), rgba(200,164,90,.03));
  border-color: rgba(200,164,90,.38);
  box-shadow: inset 0 -2px 0 var(--gold-mid), 0 0 14px rgba(200,164,90,.14);
  text-shadow: 0 0 9px rgba(200,164,90,.6);
}
/* currency — inset gem sockets */
#topbar .gems .cur {
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  background: radial-gradient(130% 170% at 50% 0%, #201a28, #0a0810);
  border: 1px solid #3c3344; border-radius: 999px; padding: 3px 11px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.05);
}
#topbar .gems .cur { color: var(--cred); text-shadow: 0 0 8px rgba(111,182,201,.4); }
#topbar .gems .cur.cred { color: #d8b048; text-shadow: 0 0 8px rgba(216,176,72,.4); }
/* player widget — socketed */
.pf-widget { background: rgba(12,9,16,.5); border: 1px solid #322a3a; border-radius: 5px; padding: 3px 9px; transition: border-color .15s ease, background .15s ease; }
.pf-widget:hover { background: rgba(200,164,90,.07); border-color: rgba(200,164,90,.4); }
.pf-widget-lvl { font-family: var(--font-display); font-weight: 700; }

/* ------------------------------------------------------------------
   AUTH — cinematic gate: glowing sigil over the fog.
   ------------------------------------------------------------------ */
.auth-box {
  background: linear-gradient(180deg, rgba(20,16,25,.82), rgba(10,8,13,.92));
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(200,164,90,.28); border-radius: 6px;
  box-shadow: 0 0 90px rgba(142,28,32,.3), 0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(200,164,90,.18);
  position: relative;
}
.auth-box::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,164,90,.6), transparent);
}
.auth-box #logo, .hub-logo { animation: hcTitleGlow 5s ease-in-out infinite; }
@keyframes hcTitleGlow {
  0%, 100% { filter: drop-shadow(0 6px 22px rgba(142,28,32,.5)); }
  50%      { filter: drop-shadow(0 6px 32px rgba(207,90,42,.75)); }
}
.auth-box .subtitle { font-style: italic; }

/* ------------------------------------------------------------------
   HUB — main menu: large forged mode cards with corner flourishes,
   hover lift + ember glow, over the animated fog.
   ------------------------------------------------------------------ */
.hub-hero { position: relative; z-index: 1; }
.hub-cards { gap: 16px; }
.hub-card, .play-card {
  background: linear-gradient(160deg, rgba(38,29,43,.9), rgba(15,11,20,.94));
  border: 1px solid rgba(200,164,90,.22); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(200,164,90,.1), inset 0 0 30px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.5);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), border-color .16s ease, box-shadow .16s ease;
}
.play-card { position: relative; overflow: hidden; }
.hub-card::before, .hub-card::after,
.play-card::before, .play-card::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  border: 1px solid rgba(200,164,90,.5); pointer-events: none;
  transition: border-color .16s ease; background: none;
}
.hub-card::before, .play-card::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.hub-card::after, .play-card::after { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.hub-card:hover, .play-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200,164,90,.65);
  box-shadow: inset 0 1px 0 rgba(200,164,90,.15), 0 16px 32px rgba(0,0,0,.6), 0 0 26px rgba(207,90,42,.28);
}
.hub-card:hover::before, .hub-card:hover::after,
.play-card:hover::before, .play-card:hover::after { border-color: var(--gold-hi); }
.hub-card:active { transform: translateY(-1px); }
.hub-card h3, .play-card h3 { font-family: var(--font-display); letter-spacing: 1px; color: var(--gold-mid); }
.hub-card h3 small { color: var(--ember); font-size: 11px; letter-spacing: 2px; }
.hub-card-wide {
  border-color: rgba(207,90,42,.45);
  background: linear-gradient(160deg, rgba(58,22,26,.82), rgba(20,10,16,.94));
}
.hub-card-wide:hover { border-color: var(--ember); box-shadow: inset 0 1px 0 rgba(200,164,90,.15), 0 16px 32px rgba(0,0,0,.6), 0 0 30px rgba(207,90,42,.4); }
.hub-card-wide h3 { color: #e8905a; }

/* ------------------------------------------------------------------
   2D ⇄ 3D BATTLE-GRAPHICS TOGGLE — gold rocker switch on the hub.
   ------------------------------------------------------------------ */
.gfx-bar {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 16px; width: 100%;
  background: linear-gradient(180deg, rgba(24,19,29,.85), rgba(11,9,14,.9));
  border: 1px solid rgba(200,164,90,.18); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(200,164,90,.1), 0 6px 18px rgba(0,0,0,.4);
}
.gfx-label { font-family: var(--font-display); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.gfx-toggle {
  position: relative; display: inline-flex; padding: 3px;
  background: #0b0910; border: 1px solid #4a3f33; border-radius: 999px;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.05);
}
.gfx-knob {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px;
  background: linear-gradient(180deg, #ecd9a8, #c8a45a 45%, #96712e);
  box-shadow: 0 0 16px rgba(200,164,90,.6), inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(0,0,0,.5);
  transition: transform .18s cubic-bezier(.3,.8,.4,1);
  pointer-events: none;
}
.gfx-toggle.is-3d .gfx-knob { transform: translateX(100%); }
.gfx-side {
  position: relative; z-index: 1; min-width: 66px;
  background: none; border: none; box-shadow: none; border-radius: 999px;
  padding: 7px 20px; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  letter-spacing: 1px; color: var(--muted); text-shadow: 0 1px 1px #000;
  transition: color .15s ease;
}
.gfx-side:hover { filter: none; color: var(--ink); }
.gfx-side:active { transform: none; box-shadow: none; }
.gfx-side.active { color: #1c1206; text-shadow: 0 1px 0 rgba(255,242,205,.5); }

/* ------------------------------------------------------------------
   COLLECTION PAGER
   ------------------------------------------------------------------ */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.pager-btn { min-width: 96px; }
.pager-label { font-family: var(--font-display); color: var(--muted); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.pager-label b { color: var(--gold-hi); font-size: 15px; }

/* ------------------------------------------------------------------
   OVERLAYS & MODALS — forged reliquaries over dimmed fog.
   ------------------------------------------------------------------ */
.overlay { background: rgba(5,4,8,.8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.reveal-box, .card-modal-box, .story-box, .sd-box {
  background: linear-gradient(180deg, rgba(22,17,27,.97), rgba(11,9,14,.98));
  border: 1px solid rgba(200,164,90,.28); border-radius: 6px;
  box-shadow: 0 0 90px rgba(142,28,32,.25), 0 30px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(200,164,90,.15);
}
.toast {
  background: linear-gradient(180deg, rgba(40,30,38,.97), rgba(18,12,17,.97));
  border: 1px solid rgba(200,164,90,.5); border-radius: 5px; color: var(--ink);
  box-shadow: 0 0 22px rgba(207,90,42,.35), 0 8px 20px rgba(0,0,0,.6);
  text-shadow: 0 1px 2px #000;
}

/* sidebar channel tabs carry user-generated names — keep their casing/font */
.sb-chan { text-transform: none; font-family: inherit; letter-spacing: .3px; }

/* chromeless legacy buttons — no forged extrusion on these */
.modal-x { box-shadow: none; text-shadow: none; background: none; }
.mc-input button, .sb-input button { box-shadow: none; text-shadow: 0 1px 2px #000; letter-spacing: .5px; }
.mc-input button:active, .sb-input button:active { transform: none; }

/* ------------------------------------------------------------------
   RESPONSIVE RE-ASSERTS — these must win over the base rules above
   (the earlier mobile media blocks are out-cascaded by this layer).
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  button, .buy { letter-spacing: .6px; }
  button.big { font-size: 13px; padding: 10px 12px; letter-spacing: .5px; }
  #topbar .brand { font-size: 14px; letter-spacing: 2px; }
  .navbtn { font-size: 13px; }
  .gfx-side { padding: 6px 16px; min-width: 56px; }
  .pager-btn { min-width: 72px; }
  .hub-card::before, .hub-card::after, .play-card::before, .play-card::after { width: 11px; height: 11px; }
  .fog-c { display: none; }           /* two fog layers are plenty on phones */
  #fx-ambient .embers { opacity: .4; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #topbar .brand { display: none; }
  .hub-logo { animation: none; }
  .hub-card::before, .hub-card::after { display: none; }
}

/* ------------------------------------------------------------------
   REDUCED MOTION — still atmosphere, instant transitions.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #fx-ambient .fog, #fx-ambient .embers,
  .auth-box #logo, .hub-logo,
  .screen.active, .view.active { animation: none !important; }
  .gfx-knob { transition: none; }
  .hub-card, .play-card, .hub-card:hover, .play-card:hover { transform: none; }
}

/* ========================================================================
   HOLLOWCROSS POLISH PASS 2 (FINAL-FINAL LAYER — wins the cascade)
   1. TOPBAR: rotting-wood plank texture; nav/sockets carved INTO the wood.
   2. BUTTONS: forged-ember primaries — textured char/ember body, gold rim
      with corner notches, sheen sweep on hover, physical press-down.
   3. "Everything looks like a button": raised bevels + hover + press on
      hub/play cards, bundles, packs, exchange tiers, tabs, filter pills.
   All textures are STATIC data-URI SVGs / gradients (no animated filters);
   the only animated pieces are transform/opacity. Reduced-motion safe.
   ======================================================================== */

/* ------------------------------------------------------------------
   [1] TOPBAR — rotting weathered wood.
   Layers (top → bottom): moisture-rot blotches → horizontally-stretched
   feTurbulence grain → plank seam lines → alternating plank tone →
   vertical plank-end cracks → dark base timber. Metrics untouched.
   ------------------------------------------------------------------ */
#topbar {
  background:
    radial-gradient(38% 150% at 7% 115%, rgba(20,16,11,.9), transparent 70%),
    radial-gradient(30% 160% at 88% -25%, rgba(26,20,8,.85), transparent 70%),
    radial-gradient(24% 130% at 56% 125%, rgba(35,42,24,.38), transparent 70%),
    radial-gradient(17% 110% at 32% -15%, rgba(35,42,24,.3), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='96'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0.35 0 0 -0.3'/%3E%3C/filter%3E%3Crect width='480' height='96' filter='url(%23w)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg, transparent 0 17px, rgba(0,0,0,.55) 17px 18px, rgba(110,82,50,.16) 18px 19px),
    repeating-linear-gradient(180deg, rgba(214,168,106,.04) 0 19px, rgba(0,0,0,.08) 19px 38px),
    repeating-linear-gradient(90deg, transparent 0 173px, rgba(0,0,0,.35) 173px 175px, rgba(110,82,50,.08) 175px 176px),
    linear-gradient(180deg, #241811 0%, #1a110a 48%, #120b06 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid #060402;
  box-shadow: inset 0 1px 0 rgba(140,105,60,.16), inset 0 -7px 12px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.55);
}
/* chipped, uneven bottom edge — two interfering sawtooth periods */
#topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  pointer-events: none;
  background:
    conic-gradient(from 135deg at 50% 0, #100a05 90deg, transparent 0) 0 0 / 17px 6px repeat-x,
    conic-gradient(from 135deg at 50% 0, #170f08 90deg, transparent 0) 7px 0 / 23px 4px repeat-x;
}

/* nav — recesses CARVED into the wood: dark inner top shadow, faint lit
   lower lip, engraved lettering (dark above, faint warm light below). */
#topbar .navbtn {
  background: linear-gradient(180deg, rgba(4,2,1,.62), rgba(26,17,10,.34));
  border: 1px solid rgba(0,0,0,.6); border-bottom-color: rgba(140,105,60,.22);
  border-radius: 5px;
  color: #9a8c74;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.8), inset 2px 0 3px rgba(0,0,0,.4),
    inset -1px 0 2px rgba(0,0,0,.3), inset 0 -1px 0 rgba(150,112,64,.14),
    0 1px 0 rgba(150,112,64,.08);
  text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(160,124,74,.14);
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, text-shadow .15s ease;
}
#topbar .navbtn:hover {
  transform: none; filter: none;
  color: #dccfb2;
  background: linear-gradient(180deg, rgba(2,1,0,.72), rgba(38,22,10,.42));
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.85), inset 2px 0 4px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(180,130,70,.18), inset 0 0 10px rgba(120,50,15,.25),
    0 1px 0 rgba(150,112,64,.08);
}
#topbar .navbtn:active { transform: none; box-shadow: inset 0 4px 8px rgba(0,0,0,.9), inset 0 0 12px rgba(120,50,15,.3); }
/* active tab — ember light seeping out of the carving */
#topbar .navbtn.active {
  color: var(--gold-hi);
  background:
    radial-gradient(120% 150% at 50% 110%, rgba(207,90,42,.32), rgba(0,0,0,.05) 70%),
    linear-gradient(180deg, rgba(4,2,1,.7), rgba(30,18,8,.4));
  border-color: rgba(0,0,0,.65); border-bottom-color: rgba(220,150,80,.4);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.85),
    inset 0 -2px 8px rgba(207,90,42,.4), inset 0 0 14px rgba(207,90,42,.28),
    0 0 12px rgba(207,90,42,.22), 0 1px 0 rgba(150,112,64,.1);
  text-shadow: 0 0 10px rgba(240,170,90,.75), 0 -1px 1px rgba(0,0,0,.9);
}
/* keep the unread-dot badge geometry (the sheen/reset rules below must not move it) */
.navbtn.badge::after { left: auto; bottom: auto; top: 3px; right: 3px; transform: none; transition: none; z-index: auto; }

/* currency sockets + player widget — carved into the same wood */
#topbar .gems .cur {
  background: radial-gradient(130% 170% at 50% 0%, #160f08, #090603);
  border: 1px solid rgba(0,0,0,.75); border-bottom-color: rgba(150,112,64,.25);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9), inset 0 -1px 0 rgba(150,112,64,.14), 0 1px 0 rgba(150,112,64,.1);
}
#topbar .pf-widget {
  background: linear-gradient(180deg, rgba(6,3,1,.62), rgba(24,15,8,.38));
  border: 1px solid rgba(0,0,0,.6); border-bottom-color: rgba(150,112,64,.2);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.75), inset 0 -1px 0 rgba(150,112,64,.12), 0 1px 0 rgba(150,112,64,.08);
}
#topbar .pf-widget:hover {
  background: linear-gradient(180deg, rgba(4,2,0,.7), rgba(40,24,10,.45));
  border-color: rgba(0,0,0,.65); border-bottom-color: rgba(200,150,80,.35);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85), inset 0 0 10px rgba(120,50,15,.22), 0 1px 0 rgba(150,112,64,.08);
}
#topbar .ghost {
  background: linear-gradient(180deg, rgba(5,3,1,.55), rgba(24,15,8,.3));
  border: 1px solid rgba(0,0,0,.55); border-bottom-color: rgba(150,112,64,.18);
  color: #9a8c74;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 1px 0 rgba(150,112,64,.07);
  text-shadow: 0 -1px 1px rgba(0,0,0,.85);
}
#topbar .ghost:hover { color: #dccfb2; background: linear-gradient(180deg, rgba(3,1,0,.65), rgba(38,22,10,.38)); border-bottom-color: rgba(200,150,80,.3); }

/* ------------------------------------------------------------------
   [2] FORGED-EMBER BUTTON SYSTEM (bare button, .buy, .big)
   Body: ember core → charred edges + fine turbulence grain.
   Rim: thin gold border + bright corner-notch ticks (::before).
   Hover: sheen sweep (::after), rim to full gold, ember bloom, 1px rise.
   Press: 2px drop + .985 scale, shadow collapses, inner ember flash.
   ------------------------------------------------------------------ */
button, .buy {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #f2e3c0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0 0 0 -0.16'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 150% at 50% -40%, rgba(255,200,130,.16), transparent 55%),
    radial-gradient(140% 130% at 50% 118%, rgba(207,90,42,.55) 0%, rgba(140,50,16,.32) 42%, transparent 74%),
    linear-gradient(180deg, #40281a 0%, #2b1810 48%, #170d08 100%);
  border: 1px solid rgba(200,164,90,.55); border-bottom-color: rgba(120,86,40,.65);
  border-radius: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.22), inset 0 -6px 14px rgba(0,0,0,.5),
    inset 0 0 18px rgba(90,30,8,.35),
    0 3px 0 #1c0f07, 0 7px 16px rgba(0,0,0,.55);
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 12px rgba(255,150,70,.3);
  transition: transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s ease, filter .14s ease, border-color .14s ease;
  transform: translateZ(0); backface-visibility: hidden;
  cursor: pointer;
}
/* gold corner-notch ticks */
button::before, .buy::before {
  content: ""; position: absolute; inset: 2px; border-radius: 3px;
  pointer-events: none; z-index: 2; opacity: .55;
  background:
    linear-gradient(var(--gold-hi), var(--gold-hi)) 0 0 / 8px 1px,
    linear-gradient(var(--gold-hi), var(--gold-hi)) 0 0 / 1px 8px,
    linear-gradient(var(--gold-hi), var(--gold-hi)) 100% 0 / 8px 1px,
    linear-gradient(var(--gold-hi), var(--gold-hi)) 100% 0 / 1px 8px,
    linear-gradient(var(--gold-hi), var(--gold-hi)) 0 100% / 8px 1px,
    linear-gradient(var(--gold-hi), var(--gold-hi)) 0 100% / 1px 8px,
    linear-gradient(var(--gold-hi), var(--gold-hi)) 100% 100% / 8px 1px,
    linear-gradient(var(--gold-hi), var(--gold-hi)) 100% 100% / 1px 8px;
  background-repeat: no-repeat;
  transition: opacity .14s ease;
}
/* sheen band — transform-only, GPU friendly */
button::after, .buy::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 40%;
  pointer-events: none; z-index: 3;
  background: linear-gradient(105deg, transparent 8%, rgba(255,232,185,.28) 48%, rgba(255,214,150,.12) 60%, transparent 92%);
  transform: skewX(-22deg) translateX(0);
  transition: transform .45s cubic-bezier(.3,.6,.3,1);
}
button:hover, .buy:hover {
  transform: translateY(-1px) translateZ(0);
  filter: brightness(1.08) saturate(1.06);
  border-color: var(--gold-hi); border-bottom-color: rgba(180,130,60,.8);
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.32), inset 0 -6px 14px rgba(0,0,0,.45),
    inset 0 0 20px rgba(140,50,15,.45),
    0 4px 0 #1c0f07, 0 11px 22px rgba(0,0,0,.6), 0 0 18px rgba(207,90,42,.4);
}
button:hover::before, .buy:hover::before { opacity: 1; }
button:hover::after, .buy:hover::after { transform: skewX(-22deg) translateX(460%); }
button:active, .buy:active {
  transform: translateY(2px) scale(.985) translateZ(0);
  filter: brightness(.94);
  transition-duration: .07s;
  box-shadow:
    inset 0 3px 9px rgba(0,0,0,.8), inset 0 0 22px rgba(200,75,25,.5),
    0 1px 0 #1c0f07, 0 2px 6px rgba(0,0,0,.5);
}
button:active::before, .buy:active::before { opacity: .8; }

button.big {
  border-radius: 6px; letter-spacing: 2px; font-weight: 800;
  border-color: rgba(230,200,140,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.28), inset 0 -8px 18px rgba(0,0,0,.5),
    inset 0 0 24px rgba(90,30,8,.4),
    0 4px 0 #1c0f07, 0 12px 26px rgba(0,0,0,.6), 0 0 24px rgba(207,90,42,.24);
}
button.big:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,214,150,.36), inset 0 -8px 18px rgba(0,0,0,.45),
    inset 0 0 26px rgba(140,50,15,.5),
    0 5px 0 #1c0f07, 0 15px 30px rgba(0,0,0,.62), 0 0 30px rgba(207,90,42,.45);
}
button.big:active {
  transform: translateY(3px) scale(.985) translateZ(0);
  box-shadow: inset 0 4px 12px rgba(0,0,0,.8), inset 0 0 28px rgba(200,75,25,.5), 0 1px 0 #1c0f07, 0 3px 8px rgba(0,0,0,.5);
}

/* disabled — re-asserted LAST so it beats the hover/press rules above */
button:disabled, .buy:disabled {
  filter: grayscale(.75) brightness(.55); transform: none; cursor: default;
  border-color: rgba(120,110,95,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 rgba(0,0,0,.4);
}
button:disabled::after, .buy:disabled::after { content: none; }
button:disabled::before, .buy:disabled::before { opacity: .18; }

/* chromeless / special variants keep their own identity: no sheen, no notches */
.navbtn::before, .navbtn::after,
button.ghost::before, button.ghost::after, .ghost::before, .ghost::after,
.mini::before, .mini::after,
.tab::before, .tab::after, .tm-btn::before, .tm-btn::after,
.fr-tab::before, .fr-tab::after, .sb-chan::before, .sb-chan::after,
.chip::before, .chip::after,
.gfx-side::before, .gfx-side::after,
.modal-x::before, .modal-x::after,
.mc-input button::before, .mc-input button::after,
.sb-input button::before, .sb-input button::after,
#sb-toggle::before, #sb-toggle::after { content: none; }
/* (.navbtn.badge::after re-enables its dot at higher specificity — geometry pinned above) */
#sb-toggle { overflow: visible; }               /* its count badge sits outside */
.gfx-side, .gfx-side:hover, .gfx-side:active { transform: none; }  /* rocker doesn't bob */
.tok { overflow: visible; }                     /* battle tokens: FX/popups escape */
.tok::before, .tok::after { content: none; }

/* ------------------------------------------------------------------
   [3] EVERYTHING LOOKS PRESSABLE
   ------------------------------------------------------------------ */
/* tabs / mode toggles / sidebar channels / filter pills — raised keys */
.tab, .tm-btn, .fr-tab, .sb-chan, .chip {
  cursor: pointer;
  background: linear-gradient(180deg, #241d2c, #131017);
  border: 1px solid #3a3140;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 rgba(0,0,0,.55), 0 5px 10px rgba(0,0,0,.3);
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.tab:hover, .tm-btn:hover, .fr-tab:hover, .sb-chan:hover, .chip:hover {
  transform: translateY(-1px); filter: none; color: var(--ink);
  border-color: rgba(200,164,90,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 3px 0 rgba(0,0,0,.55), 0 7px 14px rgba(0,0,0,.35), 0 0 10px rgba(200,164,90,.12);
}
.tab:active, .tm-btn:active, .fr-tab:active, .sb-chan:active, .chip:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 1px 0 rgba(0,0,0,.5);
}
/* selected state re-asserted (so hover above can't wash it out) */
.tab.active, .tm-btn.active, .fr-tab.active, .sb-chan.active {
  background: linear-gradient(180deg, rgba(200,164,90,.2), rgba(200,164,90,.05)), linear-gradient(180deg, #241d2c, #131017);
  color: var(--gold-hi); border-color: rgba(200,164,90,.5);
  box-shadow: inset 0 -2px 0 var(--gold-mid), inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 rgba(0,0,0,.55), 0 0 12px rgba(200,164,90,.15);
  text-shadow: 0 0 8px rgba(200,164,90,.5);
}
.chip.active {
  background: linear-gradient(180deg, #ecd9a8, #b98f42);
  color: #1c1206; border-color: #f4e3b2;
  box-shadow: 0 0 14px rgba(200,164,90,.35), 0 2px 0 var(--gold-edge);
  text-shadow: 0 1px 0 rgba(255,242,205,.4);
}

/* mode/offer cards — raised plates with a solid extruded base edge */
.hub-card, .play-card, .bundle, .exchange-card, .pack-card {
  cursor: pointer; position: relative;
  border: 1px solid rgba(200,164,90,.26);
  box-shadow:
    inset 0 1px 0 rgba(200,164,90,.14), inset 0 0 30px rgba(0,0,0,.4),
    0 4px 0 rgba(5,3,8,.95), 0 10px 22px rgba(0,0,0,.5);
  transition: transform .15s cubic-bezier(.2,.7,.3,1), border-color .15s ease, box-shadow .15s ease;
}
.hub-card:hover, .play-card:hover, .bundle:hover, .exchange-card:hover, .pack-card:hover {
  transform: translateY(-4px);
  border-color: rgba(200,164,90,.7);
  box-shadow:
    inset 0 1px 0 rgba(200,164,90,.2), inset 0 0 30px rgba(0,0,0,.35),
    0 7px 0 rgba(5,3,8,.95), 0 18px 34px rgba(0,0,0,.6), 0 0 24px rgba(207,90,42,.26);
}
.hub-card:active, .play-card:active, .bundle:active, .exchange-card:active, .pack-card:active {
  transform: translateY(1px) scale(.995);
  box-shadow:
    inset 0 3px 12px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.4),
    0 1px 0 rgba(5,3,8,.95), 0 4px 10px rgba(0,0,0,.45);
}
/* wide feature cards (Gauntlet / Saga) keep their ember identity */
.hub-card-wide { border-color: rgba(207,90,42,.5); }
.hub-card-wide:hover { border-color: var(--ember); box-shadow: inset 0 1px 0 rgba(200,164,90,.2), 0 7px 0 rgba(5,3,8,.95), 0 18px 34px rgba(0,0,0,.6), 0 0 30px rgba(207,90,42,.42); }
/* other clickable rows/tiles get a press too */
.guild-card:active, .pf-border-opt:active, .fr-item:active, .pool-card:active {
  transform: translateY(1px) scale(.995);
}

/* ------------------------------------------------------------------
   [4] CHAT — forged wax-seal toggle orb, translucent forged panel,
   ember-vs-steel message bubbles, themed input row. CSS only.
   ------------------------------------------------------------------ */
/* floating toggle — ember wax-seal orb */
#sb-toggle {
  background:
    radial-gradient(120% 120% at 32% 24%, rgba(255,195,125,.35), transparent 55%),
    radial-gradient(150% 150% at 50% 118%, rgba(207,90,42,.65), transparent 70%),
    linear-gradient(180deg, #6e1a1e, #390d10);
  border: 1px solid rgba(236,217,168,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,220,160,.3), inset 0 -6px 12px rgba(0,0,0,.5),
    0 0 18px rgba(207,90,42,.45), 0 6px 16px rgba(0,0,0,.6);
  text-shadow: 0 1px 2px #000;
  transition: transform .14s ease, box-shadow .14s ease;
}
#sb-toggle:hover {
  filter: none; transform: translateY(-1px) scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,220,160,.4), inset 0 -6px 12px rgba(0,0,0,.45),
    0 0 28px rgba(207,90,42,.65), 0 9px 20px rgba(0,0,0,.65);
}
#sb-toggle:active {
  transform: translateY(1px) scale(.95);
  box-shadow: inset 0 3px 9px rgba(0,0,0,.75), 0 0 14px rgba(207,90,42,.4), 0 2px 8px rgba(0,0,0,.5);
}
/* unread badge — gold seal, soft pulse (transform-only) */
.sb-badge {
  background: linear-gradient(180deg, #ffd98a, #c8842c);
  border: 1px solid #f4e3b2; color: #1c1206;
  box-shadow: 0 0 10px rgba(232,150,80,.7), 0 1px 3px rgba(0,0,0,.5);
  animation: hcBadgePulse 1.6s ease-in-out infinite;
}
@keyframes hcBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* the panel — translucent forged steel, gold hairlines */
.sb-inner {
  background: linear-gradient(180deg, rgba(24,19,29,.96), rgba(10,8,13,.98));
  border-left: 1px solid rgba(200,164,90,.28);
  box-shadow: -10px 0 30px rgba(0,0,0,.6), inset 1px 0 0 rgba(200,164,90,.1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sb-channels { border-bottom: 1px solid rgba(200,164,90,.16); background: rgba(8,6,10,.45); }
.sb-head {
  font-family: var(--font-display); letter-spacing: 1px; color: var(--gold-hi);
  border-bottom: 1px solid rgba(200,164,90,.16);
  text-shadow: 0 0 10px rgba(200,164,90,.25), 0 1px 2px #000;
}
.fr-chat {
  background: linear-gradient(180deg, rgba(24,19,29,.8), rgba(11,9,14,.9));
  border: 1px solid rgba(200,164,90,.16);
  box-shadow: inset 0 1px 0 rgba(200,164,90,.08), 0 8px 20px rgba(0,0,0,.4);
}
.fr-chat-head { font-family: var(--font-display); letter-spacing: 1px; border-bottom: 1px solid rgba(200,164,90,.16); }

/* message bubbles — others = steel, mine = ember; sharp-cornered tail side */
.cmsg {
  background: linear-gradient(180deg, rgba(42,36,50,.85), rgba(24,20,30,.92));
  border: 1px solid rgba(255,255,255,.06); border-left: 2px solid rgba(200,164,90,.35);
  border-radius: 9px 9px 9px 2px;
  padding: 7px 11px; font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.cmsg.me {
  background: linear-gradient(180deg, rgba(88,33,26,.88), rgba(46,16,14,.94));
  border: 1px solid rgba(207,90,42,.28); border-right: 2px solid rgba(207,90,42,.6);
  border-radius: 9px 9px 2px 9px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,200,150,.07);
}
.cmsg-head { margin-bottom: 4px; }
.cmsg-av { border: 1px solid rgba(200,164,90,.3); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.cmsg-name { font-family: var(--font-display); letter-spacing: .4px; font-size: 12.5px; }
.cmsg-lvl { color: var(--gold-mid); opacity: .8; font-size: 10px; letter-spacing: .5px; }
.cmsg-body { font-size: 13.5px; }
.cmsg.sys { background: transparent; border: none; box-shadow: none; }

/* input row — inset iron field + forged ember send key */
.sb-input, .fr-chat-input { border-top: 1px solid rgba(200,164,90,.16); background: rgba(8,6,10,.5); }
.sb-input input, .fr-chat-input input, .mc-input input {
  background: linear-gradient(180deg, #0d0a11, #16121c);
  border: 1px solid #3f3648; border-radius: 5px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
}
.sb-input button, .mc-input button {
  color: #f2e3c0; font-family: var(--font-display); font-weight: 700; letter-spacing: .5px;
  background:
    radial-gradient(140% 130% at 50% 118%, rgba(207,90,42,.55), transparent 74%),
    linear-gradient(180deg, #40281a 0%, #2b1810 48%, #170d08 100%);
  border: 1px solid rgba(200,164,90,.5); border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,214,150,.2), 0 2px 0 #1c0f07, 0 4px 10px rgba(0,0,0,.4);
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.sb-input button:hover, .mc-input button:hover { filter: brightness(1.12); border-color: var(--gold-hi); }
.sb-input button:active, .mc-input button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 1px 0 #1c0f07;
}
.match-chat { background: linear-gradient(180deg, rgba(20,16,25,.92), rgba(10,8,13,.94)); border: 1px solid rgba(200,164,90,.22); box-shadow: 0 8px 20px rgba(0,0,0,.5); }

/* ------------------------------------------------------------------
   [5] CUSTOM CURSORS — gothic dagger set (inline SVG, <1KB each).
   Desktop only: gated on hover+fine pointer so touch is untouched.
   Default = dark dagger, tip = hotspot (5 5). Interactive = tilted
   gold dagger with ember tip-glow (hotspot 8 3). Text keeps I-beam.
   ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  html, body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ecd9a8'/%3E%3Cstop offset='1' stop-color='%238a6a2c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(-45 14 14)'%3E%3Cpolygon points='14,1 17,12.5 14,14.5 11,12.5' fill='%2323222c' stroke='%234a4956' stroke-width='.6'/%3E%3Cpolygon points='14,1 14,14.5 11,12.5' fill='%233a3947'/%3E%3Crect x='8.6' y='14' width='10.8' height='2.6' rx='1.2' fill='url(%23h)'/%3E%3Crect x='12.7' y='16.2' width='2.6' height='5.6' rx='1' fill='%233a2416'/%3E%3Ccircle cx='14' cy='23.4' r='1.9' fill='url(%23h)'/%3E%3C/g%3E%3C/svg%3E") 5 5, auto;
  }
  a, button, .buy, .navbtn, .hub-card, .play-card, .bundle, .exchange-card, .pack-card,
  .tab, .tm-btn, .fr-tab, .sb-chan, .chip, .cell, .pool-card, .guild-card, .pf-border-opt,
  .fr-item, .fr-item *, .hub-card *, .play-card *, [data-view], [data-howto], .pf-widget, .pf-widget *,
  select, input[type="checkbox"], input[type="radio"], .slot.filled, .gfx-side, #sb-toggle,
  .modal-x, .coach-skip, .cmsg-head.clickable, .cmsg-head.clickable * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe9b8'/%3E%3Cstop offset='1' stop-color='%23c8842c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='3.5' r='3.4' fill='%23cf5a2a' opacity='.4'/%3E%3Cg transform='rotate(-30 14 14)'%3E%3Cpolygon points='14,1 17,12.5 14,14.5 11,12.5' fill='url(%23h)' stroke='%237c5c22' stroke-width='.6'/%3E%3Crect x='8.6' y='14' width='10.8' height='2.6' rx='1.2' fill='url(%23h)' stroke='%237c5c22' stroke-width='.5'/%3E%3Crect x='12.7' y='16.2' width='2.6' height='5.6' rx='1' fill='%233a2416'/%3E%3Ccircle cx='14' cy='23.4' r='1.9' fill='url(%23h)'/%3E%3C/g%3E%3C/svg%3E") 8 3, pointer;
  }
  /* usability guards: text fields keep the I-beam, disabled buttons aren't "pressable" */
  input[type="text"], input[type="password"], input[type="email"], input[type="number"],
  input:not([type]), textarea { cursor: text; }
  button:disabled, .buy:disabled {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ecd9a8'/%3E%3Cstop offset='1' stop-color='%238a6a2c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='rotate(-45 14 14)'%3E%3Cpolygon points='14,1 17,12.5 14,14.5 11,12.5' fill='%2323222c' stroke='%234a4956' stroke-width='.6'/%3E%3Cpolygon points='14,1 14,14.5 11,12.5' fill='%233a3947'/%3E%3Crect x='8.6' y='14' width='10.8' height='2.6' rx='1.2' fill='url(%23h)'/%3E%3Crect x='12.7' y='16.2' width='2.6' height='5.6' rx='1' fill='%233a2416'/%3E%3Ccircle cx='14' cy='23.4' r='1.9' fill='url(%23h)'/%3E%3C/g%3E%3C/svg%3E") 5 5, auto;
  }
  .pf-widget-bar { cursor: help; }
}

/* ------------------------------------------------------------------
   REDUCED MOTION — kill sheen + movement + pulse (final say)
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  button::after, .buy::after { display: none !important; }
  .sb-badge { animation: none !important; }
  button, .buy, .tab, .tm-btn, .fr-tab, .sb-chan, .chip,
  .hub-card, .play-card, .bundle, .exchange-card, .pack-card { transition: none !important; }
  button:hover, .buy:hover, button:active, .buy:active,
  .tab:hover, .tm-btn:hover, .fr-tab:hover, .sb-chan:hover, .chip:hover,
  .tab:active, .tm-btn:active, .fr-tab:active, .sb-chan:active, .chip:active,
  .hub-card:hover, .play-card:hover, .bundle:hover, .exchange-card:hover, .pack-card:hover,
  .hub-card:active, .play-card:active, .bundle:active, .exchange-card:active, .pack-card:active,
  .guild-card:active, .pf-border-opt:active, .fr-item:active, .pool-card:active,
  #sb-toggle:hover, #sb-toggle:active { transform: none !important; }
}

/* ------------------------------------------------------------------
   FIX: play-zone rows — buttons must never shrink below their label
   (the sheen system uses overflow:hidden, so a squeezed button CLIPS
   its text, e.g. "Unranked" -> "UNR"). Let the row wrap instead.
   ------------------------------------------------------------------ */
.play-card .row { flex-wrap: wrap; }
.play-card .row button, .play-card .row .buy {
  flex: 1 1 auto;
  min-width: max-content;
  white-space: nowrap;
}

/* ========================================================================
   HOLLOWCROSS POLISH PASS 3 — GRAVESTONE HUB
   The main menu reads as a graveyard of choices: every hub surface is an
   old crumbling headstone. Slate/granite feTurbulence texture, moss and
   grime stains, thick bevels, chipped clip-path silhouettes (3 variants +
   arched slabs for Saga/Gauntlet), hairline cracks that glow ember/moss
   on hover, and a "grind-down" press. Because clip-path clips outer
   box-shadows, ALL depth here is built inside the silhouette (bevel
   highlights, sunken face, dark plinth band at the base).
   Everything static except transform/opacity. The forged-ember system
   stays for the rest of the app.
   ======================================================================== */

/* --- the slabs: hub mode cards + hub play cards ----------------------- */
.hub-card, .play-card {
  border: 1px solid #0b0c10;
  border-radius: 3px;
  background:
    radial-gradient(55% 42% at 10% 100%, rgba(96,116,62,.12), transparent 72%),
    radial-gradient(40% 36% at 94% 4%, rgba(74,96,70,.09), transparent 70%),
    radial-gradient(70% 80% at 74% 88%, rgba(10,11,15,.55), transparent 76%),
    radial-gradient(34% 30% at 30% 12%, rgba(190,200,220,.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.3 0 0 -0.24'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(168deg, #292a32 0%, #1f2027 42%, #131419 100%);
  box-shadow:
    inset 1px 1px 0 rgba(215,222,238,.11),
    inset 2px 2px 8px rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.7),
    inset -4px -6px 16px rgba(0,0,0,.5),
    inset 0 -5px 0 rgba(5,6,9,.9),
    inset 0 0 44px rgba(0,0,0,.35);
  clip-path: polygon(0 9px, 9px 0, 36% 0, 38% 4px, 41% 0, calc(100% - 7px) 0, 100% 7px, 100% 36%, calc(100% - 4px) 40%, 100% 44%, 100% calc(100% - 15px), calc(100% - 17px) 100%, 30% 100%, 27% calc(100% - 4px), 24% 100%, 8px 100%, 0 calc(100% - 8px), 0 64%, 4px 60%, 0 56%);
  transition: transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
/* second silhouette so neighbouring stones don't look cloned */
.hub-cards .hub-card:nth-child(even):not(.hub-card-wide) {
  clip-path: polygon(0 7px, 7px 0, calc(100% - 16px) 0, 100% 13px, 100% 60%, calc(100% - 4px) 64%, 100% 68%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 62% 100%, 59% calc(100% - 4px), 56% 100%, 9px 100%, 0 calc(100% - 10px), 0 34%, 4px 30%, 0 26%);
}
/* third for the play cards */
.play-card {
  clip-path: polygon(0 10px, 10px 0, 58% 0, 60% 4px, 63% 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 18px), calc(100% - 16px) 100%, 34% 100%, 31% calc(100% - 5px), 28% 100%, 9px 100%, 0 calc(100% - 9px), 0 48%, 4px 44%, 0 40%);
}
/* Saga / Gauntlet — bigger slabs with a chamfered tombstone arch on top,
   a bite out of the bottom-left, faint blood soaked into the stone */
.hub-card-wide, .hub-cards .hub-card-wide:nth-child(even) {
  clip-path: polygon(0 30px, 9px 13px, 26px 4px, 52px 0, calc(100% - 56px) 0, calc(100% - 28px) 5px, calc(100% - 10px) 15px, 100% 32px, 100% 58%, calc(100% - 5px) 62%, 100% 66%, 100% calc(100% - 9px), calc(100% - 11px) 100%, 40% 100%, 37.5% calc(100% - 5px), 35% 100%, 18px 100%, 0 calc(100% - 14px));
  background:
    radial-gradient(60% 60% at 22% 108%, rgba(112,38,30,.14), transparent 72%),
    radial-gradient(55% 42% at 8% 100%, rgba(96,116,62,.1), transparent 72%),
    radial-gradient(46% 40% at 92% 6%, rgba(74,96,70,.08), transparent 70%),
    radial-gradient(70% 80% at 74% 88%, rgba(10,11,15,.55), transparent 76%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.3 0 0 -0.24'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(168deg, #2c2c34 0%, #212129 42%, #141419 100%);
  border-color: #0d0d12;
}

/* --- hairline cracks (::before) + their ember/moss glow twin (::after) - */
.hub-card::before, .play-card::before {
  content: ""; position: absolute; inset: 0; width: auto; height: auto;
  border: 0; pointer-events: none; z-index: 1; opacity: .9;
  background:
    linear-gradient(114deg, transparent 47%, rgba(0,0,0,.5) 49.6%, rgba(0,0,0,.55) 50.4%, rgba(235,240,250,.07) 51.6%, transparent 54%) 88% 0 / 34% 62% no-repeat,
    linear-gradient(38deg, transparent 46%, rgba(0,0,0,.45) 49.4%, rgba(0,0,0,.5) 50.6%, rgba(235,240,250,.06) 52%, transparent 55%) 6% 100% / 30% 52% no-repeat;
  transition: opacity .15s ease;
}
.hub-card::after, .play-card::after {
  content: ""; position: absolute; inset: 0; width: auto; height: auto;
  border: 0; pointer-events: none; z-index: 1; opacity: 0;
  background:
    linear-gradient(114deg, transparent 46%, rgba(232,140,60,.45) 49.8%, rgba(232,140,60,.5) 50.4%, rgba(150,190,95,.22) 52%, transparent 55%) 88% 0 / 34% 62% no-repeat,
    linear-gradient(38deg, transparent 45%, rgba(232,140,60,.38) 49.6%, rgba(232,140,60,.42) 50.8%, rgba(150,190,95,.18) 52.4%, transparent 56%) 6% 100% / 30% 52% no-repeat;
  transition: opacity .18s ease;
}
.hub-card:hover::after, .play-card:hover::after { opacity: .85; }
.hub-card:active::after, .play-card:active::after { opacity: 1; transition-duration: .05s; }

/* --- hover: the stone lifts, moss+ember light pools in the recess ------ */
.hub-card:hover, .play-card:hover {
  transform: translateY(-4px);
  border-color: #23261c;
  filter: brightness(1.06);
  box-shadow:
    inset 1px 1px 0 rgba(225,232,248,.16),
    inset -1px -1px 0 rgba(0,0,0,.7),
    inset -4px -6px 16px rgba(0,0,0,.45),
    inset 0 -5px 0 rgba(5,6,9,.9),
    inset 0 0 46px rgba(120,140,80,.1),
    inset 0 -16px 36px rgba(207,90,42,.13);
}
.hub-card-wide:hover { border-color: #2a1e18; }
/* --- press: grinds down ------------------------------------------------ */
.hub-card:active, .play-card:active {
  transform: translateY(1px) scale(.997);
  filter: brightness(.95);
  transition-duration: .07s;
  box-shadow:
    inset 0 3px 14px rgba(0,0,0,.6),
    inset 1px 1px 0 rgba(215,222,238,.08),
    inset 0 -4px 0 rgba(5,6,9,.9),
    inset 0 0 44px rgba(0,0,0,.4);
}

/* --- engraved lettering: dark above, faint light below; gold leaf kept
       only on headings --------------------------------------------------- */
.hub-card h3, .play-card h3 {
  color: var(--gold-mid);
  text-shadow: 0 -1px 1px rgba(0,0,0,.95), 0 1px 0 rgba(230,210,160,.14), 0 0 14px rgba(200,164,90,.15);
}
.hub-card-wide h3 {
  color: #e8905a;
  text-shadow: 0 -1px 1px rgba(0,0,0,.95), 0 1px 0 rgba(240,180,130,.14), 0 0 16px rgba(207,90,42,.22);
}
.hub-card p, .play-card p { color: #8e8b93; text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05); }

/* --- the hub's action buttons (FIGHT / RANKED / Unranked etc.) become
       small chipped stones; no gold ticks (gold leaf = headings only),
       sheen becomes a cold stone glint. Row-wrap fix above is untouched. - */
.play-card button, .play-card .buy {
  color: #ded6c2;
  background:
    radial-gradient(50% 60% at 85% 100%, rgba(10,11,15,.5), transparent 75%),
    radial-gradient(40% 50% at 8% 0%, rgba(200,210,230,.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.3 0 0 -0.24'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(172deg, #33343d 0%, #26272e 45%, #17181d 100%);
  border: 1px solid #0b0c10;
  border-radius: 3px;
  box-shadow:
    inset 1px 1px 0 rgba(220,226,242,.14),
    inset -1px -2px 0 rgba(0,0,0,.65),
    inset 0 -4px 0 rgba(6,7,10,.9),
    inset 0 0 16px rgba(0,0,0,.3);
  text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.08);
  clip-path: polygon(0 5px, 5px 0, 34% 0, 36% 3px, 38% 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 8px), calc(100% - 9px) 100%, 60% 100%, 58% calc(100% - 3px), 56% 100%, 5px 100%, 0 calc(100% - 5px));
}
.play-card button::before, .play-card .buy::before { content: none; }
.play-card button::after, .play-card .buy::after {
  background: linear-gradient(105deg, transparent 8%, rgba(225,232,245,.16) 48%, rgba(210,220,235,.08) 60%, transparent 92%);
}
.play-card button:hover, .play-card .buy:hover {
  transform: translateY(-1px) translateZ(0);
  filter: brightness(1.1);
  border-color: #343927;
  box-shadow:
    inset 1px 1px 0 rgba(230,236,250,.2),
    inset -1px -2px 0 rgba(0,0,0,.6),
    inset 0 -4px 0 rgba(6,7,10,.9),
    inset 0 0 18px rgba(120,140,80,.15),
    inset 0 -10px 20px rgba(207,90,42,.15);
}
.play-card button:active, .play-card .buy:active {
  transform: translateY(2px) scale(.985) translateZ(0);
  filter: brightness(.9);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.7),
    inset 0 -3px 0 rgba(6,7,10,.9),
    inset 0 0 18px rgba(207,90,42,.2);
}

/* --- 2D/3D rocker: a stone slab with a sunken black trough; the gold
       knob stays gold (it's the active indicator) ------------------------ */
.gfx-bar {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.3 0 0 -0.24'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(172deg, #26272e 0%, #1c1d23 50%, #131419 100%);
  border: 1px solid #0b0c10; border-radius: 3px;
  box-shadow:
    inset 1px 1px 0 rgba(215,222,238,.09),
    inset -1px -2px 0 rgba(0,0,0,.6),
    inset 0 -4px 0 rgba(5,6,9,.85),
    inset 0 0 26px rgba(0,0,0,.3);
  clip-path: polygon(0 6px, 6px 0, calc(100% - 10px) 0, 100% 8px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 26% 100%, 24% calc(100% - 3px), 22% 100%, 6px 100%, 0 calc(100% - 7px));
}
.gfx-label { color: #8e8b93; text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05); }
.gfx-toggle { background: #07080b; border-color: #000; box-shadow: inset 0 3px 9px rgba(0,0,0,.9), 0 1px 0 rgba(215,222,238,.05); }
.gfx-side { text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06); }

/* ------------------------------------------------------------------
   FIX: #sb-toggle glyph centering — the 💬 was riding low/left because
   the circle relied on default inline layout (UA padding + emoji
   baseline). Flex-center it; 2px bottom padding counters the emoji
   glyph's low optical center. Badge is position:absolute → unaffected.
   ------------------------------------------------------------------ */
#sb-toggle {
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 2px; line-height: 1; text-indent: 0;
}

/* gravestones under reduced motion: no lift/grind, cracks stay dark */
@media (prefers-reduced-motion: reduce) {
  .hub-card::before, .play-card::before, .hub-card::after, .play-card::after { transition: none !important; }
  .hub-card:hover::after, .play-card:hover::after, .hub-card:active::after, .play-card:active::after { opacity: 0 !important; }
  .play-card button:hover, .play-card .buy:hover, .play-card button:active, .play-card .buy:active { transform: none !important; }
}

/* ------------------------------------------------------------------
   FIX: topbar nav — buttons NEVER shrink/clip their labels; the bar
   side-scrolls instead (esp. mobile). Scrollbar hidden but scrollable.
   ------------------------------------------------------------------ */
#topbar nav {
  overflow-x: auto;
  flex-wrap: nowrap;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* firefox */
  overscroll-behavior-x: contain; /* don't rubber-band the page */
}
#topbar nav::-webkit-scrollbar { display: none; }
#topbar .navbtn {
  flex: 0 0 auto;         /* fixed space — no squeezing */
  min-width: max-content;
  white-space: nowrap;
}

/* ============================================================ SOULS mode */
.hub-card-souls h3 { color: #cdb2e0; }
.hub-card-souls { background: linear-gradient(135deg, rgba(60,40,80,.28), rgba(20,16,26,.55)); }

.souls-wrap { max-width: 1180px; margin: 0 auto; padding: 8px 10px 40px; }
.souls-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 2px 12px; }
.souls-head h2 { margin: 0; color: #c8a45a; letter-spacing: 2px; }
.souls-head h2 small { color: #9b8fb0; font-size: 12px; letter-spacing: 1px; }
.souls-tabs { display: flex; gap: 8px; margin-left: auto; }
.souls-tab { background: #17141f; color: #cdbfe0; border: 1px solid #3a3050; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-family: inherit; }
.souls-tab.active { background: #2a2140; color: #f0e6ff; border-color: #7a5aa8; }
.souls-pane.hidden, .souls-duel.hidden, .souls-wrap.hidden { display: none; }
.souls-panel { background: rgba(16,14,22,.72); border: 1px solid #2a2436; border-radius: 12px; padding: 16px; }

.souls-lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 780px) { .souls-lobby-grid { grid-template-columns: 1fr; } }
.souls-select { width: 100%; background: #0e0c14; color: #e7e2d8; border: 1px solid #3a3050; border-radius: 8px; padding: 10px; font-family: inherit; margin-bottom: 8px; }
.souls-badge { font-size: 13px; padding: 4px 2px; }
.souls-badge.ok { color: #6fc97a; } .souls-badge.bad { color: #d98080; }
.souls-lobby-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.souls-queue { margin-top: 12px; color: #c8a45a; }
.souls-rules { margin: 4px 0 0; padding-left: 18px; color: #cfc7bb; line-height: 1.5; font-size: 14px; }
.souls-rules li { margin-bottom: 7px; }

/* -------- deck builder -------- */
.souls-builder { display: grid; grid-template-columns: 1fr 340px; gap: 14px; position: relative; }
@media (max-width: 900px) { .souls-builder { grid-template-columns: 1fr; } }
.souls-bfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.souls-bfilters input, .souls-bfilters select { background: #0e0c14; color: #e7e2d8; border: 1px solid #3a3050; border-radius: 8px; padding: 8px; font-family: inherit; }
.souls-bfilters input { flex: 1 1 160px; }
.souls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.souls-chip { position: relative; background: #12101a; border: 1px solid #2c2740; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 3/4; transition: transform .1s, border-color .1s; }
.souls-chip:hover { transform: translateY(-2px); }
.souls-chip.in-deck { border-color: #c8a45a; box-shadow: 0 0 0 1px #c8a45a inset; }
.souls-chip .sc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.souls-chip .sc-cost { position: absolute; top: 3px; left: 3px; z-index: 3; background: #0a0a0dcc; color: #cdb2e0; border: 1px solid #7a5aa8; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.souls-chip .sc-aff { position: absolute; top: 3px; right: 3px; z-index: 3; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #000; }
.souls-chip .sc-star { position: absolute; top: 20px; right: 3px; z-index: 3; color: #ffd970; font-size: 10px; text-shadow: 0 1px 2px #000; }
.souls-chip .sc-ab { position: absolute; bottom: 30px; left: 3px; z-index: 3; background: #0a0a0dcc; border: 1px solid; border-radius: 4px; font-size: 8px; padding: 1px 3px; color: #e7e2d8; max-width: 84%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.souls-chip .sc-name { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 3; text-align: center; font-size: 9px; color: #f0eadf; text-shadow: 0 1px 2px #000; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.souls-chip .sc-atk, .souls-chip .sc-hp { position: absolute; bottom: 2px; z-index: 3; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.souls-chip .sc-atk { left: 4px; color: #ffcf6a; } .souls-chip .sc-hp { right: 4px; color: #ff8a8a; }
.souls-chip .sc-check { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #c8a45a; background: #0a0a0d55; }

/* -------- SOULS builder cards reuse the GENERAL .card visual -------- */
.souls-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); align-items: start; }
.souls-card { position: relative; cursor: pointer; }
/* let the shared .card fill the responsive grid cell instead of its fixed size */
.souls-card .card { width: 100%; height: auto; aspect-ratio: 5 / 7; }
.souls-card.in-deck .card { outline: 2px solid #c8a45a; outline-offset: -2px; box-shadow: 0 0 0 2px #c8a45a inset, 0 0 14px rgba(200,164,90,.55); }
.souls-card .sc-check { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #ffe08a; background: rgba(10,10,13,.34); text-shadow: 0 2px 6px #000; pointer-events: none; }
/* soul COST badge — middle-left, reads as a cost skull/gem (souls = the resource) */
.souls-card .sc-soul {
  position: absolute; z-index: 8; top: 50%; left: -5px; transform: translateY(-50%);
  min-width: 30px; height: 26px; padding: 0 6px 0 4px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  font-weight: 800; font-size: 13px; letter-spacing: -.5px; color: #f2e9ff; text-shadow: 0 1px 2px #000;
  background: radial-gradient(circle at 38% 30%, #47305f, #180d26);
  border: 1.5px solid #b98cff; box-shadow: 0 2px 6px #000, 0 0 10px rgba(150,90,220,.5);
  pointer-events: none;
}
/* ability marker — small ◆ under the affinity symbol */
.souls-card .sc-ab-mark {
  position: absolute; z-index: 8; top: 30px; right: 3px;
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #ffd970;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: #ffd970; background: rgba(10,8,14,.82); box-shadow: 0 1px 3px #000;
  pointer-events: none;
}

/* -------- cost range slider (dual overlapping range inputs) -------- */
.sb-costslider { flex: 1 1 200px; min-width: 180px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.sb-cost-label { font-size: 12px; color: #cfc7bb; }
.sb-cost-label b { color: #c8a45a; }
.sb-cost-track { position: relative; height: 22px; }
.sb-cost-track input[type=range] {
  position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
/* draw one shared track via the low slider's shadow */
.sb-cost-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 4px;
  background: #2c2740; border-radius: 3px;
}
.sb-cost-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #d8b9ff, #7a5aa8);
  border: 1.5px solid #0a0a0d; box-shadow: 0 1px 3px #000; cursor: pointer; margin-top: -7px;
}
.sb-cost-track input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #d8b9ff, #7a5aa8); border: 1.5px solid #0a0a0d; box-shadow: 0 1px 3px #000; cursor: pointer;
}
.sb-cost-track input[type=range]::-webkit-slider-runnable-track { background: none; height: 4px; }
.sb-cost-track input[type=range]::-moz-range-track { background: none; height: 4px; }
#sb-cost-hi { z-index: 3; }
#sb-cost-lo { z-index: 4; }

/* -------- role legend (info disclosure) -------- */
.souls-rolelegend { margin: 0 0 10px; font-size: 12px; }
.souls-rolelegend summary { cursor: pointer; color: #b8a8d8; padding: 4px 0; user-select: none; }
.souls-rolelegend ul { list-style: none; margin: 6px 0 0; padding: 8px 10px; background: #12101a; border: 1px solid #2c2740; border-radius: 8px; }
.souls-rolelegend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: #cfc7bb; }
.souls-rolelegend .role-badge { position: static; transform: none; flex: 0 0 auto; width: 22px; height: 22px; }

.souls-deckpane { position: sticky; top: 66px; align-self: start; max-height: calc(100vh - 90px); overflow-y: auto; }
.souls-deckhead { display: flex; gap: 8px; margin-bottom: 8px; }
.souls-deckhead input { flex: 1; background: #0e0c14; color: #e7e2d8; border: 1px solid #3a3050; border-radius: 8px; padding: 8px; }
.souls-deckhead select { background: #0e0c14; color: #e7e2d8; border: 1px solid #3a3050; border-radius: 8px; padding: 8px; }
.souls-valid { font-weight: 700; padding: 6px; border-radius: 6px; text-align: center; margin-bottom: 8px; }
.souls-valid.ok { color: #6fc97a; background: #163020; } .souls-valid.bad { color: #d98080; background: #301616; }
.souls-hist { margin-bottom: 10px; }
.souls-hist-title { font-size: 11px; color: #9b8fb0; margin-bottom: 3px; }
.souls-hist-bars { display: flex; align-items: flex-end; gap: 3px; height: 60px; }
.shb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.shb-bar { width: 100%; min-height: 3px; border-radius: 2px 2px 0 0; }
.shb-n { font-size: 9px; color: #cfc7bb; } .shb-c { font-size: 9px; color: #7a7286; }
.souls-decklist { display: flex; flex-direction: column; gap: 6px; }
.souls-dl-cost { font-size: 12px; color: #c8a45a; border-bottom: 1px solid #2a2436; padding-bottom: 2px; }
.souls-dl-cards { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.souls-dl-card { display: inline-flex; align-items: center; gap: 3px; background: #17141f; border: 1px solid #2c2740; border-radius: 5px; padding: 2px 5px; font-size: 10px; color: #e7e2d8; cursor: pointer; max-width: 100%; }
.souls-dl-card img { width: 14px; height: 14px; object-fit: cover; border-radius: 2px; }
.souls-dl-card span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.souls-deckbtns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.souls-drawer-toggle { display: none; }
@media (max-width: 900px) {
  .souls-deckpane { position: fixed; right: 0; top: 0; bottom: 0; width: min(86vw, 360px); z-index: 60; border-radius: 12px 0 0 12px; transform: translateX(100%); transition: transform .2s; max-height: 100vh; }
  .souls-deckpane.open { transform: translateX(0); }
  .souls-drawer-toggle { display: flex; align-items: center; gap: 4px; position: fixed; right: 10px; bottom: 14px; z-index: 61; background: #2a2140; color: #f0e6ff; border: 1px solid #7a5aa8; border-radius: 20px; padding: 10px 14px; cursor: pointer; }
}

/* -------- live duel -------- */
.souls-duel { position: fixed; inset: 0; z-index: 50; background: #07060c; display: flex; flex-direction: column; }
.souls-stage { position: absolute; inset: 0; z-index: 0; }
/* Reserve a top band so the OPPONENT Warden totem (first row) is never jammed
   against the viewport top or covered by the top-centre turn clock / top-left log
   — its badge + HP must be fully readable. Bottom padding stays small. */
.souls-board { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 4px; padding: calc(env(safe-area-inset-top, 0px) + 36px) 8px 8px; min-height: 0; }
.souls-board .sb-warden { flex: 0 0 auto; } /* wardens never shrink — both totems stay fully visible */
/* .sb-row spacing is JS-driven (see layoutRow in app.js): a bounded, centred
   cluster that compresses into overlap as the (now-uncapped) board grows. gap:0
   because per-chip margin-left carries the spacing/overlap; position+z-index make
   the row its own stacking context so the attack-arrow SVG overlay always paints
   above the (possibly overlapping) chips. overflow-x:auto is only a scroll
   fallback for extreme counts. */
.sb-row { position: relative; z-index: 1; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 0; min-height: 0; flex-wrap: nowrap; overflow-x: auto; }
.sb-mid { flex: 0 0 auto; text-align: center; color: #e7e2d8; padding: 2px; }
.sb-phase { font-size: 13px; letter-spacing: 1px; } .sb-phase b { color: #c8a45a; }
.sb-incoming-row { font-size: 12px; color: #d98080; margin-top: 2px; }
.sb-incoming { display: inline-block; background: #2a1620; border: 1px solid #b03442; border-radius: 6px; padding: 2px 6px; margin: 0 3px; cursor: pointer; }
.sb-incoming.blocked { border-color: #6fc97a; color: #6fc97a; } .sb-incoming.picked { background: #b03442; color: #fff; } .sb-incoming.ethereal { opacity: .55; }
.sb-warden { flex: 0 0 auto; display: flex; justify-content: center; }
.sb-totem { background: rgba(12,10,18,.82); border: 1px solid #3a3050; border-radius: 10px; padding: 5px 12px; min-width: 210px; text-align: center; }
.sb-totem.targetable { border-color: #b03442; box-shadow: 0 0 10px #b0344288; cursor: crosshair; }
.sb-totem .tot-skull { font-size: 16px; color: #c8a45a; }
.sb-totem .tot-name { font-size: 12px; color: #cfc7bb; }
.sb-totem .tot-bar { height: 8px; background: #000; border-radius: 4px; overflow: hidden; margin: 3px 0; }
.sb-totem .tot-fill { height: 100%; background: linear-gradient(90deg, #b03442, #e05a6a); }
.sb-totem.you .tot-fill { background: linear-gradient(90deg, #2a7a3a, #6fc97a); }
.sb-totem .tot-hp { font-size: 12px; color: #f0eadf; } .sb-totem .tot-meta { font-size: 10px; color: #9b8fb0; }

.souls-u { position: relative; flex: 0 0 auto; width: clamp(64px, 12vh, 104px); aspect-ratio: 3/4; background: #12101a; border: 1px solid #2c2740; border-radius: 8px; overflow: hidden; cursor: default; transition: transform .12s, box-shadow .12s; }
.souls-u .su-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.souls-u .su-aff { position: absolute; top: 3px; right: 3px; z-index: 3; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #000; }
.souls-u .su-ab { position: absolute; bottom: 26px; left: 2px; z-index: 3; font-size: 7px; background: #0a0a0dcc; border-radius: 3px; padding: 0 3px; color: #e7e2d8; max-width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.souls-u .su-name { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; text-align: center; font-size: 8px; color: #f0eadf; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.souls-u .su-atk { position: absolute; bottom: 1px; left: 3px; z-index: 3; font-size: 11px; font-weight: 700; color: #ffcf6a; text-shadow: 0 1px 2px #000; }
.souls-u .su-hpbar { position: absolute; bottom: 1px; right: 2px; z-index: 3; width: 54%; height: 9px; background: #000a; border-radius: 4px; overflow: hidden; }
.souls-u .su-hpbar .su-hpfill { height: 100%; background: linear-gradient(90deg, #b03442, #e05a6a); }
.souls-u .su-hpbar span { position: absolute; inset: 0; text-align: center; font-size: 8px; color: #fff; text-shadow: 0 1px 1px #000; }
.souls-u .su-flag { position: absolute; top: 2px; left: 2px; z-index: 4; font-size: 12px; text-shadow: 0 1px 2px #000; }
.souls-u.tapped { filter: grayscale(.7) brightness(.7); transform: rotate(4deg); }
.souls-u.summoned { box-shadow: 0 0 8px #7a5aa8; }
.souls-u.ready { box-shadow: 0 0 0 2px #c8a45a; cursor: pointer; }
.souls-u.ready:hover { transform: translateY(-3px); }
.souls-u.picked { box-shadow: 0 0 0 3px #ffd970; transform: translateY(-4px); }
.souls-u.targetable { box-shadow: 0 0 0 2px #b03442; cursor: crosshair; }
.souls-u.withered { filter: sepia(.5) hue-rotate(60deg); }
.souls-u.lunging { transform: translateY(-14px) scale(1.08); box-shadow: 0 0 14px #ffcf6a; }

/* ============================================================================
   MODES RESTRUCTURE — login mode-selector + per-mode chip + profile modes
   ============================================================================ */
#screen-modes.screen.active { display: flex; }
#screen-modes { min-height: 100vh; align-items: flex-start; justify-content: center; padding: 40px 16px 60px; overflow-y: auto; }
.modes-wrap { width: 100%; max-width: 960px; text-align: center; }
.modes-logo { max-width: 320px; width: 60%; margin: 10px auto 4px; display: block; filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.modes-wrap .subtitle { color: var(--ink); opacity: .85; margin: 0 0 26px; }
.modes-foot { margin-top: 26px; font-size: 12px; }
.modes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .modes-grid { grid-template-columns: 1fr; } }

.mode-card {
  position: relative; text-align: left; background: linear-gradient(180deg, #17131c 0%, #100d14 100%);
  border: 1px solid #332c3a; border-radius: 14px; padding: 20px 22px 18px; cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease; overflow: hidden;
}
.mode-card[data-mode]:hover, .mode-card[data-mode]:focus-visible {
  transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 22px rgba(200,164,90,.18); outline: none;
}
.mode-card .mode-ic { font-size: 34px; line-height: 1; margin-bottom: 6px; }
.mode-card h3 { margin: 0 0 6px; color: var(--gold); font-family: Georgia, serif; letter-spacing: 1px; font-size: 22px; }
.mode-card h3 small { color: #8a8275; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.mode-card .mode-blurb { color: var(--ink); opacity: .8; font-size: 13px; line-height: 1.5; margin: 0 0 12px; min-height: 38px; }
.mode-stats { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.mode-stats .mode-lvl { background: rgba(200,164,90,.14); color: var(--gold); border: 1px solid rgba(200,164,90,.4); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 13px; }
.mode-stats .mode-climb { color: var(--ink); opacity: .85; font-size: 13px; }
.mode-rank { font-size: 12px; margin-bottom: 10px; color: var(--ink); }
.mode-soon { font-size: 11px; margin-bottom: 8px; letter-spacing: .5px; text-transform: uppercase; }
.mode-cta { display: inline-block; color: var(--gold); font-weight: 700; letter-spacing: 2px; font-size: 13px; }
.mode-card.mode-locked { cursor: default; opacity: .62; filter: grayscale(.35); }
.mode-card.mode-locked .mode-cta { color: #8a8275; }
/* per-mode accent COLOUR (--mc): drives the engraved heading, icon glow and CTA
   tint on the gravestone treatment below. The old ::before accent stripe is
   retired — the chipped clip-path silhouette would clip it anyway. */
.mode-card { --mc: #8a8275; }
.mode-card.mode-battler { --mc: #c8a45a; }
.mode-card.mode-gauntlet { --mc: #7bb0d6; }
.mode-card.mode-souls { --mc: #9d7bd6; }
.mode-card.mode-siege { --mc: #55606b; }

/* topbar switch-mode chip */
.mode-switch { color: var(--gold); border-color: rgba(200,164,90,.4); }
.mode-switch:hover { border-color: var(--gold); }

/* profile: per-mode progress rows */
.pf-modes { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.pf-mode-row { display: flex; align-items: center; gap: 12px; background: #15121a; border: 1px solid #2a242f; border-left-width: 4px; border-radius: 8px; padding: 9px 14px; }
.pf-mode-row.mode-battler { border-left-color: #c8a45a; }
.pf-mode-row.mode-gauntlet { border-left-color: #7bb0d6; }
.pf-mode-row.mode-souls { border-left-color: #9d7bd6; }
.pf-mode-row.mode-siege { border-left-color: #55606b; }
.pf-mode-row.mode-locked { opacity: .6; }

/* ======================================================================
   MODE SELECTOR — gravestone slabs (matches POLISH PASS 3 hub stones).
   The four mode cards read as big carved tombstones: granite feTurbulence
   texture + moss/ember stains, thick INSET bevel depth (clip-path clips
   outer shadows), chipped clip-path silhouettes (3 variants so they don't
   clone), hover lift with moss/ember crack-glow, grind-down press. Per-mode
   colour identity is carried by --mc (heading / icon glow / CTA). Locked &
   not-live stones read as cold dead granite with no lift.
   ====================================================================== */
.mode-card {
  border: 1px solid #0b0c10; border-radius: 3px;
  background:
    radial-gradient(55% 42% at 10% 100%, rgba(96,116,62,.12), transparent 72%),
    radial-gradient(40% 36% at 94% 4%, rgba(74,96,70,.09), transparent 70%),
    radial-gradient(70% 80% at 74% 88%, rgba(10,11,15,.55), transparent 76%),
    radial-gradient(34% 30% at 30% 12%, rgba(190,200,220,.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.3 0 0 -0.24'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(168deg, #292a32 0%, #1f2027 42%, #131419 100%);
  box-shadow:
    inset 1px 1px 0 rgba(215,222,238,.11), inset 2px 2px 8px rgba(255,255,255,.03),
    inset -1px -1px 0 rgba(0,0,0,.7), inset -4px -6px 16px rgba(0,0,0,.5),
    inset 0 -5px 0 rgba(5,6,9,.9), inset 0 0 44px rgba(0,0,0,.35);
  clip-path: polygon(0 9px, 9px 0, 36% 0, 38% 4px, 41% 0, calc(100% - 7px) 0, 100% 7px, 100% 36%, calc(100% - 4px) 40%, 100% 44%, 100% calc(100% - 15px), calc(100% - 17px) 100%, 30% 100%, 27% calc(100% - 4px), 24% 100%, 8px 100%, 0 calc(100% - 8px), 0 64%, 4px 60%, 0 56%);
  transition: transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}
/* alternate silhouettes so the four stones aren't cut identically */
.modes-grid .mode-card:nth-child(2n) {
  clip-path: polygon(0 7px, 7px 0, calc(100% - 16px) 0, 100% 13px, 100% 60%, calc(100% - 4px) 64%, 100% 68%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 62% 100%, 59% calc(100% - 4px), 56% 100%, 9px 100%, 0 calc(100% - 10px), 0 34%, 4px 30%, 0 26%);
}
.modes-grid .mode-card:nth-child(3n) {
  clip-path: polygon(0 10px, 10px 0, 58% 0, 60% 4px, 63% 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 18px), calc(100% - 16px) 100%, 34% 100%, 31% calc(100% - 5px), 28% 100%, 9px 100%, 0 calc(100% - 9px), 0 48%, 4px 44%, 0 40%);
}
/* keep inner engraving above the crack pseudo-layers */
.mode-card > * { position: relative; z-index: 2; }
/* hairline cracks (::before) + moss/ember glow twin (::after) — replaces the
   retired accent stripe that used to live on ::before */
.mode-card::before {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0;
  pointer-events: none; z-index: 1; opacity: .9; transition: opacity .15s ease;
  background:
    linear-gradient(114deg, transparent 47%, rgba(0,0,0,.5) 49.6%, rgba(0,0,0,.55) 50.4%, rgba(235,240,250,.07) 51.6%, transparent 54%) 88% 0 / 34% 62% no-repeat,
    linear-gradient(38deg, transparent 46%, rgba(0,0,0,.45) 49.4%, rgba(0,0,0,.5) 50.6%, rgba(235,240,250,.06) 52%, transparent 55%) 6% 100% / 30% 52% no-repeat;
}
.mode-card::after {
  content: ""; position: absolute; inset: 0; width: auto; height: auto; border: 0;
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .18s ease;
  background:
    linear-gradient(114deg, transparent 46%, rgba(232,140,60,.45) 49.8%, rgba(232,140,60,.5) 50.4%, rgba(150,190,95,.22) 52%, transparent 55%) 88% 0 / 34% 62% no-repeat,
    linear-gradient(38deg, transparent 45%, rgba(232,140,60,.38) 49.6%, rgba(232,140,60,.42) 50.8%, rgba(150,190,95,.18) 52.4%, transparent 56%) 6% 100% / 30% 52% no-repeat;
}
/* hover: the stone lifts, moss+ember light pools in the recess */
.mode-card[data-mode]:hover, .mode-card[data-mode]:focus-visible {
  transform: translateY(-4px); border-color: #23261c; filter: brightness(1.06); outline: none;
  box-shadow:
    inset 1px 1px 0 rgba(225,232,248,.16), inset -1px -1px 0 rgba(0,0,0,.7),
    inset -4px -6px 16px rgba(0,0,0,.45), inset 0 -5px 0 rgba(5,6,9,.9),
    inset 0 0 46px rgba(120,140,80,.1), inset 0 -16px 36px rgba(207,90,42,.13);
}
.mode-card[data-mode]:hover::after, .mode-card[data-mode]:focus-visible::after { opacity: .85; }
/* press: grinds down */
.mode-card[data-mode]:active {
  transform: translateY(1px) scale(.997); filter: brightness(.95); transition-duration: .07s;
  box-shadow: inset 0 3px 14px rgba(0,0,0,.6), inset 1px 1px 0 rgba(215,222,238,.08), inset 0 -4px 0 rgba(5,6,9,.9), inset 0 0 44px rgba(0,0,0,.4);
}
.mode-card[data-mode]:active::after { opacity: 1; transition-duration: .05s; }
/* engraved inner elements — readable on stone, per-mode colour identity */
.mode-card .mode-ic { filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 10px var(--mc)); }
.mode-card h3 { color: var(--mc); text-shadow: 0 -1px 1px rgba(0,0,0,.95), 0 1px 0 rgba(230,210,160,.12), 0 0 12px rgba(0,0,0,.55); }
.mode-card h3 small { color: #9a9488; text-shadow: 0 -1px 1px rgba(0,0,0,.9); }
.mode-card .mode-blurb { color: #b7b2be; opacity: 1; text-shadow: 0 -1px 1px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.04); }
.mode-card .mode-stats .mode-lvl { background: rgba(200,164,90,.13); border-color: rgba(200,164,90,.34); text-shadow: 0 -1px 1px rgba(0,0,0,.8); }
.mode-card .mode-stats .mode-climb { color: #a7a2ae; opacity: 1; text-shadow: 0 -1px 1px rgba(0,0,0,.85); }
.mode-card .mode-rank { color: #a7a2ae; text-shadow: 0 -1px 1px rgba(0,0,0,.85); }
.mode-card .mode-soon { color: #8f8a97; text-shadow: 0 -1px 1px rgba(0,0,0,.85); }
/* CTA reads as a small forged/engraved slab button */
.mode-card .mode-cta {
  margin-top: 4px; padding: 7px 15px; border: 1px solid #0b0c10; border-radius: 3px; color: #ded6c2; font-size: 12px;
  background:
    radial-gradient(50% 60% at 85% 100%, rgba(10,11,15,.5), transparent 75%),
    radial-gradient(40% 50% at 8% 0%, rgba(200,210,230,.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.3 0 0 -0.24'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(172deg, #33343d 0%, #26272e 45%, #17181d 100%);
  box-shadow: inset 1px 1px 0 rgba(220,226,242,.14), inset -1px -2px 0 rgba(0,0,0,.65), inset 0 -4px 0 rgba(6,7,10,.9), inset 0 0 16px rgba(0,0,0,.3);
  text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.08);
  clip-path: polygon(0 5px, 5px 0, 34% 0, 36% 3px, 38% 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 8px), calc(100% - 9px) 100%, 60% 100%, 58% calc(100% - 3px), 56% 100%, 5px 100%, 0 calc(100% - 5px));
}
.mode-card[data-mode]:hover .mode-cta { color: #f0e7d2; box-shadow: inset 1px 1px 0 rgba(230,236,250,.2), inset -1px -2px 0 rgba(0,0,0,.6), inset 0 -4px 0 rgba(6,7,10,.9), inset 0 -8px 18px rgba(207,90,42,.14); }
/* locked / not-live stones: cold dead granite, no lift (mode-locked keeps its
   grayscale+opacity from the base rule above; ::after never lights without
   [data-mode]) */
.mode-card.mode-locked { filter: grayscale(.5) brightness(.82); }
.mode-card.mode-locked .mode-ic { filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.mode-card.mode-locked h3 { color: #8f8a80; }
@media (prefers-reduced-motion: reduce) {
  .mode-card, .mode-card[data-mode]:hover, .mode-card[data-mode]:active, .mode-card[data-mode]:focus-visible { transform: none !important; }
  .mode-card::before, .mode-card::after { transition: none !important; }
  .mode-card[data-mode]:hover::after, .mode-card[data-mode]:active::after, .mode-card[data-mode]:focus-visible::after { opacity: 0 !important; }
}

/* ======================================================================
   SOULS — lobby: The Climb panel + prebuilt-deck picker + end-screen rewards
   ====================================================================== */
.souls-lobby-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.souls-lobby-grid .souls-climb { grid-column: 1 / -1; }
@media (max-width: 860px) { .souls-lobby-grid { grid-template-columns: 1fr; } }

.souls-aff-pip { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; font-weight: 800; color: #0c0a0e; background: var(--ac, #9b8fb0); box-shadow: 0 0 6px color-mix(in srgb, var(--ac, #9b8fb0) 55%, transparent); vertical-align: middle; }

/* --- The Climb panel --- */
.souls-climb h3 small { color: #9b8fb0; font-size: 12px; letter-spacing: 1px; margin-left: 6px; }
.climb-finisher { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin: 4px 0 12px; border: 1px solid #3a3040; border-radius: 10px; background: linear-gradient(135deg, rgba(60,40,80,.3), rgba(20,16,26,.5)); }
.climb-finisher.owned { border-color: var(--gold); background: linear-gradient(135deg, rgba(80,60,24,.4), rgba(26,20,14,.6)); box-shadow: inset 0 0 22px rgba(200,164,90,.12); }
.climb-finisher .cf-ic { font-size: 30px; filter: drop-shadow(0 0 10px rgba(200,164,90,.4)); }
.climb-finisher.owned .cf-ic { filter: drop-shadow(0 0 14px rgba(255,210,120,.7)); }
.climb-finisher .cf-name { font-family: var(--font-display, Georgia, serif); color: #e6d6a8; letter-spacing: .5px; }
.climb-finisher .cf-sub { color: #9b8fb0; font-size: 12px; }
.climb-bar { position: relative; height: 20px; border-radius: 999px; background: #0e0b13; border: 1px solid #2e2733; overflow: hidden; margin: 4px 0 12px; }
.climb-bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7a5a24, #c8a45a); box-shadow: 0 0 12px rgba(200,164,90,.4); transition: width .4s ease; }
.climb-bar-lbl { position: relative; display: block; text-align: center; font-size: 12px; line-height: 20px; color: #efe6cf; text-shadow: 0 1px 2px rgba(0,0,0,.8); font-weight: 700; }
.climb-next { border: 1px solid #2e2733; border-left: 3px solid #9d7bd6; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; background: rgba(20,16,26,.5); }
.climb-next.done { border-left-color: var(--gold); color: #e6d6a8; }
.climb-next .cn-head { font-size: 14px; margin-bottom: 4px; }
.climb-next .cn-arch { text-transform: uppercase; letter-spacing: 1px; font-size: 10px; color: #9b8fb0; border: 1px solid #3a3040; border-radius: 4px; padding: 1px 6px; margin-left: 8px; }
.climb-next .cn-blurb { font-size: 12.5px; line-height: 1.45; margin: 3px 0; }
.climb-next .cn-reward { font-size: 12.5px; color: #c9c0d4; }
.climb-next .cn-reward b { color: #e6d6a8; }
.climb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.climb-actions .climb-hint { font-size: 12px; }
.climb-ladder { margin-top: 6px; }
.climb-ladder summary { cursor: pointer; color: #b7a9c9; font-size: 12.5px; padding: 4px 0; }
.climb-ol { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: none; }
.climb-ol li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 12.5px; border: 1px solid transparent; }
.climb-ol li + li { margin-top: 3px; }
.climb-ol .cl-tier { flex: 0 0 30px; font-weight: 800; color: #c8a45a; }
.climb-ol .cl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d7cfe0; }
.climb-ol .cl-diff { flex: 0 0 auto; letter-spacing: 1px; color: #b0403a; font-size: 10px; }
.climb-ol .cl-rw { flex: 0 0 auto; font-size: 10.5px; }
.climb-ol .cl-state { flex: 0 0 18px; text-align: center; }
.climb-ol li.cl-cleared { background: rgba(60,90,50,.14); border-color: rgba(110,170,100,.25); }
.climb-ol li.cl-cleared .cl-name { color: #a9c39a; }
.climb-ol li.cl-next { background: rgba(157,123,214,.16); border-color: rgba(157,123,214,.45); box-shadow: inset 0 0 12px rgba(157,123,214,.12); }
.climb-ol li.cl-locked { opacity: .62; }

/* --- prebuilt-deck picker --- */
.souls-deckpick .dp-current { font-size: 12.5px; color: #9b8fb0; margin-bottom: 8px; }
.souls-deckpick .dp-current b { color: #e6d6a8; }
.souls-deckpick .dp-lbl { display: block; font-size: 12px; color: #b7a9c9; letter-spacing: .5px; margin: 10px 0 5px; }
.precon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.precon-tile { text-align: left; cursor: pointer; padding: 9px 10px; border: 1px solid #2e2733; border-left: 3px solid var(--ac, #9b8fb0); border-radius: 8px; background: rgba(18,14,24,.7); color: var(--ink); transition: transform .1s ease, border-color .15s ease, box-shadow .15s ease; }
.precon-tile:hover { transform: translateY(-2px); border-color: var(--ac, #9b8fb0); box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 12px color-mix(in srgb, var(--ac, #9b8fb0) 40%, transparent); }
.precon-tile.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(200,164,90,.5), 0 0 16px rgba(200,164,90,.25); background: linear-gradient(160deg, rgba(60,48,20,.5), rgba(20,16,12,.6)); }
.precon-tile .pt-top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.precon-tile .pt-name { font-weight: 700; font-size: 13px; color: #e6d6a8; line-height: 1.2; }
.precon-tile .pt-arch { text-transform: uppercase; letter-spacing: 1px; font-size: 9.5px; color: #9b8fb0; margin: 3px 0 4px; }
.precon-tile .pt-plan { font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* --- end-screen rewards --- */
.souls-end-rw.win { border: 1px solid var(--gold); border-radius: 10px; padding: 12px 14px; margin: 6px 0 14px; background: linear-gradient(160deg, rgba(60,48,20,.35), rgba(20,16,12,.5)); }
.souls-end-rw .er-h { font-family: var(--font-display, Georgia, serif); color: #e6d6a8; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; margin-bottom: 8px; }
.souls-end-rw .er-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.souls-end-rw .er-pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #d7cfe0; background: rgba(157,123,214,.16); border: 1px solid rgba(157,123,214,.4); }
.souls-end-rw .er-pill.gold { color: #e6d6a8; background: rgba(200,164,90,.16); border-color: rgba(200,164,90,.5); }
.souls-end-rw .er-pill.trophy { color: #ffdf9e; background: rgba(200,164,90,.22); border-color: var(--gold); box-shadow: 0 0 16px rgba(200,164,90,.4); }
.souls-end-rw .er-note { font-size: 12px; color: #9b8fb0; margin-top: 8px; }

/* --- HCStory: per-mode Campaign panel (Gauntlet / Souls / Siege hubs) --- */
.hc-story-panel { margin-top: 14px; }
.hcs-loading { padding: 14px; text-align: center; }
.hcs-panel h3 { margin: 0 0 6px; }
.hcs-fin { font-size: 12px; margin-bottom: 8px; }
.hcs-bar { height: 8px; border-radius: 6px; background: rgba(0,0,0,.35); border: 1px solid #2e2733; overflow: hidden; margin-bottom: 12px; }
.hcs-bar-fill { height: 100%; background: linear-gradient(90deg, #c8a45a, #e6d6a8); transition: width .3s ease; }
.hcs-acts { display: flex; flex-direction: column; gap: 7px; }
.hcs-act { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(20,16,26,.5); border: 1px solid #2a2431; }
.hcs-act.next { border-color: var(--gold, #c8a45a); box-shadow: 0 0 12px rgba(200,164,90,.22); background: linear-gradient(160deg, rgba(60,48,20,.28), rgba(20,16,26,.5)); }
.hcs-act.done { opacity: .78; }
.hcs-act.locked { opacity: .5; }
.hcs-num { flex: 0 0 26px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800; font-size: 12px; color: #e7e2d8; background: rgba(0,0,0,.4); border: 1px solid #3a3346; }
.hcs-act.done .hcs-num { color: #6fc97a; border-color: #2e6b3a; }
.hcs-act.next .hcs-num { color: #231a06; background: linear-gradient(180deg, #f2c14e, #b8862a); border-color: var(--gold, #c8a45a); }
.hcs-act-body { flex: 1; min-width: 0; }
.hcs-title { font-weight: 700; font-size: 14px; color: #ece7dd; }
.hcs-opp { font-size: 12px; margin-top: 1px; }
.hcs-kind { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #9fd0e0; background: rgba(58,168,232,.14); border: 1px solid rgba(58,168,232,.4); vertical-align: middle; }
.hcs-kind.fin { color: #ffdf9e; background: rgba(200,164,90,.2); border-color: var(--gold, #c8a45a); }
.hcs-act .cn-teach { margin-top: 4px; }
.hcs-btn { flex: 0 0 auto; }
.hcs-lock { font-size: 14px; opacity: .8; }
/* compact campaign card (hub) + full-list overlay (its own section) */
.hcs-preview { margin-bottom: 12px; }
.hcs-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.hcs-cta #hcs-continue { flex: 1 1 200px; }
.hcs-cta #hcs-all { flex: 0 1 auto; }
.hcs-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(5,4,7,.92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.hcs-overlay.hidden { display: none; }
.hcs-ov-box { width: min(760px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: rgba(14,11,16,.98); border: 1px solid #3a3340; border-radius: 12px; box-shadow: 0 0 60px rgba(142,28,32,.3); overflow: hidden; }
.hcs-ov-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #2a242f; flex: 0 0 auto; }
.hcs-ov-head h3 { margin: 0; flex: 1; color: var(--gold); }
.hcs-ov-body { padding: 12px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===================== ACHIEVEMENTS / TROPHIES ===================== */
.ach-sub { margin: -4px 0 14px; }
.ach-group { margin-bottom: 22px; }
.ach-gh { margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #2a242f; letter-spacing: 1px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ach-card {
  display: flex; gap: 11px; align-items: center; padding: 11px 12px;
  background: rgba(16,13,19,0.85); border: 1px solid #2a242f; border-radius: 10px;
  transition: transform .12s ease, border-color .12s ease;
}
.ach-card .ach-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; filter: grayscale(1); opacity: .55; }
.ach-card .ach-info { min-width: 0; }
.ach-card .ach-name { font-weight: 700; letter-spacing: .3px; }
.ach-card .ach-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ach-card .ach-date { font-size: 10.5px; color: var(--gold, #c8a45a); margin-top: 4px; letter-spacing: .5px; }
.ach-card.earned {
  border-color: #c8a45a70;
  background: linear-gradient(180deg, rgba(200,164,90,0.12), rgba(16,13,19,0.85));
  box-shadow: 0 0 18px rgba(200,164,90,0.12);
}
.ach-card.earned .ach-ic { filter: none; opacity: 1; }
.ach-card.earned .ach-name { color: #ffdf9e; }
.ach-card.locked { opacity: .82; }
.ach-card.concealed .ach-name { letter-spacing: 3px; color: var(--muted); }

/* unlock banner */
.ach-banner {
  position: fixed; top: 18px; left: 50%; transform: translate(-50%, -140%);
  z-index: 9999; display: flex; gap: 13px; align-items: center;
  padding: 13px 20px 13px 16px; min-width: 300px; max-width: 92vw;
  background: linear-gradient(135deg, #221a10, #14100a); color: #fff;
  border: 1px solid var(--gold, #c8a45a); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55), 0 0 30px rgba(200,164,90,0.3);
  opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2,1.3,.4,1), opacity .4s ease;
}
.ach-banner.show { transform: translate(-50%, 0); opacity: 1; }
.ach-banner-ic { font-size: 34px; line-height: 1; }
.ach-banner-h { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold, #c8a45a); }
.ach-banner-n { font-size: 16px; font-weight: 800; margin-top: 1px; }
.ach-banner-d { font-size: 12px; color: #d9cdb6; margin-top: 2px; }
@media (max-width: 560px) { .ach-grid { grid-template-columns: 1fr; } }
.souls-end-rw .er-note.done { color: #e6d6a8; font-weight: 700; letter-spacing: .5px; }

/* --- in-duel Climb ribbon --- */
.sb-climbtag { text-align: center; font-size: 12px; letter-spacing: 1px; color: #e6d6a8; background: linear-gradient(90deg, transparent, rgba(157,123,214,.2), transparent); padding: 3px 0; margin-bottom: 4px; border-radius: 6px; }
.pf-mode-ic { font-size: 20px; width: 26px; text-align: center; }
.pf-mode-name { color: var(--ink); font-weight: 700; min-width: 96px; }
.pf-mode-lvl { color: var(--gold); font-weight: 700; font-size: 13px; }
.pf-mode-climb { font-size: 13px; margin-left: auto; }
.souls-u.su-enter { animation: suEnter .45s ease-out; }
.souls-u.su-proc { animation: suProc .5s ease-out; }
.souls-u.su-die { animation: suDie .5s ease-in forwards; }
@keyframes suEnter { from { transform: translateY(30px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes suProc { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 16px #6fc9ff; } }
@keyframes suDie { to { transform: scale(.3) rotate(30deg); opacity: 0; filter: brightness(2); } }
.souls-floaty { position: absolute; top: 0; left: 50%; z-index: 8; transform: translateX(-50%); font-weight: 700; font-size: 16px; text-shadow: 0 2px 3px #000; pointer-events: none; animation: soulsFloat 1s ease-out forwards; }
@keyframes soulsFloat { from { opacity: 0; transform: translate(-50%, 6px); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -34px); } }
.souls-coin { position: absolute; top: 40%; left: 50%; z-index: 12; transform: translate(-50%,-50%); font-size: 60px; animation: soulsCoin 1.4s ease-out forwards; }
@keyframes soulsCoin { 0% { transform: translate(-50%,-50%) scale(.3) rotateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%,-160%) scale(1.2) rotateY(1440deg); opacity: 0; } }

.souls-hud { position: relative; z-index: 2; background: rgba(8,6,12,.85); border-top: 1px solid #2a2436; padding: 6px 8px; flex: 0 0 auto; }
.souls-hand { overflow-x: auto; }
.souls-hand-inner { display: flex; gap: 6px; align-items: flex-end; min-height: 92px; padding-bottom: 4px; }
.souls-hand-meta { font-size: 11px; color: #9b8fb0; text-align: center; padding-top: 2px; }
.souls-hcard { position: relative; flex: 0 0 auto; width: 66px; aspect-ratio: 3/4; background: #12101a; border: 1px solid #2c2740; border-radius: 7px; overflow: hidden; transition: transform .1s; }
.souls-hcard.playable { cursor: pointer; box-shadow: 0 0 0 1px #c8a45a; } .souls-hcard.playable:hover { transform: translateY(-8px); }
.souls-hcard.dim { opacity: .55; }
.souls-hcard .hc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.souls-hcard .hc-cost { position: absolute; top: 2px; left: 2px; z-index: 3; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 1px solid #7a5aa8; background: #0a0a0dcc; }
.souls-hcard .hc-cost.afford { color: #cdb2e0; } .souls-hcard .hc-cost.noafford { color: #d98080; border-color: #b03442; }
/* Siege hand: the class glyph (role-badge) also lives top-left, so drop the gold-cost
   badge just below it — otherwise the cost covers the class and you can't read the role. */
#siege-hand .hc-cost { top: 28px; left: 2px; }
.souls-hcard .hc-aff { position: absolute; top: 2px; right: 2px; z-index: 3; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; }
.souls-hcard .hc-ab { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 3; text-align: center; font-size: 7px; color: #e7e2d8; background: #0a0a0daa; }
.souls-hcard .hc-name { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; text-align: center; font-size: 7px; color: #f0eadf; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.souls-hcard .hc-atk, .souls-hcard .hc-hp { position: absolute; bottom: 1px; z-index: 3; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.souls-hcard .hc-atk { left: 3px; color: #ffcf6a; } .souls-hcard .hc-hp { right: 3px; color: #ff8a8a; }
.souls-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.souls-act { background: #17141f; color: #e7e2d8; border: 1px solid #3a3050; border-radius: 8px; padding: 9px 16px; cursor: pointer; font-family: inherit; font-size: 14px; }
.souls-act.primary { background: #2a2140; border-color: #7a5aa8; color: #f0e6ff; font-weight: 700; }
.souls-act.coin { background: #3a2e12; border-color: #c8a45a; color: #ffd970; }
.souls-act.danger { border-color: #b03442; color: #d98080; margin-left: auto; }
.souls-log { position: absolute; left: 8px; top: 8px; z-index: 3; width: min(240px, 44vw); pointer-events: none; font-size: 11px; color: #b9b0a4; }
.souls-log div { background: #0a0a0d88; border-radius: 4px; padding: 1px 5px; margin-bottom: 2px; }
.souls-status { position: absolute; left: 50%; top: 44%; z-index: 4; transform: translateX(-50%); color: #c8a45a; letter-spacing: 1px; }
.souls-status.hidden { display: none; }
.souls-end { position: absolute; inset: 0; z-index: 20; background: rgba(5,4,10,.8); display: flex; align-items: center; justify-content: center; }
.souls-end-box { text-align: center; background: rgba(16,14,22,.95); border: 1px solid #2a2436; border-radius: 14px; padding: 30px 40px; }
.souls-end-box h2 { letter-spacing: 4px; margin: 0 0 8px; }
.souls-end-box h2.win { color: #6fc97a; } .souls-end-box h2.lose { color: #d92d2d; }
.souls-end-rw { color: #9b8fb0; margin: 12px 0; }

/* Always-visible sticky Save bar in the builder pool column (so Save is never
   hidden inside the side panel / mobile drawer — the #1 "can't save" cause). */
.souls-savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(20,17,26,.86), rgba(12,10,16,.96));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border-top: 1px solid #3a3050; border-radius: 10px;
  box-shadow: 0 -6px 16px rgba(0,0,0,.4);
}
.souls-savebar .sb-savecount { font-weight: 700; letter-spacing: .5px; }
.souls-savebar .sb-savecount.ok { color: #6fc97a; }
.souls-savebar .sb-savecount.bad { color: #d9a066; }
.souls-savebar #sb-save2 { margin-left: auto; }
@media (max-width: 640px) { .souls-savebar #sb-save2 { flex: 1 1 auto; } }

/* ==================================================================
   PERF FIX (2026-07-03) — MENU LAG
   The animated full-screen fog (#fx-ambient) combined with 6
   backdrop-filter blurs forced the browser to re-blur the WHOLE
   backdrop every frame the fog drifted → heavy jank on the menu.
   Turn the ambient fog/embers OFF and remove all backdrop blurs.
   The gravestone / forged-button textures are static (rasterised
   once) so the look you liked is UNAFFECTED. Fully reversible:
   delete this block to restore the ambient layer + frosted panels.
   ================================================================== */
#fx-ambient { display: none !important; }
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* the gravestone cards can still cost on hover-repaint; keep their
   transitions to cheap compositor props only (opacity/transform). */
.hub-card, .play-card { will-change: auto; }

/* ==================================================================
   SOULS SPELLS + full-art duel cards (2026-07-03)
   - Spell card frame (kind:'spell') reuses the rarity border + affinity
     symbol; no atk/def/hp corners; shows a SPELL marker + effect text.
   - Duel BOARD units + HAND cards now render via cardHTML (rarity border,
     affinity SYMBOL, role glyph, level/stars, atk/hp) — these rules make the
     inner .card fill the chip and re-layer the duel overlays on top.
   - Floating fixed chips are hidden while a duel is active.
   ================================================================== */

/* ---- SPELL card frame (used in builder pool, hand, and collection-style views) ---- */
.card.spell-card .spell-mark {
  position: absolute; top: 6%; left: 0; right: 0; z-index: 4; text-align: center;
  font-size: 9px; letter-spacing: 1px; font-weight: 700; color: #ffe9b0;
  text-shadow: 0 1px 3px #000, 0 0 6px rgba(200,120,255,.6);
}
.card.spell-card .spell-text {
  position: absolute; left: 6%; right: 6%; bottom: 8%; z-index: 4;
  text-align: center; font-size: 8px; line-height: 1.18; color: #efe7d6;
  background: rgba(8,6,14,.62); border-radius: 4px; padding: 3px 4px;
  max-height: 42%; overflow: hidden; text-shadow: 0 1px 2px #000;
}
.card.spell-card .card-name { text-shadow: 0 1px 3px #000, 0 0 5px rgba(150,90,220,.5); }

/* spell markers in the builder pool + decklist */
.souls-card.is-spell .card { box-shadow: 0 0 0 1px rgba(180,120,255,.4) inset; }
.sc-ab-mark.spell { color: #d9b8ff; }
.souls-dl-card.is-spell { border-color: #7a5aa8 !important; }

/* spell-acquisition toolbar in the builder */
.souls-spellbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 8px; }
.souls-spellbar .muted { font-size: 12px; }
.souls-spellodds { margin: 0 0 8px; }
.souls-spellodds:empty { display: none; }

/* ---- DUEL board units: fill with the full cardHTML frame ---- */
.souls-u { aspect-ratio: 5 / 7; width: clamp(58px, 11vh, 96px); background: transparent; border: none; overflow: visible; }
.souls-u .card { width: 100%; height: 100%; aspect-ratio: 5 / 7; }
/* HP indicator: a taller, centred pill floated at the very TOP of the card with a
   legible numeric current/max HP value overlaid (readable over the card art). */
.souls-u .su-hpbar { position: absolute; left: 8%; right: 8%; top: 3px; height: 14px; z-index: 6; background: #000c; border: 1px solid rgba(0,0,0,.85); border-radius: 7px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.souls-u .su-hpbar .su-hpfill { height: 100%; background: linear-gradient(90deg, #b03442, #e05a6a); }
.souls-u .su-hpbar .su-hpnum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: .2px; text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 3px #000; pointer-events: none; }
.souls-u .su-hpbar .su-hpnum i { font-style: normal; font-weight: 700; opacity: .78; font-size: 8px; margin-left: 1px; }
.souls-u .su-flag { position: absolute; top: 2px; left: 2px; z-index: 7; font-size: 12px; text-shadow: 0 1px 2px #000; }
.souls-u.tapped { filter: grayscale(.6) brightness(.72); transform: rotate(3deg); }
.souls-u.ready { border-radius: 8px; box-shadow: 0 0 0 2px #c8a45a, 0 0 12px rgba(200,164,90,.5); }
.souls-u.picked { box-shadow: 0 0 0 3px #ffd970; transform: translateY(-4px); }
.souls-u.targetable { box-shadow: 0 0 0 2px #b03442, 0 0 12px rgba(176,52,66,.6); cursor: crosshair; }

/* ---- DUEL hand cards: full cardHTML frame + cost overlay ---- */
.souls-hand-inner { min-height: clamp(104px, 15vh, 150px); align-items: flex-end; }
.souls-hcard { width: clamp(70px, 10vh, 92px); aspect-ratio: 5 / 7; background: transparent; border: none; overflow: visible; }
.souls-hcard .card { width: 100%; height: 100%; aspect-ratio: 5 / 7; }
.souls-hcard.playable { box-shadow: none; }
.souls-hcard.playable .card { box-shadow: 0 0 0 2px #c8a45a, 0 0 12px rgba(200,164,90,.4); border-radius: 6px; }
.souls-hcard.is-spell.playable .card { box-shadow: 0 0 0 2px #b088e0, 0 0 12px rgba(176,120,240,.45); }
.souls-hcard.picked { transform: translateY(-8px); }
.souls-hcard.picked .card { box-shadow: 0 0 0 3px #ffd970; border-radius: 6px; }
.souls-hcard .hc-cost {
  position: absolute; top: 3px; left: 3px; z-index: 6; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  border: 1px solid #7a5aa8; background: #0a0a0de6; color: #cdb2e0;
}
.souls-hcard .hc-cost.noafford { color: #d98080; border-color: #b03442; }

/* ---- hide fixed floating chips during an active duel ---- */
body.souls-dueling #sb-toggle,
body.souls-dueling .launch-chip,
body.souls-dueling .souls-drawer-toggle { display: none !important; }

/* ===================== AUDIO & VOICE settings (sound.js) ===================== */
/* Injected by sound.js — a 🔊 button in the top bar opens this popover. Purely
   additive; kept self-hosted (no CDNs). */
.hc-audio-btn {
  position: relative; background: none; border: 1px solid #3a3340; color: var(--gold, #c8a45a);
  width: 34px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 15px;
  line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.hc-audio-btn:hover { background: #17131c; }
/* Floated when the top bar is hidden (login / mode-select / in-game). Sits top-right
   so the popover (opened below the button by sound.js) never clips off the bottom. */
.hc-audio-btn.floating { position: fixed; right: 12px; top: 12px; z-index: 60; width: 40px; height: 40px; font-size: 18px; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
.hc-audio-dot {
  position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--r-deity, #ffd970); box-shadow: 0 0 6px var(--r-deity, #ffd970);
  animation: hc-audio-pulse 1.4s ease-in-out infinite;
}
@keyframes hc-audio-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }

.hc-audio-panel {
  position: fixed; top: 52px; right: 12px; z-index: 61; width: 236px; max-width: 92vw;
  background: rgba(14,11,18,0.97); border: 1px solid #3a3340; border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  font-size: 13px; color: var(--ink, #e6ddcf);
}
.hc-audio-panel.hidden { display: none !important; }
.hc-audio-head { font-weight: 700; letter-spacing: .5px; color: var(--gold, #c8a45a); margin-bottom: 8px; }
.hc-audio-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; cursor: pointer; }
.hc-audio-row span { color: var(--ink, #e6ddcf); }
.hc-audio-row .hc-audio-vhint { color: var(--muted, #8a8194); font-weight: 400; font-size: 11px; }
.hc-audio-row.disabled { opacity: .5; cursor: default; }
.hc-audio-row.disabled span { color: var(--muted, #8a8194); }
.hc-audio-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold, #c8a45a); cursor: pointer; }
.hc-audio-row.slider { display: grid; grid-template-columns: 58px 1fr; align-items: center; cursor: default; }
.hc-audio-row.slider input[type="range"] { width: 100%; accent-color: var(--gold, #c8a45a); cursor: pointer; }
.hc-audio-sep { height: 1px; background: #2e2733; margin: 8px 0; }
.hc-audio-hint { margin-top: 9px; color: var(--muted, #8a8194); font-size: 11px; line-height: 1.4; }