/* ═══════════════════════════════════════════════════════════════════════════
   YOKAI CLASH — APP STYLESHEET (post-login screens)
   Landing page is self-contained in <style> in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01. TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --s0: #07080d;          /* page bg */
  --s1: #0d0e18;          /* panels */
  --s2: #12131f;          /* raised */
  --s3: #181928;          /* top-layer */

  /* Borders */
  --b0: rgba(255,255,255,0.06);
  --b1: rgba(192,39,45,0.4);
  --b2: rgba(201,168,76,0.35);

  /* Brand */
  --cr: #c0272d;          /* crimson */
  --cr-dark: #7a0f12;
  --cr-bright: #e84045;
  --go: #c9a84c;          /* gold */
  --go-dim: #7a6428;
  --go-bright: #e0c070;

  /* Text */
  --t0: #f0e8d0;          /* primary */
  --t1: #a09078;          /* secondary */
  --t2: #6a5c48;          /* muted */

  /* Accents */
  --teal: #4ab8b0;
  --green: #4caf50;
  --red:   #e74c3c;
  --blue:  #4a9fd4;
  --purple:#9b59b6;
  --orange:#e67e22;

  /* Geometry */
  --r:   4px;             /* radius */
  --r-l: 8px;             /* radius large */
  --nh: 56px;             /* nav height (mobile dock) */
  --sw: 200px;            /* sidebar width (desktop) */

  /* Type */
  --f-jp: 'Noto Serif JP', 'Shippori Mincho', Georgia, serif;
  --f-ui: 'Noto Serif JP', Arial, sans-serif;
  --f-body: 'Crimson Pro', 'Inter', Georgia, serif;
}
@media (min-width: 769px) { :root { --nh: 0px; } }

/* ── 02. RESET / BASE ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--s0);
  color: var(--t0);
  font-family: var(--f-ui);
  margin: 0;
  min-height: 100vh;
}
body.nav-sidebar { padding-left: 0; }
@media (min-width: 769px) {
  body.nav-sidebar { padding-left: var(--sw); }
}

img { max-width: 100%; }
button { font-family: inherit; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(192,39,45,0.25) transparent; }
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(192,39,45,0.25); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(192,39,45,0.45); }

/* ── 03. SCREEN SHELL ────────────────────────────────────────────────────── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

.screen-header { padding: 1.4rem 1.6rem 1rem; border-bottom: 1px solid var(--b0); }
.screen-title {
  font-family: var(--f-jp);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--t0);
  margin: 0 0 0.25rem;
}
.screen-title::after {
  content: '';
  display: block;
  width: 56px; height: 2px;
  background: linear-gradient(to right, var(--cr), transparent);
  margin-top: 6px;
}
.screen-subtitle {
  font-family: var(--f-body);
  color: var(--t1);
  font-size: 0.85rem;
  margin: 0;
}
.screen-body {
  padding: 1.5rem 1rem;
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* ── 04. TYPOGRAPHY ──────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--f-jp); font-weight: 700; color: var(--t0); margin: 0; }
p { margin: 0; }
a { color: var(--go); text-decoration: none; }
a:hover { color: var(--go-bright); }

/* Loading spinner — small inline */
.hf-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(201,168,76,0.2);
  border-top-color: var(--go);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-msg { color: var(--t1); text-align: center; padding: 2rem; }
.empty-msg   { color: var(--t1); text-align: center; padding: 1.5rem; font-style: italic; }

/* ── 05. BUTTONS ─────────────────────────────────────────────────────────── */
button { cursor: pointer; }

.btn-sm, .btn, .btn-primary, .btn-danger {
  font-family: var(--f-jp);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid var(--b1);
  background: rgba(192,39,45,0.1);
  color: var(--t0);
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.btn-sm:hover, .btn:hover, .btn-primary:hover {
  background: rgba(192,39,45,0.22);
  border-color: var(--cr);
}
.btn-sm:active, .btn:active, .btn-primary:active {
  transform: translateY(1px);
}
.btn-sm:disabled, .btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}

.btn-primary {
  background: rgba(201,168,76,0.12);
  border-color: var(--b2);
  color: var(--go);
}
.btn-primary:hover {
  background: rgba(201,168,76,0.25);
  border-color: var(--go);
  color: var(--t0);
}

.btn-danger {
  background: rgba(231,76,60,0.1);
  border-color: rgba(231,76,60,0.4);
  color: var(--red);
}
.btn-danger:hover {
  background: rgba(231,76,60,0.22);
  border-color: var(--red);
}

.btn-loading { opacity: 0.7; pointer-events: none; }

/* ── 06. FORMS ───────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label {
  font-family: var(--f-jp);
  font-size: 0.6rem;
  color: var(--t2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ── Unified form controls (inputs / selects / textareas / search) ──
   One design language across the whole app. Matches landing/FAQ search
   aesthetic: ink panel bg, crimson top hairline, crimson focus ring,
   Noto Serif JP, italic placeholders. */
.form-group input, .form-group select, .form-group textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"], textarea, select {
  background: rgba(7,8,13,0.82);
  border: 1px solid var(--b0);
  border-top: 1px solid rgba(192,39,45,0.32);
  border-radius: var(--r);
  color: var(--t0);
  font-family: var(--f-jp);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.6rem 0.85rem;
  min-height: 40px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
textarea { min-height: 80px; line-height: 1.5; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--cr);
  border-top-color: var(--cr);
  box-shadow: 0 0 0 3px rgba(192,39,45,0.14);
  background: rgba(7,8,13,0.92);
}
::placeholder {
  color: var(--t2);
  font-family: var(--f-body);
  font-style: italic;
  opacity: 0.85;
}

/* ── 07. PANELS / CARDS ──────────────────────────────────────────────────── */
.panel {
  background: var(--s1);
  border: 1px solid var(--b0);
  border-radius: var(--r-l);
  padding: 1rem;
}

/* ── 08. MODALS ──────────────────────────────────────────────────────────── */
/* HTML-declared modals (.modal-overlay) hide by default; JS toggles .active.
   JS-created overlays (skin-preview, class-unlock, legal) get appended to
   <body> the moment they should appear, so they're visible by default. */
.modal-overlay { display: none; }
.modal-overlay.active,
.skin-preview-overlay,
.class-unlock-modal-overlay,
.legal-modal-overlay,
.game-modal-overlay,
.game-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.modal-box, .game-modal-box, .pack-modal-box, .mw-modal-box, .gp-box, .auth-box {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l);
  padding: 1.5rem 1.6rem;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  color: var(--t0);
}

.modal-title, .gp-title, .auth-title {
  font-family: var(--f-jp);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t0);
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0.06em;
}

.modal-close {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: none;
  color: var(--t1);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.modal-close:hover { color: var(--go); }

/* Confirm / alert dialogs (gameConfirm / gameAlert in app.js) */
.game-modal-title {
  font-family: var(--f-jp); font-size: 1rem; font-weight: 700;
  color: var(--t0); text-align: center;
  margin-bottom: 0.6rem; letter-spacing: 0.06em;
}
.game-modal-msg {
  font-family: var(--f-body); font-size: 0.9rem;
  color: var(--t1); text-align: center;
  margin-bottom: 1.2rem; line-height: 1.4;
}
.game-modal-btns {
  display: flex; gap: 8px; justify-content: center;
}
.game-modal-btn-cancel,
.game-modal-btn-confirm {
  font-family: var(--f-jp); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.55rem 1.2rem; border-radius: var(--r);
  cursor: pointer; min-width: 100px;
  transition: all 0.15s;
}
.game-modal-btn-cancel {
  background: transparent; border: 1px solid var(--b0);
  color: var(--t1);
}
.game-modal-btn-cancel:hover {
  background: rgba(255,255,255,0.04); color: var(--t0);
  border-color: var(--b1);
}
.game-modal-btn-confirm {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  border: 1px solid var(--b1); color: var(--t0);
}
.game-modal-btn-confirm:hover {
  background: linear-gradient(135deg, #8a1218, var(--cr-bright));
  box-shadow: 0 0 12px rgba(192,39,45,0.4);
}

/* ── 09. TOASTS ──────────────────────────────────────────────────────────── */
/* Container — JS appends toasts to <div id="toasts"> (see app.js toast()) */
#toasts, .toast-container {
  position: fixed;
  top: 72px;
  right: 16px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
  pointer-events: none;
}
#toasts .toast { pointer-events: auto; }
.toast {
  background: var(--s2);
  border: 1px solid var(--b0);
  border-left: 3px solid var(--cr);
  color: var(--t0);
  font-family: var(--f-jp);
  font-size: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  animation: toastIn 0.25s ease-out, toastOut 0.3s ease-in 3.5s forwards;
}
.toast.toast-success { border-left-color: var(--green); }
.toast.toast-error   { border-left-color: var(--red); }
.toast.toast-info    { border-left-color: var(--blue); }
.toast.toast-gold    { border-left-color: var(--go); }
.toast.toast-warning { border-left-color: #e0a020; color: #fff; }
.toast.toast-reward {
  background: linear-gradient(145deg, #1a1510 0%, #2a1d10 60%, #3a2614 100%);
  border: 1px solid rgba(201,168,76,0.4);
  border-left: 3px solid var(--go);
  box-shadow: 0 10px 28px rgba(0,0,0,0.6), 0 0 32px rgba(201,168,76,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 0.75rem 1rem;
  min-width: 260px;
}
.toast-reward-head {
  font-family: var(--f-jp); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--go); margin-bottom: 0.5rem; text-align: center;
  border-bottom: 1px solid rgba(201,168,76,0.22); padding-bottom: 0.4rem;
}
.toast-reward-row { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.toast-reward-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background: rgba(7,8,13,0.55);
  border: 1px solid var(--b0);
  border-radius: var(--r);
  font-family: var(--f-jp); font-size: 0.8rem; font-weight: 700;
  color: var(--t0);
}
.toast-reward-chip img { width: 18px; height: 18px; object-fit: contain; }
.toast-reward-chip b { color: var(--go); font-weight: 700; }
.toast-reward-xp { border-color: rgba(82,170,225,0.45); }
.toast-reward-xp b { color: #88ccff; }
.toast-reward-xp-glyph {
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.15em; color: #88ccff;
  background: rgba(82,170,225,0.12);
  border: 1px solid rgba(82,170,225,0.45);
  padding: 2px 6px; border-radius: 3px;
}
.toast-reward-levelup {
  margin-top: 0.5rem;
  padding: 0.35rem 0.7rem;
  text-align: center;
  font-family: var(--f-jp); font-weight: 700; font-size: 0.75rem;
  color: var(--go);
  background: rgba(201,168,76,0.08);
  border-top: 1px solid rgba(201,168,76,0.25);
  letter-spacing: 0.08em;
  animation: toastLevelPulse 1.2s ease-in-out infinite;
}
@keyframes toastLevelPulse {
  0%, 100% { background: rgba(201,168,76,0.08); }
  50%      { background: rgba(201,168,76,0.18); }
}
@keyframes toastIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(20px); } }

/* ── 10. UTILITY ─────────────────────────────────────────────────────────── */
.gold-display { display: inline-flex; align-items: center; gap: 4px; color: var(--go); font-family: var(--f-jp); vertical-align: middle; }
.gold-icon { width: 14px; height: 14px; flex-shrink: 0; }
.nav-dust-icon { width: 14px; height: 18px; object-fit: contain; flex-shrink: 0; margin-right: 3px; vertical-align: middle; }
.gold-amount { font-weight: 600; }

.badge-gold {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25);
  color: var(--go); font-family: var(--f-jp); font-size: 0.65rem;
  padding: 2px 6px; border-radius: 3px;
}
.badge-xp {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(74,184,176,0.1); border: 1px solid rgba(74,184,176,0.25);
  color: var(--teal); font-family: var(--f-jp); font-size: 0.65rem;
  padding: 2px 6px; border-radius: 3px;
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--b1) 30%, var(--b2) 50%, var(--b1) 70%, transparent);
  margin: 1rem 0;
}

/* ── 11. NAVIGATION (logged-in app shell) ────────────────────────────────── */
/* Mobile: top bar / bottom dock. Desktop: left sidebar. */

/* Override the landing-page inline <style> that sets nav { height: 68px;
   right: 0 } — those leak otherwise and squash the sidebar. !important here
   only because we're fighting a hard-coded inline <style>. */
body.nav-sidebar nav {
  position: fixed !important;
  z-index: 100 !important;
  background: rgba(7,8,13,0.94) !important;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
body.nav-sidebar nav::after { display: none !important; } /* kill landing's nav underline */

@media (max-width: 768px) {
  body.nav-sidebar nav {
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important;
    height: var(--nh) !important;
    border-bottom: 1px solid var(--b1);
    display: flex !important; align-items: center; justify-content: space-between;
    padding: 0 1rem !important;
  }
  body.nav-sidebar { padding-top: var(--nh); }
}
@media (min-width: 769px) {
  body.nav-sidebar nav {
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    right: auto !important;
    width: var(--sw) !important;
    height: 100vh !important;
    border-right: 1px solid var(--b1);
    border-bottom: none !important;
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1.2rem 0.8rem 1rem !important;
    overflow-y: auto;
  }
}

.nav-logo { cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img { height: 60px; width: auto;
  filter: drop-shadow(0 0 10px rgba(192,39,45,0.45)); }
@media (min-width: 769px) { .nav-logo-img { height: 80px; margin: 0 auto 0.5rem; } }

/* Hide every .nav-links by default; the JS adds .nav-active to the one that
   should be visible (game vs landing). Landing-page styles in <style> in
   index.html define the landing nav's appearance — we don't override here. */
.nav-links { display: none; }
.nav-links.nav-active { display: flex; }
/* Always hide the landing-nav-only items in app shell */
body.nav-sidebar .nav-landing-only { display: none !important; }

/* Logged-in nav (sidebar/dock) — apply layout only to the visible game-nav */
body.nav-sidebar .nav-links.nav-active {
  list-style: none; padding: 0; margin: 0;
  gap: 0; flex: 1;
}
body.nav-sidebar .nav-links.nav-active li { position: relative; }
body.nav-sidebar .nav-links.nav-active a,
body.nav-sidebar .nav-links.nav-active .nav-link {
  font-family: var(--f-jp);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t1);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 44px;
  transition: color 0.15s, background 0.15s;
  border-radius: var(--r);
  cursor: pointer;
}
body.nav-sidebar .nav-links.nav-active a:hover,
body.nav-sidebar .nav-links.nav-active .nav-link:hover {
  color: var(--go); background: rgba(255,255,255,0.03);
}
body.nav-sidebar .nav-links.nav-active .nav-link.active {
  color: var(--go); background: rgba(192,39,45,0.08);
}
body.nav-sidebar .nav-icon { display: inline-flex; flex-shrink: 0; opacity: 0.75; }
body.nav-sidebar .nav-link:hover .nav-icon,
body.nav-sidebar .nav-link.active .nav-icon { opacity: 1; }

@media (min-width: 769px) {
  body.nav-sidebar .nav-links.nav-active {
    flex-direction: column; gap: 2px;
    align-items: stretch;
    width: 100%;
  }
  body.nav-sidebar .nav-links.nav-active li { width: 100%; display: block; }
  body.nav-sidebar .nav-links.nav-active li::before { display: none; }
  body.nav-sidebar .nav-links.nav-active a,
  body.nav-sidebar .nav-links.nav-active .nav-link {
    width: 100%; box-sizing: border-box;
  }
}
@media (max-width: 768px) {
  body.nav-sidebar .nav-links.nav-active { display: none; }
  body.nav-sidebar nav.nav-mobile-open .nav-links.nav-active {
    display: flex; flex-direction: column;
    position: fixed; top: var(--nh); left: 0; right: 0;
    background: var(--s1); border-top: 1px solid var(--b1);
    padding: 0.5rem; z-index: 99;
  }
}

.burger-btn {
  display: none;
  background: transparent; border: none;
  cursor: pointer; padding: 8px;
  flex-direction: column; gap: 4px;
}
.burger-btn span {
  display: block; width: 22px; height: 2px;
  background: var(--t0); border-radius: 1px;
  transition: transform 0.2s;
}
@media (max-width: 768px) { .burger-btn { display: flex; } }

/* Currency strip */
#nav-logged-in {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-top: auto;
  padding: 0.6rem;
  border-top: 1px solid var(--b0);
}
@media (max-width: 768px) {
  #nav-logged-in { flex-direction: row; align-items: center; gap: 0.4rem; padding: 0; border: none; margin: 0; }
}

.nav-user-info {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-family: var(--f-jp); font-size: 0.6rem;
  align-items: center;
}
.nav-currency {
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer; padding: 3px 6px; border-radius: 3px;
  background: rgba(255,255,255,0.03);
  transition: background 0.15s;
}
.nav-currency:hover { background: rgba(201,168,76,0.1); }
#nav-tokens { color: var(--go); }
.nav-token-icon { width: 12px; height: 12px; }
#nav-gold     { color: var(--go); }
#nav-dust     { color: #88ccff; }
#nav-level    { color: var(--t1); padding: 3px 6px; }
#nav-username { color: var(--t0); padding: 3px 6px; }

.nav-logout-btn {
  background: transparent; border: 1px solid var(--b0);
  color: var(--t1); font-family: var(--f-jp);
  font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: var(--r);
  cursor: pointer; transition: all 0.15s;
}
.nav-logout-btn:hover { color: var(--cr); border-color: var(--b1); }

.nav-cta {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp);
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.55rem 1.2rem; border: 1px solid var(--b1);
  border-radius: var(--r); cursor: pointer;
  transition: all 0.15s;
}
.nav-cta:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }

/* Music control */
.music-ctrl { position: relative; display: flex; align-items: center; }
.music-btn {
  background: transparent; border: 1px solid var(--b0);
  color: var(--t1); padding: 6px; cursor: pointer; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
}
.music-btn:hover { color: var(--go); border-color: var(--b2); }
.music-panel {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  display: none;
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.6rem 0.8rem;
  min-width: 220px; z-index: 250;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7);
}
.music-panel.music-panel--open { display: block; }
.music-track-name { font-family: var(--f-jp); font-size: 0.7rem; color: var(--go); margin-bottom: 0.4rem; }
.music-slider-row { display: flex; align-items: center; gap: 6px; margin-bottom: 0.4rem; }
.music-slider { flex: 1; }
.music-vol-pct { font-family: var(--f-jp); font-size: 0.6rem; color: var(--t1); min-width: 32px; text-align: right; }
.music-mute-btn {
  width: 100%; background: transparent; border: 1px solid var(--b0);
  color: var(--t1); font-family: var(--f-jp); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.music-mute-btn:hover { color: var(--go); border-color: var(--b2); }

/* Inventory popup (next to nav username) */
#inventory-popup {
  position: absolute; top: 100%; right: 0;
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.7rem;
  min-width: 280px; box-shadow: 0 12px 36px rgba(0,0,0,0.7);
  z-index: 200; margin-top: 6px;
}
.inv-tabs { display: flex; gap: 4px; margin-bottom: 0.5rem; border-bottom: 1px solid var(--b0); }
.inv-tab {
  background: transparent; border: none; color: var(--t1);
  font-family: var(--f-jp); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.4rem 0.6rem; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.inv-tab.active { color: var(--go); border-bottom-color: var(--cr); }
.inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

/* Inventory item cards */
.inv-item {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.55rem 0.5rem 0.6rem;
  text-align: center; position: relative;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.inv-item:hover { border-color: var(--b2); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.inv-item-prestige { border-color: rgba(201,168,76,0.35); }
.inv-item-prestige:hover { border-color: var(--go);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4), 0 0 14px rgba(201,168,76,0.2); }
.inv-item-equipped { border-color: rgba(64,184,64,0.4); }
.inv-item-equipped:hover { border-color: rgba(64,184,64,0.7); }
.inv-item-locked { opacity: 0.55; }

.inv-img-wrap { position: relative; margin-bottom: 6px; }
.inv-item-img { width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: calc(var(--r) - 1px); display: block; }
.inv-item-img-card { aspect-ratio: 5 / 7; }
.inv-item-default { width: 100%; aspect-ratio: 1; border-radius: calc(var(--r) - 1px);
  background: repeating-linear-gradient(135deg, rgba(192,39,45,0.08) 0 8px, rgba(7,8,13,0.4) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--b0); }
.inv-default-label { font-size: 10px; color: var(--t2); font-family: var(--f-jp); }
.inv-color-label { font-family: var(--f-jp); font-size: 10px; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; }

.inv-item-name { font-family: var(--f-jp); font-size: 0.72rem; font-weight: 700;
  color: var(--t0); margin: 0.3rem 0 0.15rem; line-height: 1.3; }
.inv-item-desc { font-family: var(--f-body); font-size: 0.68rem; color: var(--t1);
  line-height: 1.3; margin-bottom: 0.4rem; }
.inv-equipped {
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  color: var(--go); letter-spacing: 0.12em;
  padding: 4px 0; text-transform: uppercase;
}
.inv-locked-label {
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  color: var(--t2); letter-spacing: 0.12em;
  padding: 4px 0; text-transform: uppercase;
}
.inv-equip-btn {
  font-family: var(--f-jp); font-size: 0.6rem; letter-spacing: 0.1em;
  color: var(--go); background: transparent; border: 1px solid var(--b1);
  padding: 4px 12px; border-radius: var(--r); cursor: pointer;
  text-transform: uppercase; transition: all 0.15s;
}
.inv-equip-btn:hover { border-color: var(--go); background: rgba(201,168,76,0.1); }

.inv-tier-badge { position: absolute; top: 5px; right: 5px; z-index: 2;
  font-family: var(--f-jp); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 3px; text-transform: uppercase; }
.inv-tier-regular { background: rgba(160,160,180,0.85); color: var(--s0); }
.inv-tier-prestige { background: linear-gradient(135deg, #f4d35e, var(--go));
  color: var(--s0); box-shadow: 0 0 6px rgba(201,168,76,0.3); }
.inv-equipped-badge { position: absolute; top: 5px; left: 5px; z-index: 2;
  width: 20px; height: 20px; background: rgba(64,184,64,0.9); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.inv-locked-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55);
  border-radius: calc(var(--r) - 1px); display: flex; align-items: center; justify-content: center; }
.inv-lock-icon { font-size: 22px; opacity: 0.75; }

/* Card back preview swatch */
.inv-cb-preview { position: relative; border-radius: calc(var(--r) - 1px);
  overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* Background video / layers — only landing uses these, hidden on app screens */
body.nav-sidebar .bg-video,
body.nav-sidebar .bg-layer,
body.nav-sidebar .sparks { display: none; }

/* ── 12. LOBBY ───────────────────────────────────────────────────────────── */
#screen-lobby.active {
  position: relative;
  background: var(--s0);
  min-height: 100vh;
  overflow: hidden;
}

/* Lobby has two absolutely-positioned <video> elements (#lobby-vid-a/b) with
   inline z-index:0; we just darken with an overlay above them. */
#lobby-vid-a, #lobby-vid-b {
  filter: blur(20px);
  transform: scale(1.08);
}
#screen-lobby.active::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(7,8,13,0.55), rgba(7,8,13,0.78) 60%, rgba(7,8,13,0.92));
  pointer-events: none;
}

/* Background-decoration leftovers (HTML elements still exist but unused) */
.tvn-walls, .tvn-wall-left, .tvn-wall-right, .tvn-atmos, .tvn-floor,
.tvn-dust, .tvn-parchment,
.parch-edge, .parch-body, .parch-divider { display: none; }

/* Lobby content sits on top of the video + overlay */
.tvn-layout {
  position: relative; z-index: 2;
  padding: 1.5rem 1rem; max-width: 1100px; margin: 0 auto;
}
.lobby-content { display: flex; flex-direction: column; gap: 1.2rem; }

/* Generic per-screen video background (decks/collection/marketplace/leaderboard) */
.screen { position: relative; }
.screen-video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0; pointer-events: none;
  filter: blur(20px);
  transform: scale(1.08);
}
.screen-vid-b { opacity: 0; transition: opacity 0.5s; }
/* Make sure non-video children render above the background video */
.screen.active > *:not(.screen-video-bg):not(video):not([class^="board-fx"]) {
  position: relative; z-index: 2;
}
/* Subtle dim overlay over the video on screens that have one */
.screen.active > .screen-video-bg + video::after,
#screen-decks.active::before,
#screen-collection.active::before,
#screen-marketplace.active::before,
#screen-leaderboard.active::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(7,8,13,0.55), rgba(7,8,13,0.78) 60%, rgba(7,8,13,0.9));
  pointer-events: none;
}

/* Player bar */
.lobby-player-bar {
  background: var(--s1);
  border: 1px solid var(--b0);
  border-left: 3px solid var(--cr);
  border-radius: var(--r-l);
  padding: 0.8rem 1.1rem;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
}
.lpb-identity { display: flex; align-items: center; gap: 0.7rem; min-width: 140px; }
.parch-level-frame {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(192,39,45,0.12); border: 1.5px solid var(--b1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.parch-level-num { font-family: var(--f-jp); font-weight: 700; color: var(--t0); font-size: 0.9rem; }
.lpb-name { font-family: var(--f-jp); font-size: 1rem; font-weight: 700; color: var(--go); letter-spacing: 0.04em; }
.lobby-season-badge {
  background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.3);
  color: var(--green); font-family: var(--f-jp); font-size: 0.55rem;
  padding: 3px 8px; border-radius: 3px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.lpb-stats { display: flex; flex-wrap: wrap; gap: 0; }
.lpb-stat {
  text-align: center; padding: 0.2rem 0.8rem;
  border-right: 1px solid var(--b0);
}
.lpb-stat:last-child { border-right: none; }
.lpb-stat-val { display: block; font-family: var(--f-jp); font-size: 1rem; font-weight: 700; color: var(--t0); line-height: 1.2; }
.lpb-stat-lbl { display: block; font-family: var(--f-jp); font-size: 0.55rem; color: var(--t2); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.15rem; }

.lpb-xp { width: 100%; }
.tvn-xp-bar, .xp-bar-bg {
  height: 4px; background: rgba(255,255,255,0.06);
  border-radius: 2px; overflow: hidden; margin: 0.4rem 0 0.2rem;
}
.xp-bar-fill { height: 100%; background: linear-gradient(to right, var(--cr), rgba(192,39,45,0.6)); border-radius: 2px; transition: width 0.4s; }
.tvn-xp-text, .xp-text { font-family: var(--f-jp); font-size: 0.6rem; color: var(--t1); display: inline; }
.parch-xp-pct { font-family: var(--f-jp); font-size: 0.55rem; color: var(--t2); margin-left: 0.5rem; display: inline; }

#lobby-rank-bar { min-width: 180px; }
#lobby-rank-bar > div:first-child { gap: 14px; display: flex; justify-content: space-between; }
.lobby-next-reward { font-family: var(--f-jp); font-size: 0.65rem; color: var(--t1); }
.parch-dust-row {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-jp); font-size: 0.65rem; color: #88ccff;
}
/* Secondary (gold-ghost) button variant — reads as a real button at rest,
   not plain text. Matches .cookie-btn-essential / .lp-btn-ghost language.
   Use this class anywhere a non-primary action needs a visible shape. */
.lobby-inventory-btn,
.btn-secondary-ghost {
  font-family: var(--f-jp); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.45);
  border-top-color: rgba(201,168,76,0.7);
  color: var(--go);
  padding: 0.55rem 1.2rem; min-height: 36px;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  border-radius: 0;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(201,168,76,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s, color 0.2s;
}
.lobby-inventory-btn:hover,
.btn-secondary-ghost:hover {
  background: rgba(201,168,76,0.18);
  border-color: var(--go);
  border-top-color: var(--cr-bright);
  color: var(--parchment);
  box-shadow: 0 0 18px rgba(201,168,76,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.lobby-inventory-btn:active,
.btn-secondary-ghost:active { transform: translateY(0); }

/* Active perks pills */
.lobby-active-perks {
  flex-basis: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(201,168,76,0.15);
  background: rgba(201,168,76,0.05);
  border-radius: var(--r);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
}
.perks-title {
  font-family: var(--f-jp); font-size: 0.55rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--go);
  padding-right: 6px; border-right: 1px solid rgba(201,168,76,0.2);
  white-space: nowrap;
}
.perk-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-jp); font-size: 0.65rem;
  padding: 3px 8px; border-radius: 3px;
  border: 1px solid;
}
.perk-xp     { background: rgba(255,180,0,0.1); border-color: rgba(255,180,0,0.25); color: #ffb400; }
.perk-gold   { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.25); color: var(--go); }
.perk-season { background: rgba(76,175,80,0.1); border-color: rgba(76,175,80,0.25); color: var(--green); }

/* Battle modes */
.lobby-modes-title {
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 600;
  color: var(--t1); letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; margin: 0.5rem 0;
}
.tvn-signs-rail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
}
.tvn-sign {
  background: transparent; border: none; cursor: pointer; padding: 0;
  display: block; transition: transform 0.15s;
}
.tvn-sign:hover { transform: translateY(-2px); }
.sign-chains, .sign-chain { display: none; }
.sign-board {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1rem 0.8rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  transition: all 0.15s;
}
.tvn-sign:hover .sign-board { border-color: var(--b1); background: var(--s2); }
.sign-icon { font-size: 32px; }
.sign-icon-img { width: 48px; height: 48px; object-fit: contain; }
.sign-name { font-family: var(--f-jp); font-size: 0.9rem; font-weight: 700; color: var(--go); letter-spacing: 0.04em; }
.sign-sub  { font-family: var(--f-body); font-size: 0.75rem; color: var(--t1); }

/* Queue status */
.tvn-queue-status { text-align: center; font-family: var(--f-jp); color: var(--t1); }

/* Daily Missions */
.tvn-quest-board {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); overflow: hidden;
}
.qb-nail { display: none; }
.qb-header {
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid var(--b0);
  padding: 0.6rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.qb-title {
  font-family: var(--f-jp); font-size: 0.7rem; font-weight: 600;
  color: var(--t1); letter-spacing: 0.12em; text-transform: uppercase;
}
.tvn-quest-board { position: relative; }
.qb-quests {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.5rem 0.5rem 1.4rem;                /* extra bottom pad so last row */
  max-height: 320px; overflow-y: auto; overflow-x: hidden; /* doesn't hide under scroll hint */
  scroll-behavior: smooth;
}
@media (max-width: 700px) { .qb-quests { max-height: 240px; } }

/* Scroll affordance: faded overlay + "scroll for more" chevron ribbon sitting
   at the bottom of the quest list. Pointer-events pass through so content
   below stays interactive. Auto-hidden when the container reports
   data-scroll-end="true" (set by JS on scroll). */
.tvn-quest-board::after,
.tvn-quest-board::before {
  content: ''; position: absolute; left: 1px; right: 1px;
  bottom: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.tvn-quest-board::after {
  /* fade gradient */
  height: 44px;
  background: linear-gradient(to bottom, rgba(18,20,26,0) 0%, rgba(18,20,26,0.9) 70%, rgba(18,20,26,1) 100%);
  border-radius: 0 0 var(--r-l) var(--r-l);
}
.tvn-quest-board::before {
  /* chevron ribbon */
  z-index: 1;
  bottom: 6px;
  left: 50%; right: auto;
  transform: translateX(-50%);
  width: 110px; height: 20px;
  background: rgba(192,39,45,0.15);
  border: 1px solid rgba(192,39,45,0.45);
  border-top-color: var(--cr);
  color: var(--go);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
  font-family: var(--f-jp); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  content: 'Scroll \2193';
  box-shadow: 0 0 10px rgba(192,39,45,0.22);
  animation: qbScrollBounce 2.2s ease-in-out infinite;
}
.tvn-quest-board[data-scroll-end="true"]::after,
.tvn-quest-board[data-scroll-end="true"]::before,
.tvn-quest-board[data-no-scroll="true"]::after,
.tvn-quest-board[data-no-scroll="true"]::before { opacity: 0; }
@keyframes qbScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(3px); }
}

