/* ═══════════════════════════════════════════════════════════════
   Violent Mobsters — modern dark theme
   Mobile-first, responsive, mobster aesthetic.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #0d0d0f;
  --bg-raised: #121317;
  --surface: #17181d;
  --surface-2: #1e2026;
  --surface-3: #262931;
  --border: #2c2f37;
  --border-strong: #3a3e47;
  --text: #d7dae0;
  --text-dim: #9aa0a9;
  --muted: #6b7078;
  --gold: #d4af37;
  --gold-bright: #f0d060;
  --gold-dim: #8a7020;
  --green: #4ade80;
  --red: #f87171;
  --amber: #fbbf24;
  --blue: #60a5fa;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  --sidebar-w: 230px;
  --rightbar-w: 270px;
  --topbar-h: 56px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--gold-bright); }

h1, h2, h3 { margin: 0 0 0.5em; font-weight: 600; letter-spacing: 0.01em; }

.muted { color: var(--muted); }
.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }

/* ── App shell ─────────────────────────────────────────────── */

.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar-h);
  padding: 0 16px;
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  color: #141414;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}
.brand-mark-lg { width: 52px; height: 52px; font-size: 20px; border-radius: 14px; }
.brand-name { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.15s ease;
}
.user-chip:hover { border-color: var(--gold); }
.user-chip-avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
}
.user-chip-name { font-weight: 600; font-size: 13px; }
.user-chip-rank { color: var(--muted); font-size: 11px; }
@media (max-width: 640px) {
  .user-chip-rank, .user-chip-name { display: none; }
}

/* ── 3-column shell ────────────────────────────────────────── */

.shell {
  flex: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rightbar-w);
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}

.sidebar { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Page wrappers that hold multiple panels inherit the same rhythm. */
.home { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Panels & cards ────────────────────────────────────────── */

.panel, .stats-panel, .hero-card, .stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel { padding: 16px 18px; }
.panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
/* Clickable username in the profile header opens a compose-message form. */
.panel-title a:hover { text-decoration: underline; }
.panel-note { color: var(--muted); font-size: 12px; margin: 12px 0 0; }

/* ── Left menu ─────────────────────────────────────────────── */

.menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
}
.menu-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 4px 6px 10px;
}

.menu-section { margin-bottom: 4px; }

/* Daily rewards section — gold accent so the daily-return hook stands out. */
.menu-section-daily .menu-toggle {
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--gold-bright);
  background: rgba(212, 175, 55, 0.07);
}
.menu-section-daily .menu-toggle::after { color: var(--gold-dim); }
.menu-section-daily .menu-links a:hover { background: rgba(212, 175, 55, 0.08); }

.menu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.menu-toggle:hover { border-color: var(--gold-dim); background: var(--surface-3); }
.menu-toggle::after {
  content: "▾";
  color: var(--muted);
  font-size: 10px;
  transition: transform 0.2s ease;
}
.menu-toggle[aria-expanded="false"]::after { transform: rotate(-90deg); }

.menu-links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 0 6px 6px;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.menu-section.closed .menu-links { max-height: 0; opacity: 0; padding-block: 0; }

.menu-links a {
  padding: 6px 9px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  transition: background 0.12s ease, color 0.12s ease;
}
.menu-links a:hover { background: var(--surface-3); color: var(--gold-bright); }

/* Gold "Upgrade" style — used for the most important menu links. */
.menu-links a.menu-link-gold,
.mobile-nav-dropdown a.menu-link-gold { color: var(--gold); }

.menu-links a.coming-soon::after,
a.coming-soon.mobile-nav-item::after {
  content: " soon";
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.menu-footer-note { font-size: 11px; color: var(--muted); margin: 10px 6px 4px; }

/* ── Right menu stats ──────────────────────────────────────── */

.stats-panel { padding: 14px; }

.stat-list { margin: 0; }
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.stat-row:last-child { border-bottom: none; }
.stat-row dt { color: var(--muted); font-size: 12px; }
.stat-row dd { margin: 0; font-size: 13px; font-weight: 600; text-align: right; word-break: break-word; }

/* Crime-gain flash — right-menu Money / Rank Points rows after a crime run */
.stat-row-gain {
  border-radius: var(--radius-sm);
  animation: stat-gain-flash 0.9s ease-out 2;
}
.stat-gain-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--green);
  color: #04120a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
  animation: stat-gain-pop 3.2s ease forwards;
}
@keyframes stat-gain-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(74, 222, 128, 0.16); }
}
@keyframes stat-gain-pop {
  0% { transform: scale(0.5); opacity: 0; }
  8% { transform: scale(1.12); opacity: 1; }
  14% { transform: scale(1); }
  78% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Lost-money flash — red pulse + badge on the Money row (lost bets, robbed). */
.stat-row-loss {
  border-radius: var(--radius-sm);
  animation: stat-loss-flash 0.9s ease-out 2;
}
.stat-gain-badge.loss {
  background: var(--red);
  color: #fff;
}
@keyframes stat-loss-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(239, 68, 68, 0.16); }
}

.hp-ok { color: var(--green); }
.hp-warn { color: var(--amber); }
.hp-low { color: var(--red); }

.rank-progress { margin-top: 12px; }
.rank-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 5px;
}
.rank-progress-bar {
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.rank-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.timer-list { list-style: none; margin: 0; padding: 0; }
.timer-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.timer-list li:last-child { border-bottom: none; }
.timer-list .timer { color: var(--gold-bright); font-family: var(--font-mono); font-size: 12px; }

/* ── Mobile bottom nav ─────────────────────────────────────── */

.mobile-nav {
  display: none;
  flex-wrap: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 110;
  background: rgba(13, 13, 15, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
}

.mobile-nav-group { position: relative; flex: 1 1 0; min-width: 0; }

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0 6px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-item svg { width: 20px; height: 20px; }
.mobile-nav-item:hover, .mobile-nav-item:focus { color: var(--gold); }
.mobile-nav-item.active { color: var(--gold); }

/* ── Category dropdown (mobile) ──────────────────────────── */

.mobile-nav-dropdown {
  display: none !important;
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom));
  left: 8px;
  width: min(320px, calc(100vw - 16px));
  max-height: 55vh;
  z-index: 120;
  overflow-y: auto;
  background: rgba(13, 13, 15, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 0;
  z-index: 61;
  box-shadow: var(--shadow);
  -webkit-overflow-scrolling: touch;
}
.mobile-nav-group.open .mobile-nav-dropdown { display: block !important; }

.mobile-nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  border-left: 3px solid transparent;
}
.mobile-nav-dropdown a:hover,
.mobile-nav-dropdown a:active {
  background: var(--surface-2);
  color: var(--gold);
  border-left-color: var(--gold);
}



.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  bottom: 56px;
  z-index: 55;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  pointer-events: none;
}
.mobile-nav-backdrop.show { display: block; }

@media (max-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar-left, .sidebar-right { display: none; }
  .mobile-nav { display: flex; }
  .topbar .drawer-toggle { display: inline-grid; }
}

.drawer-toggle {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.drawer-toggle:hover { color: var(--gold); border-color: var(--gold-dim); }

.sidebar-left.drawer-open {
  display: flex;
  position: absolute;
  top: var(--topbar-h);
  bottom: 0;
  left: 0;
  z-index: 70;
  width: min(300px, 86vw);
  overflow-y: auto;
  padding: 14px;
  background: var(--bg-raised);
  animation: slideIn 0.22s ease;
}


@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.sidebar-right.drawer-open {
  display: flex;
  position: absolute;
  top: var(--topbar-h);
  bottom: 0;
  right: 0;
  z-index: 70;
  width: min(320px, 86vw);
  overflow-y: auto;
  padding: 14px;
  background: var(--bg-raised);
  animation: slideInRight 0.22s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #17120a;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.25);
}
.btn-gold:hover { filter: brightness(1.08); color: #17120a; }

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-bright); }

