/* ============================================================
   MONX ROAD — Styles
   Uses Inter font + site palette to match the rest of the
   site (RUN/JUMP). The persistent side leaderboard is styled
   by the existing .persistent-leaderboard rules.
   ============================================================ */

/* ── Layout stability fix ───────────────────────────────────
   The site's .section-content has staggered entry animations
   on every direct child (translateX(-30px) → 0, opacity 0 → 1,
   over 0.6s with 0.1–0.8s delays). On the protocols section,
   this causes the game to appear lower then "snap up" to its
   real position when navigating to a game. Disable these
   animations for the protocols section only — other sections
   keep their slide-in look. */
#protocols.section-content > *,
#protocols.section-content.active > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Defensive: lock the protocols section to the top of its
   parent flex container, regardless of content height. */
#protocols {
  align-self: flex-start !important;
}

/* ── 4-tab fit on mobile ────────────────────────────────────
   Adding the 4th tab (MONX ROAD) made the text overflow on
   narrow viewports. Tighten font and spacing to match. */
@media (max-width: 600px) {
  .game-tabs { gap: 4px; padding: 0 6px; }
  .game-tab {
    font-size: 9px;
    letter-spacing: 0.8px;
    padding: 10px 4px;
  }
}

/* ── Sized container that sits beside the leaderboard ──────── */
.road-canvas-container {
  display: flex;
  flex-direction: column;
  max-width: 480px;
  width: 100%;
}

/* ── Mount point root ──────────────────────────────────────── */
.road-root {
  background: #0a0a0a;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  overflow: hidden;
}

/* ── Generic screen layout (intro / prelaunch / ended / bust / cashout) ──
   Anchored to the TOP rather than vertically centered. Different
   screens have different content heights — centering caused the title
   and other elements to shift up/down between states (loading → intro,
   intro → bust, etc). flex-start keeps the top stable. */
.road-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 36px 24px 24px;
  gap: 16px;
  text-align: center;
}