.quest-section-label {
  font-family: var(--f-jp); font-size: 0.6rem; font-weight: 600;
  color: var(--t1); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0 0.1rem;
  border-bottom: 1px solid var(--b0);
}

.qb-note {
  background: var(--s2); border: 1px solid var(--b0);
  border-left: 2px solid rgba(192,39,45,0.35);
  border-radius: 3px;
  padding: 0.55rem 0.75rem;
  display: block; min-width: 0; max-width: 100%; box-sizing: border-box;
  position: relative;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.qb-note:hover {
  background: rgba(22,14,16,0.85);
  border-color: var(--cr);
  border-left-color: var(--cr);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 16px rgba(192,39,45,0.18);
  transform: translateX(2px);
}
.qb-note.quest-done    { border-left-color: rgba(56,168,56,0.55); }
.qb-note.quest-done:hover {
  border-color: #48901c;
  border-left-color: #48901c;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 16px rgba(64,184,64,0.18);
}
.qb-note.quest-claimed { opacity: 0.4; }
.qb-pin { display: none; }
.qb-note-header {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 3px; min-width: 0;
}
.qb-note-icon { color: var(--go); opacity: 0.75; flex-shrink: 0; line-height: 0; }
.qb-note-name {
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--t0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0;
}
.qb-note-desc {
  font-family: var(--f-jp); font-size: 0.62rem; color: var(--t1);
  margin: 0 0 6px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.quest-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin: 0 0 6px; width: 100%; }
.quest-bar-fill { height: 100%; background: linear-gradient(to right, var(--cr-dark), var(--cr)); transition: width 0.4s; }
.qb-note.quest-done .quest-bar-fill { background: linear-gradient(to right, #2a5010, #48901c); }
.qb-note.quest-active .quest-bar-fill {
  background: linear-gradient(to right, #a07020, var(--go));
  animation: questPulse 2s ease-in-out infinite;
}
@keyframes questPulse {
  0%, 100% { box-shadow: 0 0 3px rgba(240,192,64,0.2); }
  50%      { box-shadow: 0 0 10px rgba(240,192,64,0.55); }
}

.qb-note-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; min-width: 0; width: 100%;
}
.qb-note-prog {
  font-family: var(--f-jp); font-size: 0.58rem; color: var(--t1);
  white-space: nowrap; flex: 0 0 auto;
}
.qb-note-rewards {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: nowrap; gap: 6px; flex: 0 0 auto;
}
.qb-note-rewards .badge-gold,
.qb-note-rewards .badge-xp {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-jp); font-size: 0.7rem; font-weight: 700;
  line-height: 1.2; letter-spacing: 0.04em;
  padding: 3px 8px; border: 1px solid; border-radius: 10px;
  box-sizing: border-box; min-height: 22px;
}
.qb-note-rewards .badge-gold { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.2); color: var(--go); }
.qb-note-rewards .badge-xp   { background: rgba(74,184,176,0.08); border-color: rgba(74,184,176,0.2); color: var(--teal); }
.qb-note-rewards .gold-icon { width: 14px; height: 14px; }
.qb-note-rewards .gold-amount { color: inherit; font-family: inherit; font-size: inherit; }
.qb-note-rewards .badge-xp svg { width: 14px; height: 14px; }

.btn-claim {
  font-family: var(--f-jp); font-size: 0.58rem;
  background: rgba(192,39,45,0.15); border: 1px solid var(--b1);
  color: var(--t0); padding: 3px 8px; border-radius: 3px; cursor: pointer;
}
.btn-claim:hover { background: rgba(192,39,45,0.3); }
.claimed-label { color: var(--t2); font-style: italic; font-family: var(--f-jp); font-size: 0.6rem; }

/* Game History */
#lobby-game-history { max-width: 1100px; margin: 0; }
.gh-container {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.8rem;
}
.gh-title {
  font-family: var(--f-jp); color: var(--t1); font-size: 0.75rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 0.7rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--b0);
}
/* Six columns matching the six spans in _renderGameRow: result, opponent,
   mode, time, rp, when. Header uses the same grid so labels align with data. */
.gh-header, .gh-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 80px 70px 70px 90px;
  gap: 8px; align-items: center;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--b0);
  font-family: var(--f-body); font-size: 0.85rem;
}
.gh-row:last-child { border-bottom: none; }
.gh-header {
  font-family: var(--f-jp); font-size: 0.65rem;
  color: var(--t1); letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--s2); border-radius: var(--r) var(--r) 0 0;
}
.gh-row { color: var(--t0); }
.gh-row:hover { background: rgba(255,255,255,0.02); }
.gh-row .gh-result { font-family: var(--f-jp); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; }
.gh-row .gh-opponent {
  color: var(--t0); font-family: var(--f-jp);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gh-row .gh-mode { font-family: var(--f-jp); font-size: 0.78rem; }
.gh-row .gh-time,
.gh-row .gh-when { font-family: var(--f-jp); font-size: 0.78rem; color: var(--t1); }
.gh-row .gh-rp { font-family: var(--f-jp); font-weight: 700; text-align: right; }

.gh-view-all {
  font-family: var(--f-jp); font-size: 0.72rem;
  background: transparent; border: 1px solid var(--b1);
  color: var(--t1); border-radius: var(--r);
  padding: 0.45rem 1rem; cursor: pointer; margin-top: 0.7rem;
  letter-spacing: 0.06em;
  transition: all 0.15s;
}
.gh-view-all:hover { color: var(--go); border-color: var(--go); }

@media (max-width: 640px) {
  .gh-header, .gh-row {
    grid-template-columns: 70px 1fr 60px 70px;
    font-size: 0.78rem;
  }
  .gh-rp, .gh-when { display: none; }
}


/* ── 13. DECKS (list + new-deck form) ────────────────────────────────────── */
#screen-decks { padding-bottom: 2rem; }

.new-deck-form {
  display: flex; align-items: flex-end; gap: 0.7rem;
  padding: 1rem; background: var(--s1);
  border: 1px solid var(--b0); border-radius: var(--r-l);
  margin: 0 1rem 1rem;
  flex-wrap: wrap;
}
.new-deck-form .form-group { flex: 1 1 150px; }
.new-deck-form input,
.new-deck-form .yk-select-btn {
  height: 38px; padding: 0 0.8rem;
  display: flex; align-items: center;
  font-size: 0.75rem;
}
.new-deck-form .yk-select-btn { padding-right: 1.8rem; }
.new-deck-form .create-deck-btn {
  height: 38px; padding: 0 1.2rem;
  flex: 0 0 auto; align-self: flex-end;
  display: inline-flex; align-items: center; white-space: nowrap;
}

.deck-slots-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; margin: 0 1rem 12px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--b0); border-radius: var(--r);
}
.deck-slots-label { font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1); letter-spacing: 0.1em; text-transform: uppercase; }
.deck-slots-max { font-family: var(--f-jp); font-size: 0.65rem; color: var(--go); }
.btn-buy-slot {
  font-family: var(--f-jp); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--go); background: transparent; border: 1px solid var(--b2);
  padding: 5px 14px; border-radius: 3px; cursor: pointer;
}
.btn-buy-slot:hover { background: rgba(201,168,76,0.12); }

/* Deck list — capped to 2 columns on wide screens, single column on narrow.
   Cards are denser and more readable than auto-fill at minmax 280px. */
.deck-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0 1rem;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .deck-list { grid-template-columns: 1fr; }
}
.deck-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-left: 3px solid var(--cr);
  border-radius: var(--r-l); padding: 0.8rem;
  display: flex; align-items: center; gap: 0.8rem;
  transition: border-color 0.15s, transform 0.15s;
}
.deck-card:hover { border-left-color: var(--go); transform: translateY(-1px); }
.deck-icon { flex-shrink: 0; }
.deck-class-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.deck-info { flex: 1; min-width: 0; }
.deck-name {
  font-family: var(--f-jp); font-size: 0.9rem; font-weight: 700; color: var(--t0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck-meta {
  font-family: var(--f-body); font-size: 0.78rem; color: var(--t1);
  margin-top: 2px;
}
.deck-validity.valid   { color: var(--green); font-size: 0.65rem; margin-left: 4px; }
.deck-validity.invalid { color: var(--red);   font-size: 0.65rem; margin-left: 4px; }
.deck-btns { display: flex; gap: 0.4rem; flex-shrink: 0; }
/* Edit = neutral gold (primary action); Delete = clearly destructive red */
.deck-btns .btn-sm:not(.btn-danger) {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.35);
  color: var(--go);
}
.deck-btns .btn-sm:not(.btn-danger):hover {
  background: rgba(201,168,76,0.22);
  border-color: var(--go);
  color: var(--t0);
}
.deck-btns .btn-sm.btn-danger {
  background: rgba(231,76,60,0.08);
  border-color: rgba(231,76,60,0.45);
  color: #ff6b5e;
}
.deck-btns .btn-sm.btn-danger:hover {
  background: rgba(231,76,60,0.22);
  border-color: var(--red);
  color: #ffb0a8;
}

/* ── 14. DECK BUILDER ────────────────────────────────────────────────────── */
.builder-layout {
  display: grid; grid-template-columns: 1fr 360px;
  height: 100vh; max-height: 100vh; overflow: hidden;
}
@media (max-width: 768px) {
  .builder-layout {
    grid-template-columns: 1fr; height: auto;
    overflow: visible;
  }
}
.builder-left {
  background: var(--s0); padding: 1rem;
  overflow-y: auto;
  border-right: 1px solid var(--b0);
}
.builder-right {
  background: var(--s1); padding: 1rem;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
@media (max-width: 768px) {
  .builder-right { border-left: none; border-top: 2px solid var(--b1); max-height: 60vh; }
}

.builder-filters { display: flex; gap: 6px; margin-bottom: 0.6rem; }
/* builder filters inherit the unified form-control styling */

#builder-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.builder-card-item {
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 6px;
  cursor: pointer; transition: border-color 0.15s;
  contain: layout style paint;
}
.builder-card-item:hover { border-color: var(--b2); }
.builder-card-item.unowned { opacity: 0.4; }
.builder-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 0.7rem; }

.builder-deck-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.3rem;
}
.builder-deck-title { font-family: var(--f-jp); font-size: 1rem; font-weight: 700; color: var(--t0); }
.builder-progress-wrap { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin: 0.5rem 0 4px; }
.builder-progress-bar { height: 100%; background: linear-gradient(to right, var(--cr), var(--go)); transition: width 0.3s; }
.builder-progress-label { font-family: var(--f-jp); font-size: 0.62rem; color: var(--t1); margin-bottom: 0.7rem; }
.builder-curve-title {
  font-family: var(--f-jp); font-size: 0.6rem; color: var(--t2);
  letter-spacing: 0.12em; text-transform: uppercase; margin: 0.6rem 0 0.4rem;
}
/* Mana curve: 8 vertical bars (.curve-col) with label below each */
#builder-mana-curve {
  width: 100%;
  margin-bottom: 0.8rem;
}
.builder-curve {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  height: 60px;
  align-items: end;
}
.curve-col {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  height: 100%;
  min-width: 0;
}
.curve-bar-wrap {
  width: 100%; height: 44px;
  display: flex; align-items: flex-end;
  background: rgba(255,255,255,0.03);
  border-radius: 2px 2px 0 0;
}
.curve-bar {
  width: 100%; min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: height 0.25s ease-out;
}
.curve-lbl {
  font-family: var(--f-jp); font-size: 0.55rem; color: var(--t2);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

/* Deck-card list (rows of cards in the deck): .bdc with cost / name / qty / rm button */
#builder-deck-cards {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
  margin-bottom: 0.7rem;
  overflow-y: auto;
  min-height: 0;
}
.bdc {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  background: var(--s2);
  border-radius: 3px;
  font-family: var(--f-jp); font-size: 0.7rem;
  color: var(--t0);
  transition: background 0.15s;
}
.bdc:hover { background: var(--s3); }
.bdc-cost {
  width: 24px; height: 24px; flex-shrink: 0;
  background: url('../assets/stat-mana.webp') center/contain no-repeat;
  color: var(--t0);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.75rem; font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.bdc-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.bdc-qty {
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--go);
  font-weight: 700;
}
.bdc-rm {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.3);
  color: var(--red); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; padding: 0;
  transition: all 0.15s;
}
.bdc-rm:hover { background: rgba(231,76,60,0.25); color: #ffb0a8; }
.bdc-empty { color: var(--t2); text-align: center; padding: 1rem; font-style: italic; font-size: 0.75rem; }

/* Deck-pick modal (shown before starting a match) */
.deck-pick-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 60vh; overflow-y: auto;
  margin-top: 0.6rem;
}
.deck-pick-item {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--s2); border: 1px solid var(--b0);
  border-left: 3px solid var(--cr);
  border-radius: var(--r); padding: 0.6rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.deck-pick-item:hover { background: var(--s3); border-left-color: var(--go); transform: translateX(2px); }
.deck-pick-item.deck-invalid { border-left-color: var(--red); cursor: not-allowed; opacity: 0.7; }
.deck-pick-item.dpi-empty {
  border-left-color: rgba(255,255,255,0.1);
  background: transparent; border-style: dashed;
  justify-content: center; gap: 6px;
  color: var(--t2);
}
.deck-pick-item.dpi-empty:hover { border-color: var(--b2); color: var(--go); transform: none; }

.dpi-class-icon { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dpi-info { flex: 1; min-width: 0; }
.dpi-name {
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700; color: var(--t0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dpi-meta {
  font-family: var(--f-body); font-size: 0.75rem; color: var(--t1);
  text-transform: capitalize; margin-top: 1px;
}
.dpi-count {
  font-family: var(--f-jp); font-size: 0.75rem; color: var(--go);
  font-weight: 600; flex-shrink: 0;
}
.dpi-play-btn {
  font-family: var(--f-jp); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); border: 1px solid var(--b1);
  padding: 0.4rem 0.9rem; border-radius: var(--r); cursor: pointer;
  flex-shrink: 0; transition: all 0.15s;
}
.dpi-play-btn:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); box-shadow: 0 0 10px rgba(192,39,45,0.4); }
.dpi-empty-icon {
  font-family: var(--f-jp); font-size: 1.3rem; color: var(--t2);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
}
.dpi-empty-label { font-family: var(--f-jp); font-size: 0.75rem; }

.builder-actions { margin-top: auto; }
.btn-save-deck {
  width: 100%; padding: 0.7rem; font-family: var(--f-jp);
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(201,168,76,0.4));
  border: 1px solid var(--go); color: var(--t0);
  border-radius: var(--r); cursor: pointer;
  transition: all 0.15s;
}
.btn-save-deck:hover { background: linear-gradient(135deg, rgba(201,168,76,0.35), rgba(201,168,76,0.55)); }

.builder-tips { margin-top: 0.7rem; padding: 0.6rem; background: rgba(0,0,0,0.3); border: 1px solid var(--b0); border-radius: var(--r); }
.builder-tip { font-family: var(--f-body); font-size: 0.7rem; color: var(--t1); padding: 2px 0; }

/* ── 15. COLLECTION ──────────────────────────────────────────────────────── */
#screen-collection { padding-bottom: 2rem; }
.coll-layout {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 1rem; padding: 1rem;
}
@media (max-width: 768px) { .coll-layout { grid-template-columns: 1fr; } }

.coll-sidebar {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.8rem;
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 0; align-self: flex-start;
  max-height: calc(100vh - 1rem); overflow-y: auto;
}
.coll-sidebar-title {
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--b0);
  margin-bottom: 0.4rem;
}
.coll-class-list { display: flex; flex-direction: column; gap: 3px; }
.coll-class-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--t1); font-family: var(--f-jp); font-size: 0.7rem;
  padding: 6px 8px; border-radius: var(--r); cursor: pointer;
  text-align: left; transition: all 0.15s;
}
.coll-class-btn:hover { background: rgba(255,255,255,0.03); color: var(--t0); }
.coll-class-btn.active { background: rgba(192,39,45,0.1); border-color: var(--b1); color: var(--go); }
.ccb-icon, .ccb-portrait {
  width: 28px; height: 28px; border-radius: 50%;
  flex-shrink: 0; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.6rem; color: var(--t2);
  background: rgba(255,255,255,0.03);
}
.ccb-portrait { background: transparent; }
.ccb-label { flex: 1; }

.coll-main { min-width: 0; }
.coll-main-header {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 0.7rem 0.9rem; margin-bottom: 0.8rem;
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l);
}
.coll-search-input { flex: 1 1 200px; max-width: 320px; }
.coll-show-all {
  font-family: var(--f-jp); font-size: 0.65rem;
  background: transparent; border: 1px solid var(--b0);
  color: var(--t1); padding: 0.4rem 0.8rem; border-radius: 3px;
  cursor: pointer;
}
.coll-show-all:hover { color: var(--go); border-color: var(--b2); }

#cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.7rem;
}
.coll-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 1rem; }
.coll-pagination button {
  font-family: var(--f-jp); font-size: 0.65rem;
  background: transparent; border: 1px solid var(--b0);
  color: var(--t1); padding: 4px 10px; border-radius: 3px;
  cursor: pointer;
}
.coll-pagination button.active { background: rgba(192,39,45,0.15); border-color: var(--b1); color: var(--go); }

/* Card cell — used by collection, builder, marketplace */
.cc-card {
  background: var(--s2); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 0.6rem;
  position: relative; overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  contain: layout style;
}
.cc-card:hover { border-color: var(--b2); }
.cc-card.rarity-rare      { border-top-color: var(--blue); }
.cc-card.rarity-epic      { border-top-color: var(--purple); }
.cc-card.rarity-legendary { border-top-color: var(--go); }

.cc-art-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); display: block; }
.cc-emoji { font-size: 32px; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; }
.cc-name {
  font-family: var(--f-jp); font-size: 0.72rem; font-weight: 600; color: var(--t0);
  margin-top: 0.4rem; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-stats {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px; font-family: var(--f-jp); font-size: 0.7rem;
}
.cc-cost { color: var(--blue); font-weight: 700; }
.cc-atk  { color: var(--orange); font-weight: 700; }
.cc-hp   { color: var(--green); font-weight: 700; }
.cc-qty {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.7); color: var(--go);
  font-family: var(--f-jp); font-size: 0.65rem; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
}

/* ── 16. MARKETPLACE ─────────────────────────────────────────────────────── */
#screen-marketplace { padding-bottom: 2rem; }
.mp-layout {
  display: grid; grid-template-columns: 240px 1fr;
  gap: 1.2rem; padding: 1rem;
}
.mp-layout.no-sidebar { grid-template-columns: 1fr; gap: 0; }
@media (max-width: 768px) { .mp-layout { grid-template-columns: 1fr; } }

.mp-sidebar {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 1rem;
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 0; align-self: flex-start;
  max-height: calc(100vh - 1rem); overflow-y: auto;
}
.mp-sidebar-title {
  font-family: var(--f-jp); font-size: 0.8rem; color: var(--t0);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--b0);
  margin-bottom: 0.3rem;
}
.mp-sidebar-filters { display: flex; flex-direction: column; gap: 10px; }
.mp-filter-label {
  font-family: var(--f-jp); font-size: 0.68rem; color: var(--t1);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 6px 0 -4px;
}
.mp-main { min-width: 0; }
.mp-main-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.7rem;
  padding: 0.4rem 0 0.7rem;
  border-bottom: 1px solid var(--b0); margin-bottom: 0.8rem;
}
.mp-main-header .screen-title { margin: 0; }

.mp-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--b0); margin-bottom: 0.8rem;
}
.mp-tab {
  background: transparent; border: none; color: var(--t1);
  font-family: var(--f-jp); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.6rem 1rem; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.mp-tab.active { color: var(--go); border-bottom-color: var(--cr); }

.mp-row, .mp-filters {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 0.7rem; align-items: center;
}
/* Marketplace filters inherit the unified form-control styling. */
.mp-txn-filter-wrap {
  margin-bottom: 0.8rem;
  max-width: 240px;
}

.mp-list, .mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.7rem;
}
.mp-card-item {
  background: var(--s2); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 0.6rem;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.15s, transform 0.15s;
  contain: layout style;
}
.mp-card-item:hover { border-color: var(--b2); transform: translateY(-2px); }
.mp-card-dimmed { opacity: 0.55; filter: grayscale(0.4); }
.mp-card-art {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: var(--r); overflow: hidden;
  background: var(--s3);
  display: flex; align-items: center; justify-content: center;
}
.mp-card-img, .mp-card-thumb {
  width: 100%; height: 100%; object-fit: cover;
}
.mp-emoji-fallback {
  font-size: 36px;
  display: flex; align-items: center; justify-content: center;
}
.mp-card-name {
  font-family: var(--f-jp); font-size: 0.75rem; font-weight: 600;
  color: var(--t0); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-jp); font-size: 0.6rem;
  color: var(--t1);
}
.mp-card-class { text-transform: capitalize; }
.mp-rarity-badge {
  font-family: var(--f-jp); font-size: 0.55rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid currentColor;
  border-radius: 3px;
}
.mp-card-qty { color: var(--go); font-weight: 700; }
.mp-card-price {
  font-family: var(--f-jp); font-size: 0.95rem; font-weight: 700;
  color: var(--go); text-align: center;
}
.mp-sell-price {
  font-family: var(--f-jp); font-size: 0.7rem;
  color: var(--t1); text-align: center;
  display: flex; flex-direction: column; gap: 2px;
  line-height: 1.3;
}
.mp-sell-price-net,
.mp-sell-price-formula {
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.mp-sell-price-net { color: var(--t0); font-weight: 600; }
.mp-sell-price-formula { font-size: 0.62rem; color: var(--t2); letter-spacing: 0.04em; }
.mp-buy-btn, .mp-sell-btn {
  width: 100%; padding: 0.5rem;
  font-family: var(--f-jp); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); border: 1px solid var(--b1);
  border-radius: var(--r); cursor: pointer;
  transition: all 0.15s;
}
.mp-buy-btn:hover:not(:disabled),
.mp-sell-btn:hover:not(:disabled) { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }
.mp-buy-btn:disabled, .mp-sell-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mp-sell-btn {
  background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(201,168,76,0.45));
  border-color: var(--b2); color: var(--go);
}
.mp-sell-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgba(201,168,76,0.35), rgba(201,168,76,0.6)); }

.mp-load-info {
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1);
  text-align: center; padding: 0.6rem;
}
.mp-load-more-btn {
  display: block; margin: 0 auto;
  font-family: var(--f-jp); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--b0);
  color: var(--t1); padding: 0.5rem 1.2rem; border-radius: var(--r);
  cursor: pointer;
}
.mp-load-more-btn:hover { color: var(--go); border-color: var(--b2); }
.mp-pagination { display: flex; justify-content: center; gap: 6px; padding: 1rem; }
.mp-panel { padding: 0; }
.mp-empty { color: var(--t1); text-align: center; padding: 2rem; font-style: italic; }

/* ── 17. LEADERBOARD ─────────────────────────────────────────────────────── */
#screen-leaderboard { padding-bottom: 2rem; }