.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
.btn-ghost:hover { color: var(--gold-bright); border-color: var(--gold-dim); }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.btn-success {
  background: linear-gradient(180deg, #2e8b3d, #226a2f);
  border-color: #3f9e4d;
  color: #eaffea;
}
.btn-success:hover { filter: brightness(1.12); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── Forms ─────────────────────────────────────────────────── */

.form-stack { display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field-optional { font-size: 11px; font-weight: 400; color: var(--muted); }
.field-hint { margin: 0; font-size: 11px; color: var(--muted); }

.textbox {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.textbox:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.textbox::placeholder { color: var(--muted); }
select.textbox { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
select.textbox option { background: var(--surface-2); color: var(--text); }

.field-errors { margin: 2px 0 0; padding-left: 16px; }
.field-errors li { color: var(--red); font-size: 12px; }

.inline-form { display: inline; }

/* ── Flash messages ────────────────────────────────────────── */

.flash {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid;
}
.flash-success { background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.35); color: var(--green); }
.flash-error { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.35); color: var(--red); }
.flash-warn { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.35); color: var(--amber); }

/* ── Tags ──────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tag-muted { background: var(--surface-3); color: var(--muted); border: 1px solid var(--border); }

/* ── Home dashboard ────────────────────────────────────────── */

.hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  background:
    radial-gradient(600px 200px at 90% -20%, rgba(212, 175, 55, 0.12), transparent),
    var(--surface);
}
.hero-title { font-size: 22px; margin: 0 0 4px; }
.hero-sub { margin: 0; color: var(--text-dim); font-size: 13px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  /* Let long values (e.g. $99,786,462,880) shrink into the grid track
     instead of forcing the card wider than its column. */
  min-width: 0;
  /* Size the value against the card itself (container query units). */
  container-type: inline-size;
}
.stat-card-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.stat-card-value {
  /* Responsive: stay at 20px on roomy cards (>= ~200px), shrink on narrow
     ones so the value always fits on a single line inside the card. */
  font-size: clamp(13px, 12.5cqi, 20px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  /* Keep the value on one line — the clamp above guarantees it fits. */
  white-space: nowrap;
}

.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.steps li { color: var(--text-dim); }
.steps li strong { color: var(--text); }

/* ── Auth pages ────────────────────────────────────────────── */

.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #000;
  padding: 0 20px;
}

.auth-banner {
  display: block;
  width: min(90vw, 520px);
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
  position: relative;
  z-index: 1;
}

.auth-wrap {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Center the whole block vertically on the page. */
  margin: auto;
}
.auth-brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.auth-title { font-size: 26px; margin: 4px 0 0; letter-spacing: 0.02em; }
.auth-tagline { color: var(--muted); margin: 0; font-size: 13px; }

.auth-card {
  width: 100%;
  max-width: 320px;
  background: rgba(13, 13, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  padding: 16px 18px;
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 2;
}
.auth-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.auth-links { text-align: center; margin: 12px 0 0; font-size: 13px; color: var(--text-dim); }
.auth-links .dot { color: var(--muted); padding: 0 6px; }
.auth-footer { text-align: center; color: var(--muted); font-size: 11px; margin: 0; }

.error-code {
  font-size: 64px;
  color: var(--gold);
  margin: 0;
  line-height: 1;
  font-weight: 800;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.35);
}

/* ── Crimes page ───────────────────────────────────────────── */

.crime-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.hero-stat span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.hero-stat strong { color: var(--gold-bright); font-size: 15px; }

.crime-form { display: flex; flex-direction: column; gap: 18px; }

.crime-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.check-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.check-all input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.crime-table, .prison-table { width: 100%; border-collapse: collapse; min-width: 680px; }
/* Weekly leaderboard — 3-column tables must fit their panel without horizontal scroll. */
.leaderboard-table { min-width: 0; }
.crime-table th, .prison-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--surface-2);
  padding: 11px 20px 11px 18px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.crime-table td, .prison-table td { padding: 12px 20px 12px 18px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.crime-table tbody tr:last-child td, .prison-table tbody tr:last-child td { border-bottom: none; }
.crime-table tbody tr, .prison-table tbody tr { transition: background 0.12s ease; }
.crime-table tbody tr:hover, .prison-table tbody tr:hover { background: var(--surface-2); }
/* Crime rows are clickable (toggle the checkbox); locked/cooldown/jailed rows are not. */
.crime-table tbody tr { cursor: pointer; }
.crime-table tbody tr.row-locked,
.crime-table tbody tr.row-cooldown,
.crime-table tbody tr.row-jailed { cursor: not-allowed; }
.crime-table .col-check { width: 48px; text-align: center; }
.prison-table .col-action { text-align: right; white-space: nowrap; }
.prison-table .col-action .btn { margin: 0; }
.crime-table input[type="checkbox"] { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }
.crime-table input[type="checkbox"]:disabled { opacity: 0.35; cursor: not-allowed; }

.crime-name { font-weight: 600; color: var(--text); }
.nowrap { white-space: nowrap; }
.row-locked td { opacity: 0.55; }
.row-cooldown td { opacity: 0.75; }
.row-jailed td { opacity: 0.45; }
.crime-status .timer { color: var(--gold-bright); font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }

.risk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid;
}
.risk-none { color: var(--muted); border-color: var(--border-strong); background: var(--surface-2); }
.risk-low { color: var(--green); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); }
.risk-medium { color: var(--amber); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); }
.risk-high { color: var(--red); border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.08); }

/* ── Bullet calculator ─────────────────────────────────────── */

.calc-table { min-width: 880px; }
.calc-table tbody tr { cursor: default; }
.calc-table th { text-align: center; }
.calc-table th:first-child,
.calc-table th:nth-child(2) { text-align: left; }
.calc-table td.calc-cost { text-align: center; font-family: var(--font-mono); white-space: nowrap; }
.calc-table tbody tr.calc-current td { background: rgba(212, 175, 55, 0.12); }
.calc-table tbody tr.calc-current td:first-child { box-shadow: inset 3px 0 0 var(--gold); }


/* ── Jail banner ───────────────────────────────────────────── */