/* ── Typography ────────────────────────────────────────────── */
.road-h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #ffffff;
  margin: 0;
  line-height: 1;
}
.road-h1-red    { color: #e74c3c; }
.road-h1-green  { color: #2ecc71; }

.road-tagline {
  color: #888;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  max-width: 360px;
  margin: 0;
}

.road-section-label {
  font-size: 11px;
  color: #888;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
}

.road-controls-text {
  color: #888;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  max-width: 360px;
  margin: 0;
}

.road-faded { color: #888; font-size: 13px; line-height: 1.7; font-weight: 300; }
.road-tiny  { font-size: 11px; line-height: 1.5; }
.road-narrow { max-width: 340px; }
.road-pad-top { padding-top: 8px; }
.road-pad-bot { padding-bottom: 8px; }
.road-pad-y   { padding: 14px 0; text-align: center; }

.road-amber  { color: #e2a03c; }
.road-red    { color: #e74c3c; }
.road-green  { color: #2ecc71; }
.road-blue   { color: #3CA3E2; }
.road-bold   { font-weight: 600; }
.road-border-top {
  border-top: 1px solid #2a2a2a;
  padding-top: 8px;
  margin-top: 4px;
}

.road-loading {
  color: #888;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 300;
}

/* ── Cards / rows ─────────────────────────────────────────── */
.road-card {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 16px 20px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.road-card-tight { gap: 4px; align-items: center; text-align: center; }

.road-banked-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  max-width: 360px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 14px 18px;
}
.road-banked-num { font-size: 20px; font-weight: 600; color: #fff; }

.road-row-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 14px 18px;
}
.road-big-num { font-size: 22px; font-weight: 600; color: #fff; }

/* ── Buttons (matching .game-button from site) ─────────────── */
.road-game-button {
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
}

/* ── Wager screen ─────────────────────────────────────────── */
.road-screen-wager {
  justify-content: flex-start;
  padding-top: 28px;
}

.road-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  max-width: 360px;
}
.road-tier {
  background: #111;
  border: 1px solid #2a2a2a;
  color: #888;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 12px 0;
  cursor: pointer;
  border-radius: 6px;
  min-height: 44px;
  transition: all 0.15s ease;
}
.road-tier:hover  { border-color: #555; color: #ddd; }
.road-tier.active {
  background: #e2a03c;
  border-color: #e2a03c;
  color: #000;
}

.road-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 360px;
}
.road-slider {
  width: 100%;
  accent-color: #e2a03c;
}
.road-slider-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
}

.road-summary {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 360px;
}
.road-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  align-items: baseline;
}
.road-summary-row.road-tiny { font-size: 12px; }
.road-summary-row.road-bold { font-size: 15px; font-weight: 600; }

/* ── Pre-launch countdown ─────────────────────────────────── */
.road-countdown {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 2px;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}

/* ── Playing screen (canvas + HUD + buttons) ──────────────── */
.road-playing {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  min-height: 600px;
}
.road-play-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a2a;
  background: #0a0a0a;
  flex-shrink: 0;
}
.road-hud-monx {
  color: #3CA3E2;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
}
.road-hud-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.road-hud-pts        { font-size: 14px; font-weight: 600; color: #fff; }
.road-hud-pts-label  { color: #666; font-size: 11px; font-weight: 300; }
.road-hud-wager      { font-size: 10px; color: #e2a03c; font-weight: 300; }
.road-hud-mult {
  font-weight: 600;
  font-size: 22px;
  font-family: 'Courier New', monospace; /* mono for the gambler-style multiplier */
  font-variant-numeric: tabular-nums;
}

.road-canvas {
  flex: 1;
  display: block;
  width: 100%;
  min-height: 380px;
  background: #0a0a0a;
}

.road-play-controls {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #2a2a2a;
  background: #0a0a0a;
  flex-shrink: 0;
}
.road-btn-cash, .road-btn-jump {
  border: none;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 0 12px;
  height: 56px;
  cursor: pointer;
  border-radius: 6px;
  min-height: 56px;
  transition: opacity 0.15s ease, transform 0.05s ease;
}
.road-btn-cash {
  width: 44%;
  background: #e2a03c;
}
.road-btn-jump {
  width: 56%;
  background: #3CA3E2;
}
.road-btn-cash:hover, .road-btn-jump:hover { opacity: 0.92; }
.road-btn-cash:active, .road-btn-jump:active { transform: scale(0.98); }
.road-btn-cash[disabled], .road-btn-jump[disabled] {
  background: #1a1a1a;
  color: #444;
  cursor: not-allowed;
}

/* ── Mobile / small viewport ──────────────────────────────── */
@media (max-width: 520px) {
  .road-root {
    border-radius: 0;
    border-left: none;
    border-right: none;
    min-height: 500px;
  }
  /* Tighten top padding so game sits closer to the tagline */
  .road-screen {
    padding: 16px 16px 18px;
    gap: 12px;
  }
  .road-h1 { font-size: 26px; }
  .road-canvas { min-height: 320px; }
  .road-btn-cash, .road-btn-jump {
    height: 54px;
    min-height: 54px;
    font-size: 14px;
  }
}

/* ── Leaderboard entry — road variant with stacked stats ──
   Adds a subtitle line under the username showing total
   wagered and lost. Used in both the persistent side panel
   and the modal leaderboard view. */
.leaderboard-entry.road-entry .leaderboard-username {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.25;
  padding-left: clamp(12px, 1.8vh, 20px);
}
.leaderboard-entry.road-entry .road-entry-handle {
  font-size: clamp(11px, 1.4vh, 15px);
  font-weight: 300;
  color: #fff;
}
.leaderboard-entry.road-entry .road-entry-stats {
  font-size: 10px;
  color: #888;
  font-weight: 300;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}

/* ── Prize tiers card on the road intro screen ─────────── */
.road-prizes {
  width: 100%;
  max-width: 360px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-top: 4px;
}
.road-prizes-title {
  font-size: 11px;
  color: #888;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2a2a;
}
.road-prizes-subtitle {
  font-size: 11px;
  color: #888;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  padding: 0 4px;
}
/* Wrapper that sizes itself to content and centers within
   the card, so all three rows share column alignment but
   the whole block is visually centered. */
.road-prize-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: center;
  padding-top: 4px;
}
.road-prize-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}
.road-prize-pts {
  color: #e2a03c;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: right;
}
.road-prize-arrow {
  color: #555;
  font-weight: 300;
}
.road-prize-reward {
  color: #ddd;
  font-weight: 300;
}

/* ── Mobile-only leaderboard button ────────────────────────
   Desktop has the persistent side panel — button hidden.
   Mobile (≤900px, where .persistent-leaderboard is hidden)
   shows the button so users can pop open the modal instead. */
.road-mobile-lb-btn { display: none !important; }
@media (max-width: 900px) {
  .road-mobile-lb-btn { display: inline-block !important; }
}