/* Tabs */
.lb-tabs {
  display: flex; gap: 4px; margin: 0.8rem 0;
  border-bottom: 1px solid var(--b0);
}
.lb-tab {
  background: transparent; border: none; color: var(--t1);
  font-family: var(--f-jp); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.6rem 1.2rem; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.lb-tab:hover { color: var(--t0); }
.lb-tab.active { color: var(--go); border-bottom-color: var(--cr); }

/* Season header + countdown */
.season-header {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.season-title {
  font-family: var(--f-jp); font-size: 1.1rem; color: var(--go);
  letter-spacing: 0.05em; margin: 0 0 0.3rem;
}
.season-subtitle {
  font-family: var(--f-body); color: var(--t1); font-size: 0.85rem;
  margin-bottom: 0.8rem;
}
.season-countdown-wrap {
  display: flex; gap: 0.3rem; align-items: center;
}
.season-countdown-block {
  display: flex; flex-direction: column; align-items: center;
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.5rem 0.7rem;
  min-width: 50px;
}
.countdown-value {
  font-family: var(--f-jp); font-size: 1.3rem; font-weight: 700;
  color: var(--go); line-height: 1;
}
.countdown-label {
  font-family: var(--f-jp); font-size: 0.6rem; color: var(--t1);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px;
}
.countdown-sep {
  font-family: var(--f-jp); font-size: 1.3rem; color: var(--t2);
  padding: 0 2px;
}
.season-rewards-hint {
  font-family: var(--f-body); color: var(--t1); font-size: 0.8rem;
  font-style: italic; margin-top: 0.6rem;
}

/* Season rewards panel */
.sr-panel {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.sr-title {
  font-family: var(--f-jp); font-size: 0.9rem; color: var(--t0);
  letter-spacing: 0.05em; margin: 0 0 0.6rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--b0);
}
.sr-rank-info { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: 0.8rem; }
.sr-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font-family: var(--f-body); font-size: 0.85rem;
  color: var(--t0);
}
.sr-label { color: var(--t1); }
.sr-detail { color: var(--go); font-family: var(--f-jp); font-size: 0.82rem; }
.sr-breakdown {
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.6rem 0.8rem;
  margin-top: 0.6rem;
}
.sr-total {
  display: flex; justify-content: space-between;
  padding: 6px 0 0; margin-top: 6px;
  border-top: 1px solid var(--b0);
  font-family: var(--f-jp); font-size: 0.9rem; color: var(--go);
  font-weight: 700;
}
.sr-hint {
  font-family: var(--f-body); font-style: italic;
  color: var(--t2); font-size: 0.78rem; margin-top: 0.6rem;
}

/* Podium */
.podium-wrap {
  display: grid; grid-template-columns: 1fr 1.25fr 1fr;
  gap: 0.8rem; margin: 1rem 0; align-items: end;
  max-width: 800px; margin-left: auto; margin-right: auto;
}
.podium-1st, .podium-2nd, .podium-3rd {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 1rem 0.7rem 0.9rem;
  text-align: center; position: relative;
}
.podium-1st {
  border-top: 3px solid #f4d35e;
  box-shadow: 0 0 22px rgba(244,211,94,0.12);
  padding: 1.3rem 0.7rem 1.1rem;
}
.podium-2nd { border-top: 3px solid #d8d8d8; }
.podium-3rd { border-top: 3px solid #e09060; }
.podium-medal {
  width: auto; height: 72px; object-fit: contain;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
}
.podium-medal-1st { height: 96px; }
.lb-medal-img {
  width: auto; height: 28px; object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.podium-info-frame {
  display: flex; flex-direction: column; gap: 2px;
}
.podium-info-1st { gap: 4px; }
.podium-name {
  font-family: var(--f-jp); font-size: 0.9rem; color: var(--t0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.podium-tier {
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1);
  letter-spacing: 0.05em;
}
.podium-rp {
  font-family: var(--f-jp); font-size: 0.95rem; font-weight: 700;
  color: var(--go);
}
.podium-player { font-family: var(--f-body); color: var(--t1); font-size: 0.8rem; }

/* Table */
.lb-table {
  width: 100%; border-collapse: collapse;
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); overflow: hidden;
  margin-top: 1rem;
}
.lb-table th, .lb-table td {
  padding: 0.6rem 0.9rem; text-align: left;
  border-bottom: 1px solid var(--b0);
  font-family: var(--f-body); font-size: 0.82rem;
}
.lb-table th {
  font-family: var(--f-jp); color: var(--t1);
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--s2);
}
.lb-table td { color: var(--t0); }
.lb-table tr:hover td { background: rgba(255,255,255,0.02); }
.lb-table tr.is-me td { background: rgba(201,168,76,0.08); color: var(--go); }

/* Split layout — JS renders data in two halves, each as its own <table> inside
   .lb-table-col. The grid is a plain 2-column wrapper, NOT a table layout. */
.lb-table-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; align-items: start;
}
@media (max-width: 860px) {
  .lb-table-grid { grid-template-columns: 1fr; }
}
.lb-table-col { min-width: 0; }
.lb-table-col .lb-table { margin: 0; width: 100%; }

/* Rank column styling — used inside <td> cells */
.lb-rank-num {
  font-family: var(--f-jp); font-weight: 700;
  color: var(--go); font-size: 0.85rem;
}
.lb-score { font-family: var(--f-jp); color: var(--t0); }
.lb-record { font-family: var(--f-jp); color: var(--t1); font-size: 0.8rem; }

/* Legend-tier row — highlight only (do NOT change display; it's a <tr>) */
.lb-table tr.ranked-row-legend td {
  background: rgba(201,168,76,0.04);
  color: var(--go);
}
.lb-table tr.ranked-row-legend:hover td { background: rgba(201,168,76,0.08); }
.lb-table tr.lb-me td {
  background: rgba(201,168,76,0.12); color: var(--go);
  font-weight: 700;
}

/* Medal badges */
.lb-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-family: var(--f-jp); font-size: 0.7rem; font-weight: 700;
  color: var(--s0);
}
.medal-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--f-jp); font-size: 0.65rem; font-weight: 700;
  color: var(--s0);
}
.medal-gold,   .lb-medal-1 { background: linear-gradient(135deg, #f4d35e, #c9a84c); }
.medal-silver, .lb-medal-2 { background: linear-gradient(135deg, #d8d8d8, #a0a0a0); }
.medal-bronze, .lb-medal-3 { background: linear-gradient(135deg, #e09060, #b06030); }

/* Empty state */
.lb-empty {
  color: var(--t1); text-align: center; padding: 2rem;
  font-style: italic;
}
.lb-empty-msg {
  font-family: var(--f-body); color: var(--t1);
  font-style: italic; padding: 1rem;
}

/* My rank box */
#my-rank-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l); padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-family: var(--f-body); color: var(--t0); font-size: 0.85rem;
}


/* ── 18. SHOP ────────────────────────────────────────────────────────────── */
.shop-layout {
  display: grid; grid-template-columns: 180px 1fr;
  min-height: 100vh; position: relative;
}
@media (max-width: 768px) {
  .shop-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
}

.shop-sidebar {
  background: rgba(9,9,15,0.92);
  border-right: 1px solid var(--b0);
  padding: 1.4rem 0.7rem;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.5rem;
}
@media (max-width: 768px) {
  .shop-sidebar {
    position: static; height: auto;
    padding: 0.7rem; border-right: none; border-bottom: 1px solid var(--b0);
    flex-direction: row; overflow-x: auto;
  }
}
.shop-sidebar-title {
  font-family: var(--f-jp); font-size: 0.95rem; font-weight: 700;
  color: var(--t0); padding: 0 0.4rem 0.5rem;
  border-bottom: 1px solid var(--b0); letter-spacing: 0.06em;
}
@media (max-width: 768px) { .shop-sidebar-title { display: none; } }

.shop-tab-list { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 768px) { .shop-tab-list { flex-direction: row; gap: 3px; flex-wrap: nowrap; } }

.shop-tab {
  display: flex; align-items: center; gap: 0.55rem;
  background: transparent; border: 1px solid transparent;
  color: var(--t1); font-family: var(--f-jp); font-size: 0.7rem;
  padding: 0.5rem; cursor: pointer; border-radius: var(--r);
  text-align: left; letter-spacing: 0.04em;
  transition: all 0.15s; width: 100%;
  white-space: nowrap;
}
.shop-tab svg { opacity: 0.6; flex-shrink: 0; }
.shop-tab:hover { background: rgba(255,255,255,0.03); color: var(--t0); }
.shop-tab:hover svg { opacity: 0.9; }
.shop-tab.active {
  background: rgba(192,39,45,0.08); border-color: var(--b1); color: var(--go);
}
.shop-tab.active svg { opacity: 1; stroke: var(--go); }

.shop-main { padding: 1.4rem 1.6rem 2rem; overflow-y: auto; min-height: 100vh; }

.shop-category { margin-bottom: 1.5rem; }
.shop-cat-title {
  font-family: var(--f-jp); font-size: 0.95rem; font-weight: 600;
  color: var(--t0); letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(192,39,45,0.2);
  padding-bottom: 0.5rem; margin: 0 0 0.9rem;
}
.shop-cat-icon { width: 28px; height: 28px; object-fit: contain; }
.shop-notice {
  font-size: 0.82rem; color: var(--t2);
  background: rgba(192,39,45,0.08); border: 1px solid rgba(192,39,45,0.25);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 1rem;
}
.shop-notice a { color: var(--go); text-decoration: underline; }
.shop-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
}
@media (max-width: 480px) { .shop-items-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } }

.shop-item {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1rem 0.9rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  text-align: center; position: relative;
  transition: border-color 0.15s, transform 0.15s;
}
.shop-item:hover { border-color: var(--b2); transform: translateY(-2px); }
.shop-item-legendary {
  border-top-color: var(--go);
  box-shadow: 0 0 22px rgba(201,168,76,0.08), inset 0 0 28px rgba(201,168,76,0.03);
}
.shop-item-icon {
  display: flex; align-items: center; justify-content: center;
  min-height: 88px;
  margin: 0.3rem auto 0.4rem;
}
.shop-item-icon img,
.shop-item-img {
  width: 76px; height: 76px; object-fit: contain;
  padding: 8px;
  background: radial-gradient(circle at 50% 45%, rgba(192,39,45,0.18), rgba(7,8,13,0.55) 70%);
  border: 1px solid rgba(201,168,76,0.35);
  border-top: 1px solid rgba(192,39,45,0.55);
  border-radius: 50%;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.55),
    0 0 14px rgba(192,39,45,0.18);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.shop-item:hover .shop-item-icon img,
.shop-item:hover .shop-item-img {
  border-color: var(--go);
  border-top-color: var(--cr-bright);
  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.55),
    0 0 22px rgba(201,168,76,0.35);
  transform: scale(1.04);
}
.shop-item-emoji {
  display: flex; align-items: center; justify-content: center;
  color: var(--go);
}
.shop-item-name { font-family: var(--f-jp); font-size: 0.82rem; font-weight: 600; color: var(--t0); }
.shop-item-desc {
  font-family: var(--f-body); font-size: 0.75rem; color: var(--t1);
  line-height: 1.4; flex: 1;
}
.shop-item-footer {
  display: flex; flex-direction: column; gap: 0.4rem;
  margin-top: auto; padding-top: 0.4rem;
}
.shop-item-price,
.cosmetic-price,
.prestige-price,
.token-bundle-price {
  font-family: var(--f-jp); font-size: 1rem; font-weight: 700;
  color: var(--go);
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.shop-item-buy {
  width: 100%; padding: 0.5rem; font-family: var(--f-jp);
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(201,168,76,0.12); border: 1px solid var(--b2);
  color: var(--go); border-radius: var(--r); cursor: pointer;
}
.shop-item-buy:hover { background: rgba(201,168,76,0.25); }
.shop-item-buy:disabled { opacity: 0.4; cursor: not-allowed; }
.shop-item.best-value,
.gold-tier-card.best-value {
  border-top-color: var(--go);
  box-shadow: 0 0 22px rgba(201,168,76,0.1);
}
.shop-item.best-value::before,
.gold-tier-card.best-value::before {
  content: 'BEST VALUE';
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background: linear-gradient(135deg, #f4d35e, var(--go));
  color: var(--s0); font-family: var(--f-jp); font-size: 0.6rem;
  font-weight: 700; letter-spacing: 0.1em;
  padding: 3px 10px; border-radius: 10px;
  white-space: nowrap;
}

/* Token shop status header (inside tokens tab) */
.token-shop-status {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l); padding: 1.1rem 1.4rem;
  margin-bottom: 1.2rem;
  display: inline-flex; align-items: center;
  gap: 1.4rem; max-width: 100%; min-width: 0;
}
.token-shop-hero-icon {
  width: 76px; height: 76px; object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(201,168,76,0.35));
  flex-shrink: 0;
}
.token-shop-current {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; flex-shrink: 0;
}
.token-shop-count-label {
  font-family: var(--f-jp); font-size: 0.6rem; color: var(--t2);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.token-shop-count {
  font-family: var(--f-jp); font-size: 2rem; font-weight: 700;
  color: var(--go); line-height: 1;
}
.token-shop-count-suffix {
  font-family: var(--f-jp); font-size: 0.75rem; color: var(--t1);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-left: 0.4rem;
}
.token-shop-info {
  font-family: var(--f-body); color: var(--t1); font-size: 0.82rem;
  font-style: italic;
  max-width: 420px; line-height: 1.55;
  border-left: 1px solid var(--b0);
  padding-left: 1.1rem; margin-left: 0.2rem;
}

/* Bundle grid */
.token-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
}

/* Bundle art — larger + tier-differentiated */
.token-bundle-art {
  display: flex; align-items: center; justify-content: center;
  margin: 4px 0;
}
.token-bundle-art img {
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(201,168,76,0.28));
  transition: transform 0.2s, filter 0.2s;
}
.token-bundle-card:hover .token-bundle-art img { transform: scale(1.05); filter: drop-shadow(0 4px 16px rgba(201,168,76,0.5)); }
/* Tier sizes — tiny → huge so a 60-token "Mega Chest" reads bigger than a 5-token "Pouch" */
.token-bundle-art-sm { height: 64px; }
.token-bundle-art-sm img { height: 64px; width: auto; }
.token-bundle-art-md { height: 84px; }
.token-bundle-art-md img { height: 84px; width: auto; }
.token-bundle-art-lg { height: 104px; }
.token-bundle-art-lg img { height: 104px; width: auto; }
.token-bundle-art-xl { height: 124px; }
.token-bundle-art-xl img { height: 124px; width: auto; }
.token-bundle-tier-xl {
  border-top-color: var(--go);
  box-shadow: 0 0 18px rgba(201,168,76,0.18);
}

@media (max-width: 560px) {
  .token-shop-status { display: flex; flex-wrap: wrap; }
  .token-shop-info { border-left: none; padding-left: 0; margin-left: 0; border-top: 1px solid var(--b0); padding-top: 0.8rem; margin-top: 0.4rem; flex-basis: 100%; }
}

/* Cosmetics grid (plural form used by JS) */
.cosmetics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}
.cosmetic-preview {
  aspect-ratio: 2/3; position: relative;
  background: var(--s2); border-radius: var(--r);
  overflow: hidden; margin-bottom: 0.5rem;
}
.cosmetic-class {
  font-family: var(--f-jp); font-size: 0.68rem;
  color: var(--t1); letter-spacing: 0.1em;
}

/* Token bundles */
.token-bundle-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1rem; text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.token-bundle-name {
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.token-bundle-amount {
  font-family: var(--f-jp); font-size: 1.6rem; font-weight: 700; color: var(--go);
  line-height: 1;
}
.token-bundle-label { font-family: var(--f-jp); font-size: 0.6rem; color: var(--t2); }
.token-bundle-price { margin-top: auto; padding-top: 6px; }
.btn-token-buy {
  width: 100%; margin-top: 6px;
  font-family: var(--f-jp); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  border: 1px solid var(--b1); color: var(--t0);
  padding: 0.5rem; border-radius: var(--r); cursor: pointer;
}
.btn-token-buy:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }

/* "No game tokens" modal (legal-modal-overlay used for it) */
#tokens-modal .legal-modal {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.6rem;
  width: 100%; max-width: 480px;
  position: relative;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
.legal-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: none; color: var(--t1);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.legal-modal-close:hover { color: var(--go); }
.tokens-modal-body { text-align: center; }
.tokens-modal-icon {
  font-size: 36px; color: var(--cr); margin-bottom: 0.4rem;
}
.tokens-modal-title {
  font-family: var(--f-jp); font-size: 1.2rem; color: var(--t0);
  margin: 0.4rem 0; letter-spacing: 0.06em;
}
.tokens-modal-subtitle {
  font-family: var(--f-body); font-size: 0.85rem; color: var(--t1);
  margin-bottom: 0.6rem;
}
.tokens-reset-timer {
  font-family: var(--f-jp); font-size: 0.75rem; color: var(--go);
  margin-bottom: 1rem;
}
.tokens-bundle-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin-top: 1rem;
}
@media (max-width: 480px) { .tokens-bundle-grid { grid-template-columns: 1fr; } }

/* Mystery box / lottery / ranked / season pass */
.ranked-grid {
  display: block; padding: 1rem 0;
}
.ranked-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.2rem;
  text-align: center; position: relative; overflow: hidden;
  max-width: 1200px; margin: 0 auto;
}
.ranked-card.owned {
  border-top-color: var(--go);
  border-color: rgba(201,168,76,0.45);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 0 28px rgba(201,168,76,0.04);
}
.ranked-active-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 25%, rgba(201,168,76,0.07) 0%, transparent 70%);
  animation: rankedGlow 3s ease-in-out infinite;
}
@keyframes rankedGlow { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.ranked-icon { margin: 0 auto 0.5rem; }
.ranked-icon-img { width: 64px; height: 64px; object-fit: contain; }
.ranked-status-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f4d35e, var(--go));
  color: var(--s0);
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  padding: 3px 12px; border-radius: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
}

.season-pass-card { padding: 1.4rem 1.8rem; text-align: left; }
.season-pass-card .rc-header {
  text-align: center; padding-bottom: 0.9rem; margin-bottom: 1rem;
  border-bottom: 1px solid rgba(201,168,76,0.18); position: relative;
}
.season-pass-card .rc-header h3 { font-family: var(--f-jp); color: var(--t0); margin: 0 0 6px; font-size: 1.1rem; }
.season-pass-card .rc-header p  { color: var(--t1); margin: 0.5rem 0 0; }
.season-pass-card .rc-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.8rem; align-items: start;
}
@media (max-width: 720px) { .season-pass-card .rc-body { grid-template-columns: 1fr; } }
.season-pass-card .rc-col { display: flex; flex-direction: column; gap: 2px; }
.season-pass-card .rc-col .sp-section-title:first-child { margin-top: 0; }
.season-pass-card .ranked-perks {
  list-style: none; padding: 0; margin: 0.5rem 0; line-height: 1.7;
  font-family: var(--f-body); font-size: 0.82rem; color: var(--t1);
}
.season-pass-card .ranked-perks li.perk-active { color: var(--go); }
.season-pass-card .rc-cta {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(201,168,76,0.12);
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  flex-wrap: wrap;
}
.season-pass-card .ranked-price {
  font-family: var(--f-jp); font-size: 1.4rem; font-weight: 700;
  color: var(--go); margin: 0;
}
.season-pass-card .rc-cta .ranked-buy-btn {
  width: auto; flex: 0 0 auto; padding: 0.65rem 1.6rem;
}
.season-pass-card .ranked-active-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--go); font-family: var(--f-jp);
  font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.5rem 1.1rem; margin-bottom: 0;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.5);
  border-top: 1px solid var(--go);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  box-shadow: 0 0 18px rgba(201,168,76,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: seasonActivePulse 2.4s ease-in-out infinite;
}
@keyframes seasonActivePulse {
  0%, 100% { box-shadow: 0 0 18px rgba(201,168,76,0.28), inset 0 1px 0 rgba(255,255,255,0.08); }
  50%      { box-shadow: 0 0 28px rgba(201,168,76,0.5),  inset 0 1px 0 rgba(255,255,255,0.12); }
}
/* .ranked-card.owned already inherits gold border from the earlier rule */
.ranked-buy-btn {
  width: 100%; padding: 0.7rem;
  cursor: pointer; transition: all 0.15s;
}
.season-pass-card .rc-view-btn {
  width: auto; margin: 0; flex-shrink: 0;
}

/* Section titles in season pass / shop sub-blocks */
.sp-section-title {
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t2); margin: 1rem 0 0.5rem;
}

/* Challenges */
.sp-challenges { display: flex; flex-direction: column; gap: 0.4rem; }
.sp-challenge {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: rgba(7,8,13,0.55);
  border: 1px solid var(--b0);
  border-left: 2px solid rgba(192,39,45,0.45);
  border-radius: var(--r);
  font-family: var(--f-body); font-size: 0.82rem; color: var(--t1);
  transition: border-color 0.15s, background 0.15s;
}
.sp-challenge:hover {
  background: rgba(22,14,16,0.7);
  border-color: rgba(192,39,45,0.45);
  border-left-color: var(--cr);
}
.sp-ch-icon { color: var(--go); flex-shrink: 0; line-height: 0; }
.sp-ch-reward {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-jp); font-size: 0.75rem; font-weight: 700;
  color: var(--go);
  white-space: nowrap; text-align: right;
}

/* Milestones */
.sp-milestones { display: flex; flex-direction: column; gap: 0.4rem; }
.sp-milestone {
  display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
  column-gap: 0.9rem; align-items: center;
  padding: 0.55rem 0.8rem;
  background: rgba(7,8,13,0.55);
  border: 1px solid var(--b0);
  border-left: 2px solid rgba(201,168,76,0.35);
  border-radius: var(--r);
}
.sp-ms-rank {
  font-family: var(--f-jp); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-ms-reward {
  display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end;
  font-family: var(--f-jp); font-size: 0.78rem; color: var(--t1);
  text-align: right; min-width: 0;
}

/* Cosmetic / hero skin / card-back grid */
.cosmetic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.7rem;
}
.cosmetic-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.7rem;
  text-align: center; transition: border-color 0.15s;
  display: flex; flex-direction: column;
  position: relative;
}
.cosmetic-card .shop-item-footer,
.cosmetic-card .class-unlocked-badge { margin-top: auto; }
.cosmetic-card:hover { border-color: var(--b2); }
.cosmetic-card.owned { border-color: var(--b2); }
.tournament-card-art {
  width: 100%; aspect-ratio: 1.6 / 1;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(201,168,76,0.12), rgba(7,8,13,0.7) 70%);
  border: 1px solid var(--b0); border-radius: var(--r);
  margin-bottom: 0.6rem; overflow: hidden;
}
.tournament-card-art img {
  max-width: 62%; max-height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}
.cosmetic-name { font-family: var(--f-jp); font-size: 0.75rem; color: var(--t0); margin: 0.4rem 0; }
.buy-cosmetic-btn, .equip-btn {
  width: 100%; margin-top: 0.4rem;
  font-family: var(--f-jp); font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.45rem;
  background: rgba(201,168,76,0.12); border: 1px solid var(--b2);
  color: var(--go); border-radius: var(--r); cursor: pointer;
}
.buy-cosmetic-btn:hover, .equip-btn:hover { background: rgba(201,168,76,0.22); }

/* Pack opening modal — full-screen overlay wrapper (JS creates .pack-modal) */
.pack-modal, .mystery-box-modal, .ph-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: overlayFade 0.2s ease-out;
}
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }

.pack-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.6rem;
  max-width: 720px; width: 92vw;
  position: relative;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
.pack-title {
  font-family: var(--f-jp); font-size: 1.3rem; color: var(--go);
  text-align: center; margin: 0 0 0.3rem; letter-spacing: 0.05em;
}
.pack-subtitle {
  font-family: var(--f-body); color: var(--t1);
  text-align: center; font-size: 0.85rem; margin-bottom: 1rem;
}
.pack-cards-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin: 1rem 0;
}
@media (max-width: 600px) { .pack-cards-grid { grid-template-columns: repeat(3, 1fr); } }

.pack-card {
  position: relative; aspect-ratio: 2/3; perspective: 800px;
  cursor: pointer;
}
.pack-card-flipper {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}
/* Default (hidden) shows back. When JS adds .pack-card-revealed, flip to front. */
.pack-card-revealed .pack-card-flipper { transform: rotateY(180deg); }
.pack-card-hidden:hover .pack-card-flipper { transform: rotateY(10deg); }

.pack-card-front, .pack-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 2px solid var(--b1); border-radius: var(--r-l);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pack-card-front {
  background: var(--s2);
  transform: rotateY(180deg);
}
.pack-card-back {
  background:
    radial-gradient(circle at 30% 25%, rgba(201,168,76,0.12), transparent 60%),
    linear-gradient(135deg, var(--cr-dark), #4a0608);
  border-color: var(--cr);
  display: flex; align-items: center; justify-content: center;
}
.pack-card-back-design {
  width: 80%; height: 80%;
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r);
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent);
}
.pack-card-art {
  flex: 1; min-height: 0;
  overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.pack-card-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pack-card-art .card-art-emoji,
.pack-card-art .card-art-fallback {
  font-size: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.pack-card-name {
  padding: 0.35rem 0.4rem 0.15rem;
  font-family: var(--f-jp); font-weight: 700;
  font-size: 0.7rem;
  color: var(--t0);
  text-align: center;
  line-height: 1.15;
  height: 2.4em;                            /* locked 2-line footprint */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0; flex-grow: 0;
  box-sizing: content-box;
}
.pack-card-meta {
  height: 4.4em;                            /* FIXED 2-line footprint + padding */
  padding: 0.5rem 0.4rem 0.6rem;
  background: rgba(0,0,0,0.6);
  font-family: var(--f-jp); font-size: 0.58rem;
  color: var(--t2);
  letter-spacing: 0.03em;
  text-transform: capitalize;
  flex-shrink: 0; flex-grow: 0;
  box-sizing: border-box;
  display: flex; flex-wrap: wrap;
  align-content: center;
  align-items: center; justify-content: center;
  gap: 4px 6px;
  line-height: 1.4;
  overflow: hidden;
}
.pack-meta-sep { color: var(--t2); opacity: 0.6; }
.pack-meta-cost {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--go); font-weight: 700;
}
.pack-meta-mana {
  width: 12px; height: 12px; object-fit: contain;
}
.pack-card-rarity { color: var(--t2); font-size: 0.62rem; }
.pack-card.rarity-rare .pack-card-front { border-color: var(--blue); }
.pack-card.rarity-epic .pack-card-front { border-color: var(--purple); }
.pack-card.rarity-legendary .pack-card-front { border-color: var(--go); box-shadow: 0 0 16px rgba(201,168,76,0.4); }

.pack-epic-glow {
  position: absolute; inset: -4px; pointer-events: none;
  background: radial-gradient(circle, rgba(167,77,244,0.3), transparent 70%);
  animation: packGlow 1.5s ease-in-out infinite;
}
.pack-legendary-burst {
  position: absolute; inset: -8px; pointer-events: none;
  background: radial-gradient(circle, rgba(244,211,94,0.5), transparent 70%);
  animation: packGlow 1.2s ease-in-out infinite;
}
@keyframes packGlow { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.btn-pack-close {
  display: block; margin: 1rem auto 0;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem 1.5rem; border: 1px solid var(--b1);
  border-radius: var(--r); cursor: pointer;
}
.btn-pack-close:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }
.pack-collect-appear {
  animation: collectAppear 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.2) both;
}
@keyframes collectAppear {
  from { opacity: 0; transform: translateY(14px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Particles — JS sets --px/--py and background color inline */
.pack-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 8px currentColor;
  animation: packParticle 1s cubic-bezier(0.2, 0.7, 0.6, 1) forwards;
}
@keyframes packParticle {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--px, 0)), calc(-50% + var(--py, 0))) scale(0.3); }
}

/* Mystery box */
.mystery-box-stage {
  position: relative; padding: 1.5rem 1rem;
  text-align: center; min-height: 280px;
}
.mystery-box-title {
  font-family: var(--f-jp); font-size: 1.2rem; color: var(--go);
  margin: 0 0 0.3rem; letter-spacing: 0.05em;
}
.mystery-box-subtitle {
  font-family: var(--f-body); color: var(--t1); font-size: 0.85rem;
  margin-bottom: 1rem;
}
.mystery-box-content { position: relative; margin: 1rem 0; }
.mystery-chest-img {
  width: 140px; height: 140px; object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(201,168,76,0.3));
  animation: mysteryBob 2.4s ease-in-out infinite;
}
@keyframes mysteryBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.mystery-box-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(201,168,76,0.25), transparent 60%);
  animation: mysteryGlow 2s ease-in-out infinite;
}
@keyframes mysteryGlow { 0%,100% { opacity: 0.4; } 50% { opacity: 0.85; } }
.mystery-particles {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15), transparent 5%),
              radial-gradient(circle at 70% 30%, rgba(255,255,255,0.1), transparent 4%),
              radial-gradient(circle at 20% 70%, rgba(255,255,255,0.08), transparent 5%);
}
.mystery-open-btn {
  background: linear-gradient(135deg, var(--go), #d4b857);
  color: var(--s0); font-family: var(--f-jp); font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 0.7rem 1.5rem; border: 1px solid #d4b857;
  border-radius: var(--r); cursor: pointer;
  box-shadow: 0 4px 18px rgba(201,168,76,0.3);
}
.mystery-open-btn:hover { background: linear-gradient(135deg, #d4b857, #e0c567); }
.mystery-collect-btn {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.8rem;
  letter-spacing: 0.1em; padding: 0.6rem 1.3rem;
  border: 1px solid var(--b1); border-radius: var(--r); cursor: pointer;
}
.mystery-card-reveal {
  background: var(--s2); border: 2px solid var(--go);
  border-radius: var(--r-l); padding: 0.8rem; margin: 1rem auto;
  max-width: 200px;
  animation: mysteryReveal 0.6s ease-out;
}
@keyframes mysteryReveal {
  from { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.mystery-card-art-wrap { aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; }
.mystery-card-art-wrap img { max-width: 100%; object-fit: contain; }
.mystery-card-name { font-family: var(--f-jp); color: var(--t0); margin-top: 0.4rem; }
.mystery-card-rarity { font-family: var(--f-jp); font-size: 0.7rem; color: var(--go); letter-spacing: 0.08em; }
.mystery-card-meta { font-size: 0.72rem; color: var(--t1); margin-top: 4px; }
.mystery-bonus-reveal {
  background: rgba(244,211,94,0.08); border: 1px solid var(--go);
  border-radius: var(--r); padding: 0.5rem; margin-top: 0.5rem;
}
.mystery-bonus-icon { font-size: 1.5rem; display: block; }
.mystery-bonus-text { font-family: var(--f-jp); color: var(--go); font-size: 0.78rem; }
.mystery-rarity-flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(244,211,94,0.8), transparent 60%);
  animation: rarityFlash 0.8s ease-out;
}
@keyframes rarityFlash {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 0; transform: scale(1.5); }
}

/* Lottery */
.lottery-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l); padding: 1.2rem;
  max-width: 720px; margin: 0 auto 1rem;
}
.lottery-tickets-visual {
  text-align: center; margin: 0.5rem 0;
}
.lottery-tickets-label {
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.lottery-tickets-count {
  font-family: var(--f-jp); font-size: 1.8rem; font-weight: 700;
  color: var(--go); line-height: 1;
}
.lottery-ticket-dots {
  display: flex; gap: 3px; justify-content: center;
  flex-wrap: wrap; margin: 0.4rem 0;
}
.lottery-ticket-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--go); box-shadow: 0 0 4px rgba(201,168,76,0.5);
}
.lottery-ticket-more {
  font-family: var(--f-jp); font-size: 0.72rem; color: var(--t1);
}
.lottery-cost, .lottery-odds {
  font-family: var(--f-body); color: var(--t1); font-size: 0.82rem;
  margin: 4px 0;
}
.lottery-buy-section, .lottery-draw-section {
  padding: 0.7rem 0; border-top: 1px solid var(--b0); margin-top: 0.7rem;
}
.lottery-ticket-controls { display: flex; justify-content: center; gap: 8px; margin: 0.5rem 0; }
.lottery-draw-btn, .gambling-draw-btn {
  background: linear-gradient(135deg, var(--go), #d4b857);
  color: var(--s0); font-family: var(--f-jp); font-size: 0.85rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 0.7rem 1.5rem; border: 1px solid #d4b857;
  border-radius: var(--r); cursor: pointer;
}
.lottery-buy-btn, .gambling-buy-btn {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.78rem;
  letter-spacing: 0.1em; padding: 0.55rem 1.2rem;
  border: 1px solid var(--b1); border-radius: var(--r); cursor: pointer;
}
.lottery-ready { font-family: var(--f-jp); color: var(--go); font-weight: 700; font-size: 0.95rem; }
.lottery-countdown {
  font-family: var(--f-jp); font-size: 1.05rem; color: var(--t0);
  margin: 0.4rem 0;
}
.legendary-timer-wrap {
  background: var(--s2); border: 1px solid var(--b0);
  border-top: 2px solid rgba(192,39,45,0.4);
  border-radius: var(--r); padding: 0.55rem 0.9rem;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin-bottom: 0.8rem; text-align: center;
}
.leg-status {
  font-family: var(--f-jp);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.leg-status-live { color: var(--go); font-weight: 600; }
.leg-status-countdown {
  color: var(--cr); font-weight: 700;
  font-size: 0.88rem; letter-spacing: 0.03em;
  text-transform: none; font-variant-numeric: tabular-nums;
}
.leg-status-expired { color: var(--t2); font-weight: 500; text-transform: none; }
.leg-status-dim { color: var(--t2); font-style: italic; letter-spacing: 0.06em; text-transform: none; font-size: 0.75rem; }
.lottery-timer-img { width: 40px; height: 40px; object-fit: contain; }
.legendary-badge {
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 2px 10px;
  background: linear-gradient(135deg, #f4d35e, var(--go));
  color: var(--s0); font-family: var(--f-jp); font-size: 0.65rem;
  font-weight: 700; letter-spacing: 0.1em; border-radius: 10px;
  white-space: nowrap;
  z-index: 2;
}
.legendary-guarantee {
  font-family: var(--f-body); color: var(--t1); font-size: 0.8rem;
}
.ultimate-badge {
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 3px 12px;
  background: linear-gradient(135deg, #f4d35e, var(--go));
  color: var(--s0);
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 10px rgba(201,168,76,0.35);
  white-space: nowrap;
  z-index: 2;
}

/* Gambling grid (mystery + lottery + etc. overview) */
.gambling-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem; padding: 1rem 0;
}
.gambling-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1rem;
  text-align: center;
}
.gambling-icon { margin-bottom: 0.5rem; }
.gambling-icon-img { width: 72px; height: 72px; object-fit: contain; }
.gambling-price { font-family: var(--f-jp); color: var(--go); font-size: 0.9rem; font-weight: 700; }

/* Hero skins & card backs */
.hero-skins-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem; padding: 0.5rem 0;
}
.hero-skin-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.6rem;
  text-align: center; position: relative; overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.hero-skin-card:hover { border-color: var(--b2); transform: translateY(-2px); }
.hero-skin-card.owned { border-color: var(--go); }
.hero-skin-preview-wrap {
  aspect-ratio: 1; position: relative;
  background: var(--s2); border-radius: var(--r);
  overflow: hidden; margin-bottom: 0.5rem;
}
.hero-skin-portrait { width: 100%; height: 100%; object-fit: cover; }
.hero-skin-name-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
  font-family: var(--f-jp); font-size: 0.78rem; font-weight: 600; color: var(--t0);
  text-align: center; letter-spacing: 0.04em;
}
.hero-skin-class-chip {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 8px; border-radius: 10px;
  background: rgba(7,8,13,0.72);
  border: 1px solid rgba(192,39,45,0.45);
  font-family: var(--f-jp); font-size: 0.58rem;
  font-weight: 700; letter-spacing: 0.1em;
  color: var(--t1);
}
.hero-skin-equipped-badge, .cb-equipped-overlay, .equipped-badge {
  position: absolute; top: 6px; right: 6px;
  background: rgba(201,168,76,0.9); color: var(--s0);
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  padding: 3px 8px; border-radius: 10px;
  letter-spacing: 0.08em;
}

.card-back-preview {
  aspect-ratio: 5 / 7; position: relative;
  background: var(--s2); border-radius: var(--r);
  overflow: hidden;
}
.cb-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.cb-pattern {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, var(--cr-dark), var(--cr-dark) 10px, #4a0608 10px, #4a0608 20px);
  display: none;
}
.card-back-preview.cb-fallback .cb-pattern { display: block; }
.cb-shine {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
}

/* Skin modal — "Choose & Unlock" prestige skin picker */
.skin-modal-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l);
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
  max-width: 720px; width: 92vw;
  max-height: 90vh; overflow-y: auto;
  padding: 1.6rem; position: relative;
}
.skin-modal-title {
  font-family: var(--f-jp); font-weight: 700;
  font-size: 1.3rem; color: var(--t0);
  letter-spacing: 0.05em; margin: 0 0 0.25rem;
}
.skin-modal-subtitle {
  font-family: var(--f-body); color: var(--t1); font-size: 0.88rem;
  margin-bottom: 1.2rem; font-style: italic;
}
.skin-modal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 0.5rem; margin-bottom: 1rem;
}
.skin-modal-preview {
  display: flex; flex-direction: column; align-items: center;
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.8rem;
  margin-top: 0.5rem;
}
.skin-preview-box { text-align: center; }
.skin-preview-img {
  width: 100%; max-width: 340px; aspect-ratio: 1;
  object-fit: cover; border-radius: var(--r);
  margin: 0 auto; display: block;
  border: 1px solid var(--b1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.skin-preview-name {
  font-family: var(--f-jp); color: var(--t0);
  font-size: 1rem; letter-spacing: 0.04em;
  margin-top: 0.9rem;
}

/* Prestige skin modal item tiles */
.psm-preview-large {
  width: 240px; max-width: 100%; aspect-ratio: 1;
  object-fit: contain; border-radius: var(--r);
  background: rgba(7,8,13,0.5); padding: 0.4rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
}
.psm-preview-label {
  font-family: var(--f-jp); color: var(--go); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: 0.6rem;
}
.psm-item {
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.45rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  text-align: center; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.psm-item:hover { border-color: var(--b2); transform: translateY(-1px); }
.psm-item.psm-active {
  border-color: var(--cr); background: rgba(192,39,45,0.08);
  box-shadow: 0 0 14px rgba(192,39,45,0.2);
}
.psm-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r) - 1px); }
.psm-name { font-family: var(--f-jp); color: var(--t0); font-size: 0.68rem; letter-spacing: 0.06em; }
.psm-item.psm-active .psm-name { color: var(--cr); font-weight: 700; }
.prestige-badge {
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 3px 11px;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--parchment);
  font-family: var(--f-jp); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 10px rgba(192,39,45,0.3);
  white-space: nowrap;
  z-index: 2;
}

