/* ============================================================================
   gaming.css — "Nightdrive" modern-dark-esports overlay.
   Loaded AFTER ledger.css, so it wins same-specificity cascades. Palette comes
   from the remapped tokens (cyan accent, cool dark). This file restyles the
   component SHAPES + typography: glass panels, neon buttons, sans display type,
   and removes the medieval ornaments (fleurons, parchment textures, crests).
   ============================================================================ */

/* ---- Display typography: modern gaming, not serif manuscript ------------- */
.serif,
.hero-title,
.gm-section-title,
.zl-empty-title,
.zl-subtitle,
h1, h2, h3 {
  font-family: 'Sora', 'Instrument Sans', ui-sans-serif, system-ui !important;
  font-style: normal !important;
  letter-spacing: -0.015em;
}
.serif.italic, .italic.serif, em.serif, .gold-glow,
h1 em, h2 em, h3 em, .hero-title em, .serif em { font-style: normal !important; }
.display, .rajdhani { font-family: 'Sora', 'Rajdhani', 'Instrument Sans', ui-sans-serif !important; }

/* Kill medieval ornaments */
.fleuron { display: none !important; }
.crest-bg { display: none !important; }
.ornament-panel::before, .ornament-panel::after,
.gm-accent-corner::before, .gm-accent-corner::after { display: none !important; }

/* ---- Glass panels -------------------------------------------------------- */
.gm-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 14px 36px -18px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.gm-panel::before { display: none !important; }   /* drop the gold top edge */

.gm-panel:hover, .card-lift:hover, .item-card:hover, .gm-panel.mo-glow {
  border-color: rgba(65,240,143,0.42) !important;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,0.85),
              0 0 0 1px rgba(65,240,143,0.22),
              0 0 34px -8px rgba(65,240,143,0.28) !important;
}

/* ---- Item cards ---------------------------------------------------------- */
.item-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.item-card-accent { background: linear-gradient(90deg, #41f08f, #7c6bff) !important; }

/* ---- Buttons: neon ------------------------------------------------------- */
.btn-gold, .btn-emerald {
  background: linear-gradient(180deg, #6effae 0%, #27d97e 100%) !important;
  color: #04250f !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: 'Sora', 'Instrument Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 1px rgba(65,240,143,0.35), 0 10px 26px -10px rgba(65,240,143,0.6) !important;
  transition: filter .15s, box-shadow .15s, transform .05s;
}
.btn-gold:hover, .btn-emerald:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 0 0 1px rgba(65,240,143,0.55), 0 12px 32px -10px rgba(65,240,143,0.8) !important;
}
.btn-gold:active, .btn-emerald:active { transform: translateY(1px); }

.btn-ghost, .btn-line {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: var(--mist) !important;
  border-radius: 10px !important;
  text-shadow: none !important;
}
.btn-ghost:hover, .btn-line:hover {
  border-color: rgba(65,240,143,0.5) !important;
  color: #8effc0 !important;
  background: rgba(65,240,143,0.07) !important;
}

/* ---- Inputs -------------------------------------------------------------- */
.input-line, .select-line {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 9px !important;
  color: var(--parchment) !important;
}
.input-line:focus, .select-line:focus {
  border-color: #41f08f !important;
  box-shadow: 0 0 0 3px rgba(65,240,143,0.18) !important;
  outline: none !important;
}

/* ---- Stat tiles ---------------------------------------------------------- */
.gm-stat {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}

/* ---- Seals & meters ------------------------------------------------------ */
.item-seal { border-radius: 10px !important; }
.gold-glow { color: #8effc0 !important; text-shadow: 0 0 18px rgba(65,240,143,0.5) !important; }

/* ---- Nav + links (override hardcoded golds in base.html <style>) ---------- */
.nav-link:hover { color: #8effc0 !important; }
.link-gold { color: #41f08f !important; }
.link-gold:hover { color: #8effc0 !important; border-bottom-color: #8effc0 !important; }
.nav-dd-panel { border-radius: 12px !important; }
.nav-dd-panel::before, .nav-dd-panel::after { display: none !important; }

/* ---- Pills: modern chips ------------------------------------------------- */
.pill { border-radius: 999px !important; }

/* ---- The "z" brand seal (login/nav): keep the favicon.svg mark, just glow.
   (Do NOT set `background` here — it would clobber the favicon background-image.) */
.seal { filter: drop-shadow(0 0 14px rgba(65,240,143,0.5)) !important; }

/* ---- Subtle custom scrollbar for the dark theme -------------------------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(65,240,143,0.35); background-clip: content-box; }