:root {
  --bg: #140A11;
  --bg-raised: #1A0D16;
  --panel: #221019;
  --panel-2: #2C1422;
  --line: #3A1A2E;
  --line-strong: #B8337A;
  --hero: #3A0A28;
  --hero-grid: #6E1A4C;
  --text: #FFF0F7;
  --text-soft: #FFC7E2;
  --text-muted: #C49AB0;
  --violet: #FF4DA6;
  --violet-hover: #FF70B8;

  --gold: #FF4DA6;
  --on-gold: #2A0016;
  --gold-edge: #A3165F;
  --lime: #7DFFB6;
  --on-lime: #05200F;
  --lime-edge: #2E9B62;
  --lime-dim: #5CD995;
  --pink: #FF3D6E;
  --on-pink: #2A0010;
  --pink-soft: #FFE3EB;

  --rank-wood: #C98B55;
  --rank-stone: #B4B4B4;
  --rank-copper: #F0A56B;
  --rank-iron: #D5DBE6;
  --rank-gold: #F5D76E;
  --rank-diamond: #4AEDD9;
  --rank-netherite: #C77DFF;

  --scrim: rgba(20, 10, 17, .72);
  --shade: rgba(0, 0, 0, .28);
  --shade-text: rgba(0, 0, 0, .3);
  --shade-deep: rgba(0, 0, 0, .45);
  --frost: rgba(255, 255, 255, .35);
  --frost-faint: rgba(255, 255, 255, .12);
  --glow-violet: rgba(255, 77, 166, .22);
  --glow-lime: rgba(125, 255, 182, .5);
  --glow-pink: rgba(255, 61, 110, .55);

  --font-display: 'Pixelify Sans', 'Lilita One', system-ui, sans-serif;
  --font-pixel: 'Silkscreen', 'Pixelify Sans', monospace;
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-hero: 24px;
  --r-card: 20px;
  --r-tile: 16px;
  --r-input: 12px;
  --r-pill: 999px;

  --press-gold: 0 6px 0 var(--gold-edge);
  --press-lime: 0 6px 0 var(--lime-edge);
  --glow-stage: 0 0 80px var(--glow-violet);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --tap: 44px;
}

.t-label {
  font-family: var(--font-pixel); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.t-display { font-family: var(--font-display); font-weight: 400; }

.btn-gold, .btn-lime {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 24px; border: 0; border-radius: var(--r-tile);
  font: 700 16px/1 var(--font-body); cursor: pointer; text-decoration: none;
  transition: transform .08s var(--ease), box-shadow .08s var(--ease), filter .15s;
}
.btn-gold { background: var(--gold); color: var(--on-gold); box-shadow: var(--press-gold); }
.btn-lime { background: var(--lime); color: var(--on-lime); box-shadow: var(--press-lime); }
.btn-gold:hover, .btn-lime:hover { filter: brightness(1.06); }
.btn-gold:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gold-edge); }
.btn-lime:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--lime-edge); }

:focus-visible { outline: 3px solid var(--text-soft); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn-gold, .btn-lime { transition: none; }
}