/* All-Classes bundle card — highlighted premium offer on Heroes tab */
.class-bundle-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(201,168,76,0.12), transparent 60%),
    var(--s1);
  border: 1px solid var(--b0);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l);
  padding: 1.4rem 1.2rem 1rem;
  margin-bottom: 1.2rem;
  display: flex; flex-direction: column;
  gap: 0.6rem;
  text-align: center;
  position: relative;
  box-shadow: 0 0 22px rgba(201,168,76,0.1);
}
.class-bundle-title {
  font-family: var(--f-jp); color: var(--go);
  font-size: 1rem; font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}
.class-bundle-desc {
  font-family: var(--f-body); color: var(--t1);
  font-size: 0.85rem; line-height: 1.5;
  margin: 0 auto; max-width: 52ch;
}
.class-bundle-savings {
  color: var(--go); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.class-bundle-footer {
  align-items: center; max-width: 240px;
  margin: 0.4rem auto 0;
}
.class-unlock-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem 0; text-align: center; }
.class-unlock-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 1rem;
  display: flex; flex-direction: column;
}
.class-unlock-portrait {
  width: 100%; aspect-ratio: 1; border-radius: var(--r);
  overflow: hidden; margin-bottom: 0.5rem;
}
.class-unlock-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.class-unlock-modal-box { max-width: 600px; width: 92vw; }
.class-unlocked-badge {
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.4rem 0.95rem; margin: 0.5rem auto 0.2rem;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.45);
  color: var(--go);
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 10px;
  white-space: nowrap;
}

/* Gold tier (bundle grid) */
.gold-tier-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem; padding: 0.5rem 0;
}
.gold-tier-card {
  position: relative;
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.3rem 1rem 1rem;
  text-align: center;
  display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.gold-tier-card:hover {
  border-color: var(--go);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 18px rgba(201,168,76,0.22);
}
.gold-tier-card * { cursor: inherit; }
.gold-tier-img-wrap { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.gold-tier-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tier-total-gold {
  font-family: var(--f-jp); font-size: 1.5rem; font-weight: 700;
  color: var(--go); line-height: 1;
}
.tier-euros {
  font-family: var(--f-jp); font-size: 0.9rem;
  color: var(--t0); margin-top: 2px;
}
.btn-bundle-buy, .btn-shop-buy, .ranked-buy-btn {
  width: 100%; padding: 0.55rem;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--b1); border-radius: var(--r); cursor: pointer;
  transition: all 0.15s;
}
.btn-bundle-buy:hover:not(:disabled), .btn-shop-buy:hover:not(:disabled) {
  background: linear-gradient(135deg, #8a1218, var(--cr-bright));
}
.btn-bundle-buy:disabled, .btn-shop-buy:disabled, .ranked-buy-btn:disabled {
  background: var(--s3) !important;
  color: var(--t2) !important;
  border-color: var(--b0) !important;
  cursor: not-allowed !important;
  filter: grayscale(0.6);
  box-shadow: none !important;
  transform: none !important;
}
/* Locked — not in season / already opened (distinct from affordability grey-out) */
.btn-shop-buy.btn-locked {
  background: linear-gradient(135deg, rgba(30,20,12,0.85), rgba(58,38,22,0.9)) !important;
  color: rgba(201,168,76,0.55) !important;
  border: 1px solid rgba(201,168,76,0.28) !important;
  font-family: var(--f-jp); font-weight: 700;
  letter-spacing: 0.14em;
  cursor: not-allowed !important;
  filter: none !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(201,168,76,0.08) !important;
}
.btn-shop-buy.btn-reason-seasonal {
  border-color: rgba(192,39,45,0.45) !important;
  color: rgba(230,180,100,0.7) !important;
  background: linear-gradient(135deg, rgba(38,14,14,0.9), rgba(60,22,22,0.9)) !important;
}
.btn-shop-buy.btn-reason-purchased {
  border-color: rgba(82,170,110,0.4) !important;
  color: rgba(200,230,200,0.75) !important;
  background: linear-gradient(135deg, rgba(18,30,22,0.9), rgba(28,48,34,0.9)) !important;
}

/* Custom EUR input panel */
.gold-custom-panel {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.2rem 1.4rem;
  margin: 0.8rem auto;
  max-width: 560px;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.gold-custom-row {
  display: flex; align-items: center; gap: 0.9rem;
}
.gold-custom-row .slider-wrap {
  flex: 1; position: relative;
}
#gold-input {
  width: 150px !important; min-height: 40px;
  text-align: center;
  font-family: var(--f-jp) !important;
  font-weight: 700;
  font-size: 1rem !important;
}
.custom-result {
  display: flex; justify-content: space-between; align-items: center;
  gap: 2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--b0);
}
.custom-total {
  font-family: var(--f-jp); color: var(--go);
  font-size: 1.4rem; font-weight: 700; line-height: 1.1;
}
.gold-custom-panel #btn-custom-gold {
  flex-shrink: 0;
  width: auto;
  min-width: 0;
  padding: 0.7rem 1.6rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Themed range slider (EUR amount) — crimson-gold ink style */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  background: transparent;
  width: 100%; height: 28px;
  padding: 0; border: 0; min-height: 0;
  cursor: pointer; outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--cr), var(--go));
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--cr), var(--go));
  border: 1px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4d35e 0%, var(--go) 55%, #7a5818 100%);
  border: 1px solid var(--cr-dark);
  box-shadow: 0 0 8px rgba(201,168,76,0.45), 0 2px 4px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4d35e 0%, var(--go) 55%, #7a5818 100%);
  border: 1px solid var(--cr-dark);
  box-shadow: 0 0 8px rgba(201,168,76,0.45), 0 2px 4px rgba(0,0,0,0.5);
  cursor: pointer;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 14px rgba(201,168,76,0.7), 0 2px 6px rgba(0,0,0,0.55); }
input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(192,39,45,0.25), 0 0 10px rgba(201,168,76,0.55); }

/* Payment method card on modal */
.payment-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.4rem;
  max-width: 520px; width: 92vw;
}
.payment-card-mock {
  background: linear-gradient(135deg, var(--s3), #24283a);
  border: 1px solid var(--b1); border-radius: var(--r-l);
  padding: 1rem; margin-bottom: 1rem;
  font-family: var(--f-jp); color: var(--t0);
}
.pay-card-type {
  font-family: var(--f-jp); color: var(--go);
  font-size: 0.72rem; letter-spacing: 0.08em;
}
.payment-gold-img { width: 48px; height: 48px; object-fit: contain; }
.payment-summary {
  background: var(--s0); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  font-family: var(--f-jp); font-size: 0.8rem; color: var(--t1);
}
.payment-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0;
}
.payment-row.payment-row-total {
  border-top: 1px solid var(--b0); margin-top: 4px; padding-top: 6px;
  color: var(--go); font-weight: 700;
}
.payment-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 0.6rem;
}
.payment-field-label {
  font-family: var(--f-jp); font-size: 0.72rem; color: var(--t1);
  display: block; margin-bottom: 3px;
}
.payment-input {
  width: 100%;
  background: var(--s0); border: 1px solid var(--b1);
  color: var(--t0); font-family: var(--f-jp); font-size: 0.88rem;
  padding: 0.5rem 0.7rem; border-radius: var(--r);
}
.btn-payment-confirm {
  width: 100%; margin-top: 0.5rem;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.65rem; border: 1px solid var(--b1);
  border-radius: var(--r); cursor: pointer;
}
.btn-payment-confirm:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }
.payment-disclaimer {
  font-family: var(--f-jp); font-size: 0.72rem; color: var(--t2);
  font-style: italic; margin-top: 0.6rem; text-align: center;
}
.payment-method-card, .payment-method-card-saved {
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.payment-method-card:hover { border-color: var(--b2); }
.payment-method-card-saved.selected { border-color: var(--go); background: rgba(201,168,76,0.06); }

/* Game modal (generic) */
.game-modal-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.4rem;
  max-width: 480px; width: 92vw;
  position: relative;
  animation: gmModalIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}
@keyframes gmModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.game-modal-title {
  font-family: var(--f-jp); font-size: 1.1rem; color: var(--go);
  letter-spacing: 0.05em; margin: 0 0 0.8rem; text-align: center;
}
.game-modal-msg {
  font-family: var(--f-jp); font-size: 0.95rem; color: var(--t0);
  text-align: center; line-height: 1.5;
  margin: 0.3rem 0 0.6rem;
}
.game-modal-btns {
  display: flex; gap: 10px; justify-content: center;
  margin-top: 1rem;
}

/* Gold display (formatGold helper — used inline in many places) */
.gold-display {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-jp); font-weight: 700; color: var(--go);
  vertical-align: middle;
}
.gold-icon {
  width: 18px; height: 18px; object-fit: contain;
  vertical-align: middle;
}
.gold-amount { color: var(--go); }
.game-modal-btn-confirm {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.55rem 1.3rem; border: 1px solid var(--b1);
  border-radius: var(--r); cursor: pointer;
}
.game-modal-btn-cancel {
  background: transparent; color: var(--t1);
  font-family: var(--f-jp); font-size: 0.75rem;
  padding: 0.55rem 1.3rem; border: 1px solid var(--b0);
  border-radius: var(--r); cursor: pointer;
}
.game-modal-btn-cancel:hover { color: var(--t0); border-color: var(--b1); }

/* Payment history modal */
.ph-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.2rem;
  max-width: 720px; width: 92vw;
}
.ph-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.8rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--b0);
  font-family: var(--f-jp); font-weight: 700; color: var(--go);
  letter-spacing: 0.08em; font-size: 0.95rem;
}
.ph-header > button {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: rgba(30,20,12,0.85);
  border: 1px solid rgba(201,168,76,0.28);
  color: var(--t1); cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s;
}
.ph-header > button:hover {
  background: rgba(192,39,45,0.2);
  border-color: var(--cr);
  color: #f0b0b3;
  transform: rotate(90deg);
}
.ph-header > button svg, .ph-header > button svg * { stroke: currentColor; fill: none; }
.shop-ph-title { font-family: var(--f-jp); color: var(--go); font-size: 1rem; }
.shop-ph-type { color: var(--t1); font-size: 0.8rem; }

/* Invoice — preview is an isolated iframe; only the "Download Invoice" trigger
   button in the purchases table is styled here. The invoice document itself
   carries its own stylesheet inside the iframe/print window. */
.download-invoice-btn {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.72rem;
  letter-spacing: 0.08em; padding: 0.5rem 1rem;
  border: 1px solid var(--b1); border-radius: var(--r); cursor: pointer;
  margin-right: 6px;
}

/* ── 19. SETTINGS ────────────────────────────────────────────────────────── */
#settings-layout {
  display: grid; grid-template-columns: 220px 1fr;
  gap: 1.2rem; align-items: start;
}
@media (max-width: 768px) {
  #settings-layout { grid-template-columns: 1fr; }
}

#settings-sidebar {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid rgba(192,39,45,0.35);
  border-radius: var(--r-l); padding: 0.8rem 0.6rem;
  position: sticky; top: 1rem;
}
@media (max-width: 768px) {
  #settings-sidebar { flex-direction: column; position: static; }
}
.settings-nav-group { display: flex; flex-direction: column; gap: 4px; }
.settings-nav-group-label {
  font-family: var(--f-jp); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cr); padding: 0 0.6rem 0.35rem;
  border-bottom: 1px solid rgba(192,39,45,0.2);
  margin-bottom: 0.25rem;
}

.settings-nav-btn {
  background: transparent; border: 1px solid transparent;
  color: var(--t1); font-family: var(--f-jp); font-size: 0.78rem;
  padding: 0.55rem 0.8rem; cursor: pointer; border-radius: var(--r);
  text-align: left; letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s, border-color 0.15s, padding 0.15s;
  position: relative;
}
.settings-nav-btn:hover { background: rgba(255,255,255,0.03); color: var(--t0); }
.settings-nav-btn.active {
  background: rgba(192,39,45,0.1); border-color: rgba(192,39,45,0.35);
  color: var(--go); padding-left: 1rem;
}
.settings-nav-btn.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 2px; background: var(--cr);
}

/* Intro paragraph on each Billing subpage */
.settings-section-intro {
  font-family: var(--f-body); font-style: italic;
  color: var(--t1); font-size: 0.86rem; line-height: 1.55;
  margin: 0 0 1.1rem; padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--b0);
}

#settings-content { min-width: 0; }
.settings-section {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.settings-section h2 {
  font-family: var(--f-jp); font-size: 0.95rem; color: var(--t0);
  margin: 0 0 0.8rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--b0); letter-spacing: 0.04em;
}
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0; gap: 1rem; flex-wrap: wrap;
}
.settings-row label {
  font-family: var(--f-jp); color: var(--t1); font-size: 0.8rem;
  flex-shrink: 0;
}
.settings-row select, .settings-row input[type="text"], .settings-row input[type="number"] {
  background: var(--s2); border: 1px solid var(--b1);
  color: var(--t0); font-family: var(--f-body); font-size: 0.85rem;
  padding: 0.45rem 0.6rem; border-radius: var(--r);
  min-width: 140px;
}

/* Toggle switch — off state dim+gray, on state crimson glow + gold knob. */
.settings-toggle {
  width: 52px; height: 28px; position: relative;
  background: rgba(7,8,13,0.85); border: 1px solid var(--b0);
  border-radius: 14px; cursor: pointer; flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
.settings-toggle:hover { border-color: var(--b1); }
.toggle-knob {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  background: radial-gradient(circle at 35% 35%, #8a8a9a 0%, #4a4a55 100%);
  border-radius: 50%;
  transition: left 0.2s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.settings-toggle.active,
.settings-toggle.on {
  background: linear-gradient(135deg, rgba(192,39,45,0.4), rgba(192,39,45,0.7));
  border-color: var(--cr);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 12px rgba(192,39,45,0.35);
}
.settings-toggle.active .toggle-knob,
.settings-toggle.on .toggle-knob {
  left: 26px;
  background: radial-gradient(circle at 35% 35%, #f4d35e 0%, var(--go) 55%, #7a5818 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 10px rgba(201,168,76,0.45);
}

/* Referral */
.referral-box {
  display: flex; gap: 8px; align-items: center;
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.5rem;
  margin-bottom: 1rem;
}
.referral-link-display {
  flex: 1; font-family: var(--f-body); color: var(--t0);
  font-size: 0.85rem; padding: 0.4rem 0.6rem;
  background: var(--s0); border-radius: var(--r);
  border: 1px solid var(--b0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-copy-referral {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 0.9rem; border: 1px solid var(--b1);
  border-radius: var(--r); cursor: pointer;
}
.btn-copy-referral:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }
.referral-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
  margin-top: 0.8rem;
}
.referral-stat {
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.8rem; text-align: center;
}
.referral-stat-value {
  font-family: var(--f-jp); font-size: 1.4rem; font-weight: 700;
  color: var(--go); line-height: 1;
}
.referral-stat-label {
  font-family: var(--f-jp); font-size: 0.68rem; color: var(--t1);
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.3rem;
}

/* Withdrawal form */
.withdraw-form {
  background: var(--s2); border: 1px solid var(--b0);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l); padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.withdraw-form-header {
  font-family: var(--f-jp); font-size: 0.9rem; color: var(--go);
  letter-spacing: 0.06em; margin-bottom: 0.6rem;
}
.withdraw-balance {
  font-family: var(--f-body); color: var(--t1); font-size: 0.85rem;
  margin-bottom: 0.6rem;
}
.withdraw-input-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.6rem; }
.withdraw-input-row label { font-family: var(--f-jp); font-size: 0.75rem; color: var(--t1); }
.withdraw-input-row input {
  background: var(--s0); border: 1px solid var(--b1);
  color: var(--t0); font-family: var(--f-body);
  padding: 0.5rem 0.7rem; border-radius: var(--r);
}
.withdraw-calc {
  background: var(--s0); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.6rem 0.8rem;
  margin: 0.6rem 0; font-size: 0.8rem;
}
.withdraw-calc-row {
  display: flex; justify-content: space-between;
  padding: 3px 0; color: var(--t1);
}
.withdraw-calc-row.withdraw-calc-net {
  border-top: 1px solid var(--b0); margin-top: 4px; padding-top: 6px;
  color: var(--go); font-weight: 700;
}
.wc-gross, .wc-fee, .wc-net { font-family: var(--f-jp); }
.wc-net { color: var(--go); }
.withdraw-method-section { margin: 0.6rem 0; }
.withdraw-method-label { font-family: var(--f-jp); font-size: 0.75rem; color: var(--t1); display: block; margin-bottom: 4px; }
.withdraw-method-option {
  display: flex; gap: 8px; align-items: center;
  background: var(--s0); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.5rem 0.7rem;
  cursor: pointer; margin-bottom: 4px;
  font-family: var(--f-body); color: var(--t0); font-size: 0.82rem;
}
.withdraw-method-option:hover { border-color: var(--b2); }
.withdraw-method-option.selected { border-color: var(--go); background: rgba(201,168,76,0.06); }
.withdraw-no-methods { color: var(--t2); font-style: italic; font-size: 0.8rem; padding: 0.5rem; }
.withdraw-add-method {
  display: inline-block; color: var(--go); font-family: var(--f-jp);
  font-size: 0.75rem; text-decoration: none; margin-top: 0.3rem;
}
.withdraw-add-method:hover { color: var(--cr-bright); }
.btn-withdraw {
  width: 100%; margin-top: 0.6rem;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem; border: 1px solid var(--b1);
  border-radius: var(--r); cursor: pointer;
}
.btn-withdraw:hover:not(:disabled) { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }
.btn-withdraw:disabled { opacity: 0.4; cursor: not-allowed; }
.wm-name { font-family: var(--f-jp); font-weight: 600; color: var(--t0); }
.wm-type { font-size: 0.7rem; color: var(--t2); margin-left: 6px; }
.wm-masked { color: var(--t1); font-family: var(--f-jp); letter-spacing: 0.08em; margin-left: 8px; }
.wm-detail { color: var(--t2); font-size: 0.75rem; margin-left: 8px; }

/* Payment sub-tabs */
.payment-sub-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--b0);
  margin: 1rem 0 0.8rem;
}
.payment-sub-tab {
  background: transparent; border: none; color: var(--t1);
  font-family: var(--f-jp); font-size: 0.72rem;
  padding: 0.5rem 1rem; cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.payment-sub-tab.active { color: var(--go); border-bottom-color: var(--cr); }
.payment-sub-tab:hover { color: var(--t0); }

/* Payment table */
.payment-table {
  width: 100%; border-collapse: collapse;
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r-l); overflow: hidden;
  font-family: var(--f-jp); font-size: 0.82rem;
}
.payment-table th, .payment-table td {
  padding: 0.5rem 0.7rem; text-align: left;
  border-bottom: 1px solid var(--b0);
}
.payment-table th {
  font-family: var(--f-jp); font-size: 0.65rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t1); background: var(--s3);
}
.payment-status {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-family: var(--f-jp); font-size: 0.68rem; letter-spacing: 0.05em;
}
.payment-status.completed, .payment-status.succeeded { background: rgba(74,159,212,0.18); color: #7cc0e5; }
.payment-status.pending { background: rgba(201,168,76,0.18); color: var(--go); }
.payment-status.failed, .payment-status.refunded { background: rgba(192,39,45,0.18); color: #e08080; }
.no-payments { color: var(--t2); font-style: italic; text-align: center; padding: 1.5rem; }

/* Payment methods list */
.pm-add-buttons { display: flex; gap: 8px; margin: 0.8rem 0; flex-wrap: wrap; }
.btn-add-card {
  background: rgba(201,168,76,0.12); border: 1px dashed var(--b2);
  color: var(--go); font-family: var(--f-jp); font-size: 0.75rem;
  letter-spacing: 0.06em; padding: 0.5rem 0.9rem;
  border-radius: var(--r); cursor: pointer;
  transition: all 0.15s;
}
.btn-add-card:hover { background: rgba(201,168,76,0.22); border-color: var(--go); }
.btn-add-sepa { color: #7cc0e5; border-color: rgba(74,159,212,0.4); background: rgba(74,159,212,0.1); }
.btn-add-sepa:hover { background: rgba(74,159,212,0.2); }

.add-card-form {
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 1rem; margin: 0.8rem 0;
}
.card-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.7rem; }
.card-form-row label { font-family: var(--f-jp); font-size: 0.75rem; color: var(--t1); }
.card-form-row input, .card-form-row select {
  background: var(--s0); border: 1px solid var(--b1);
  color: var(--t0); font-family: var(--f-jp); font-size: 0.9rem;
  padding: 0.5rem 0.7rem; border-radius: var(--r);
}
.card-form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.field-req { color: var(--cr); font-weight: 700; margin-left: 2px; }
.detected-card-type {
  font-family: var(--f-jp); font-size: 0.65rem;
  color: var(--go); text-transform: uppercase; letter-spacing: 0.05em;
  margin-left: 6px;
}
.card-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 0.8rem; padding-top: 0.6rem;
  border-top: 1px solid var(--b0);
}
.btn-save-card {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.72rem;
  letter-spacing: 0.08em; padding: 0.5rem 1rem;
  border: 1px solid var(--b1); border-radius: var(--r); cursor: pointer;
}
.btn-cancel-card {
  background: transparent; color: var(--t1);
  font-family: var(--f-jp); font-size: 0.72rem;
  padding: 0.5rem 1rem; border: 1px solid var(--b0);
  border-radius: var(--r); cursor: pointer;
}
.btn-cancel-card:hover { color: var(--t0); border-color: var(--b1); }

/* Saved cards */
.saved-card-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
}
.saved-card-info { flex: 1; min-width: 0; }
.saved-card-name { font-family: var(--f-jp); color: var(--t0); font-size: 0.85rem; }
.saved-card-details { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 2px; }
.saved-card-number { font-family: var(--f-jp); letter-spacing: 0.08em; color: var(--t1); font-size: 0.85rem; }
.saved-card-expiry { font-family: var(--f-jp); color: var(--t2); font-size: 0.75rem; }
.saved-card-type-badge {
  display: inline-block; padding: 2px 8px;
  background: rgba(201,168,76,0.14); border: 1px solid var(--b2);
  color: var(--go); font-family: var(--f-jp); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 3px;
}
.btn-remove-card {
  background: transparent; color: var(--cr-bright);
  border: 1px solid rgba(192,39,45,0.4);
  font-family: var(--f-jp); font-size: 0.7rem;
  padding: 0.4rem 0.7rem; border-radius: var(--r); cursor: pointer;
}
.btn-remove-card:hover { background: rgba(192,39,45,0.15); border-color: var(--cr); }

/* Economy disclaimer */
.economy-disclaimer {
  font-size: 0.78rem; color: var(--t0); font-style: italic;
  line-height: 1.55; margin: 0.8rem 0;
  padding: 0.7rem 1rem;
  background: rgba(7,8,13,0.75);
  border: 1px solid var(--b0);
  border-left: 3px solid var(--cr);
  border-radius: var(--r);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.billing-divider {
  border: 0; border-top: 1px solid var(--b0);
  margin: 1.2rem 0;
}
.form-errors { margin: 0.5rem 0; }
.form-error-line { color: #e08080; font-size: 0.78rem; padding: 2px 0; }

/* ── 20. CRAFTING ────────────────────────────────────────────────────────── */
#screen-crafting { padding: 1.5rem; max-width: 1100px; margin: 0 auto; }
.crafting-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--b0); margin-bottom: 1rem; }
.crafting-tab {
  background: transparent; border: none; color: var(--t1);
  font-family: var(--f-jp); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.6rem 1.2rem; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.crafting-tab.active { color: var(--go); border-bottom-color: var(--cr); }
#crafting-top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 1rem; background: var(--s1);
  border: 1px solid var(--b0); border-radius: var(--r-l);
  margin-bottom: 1rem;
}


/* ── 21. GAME SCREEN ─────────────────────────────────────────────────────── */
#screen-game {
  position: relative;
  background-color: #0d0608;
  overflow: hidden;
}
/* Battlefield background image (and subtle dim overlay for readability) */
#screen-game::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../assets/board/bg-final.webp') center center / cover no-repeat;
}
#screen-game::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 48%,
    rgba(5,3,10,0.12) 0%, rgba(5,3,10,0.35) 100%);
}
#screen-game.active {
  display: flex; flex-direction: column;
  min-height: 100vh; height: 100vh;
}

/* FX layers — atmospheric, low cost */
.board-fx-rune, .board-fx-fog, .board-fx-particles,
.board-fx-lava, .board-fx-smoke, .board-fx-lightning,
.board-fx-torchlight, .board-fx-candle {
  position: absolute; pointer-events: none;
}
.board-fx-rune { inset: 0; opacity: 0.05; background: radial-gradient(circle at 30% 50%, var(--cr), transparent 50%); }
.board-fx-fog  { inset: 0; opacity: 0.03; background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.4), transparent 60%); }
.board-fx-torchlight { inset: 0; background: radial-gradient(ellipse at 0% 0%, rgba(255,140,40,0.04), transparent 40%), radial-gradient(ellipse at 100% 0%, rgba(255,140,40,0.04), transparent 40%); }
.board-fx-candle { width: 60px; height: 100px; opacity: 0.15; background: radial-gradient(ellipse at 50% 30%, rgba(255,200,100,0.5), transparent 60%); }
.board-fx-candle-l { top: 20%; left: 2%; }
.board-fx-candle-r { top: 20%; right: 2%; }

.game-layout {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Game log toggle button — prominent so it's findable during a match.
   When the left nav sidebar is present (body.nav-sidebar), shift right of it. */
.game-log-toggle {
  position: fixed; top: 14px; left: 14px; z-index: 50;
  background: linear-gradient(135deg, rgba(20,12,4,0.95), rgba(7,8,13,0.92));
  border: 1px solid var(--go);
  color: var(--go); width: 42px; height: 42px;
  border-radius: 50%; cursor: pointer; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 12px rgba(201,168,76,0.15);
  transition: all 0.15s;
}
body.nav-sidebar .game-log-toggle { left: calc(var(--sw) + 14px); }
.game-log-toggle:hover {
  color: var(--t0); border-color: var(--cr-bright);
  box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 18px rgba(192,39,45,0.4);
}
.game-log-float {
  position: fixed; top: 68px; left: 14px; z-index: 60;
  background: rgba(7,8,13,0.96); border: 1px solid var(--b1);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l); width: 300px; max-height: 62vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 28px rgba(0,0,0,0.8);
}
body.nav-sidebar .game-log-float { left: calc(var(--sw) + 14px); }
.game-log-float-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--b0);
  font-family: var(--f-jp); font-size: 0.72rem; color: var(--t0);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.game-log-float-close { background: transparent; border: none; color: var(--t1); cursor: pointer; font-size: 18px; }
#game-log-messages { padding: 8px 12px; overflow-y: auto; flex: 1; }
.log-line {
  font-family: var(--f-body); font-size: 0.78rem;
  color: var(--t1); padding: 3px 0; line-height: 1.4;
}

/* Board */
.game-board {
  position: relative; flex: 1;
  display: grid;
  /* Equal halves (opp on top, my on bottom) with a thin divider and the hand
     strip pinned to the bottom. minmax guarantees each zone has room for a
     minion row + hero row so opp-board never gets clipped on short viewports. */
  grid-template-rows: minmax(260px, 1fr) auto minmax(260px, 1fr) auto;
  padding: 4px;
  overflow: hidden;
  min-height: 0;
}
.game-board > .opp-zone { grid-row: 1; min-height: 0; }
.game-board > .board-divider { grid-row: 2; }
.game-board > .my-zone { grid-row: 3; min-height: 0; }
.game-board > .hand-area { grid-row: 4; }
.game-board-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(122,15,18,0.05) 40%, rgba(122,15,18,0.1) 60%, transparent);
}

.player-zone {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 0.3rem 0.6rem;
  /* overflow stays visible — the parent .game-board already clips outward. Using
     overflow:hidden here cut off the bottom of opp-board when minions wrapped
     or the viewport was short. */
  overflow: visible;
}
/* Opp content sticks to TOP of its zone, my content sticks to BOTTOM. The board
   has flex:1 so it grows to fill the remaining space within each zone, pushing
   the hero/hand to the outer edge. */
.opp-zone { border-top: 1px solid rgba(192,39,45,0.1); }
.my-zone  { border-bottom: 1px solid rgba(192,39,45,0.1); }
.opp-zone.zone-active { border-top-color: rgba(192,39,45,0.25); }
.my-zone.zone-active  { border-bottom-color: rgba(192,39,45,0.3); }
.opp-zone.zone-dim, .my-zone.zone-dim { border-color: rgba(192,39,45,0.04); }

.board-divider {
  position: relative; height: 8px; flex: 0 0 auto;
  display: flex; align-items: center;
}
.board-divider .bd-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--b1), var(--b2), var(--b1), transparent);
}

.board-zone {
  display: flex; gap: 8px; padding: 6px 1.5rem;
  min-height: 140px; align-items: center; justify-content: center;
  flex: 1;
  width: 100%;
  border-radius: var(--r-l);
  transition: background 0.15s;
  flex-wrap: wrap;
}
.board-zone.drop-highlight { background: rgba(192,39,45,0.05); border: 1px dashed var(--b1); }
.board-zone.board-drop-zone { background: rgba(192,39,45,0.08); cursor: copy; }
.targeting-active .board-zone { cursor: crosshair; }

/* Hero row — 3-column grid so the hero stays centered and the info sits on the
   right edge regardless of how wide the info gets. */
.hero-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.4rem 1.5rem;
  min-height: 96px;
  position: relative;
}
.hero-row .hero-unit { grid-column: 2; justify-self: center; }
.hero-row .hero-info-right,
.hero-row .mana-info {
  grid-column: 3;
  justify-self: end;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}