.jail-banner {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), transparent), var(--surface);
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.jail-banner--icon { display: flex; align-items: center; gap: 14px; }
.jail-banner--icon .jail-banner-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.35);
  font-size: 20px;
}
.jail-banner-kicker {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.jail-banner-title { font-size: 17px; margin: 0 0 3px; color: var(--text); }
.jail-banner-text { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.jail-banner-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.jail-banner-countdown {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.jail-banner-countdown .timer { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--gold-bright); }

/* ── Currently Online (online.php) ─────────────────────────── */

.online-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.online-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.online-chip:hover {
  border-color: var(--gold-dim);
  transform: translateY(-1px);
}
.online-chip.online-max { text-decoration: underline; }

/* ── Properties board (properties.php) ─────────────────────── */

.prop-board { min-width: 980px; }
.prop-cell { text-align: center; vertical-align: top; }
.prop-owner { font-weight: 700; font-size: 13px; }
.prop-owner.prop-you { color: var(--gold-bright); }
.prop-owner.prop-none { color: var(--muted); font-weight: 500; }
.prop-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
.prop-buy { margin-top: 8px; }
.prop-list-form { display: inline-flex; align-items: center; gap: 6px; }

/* ── Public profile (viewprofile.php) ──────────────────────── */

.profile-quote {
  margin: 0;
  padding: 14px 16px;
  background: var(--surface-2);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.6;
}

/* Player portrait — [img] photo or initial avatar in the profile hero. */
.profile-portrait {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-3);
}

/* Compact quote, tucked under the name in the profile hero. */
.profile-quote-inline {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  max-width: 620px;
}

/* ── Flat old-game profile (viewprofile.php) ──────────────────────
 * Full-width, flat, compact single column: a tight left-aligned list
 * of inline "Label: Value" rows with the portrait on the right, the
 * player's quote (when set) and a compact trophy case, closed by a
 * thin bottom divider — all in the same body. The panel sizes to its
 * content so there is no dead space above or below the trophy case. */
.profile-flat {
  display: flex;
  flex-direction: column;
  padding: 14px 10px 12px;
}
.profile-flat-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.profile-flat-image {
  flex-shrink: 0;
}
.profile-flat-portrait {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-3);
  color: var(--gold);
  font-size: 30px;
  font-weight: 700;
}
.profile-flat-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.profile-flat-row {
  display: flex;
  gap: 6px;
}
.profile-flat-row dt {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.profile-flat-row dd {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}
.profile-flat-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.profile-flat-trophies {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.profile-flat-trophies .trophy-sub {
  margin: 12px 0 8px;
}
.profile-flat-trophies .records-row {
  padding: 4px 8px;
  font-size: 12px;
}
.profile-flat-trophies .trophy-chip {
  font-size: 11px;
  padding: 3px 8px;
}
.profile-flat-quote {
  padding: 12px 4px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}
.profile-flat-quote img.profile-quote-img {
  display: inline-block;
  max-width: 100%;
  margin-top: 8px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
/* Alignment wrappers from [align=…]/[center] BB code. */
.profile-quote-align { width: 100%; }
.profile-align-center { text-align: center; }
.profile-align-left { text-align: left; }
.profile-align-right { text-align: right; }
.profile-align-justify { text-align: justify; }

/* A bare [img] (no [align] wrapper) is a direct flex child — keep it at its
   natural size and centered instead of letting flex stretch it to full width. */
.profile-flat-quote > img.profile-quote-img {
  display: block;
  align-self: center;
}
.profile-flat-divider {
  margin-top: 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .profile-flat-main {
    flex-direction: column-reverse;
  }
  .profile-flat-image {
    align-self: center;
  }
}

/* ── Prison page ───────────────────────────────────────────── */

.bounty-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.bounty-form .field { flex: 0 0 220px; }
.bounty-form .textbox { font-family: var(--font-mono); }

/* ── Crime result summary ──────────────────────────────────── */

.crime-results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crime-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 13px;
}
.crime-result-ok { background: rgba(74, 222, 128, 0.06); border-color: rgba(74, 222, 128, 0.3); }
.crime-result-fail { background: rgba(248, 113, 113, 0.06); border-color: rgba(248, 113, 113, 0.3); }
.crime-result-icon { font-weight: 800; }
.crime-result-ok .crime-result-icon { color: var(--green); }
.crime-result-fail .crime-result-icon { color: var(--red); }
.crime-result-name { font-weight: 600; }
.crime-result-detail { color: var(--text-dim); margin-left: auto; text-align: right; }

/* ── Hospital page ─────────────────────────────────────────── */

.hospital-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.14), rgba(251, 191, 36, 0.06)), var(--surface);
  border: 1px solid rgba(248, 113, 113, 0.45);
}
.hospital-banner-icon { font-size: 30px; }
.hospital-banner-title { font-size: 16px; margin: 0 0 2px; color: var(--red); }
.hospital-countdown { margin: 6px 0 6px; font-size: 17px; }
.hospital-countdown .timer { font-family: var(--font-mono); color: var(--gold-bright); }
.hospital-banner .btn { margin-top: 10px; }

/* ── My Statistics page ────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: var(--surface-2);
}
.stat-item dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.stat-item dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); word-break: break-word; }

/* ── Achievements (§5.6) ────────────────────────────────────── */

.ach-cat { padding: 0; overflow: hidden; }
.ach-details { display: block; }
.ach-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.12s ease;
}
.ach-cat-head::-webkit-details-marker { display: none; }
.ach-cat-head::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.2s ease;
}
.ach-details:not([open]) .ach-cat-head::after { transform: rotate(-90deg); }
.ach-cat-head:hover { background: var(--surface-2); }
.ach-cat-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ach-cat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
}
.ach-cat-count { color: var(--muted); font-size: 12px; font-family: var(--font-mono); }

.ach-table { min-width: 560px; }
.ach-name-line { display: flex; align-items: flex-start; gap: 10px; }
.ach-name { font-size: 13px; }
.ach-desc { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.ach-status { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.ach-status.ach-claimed { background: var(--green); box-shadow: 0 0 6px rgba(74, 222, 128, 0.6); }
.ach-status.ach-ready {
  background: var(--gold-bright);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.7);
  animation: achPulse 1.6s ease-in-out infinite;
}
.ach-status.ach-locked { background: var(--surface-3); border: 1px solid var(--border-strong); }

.ach-row.ach-claimed td { opacity: 0.7; }
.ach-row.ach-claimed .ach-name { color: var(--green); }
.ach-row.ach-ready .ach-name { color: var(--gold-bright); }
.ach-row.ach-locked .ach-name { color: var(--text-dim); }

.ach-progress { min-width: 150px; }
.ach-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: 5px;
}
.ach-progress-bar { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.ach-progress-fill {
  height: 100%;
  background: var(--border-strong);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ach-progress-fill.fill-done { background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }

.ach-rewards { font-size: 12px; white-space: nowrap; font-family: var(--font-mono); }
.reward-cash { color: var(--green); }
.reward-points { color: var(--gold-bright); }
.reward-bullets { color: #ff9966; }

@keyframes achPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ── Trophy case (viewprofile.php) ─────────────────────────── */

.trophy-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 8px;
}
.trophy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trophy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  cursor: default;
  transition: border-color 0.15s ease;
}
.trophy-chip:hover { border-color: var(--gold-dim); }

/* Achievement trophies — tiered Trophies/ PNGs (bronze → diamond). */
.ach-shield { display: block; flex: 0 0 auto; }
.ach-name-line .ach-shield { align-self: center; }
.trophy-chip .ach-shield { align-self: center; }
/* Locked achievements show a desaturated "target" shield. */
.ach-row.ach-locked .ach-shield { filter: grayscale(0.9) opacity(0.5); }

/* ── Garage / steal page ───────────────────────────────────── */

.rarity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid;
}
/* Car-sales directory (buy.php) — rarity filter tabs above the listing table. */
.car-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.car-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.car-filter:hover { border-color: var(--gold); color: var(--gold-bright); }
.car-filter.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #17120a;
  border-color: transparent;
}
.car-filter-count {
  font-size: 10px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
}
.car-filter.active .car-filter-count { background: rgba(0, 0, 0, 0.18); }

.rarity-common { color: var(--muted); border-color: var(--border-strong); background: var(--surface-2); }
.rarity-uncommon { color: var(--green); border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); }
.rarity-rare { color: var(--blue); border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.08); }
.rarity-epic { color: #c084fc; border-color: rgba(192, 132, 252, 0.4); background: rgba(192, 132, 252, 0.08); }
.rarity-legendary { color: var(--gold-bright); border-color: rgba(212, 175, 55, 0.5); background: rgba(212, 175, 55, 0.1); }
.rarity-custom { color: var(--gold-bright); border-color: var(--gold); background: rgba(212, 175, 55, 0.15); }
.rarity-listed { color: var(--green); border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.1); }

