/* ============================================================================
   zGaming Ledger — "Ledger" redesign layer (loaded AFTER base.html inline CSS).
   Refines the existing medieval-ledger × gaming-premium system: stamped gold
   buttons, a formal pill vocabulary, item-grade seals, a live marquee, and a
   couple of premium atoms. Additive + override only — same tokens as base.html.
   ============================================================================ */

:root {
  /* "Nightdrive" — modern dark esports palette. Same token NAMES (templates
     reference them), new cool values: near-black base, electric-cyan accent
     (replaces gold), violet secondary, vivid mint/rose for up/down. */
  --ink:      #0a0b10;  --ink2:     #06070d;
  --panel:    #12151e;  --panel2:   #181c28;
  --line:     #283041;  --line2:    #1c2230;
  --gold:     #41f08f;  --goldhot:  #8effc0;  --gold2: #1dc46f;  --golddeep: #0a5236;
  --parchment:#eef2fb;  --vellum:   #c7d0e0;  --smoke: #8b94a8;  --mist: #dde3ef;
  --wine:     #ff5c7a;  --winehot:  #ff7a5c;  --moss:  #34e0a1;  --sky: #7c6bff;
}

/* ── Stamped gold buttons (refined) ──────────────────────────────────────── */
.btn-gold, .btn-emerald {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(180deg, var(--goldhot) 0%, var(--gold) 45%, var(--gold2) 100%);
  color: var(--ink2); border: 1px solid var(--gold2); border-radius: 6px; cursor: pointer;
  text-transform: uppercase; font-weight: 700; text-decoration: none;
  box-shadow: 0 2px 0 0 #063540, inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 22px rgba(65,240,143,0.18);
  transition: transform .12s, box-shadow .18s, filter .18s;
}
.btn-gold    { font-family: "Poppins","Rajdhani","Instrument Sans",sans-serif; font-size: 11px; letter-spacing: 0.22em; padding: 11px 22px; }
.btn-emerald { font-family: "Rajdhani","Poppins",sans-serif; font-size: 12px; letter-spacing: 0.14em; padding: 10px 20px; }
.btn-gold:hover, .btn-emerald:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 4px 0 0 #063540, inset 0 1px 0 rgba(255,255,255,0.5), 0 12px 30px rgba(65,240,143,0.32); }
.btn-gold:active, .btn-emerald:active { transform: translateY(1px); box-shadow: 0 1px 0 0 #063540, inset 0 1px 0 rgba(255,255,255,0.4); }

/* ── Tertiary line button (new) ──────────────────────────────────────────── */
.btn-line {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: "Poppins","Rajdhani",sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 8px 14px; cursor: pointer; text-decoration: none;
  background: transparent; color: var(--vellum);
  border: 1px solid var(--line); border-radius: 6px;
  transition: color .15s, border-color .15s, background .15s;
}
.btn-line:hover { color: var(--goldhot); border-color: rgba(65,240,143,0.5); background: rgba(65,240,143,0.05); }
.btn-line:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Pill vocabulary (formalized) ────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Poppins","Rajdhani",sans-serif; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--smoke);
  white-space: nowrap;
}
.pill-gold    { color: var(--gold);    border-color: rgba(65,240,143,0.4);  background: rgba(65,240,143,0.06); }
.pill-goldhot { color: var(--goldhot); border-color: rgba(142,255,192,0.5); background: rgba(142,255,192,0.07); }
.pill-moss    { color: var(--moss);    border-color: rgba(120,140,93,0.5);  background: rgba(120,140,93,0.08); }
.pill-wine    { color: var(--wine);    border-color: rgba(193,102,107,0.45); background: rgba(193,102,107,0.07); }
.pill-vellum  { color: var(--vellum);  border-color: rgba(174,184,204,0.4);  background: rgba(174,184,204,0.05); }
.pill-discord { color: #8c9eff; border-color: rgba(88,101,242,0.5); background: rgba(88,101,242,0.10); }
.pill-house   { color: var(--ink2); border-color: var(--goldhot); background: linear-gradient(90deg, var(--goldhot), var(--gold)); box-shadow: 0 0 12px rgba(65,240,143,0.4); }

/* ── Item seal (grade-tinted framed icon; real items carry icon_url) ─────── */
.item-seal {
  --gc: var(--gold);
  position: relative; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 14%, transparent), var(--ink2));
  border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 14px color-mix(in srgb, var(--gc) 18%, transparent);
}
.item-seal img { width: 100%; height: 100%; object-fit: cover; }
.item-seal .seal-glyph { color: var(--gc); opacity: 0.85; }
.item-seal .seal-grade {
  position: absolute; top: 3px; right: 3px; min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 3px; background: var(--gc); color: var(--ink2);
  font-family: "Rajdhani",sans-serif; font-weight: 700; font-size: 8.5px; display: grid; place-items: center;
}
.grade-S { --gc: #d8b0ff; } .grade-A { --gc: var(--goldhot); }
.grade-B { --gc: #7fb8ff; } .grade-C { --gc: #b5bcc9; }

/* ── Ledger rank-row meter ──────────────────────────────────────────────── */
.rank-meter { height: 4px; background: var(--ink2); border-radius: 2px; overflow: hidden; }
.rank-meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--goldhot)); box-shadow: 0 0 6px rgba(65,240,143,0.4); }

/* ── Live marquee (self-contained; ledger-motion.js also injects matching) ─ */
.mo-marquee-wrap { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mo-marquee-track { display: flex; width: max-content; animation: lg-marquee 42s linear infinite; }
.mo-marquee-wrap:hover .mo-marquee-track { animation-play-state: paused; }
@keyframes lg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── kbd hint ────────────────────────────────────────────────────────────── */
.kbd { font-family: "JetBrains Mono",monospace; font-size: 10px; color: var(--smoke); background: var(--ink2); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); border-bottom-width: 2px; }

/* gild reveal is owned entirely by ledger-motion.js (with a failsafe) — never
   declare `.gild { opacity:0 }` here, or content would stay hidden without JS. */

@media (prefers-reduced-motion: reduce) {
  .mo-marquee-track { animation: none !important; }
}