.hero-unit {
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.hero-portrait-wrap { position: relative; flex-shrink: 0; }

.game-hero-portrait {
  width: 80px; height: 80px;
  border-radius: 50%; border: 2px solid var(--b1);
  background: var(--s2);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  cursor: default;
}
.game-hero-portrait.has-weapon {
  border-color: rgba(201,168,76,0.6);
  box-shadow: 0 0 12px rgba(201,168,76,0.25);
}
.game-hero-portrait.can-attack {
  cursor: pointer;
  border-color: rgba(201,168,76,0.8);
  box-shadow: 0 0 16px rgba(201,168,76,0.4), 0 0 0 2px rgba(201,168,76,0.2);
  animation: heroCanAttackPulse 1.5s ease-in-out infinite;
}
@keyframes heroCanAttackPulse {
  0%,100% { box-shadow: 0 0 16px rgba(201,168,76,0.35); }
  50%     { box-shadow: 0 0 22px rgba(201,168,76,0.6); }
}
.game-hero-portrait.selected-attacker {
  cursor: pointer;
  border-color: var(--go);
  box-shadow: 0 0 0 2px rgba(240,192,64,0.65), 0 0 28px rgba(240,192,64,0.9);
  transform: translateY(-4px) scale(1.04);
}
.game-hero-portrait.targetable {
  cursor: crosshair;
  border-color: var(--cr-bright);
  box-shadow: 0 0 16px rgba(192,39,45,0.6);
  animation: targetablePulse 1.2s ease-in-out infinite;
}
@keyframes targetablePulse {
  0%,100% { box-shadow: 0 0 16px rgba(192,39,45,0.5); }
  50%     { box-shadow: 0 0 24px rgba(192,39,45,0.85); }
}
.game-hero-portrait.prestige-portrait {
  border-color: var(--go);
  box-shadow: 0 0 18px rgba(240,192,64,0.5);
}

.hp-val, .hp-overlay {
  position: absolute; bottom: -4px; right: -4px;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0);
  border: 2px solid var(--s0);
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700;
}
.hp-val.hp-low { background: linear-gradient(135deg, #4a0608, #aa1820); animation: hpLowPulse 1.2s ease-in-out infinite; }
@keyframes hpLowPulse { 0%,100% { box-shadow: 0 0 4px rgba(192,39,45,0.4); } 50% { box-shadow: 0 0 12px rgba(192,39,45,0.85); } }

.armor-val, .armor-badge {
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg, #888, #aaddff);
  color: var(--s0);
  border: 2px solid var(--s0);
  border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.6rem; font-weight: 700;
}

/* Weapon badge */
.weapon-badge {
  position: absolute; bottom: -4px; left: -4px;
  background: linear-gradient(135deg, var(--go-dim), var(--go));
  color: var(--s0); border: 2px solid var(--s0);
  border-radius: 4px; padding: 2px 5px;
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  display: flex; gap: 3px; align-items: center;
}
.wb-atk::before { content: '⚔'; margin-right: 2px; }
.wb-dur::before { content: '◆'; margin-right: 2px; }

/* Hero power circular button */
.hero-power-circle {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--s2); background-size: cover; background-position: center;
  border: 2px solid var(--b1);
  cursor: pointer; position: relative;
  transition: all 0.15s;
  flex-shrink: 0;
}
.hero-power-circle:hover:not(:disabled) { transform: scale(1.06); border-color: var(--cr); }
.hero-power-circle.hp-ready {
  border-color: var(--go);
  box-shadow: 0 0 12px rgba(201,168,76,0.5);
  animation: hpReadyPulse 1.5s ease-in-out infinite;
}
@keyframes hpReadyPulse { 0%,100% { box-shadow: 0 0 12px rgba(201,168,76,0.5); } 50% { box-shadow: 0 0 20px rgba(201,168,76,0.85); } }
.hero-power-circle:disabled, .hero-power-circle.hp-used { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.7); }
.hp-cost {
  position: absolute; bottom: -4px; right: -4px;
  background: var(--blue); color: var(--t0);
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--s0);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.6rem; font-weight: 700;
}

.opp-hero-power {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--s2); background-size: cover; background-position: center;
  border: 2px solid var(--b1);
  position: relative;
  margin-left: 8px;
}
.opp-hero-power.hp-used { opacity: 0.4; filter: grayscale(0.7); }
.opp-hp-cost {
  position: absolute; bottom: -3px; right: -3px;
  background: var(--blue); color: var(--t0);
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--s0);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.55rem; font-weight: 700;
}

/* Hero power tooltip */
.hp-tooltip {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(7,8,13,0.95); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 6px 10px;
  min-width: 160px; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.7);
}
.hero-power-circle:hover .hp-tooltip,
.opp-hero-power:hover .hp-tooltip { opacity: 1; }
.hp-tooltip-name { font-family: var(--f-jp); font-size: 0.7rem; font-weight: 700; color: var(--go); }
.hp-tooltip-cost { font-family: var(--f-jp); font-size: 0.6rem; color: var(--blue); margin: 2px 0; }
.hp-tooltip-desc { font-family: var(--f-body); font-size: 0.7rem; color: var(--t1); }

/* Concede button */
.concede-btn {
  background: rgba(30,10,10,0.8); border: 1px solid rgba(192,39,45,0.25);
  color: #cc6050; font-family: var(--f-jp);
  font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: var(--r); cursor: pointer;
}
.concede-btn:hover { background: rgba(60,15,18,0.9); color: var(--cr-bright); }

/* Mana gems */
.mana-info {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.mana-txt { font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700; color: var(--blue); }
.mana-gems { display: flex; gap: 3px; flex-wrap: wrap; max-width: 200px; }
.mana-gem {
  width: 14px; height: 14px;
  background: radial-gradient(circle at 30% 30%, #88ccff, var(--blue) 60%, #2a5080);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(74,159,212,0.6), inset 0 1px 2px rgba(255,255,255,0.3);
}
.mana-gem.empty {
  background: radial-gradient(circle at 30% 30%, #404050, #20202a);
  box-shadow: none;
  opacity: 0.5;
}
.my-hand-cnt-lbl, .opp-hand-cnt-lbl,
.my-deck-cnt-lbl, .opp-deck-cnt-lbl {
  font-family: var(--f-jp); font-size: 0.6rem; color: var(--t1);
}

/* Deck pile (small card stack) */
.deck-pile, .deck-pile-sm {
  width: 28px; height: 36px; position: relative;
  background: linear-gradient(135deg, var(--cr-dark), #4a0608);
  border: 1px solid var(--b1); border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.7rem; font-weight: 700;
  color: var(--t0);
  box-shadow: 2px 2px 0 -1px rgba(192,39,45,0.4),
              4px 4px 0 -1px rgba(192,39,45,0.25);
}
.deck-pile-sm { width: 22px; height: 28px; font-size: 0.6rem; }

/* Opp hand area — face-down cards (overlap via negative margin, not gap) */
.opp-hand-area {
  display: flex; justify-content: center;
  padding: 4px 8px; min-height: 50px;
}
.opp-hand-area > * { margin-left: -10px; }
.opp-hand-area > *:first-child { margin-left: 0; }

/* Hero info side */
.hero-info-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}

/* End turn panel */
.end-turn-panel {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.turn-timer-bar {
  width: 60px; height: 4px;
  background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden;
}
.turn-timer-fill {
  height: 100%; background: linear-gradient(to right, var(--green), var(--orange), var(--red));
  width: 100%; transition: width 1s linear;
}
.turn-timer-text { font-family: var(--f-jp); font-size: 0.65rem; color: var(--t1); }
.turn-indicator {
  font-family: var(--f-jp); font-size: 0.7rem; font-weight: 700;
  color: var(--t1); letter-spacing: 0.1em; text-transform: uppercase;
}
.turn-indicator.your-turn { color: var(--go); animation: turnPulse 1.5s ease-in-out infinite; }
@keyframes turnPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.end-turn-btn {
  background: linear-gradient(135deg, rgba(74,159,212,0.2), rgba(74,159,212,0.4));
  border: 1px solid var(--blue); color: var(--t0);
  font-family: var(--f-jp); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem 1rem; border-radius: var(--r);
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.end-turn-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgba(74,159,212,0.35), rgba(74,159,212,0.55)); }
.end-turn-btn.my-turn {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  border-color: var(--cr-bright);
  box-shadow: 0 0 12px rgba(192,39,45,0.4);
  animation: endTurnPulse 1.8s ease-in-out infinite;
}
@keyframes endTurnPulse { 0%,100% { box-shadow: 0 0 12px rgba(192,39,45,0.4); } 50% { box-shadow: 0 0 22px rgba(192,39,45,0.7); } }
.end-turn-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Turn-flash — appended to .game-board for 700ms when your turn starts.
   MUST be absolute; otherwise it becomes a grid child, lands in an implicit
   row 5, and pushes the hand area upward for the duration of the animation. */
.turn-flash {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 40;
  background: radial-gradient(ellipse 80% 60% at 50% 50%,
    rgba(201,168,76,0.18) 0%,
    rgba(201,168,76,0.05) 40%,
    transparent 75%);
  animation: turnFlashIn 0.7s ease-out forwards;
}
@keyframes turnFlashIn {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}

/* My hand — JS (layoutHandCards) absolute-positions each card. The element
   #my-hand IS the .hand-area (single div with both class+id). Placed in its
   own grid row (row 4) so it cannot overlap opp-board or my-zone. The gradient
   is drawn only in the bottom half so the top of the hand-area stays fully
   transparent and never visually dims minions above it. */
.hand-area {
  position: relative;
  height: 180px;
  overflow: visible;
  background: linear-gradient(to top,
    rgba(5,2,0,0.7) 0%,
    rgba(10,5,2,0.25) 50%,
    transparent 100%);
}
.hand-area .hand-card,
#my-hand .hand-card {
  position: absolute;
  /* left, bottom, transform (rotate), z-index set inline by layoutHandCards() */
  transform-origin: bottom center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, left 0.15s ease, bottom 0.15s ease;
  margin: 0;
}

/* Hand card */
.hand-card {
  width: 90px; height: 126px;
  background: var(--s2); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r); padding: 4px;
  position: relative;
  display: flex; flex-direction: column;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.hand-card.rarity-rare      { border-top-color: var(--blue); }
.hand-card.rarity-epic      { border-top-color: var(--purple); }
.hand-card.rarity-legendary { border-top-color: var(--go); }
.hand-card.playable:hover {
  transform: translateY(-12px) scale(1.08); z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.hand-card.selected-hand {
  transform: translateY(-16px) scale(1.1);
  box-shadow: 0 0 18px rgba(201,168,76,0.6);
  border-color: var(--go);
}
.hand-card.not-affordable { opacity: 0.55; filter: grayscale(0.4); }
.hand-card.exact-cost { box-shadow: 0 0 10px rgba(74,159,212,0.5); }
.hand-card-back {
  background: linear-gradient(135deg, var(--cr-dark), #4a0608);
  border-color: var(--cr); width: 70px; height: 100px;
}
.hc-cost {
  position: absolute; top: -8px; left: -6px;
  width: 28px; height: 28px;
  background: url('../assets/stat-mana.webp') center/contain no-repeat;
  color: var(--t0);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.9rem; font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  z-index: 2;
}
.hc-art { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 2px; }
.hc-art-img { width: 100%; height: 100%; object-fit: cover; }
.hc-name {
  font-family: var(--f-jp); font-size: 0.55rem; font-weight: 600;
  color: var(--t0); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.hc-stat-badges {
  display: flex; justify-content: space-between; margin-top: 2px;
}
.hc-atk, .hc-hp {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.8rem; font-weight: 900;
  color: var(--t0); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.hc-atk { background: url('../assets/stat-attack.webp') center/contain no-repeat; }
.hc-hp  { background: url('../assets/stat-health.webp') center/contain no-repeat; width: 24px; height: 24px; }
/* (.hc-tooltip styled below in tooltip section) */

/* Game minion */
.game-minion {
  width: 80px; height: 110px;
  background: var(--s2); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r); padding: 4px;
  position: relative;
  display: flex; flex-direction: column;
  flex-shrink: 0;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.game-minion.rarity-rare      { border-top-color: var(--blue); }
.game-minion.rarity-epic      { border-top-color: var(--purple); }
.game-minion.rarity-legendary { border-top-color: var(--go); }
.game-minion.can-attack {
  border-color: rgba(201,168,76,0.6);
  box-shadow: 0 0 0 1px rgba(240,192,64,0.3), 0 0 16px rgba(240,192,64,0.45);
  cursor: pointer;
  animation: canAttackPulse 1.5s ease-in-out infinite;
}
.game-minion.can-attack:hover { transform: translateY(-8px) scale(1.05); }
@keyframes canAttackPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(240,192,64,0.3), 0 0 16px rgba(240,192,64,0.4); } 50% { box-shadow: 0 0 0 1px rgba(240,192,64,0.5), 0 0 22px rgba(240,192,64,0.65); } }

.game-minion.selected-attacker {
  border-color: var(--go);
  box-shadow: 0 0 0 2px rgba(240,192,64,0.6), 0 0 28px rgba(240,192,64,1);
  transform: translateY(-10px) scale(1.06);
}
.game-minion.targetable {
  border-color: var(--cr-bright);
  box-shadow: 0 0 0 2px rgba(255,64,32,0.4), 0 0 18px rgba(224,64,32,0.8);
  cursor: crosshair;
}
.game-board.targeting-active .game-minion.targetable:hover { transform: translateY(-4px) scale(1.05); }
.game-minion.has-taunt {
  border: 2px solid rgba(201,168,76,0.75) !important;
  box-shadow: 0 0 10px rgba(201,168,76,0.3), inset 0 0 6px rgba(201,168,76,0.07) !important;
  animation: tauntShieldPulse 2.2s ease-in-out infinite;
}
.game-minion.has-taunt::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 13px;
  background: var(--go);
  clip-path: polygon(0% 0%, 100% 0%, 100% 62%, 50% 100%, 0% 62%);
  filter: drop-shadow(0 0 4px rgba(201,168,76,0.9));
  z-index: 5;
  pointer-events: none;
}
.game-minion.is-frozen {
  filter: brightness(0.8) hue-rotate(180deg);
  border-color: #66bbff;
}
.game-minion.has-attacked, .game-minion:not(.can-attack):not(.targetable):not(.selected-attacker):not(.is-frozen) {
  cursor: default;
}
.divine-ring {
  position: absolute; inset: -4px;
  border-radius: var(--r);
  border: 2px solid rgba(240,232,160,0.95);
  background: rgba(240,232,160,0.05);
  box-shadow: 0 0 10px rgba(240,232,160,0.7), inset 0 0 8px rgba(240,232,160,0.1);
  pointer-events: none;
  animation: divinePulse 1.8s ease-in-out infinite;
  z-index: 2;
}
.minion-emoji { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.minion-art { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.minion-name {
  font-family: var(--f-jp); font-size: 0.55rem; font-weight: 600;
  color: var(--t0); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.minion-stats {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2px;
}
.m-atk, .m-hp {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 900;
  color: var(--t0); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.m-atk { background: url('../assets/stat-attack.webp') center/contain no-repeat; }
.m-hp  { background: url('../assets/stat-health.webp') center/contain no-repeat; width: 28px; height: 28px; }
.m-hp.daonmyojid { filter: hue-rotate(-40deg) saturate(1.4); }
.status-icon {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px;
  background: rgba(12,10,8,0.72);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 50%;
  color: var(--go);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  z-index: 2;
}
.status-icon svg { width: 100%; height: 100%; }
.taunt-icon   { color: var(--go); top: 2px; right: 2px; }
.frozen-icon  { color: #88ccff; border-color: rgba(136,204,255,0.55); top: 2px; right: 24px; }
.stealth-icon { color: #c39bdf; border-color: rgba(195,155,223,0.5); top: 22px; right: 2px; }
.attacked-veil {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  pointer-events: none;
}
.minion-tooltip {
  position: absolute;
  left: 50%;
  background: rgba(7,8,13,0.97); border: 1px solid var(--b2);
  border-radius: var(--r); padding: 6px 8px;
  width: 180px; font-family: var(--f-body); font-size: 0.78rem;
  color: var(--t0); text-align: center; line-height: 1.35;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0,0,0,0.7);
}
/* Default: above the card (used for my/middle minions) */
.minion-tooltip { bottom: calc(100% + 8px); transform: translateX(-50%); }
/* Opp minions (top row): show tooltip BELOW the card so it doesn't go off-screen */
.opp-zone .minion-tooltip { bottom: auto; top: calc(100% + 8px); }
.game-minion:hover .minion-tooltip { opacity: 1; }

/* Same logic for hand-card tooltip (always above since hand is at bottom) */
.hc-tooltip {
  position: absolute;
  bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  background: rgba(7,8,13,0.97); border: 1px solid var(--b2);
  border-radius: var(--r); padding: 6px 8px;
  width: 200px; font-family: var(--f-body); font-size: 0.78rem;
  color: var(--t0); text-align: center; line-height: 1.35;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
  z-index: 200;
  box-shadow: 0 6px 18px rgba(0,0,0,0.7);
}
.hand-card:hover .hc-tooltip { opacity: 1; }

/* Attack/hit animations */
.minion-attacking-up { animation: attackLunge 0.44s ease-in-out; z-index: 99; }
@keyframes attackLunge {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-30px) scale(1.1); }
}

/* takeDamage: pure brightness flash — JS handles the directional recoil movement */
.taking-damage { animation: takeDamage 0.45s ease-out; }
@keyframes takeDamage {
  0%   { filter: brightness(1) saturate(1); }
  6%   { filter: brightness(3.5) saturate(0) contrast(1.8); }
  18%  { filter: brightness(2.2) saturate(0.2); }
  50%  { filter: brightness(1.3) saturate(0.8); }
  100% { filter: brightness(1) saturate(1); }
}

/* hero-hit: flash + red tint — JS handles screen shake */
.hero-hit { animation: heroShake 0.4s ease-out; }
@keyframes heroShake {
  0%   { filter: brightness(1); }
  8%   { filter: brightness(2.8) saturate(0.1) sepia(0.8) hue-rotate(-10deg); }
  20%  { filter: brightness(1.9) saturate(0.4); }
  100% { filter: brightness(1); }
}

/* Screen shake on hero hit */
.screen-shake { animation: screenShake 0.38s ease-out; }
@keyframes screenShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  12%  { transform: translate(-5px, 3px) rotate(-0.3deg); }
  25%  { transform: translate(6px, -3px) rotate(0.4deg); }
  37%  { transform: translate(-4px, 4px) rotate(-0.2deg); }
  50%  { transform: translate(5px, -2px) rotate(0.2deg); }
  65%  { transform: translate(-3px, 2px) rotate(-0.1deg); }
  80%  { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ── Impact effects ─────────────────────────────────────────────────────────── */
/* Core flash at impact point */
.impact-core {
  position: fixed; z-index: 99999; pointer-events: none;
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,230,80,0.95) 28%, rgba(255,150,0,0.6) 55%, transparent 80%);
  box-shadow: 0 0 24px rgba(255,220,60,1), 0 0 60px rgba(255,160,0,0.7);
  transform: translate(-50%, -50%);
  animation: impactCore 0.28s cubic-bezier(0.2,0,0.6,1) forwards;
}
@keyframes impactCore {
  0%   { transform: translate(-50%,-50%) scale(0.15); opacity: 1; }
  35%  { transform: translate(-50%,-50%) scale(1.1);  opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2);    opacity: 0; }
}

/* Primary shockwave ring */
.impact-ring {
  position: fixed; z-index: 99998; pointer-events: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid rgba(255,210,60,0.9);
  box-shadow: 0 0 8px rgba(255,200,60,0.6);
  transform: translate(-50%, -50%);
  animation: impactRing 0.48s ease-out forwards;
}
/* Secondary wider ring, delayed */
.impact-ring2 {
  position: fixed; z-index: 99997; pointer-events: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  transform: translate(-50%, -50%);
  animation: impactRing 0.65s 0.06s ease-out forwards;
}
@keyframes impactRing {
  0%   { transform: translate(-50%,-50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(5);   opacity: 0; }
}

/* Spark particles — position + --tx/--ty set inline by JS */
.impact-spark {
  position: fixed; z-index: 99998; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffdd44 55%, transparent 100%);
  transform: translate(-50%, -50%);
  animation: sparkFly 0.42s ease-out forwards;
}
@keyframes sparkFly {
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity: 1; }
  70%  { opacity: 0.7; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.08); opacity: 0; }
}

/* Slash lines — width + transform(rotation) set inline by JS */
.impact-slash {
  position: fixed; z-index: 99997; pointer-events: none;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.95) 25%, rgba(255,225,60,1) 50%, rgba(255,180,0,0.7) 75%, transparent 100%);
  border-radius: 1px;
  transform-origin: center center;
  animation: slashFade 0.3s ease-out forwards;
}
@keyframes slashFade {
  0%   { opacity: 1; }
  40%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Legacy — kept so old references don't break */
.attack-clash {
  position: fixed; z-index: 99999; pointer-events: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,80,0.9) 0%, rgba(255,150,0,0.5) 40%, transparent 70%);
  animation: clashBurst 0.3s ease-out forwards;
}
@keyframes clashBurst {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2);   opacity: 0; }
}

/* Divine shield pulse */
@keyframes divinePulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(240,232,160,0.5), inset 0 0 5px rgba(240,232,160,0.07);
    border-color: rgba(240,232,160,0.65);
  }
  50% {
    box-shadow: 0 0 22px rgba(240,232,160,1), 0 0 8px rgba(240,232,160,0.5), inset 0 0 14px rgba(240,232,160,0.18);
    border-color: rgba(240,232,160,1);
  }
}

/* Taunt shield pulse */
@keyframes tauntShieldPulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(201,168,76,0.25), inset 0 0 4px rgba(201,168,76,0.05);
    border-color: rgba(201,168,76,0.6) !important;
  }
  50% {
    box-shadow: 0 0 18px rgba(201,168,76,0.6), inset 0 0 8px rgba(201,168,76,0.1);
    border-color: rgba(201,168,76,1) !important;
  }
}

/* Minion damage flash (was referenced in JS but had no CSS) */
.minion-daonmyoji-flash { animation: minionDaonmyojiFlash 0.25s ease-out forwards; }
@keyframes minionDaonmyojiFlash {
  0%   { filter: brightness(2.8) saturate(0.15); box-shadow: 0 0 16px rgba(255,70,70,0.95) !important; }
  100% { filter: brightness(1); }
}

/* Hero damage flash (was referenced in JS but had no CSS) */
.hero-daonmyoji-flash { animation: heroDaonmyojiFlash 0.3s ease-out forwards; }
@keyframes heroDaonmyojiFlash {
  0%   { filter: brightness(1.9) saturate(0.2); box-shadow: 0 0 28px rgba(255,40,40,1) !important; }
  100% { filter: brightness(1); }
}

/* Targeting line */
.targeting-line { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.targeting-dot {
  position: fixed; width: 14px; height: 14px;
  border-radius: 50%; background: rgba(192,39,45,0.6);
  border: 2px solid var(--cr-bright);
  box-shadow: 0 0 10px rgba(192,39,45,0.8);
  pointer-events: none; z-index: 201;
  transform: translate(-50%, -50%);
}

.targeting-msg {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(7,8,13,0.95); border: 1px solid var(--cr);
  color: var(--t0); font-family: var(--f-jp); font-size: 0.75rem;
  padding: 8px 18px; border-radius: var(--r);
  z-index: 50; animation: targetMsgFade 0.2s;
}
@keyframes targetMsgFade { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%); } }

.opp-action-text {
  position: fixed !important;
  top: 42%; left: 50%; transform: translateX(-50%);
  z-index: 30; pointer-events: none;
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700;
  color: var(--t0); background: rgba(7,8,13,0.92);
  border: 1px solid var(--b1); padding: 8px 18px;
  border-radius: var(--r); white-space: nowrap;
  animation: oppActionIn 0.3s ease-out, oppActionOut 0.4s ease-in 1.5s forwards;
}

/* Damage-taken screen edge vignette — JS appends to #screen-game for 400ms.
   Must never participate in flex flow or it'll push the hand down briefly. */