.damage-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.damage-value { font-family: var(--font-mono); font-size: 12px; width: 36px; }
.damage-bar { flex: 1; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.damage-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.dmg-low { background: var(--green); }
.dmg-mid { background: var(--amber); }
.dmg-high { background: var(--red); }

.action-stack { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.melt-hint { margin: 0 0 10px; font-size: 11px; }
.drop-table td { vertical-align: middle; }

/* Deliberate column gutters — fixed widths for Outcome + Chance so the
   browser never sizes them down to content; the What-You-Get column
   absorbs the remaining width. Gutter is 20px right + 18px left per cell. */
.drop-table th:first-child, .drop-table td:first-child { width: 180px; }
.drop-table th:nth-child(2), .drop-table td:nth-child(2) { width: 140px; }
.drop-table th:nth-child(3), .drop-table td:nth-child(3) { padding-left: 24px; }
.panel-title-inline { margin-bottom: 4px; }
.panel-title-sub { margin: 0 0 12px; }

/* ── Stolen-car popup ─────────────────────────────────────────
   Full-screen overlay shown right after a successful boost (§8.1).
   The image scales down (object-fit: contain) so the whole popup
   fits on phone screens; closed via ✕, tapping the backdrop or Esc. */
.car-popup {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.car-popup-show { opacity: 1; visibility: visible; }

.car-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.car-popup-card {
  position: relative;
  width: auto;                  /* hug the image — no oversized empty box */
  max-width: min(92vw, 620px);
  max-height: 92vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  transform: scale(0.94);
  transition: transform 0.25s ease;
}
.car-popup-show .car-popup-card { transform: scale(1); }

.car-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.car-popup-close:hover { border-color: var(--gold); color: var(--gold-bright); }

.car-popup-img {
  display: block;
  width: auto;                  /* keep the photo's own shape/size */
  max-width: 100%;
  height: auto;
  max-height: 45vh;
  /* Tiny images (e.g. the 1×1 shared custom-car placeholder) still fill the
     card instead of collapsing to a dot — real photos are larger, so they're
     unaffected. */
  min-width: min(100%, 320px);
  min-height: 180px;
  object-fit: contain;
  background: #000;
  margin: 0 auto;
}

.car-popup-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 16px 16px;
  text-align: center;
}
.car-popup-name { margin: 0; font-size: 18px; color: var(--text); }
.car-popup-detail { margin: 0; font-size: 13px; color: var(--text-dim); }

@media (max-width: 640px) {
  .car-popup { padding: 10px; }
  .car-popup-img { max-height: 36vh; }
}

/* Garage row: click the car name to view its photo popup. */
.car-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
}
.car-view-btn:hover, .car-view-btn:focus-visible { color: var(--gold-bright); }
.car-view-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--gold);
}

/* ── PvP pages (kill / hitlist / attempts) ─────────────────── */

.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.gear-col-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin: 0 0 6px;
}
.gear-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.gear-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.gear-list li:last-child { border-bottom: none; }
.gear-list li.gear-current {
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-bright);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gold);
}

/* ── Buy / Sell shop ───────────────────────────────────────── */

.price-cell { font-family: var(--font-mono); color: var(--gold-bright); font-weight: 600; white-space: nowrap; }
.cost-display { padding: 9px 11px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: 14px; min-width: 120px; }

/* Flash sits above page content with its own rhythm. */
.flash { margin: 0; }
.flash + .flash { margin-top: 0; }
.price-input { width: 110px; padding: 5px 8px; font-size: 12px; font-family: var(--font-mono); }

/* ── Scrollbars ────────────────────────────────────────────── */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Credit Points shop (§13) ──────────────────────────────── */

.points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }

/* ── National Bank & Robbery (§6.1–6.2) ───────────────────── */

.bank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }

.quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.quick-amounts .btn { font-size: 12px; padding: 4px 10px; }

.timer-inline { font-family: var(--font-mono); color: var(--gold-bright); font-weight: 600; }

/* ── Wide screens: more breathing room ────────────────────── */

@media (min-width: 1280px) {
  .shell { padding: 20px; gap: 20px; }
  .panel { padding: 18px 22px; }
  .stats-panel { padding: 16px; }
}

/* ── Small screens: reclaim edge space ────────────────────── */

@media (max-width: 640px) {
  .shell { padding: 12px; gap: 12px; }
  .panel { padding: 14px; }
  .main { gap: 12px; }
}

/* ── Mobile: stack wide tables into readable cards ─────────── */

@media (max-width: 640px) {
  .table-wrap {
    overflow-x: visible;
    border: none;
    border-radius: 0;
  }

  .crime-table, .prison-table {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .prop-board, .ach-table { min-width: 0; }

  .crime-table thead, .prison-table thead { display: none; }
  .crime-table tbody, .prison-table tbody { display: block; width: 100%; }

  .crime-table tr, .prison-table tr {
    display: block;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .crime-table tbody tr:last-child, .prison-table tbody tr:last-child { margin-bottom: 0; }

  .crime-table td, .prison-table td {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 13px;
  }
  .crime-table tbody tr:last-child td,
  .prison-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
  .crime-table tbody tr td:last-child,
  .prison-table tbody tr td:last-child { border-bottom: none; }

  .crime-table td[data-label]::before, .prison-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
  }

  /* Reset column-specific sizing/alignment for the card layout. */
  .crime-table .col-check,
  .crime-table .col-action,
  .prison-table .col-action,
  .prop-cell { text-align: left; }
  .prison-table .col-action .btn,
  .crime-table .col-action .btn { margin: 0; }
  .drop-table th:first-child, .drop-table td:first-child,
  .drop-table th:nth-child(2), .drop-table td:nth-child(2) { width: 100%; }
  .drop-table th:nth-child(3), .drop-table td:nth-child(3) { padding-left: 14px; }
}

/* ── Travel (§8.4) ─────────────────────────────────────────── */

.travel-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), transparent), var(--surface);
  border: 1px solid rgba(96, 165, 250, 0.35);
}
.travel-banner-icon { font-size: 26px; }

.travel-form { display: flex; flex-direction: column; gap: 16px; }
.travel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.travel-fieldset {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.travel-fieldset legend {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  padding: 0 6px;
}
.travel-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.travel-option:hover { background: var(--surface-3); }
.travel-option input { accent-color: var(--gold); }
.travel-car { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.travel-car strong { font-size: 13px; white-space: nowrap; }
.travel-eta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-bright);
  white-space: nowrap;
}
.travel-submit { display: flex; justify-content: flex-end; }

/* ── Booze Running (§6.3) ──────────────────────────────────── */

.booze-form { display: inline-flex; align-items: center; gap: 6px; }
.booze-form .price-input { width: 80px; }
.price-cell.price-min { color: var(--green); }
.price-cell.price-max { color: var(--red); }

/* Most Profitable Route highlight (booze-chart.php). */
.top-route {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(212, 175, 55, 0.03));
}
.top-route-main { display: flex; flex-direction: column; gap: 4px; }
.top-route-stats { display: flex; gap: 24px; flex-wrap: wrap; }

/* ── Staff tools (staff.php / staff/logs.php) ──────────────── */

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.role-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid;
}
.role-administrator { color: var(--red); border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.1); }
.role-hdo { color: var(--blue); border-color: rgba(96, 165, 250, 0.5); background: rgba(96, 165, 250, 0.1); }
.role-senior-staff { color: var(--amber); border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.1); }
.role-moderator { color: var(--green); border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.1); }
.role-player { color: var(--text-dim); border-color: var(--border-strong); background: var(--surface-2); }