.screen-daonmyoji-vignette {
  position: fixed !important; inset: 0;
  z-index: 80; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(192,39,45,0.35) 100%),
    linear-gradient(180deg, rgba(192,39,45,0.18), transparent 15%, transparent 85%, rgba(192,39,45,0.18));
  animation: daonmyojiVigFade 0.4s ease-out forwards;
}
@keyframes daonmyojiVigFade {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes oppActionIn  { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes oppActionOut { to   { opacity: 0; transform: translateX(-50%) translateY(-10px); } }

/* Floating damage / heal numbers */
.float-num {
  font-family: var(--f-jp); font-size: 1.4rem; font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5);
  animation: floatNumRise 1.2s ease-out forwards;
  white-space: nowrap;
  transform: translateX(-50%);
}
.float-num-damage { color: #ff3333; }
.float-num-heal   { color: #44ff44; }
.float-num-armor  { color: #aaddff; }
.float-num-big    { font-size: 1.7rem; }
.float-num-huge   { font-size: 2rem; color: #ff2020; }
@keyframes floatNumRise {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-80px); }
}

/* Card play / land animations */
.card-fly-clone { will-change: transform, left, top; }
.card-land-flash, .card-land-ripple { will-change: opacity, transform; }
@keyframes cardLandFlashAnim { 0% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes cardLandRippleAnim { 0% { opacity: 0.8; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* Choice modal */
#choice-options {
  display: flex; flex-direction: column; gap: 8px; margin: 12px 0;
}
.choice-option {
  background: var(--s2); border: 1px solid var(--b0);
  border-left: 3px solid var(--cr);
  border-radius: var(--r); padding: 10px 14px;
  cursor: pointer; transition: all 0.15s;
}
.choice-option:hover { border-left-color: var(--go); transform: translateX(3px); }
.choice-opt-name { font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700; color: var(--t0); }
.choice-opt-desc { font-family: var(--f-body); font-size: 0.78rem; color: var(--t1); margin-top: 2px; }

/* Game-over overlay — JS sets style.display='flex' inline when the game ends.
   Structure: .game-over-overlay > .game-over-box > [.game-over-title + .game-over-rewards] */
.game-over-overlay, #game-over-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.88), rgba(0,0,0,0.96));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  padding: 1rem;
}
#game-over-overlay[style*="flex"] { animation: overlayFade 0.3s ease-out; }
.game-over-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 3px solid var(--go);
  border-radius: var(--r-l); padding: 2.4rem 2.4rem 2rem;
  max-width: 520px; width: 92vw;
  text-align: center; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(201,168,76,0.18);
  animation: gmModalIn 0.4s cubic-bezier(0.2, 0.7, 0.3, 1.2);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
/* State switch — JS sets inline color on the title; we mirror that onto the box */
.game-over-box:has(#game-over-title[style*="e04020"]) {
  border-top-color: var(--cr-bright);
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(224,64,32,0.25);
}
#game-over-title, .game-over-title {
  font-family: var(--f-jp); font-size: 2.6rem; font-weight: 900;
  color: var(--go); letter-spacing: 0.18em;
  margin: 0 0 0.8rem; padding-bottom: 0.8rem;
  position: relative;
  text-shadow: 0 0 28px rgba(201,168,76,0.4);
  text-transform: uppercase;
}
#game-over-title::after, .game-over-title::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 140px; height: 2px; transform: translateX(-50%);
  background: linear-gradient(to right, transparent, var(--cr) 30%, var(--go) 50%, var(--cr) 70%, transparent);
}
#game-over-title[style*="e04020"]::after { background: linear-gradient(to right, transparent, var(--cr) 30%, var(--cr-bright) 50%, var(--cr) 70%, transparent); }

#game-over-rewards, .game-over-rewards {
  background: transparent; border: none; padding: 0;
  margin: 1rem 0 1.4rem;
}

.game-over-box button {
  font-family: var(--f-jp); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--parchment);
  background: linear-gradient(135deg, var(--cr-dark), #b02028, var(--cr-dark));
  border: 1px solid rgba(192,39,45,0.6);
  padding: 0.8rem 2.2rem;
  min-height: 44px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  cursor: pointer;
  box-shadow: 0 0 18px rgba(192,39,45,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  margin-top: 0.4rem;
}
.game-over-box button:hover {
  background: linear-gradient(135deg, #8a1218, #d02838, #8a1218);
  box-shadow: 0 0 28px rgba(192,39,45,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.game-over-box button:active { transform: translateY(0); }

/* Game perks indicator — sits next to the game-log button (42px + 14px + 10px gap).
   Must be position:fixed so it doesn't take flex-column space on first paint. */
.game-perks-indicator {
  position: fixed !important;
  top: 18px; left: 66px;
  z-index: 30;
  display: flex; gap: 6px;
  pointer-events: none;
}
body.nav-sidebar .game-perks-indicator { left: calc(var(--sw) + 66px); }
.game-perks-indicator:empty { display: none !important; }
.game-perk-badge {
  background: rgba(7,8,13,0.85); border: 1px solid var(--b0);
  padding: 4px 6px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.gp-xp { border-color: rgba(255,180,0,0.4); color: #ffb400; }
.gp-gold { border-color: var(--b2); color: var(--go); }

/* Drag clones */
.card-fly-clone { border-radius: var(--r); }

/* Generic small text helpers used throughout */
.text-dim { color: var(--t1); }
.text-muted { color: var(--t2); }
.text-gold { color: var(--go); }
.text-crimson { color: var(--cr); }


/* ── 22. CUSTOM DROPDOWN (yk-select) ─────────────────────────────────────── */
select[data-customized] { display: none; }
.yk-select { position: relative; width: 100%; }
.yk-select-btn {
  width: 100%; text-align: left;
  font-family: var(--f-jp); font-size: 0.7rem;
  background: rgba(4,4,10,0.85); border: 1px solid var(--b0);
  border-radius: 3px; color: var(--t0);
  padding: 0.5rem 1.6rem 0.5rem 0.7rem;
  cursor: pointer; position: relative;
  transition: border-color 0.15s;
}
.yk-select-btn::after {
  content: ''; position: absolute;
  right: 9px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--t1);
  transition: transform 0.15s;
}
.yk-select.open .yk-select-btn { border-color: var(--b1); }
.yk-select.open .yk-select-btn::after { transform: translateY(-50%) rotate(180deg); }
/* Closed: lives inside .yk-select as absolute positioned; but on open, JS
   portals the list to <body> with position:fixed + inline left/top/width
   so it can escape any clipping ancestor (scroll containers, clip-path). */
.yk-select-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--s2); border: 1px solid var(--b0);
  border-top: 1px solid rgba(192,39,45,0.3);
  border-radius: var(--r); margin-top: 4px;
  max-height: 260px; overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 20px rgba(192,39,45,0.12);
}
.yk-select-list.yk-select-list-portal {
  position: fixed !important;
  right: auto !important;              /* base rule sets right:0 — override */
  left: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  display: block;
  pointer-events: auto;
}
.yk-select-item {
  font-family: var(--f-jp); font-size: 0.7rem;
  color: var(--t1); padding: 0.5rem 0.7rem; cursor: pointer;
  border-bottom: 1px solid var(--b0);
}
.yk-select-item:last-child { border-bottom: none; }
.yk-select-item:hover { background: rgba(192,39,45,0.1); color: var(--t0); }
.yk-select-item.active { color: var(--go); background: rgba(201,168,76,0.06); }
.yk-select-item.locked {
  color: var(--t2); cursor: not-allowed;
  background: rgba(7,8,13,0.45);
  opacity: 0.65;
  font-style: italic;
}
.yk-select-item.locked:hover {
  background: rgba(7,8,13,0.45);          /* kill hover feedback */
  color: var(--t2);
}

/* ── 23. AUTH MODAL ──────────────────────────────────────────────────────── */
.auth-box { max-width: 380px; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 1rem; border-bottom: 1px solid var(--b0); }
.auth-tab {
  flex: 1; background: transparent; border: none;
  color: var(--t1); font-family: var(--f-jp);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6rem; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.auth-tab.active { color: var(--go); border-bottom-color: var(--cr); }
.auth-form { display: flex; flex-direction: column; gap: 0.8rem; }
/* Error message — JS sets textContent (never adds a class), so we hide when
   empty via :empty and reveal whenever text is present. */
.auth-error {
  font-family: var(--f-body); font-size: 0.8rem; color: #e08080;
  background: rgba(231,76,60,0.1);
  border: 1px solid rgba(231,76,60,0.35);
  border-left: 3px solid var(--red);
  padding: 0.55rem 0.7rem; border-radius: var(--r);
  display: block; min-height: 0;
  animation: authErrShake 0.35s ease-out;
}
.auth-error:empty {
  display: none; padding: 0; border: none; animation: none;
}
.auth-error.visible { display: block; }
@keyframes authErrShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.auth-submit {
  font-family: var(--f-jp); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); border: 1px solid var(--b1);
  padding: 0.7rem; border-radius: var(--r); cursor: pointer;
}
.auth-submit:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }

/* Terms checkbox row on register form */
.reg-terms-label {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--f-body); font-size: 0.78rem;
  color: var(--t1); line-height: 1.45;
  cursor: pointer;
}
.reg-terms-label input[type="checkbox"] {
  margin-top: 3px; flex-shrink: 0;
  accent-color: var(--cr);
}
.reg-terms-label a { color: var(--go); text-decoration: none; }
.reg-terms-label a:hover { color: var(--cr-bright); text-decoration: underline; }

/* Bot-check checkbox (replaces upstream ALTCHA web component) */
.altcha-wrap { display: block; }
.altcha-box {
  width: 100%;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--s2); border: 1px solid var(--b1);
  border-radius: var(--r); color: var(--t0);
  font-family: var(--f-body); font-size: 0.9rem;
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.altcha-box:hover:not(:disabled) { border-color: var(--cr); background: var(--s3); }
.altcha-box:disabled { cursor: default; }
.altcha-check {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1.5px solid var(--b1); border-radius: 3px;
  background: var(--s1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.altcha-label { flex: 1 1 auto; color: var(--t1); letter-spacing: 0.02em; }
.altcha-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid rgba(201,168,76,0.25);
  border-top-color: var(--go);
  border-radius: 50%;
  display: none;
  animation: altchaSpin 0.8s linear infinite;
}
@keyframes altchaSpin { to { transform: rotate(360deg); } }
.altcha-box[data-state="verifying"] .altcha-spinner { display: inline-block; }
.altcha-box[data-state="verifying"] .altcha-label { color: var(--t0); }
.altcha-box[data-state="verified"] { border-color: rgba(82,170,110,0.55); background: rgba(22,40,28,0.65); }
.altcha-box[data-state="verified"] .altcha-check {
  background: #2a8a4a; border-color: #2a8a4a;
}
.altcha-box[data-state="verified"] .altcha-check::after {
  content: ''; width: 5px; height: 10px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px,-1px);
}
.altcha-box[data-state="verified"] .altcha-label { color: #b8e0c2; }
.altcha-box[data-state="error"] { border-color: var(--cr); background: rgba(60,18,20,0.6); }
.altcha-box[data-state="error"] .altcha-label { color: #f0b0b3; }

/* Email verification form */
.verify-header {
  text-align: center; margin-bottom: 1rem;
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--b0);
}
.verify-icon {
  font-size: 2.2rem; color: var(--go);
  margin-bottom: 0.4rem; line-height: 1;
}
.verify-title {
  font-family: var(--f-jp); font-size: 1.05rem; color: var(--t0);
  letter-spacing: 0.04em; margin: 0 0 0.4rem;
}
.verify-desc {
  font-family: var(--f-body); font-size: 0.85rem;
  color: var(--t1); line-height: 1.5; margin: 0;
}
.verify-desc strong { color: var(--go); }

.verify-simulated {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  background: rgba(201,168,76,0.08); border: 1px dashed var(--b2);
  border-radius: var(--r); padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
}
.verify-sim-label {
  font-family: var(--f-jp); font-size: 0.68rem;
  color: var(--t1); letter-spacing: 0.1em; text-transform: uppercase;
}
.verify-sim-code {
  font-family: var(--f-jp); font-size: 1.4rem; font-weight: 700;
  color: var(--go); letter-spacing: 0.3em;
}

.verify-inputs {
  display: flex; gap: 8px; justify-content: center;
  margin: 0.4rem 0 0.8rem;
}
.verify-digit {
  width: 44px; height: 54px;
  background: var(--s2); border: 1px solid var(--b1);
  color: var(--t0);
  font-family: var(--f-jp); font-size: 1.4rem; font-weight: 700;
  text-align: center; border-radius: var(--r);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.verify-digit:focus {
  border-color: var(--cr);
  box-shadow: 0 0 0 2px rgba(192,39,45,0.25);
  outline: none;
}

.verify-resend {
  display: block; text-align: center;
  font-family: var(--f-body); font-size: 0.8rem;
  color: var(--go); text-decoration: none;
  margin-top: 0.5rem;
}
.verify-resend:hover { color: var(--cr-bright); text-decoration: underline; }

.verify-code-input {
  text-align: center; letter-spacing: 0.5em; font-size: 1.2rem;
  font-family: var(--f-jp);
}

/* ── 24. TUTORIAL / GUIDE / HINTS ────────────────────────────────────────── */
.tutorial-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9990;
}
.tutorial-spotlight {
  position: absolute;
  border: 2px solid var(--go);
  border-radius: var(--r-l);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.85), 0 0 20px rgba(201,168,76,0.5);
  pointer-events: none;
  transition: all 0.3s;
}
.tutorial-tooltip {
  position: absolute;
  background: var(--s1); border: 1px solid var(--b1);
  border-top: 2px solid var(--cr);
  padding: 1rem; border-radius: var(--r-l);
  max-width: 300px; box-shadow: 0 8px 28px rgba(0,0,0,0.8);
  z-index: 9991;
}
.tutorial-tooltip-title {
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700;
  color: var(--go); margin-bottom: 0.4rem;
}
.tutorial-tooltip-text {
  font-family: var(--f-body); font-size: 0.85rem; color: var(--t1);
  line-height: 1.5; margin-bottom: 0.7rem;
}
.tutorial-actions { display: flex; justify-content: space-between; gap: 8px; }
.tutorial-next {
  background: var(--cr); color: var(--t0); border: none;
  font-family: var(--f-jp); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 1rem; border-radius: 3px; cursor: pointer;
}
.tutorial-skip {
  background: transparent; color: var(--t1); border: none;
  font-family: var(--f-jp); font-size: 0.65rem; cursor: pointer;
}
.tutorial-highlight { z-index: 9992 !important; position: relative !important; }

.help-btn {
  position: fixed; bottom: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(7,8,13,0.95); border: 1px solid var(--b1);
  color: var(--go); font-family: var(--f-jp); font-size: 1.1rem; font-weight: 700;
  cursor: pointer; z-index: 80;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.help-btn:hover { border-color: var(--go); }

/* In-game hint popup — docked to LEFT side below the game-log button + perks
   row (right of the nav sidebar when present). */
.game-hint {
  position: fixed !important;
  top: 72px; left: 14px;
  z-index: 200;
  display: flex; align-items: flex-start; gap: 10px;
  background: linear-gradient(135deg, rgba(20,12,4,0.98), rgba(7,8,13,0.98));
  border: 1px solid var(--go);
  border-left: 3px solid var(--go);
  border-radius: var(--r);
  padding: 0.75rem 0.9rem;
  width: 300px; max-width: min(320px, calc(100vw - 28px));
  box-shadow: 0 10px 32px rgba(0,0,0,0.8), 0 0 16px rgba(201,168,76,0.2);
  animation: hintIn 0.3s ease-out;
}
body.nav-sidebar .game-hint { left: calc(var(--sw) + 14px); }
.game-hint:empty { display: none !important; }
@keyframes hintIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.game-hint-text {
  font-family: var(--f-body); font-size: 0.85rem; color: var(--t0); line-height: 1.4;
  flex: 1;
}
.game-hint-text strong { color: var(--go); }
.game-hint-close {
  background: transparent; border: none; color: var(--t1);
  font-size: 1rem; cursor: pointer; padding: 4px 6px; line-height: 1;
}
.game-hint-close:hover { color: var(--cr); }

/* Tome of Knowledge / Guide modal (uses .skin-preview-overlay as backdrop) */
.guide-tome {
  position: relative;
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l);
  padding: 1.6rem 1.8rem;
  max-width: 620px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
.guide-title {
  font-family: var(--f-jp); font-size: 1.3rem; font-weight: 700;
  color: var(--go); text-align: center;
  letter-spacing: 0.08em; margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--b0);
}
.guide-section { margin-bottom: 1.2rem; }
.guide-section:last-child { margin-bottom: 0; }
.guide-heading {
  font-family: var(--f-jp); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t1);
  border-left: 2px solid var(--cr);
  padding-left: 8px;
  margin-bottom: 0.5rem;
}
.guide-entry {
  font-family: var(--f-body); font-size: 0.85rem; color: var(--t0);
  line-height: 1.5;
  padding: 4px 0 4px 10px;
  border-left: 1px solid var(--b0);
  margin-left: 8px;
}
.guide-entry strong { letter-spacing: 0.04em; }

/* Floating "?" page-guide button (bottom-right) */
.guide-help-btn {
  position: fixed; bottom: 22px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(7,8,13,0.95); border: 1px solid var(--b1);
  color: var(--go); font-family: var(--f-jp); font-size: 1.3rem; font-weight: 700;
  cursor: pointer; z-index: 80;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.guide-help-btn:hover { border-color: var(--go); background: rgba(20,12,4,0.98); transform: translateY(-2px); }

/* Quick Guide popup (gp-box) — shown by replayCurrentGuide / showPageGuide */
.gp-box {
  position: relative;
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l);
  padding: 1.6rem 1.8rem;
  max-width: 540px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
.gp-title {
  font-family: var(--f-jp); font-size: 1.15rem; font-weight: 700;
  color: var(--go); text-align: center;
  letter-spacing: 0.08em; margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--b0);
}
.gp-steps { display: flex; flex-direction: column; gap: 12px; }
.gp-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--s2); border: 1px solid var(--b0);
  border-left: 3px solid var(--cr);
  border-radius: var(--r);
  padding: 0.7rem 0.9rem;
}
.gp-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--b1);
}
.gp-step-body { flex: 1; min-width: 0; }
.gp-step-title {
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700;
  color: var(--go);
  margin-bottom: 4px;
}
.gp-step-text {
  font-family: var(--f-body); font-size: 0.85rem; color: var(--t1);
  line-height: 1.45;
}
.gp-actions {
  display: flex; justify-content: center; margin-top: 1.2rem;
  padding-top: 0.8rem; border-top: 1px solid var(--b0);
}

/* ── 25. CLASS UNLOCK / SKIN PREVIEW MODALS ──────────────────────────────── */
.class-unlock-modal-overlay { /* uses .modal-overlay base */ }
.class-unlock-modal-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.5rem;
  max-width: 480px; width: 100%;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7);
}
.class-unlock-card.unlocked { border-color: var(--b2); background: rgba(201,168,76,0.04); }

/* Unlock success modal (shared for class + bundle unlock confirmations) */
.unlock-success-box {
  max-width: 400px; width: 100%;
  text-align: center; padding-top: 2rem;
}
.unlock-success-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(201,168,76,0.25), rgba(201,168,76,0.05) 70%);
  border: 1px solid rgba(201,168,76,0.55);
  color: var(--go);
  margin: 0 auto 0.8rem;
  box-shadow: 0 0 18px rgba(201,168,76,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.unlock-success-msg {
  font-family: var(--f-body); font-size: 0.9rem; color: var(--t1);
  line-height: 1.5; margin: 0.4rem 0 0.6rem;
}

.skin-preview-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.5rem;
  max-width: 520px; width: 100%; text-align: center;
}
.skin-preview-box .hero-skin-preview-wrap {
  display: flex; justify-content: center; padding: 1rem;
  aspect-ratio: auto; background: transparent; border-radius: 0;
  overflow: visible; margin-bottom: 0;
}

/* ── 26. COOKIE BANNER ───────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(7,8,13,0.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 2px solid var(--cr);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.7), 0 -1px 0 rgba(201,168,76,0.14);
  padding: 1.1rem 1.8rem;
  z-index: 9000;
}
.cookie-banner::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(192,39,45,0.55) 30%, rgba(201,168,76,0.45) 50%, rgba(192,39,45,0.55) 70%, transparent);
  pointer-events: none;
}
.cookie-content {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
}
.cookie-text {
  flex: 1; min-width: 260px;
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--f-body); font-size: 0.88rem; color: var(--t0);
  line-height: 1.55;
}
.cookie-icon {
  font-size: 28px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(192,39,45,0.35));
}
.cookie-text strong {
  font-family: var(--f-jp); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--parchment); display: block; margin-bottom: 0.25rem;
}
.cookie-text p {
  font-family: var(--f-body); font-style: italic;
  color: var(--t1); font-size: 0.82rem; margin: 0;
}
.cookie-text a {
  color: var(--go); text-decoration: underline;
  text-decoration-color: rgba(201,168,76,0.4); text-underline-offset: 3px;
}
.cookie-text a:hover { color: var(--cr-bright); text-decoration-color: var(--cr); }

.cookie-actions {
  display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
}
.cookie-btn {
  font-family: var(--f-jp); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.6rem 1.2rem; min-height: 40px;
  cursor: pointer;
  border: 1px solid rgba(201,168,76,0.35);
  background: transparent; color: var(--t0);
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  border-radius: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-btn-accept {
  background: linear-gradient(135deg, var(--cr-dark), #b02028, var(--cr-dark));
  border-color: rgba(192,39,45,0.6);
  color: var(--parchment);
  box-shadow: 0 0 14px rgba(192,39,45,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cookie-btn-accept:hover {
  background: linear-gradient(135deg, #8a1218, #d02838, #8a1218);
  box-shadow: 0 0 22px rgba(192,39,45,0.42);
}
.cookie-btn-essential {
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.45);
  color: var(--go);
}
.cookie-btn-essential:hover { background: rgba(201,168,76,0.18); border-color: var(--go); }
.cookie-btn-settings {
  color: var(--t1); border-color: rgba(201,168,76,0.2);
}
.cookie-btn-settings:hover { color: var(--go); border-color: rgba(201,168,76,0.45); background: rgba(201,168,76,0.06); }

.cookie-setting-group {
  margin-bottom: 0.7rem; padding: 0.7rem 0.9rem;
  background: rgba(7,8,13,0.55); border: 1px solid var(--b0);
  border-left: 2px solid rgba(192,39,45,0.45);
  border-radius: var(--r);
  transition: border-color 0.18s, background 0.18s;
}
.cookie-setting-group:hover {
  border-color: rgba(192,39,45,0.45);
  border-left-color: var(--cr);
  background: rgba(22,14,16,0.7);
}
.cookie-setting-header {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-jp); color: var(--t0); font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.cookie-setting-header label {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font-family: var(--f-jp); color: var(--t0);
}
.cookie-setting-header label strong { font-weight: 700; color: var(--t0); }
.cookie-setting-header input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0;
  background: var(--s2); border: 1px solid var(--b2);
  border-radius: 3px; cursor: pointer;
  display: inline-grid; place-content: center;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cookie-setting-header input[type="checkbox"]:hover { border-color: var(--cr); }
.cookie-setting-header input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  border-color: var(--cr);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.25);
}
.cookie-setting-header input[type="checkbox"]:checked::before {
  content: ''; width: 9px; height: 9px;
  background: var(--go); clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 86% 6%, 40% 72%);
}
.cookie-setting-header input[type="checkbox"]:disabled {
  opacity: 0.6; cursor: not-allowed;
  background: var(--s2); border-color: var(--b1);
}
.cookie-setting-header input[type="checkbox"]:disabled:checked {
  background: linear-gradient(135deg, rgba(192,39,45,0.35), rgba(192,39,45,0.5));
}
.cookie-setting-group p {
  margin: 0; padding-left: 1.4rem;
  font-family: var(--f-body); font-size: 0.78rem;
  color: var(--t2); line-height: 1.5;
}
.cookie-always-on {
  font-family: var(--f-jp); color: var(--go);
  font-size: 0.58rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-style: normal;
  padding: 2px 8px; border: 1px solid rgba(201,168,76,0.35);
  border-radius: 10px;
}

/* ── 27. PAYMENT FORMS / INVOICE (out of demo path, basic styles only) ──── */
.payment-form, .add-card-form { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem; }
.card-form-row { display: flex; gap: 0.5rem; }
.card-form-row-split > * { flex: 1; }
.card-form-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 0.7rem; }
.btn-add-card, .btn-save-card { background: var(--cr); color: var(--t0); border: none; padding: 0.6rem 1rem; border-radius: var(--r); cursor: pointer; font-family: var(--f-jp); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.btn-cancel-card { background: transparent; color: var(--t1); border: 1px solid var(--b0); padding: 0.6rem 1rem; border-radius: var(--r); cursor: pointer; }

/* ── 28. LEVEL UP MODAL ──────────────────────────────────────────────────── */
.level-up-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.level-up-box {
  background: linear-gradient(180deg, var(--s1), var(--s2));
  border: 1px solid var(--b2);
  border-top: 3px solid var(--go);
  border-radius: var(--r-l); padding: 2rem;
  max-width: 440px; width: 100%; text-align: center;
  box-shadow: 0 0 60px rgba(201,168,76,0.25), 0 12px 48px rgba(0,0,0,0.7);
  animation: levelUpPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes levelUpPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.level-up-title {
  font-family: var(--f-jp); font-size: 0.9rem; color: var(--t1);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.4rem;
}
.level-up-num {
  font-family: var(--f-jp); font-size: 3.5rem; font-weight: 900;
  color: var(--go); text-shadow: 0 0 20px rgba(201,168,76,0.5);
  margin: 0.4rem 0;
}
.level-up-rewards { display: flex; flex-direction: column; gap: 6px; margin: 1rem 0; }
.lvl-reward-item {
  background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.2);
  padding: 6px 10px; border-radius: 3px;
  font-family: var(--f-jp); font-size: 0.78rem; color: var(--t0);
}

/* ── 29. RESPONSIVE FALLBACKS ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lobby-player-bar { padding: 0.7rem; gap: 0.5rem 0.8rem; }
  .lpb-stat { padding: 0.1rem 0.4rem; }
  .game-hero-portrait { width: 64px; height: 64px; font-size: 28px; }
  .hero-power-circle { width: 38px; height: 38px; }
  .hand-card { width: 70px; height: 100px; }
  .game-minion { width: 64px; height: 90px; }
  .end-turn-panel { right: 8px; }
}

/* ── 30. ACTUAL CARD CELLS — class names match what JS renders ──────────── */
/* COLLECTION cards (.coll-card from collection.js) */
#collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.7rem;
  padding: 0 1rem;
}
.coll-card {
  background: var(--s2);
  border: 1px solid var(--b0);
  border-radius: var(--r-l);
  padding: 0.5rem;
  position: relative;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
  contain: layout style;
}
.coll-card:hover { transform: translateY(-2px); }
.coll-card.not-owned { opacity: 0.55; filter: grayscale(0.4); }
.coll-card.rarity-rare      { box-shadow: 0 0 0 1px rgba(74,159,212,0.3); }
.coll-card.rarity-epic      { box-shadow: 0 0 0 1px rgba(155,89,182,0.3); }
.coll-card.rarity-legendary { box-shadow: 0 0 0 1px rgba(201,168,76,0.4); }

.cc-mana {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  width: 32px; height: 32px;
  background: url('../assets/stat-mana.webp') center/contain no-repeat;
  color: var(--t0);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.95rem; font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.cc-qty-badge {
  position: absolute; top: 4px; right: 4px; z-index: 2;
  background: rgba(0,0,0,0.7); color: var(--go);
  font-family: var(--f-jp); font-size: 0.65rem; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--b0);
}
.cc-unowned-badge { color: var(--t2); font-style: italic; font-weight: 400; }

.cc-art {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--s3);
  display: flex; align-items: center; justify-content: center;
}
.cc-art-img { width: 100%; height: 100%; object-fit: cover; }
.cc-emoji { font-size: 36px; }

.cc-stat-row {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  display: flex; justify-content: space-between;
  pointer-events: none;
}
.cc-atk, .cc-hp {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 900;
  color: var(--t0); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.cc-atk { background: url('../assets/stat-attack.webp') center/contain no-repeat; }
.cc-hp  { background: url('../assets/stat-health.webp') center/contain no-repeat; width: 30px; height: 30px; }

.cc-nameband {
  font-family: var(--f-jp); font-size: 0.72rem; font-weight: 600;
  text-align: center; padding: 4px 2px;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-sub-row {
  display: flex; justify-content: space-between;
  font-family: var(--f-jp); font-size: 0.6rem;
  color: var(--t1); padding: 0 2px;
}
.cc-type-lbl { text-transform: capitalize; }
.cc-rarity-lbl { text-transform: capitalize; font-weight: 600; }
.cc-desc {
  font-family: var(--f-body); font-size: 0.7rem;
  color: var(--t1); margin-top: 4px;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

#collection-pagination {
  display: flex; justify-content: center; gap: 6px;
  padding: 1rem; margin-top: 0.5rem;
  flex-wrap: wrap;
}
#collection-pagination button {
  font-family: var(--f-jp); font-size: 0.65rem;
  background: transparent; border: 1px solid var(--b0);
  color: var(--t1); padding: 4px 10px; border-radius: 3px;
  cursor: pointer;
}
#collection-pagination button.active,
#collection-pagination button:hover { background: rgba(192,39,45,0.15); border-color: var(--b1); color: var(--go); }

.coll-sidebar-section {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 0.6rem; padding-top: 0.6rem;
  border-top: 1px solid var(--b0);
}
/* collection sidebar selects inherit the unified form-control styling */
.coll-show-all {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1);
  cursor: pointer;
}
.coll-show-all input { width: auto; }

/* DECK BUILDER cards (.builder-card from decks.js) */
#builder-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 6px;
}
.builder-card {
  background: var(--s2);
  border: 1px solid var(--b0);
  border-radius: var(--r);
  padding: 4px;
  position: relative;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  contain: layout style;
}
.builder-card.bc-can:hover { border-color: var(--b2); transform: translateY(-2px); }
.builder-card.bc-max { opacity: 0.5; cursor: not-allowed; }
.builder-card.rarity-rare      { box-shadow: 0 0 0 1px rgba(74,159,212,0.25); }
.builder-card.rarity-epic      { box-shadow: 0 0 0 1px rgba(155,89,182,0.3); }
.builder-card.rarity-legendary { box-shadow: 0 0 0 1px rgba(201,168,76,0.4); }

.bc-mana {
  position: absolute; top: 2px; left: 2px; z-index: 2;
  width: 26px; height: 26px;
  background: url('../assets/stat-mana.webp') center/contain no-repeat;
  color: var(--t0);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.82rem; font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.bc-in-deck {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  background: var(--cr); color: var(--t0);
  font-family: var(--f-jp); font-size: 0.6rem; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
}
.bc-art {
  position: relative; width: 100%; aspect-ratio: 1;
  border-radius: 2px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bc-art-img { width: 100%; height: 100%; object-fit: cover; }
.bc-stat-row {
  position: absolute; bottom: 2px; left: 2px; right: 2px;
  display: flex; justify-content: space-between;
}
.bc-atk, .bc-hp {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-jp); font-size: 0.72rem; font-weight: 900;
  color: var(--t0); text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.bc-atk { background: url('../assets/stat-attack.webp') center/contain no-repeat; }
.bc-hp  { background: url('../assets/stat-health.webp') center/contain no-repeat; width: 24px; height: 24px; }
.bc-nameband {
  font-family: var(--f-jp); font-size: 0.6rem; font-weight: 600;
  color: var(--t0); text-align: center; padding: 3px 0 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-jp); font-size: 0.55rem; color: var(--t1);
  padding: 0 2px;
}
.bc-own { color: var(--go); font-weight: 600; }
.bc-unowned { color: var(--t2); font-style: italic; }

.db-pagination { display: flex; justify-content: center; gap: 6px; padding: 0.6rem; }
.db-pagination button {
  font-family: var(--f-jp); font-size: 0.65rem;
  background: transparent; border: 1px solid var(--b0);
  color: var(--t1); padding: 4px 10px; border-radius: 3px;
  cursor: pointer;
}
.db-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.db-pagination button:hover:not(:disabled) { color: var(--go); border-color: var(--b2); }

/* CRAFTING / DISENCHANT cards (.de-card from crafting.js) */
#forge-card-grid, #disenchant-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding: 4px;
}
/* Forge layout: card-select on left, anvil/result on right */
#crafting-layout, #crafting-layout-de {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  padding: 0 1rem;
}
@media (max-width: 768px) {
  #crafting-layout, #crafting-layout-de { grid-template-columns: 1fr; }
}
#forge-select-panel, #disenchant-panel,
#forge-result-panel {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0.9rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  min-width: 0;
}
#forge-select-panel h3, #disenchant-panel h3 {
  font-family: var(--f-jp); font-size: 0.75rem;
  letter-spacing: 0.12em; color: var(--t1);
  margin: 0 0 0.4rem;
}
#forge-filters, #disenchant-filters {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.forge-clear-btn {
  font-family: var(--f-jp); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; background: transparent;
  color: var(--t1); border: 1px solid var(--b0);
  padding: 4px 10px; border-radius: 3px; cursor: pointer;
}
.forge-clear-btn:hover { color: var(--cr); border-color: var(--b1); }
.forge-sel-info { font-family: var(--f-jp); font-size: 0.65rem; color: var(--t1); flex: 1; }

#crafting-top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.7rem 1rem; margin-bottom: 0.8rem;
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l);
}
#dust-balance-display {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-jp); font-size: 1.05rem; font-weight: 700;
  color: #88ccff;
}
.dust-icon { color: #88ccff; }
.dust-icon-img { width: 28px; height: 36px; object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(136,204,255,0.45)); }
.dust-icon-img-sm { width: 16px; height: 20px; object-fit: contain;
  vertical-align: middle; margin: 0 3px; }

/* Forge result panel (the anvil + reveal area) */
.forge-anvil {
  position: relative; width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.forge-rune-circle {
  width: 100%; height: 100%; max-width: 200px; max-height: 200px;
  border-radius: 50%; border: 2px solid var(--b1);
  background: radial-gradient(circle, rgba(192,39,45,0.08), transparent 70%);
  position: relative; overflow: hidden;
  margin: 0 auto;
}
.forge-rune-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.2), transparent 60%);
  animation: forgeRuneGlow 3s ease-in-out infinite;
}
@keyframes forgeRuneGlow { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.forge-rune-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: var(--go);
}
.forge-rune-art {
  width: 70%; height: 70%; object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(201,168,76,0.45));
  transition: filter 0.35s, transform 0.35s;
}
.forge-rune-active .forge-rune-art {
  filter: drop-shadow(0 0 22px rgba(201,168,76,0.85)) brightness(1.15);
  transform: scale(1.05);
}
.forge-embers { position: absolute; inset: 0; pointer-events: none; }

.forge-info { display: flex; flex-direction: column; gap: 6px; }
.forge-rarity-badge {
  display: inline-block; padding: 4px 12px;
  font-family: var(--f-jp); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 3px;
}
.forge-cost-row {
  font-family: var(--f-jp); font-size: 0.85rem;
  color: var(--t0); text-align: center;
}
.forge-balance { font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1); text-align: center; }
.forge-result-msg {
  font-family: var(--f-body); font-size: 0.8rem;
  color: var(--t1); text-align: center; padding: 0.5rem 0;
}

#disenchant-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'actions confirm'
    'preview preview';
  gap: 0.65rem 0.9rem; align-items: center;
  padding: 0.8rem 0.2rem 0.4rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--b0);
  position: sticky; bottom: 0;
  background: var(--s1);
  z-index: 2;
}
.de-footer-actions {
  grid-area: actions;
  display: flex; gap: 0.4rem; flex-wrap: wrap;
}
#select-all-de-btn, #select-dupes-de-btn, #unselect-all-de-btn {
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--t1);
  border: 1px solid var(--b0); border-radius: var(--r);
  padding: 0.45rem 0.85rem;
  cursor: pointer; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#select-all-de-btn:hover, #select-dupes-de-btn:hover {
  color: var(--go);
  border-color: rgba(201,168,76,0.5);
  background: rgba(201,168,76,0.08);
}
#unselect-all-de-btn:hover {
  color: #f0b0b3;
  border-color: rgba(192,39,45,0.55);
  background: rgba(192,39,45,0.1);
}
.de-footer-preview {
  grid-area: preview;
  font-family: var(--f-jp); font-size: 0.95rem; font-weight: 700;
  color: var(--t0); text-align: center;
  padding: 0.5rem 0.8rem;
  background: rgba(7,8,13,0.45);
  border: 1px solid var(--b0);
  border-left: 2px solid var(--go);
  border-radius: var(--r);
  letter-spacing: 0.03em;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  flex-wrap: wrap;
}
.de-footer-confirm {
  grid-area: confirm;
  justify-self: end;
  min-width: 200px;
}
#confirm-disenchant-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.5);
}
#de-total-dust { color: #88ccff; font-weight: 700; }

@media (max-width: 640px) {
  #disenchant-footer {
    grid-template-columns: 1fr;
    grid-template-areas: 'actions' 'preview' 'confirm';
  }
  .de-footer-actions { justify-content: center; }
  .de-footer-confirm { justify-self: stretch; min-width: 0; }
}
.de-card {
  background: var(--s2);
  border: 1px solid var(--b0);
  border-radius: var(--r);
  padding: 4px;
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  contain: layout style;
}
.de-card:hover { border-color: var(--b2); transform: translateY(-2px); }
.de-card.selected { border-color: var(--go); box-shadow: 0 0 0 1px var(--go); }
.de-card-art {
  width: 100%; aspect-ratio: 1;
  border-radius: 2px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--s3);
}
.de-card-img { width: 100%; height: 100%; object-fit: cover; }
.de-card-name {
  font-family: var(--f-jp); font-size: 0.65rem; font-weight: 600;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.de-qty {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  background: rgba(0,0,0,0.7); color: var(--go);
  font-family: var(--f-jp); font-size: 0.6rem; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
}
.forge-check {
  position: absolute; top: 3px; left: 3px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: var(--s0);
  display: flex; align-items: center; justify-content: center;
}

/* Forge reveal modal */
.forge-reveal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 1rem;
}
.forge-reveal-box {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--go);
  border-radius: var(--r-l); padding: 2rem;
  max-width: 400px; width: 100%; text-align: center;
  position: relative;
}
.forge-reveal-flash {
  position: absolute; inset: 0;
  border-radius: var(--r-l); pointer-events: none;
  animation: forgeRevealFlash 0.6s ease-out;
}
@keyframes forgeRevealFlash {
  0% { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.5); }
}
.forge-reveal-card { position: relative; z-index: 1; }
.forge-reveal-art {
  width: 200px; aspect-ratio: 1; margin: 0 auto;
  border-radius: var(--r-l); overflow: hidden;
}
.forge-reveal-img { width: 100%; height: 100%; object-fit: cover; }
.forge-reveal-name { font-family: var(--f-jp); font-size: 1.1rem; font-weight: 700; margin: 0.5rem 0 0.2rem; }
.forge-reveal-rarity {
  font-family: var(--f-jp); font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.forge-reveal-desc { font-family: var(--f-body); font-size: 0.85rem; color: var(--t1); margin: 0.5rem 0; }
.forge-reveal-close {
  margin-top: 1.25rem;
  font-family: var(--f-jp); font-size: 0.75rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); border: 1px solid var(--b1);
  padding: 0.65rem 1.6rem; border-radius: var(--r);
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.forge-reveal-close:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(192, 39, 45, 0.35); }
.forge-reveal-close:active { transform: translateY(0); filter: brightness(0.95); }

.forge-cost-total { color: var(--go); font-weight: 700; }
.forge-btn {
  font-family: var(--f-jp); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); border: 1px solid var(--b1);
  padding: 0.6rem 1.2rem; border-radius: var(--r);
  cursor: pointer;
}
.forge-btn:hover:not(:disabled) { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }
.forge-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── 31. SELECT/INPUT NORMALIZATION ──────────────────────────────────────
   Selects inherit the unified input rule above. Here we only add the
   custom caret glyph (appearance:none hides the native arrow). */
select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--t1) 50%),
    linear-gradient(135deg, var(--t1) 50%, transparent 50%);
  background-position: calc(100% - 14px) 54%, calc(100% - 9px) 54%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option {
  background: var(--s2); color: var(--t0);
  font-family: var(--f-jp); padding: 6px;
}


/* ══════════════════════════════════════════════════════════════════════════
   32. CATCH-UP PASS — classes used by JS/HTML that weren't styled during
   the initial rewrite. Grouped by feature. Keep rules terse.
   ══════════════════════════════════════════════════════════════════════════ */

/* (game-over rules consolidated earlier in the game-screen section — don't
   duplicate them here, the inline style.display='flex' mechanism is fragile
   to overrides.) */

/* ── Level-Up Modal ────────────────────────────────────────────────────── */
/* JS creates <div id="levelup-modal" class="lu-overlay"> wrapping .lu-box */
.lu-overlay, #levelup-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: radial-gradient(ellipse at center, rgba(10,8,20,0.88), rgba(0,0,0,0.97));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: overlayFade 0.3s ease-out;
}
.lu-box {
  background: radial-gradient(ellipse at top, rgba(201,168,76,0.12), var(--s1));
  border: 1px solid var(--b0); border-top: 3px solid var(--go);
  border-radius: var(--r-l); padding: 2rem 2.2rem;
  max-width: 520px; width: 92vw; text-align: center;
  position: relative; overflow: hidden;
  box-shadow: 0 0 48px rgba(201,168,76,0.2);
  animation: gmModalIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}
.lu-particles {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,168,76,0.18), transparent 6%),
    radial-gradient(circle at 80% 40%, rgba(201,168,76,0.15), transparent 5%),
    radial-gradient(circle at 40% 80%, rgba(244,211,94,0.1), transparent 5%);
  animation: mysteryGlow 3s ease-in-out infinite;
}
.lu-title {
  font-family: var(--f-jp); font-size: 1rem; color: var(--go);
  letter-spacing: 0.25em; text-transform: uppercase;
  margin-top: 0.4rem;
  text-shadow: 0 0 16px rgba(201,168,76,0.4);
}
.lu-subtitle {
  font-family: var(--f-body); color: var(--t1); font-size: 0.92rem;
  margin: 0.3rem 0 1rem;
}
.lu-level-number {
  font-family: var(--f-jp); font-size: 4rem; font-weight: 900;
  color: var(--go); line-height: 1;
  text-shadow: 0 0 40px rgba(201,168,76,0.6), 0 0 16px rgba(244,211,94,0.4);
  margin-bottom: 0.2rem;
}
/* Rewards = vertical stack of .lu-level-group blocks (one per level gained) */
.lu-rewards {
  display: flex; flex-direction: column; gap: 0.7rem;
  margin: 0.6rem 0 1rem;
  max-height: 40vh; overflow-y: auto; padding-right: 4px;
}
.lu-level-group {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--b0);
  border-left: 3px solid var(--go);
  border-radius: var(--r);
  padding: 0.7rem 0.9rem;
  text-align: left;
}
.lu-level-label {
  font-family: var(--f-jp); font-size: 0.75rem;
  color: var(--go); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.lu-reward-item {
  display: flex; align-items: center; gap: 10px;
  padding: 0.4rem 0.6rem; margin-bottom: 4px;
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: 3px;
  font-family: var(--f-body); font-size: 0.88rem;
  color: var(--t0);
}
.lu-reward-item:last-child { margin-bottom: 0; }
.lu-reward-item img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.lu-reward-icon {
  font-size: 1.2rem; line-height: 1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px;
}
.lu-close-btn {
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.8rem;
  letter-spacing: 0.1em; padding: 0.6rem 2rem;
  border: 1px solid var(--b1); border-radius: var(--r); cursor: pointer;
  margin-top: 0.5rem;
}
.lu-close-btn:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }

/* ── Game History Modal ──────────────────────────────────────────────────
   Modal = wider than the lobby block, so it gets its own grid template.
   Header + every row use the IDENTICAL columns so labels line up with
   data. Scoped under .gh-modal-box so lobby .gh-header/.gh-row aren't
   affected. */
.gh-modal-box {
  background: var(--s1); border: 1px solid var(--b0); border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.4rem; max-width: 820px; width: 94vw;
  max-height: 82vh; overflow-y: auto;
  animation: gmModalIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2);
  position: relative;
}
.gh-modal-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; }
.gh-modal-box .gh-header,
.gh-modal-list > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.4fr) 90px 70px 80px 110px;
  gap: 10px; align-items: center;
  padding: 0.6rem 0.9rem;
  font-family: var(--f-body); font-size: 0.82rem;
  box-sizing: border-box;
}
.gh-modal-box .gh-header {
  background: var(--s2);
  border: 1px solid var(--b0);
  border-top: 1px solid rgba(192,39,45,0.3);
  border-radius: var(--r);
  font-family: var(--f-jp); font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cr); padding: 0.7rem 0.9rem;
  position: sticky; top: 0; z-index: 2;
  margin-bottom: 0.4rem;
}
.gh-modal-list > div {
  background: var(--s2);
  border: 1px solid var(--b0);
  border-radius: var(--r);
  color: var(--t0);
  transition: background 0.15s, border-color 0.15s;
}
.gh-modal-list > div:hover {
  background: rgba(22,14,16,0.85);
  border-color: rgba(192,39,45,0.35);
}
.gh-modal-list .gh-result,
.gh-modal-box .gh-header .gh-result {
  font-family: var(--f-jp); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-align: center;
  padding: 4px 0; border-radius: 3px;
}
.gh-modal-list .gh-result.win  { background: rgba(74,159,212,0.16);  color: #8bbed4; }
.gh-modal-list .gh-result.loss { background: rgba(192,39,45,0.2);    color: #e08080; }
.gh-modal-list .gh-result.draw { background: rgba(201,168,76,0.16);  color: var(--go); }
.gh-modal-list .gh-opponent {
  color: var(--t0); font-family: var(--f-jp);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gh-modal-list .gh-mode,
.gh-modal-list .gh-time,
.gh-modal-list .gh-when { color: var(--t1); font-family: var(--f-jp); font-size: 0.76rem; }
.gh-modal-list .gh-rp   { color: var(--go); font-family: var(--f-jp); font-weight: 700; text-align: right; }

@media (max-width: 640px) {
  .gh-modal-box .gh-header,
  .gh-modal-list > div {
    grid-template-columns: 70px 1fr 70px 80px;
    gap: 6px; padding: 0.5rem 0.6rem;
  }
  .gh-modal-box .gh-header .gh-rp,
  .gh-modal-box .gh-header .gh-when,
  .gh-modal-list > div .gh-rp,
  .gh-modal-list > div .gh-when { display: none; }
}

/* Landing page styles are INLINE in index.html (head <style> block) — they
   own: .hero-*, .stats-bar*, .section-*, .features*, .feature-*, .classes-*,
   .class-*, .economy-*, .ticker-*, .lbp-*, .hf-footer, .footer-*,
   .payment-logos-img. Do NOT duplicate them here; app.css overrides inline
   <style> because it loads after, and that's what just broke the landing
   page's portraits + layout. */
.class-emoji-fallback, .cc-emoji-fallback { font-size: 2rem; display: inline-block; }
.board-fx-lava-1, .board-fx-lava-2 { inset: 0; opacity: 0.04; background: radial-gradient(ellipse at 50% 100%, rgba(255,100,30,0.3), transparent 60%); }

/* ── Lobby: Signs modifiers — JUST color accents on the inner .sign-board;
   the outer .tvn-sign is already styled as a panel in section 12. */
.sign-ranked    .sign-board { border-top: 2px solid var(--go); }
.sign-tournament .sign-board { border-top: 2px solid var(--purple); }
.sign-casual    .sign-board { border-top: 2px solid var(--cr); }
.sign-ai        .sign-board { border-top: 2px solid var(--cr); }

.quest-item {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.quest-label-daily, .quest-label-weekly, .quest-label-ach {
  display: inline-block; padding: 2px 8px;
  font-family: var(--f-jp); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 10px; align-self: flex-start;
}
.quest-label-daily  { background: rgba(74,159,212,0.15); color: #7cc0e5; }
.quest-label-weekly { background: rgba(155,89,182,0.15); color: #b490d4; }
.quest-label-ach    { background: rgba(201,168,76,0.15); color: var(--go); }


.queue-spinner {
  width: 36px; height: 36px; margin: 0 auto;
  border: 3px solid rgba(201,168,76,0.2);
  border-top-color: var(--go);
  border-radius: 50%;
  animation: qs-spin 0.8s linear infinite;
}
@keyframes qs-spin { to { transform: rotate(360deg); } }
.queue-waiting {
  font-family: var(--f-jp); font-size: 0.9rem; color: var(--t1);
  letter-spacing: 0.1em; text-align: center; margin-top: 0.6rem;
}

.nameplate-wrap {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center;
}
.nameplate-img {
  height: 28px; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(201,168,76,0.25));
}
.nameplate-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-jp); font-size: 0.78rem; color: var(--go);
  font-weight: 700; white-space: nowrap;
  padding: 0 1rem;
}
.player-name-plain {
  font-family: var(--f-jp); color: var(--t0);
}

.tvn-bg, .tvn-ceiling, .tvn-beam {
  position: absolute; pointer-events: none;
}
.tvn-bg { inset: 0; background: rgba(0,0,0,0.3); }
.tvn-ceiling { top: 0; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); }
.tvn-beam { width: 3px; background: rgba(201,168,76,0.08); }
.tvn-beam-1 { left: 15%; top: 0; bottom: 0; }
.tvn-beam-2 { left: 38%; top: 0; bottom: 0; }
.tvn-beam-3 { left: 62%; top: 0; bottom: 0; }
.tvn-beam-4 { left: 85%; top: 0; bottom: 0; }

.board-section, .board-preview {
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); padding: 0; margin: 1rem 0;
  overflow: hidden;
  max-width: 1200px; margin-left: auto; margin-right: auto;
}
.lbp-video, .lbp-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/9; object-fit: cover;
}

/* ── Collection + Marketplace: Pagination ──────────────────────────────── */
.cpag-info {
  font-family: var(--f-jp); font-size: 0.78rem; color: var(--t1);
  text-align: center; margin: 0.6rem 0;
}
.cpag-buttons {
  display: flex; gap: 4px; justify-content: center;
  align-items: center; margin: 0.8rem 0;
  flex-wrap: wrap;
}
.cpag-btn, .cpag-num, .cpag-prev, .cpag-next {
  background: var(--s2); border: 1px solid var(--b0);
  color: var(--t1); font-family: var(--f-jp); font-size: 0.78rem;
  padding: 0.4rem 0.7rem; border-radius: var(--r); cursor: pointer;
  min-width: 32px; text-align: center;
  transition: all 0.15s;
}
.cpag-btn:hover:not(:disabled), .cpag-num:hover:not(:disabled) {
  border-color: var(--b2); color: var(--t0);
}
.cpag-btn:disabled, .cpag-num:disabled { opacity: 0.4; cursor: not-allowed; }
.cpag-num.active {
  background: rgba(192,39,45,0.15); border-color: var(--cr);
  color: var(--go);
}
.cpag-ellipsis { color: var(--t2); padding: 0 4px; }

.mp-page-btn, .mp-page-num {
  background: var(--s2); border: 1px solid var(--b0);
  color: var(--t1); font-family: var(--f-jp); font-size: 0.78rem;
  padding: 0.4rem 0.7rem; border-radius: var(--r); cursor: pointer;
  min-width: 32px;
}
.mp-page-btn:hover:not(:disabled), .mp-page-num:hover:not(:disabled) {
  border-color: var(--b2); color: var(--t0);
}
.mp-page-num.active {
  background: rgba(192,39,45,0.15); border-color: var(--cr); color: var(--go);
}
.mp-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mp-txn-table {
  width: 100%; border-collapse: collapse;
  background: var(--s1); border: 1px solid var(--b0);
  border-radius: var(--r-l); overflow: hidden;
  font-family: var(--f-body); font-size: 0.82rem;
}
.mp-txn-table th, .mp-txn-table td {
  padding: 0.5rem 0.7rem; text-align: left;
  border-bottom: 1px solid var(--b0);
}
.mp-txn-table th {
  font-family: var(--f-jp); font-size: 0.65rem; color: var(--t1);
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--s2);
}

/* ── Shop: Panel visibility + Season Pass Missions ─────────────────────── */
.shop-tab-panel { min-height: 300px; }

.spm-challenge {
  background: var(--s2); border: 1px solid var(--b0);
  border-radius: var(--r); padding: 0.6rem 0.8rem;
  margin-bottom: 0.4rem;
  display: flex; flex-direction: column; gap: 4px;
}
.spm-ch-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
}
.spm-ch-name { font-family: var(--f-jp); color: var(--t0); font-size: 0.85rem; }
.spm-ch-reward { font-family: var(--f-jp); color: var(--go); font-size: 0.75rem; font-weight: 700; }
.spm-ch-status {
  font-family: var(--f-jp); font-size: 0.7rem; color: var(--t1);
  letter-spacing: 0.06em;
}
.spm-ch-bar {
  height: 5px; background: var(--s3);
  border-radius: 3px; overflow: hidden;
}
.spm-ch-fill {
  height: 100%;
  background: linear-gradient(to right, var(--cr), var(--go));
  transition: width 0.3s;
}