.btn-danger {
  background: linear-gradient(135deg, #f87171, #b91c1c);
  color: #fff;
  box-shadow: 0 2px 10px rgba(248, 113, 113, 0.25);
}
.btn-danger:hover { filter: brightness(1.1); color: #fff; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.menu-section-staff .menu-toggle {
  border-color: rgba(212, 175, 55, 0.35);
  color: var(--gold-bright);
}

/* ── Helpdesk (helpdesk.php, §12.5) ───────────────────────── */

.ticket-list { display: flex; flex-direction: column; gap: 14px; }
.ticket {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 14px 16px;
}
.ticket-open { border-left: 3px solid var(--amber); }
.ticket-answered { border-left: 3px solid var(--green); }
.ticket-rejected { border-left: 3px solid var(--red); }
.ticket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ticket-id { font-family: var(--font-mono); color: var(--muted); font-size: 12px; }
.ticket-by { font-weight: 700; color: var(--gold-bright); font-size: 13px; }
.ticket-date { margin-left: auto; color: var(--muted); font-size: 11px; font-family: var(--font-mono); }
.ticket-question { margin: 0 0 4px; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.ticket-tag-answered { background: rgba(74, 222, 128, 0.12); color: var(--green); border: 1px solid rgba(74, 222, 128, 0.4); }
.ticket-tag-open { background: rgba(251, 191, 36, 0.12); color: var(--amber); border: 1px solid rgba(251, 191, 36, 0.4); }
.ticket-tag-rejected { background: rgba(248, 113, 113, 0.12); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.4); }
.ticket-reply {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ticket-reply-by { margin: 0 0 4px; font-size: 12px; color: var(--text-dim); }
.ticket-reply-text { margin: 0; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.6; }

/* ── Latest News (news.php) ───────────────────────────────── */

.news-article { border-left: 3px solid var(--gold-dim); }
.news-body { color: var(--text-dim); line-height: 1.7; }
.inline-form { display: inline; margin: 0; }

/* ── FAQ (faq.php) ─────────────────────────────────────────── */

.faq-toc {
  columns: 2;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.faq-toc li { margin: 4px 0; }
.faq-toc a { color: var(--gold-bright); text-decoration: none; }
.faq-toc a:hover { text-decoration: underline; }
.faq-list { margin: 8px 0 0; padding-left: 20px; line-height: 1.65; }
.faq-list li { margin: 6px 0; color: var(--text-dim); }
.faq-list strong { color: var(--text); }
.faq-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
  margin: 18px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (max-width: 640px) {
  .faq-toc { columns: 1; }
}

/* ── Hall of Fame (records.php, §5.7) ─────────────────────── */

/* ── Missions (§11) ─────────────────────────────────────────────────────── */
.mission-current { border: 1px solid var(--gold, #d4af37); }
.mission-current-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap;
}
.mission-current-name { margin: 6px 0 4px; }
.mission-char { font-weight: normal; color: var(--muted, #9aa0a9); }
.mission-reward {
    text-align: right; padding: 10px 14px; border-radius: 10px;
    background: var(--surface-2, #16181d); min-width: 200px;
}
.mission-reward span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #9aa0a9); }
.mission-reward strong { font-size: 15px; color: var(--gold, #d4af37); }
.mission-bust-hint {
    margin: 14px 0 0; padding: 12px 14px; border-radius: 10px;
    background: var(--surface-2, #16181d); font-size: 13px; line-height: 1.55;
}
.mission-bust-hint p { margin: 0 0 6px; }
.mission-bust-hint p:last-child { margin: 0; }
.mission-progress { margin-top: 16px; }
.mission-done-panel { text-align: center; }
.mission-table .mission-num {
    font-weight: 700; color: var(--gold, #d4af37); font-variant-numeric: tabular-nums;
}
.mission-table .mission-row-done td { opacity: 0.62; }
.mission-table .mission-row-active td { background: rgba(212, 175, 55, 0.06); }
.mission-table .mission-row-active .crime-name { color: var(--gold, #d4af37); }
.mission-table .mission-row-locked td { opacity: 0.45; }
.mission-table .mission-row-locked .mission-num { color: var(--muted, #9aa0a9); }
.tag-gold {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    background: rgba(212, 175, 55, 0.16); color: var(--gold, #d4af37);
}

/* ── Mailbox (§12.1) ────────────────────────────────────────────────────── */
.mailbox-tabs {
    display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap;
}
.mailbox-tab {
    padding: 8px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: var(--surface-2, #1e2026); color: var(--muted, #6b7078);
    border: 1px solid var(--border, #2c2f37); transition: all 0.15s ease;
}
.mailbox-tab:hover { color: var(--gold-bright, #f0d060); }
.mailbox-tab-active {
    background: rgba(212, 175, 55, 0.14); color: var(--gold, #d4af37);
    border-color: rgba(212, 175, 55, 0.45);
}
.mailbox-tab-compose { margin-left: auto; }
.mailbox-clear-form { text-align: right; margin: -6px 0 12px; }
.mailbox-list .ticket { position: relative; }
.mail-unread {
    border-left: 3px solid var(--gold, #d4af37);
    background: rgba(212, 175, 55, 0.05);
}
.mail-actions { display: inline-flex; gap: 6px; margin-left: 8px; }
.mail-actions .btn { padding: 3px 10px; font-size: 12px; }
.newmail-panel {
    border: 1px solid rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.05));
}
.newmail-link {
    display: block; text-align: center; font-weight: 700; font-size: 14px;
    color: var(--gold, #d4af37); padding: 4px 0;
    animation: newmail-pulse 2s ease-in-out infinite;
}
.newmail-link:hover { color: var(--gold-bright, #f0d060); }
@keyframes newmail-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
.mobile-nav-mail-dot {
    position: absolute;
    top: 6px;
    left: calc(50% + 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red, #e74c3c);
    box-shadow: 0 0 0 2px rgba(13,13,15,0.9);
}
.mobile-nav-mail-text {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--red, #e74c3c);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    margin-left: 4px;
}

/* ── Game Forum (§12.2) ──────────────────────────────────────────────────── */
.forum-table th:nth-child(1) { width: 46%; }
.forum-row-important td { background: rgba(212, 175, 55, 0.06); }
.forum-body {
    font-size: 14px; line-height: 1.65; word-break: break-word;
}
.forum-body a.forum-link { color: var(--gold, #d4af37); }
.forum-body a.forum-link:hover { color: var(--gold-bright, #f0d060); }
.forum-center { text-align: center; }
.forum-post + .forum-post { margin-top: 10px; }

/* Prison — storyline hostage (§11 bust-out chain) */
.hostage-panel { border: 1px solid rgba(212, 175, 55, 0.45); }
.hostage-name { color: var(--gold, #d4af37); }
.hostage-form { margin-top: 12px; }
.prison-table tr.row-hostage td { background: rgba(212, 175, 55, 0.06); }

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.records-board { margin: 0; }
.records-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.records-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
  transition: background 0.12s ease;
}
.records-row:last-child { border-bottom: none; }
.records-row:hover { background: var(--surface-2); }
.records-rank {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.records-row:nth-child(1) .records-rank {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #17120a;
}
.records-row:nth-child(2) .records-rank { background: var(--surface-3); color: #d7dae0; }
.records-row:nth-child(3) .records-rank { background: var(--surface-3); color: #b87333; }
.records-name { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.records-name:hover { color: var(--gold-bright); }
.records-value { margin-left: auto; font-family: var(--font-mono); color: var(--gold-bright); font-size: 12px; white-space: nowrap; }
.records-you { background: rgba(212, 175, 55, 0.1); box-shadow: inset 3px 0 0 var(--gold); }
.records-you:hover { background: rgba(212, 175, 55, 0.14); }

/* ── Find Users (find.php, §12.7) ───────────────────────────── */

.find-results { margin-top: 14px; }
.find-empty { margin: 6px 0; }
.find-table { min-width: 0; }

/* ── Quicktrade (§6.4) ─────────────────────────────────────── */

.trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

/* Each direction (buy / sell) stacks its market + posting form in one column. */
.trade-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Let the offer tables shrink to their column instead of forcing the global
   680px crime-table minimum (horizontal scroll kicks in only on tiny screens). */
.trade-col .trade-table {
  min-width: 0;
}

/* Compact quicktrade so the Buy / Sell columns fit on screen: the offer tables
   scroll internally (max-height) instead of stretching the page, so "Buy
   Points" is visible without scrolling on a normal browser window. */
.trade-hero { padding: 12px 16px; }
.trade-hero .panel-title { margin-bottom: 4px; }
.trade-hero .muted { margin: 0; font-size: 12px; }
.trade-hero .hero-stat { padding: 8px 12px; gap: 2px; }
.trade-hero .hero-stat span { font-size: 10px; }
.trade-hero .hero-stat strong { font-size: 13px; }

.trade-col { gap: 12px; }
.trade-col .panel { padding: 12px 14px; }
.trade-col .panel-title { margin-bottom: 8px; }
.trade-col .panel > .muted { margin: 0 0 8px; font-size: 12px; }
.trade-col .form-stack { gap: 10px; }
.trade-col .form-actions { margin-top: 10px; }
.trade-col .table-wrap {
  max-height: 36vh;
  overflow-y: auto;
}

.trade-table th,
.trade-table td {
  padding: 8px 14px 8px 0;
  white-space: nowrap;
}

.radio-inline,
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted, #9aa0a9);
  cursor: pointer;
  user-select: none;
}

.radio-inline input,
.check-inline input {
  accent-color: #d4af37;
  cursor: pointer;
}

.form-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Roulette (roulette.php, §9.4) — modern felt-table board ── */

.btn-lg { padding: 12px 26px; font-size: 15px; }

/* Result wheel — a compact colored ball with the rolled number, on a slim
   glass panel inside the felt, so the whole board fits on screen. */
.r-stage {
  margin-bottom: 6px;
  padding: 4px 12px 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(240, 208, 96, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.r-info { text-align: center; }
.r-ball {
  width: 32px;
  height: 32px;
  margin: 0 auto 4px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 -2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 3px rgba(255, 255, 255, 0.25);
}
.r-ball.red   { background: radial-gradient(circle at 35% 30%, #ef6a5f, #a32424 70%); }
.r-ball.black { background: radial-gradient(circle at 35% 30%, #4a505c, #17191e 70%); }
.r-ball.green { background: radial-gradient(circle at 35% 30%, #35c07c, #0d6b3a 70%); }
.r-ball.idle  { background: radial-gradient(circle at 35% 30%, #3a3e47, #191b20 70%); }
.r-ball.idle span { color: var(--gold-dim); font-size: 13px; }
.r-result-title { font-size: 14px; font-weight: 800; margin: 0; letter-spacing: 0.02em; }
.r-result-title.win   { color: var(--green); }
.r-result-title.lose  { color: var(--red); }
.r-result-title.idle  { color: var(--gold-bright); }
.r-result-detail { font-size: 10.5px; color: var(--text-dim); margin: 0; }
.r-result-detail b { color: var(--text); }
.r-result-payout { font-size: 13px; font-weight: 800; margin: 2px 0 0; }
.r-result-payout.win  { color: var(--green); }
.r-result-payout.lose { color: var(--red); }

/* The felt wrapper — roulette rides inside the same bj-table felt, but
   slimmer so the whole board fits on screen without scrolling. */
.rl-felt {
  max-width: 540px;
  margin: 0 auto;
  padding: 10px 12px 12px;
}

/* The betting board — classic 3-column × 16-row bet slip: 01/02/03 down
   through 34/35/36, then Red/Black/Odd, Even/1-18/19-36, the dozens and
   the three 2:1 columns. Every cell is a coloured label + money input. */
.rl-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  margin: 0 auto 14px;
  padding: 10px;
  border-radius: 16px;
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(52, 199, 123, 0.10), transparent 55%),
    linear-gradient(170deg, #123326, #0a2117 60%, #071a11);
  border: 1px solid rgba(82, 190, 128, 0.3);
  box-shadow: inset 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* One board row — three equal cells that line up vertically. */
.rl-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* A bet cell: label on the left, its input immediately to the right. */
.rl-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 1px 4px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  color: #fff;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.12s ease;
}

.rl-red       { background: linear-gradient(180deg, #d64545, #9c2020); }
.rl-black     { background: linear-gradient(180deg, #3a3f4a, #191b20); }
.rl-green     { background: linear-gradient(180deg, #2f9e5f, #0d6b3a); }
.rl-red-out   { background: linear-gradient(180deg, #d64545, #9c2020); }
.rl-black-out { background: linear-gradient(180deg, #3a3f4a, #191b20); }
.rl-special {
  background: linear-gradient(180deg, #26293a, #171924);
  color: #c9d2f0;
}

.rl-cell.has-bet {
  box-shadow: inset 0 0 0 2px var(--gold-bright), 0 0 10px rgba(240, 208, 96, 0.35);
}

.rl-label {
  flex: 0 0 auto;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.rl-dollar {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: 0.8;
  line-height: 1;
}

.rl-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 18px;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-align: right;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.rl-input::placeholder { color: rgba(255, 255, 255, 0.28); }
.rl-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.22);
}
.rl-cell:has(.rl-input:focus) {
  box-shadow: inset 0 0 0 2px var(--gold-bright), 0 0 10px rgba(240, 208, 96, 0.3);
}

/* Footer strip: live total, max, clear + the Spin button. */
.rl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 540px;
  margin: 6px auto 0;
}
.rt-total { font-size: 12px; color: #b8e6c8; }
.rt-total b { color: var(--gold-bright); font-weight: 800; font-family: var(--font-mono); }
.rt-limit { font-size: 11px; color: #7fae8f; margin-left: auto; }
.rt-limit.over { color: var(--red); font-weight: 700; }
.bet-clear {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.bet-clear:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.bet-button { padding: 7px 20px; border-radius: 10px; font-size: 13px; margin-left: auto; }
.bet-button:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
  .r-stage { padding: 3px 8px 4px; }
  .r-ball { width: 28px; height: 28px; font-size: 13px; }
  .rl-felt { padding: 8px 8px 10px; }
  .rl-board { padding: 5px; gap: 2px; }
  .rl-row { gap: 2px; }
  .rl-cell { gap: 2px; padding: 1px 2px; font-size: 10px; border-radius: 3px; }
  .rl-input { height: 17px; padding: 0 2px; font-size: 10px; }
}

/* ── Racetrack (racetrack.php) — modern derby board ─────────── */

.casino-game--race { max-width: 720px; }
.race-head-mark { color: var(--gold-dim); font-size: 11px; }

.race-note { text-align: center; margin: 0 0 12px; font-size: 12.5px; }

/* The derby board — warm dirt + gold, distinct from the green blackjack felt. */
.race-track {
  position: relative;
  border-radius: 22px;
  padding: 26px 22px 22px;
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(212, 175, 55, 0.16), transparent 55%),
    linear-gradient(170deg, #2e2410, #1d1609 60%, #130d05);
  border: 1px solid rgba(212, 175, 55, 0.32);
  box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.5), 0 12px 40px rgba(0, 0, 0, 0.45);
}

.race-title { display: flex; justify-content: center; margin: 0 0 18px; }
.race-title-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe9b8;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(240, 208, 96, 0.3);
  backdrop-filter: blur(4px);
}

.horse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.horse-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.horse-card:hover { border-color: rgba(240, 208, 96, 0.45); transform: translateY(-2px); }
.horse-card input { display: none; }
.horse-card:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Jockey-saddle number plate, tinted with the horse's silk colour. */
.horse-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.32), 0 2px 6px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

.horse-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.horse-name { font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.horse-odds { color: #e0d3ae; font-size: 12px; font-family: var(--font-mono); }
.horse-payout { color: var(--gold-bright); font-weight: 800; font-size: 13px; font-family: var(--font-mono); flex-shrink: 0; }

/* Bet bar with quick-bet chips (mirrors the blackjack bet bar). */
.race-betbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.race-bet-input-wrap { position: relative; flex: 1; min-width: 170px; }
.race-dollar {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-bright);
  font-weight: 800;
  pointer-events: none;
  z-index: 1;
}
.race-bet-input {
  width: 100%;
  padding: 11px 12px 11px 26px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-family: var(--font-mono);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.race-bet-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); }
.race-bet-input::placeholder { color: rgba(255, 255, 255, 0.35); }

.race-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.race-chip-btn {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #e8c66a;
  background: rgba(240, 208, 96, 0.1);
  border: 1px solid rgba(240, 208, 96, 0.35);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.race-chip-btn:hover { background: rgba(240, 208, 96, 0.22); color: var(--gold-bright); }
.race-chip-btn:active { transform: translateY(1px); }

.race-place-btn { padding: 11px 22px; border-radius: 12px; font-size: 14px; }

.race-hint { text-align: center; font-size: 12.5px; color: #ecdcb4; margin: 14px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .horse-card { transition: none; }
  .horse-card:hover { transform: none; }
}

/* ── Daily rewards (daily.php) — login streak + daily quests ── */

.daily-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-color: rgba(212, 175, 55, 0.35);
}
.daily-teaser-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.daily-teaser-icon { font-size: 26px; line-height: 1; }
.daily-teaser-title { font-size: 14px; }

.dq-streak {
  position: relative;
  border-radius: 20px;
  padding: 24px 22px 20px;
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(212, 175, 55, 0.16), transparent 55%),
    linear-gradient(170deg, #2e2410, #1d1609 60%, #130d05);
  border: 1px solid rgba(212, 175, 55, 0.32);
  box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.dq-streak-count {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--gold-bright);
  line-height: 1;
  text-shadow: 0 2px 14px rgba(212, 175, 55, 0.35);
}
.dq-streak-label {
  margin: 8px 0 16px;
  color: #ecdcb4;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.dq-ladder {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.dq-day {
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d8cba4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dq-day b { display: block; font-size: 12px; color: #fff; margin-bottom: 2px; }
.dq-day small { display: block; font-family: var(--font-mono); font-size: 10px; color: #b9a97c; }
.dq-day-current {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.14);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}
.dq-day-current b, .dq-day-current small { color: var(--gold-bright); }
.dq-day-done { opacity: 0.55; }
.dq-day-done b::after { content: " \2713"; color: var(--green); }

.dq-quests { display: flex; flex-direction: column; gap: 10px; }
.dq-quest {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dq-quest-ready {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.06);
}
.dq-quest-done { opacity: 0.6; }
.dq-quest-main { flex: 1; min-width: 0; }
.dq-quest-name { font-weight: 700; font-size: 14px; }
.dq-quest-desc { color: var(--muted); font-size: 12px; margin: 1px 0 8px; }
.dq-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.dq-progress-bar { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.dq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.dq-quest-reward {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dq-quest-reward .reward-cash { color: var(--green); }
.dq-quest-reward .reward-points { color: var(--gold-bright); }

@media (max-width: 640px) {
  .dq-ladder { grid-template-columns: repeat(4, 1fr); }
  .dq-quest { flex-wrap: wrap; }
}

/* ── Dice Game (dice.php) ──────────────────────────────────── */

.dice-form { display: flex; flex-direction: column; gap: 14px; }
.dice-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dice-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dice-presets .muted { margin-right: 4px; }

.dice-result { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 18px; }
.dice-compare { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.dice-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dice-label { font-size: 0.78rem; color: var(--muted, #9aa0a9); text-transform: uppercase; letter-spacing: 0.08em; }
.dice-vs { font-weight: 700; color: var(--muted, #9aa0a9); }

.dice-face {
  width: 84px; height: 84px; border-radius: 14px;
  background: linear-gradient(145deg, #2a2d34, #1c1e23);
  border: 1px solid #3a3f47;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 12px; gap: 0;
}
.dice-face.win { border-color: #3f9e4d; box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 14px rgba(63,158,77,.35); }
.dice-face.lose { border-color: #c0392b; box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 14px rgba(192,57,43,.3); }
.dice-dot {
  width: 14px; height: 14px; border-radius: 50%; margin: auto;
  background: radial-gradient(circle at 35% 30%, #fff, #cfd3da 65%, #8b9099);
  box-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.dice-face.win .dice-dot { background: radial-gradient(circle at 35% 30%, #b6f0c0, #3f9e4d 70%, #2c7036); }
.dice-face.lose .dice-dot { background: radial-gradient(circle at 35% 30%, #ffb3aa, #c0392b 70%, #8e2a20); }

.dice-big {
  min-width: 96px; padding: 14px 18px; border-radius: 14px; text-align: center;
  background: linear-gradient(145deg, #2a2d34, #1c1e23);
  border: 1px solid #3a3f47;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.dice-big.win { border-color: #3f9e4d; box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 14px rgba(63,158,77,.35); }
.dice-big.lose { border-color: #c0392b; box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 14px rgba(192,57,43,.3); }
.dice-big-number { font-size: 2rem; font-weight: 800; color: var(--fg, #e8eaed); line-height: 1; }
.dice-big-sides { font-size: 0.72rem; color: var(--muted, #9aa0a9); text-transform: uppercase; letter-spacing: 0.1em; }

.dice-result-box {
  padding: 10px 18px; border-radius: 10px; font-size: 0.95rem; text-align: center;
  background: rgba(0,0,0,.25); border: 1px solid #333843;
}
.dice-result-box.win { border-color: #3f9e4d; color: #b6f0c0; }
.dice-result-box.lose { border-color: #c0392b; color: #ffb3aa; }

.dice-streak { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.dice-streak-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.streak-dot {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
  border: 1px solid #333843;
}
.streak-dot.win { background: rgba(63,158,77,.18); color: #7fd98c; border-color: #3f9e4d; }
.streak-dot.lose { background: rgba(192,57,43,.18); color: #ff8a7a; border-color: #c0392b; }

/* ── Blackjack (blackjack.php) — modern felt table ─────────── */

.casino-game--bj { max-width: 720px; }
.bj-head-suit { color: var(--gold-dim); font-size: 11px; }

.bj-note { text-align: center; margin: 0 0 12px; font-size: 12.5px; }

.bj-table {
  position: relative;
  border-radius: 22px;
  padding: 26px 22px 22px;
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(52, 199, 123, 0.16), transparent 55%),
    linear-gradient(170deg, #14382b, #0c2419 60%, #081a12);
  border: 1px solid rgba(82, 190, 128, 0.35);
  box-shadow: inset 0 2px 30px rgba(0, 0, 0, 0.5), 0 12px 40px rgba(0, 0, 0, 0.45);
}

.bj-hand { display: flex; flex-direction: column; gap: 12px; }
.bj-hand-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bj-head-right { display: flex; align-items: center; gap: 8px; }

.bj-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9f2d8;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(129, 230, 166, 0.25);
  backdrop-filter: blur(4px);
}
.bj-chip b { font-weight: 800; color: var(--gold-bright); letter-spacing: 0; }
.bj-chip-dealer { color: #ffd9a8; border-color: rgba(240, 208, 96, 0.3); }

.bj-value {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fdf6d8;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}

.bj-cards { display: flex; gap: 10px; align-items: center; min-height: 104px; flex-wrap: wrap; }

.bj-betline { font-size: 12.5px; color: #b8e6c8; }
.bj-betline b { color: var(--gold-bright); font-weight: 800; }

/* Poker-style corner-index cards. */
.playing-card {
  position: relative;
  width: 72px;
  height: 100px;
  border-radius: 11px;
  background: linear-gradient(160deg, #ffffff, #e9edf2 85%, #dde2e9);
  border: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  animation: bj-deal 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.playing-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55); }
.playing-card.red { color: #d3232e; }
.playing-card.black { color: #171a20; }

.card-corner {
  position: absolute;
  top: 6px;
  left: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.02;
  font-family: var(--font-mono);
}
.card-corner i { font-style: normal; font-size: 11px; margin-top: 1px; }
.card-corner-br { top: auto; left: auto; right: 7px; bottom: 6px; transform: rotate(180deg); }

.card-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  opacity: 0.92;
}

.playing-card.hidden {
  background: linear-gradient(160deg, #2d5f8f, #1e3f63);
  border-color: #122a44;
}
.playing-card.hidden:hover { transform: none; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5); }
.card-back {
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 3px, transparent 3px 8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Staggered deal animation. */
.bj-cards .playing-card:nth-child(2) { animation-delay: 0.07s; }
.bj-cards .playing-card:nth-child(3) { animation-delay: 0.14s; }
.bj-cards .playing-card:nth-child(4) { animation-delay: 0.21s; }
.bj-cards .playing-card:nth-child(5) { animation-delay: 0.28s; }
.bj-cards .playing-card:nth-child(6) { animation-delay: 0.35s; }
.bj-cards .playing-card:nth-child(7) { animation-delay: 0.42s; }

@keyframes bj-deal {
  from { opacity: 0; transform: translateY(-16px) rotate(-7deg) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .playing-card { animation: none; }
  .playing-card:hover { transform: none; }
}

/* Split hands — side by side. */
.bj-hands { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .bj-hands { grid-template-columns: 1fr; } }

.bj-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; }
.bj-divider::before, .bj-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 208, 96, 0.4), transparent);
}
.bj-divider span { font-size: 11px; font-weight: 800; letter-spacing: 0.25em; color: var(--gold-dim); }

/* Result badges. */
.bj-result {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.bj-result.win { background: rgba(63,158,77,.28); color: #b6f0c0; border: 1px solid #3f9e4d; }
.bj-result.lose, .bj-result.bust { background: rgba(192,57,43,.28); color: #ffb3aa; border: 1px solid #c0392b; }
.bj-result.push { background: rgba(210,180,90,.22); color: #f0dfb0; border: 1px solid #b89a45; }
.bj-result.stand { background: rgba(100,140,200,.22); color: #c3d6f5; border: 1px solid #5a7fb5; }

.bj-hint { text-align: center; font-size: 12.5px; color: #cdeeda; margin: 14px 0 0; }

/* Bet bar with quick-bet chips. */
.bj-betbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.bj-bet-input-wrap { position: relative; flex: 1; min-width: 170px; }
.bj-dollar {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-bright);
  font-weight: 800;
  pointer-events: none;
  z-index: 1;
}
.bj-bet-input {
  width: 100%;
  padding: 11px 12px 11px 26px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-family: var(--font-mono);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bj-bet-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); }
.bj-bet-input::placeholder { color: rgba(255, 255, 255, 0.35); }

.bj-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bj-chip-btn {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #e8c66a;
  background: rgba(240, 208, 96, 0.1);
  border: 1px solid rgba(240, 208, 96, 0.35);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.bj-chip-btn:hover { background: rgba(240, 208, 96, 0.22); color: var(--gold-bright); }
.bj-chip-btn:active { transform: translateY(1px); }

.bj-deal-btn { padding: 11px 22px; border-radius: 12px; font-size: 14px; }

/* Pill action buttons. */
.bj-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.bj-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: #fff;
  transition: filter 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.bj-btn:hover { filter: brightness(1.12); }
.bj-btn:active { transform: translateY(1px); }
.bj-btn-hit {
  background: linear-gradient(180deg, #2e8b3d, #1f6a2e);
  box-shadow: 0 6px 18px rgba(46, 139, 61, 0.35);
}
.bj-btn-stand {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #17120a;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.3);
}
.bj-btn-double {
  background: linear-gradient(180deg, #2b6cb0, #1d4f86);
  box-shadow: 0 6px 18px rgba(43, 108, 176, 0.3);
}
.bj-btn-split {
  background: transparent;
  border-color: rgba(167, 139, 250, 0.6);
  color: #c3b5f8;
  box-shadow: 0 6px 18px rgba(139, 92, 246, 0.15);
}
.bj-btn-split:hover { background: rgba(139, 92, 246, 0.12); filter: none; }

/* Insurance panel. */
.bj-insurance {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(170deg, rgba(184, 154, 69, 0.14), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(184, 154, 69, 0.5);
  text-align: center;
}
.bj-insurance-title { margin: 0 0 6px; color: var(--gold-bright); font-weight: 800; letter-spacing: 0.02em; }
.bj-insurance-sub { margin: 0 0 14px; color: var(--text-dim); font-size: 13px; }
.bj-insurance-sub strong { color: var(--text); }
.bj-insurance-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bj-insurance-actions .btn { border-radius: 999px; }

.bj-howto { text-align: center; margin: 12px 0 0; font-size: 12.5px; }

/* ── Old-game casino layout (roulette/blackjack/dice/racetrack) ─────────────
   Mirrors the old game's pages: a centered compact game table with a header
   bar, the game + bet form inside, a status line beneath it, and stacked
   Casino Statistics / Casino Management / Staff Tools tables for owners. */

.casino-wrap { display: flex; flex-direction: column; gap: 18px; }

.casino-game {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Roulette needs the old game's wide board + bet form side by side. */
.casino-game--wide { max-width: 920px; }
.casino-game-head {
  background: var(--surface-3);
  border-bottom: 1px solid var(--border-strong);
  padding: 9px 14px;
  text-align: center;
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.casino-game-body { padding: 16px; }

/* The owner / max-bet line under the game (old game's gray note). */
.casino-status {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin: 0;
  line-height: 1.7;
}
.casino-status a { font-weight: 700; }

/* Anchor targets (e.g. the Take Over section) land below the sticky topbar. */
#takeover { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* Stacked management tables (Casino Statistics / Management / Staff). */
.casino-stack { display: flex; flex-direction: column; gap: 16px; }
.casino-sect {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.casino-sect-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 7px 12px;
  text-align: center;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.casino-sect-body { padding: 12px 14px; }
.casino-sect-body .sect-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.casino-sect-body .sect-row + .sect-row { border-top: 1px solid var(--border); }
.casino-sect-body .sect-label { color: var(--text-dim); font-weight: 600; }
.casino-sect-body .sect-value { color: var(--gold-bright); font-weight: 700; }
.casino-sect-body .sect-actions { display: flex; flex-direction: column; gap: 8px; }
.casino-sect-body .sect-actions .inline-form { display: flex; gap: 8px; }
.casino-sect-body .sect-actions .textbox { flex: 1; min-width: 0; }

/* ── First-run tutorial tour ─────────────────────────────────── */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: transparent;
}

.tour-spotlight {
  position: fixed;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.7);
  border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  transition: all 0.25s ease;
  pointer-events: none;
}

.tour-tip {
  position: fixed;
  z-index: 81;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  padding: 14px;
}

.tour-tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tour-tip-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.tour-tip-title {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--text);
}

.tour-tip-text {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
}

.tour-tip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ── Crew profile ──────────────────────────────────────────── */

.crew-profile-image-wrap { padding: 10px; }
.crew-profile-image {
  display: block;
  width: 100%;
  max-width: 760px;
  max-height: 380px;
  object-fit: cover;
  margin: 0 auto;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.crew-profile-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 220px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}