/* ── Crafting: Disenchant Layout ───────────────────────────────────────── */
.crafting-layout-de {
  display: grid; grid-template-columns: 1fr 300px;
  gap: 1.2rem; align-items: start;
}
@media (max-width: 900px) { .crafting-layout-de { grid-template-columns: 1fr; } }
.crafting-tab-body { min-height: 400px; }
.de-card-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--cr-dark), var(--cr));
  color: var(--t0); font-family: var(--f-jp); font-size: 0.78rem;
  letter-spacing: 0.08em; padding: 0.55rem;
  border: 1px solid var(--b1); border-radius: var(--r); cursor: pointer;
  margin-top: 0.5rem;
}
.de-card-btn:hover { background: linear-gradient(135deg, #8a1218, var(--cr-bright)); }
.de-card-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.de-dust-val {
  font-family: var(--f-jp); color: var(--go); font-weight: 700;
  font-size: 0.95rem;
}

/* ── In-Game: Choose One + Opp Hand + Deck Pile ────────────────────────── */
.choice-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem; margin-top: 1rem;
}
.choice-options > * {
  background: var(--s2); border: 1px solid var(--b1);
  border-radius: var(--r-l); padding: 1rem;
  cursor: pointer; text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.choice-options > *:hover { border-color: var(--go); transform: translateY(-3px); }

.opp-hand-card {
  width: 36px; height: 52px;
  background: linear-gradient(135deg, var(--cr-dark), #4a0608);
  border: 1px solid var(--cr); border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.deck-pile-card {
  position: absolute;
  width: 100%; height: 100%;
  background: inherit; border-radius: inherit;
}

/* ── Inventory Modal box (shares .inv-* item rules from the earlier block) ─ */
.inv-modal-box {
  background: var(--s1); border: 1px solid var(--b0); border-top: 2px solid var(--cr);
  border-radius: var(--r-l); padding: 1.4rem;
  max-width: 900px; width: 94vw; max-height: 86vh; overflow-y: auto;
  animation: gmModalIn 0.22s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}

/* ── Legal Modals ──────────────────────────────────────────────────────── */
.legal-modal-title {
  font-family: var(--f-jp); font-size: 1.2rem; color: var(--go);
  letter-spacing: 0.05em; margin: 0 0 0.8rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--b0);
}
.legal-modal-body {
  font-family: var(--f-body); font-size: 0.88rem;
  color: var(--t1); line-height: 1.7;
  max-height: 65vh; overflow-y: auto; padding-right: 0.5rem;
}
.legal-modal-body h3, .legal-modal-body h2 { color: var(--t0); font-family: var(--f-jp); }
.legal-updated {
  font-family: var(--f-body); color: var(--t2); font-size: 0.75rem;
  font-style: italic; margin-bottom: 0.6rem;
}

/* ── Cosmetic Extras ───────────────────────────────────────────────────── */
.cb-inner-frame {
  position: absolute; inset: 6%;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
  pointer-events: none;
}
/* ── Tournament detail modal ─────────────────────────────────────────────── */
.tournament-detail-box {
  max-width: 460px; width: 100%; text-align: left;
}
.tournament-detail-box .game-modal-title { text-align: center; margin-bottom: 0.3rem; }
.tm-desc {
  font-family: var(--f-body); color: var(--t1);
  font-size: 0.85rem; text-align: center;
  margin: 0 0 1rem;
}
.tm-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.8rem; margin-bottom: 1.2rem;
}
.tm-stat {
  background: rgba(7,8,13,0.55);
  border: 1px solid var(--b0);
  border-left: 2px solid rgba(192,39,45,0.45);
  border-radius: var(--r);
  padding: 0.6rem 0.8rem;
}
.tm-stat-label {
  font-family: var(--f-jp); font-size: 0.58rem;
  color: var(--t2); letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 0.3rem;
}
.tm-stat-value {
  font-family: var(--f-jp); font-size: 1rem; font-weight: 700;
  color: var(--go);
  display: inline-flex; align-items: center; gap: 4px;
}
.tm-stat-value.tm-stat-open { color: #4caf50; font-size: 0.9rem; letter-spacing: 0.08em; }
.tm-section-label {
  font-family: var(--f-jp); font-size: 0.6rem; font-weight: 700;
  color: var(--t2); letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.tm-section-body {
  font-family: var(--f-body); color: var(--t1);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.tm-rewards {
  list-style: none; margin: 0 0 0.4rem; padding: 0;
}
.tm-reward {
  font-family: var(--f-body); color: var(--t1);
  font-size: 0.84rem; line-height: 1.5;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--b0);
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.tm-reward:last-child { border-bottom: 0; }

/* ── Tournament lobby panel (modal from the lobby "View tournaments" sign) */
.tournament-panel-box {
  max-width: 680px; width: 95%;
  max-height: 85vh; overflow-y: auto;
  padding: 2rem 1.6rem 1.4rem;
}
.tournament-panel-box .game-modal-title { text-align: center; margin-bottom: 1rem; }
.tp-loading, .tp-error {
  font-family: var(--f-body); color: var(--t1);
  text-align: center; padding: 2.5rem 1rem;
}
.tp-error { color: var(--red); }
.tp-empty { text-align: center; }
.tp-empty-msg {
  font-family: var(--f-body); color: var(--t1);
  margin: 0 0 0.9rem;
}
.tp-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.8rem; margin-bottom: 0.5rem;
}
.tp-card-title {
  font-family: var(--f-jp); font-size: 0.9rem; font-weight: 700;
  color: var(--t0); letter-spacing: 0.04em;
}
.tp-card-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 0.6rem;
  font-family: var(--f-body); font-size: 0.85rem;
  color: var(--t1);
  padding: 0.25rem 0;
}
.tp-label {
  font-family: var(--f-jp); font-size: 0.62rem;
  color: var(--t2); letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tp-muted { color: var(--t2); }
.tp-badge {
  position: static; transform: none;
  padding: 2px 10px; font-size: 0.58rem;
  box-shadow: none;
  border: 1px solid rgba(201,168,76,0.5);
}
.tp-countdown-pill {
  font-family: var(--f-jp); font-size: 0.75rem;
  color: var(--go);
  background: rgba(7,8,13,0.55);
  border: 1px solid var(--b0);
  padding: 3px 10px; border-radius: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.tp-enter-btn { margin-top: 0.6rem; }
.tp-prize-title {
  font-family: var(--f-jp); font-size: 0.85rem; font-weight: 700;
  color: var(--go); letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.tp-rank {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-jp); font-size: 0.78rem;
  color: var(--t0); letter-spacing: 0.04em;
  width: 100px;
}
.tp-medal { width: 20px; height: 20px; object-fit: contain; }
.tp-medal-spacer { display: inline-block; width: 20px; }
.tp-reward {
  font-family: var(--f-body); font-size: 0.82rem;
  color: var(--t1); line-height: 1.5;
}

/* ── Tournament lobby status cards ───────────────────────────────────────── */
.tournament-status-card {
  background: var(--s1); border: 1px solid var(--b0);
  border-top: 2px solid var(--purple);
  border-radius: var(--r-l); padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.tournament-countdown {
  font-family: var(--f-jp); font-size: 1.2rem; color: var(--go);
  letter-spacing: 0.08em; text-align: center;
  padding: 0.5rem; background: var(--s2); border-radius: var(--r);
  margin: 0.5rem 0;
}
.tournament-prize-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--f-body); font-size: 0.85rem; margin-top: 0.6rem;
}
.tournament-prize-table td {
  padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--b0);
  color: var(--t0);
}
.tournament-prize-table td:first-child { color: var(--go); font-family: var(--f-jp); }

/* ── Rental cards ──────────────────────────────────────────────────────── */
.rent-badge {
  display: inline-block; padding: 2px 8px;
  background: rgba(74,159,212,0.2); border: 1px solid rgba(74,159,212,0.5);
  color: #7cc0e5; font-family: var(--f-jp); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase; border-radius: 3px;
}
/* Rent-shop status pill — identical footprint + typography to the
   canonical button plate so OWNED/RENTED/RENT all look the same. */
.mp-status-pill {
  width: 100%; box-sizing: border-box;
  padding: 0.6rem 1.4rem; min-height: 40px;
  font-family: var(--f-jp); font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
  border: 1px solid;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  border-radius: 0;
}
.mp-status-owned {
  background: linear-gradient(135deg, rgba(64,184,64,0.14), rgba(64,184,64,0.28), rgba(64,184,64,0.14));
  border-color: rgba(64,184,64,0.55);
  color: #60c860;
  box-shadow: 0 0 12px rgba(64,184,64,0.18);
}
.mp-status-rented {
  background: linear-gradient(135deg, rgba(74,159,212,0.15), rgba(74,159,212,0.3), rgba(74,159,212,0.15));
  border-color: rgba(74,159,212,0.55);
  color: #7cc0e5;
  box-shadow: 0 0 12px rgba(74,159,212,0.18);
}
.rent-countdown {
  font-family: var(--f-jp); font-size: 0.72rem; color: var(--t1);
  margin-top: 2px;
}

/* ── Utility ───────────────────────────────────────────────────────────── */
.btn-secondary {
  background: rgba(201,168,76,0.1); border: 1px solid var(--b2);
  color: var(--go); font-family: var(--f-jp); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.5rem 1rem; border-radius: var(--r); cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary:hover { background: rgba(201,168,76,0.22); border-color: var(--go); }
.btn-sm-outline {
  background: transparent; border: 1px solid var(--b1);
  color: var(--t1); font-family: var(--f-jp); font-size: 0.7rem;
  letter-spacing: 0.08em; padding: 0.4rem 0.8rem;
  border-radius: var(--r); cursor: pointer;
}
.btn-sm-outline:hover { color: var(--go); border-color: var(--go); }

.empty-state {
  text-align: center; padding: 2.5rem 1rem; color: var(--t1);
}
.empty-state-icon {
  font-size: 2.5rem; color: var(--t2); margin-bottom: 0.6rem;
  opacity: 0.6;
}
.empty-state-msg {
  font-family: var(--f-body); font-size: 0.9rem; color: var(--t1);
  font-style: italic; line-height: 1.5;
}

.ornament {
  text-align: center; font-size: 1rem; color: var(--cr-bright);
  letter-spacing: 1em; margin: 0.8rem 0; opacity: 0.6;
}
.music-vol-icon { font-size: 1rem; color: var(--t1); }

.reveal {
  animation: mysteryReveal 0.6s ease-out both;
}

/* ── Nav extras ────────────────────────────────────────────────────────── */
.nav-tokens {
  display: inline-flex; align-items: center; gap: 4px;
}
.nav-label {
  font-family: var(--f-jp); font-size: 0.7rem; letter-spacing: 0.08em;
}

/* ── Shop tab panels (display control done by JS via style.display) ────── */
.shop-tab-panel.active { display: block; }

/* ── Nav currency (currency items in the sidebar) ──────────────────────── */
.nav-currency {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-jp); color: var(--go); font-weight: 700;
  padding: 4px 8px; border-radius: var(--r); cursor: pointer;
}
.nav-currency:hover { background: rgba(201,168,76,0.08); }
.nav-token-icon { width: 18px; height: 18px; object-fit: contain; }

/* ══════════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON LANGUAGE
   Every clickable CTA across the app shares the same typography + size +
   clip-path + hover/active behavior. Per-class styles still set bg/border
   color; this rule forces consistency on everything else. High-specificity
   so it wins against legacy per-class rules.
   ══════════════════════════════════════════════════════════════════════════ */
.btn,
.btn-sm,
.btn-primary,
.btn-secondary,
.btn-danger,
.nav-cta,
.btn-claim,
.btn-buy-slot,
.btn-save-deck,
.btn-token-buy,
.btn-bundle-buy,
.btn-pack-close,
.btn-custom-gold,
.btn-confirm,
.btn-cancel,
.btn-rematch,
.btn-modal,
.mp-buy-btn,
.mp-sell-btn,
.mystery-collect-btn,
.forge-btn,
.buy-cosmetic-btn,
.equip-btn,
.inv-equip-btn,
.prestige-preview-btn,
.lp-btn-primary,
.lp-btn-ghost,
.lp-btn-lg,
.end-turn-btn,
.game-over-box button,
.payment-card-btn,
.download-invoice-btn,
.mp-tab,
.lb-tab,
.auth-tab,
.crafting-tab,
.shop-tab,
#confirm-disenchant-btn {
  font-family: var(--f-jp) !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}
/* Canonical primary-CTA plate — crimson gradient + parallelogram clip + glow.
   Applied to the most prominent action buttons site-wide. */
.btn-primary-plate,
.game-over-box button,
.nav-cta,
.mp-buy-btn:not(.mp-sell-btn),
.btn-bundle-buy,
.buy-cosmetic-btn,
.equip-btn,
.inv-equip-btn,
.prestige-preview-btn,
.forge-btn,
.btn-pack-close,
.mystery-collect-btn,
.btn-token-buy,
#confirm-disenchant-btn {
  background: linear-gradient(135deg, var(--cr-dark), #b02028, var(--cr-dark)) !important;
  color: var(--parchment) !important;
  border: 1px solid rgba(192,39,45,0.5) !important;
  min-height: 40px;
  padding: 0.6rem 1.4rem;
  font-size: 0.72rem;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  box-shadow: 0 0 14px rgba(192,39,45,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: 0;
}
#confirm-disenchant-btn:hover:not(:disabled),
.btn-primary-plate:hover:not(:disabled),
.game-over-box button:hover,
.nav-cta:hover,
.mp-buy-btn:not(.mp-sell-btn):hover:not(:disabled),
.btn-bundle-buy:hover:not(:disabled),
.buy-cosmetic-btn:hover:not(:disabled),
.equip-btn:hover:not(:disabled),
.inv-equip-btn:hover:not(:disabled),
.prestige-preview-btn:hover:not(:disabled),
.forge-btn:hover:not(:disabled),
.btn-pack-close:hover,
.mystery-collect-btn:hover,
.btn-token-buy:hover {
  background: linear-gradient(135deg, #8a1218, #d02838, #8a1218) !important;
  box-shadow: 0 0 24px rgba(192,39,45,0.42), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transform: translateY(-1px);
}
.btn-primary-plate:active,
.game-over-box button:active,
.nav-cta:active,
.btn-bundle-buy:active,
.buy-cosmetic-btn:active,
.equip-btn:active,
.inv-equip-btn:active,
.prestige-preview-btn:active { transform: translateY(0); }
.btn-primary-plate:disabled,
.mp-buy-btn:disabled,
.btn-bundle-buy:disabled,
.buy-cosmetic-btn:disabled,
.equip-btn:disabled,
.inv-equip-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Gold variant — used for sell/secondary actions */
.mp-sell-btn {
  background: linear-gradient(135deg, rgba(201,168,76,0.18), rgba(201,168,76,0.5), rgba(201,168,76,0.18)) !important;
  color: var(--go) !important;
  border: 1px solid rgba(201,168,76,0.6) !important;
  min-height: 40px;
  padding: 0.6rem 1.4rem;
  font-size: 0.72rem;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  box-shadow: 0 0 12px rgba(201,168,76,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  border-radius: 0;
}
.mp-sell-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(201,168,76,0.35), rgba(201,168,76,0.7), rgba(201,168,76,0.35)) !important;
  box-shadow: 0 0 22px rgba(201,168,76,0.4) !important;
  transform: translateY(-1px);
}

/* ── 31. MOBILE OPTIMIZATION (single authoritative block) ─────────────────
   Consolidated fixes for battle + all app screens at tablet/phone sizes.
   Keep additions below 768 / 480 rather than editing scattered queries. */

@media (max-width: 768px) {
  /* ── BATTLE SCREEN — fully restructured for portrait phones ──────────
     Mobile layout (top→bottom):
       [opp HUD bar] [opp hand strip] [opp board=scroll] [center action bar]
       [my board=scroll] [my HUD bar] [my hand]
     Center action bar holds turn timer + END TURN button so they stop
     overlapping mana gems / hero rows. Concede docks to top-right corner.
     Page-guide "?" is hidden during battle so it doesn't sit on top of cards. */
  #screen-game { overflow: hidden; }
  #screen-game.active { height: calc(100dvh - var(--nh)); min-height: 0; }
  .game-layout { padding: 0; }

  /* Hide chrome that floats over battle on mobile */
  #screen-game.active ~ .guide-help-btn,
  body:has(#screen-game.active) .guide-help-btn { display: none !important; }
  body.nav-sidebar #screen-game.active ~ .game-perks-indicator,
  body:has(#screen-game.active) .game-perks-indicator { left: 8px !important; top: 8px !important; }

  /* Game board grid: opp(1fr) | divider/action-bar(auto) | my(1fr) | hand(auto) */
  .game-board {
    grid-template-rows: minmax(140px, 1fr) auto minmax(140px, 1fr) auto;
    padding: 0;
    gap: 0;
  }
  .player-zone { padding: 2px 4px; gap: 2px; }
  .opp-zone { padding-top: 4px; }
  .my-zone  { padding-bottom: 2px; }

  /* ── Hero rows — flat 2-col bar (left: portrait+stats, right: counts) */
  .hero-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 8px;
    min-height: 56px;
    gap: 6px;
    grid-template-columns: none !important;
  }
  .hero-row .hero-unit {
    grid-column: auto !important;
    justify-self: auto !important;
    display: flex; align-items: center; gap: 8px;
    flex: 0 1 auto; min-width: 0;
  }
  .hero-row .hero-info-right,
  .hero-row .mana-info {
    grid-column: auto !important;
    justify-self: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.6rem;
    flex: 0 1 auto;
  }

  /* Mana gems become a tight horizontal cluster */
  .mana-gems {
    max-width: 84px;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .mana-gem { width: 8px; height: 8px; }
  .mana-txt { font-size: 0.7rem; min-width: 26px; text-align: right; }
  .my-hand-cnt-lbl, .opp-hand-cnt-lbl,
  .my-deck-cnt-lbl, .opp-deck-cnt-lbl { font-size: 0.55rem; white-space: nowrap; }
  .deck-pile, .deck-pile-sm { width: 22px; height: 30px; font-size: 0.55rem; }

  /* Portrait + HP + hero-power compact */
  .game-hero-portrait { width: 50px; height: 50px; font-size: 20px; border-width: 2px; }
  .hero-portrait-wrap { flex-shrink: 0; }
  .hp-val, .hp-overlay { width: 22px; height: 22px; font-size: 0.7rem; bottom: -3px; right: -3px; }
  .armor-badge { width: 16px; height: 16px; font-size: 0.5rem; top: -3px; right: -3px; }
  .hero-power-circle { width: 32px; height: 32px; font-size: 0.65rem; flex-shrink: 0; }
  .hp-cost { width: 14px; height: 14px; font-size: 0.5rem; }

  /* Concede: small icon at fixed top-right of the game screen */
  .concede-btn {
    position: fixed !important;
    top: calc(var(--nh) + 6px); right: 8px;
    z-index: 70;
    font-size: 0.55rem; padding: 4px 8px;
    background: rgba(15,5,5,0.92);
    border: 1px solid rgba(192,39,45,0.4);
    color: #ff8070;
    border-radius: 4px;
  }

  /* ── Board zone: single horizontal-scroll row (no wrapping) ─────────── */
  .board-zone {
    padding: 4px 6px; min-height: 92px; gap: 5px;
    flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: thin;
  }
  .board-zone::-webkit-scrollbar { height: 3px; }
  .game-minion { width: 58px; height: 84px; font-size: 0.58rem; flex-shrink: 0; }
  .game-minion .minion-name { font-size: 0.52rem; }
  .m-atk, .m-hp { width: 20px; height: 20px; font-size: 0.72rem; }

  /* ── Center action bar (replaces absolute end-turn-panel) ───────────── */
  /* Hide the empty divider — we use end-turn-panel as the visible action row */
  .game-board > .board-divider { display: none !important; }

  /* End-turn-panel becomes the row-2 horizontal action bar */
  .game-board > .end-turn-panel {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    position: static !important;
    transform: none !important;
    right: auto !important; top: auto !important; bottom: auto !important;
    width: 100%;
    min-height: 44px;
    padding: 4px 8px;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end;
    gap: 8px;
    background: linear-gradient(to right, rgba(192,39,45,0.04), rgba(192,39,45,0.14), rgba(192,39,45,0.04));
    border-top: 1px solid rgba(192,39,45,0.15);
    border-bottom: 1px solid rgba(192,39,45,0.15);
  }
  .end-turn-panel .turn-indicator {
    font-size: 0.6rem; flex: 1 1 auto;
    text-align: left; padding-left: 4px;
  }
  .end-turn-panel .turn-timer-text { font-size: 0.6rem; min-width: 18px; text-align: center; }
  .end-turn-panel .turn-timer-bar  { width: 56px; height: 5px; }
  .end-turn-panel .end-turn-btn {
    padding: 0.5rem 0.9rem; font-size: 0.65rem;
    min-height: 36px; flex-shrink: 0;
    letter-spacing: 0.06em;
  }

  /* ── Hand area ──────────────────────────────────────────────────────── */
  .hand-area, #my-hand { padding: 2px 4px; height: 110px; min-height: 0; }
  .hand-area .hand-card, #my-hand .hand-card { width: 58px; height: 84px; font-size: 0.58rem; }

  /* Opponent hand strip — small card backs row */
  .opp-hand-area { height: 32px; }
  .opp-hand-area > * { transform: scale(0.55); transform-origin: top center; }

  /* Game log toggle + floating panel */
  .game-log-toggle { left: 8px !important; top: 10px !important; width: 32px; height: 32px; font-size: 14px; }
  body.nav-sidebar .game-log-toggle { left: 8px !important; }
  .game-log-float {
    width: 92vw !important; max-width: 92vw !important;
    left: 4vw !important; right: 4vw !important;
    top: calc(var(--nh) + 6px) !important; max-height: 55vh;
  }
  body.nav-sidebar .game-log-float { left: 4vw !important; }

  /* Game over overlay */
  .game-over-box {
    width: 94vw !important; max-width: 94vw !important;
    max-height: 88vh; overflow-y: auto;
    padding: 1rem !important;
  }
  #game-over-title, .game-over-title { font-size: 1.1rem; }
  .game-over-box button { width: 100%; min-height: 44px; margin: 4px 0; font-size: 0.72rem; }
  #game-over-rewards, .game-over-rewards { font-size: 0.78rem; }

  /* Game hint banner stays inside viewport */
  body.nav-sidebar .game-hint { left: 8px !important; right: 8px !important; max-width: none; }

  /* Hero-power tooltip stays on screen */
  .hp-tooltip { min-width: 140px; max-width: 80vw; font-size: 0.65rem; }

  /* Kill heavy decorative FX on small viewports */
  .board-fx-candle, .board-fx-lava, .board-fx-torchlight, .board-fx-fog,
  .board-fx-smoke, .board-fx-lightning, .board-fx-rune { display: none; }

  /* ── Nav / global ──────────────────────────────────────────────────────
     Mobile top-bar layout (logged-in app shell):
        [Logo] ……… [Currency strip] [Logout] [Burger]
     Username, level, music are hidden on mobile to fit the viewport. */
  body.nav-sidebar nav {
    gap: 0.4rem;
    justify-content: flex-start !important;
  }
  body.nav-sidebar .nav-logo      { order: 0; flex: 0 0 auto; }
  body.nav-sidebar #nav-logged-in { order: 1; flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  body.nav-sidebar .burger-btn    { order: 2; flex: 0 0 auto; margin-left: 4px; }

  /* Logo: shrink so currency has room */
  body.nav-sidebar .nav-logo-img {
    height: 28px !important; max-width: 90px;
    object-fit: contain; object-position: left center;
  }

  /* Hide non-essential items on mobile (still reachable on desktop) */
  body.nav-sidebar #music-ctrl,
  body.nav-sidebar #nav-level,
  body.nav-sidebar #nav-username { display: none !important; }

  /* nav-logged-in: row, no border/padding inherited from desktop sidebar */
  body.nav-sidebar #nav-logged-in {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.4rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden;
  }

  /* Currency strip: nowrap, compact, icons + numbers only */
  body.nav-sidebar .nav-user-info {
    flex-wrap: nowrap !important;
    gap: 0.3rem !important;
    font-size: 0.7rem;
    overflow: hidden;
    min-width: 0;
  }
  body.nav-sidebar .nav-currency {
    padding: 4px 6px !important;
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 4px;
  }
  body.nav-sidebar .nav-token-icon,
  body.nav-sidebar .nav-dust-icon { width: 14px !important; height: 14px !important; }

  /* Logout becomes a compact icon-style button */
  body.nav-sidebar .nav-logout-btn {
    padding: 0.3rem 0.55rem;
    font-size: 0.55rem;
    flex-shrink: 0;
  }

  /* ── Card grids — 2 columns on phones for dense content ────────────── */
  #collection-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; padding: 0 0.4rem; }
  .shop-items-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }
  .tokens-bundle-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .marketplace-grid, #marketplace-grid, .mp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }

  /* Deck builder stacks list under grid on narrow viewports */
  .deck-builder-layout, #deck-builder-layout { grid-template-columns: 1fr !important; gap: 0.6rem; }

  /* ── Lobby ────────────────────────────────────────────────────────── */
  .lobby-layout, #lobby-layout { grid-template-columns: 1fr !important; gap: 0.6rem; }
  .qb-quests { max-height: 280px; }

  /* ── Modals ───────────────────────────────────────────────────────── */
  .modal-box, .ph-box, .ranked-card, .pack-modal-box, .mystery-box-box {
    width: 94vw !important; max-width: 94vw !important;
    max-height: 88vh; overflow-y: auto;
    padding: 0.9rem !important;
  }
  .modal-title, .ph-header { font-size: 0.9rem; }
}

@media (max-width: 480px) {
  /* Very small phones — keep 2 columns for card-style grids so cards stay
     bite-sized; full-width 1-col causes "one giant card per scroll" feel. */
  #collection-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.4rem; padding: 0 0.3rem; }
  .marketplace-grid, #marketplace-grid, .mp-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.4rem; }
  .shop-items-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.4rem; }
  .tokens-bundle-grid { grid-template-columns: 1fr; }
  .pack-cards-grid { grid-template-columns: repeat(3, 1fr); }

  /* Battle: squeeze further on small phones */
  .game-board { grid-template-rows: minmax(118px, 1fr) auto minmax(118px, 1fr) auto; }
  .hero-row { min-height: 50px; padding: 3px 6px; gap: 5px; }
  .game-hero-portrait { width: 44px; height: 44px; font-size: 16px; }
  .hp-val, .hp-overlay { width: 20px; height: 20px; font-size: 0.6rem; }
  .hero-power-circle { width: 28px; height: 28px; font-size: 0.55rem; }
  .deck-pile, .deck-pile-sm { width: 20px; height: 28px; font-size: 0.5rem; }
  .mana-gems { max-width: 70px; gap: 1px; }
  .mana-gem { width: 7px; height: 7px; }
  .mana-txt { font-size: 0.62rem; }
  .my-hand-cnt-lbl, .opp-hand-cnt-lbl,
  .my-deck-cnt-lbl, .opp-deck-cnt-lbl { font-size: 0.5rem; }
  .board-zone { min-height: 80px; gap: 3px; padding: 3px 4px; }
  .game-minion { width: 52px; height: 76px; font-size: 0.52rem; }
  .game-minion .minion-name { font-size: 0.48rem; }
  .m-atk, .m-hp { width: 17px; height: 17px; font-size: 0.65rem; }
  .hand-area .hand-card, #my-hand .hand-card { width: 52px; height: 76px; font-size: 0.55rem; }
  .hand-area, #my-hand { height: 96px; min-height: 0; }
  .board-divider { min-height: 40px; padding: 3px 6px; gap: 6px; }
  .end-turn-btn { padding: 0.4rem 0.7rem; font-size: 0.6rem; min-height: 32px; }
  .turn-indicator { font-size: 0.55rem; }
  .turn-timer-text { font-size: 0.55rem; }
  .turn-timer-bar { width: 50px; height: 4px; }
  .opp-hand-area { height: 26px; }
  .opp-hand-area > * { transform: scale(0.5); }
  .concede-btn { font-size: 0.5rem; padding: 3px 6px; top: calc(var(--nh) + 4px); right: 6px; }
  .game-log-toggle { width: 30px; height: 30px; font-size: 13px; }

  /* Currency pills hide their label, icon + number only */
  .nav-currency .nav-label { display: none; }

  /* Ultra-narrow: shrink logo + currency further so all 3 currencies fit */
  body.nav-sidebar .nav-logo-img { height: 24px !important; max-width: 70px; }
  body.nav-sidebar .nav-currency { padding: 3px 5px !important; font-size: 0.65rem; gap: 3px; }
  body.nav-sidebar .nav-token-icon,
  body.nav-sidebar .nav-dust-icon { width: 12px !important; height: 12px !important; }
  body.nav-sidebar .nav-logout-btn { padding: 0.25rem 0.4rem; font-size: 0.5rem; }

  /* Toasts use full width */
  #toasts { left: 8px; right: 8px; width: auto; }
  .toast { font-size: 0.72rem; }

  /* Shop/deck footers stack */
  #disenchant-footer { padding: 0.6rem 0.1rem 0.3rem; }
}

/* ── 32. LANDSCAPE PHONE / SHORT-VIEWPORT BATTLE ────────────────────────────
   Covers phones rotated landscape (typical height 360–430px) and any device
   where the viewport is too short for the standard portrait layout.
   Applied only when width > height (landscape orientation). */
@media (max-height: 500px) and (orientation: landscape) {
  #screen-game.active {
    height: calc(100dvh - var(--nh));
    min-height: 0;
  }
  .game-board {
    grid-template-rows: minmax(66px, 1fr) 4px minmax(66px, 1fr) auto;
    padding: 1px;
  }
  .board-divider { height: 4px; }
  .player-zone { padding: 0.08rem 0.25rem; }
  .hero-row {
    grid-template-columns: auto 1fr auto;
    min-height: 46px;
    padding: 0.08rem 0.35rem;
    gap: 0.2rem;
  }
  .hero-row .hero-unit { grid-column: 1; justify-self: start; }
  .hero-row .hero-info-right,
  .hero-row .mana-info { grid-column: 3; justify-self: end; font-size: 0.6rem; }
  .game-hero-portrait { width: 40px; height: 40px; font-size: 15px; }
  .hero-power-circle { width: 26px; height: 26px; }
  .hp-val, .hp-overlay { width: 20px; height: 20px; font-size: 0.6rem; bottom: -3px; right: -3px; }
  .armor-badge { width: 15px; height: 15px; font-size: 0.48rem; top: -3px; right: -3px; }
  .concede-btn { padding: 1px 4px; font-size: 0.44rem; letter-spacing: 0; }
  .board-zone { min-height: 52px; padding: 2px 0.2rem; gap: 3px; }
  .game-minion { width: 50px; height: 70px; font-size: 0.52rem; }
  .game-minion .minion-name { font-size: 0.48rem; }
  .m-atk, .m-hp { width: 17px; height: 17px; font-size: 0.62rem; }
  .mana-txt { font-size: 0.62rem; }
  .mana-gem { width: 10px; height: 10px; }
  .mana-gems { gap: 2px; max-width: 90px; }
  .my-hand-cnt-lbl, .opp-hand-cnt-lbl,
  .my-deck-cnt-lbl, .opp-deck-cnt-lbl { font-size: 0.5rem; }
  .deck-pile, .deck-pile-sm { width: 20px; height: 28px; font-size: 0.55rem; }
  /* Hand area — shorter cards to fit the squeezed viewport */
  .hand-area, #my-hand { height: 78px; min-height: 0; }
  .hand-area .hand-card, #my-hand .hand-card { width: 50px; height: 70px; font-size: 0.52rem; }
  .opp-hand-area { height: 22px; min-height: 0; }
  .opp-hand-area > * { transform: scale(0.6); transform-origin: top center; }
  /* End-turn panel — above the hand */
  .end-turn-panel {
    position: absolute; right: 5px; top: auto;
    bottom: 82px; transform: none; gap: 2px;
  }
  .end-turn-btn { padding: 0.26rem 0.45rem; font-size: 0.52rem; }
  .turn-indicator { font-size: 0.48rem; }
  .turn-timer-text { font-size: 0.46rem; }
  .turn-timer-bar { width: 38px; height: 3px; }
  /* Suppress decorative FX */
  .board-fx-candle, .board-fx-lava, .board-fx-torchlight, .board-fx-fog,
  .board-fx-smoke, .board-fx-lightning, .board-fx-rune { display: none; }
}


/* ── 33. COMPREHENSIVE MOBILE PASS — ALL APP SCREENS ────────────────────────
   Single block consolidating mobile fixes for every non-game screen.
   Goal: zero horizontal scroll at 360–480px, all key actions reachable,
   touch targets ≥40px, no panel taller than viewport with hidden actions. */

@media (max-width: 768px) {

  /* ── Global shell ────────────────────────────────────────────────────── */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .screen-body { padding: 1rem 0.6rem; }
  .screen-header { padding: 1rem 0.8rem 0.7rem; }
  .screen-title { font-size: 1.1rem; }
  .screen-subtitle { font-size: 0.78rem; }

  /* Tighter form inputs (used everywhere) */
  input, select, textarea, .yk-select-btn, button { font-size: 16px; /* prevent iOS zoom */ }
  .form-group { gap: 4px; }

  /* ── LOBBY ──────────────────────────────────────────────────────────── */
  .tvn-layout { padding: 0.8rem 0.6rem; }
  .lobby-content { gap: 0.8rem; }
  .lobby-player-bar {
    padding: 0.7rem 0.8rem;
    gap: 0.4rem 0.7rem;
  }
  .lpb-identity { min-width: 0; flex: 1 1 100%; }
  .lpb-stats { width: 100%; gap: 0; justify-content: space-around; }
  .lpb-stat { padding: 0.15rem 0.4rem; min-width: 52px; }
  .lpb-stat-val { font-size: 0.85rem; }
  .lpb-stat-lbl { font-size: 0.5rem; letter-spacing: 0.08em; }
  #lobby-rank-bar { min-width: 0; width: 100%; }
  .lobby-active-perks { padding: 4px 6px; gap: 4px; }
  .perk-pill { font-size: 0.55rem; padding: 2px 5px; }
  .lobby-inventory-btn,
  .btn-secondary-ghost { font-size: 0.6rem; padding: 0.5rem 0.9rem; min-height: 40px; }

  .tvn-signs-rail { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .sign-board { padding: 0.7rem 0.4rem; }
  .sign-icon-img { width: 38px; height: 38px; }
  .sign-name { font-size: 0.78rem; }
  .sign-sub { font-size: 0.65rem; }

  .qb-header { padding: 0.5rem 0.7rem; }
  .qb-title { font-size: 0.62rem; }
  .qb-quests { padding: 0.4rem 0.4rem 1.2rem; }

  /* Game-history table at lobby width */
  .gh-container { padding: 0.6rem; }
  .gh-title { font-size: 0.65rem; }

  /* ── COLLECTION ─────────────────────────────────────────────────────── */
  .coll-layout { padding: 0.6rem; gap: 0.5rem; }
  .coll-sidebar {
    position: static; max-height: none; overflow: visible;
    padding: 0.6rem; flex-direction: row; flex-wrap: wrap;
  }
  .coll-sidebar-title { width: 100%; margin-bottom: 0.3rem; padding-bottom: 0.3rem; font-size: 0.62rem; }
  .coll-class-list { flex-direction: row; flex-wrap: wrap; gap: 4px; width: 100%; }
  .coll-class-btn { padding: 4px 6px; font-size: 0.62rem; }
  .ccb-icon, .ccb-portrait { width: 22px; height: 22px; }
  .ccb-label { display: none; }   /* icon-only chips on mobile */
  .coll-main-header {
    padding: 0.5rem 0.6rem; gap: 6px;
  }
  .coll-search-input { flex: 1 1 100%; max-width: 100%; }
  .coll-show-all { font-size: 0.6rem; padding: 0.35rem 0.6rem; }
  .coll-pagination button { padding: 6px 10px; font-size: 0.65rem; min-height: 32px; }

  /* ── DECKS LIST ─────────────────────────────────────────────────────── */
  .new-deck-form { padding: 0.7rem; margin: 0 0.6rem 0.7rem; gap: 0.5rem; }
  .new-deck-form .form-group { flex: 1 1 100%; }
  .new-deck-form input,
  .new-deck-form .yk-select-btn { width: 100%; font-size: 16px; }
  .new-deck-form .create-deck-btn { width: 100%; }
  .deck-slots-bar { margin: 0 0.6rem 0.7rem; padding: 6px 10px; }
  .deck-list { padding: 0 0.6rem; gap: 0.5rem; }
  .deck-card { padding: 0.6rem; gap: 0.5rem; }
  .deck-class-icon { width: 36px; height: 36px; }
  .deck-name { font-size: 0.82rem; }
  .deck-meta { font-size: 0.7rem; }
  .deck-btns .btn-sm { padding: 6px 8px; font-size: 0.62rem; min-height: 34px; }

  /* ── DECK BUILDER ───────────────────────────────────────────────────── */
  .builder-layout { height: auto; max-height: none; overflow: visible; }
  .builder-left, .builder-right { padding: 0.7rem; }
  .builder-right { border-top: 2px solid var(--b1); border-left: none; max-height: none; }
  .builder-filters { flex-wrap: wrap; gap: 4px; }
  .builder-filters input,
  .builder-filters select,
  .builder-filters .yk-select-btn { flex: 1 1 calc(50% - 2px); min-width: 0; font-size: 14px; }
  #builder-card-list { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .builder-deck-title { font-size: 0.85rem; }
  .builder-progress-label { font-size: 0.58rem; }
  .builder-curve { gap: 2px; }
  .builder-pagination button,
  .db-pagination button { min-height: 32px; padding: 6px 10px; font-size: 0.65rem; }

  /* ── MARKETPLACE ────────────────────────────────────────────────────── */
  .mp-layout { padding: 0.6rem; gap: 0.6rem; }
  .mp-sidebar {
    position: static; max-height: none; overflow: visible;
    padding: 0.7rem;
  }
  .mp-sidebar-filters { gap: 8px; }
  .mp-main-header { padding: 0.3rem 0 0.5rem; margin-bottom: 0.5rem; gap: 0.4rem; }
  .mp-tabs {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.5rem;
  }
  .mp-tab {
    flex-shrink: 0; padding: 0.5rem 0.7rem;
    font-size: 0.62rem; min-height: 38px;
    white-space: nowrap;
  }
  .mp-row, .mp-filters { gap: 4px; margin-bottom: 0.5rem; }
  .mp-row > *, .mp-filters > * { flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 14px; }
  .mp-card-name { font-size: 0.68rem; }
  .mp-card-price { font-size: 0.85rem; }
  .mp-buy-btn, .mp-sell-btn { padding: 0.5rem 0.4rem; font-size: 0.6rem; letter-spacing: 0.06em; }
  .mp-txn-filter-wrap { max-width: 100%; }

  /* ── LEADERBOARD ────────────────────────────────────────────────────── */
  .podium-wrap {
    grid-template-columns: 1fr; gap: 0.5rem;
    margin: 0.7rem 0;
  }
  .podium-1st, .podium-2nd, .podium-3rd { padding: 0.7rem; }
  .podium-medal { height: 56px; }
  .podium-medal-1st { height: 72px; }
  .podium-name { font-size: 0.82rem; }
  .podium-rp { font-size: 0.85rem; }
  .lb-table-grid { grid-template-columns: 1fr; gap: 0.6rem; }
  .lb-table th, .lb-table td { padding: 0.45rem 0.5rem; font-size: 0.72rem; }
  .lb-table th { font-size: 0.55rem; }
  .lb-medal { width: 20px; height: 20px; font-size: 0.6rem; }

  /* ── SHOP ───────────────────────────────────────────────────────────── */
  .shop-sidebar {
    padding: 0.5rem; gap: 4px;
    flex-direction: row; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .shop-sidebar-title { display: none; }
  .shop-tab-list {
    flex-direction: row !important; gap: 4px; flex-wrap: nowrap !important;
  }
  .shop-tab-btn,
  .shop-tab-list button {
    flex-shrink: 0; padding: 0.45rem 0.7rem; font-size: 0.62rem;
    min-height: 38px; white-space: nowrap;
  }
  .shop-content, .shop-main { padding: 0.7rem; }
  .shop-item { padding: 0.5rem; }
  .shop-item-icon img,
  .shop-item-img { width: 64px; height: 64px; }
  .shop-item-name { font-size: 0.72rem; }
  .shop-item-desc { font-size: 0.62rem; }
  .shop-item-price { font-size: 0.78rem; }
  .shop-item-buy { padding: 0.4rem 0.5rem; font-size: 0.6rem; min-height: 34px; }

  .pack-cards-grid { gap: 4px; }
  .cosmetic-card .shop-item-footer { font-size: 0.62rem; }

  /* Bundle / season-pass / tokens grids */
  .season-pass-card .rc-body { grid-template-columns: 1fr; gap: 0.5rem; }
  .sp-challenge { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .sp-milestone { grid-template-columns: minmax(0, 90px) minmax(0, 1fr); gap: 6px; }

  /* ── CRAFTING / DISENCHANT ──────────────────────────────────────────── */
  #crafting-layout, #crafting-layout-de,
  .crafting-layout-de {
    grid-template-columns: 1fr !important; gap: 0.6rem;
  }
  #forge-card-grid, #disenchant-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px; max-height: none; padding: 4px;
  }
  #forge-select-panel, #disenchant-panel { padding: 0.6rem; }
  #forge-select-panel h3, #disenchant-panel h3 { font-size: 0.85rem; }
  #forge-filters, #disenchant-filters {
    flex-wrap: wrap; gap: 4px;
  }
  #forge-filters > *, #disenchant-filters > * {
    flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 14px;
  }
  .de-card-name { font-size: 0.65rem; }
  #disenchant-footer {
    grid-template-columns: 1fr;
    padding: 0.5rem 0.4rem;
    gap: 6px;
  }

  /* ── SETTINGS ───────────────────────────────────────────────────────── */
  #settings-layout { padding: 0.6rem; gap: 0.6rem; }
  #settings-sidebar {
    flex-direction: row; flex-wrap: wrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
  }
  .settings-nav-group { flex: 1 1 100%; }
  .settings-nav-group-label { font-size: 0.55rem; padding: 0 0.4rem 0.25rem; }
  .settings-nav-btn { padding: 0.5rem 0.7rem; font-size: 0.7rem; min-height: 38px; }
  .settings-section { padding: 0.7rem 0.8rem; }
  .settings-section h2 { font-size: 0.85rem; }
  .settings-row {
    flex-direction: column; align-items: stretch;
    padding: 0.5rem 0; gap: 0.4rem;
  }
  .settings-row select,
  .settings-row input[type="text"],
  .settings-row input[type="number"] {
    width: 100%; min-width: 0; font-size: 16px;
  }
  .referral-box { flex-direction: column; align-items: stretch; }
  .referral-stats { grid-template-columns: 1fr; gap: 0.5rem; }
  .referral-stat-value { font-size: 1.15rem; }
  .withdraw-form { padding: 0.7rem; }

  /* ── INVENTORY popup (was 3 cols, fits) ─────────────────────────────── */
  #inventory-popup {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    width: auto !important; max-width: none !important;
    top: calc(var(--nh) + 6px) !important;
  }
  .inv-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }

  /* ── MODALS / OVERLAYS (broad sweep) ────────────────────────────────── */
  .modal, .pack-modal, .mystery-box-modal, .ph-modal, .ranked-modal,
  .auth-modal { padding: 0.5rem !important; }

  .modal-box, .ph-box, .ranked-card, .pack-modal-box, .mystery-box-box,
  .auth-modal-box, .payment-modal, .add-card-modal, .price-history-modal,
  .level-up-modal, .reward-toast-box, .gh-modal, .class-unlock-modal,
  .deck-rename-modal, .confirm-modal, .perk-confirm-modal, .perks-info-modal {
    width: 94vw !important; max-width: 94vw !important;
    max-height: 90vh; overflow-y: auto;
    padding: 0.9rem !important;
    box-sizing: border-box;
  }
  .modal-title, .ph-header, .pack-modal-title { font-size: 0.95rem; }
  .modal-buttons, .modal-actions {
    flex-direction: column; gap: 0.5rem;
  }
  .modal-buttons > *, .modal-actions > * {
    width: 100%; min-height: 40px;
  }

  /* Auth modal — labels/inputs full width, larger taps */
  .auth-form input,
  .auth-form button { width: 100%; font-size: 16px; min-height: 42px; }

  /* Payment / add-card forms */
  .payment-form, .add-card-form { padding: 0.8rem; gap: 0.6rem; }
  .card-form-row-split { grid-template-columns: 1fr; gap: 0.5rem; }

  /* Pack reveal grid stays 3-col */
  .pack-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  /* Tabs row — generic */
  .tab-row, .tab-strip {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Inputs in horizontal filter rows shouldn't blow out their container */
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="search"], select, textarea {
    max-width: 100%; min-width: 0;
  }

  /* Tables fall-back: any plain table inside content scrolls horizontally */
  .screen-body table:not(.lb-table) { display: block; overflow-x: auto; }

  /* ── Large reward / quest popups ────────────────────────────────────── */
  .reward-toast-box, .quest-claim-toast {
    width: 92vw !important; max-width: 92vw !important;
  }

  /* Game-log floating panel kept inside viewport */
  .game-log-toggle { left: 8px !important; }
  .game-log-float  { left: 8px !important; right: 8px !important; width: auto !important; }
}


@media (max-width: 480px) {

  /* Tighter screen padding */
  .screen-body { padding: 0.7rem 0.4rem; }
  .screen-header { padding: 0.7rem 0.5rem 0.5rem; }
  .screen-title { font-size: 1rem; }

  /* Lobby */
  .tvn-signs-rail { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .sign-icon-img { width: 32px; height: 32px; }
  .sign-name { font-size: 0.7rem; }
  .sign-sub { font-size: 0.58rem; }
  .lpb-stats { gap: 0; }
  .lpb-stat { padding: 0.1rem 0.3rem; min-width: 44px; }
  .lpb-stat-val { font-size: 0.78rem; }

  /* Collection / decks: 2-col already; tighter pad */
  #cards-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }

  /* Deck builder card list — 3 across is too tight here, use 2 */
  #builder-card-list { grid-template-columns: repeat(2, 1fr); gap: 4px; }

  /* Marketplace tab text smaller */
  .mp-tab { font-size: 0.58rem; padding: 0.45rem 0.6rem; }

  /* Shop items 2-col already; tighter */
  .shop-item-icon img,
  .shop-item-img { width: 56px; height: 56px; }
  .shop-item-name { font-size: 0.68rem; }
  .shop-item-desc { font-size: 0.58rem; }

  /* Crafting grid stays 2-col */
  #forge-card-grid, #disenchant-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Modals: full-bleed minus 4px */
  .modal-box, .ph-box, .ranked-card, .pack-modal-box, .mystery-box-box,
  .auth-modal-box, .payment-modal, .add-card-modal, .price-history-modal,
  .level-up-modal, .reward-toast-box, .gh-modal, .class-unlock-modal,
  .deck-rename-modal, .confirm-modal, .perk-confirm-modal, .perks-info-modal {
    width: calc(100vw - 8px) !important; max-width: calc(100vw - 8px) !important;
    padding: 0.8rem !important;
  }

  /* Touch targets — min 36px on all small buttons */
  .btn-sm, .deck-btns .btn-sm,
  .coll-pagination button, .db-pagination button, .builder-pagination button,
  .mp-pagination button { min-height: 36px; padding: 6px 10px; }

  /* Podium single column already; tighter spacing */
  .podium-medal { height: 48px; }
  .podium-medal-1st { height: 64px; }

  /* Settings nav — keep readable */
  .settings-nav-btn { font-size: 0.65rem; padding: 0.45rem 0.6rem; }

  /* Inventory popup */
  .inv-grid { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
  .inv-tab { font-size: 0.6rem; padding: 0.4rem 0.6rem; }
}