:root {
  --bg: #080d13;
  --bg-elevated: #0d141c;
  --bg-card: #121b25;
  --border: #223140;
  --text: #eef3f1;
  --text-dim: #93a3ab;
  --accent: #1ce783;
  --accent-dim: #06c167;
  --gold: #ffb020;
  --danger: #f2545b;
  --radius: 14px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.navbar {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.footer-brand .logo-img {
  height: 32px;
}

.nav-links {
  display: flex;
  gap: 22px;
  margin-left: 12px;
  flex: 1;
}

.nav-links a {
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav-links a:hover { color: var(--text); }

/* Games dropdown — hover/focus on desktop (no JS needed), always-expanded
   as an indented sub-item once the mobile menu is open (see the mobile
   override further down), since touch has no hover to trigger it with. */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  margin-bottom: 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.7;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown:focus-within .nav-dropdown-trigger::after {
  transform: rotate(-135deg) translate(1px, 1px);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  min-width: 150px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-menu li { list-style: none; }

.nav-dropdown-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover { background: var(--bg-elevated); }

.nav-actions {
  display: flex;
  gap: 10px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}

/* Buttons */
.btn {
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.15s ease, background 0.15s ease;
  font-family: inherit;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: #06231a;
}
.btn-primary:hover { background: var(--accent-dim); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-elevated); }

.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
}
.btn-outline:hover { background: rgba(28, 231, 131, 0.08); }

.btn-lg { padding: 14px 26px; font-size: 1rem; }

/* Hero */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 90px 24px 60px;
  text-align: center;
}

.hero-inner { max-width: 720px; margin: 0 auto; }

.eyebrow {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.hero-sub {
  color: var(--text-dim);
  font-size: 1.05rem;
  margin: 0 0 32px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-disclosure {
  color: var(--text-dim);
  font-size: 0.8rem;
  max-width: 480px;
  margin: 0 auto;
}

.hero-image {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* The source banner is an opaque raster image with its own dark background —
   fade a frame of the page background over its edges so it reads as part of
   the page instead of a pasted-in rectangle. */
.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 18%, transparent 78%, var(--bg) 100%);
}

/* Simulated activity feed */
.activity-section { padding-top: 0; padding-bottom: 24px; }

.activity-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.activity-header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.activity-header h2 { margin: 0; font-size: 1.2rem; }

.activity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
}

.activity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: activity-pulse 1.6s ease-in-out infinite;
}

@keyframes activity-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.activity-note {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin: 0 0 18px;
  max-width: 640px;
}

.activity-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.activity-tab {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.activity-tab:hover { color: var(--text); }

.activity-tab.active {
  background: rgba(28, 231, 131, 0.1);
  border-color: var(--accent-dim);
  color: var(--accent);
}

/* Column widths shared by the header row and every data row, so they stay
   aligned — matches gamdom.com's own live-bets table shape (User, Game,
   Time, Bet, Multiplier, Payout as real columns, not a narrative sentence). */
.activity-card {
  --activity-cols: minmax(0, 1.2fr) minmax(0, 1.3fr) 68px 76px 80px 84px;
}

.activity-row--head {
  display: grid;
  grid-template-columns: var(--activity-cols);
  gap: 10px;
  padding: 0 14px 10px;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Continuous marquee, matching gamdom.com's own live-bets ticker: rows drift
   upward at a constant speed rather than popping in/out discretely. Driven
   entirely from script.js via requestAnimationFrame + a plain `transform`
   (not a CSS animation) — that's what lets it recycle rows one at a time at
   the invisible top/bottom edges without ever touching anything already
   visible, which is what makes it jump-free. See the big comment above
   tick() in script.js for the full picture, including the
   prefers-reduced-motion and hover-to-pause handling (both done in JS here
   since there's no CSS animation to hook into). */
.activity-viewport {
  position: relative;
  height: 460px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.activity-track {
  display: flex;
  flex-direction: column;
  gap: 4px;
  will-change: transform;
}

.activity-empty {
  color: var(--text-dim);
  font-size: 0.88rem;
  text-align: center;
  padding: 40px 0;
}

.activity-item {
  display: grid;
  grid-template-columns: var(--activity-cols);
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 0.86rem;
  /* Fixed height — every row identically tall regardless of username/game
     name length, so the track's total height (and therefore the -50% loop
     point above) is exactly predictable from item count alone. */
  height: 42.4px;
  box-sizing: border-box;
}

.activity-col--user, .activity-col--game {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.activity-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #06170f;
  background: linear-gradient(160deg, var(--accent), var(--accent-dim));
}

.activity-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.activity-icon-img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-card);
}

.activity-user-name, .activity-game-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-user-name strong { color: var(--text); font-weight: 600; }

.activity-col--time,
.activity-col--bet,
.activity-col--mult,
.activity-col--payout {
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.activity-col--time, .activity-col--bet {
  color: var(--text-dim);
}

.activity-col--mult {
  font-weight: 700;
  color: var(--text-dim);
}

.activity-col--mult.is-lucky {
  color: var(--gold);
}

.activity-col--payout {
  font-weight: 700;
  color: var(--text);
}

.activity-col--payout.is-win {
  color: var(--accent);
}

.activity-game-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(28, 231, 131, 0.35);
  text-underline-offset: 2px;
}

.activity-game-link:hover {
  text-decoration-color: currentColor;
}

/* Quick facts */
.quick-facts-section { padding-top: 0; padding-bottom: 24px; }

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

.quick-fact {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-fact strong {
  font-size: 1.6rem;
  color: var(--accent);
}

.quick-fact strong span {
  font-size: 0.95rem;
  color: var(--text-dim);
  font-weight: 500;
}

.quick-fact > span {
  color: var(--text-dim);
  font-size: 0.82rem;
}

.quick-facts-note {
  color: var(--text-dim);
  font-size: 0.78rem;
  margin: 14px 0 0;
  max-width: 640px;
}

/* Table of contents */
.toc-section { padding-top: 0; padding-bottom: 24px; }

.toc-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.toc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px;
  margin: 10px 0 0;
  padding: 0;
  counter-reset: toc;
}

.toc-list li {
  list-style: none;
  color: var(--text-dim);
  font-size: 0.92rem;
}

.toc-list a {
  color: var(--text);
  transition: color 0.15s ease;
}

.toc-list a:hover { color: var(--accent); }

/* Step list */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.step-list li {
  list-style: none;
  counter-increment: step;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px 20px 60px;
  position: relative;
}

.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #06231a;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-list h3 { margin: 0 0 6px; font-size: 1rem; }
.step-list p { margin: 0; color: var(--text-dim); font-size: 0.92rem; }

/* Long-form review copy */
.review-copy {
  margin-top: 36px;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.review-copy h3 {
  margin: 18px 0 2px;
  font-size: 1.05rem;
}

.review-copy h3:first-child { margin-top: 0; }

.review-copy p {
  color: var(--text-dim);
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.data-table-wrap {
  margin-top: 20px;
  max-width: 720px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.data-table th, .data-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table thead th {
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--bg-elevated); }

/* Verdict */
.verdict-card {
  background: linear-gradient(135deg, rgba(62,224,143,0.12), rgba(255,176,32,0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  gap: 28px;
  align-items: center;
}

.verdict-score {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.verdict-score strong {
  font-size: 3.2rem;
  color: var(--accent);
  line-height: 1;
}

.verdict-score span {
  color: var(--text-dim);
  font-size: 1.1rem;
}

.verdict-copy h2 { margin: 4px 0 10px; font-size: 1.4rem; }
.verdict-copy p { color: var(--text-dim); margin: 0; }

/* Sections */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 70px 24px;
}

.section-head {
  margin-bottom: 32px;
}

.section-head h1,
.section-head h2 {
  font-size: 1.8rem;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.section-head p {
  color: var(--text-dim);
  max-width: 560px;
  margin: 0;
}

.section-cta {
  margin-top: 32px;
  text-align: center;
}

/* Bonus strip */
.bonus-strip { padding-top: 0; }

.bonus-card {
  background: linear-gradient(135deg, rgba(62,224,143,0.12), rgba(255,176,32,0.08));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.bonus-card h2 { margin: 4px 0 6px; font-size: 1.5rem; }
.bonus-card p { color: var(--text-dim); margin: 0; }

/* Game grid */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

.game-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.game-card:hover {
  transform: translateY(-4px);
}

.game-thumb {
  height: 160px;
  position: relative;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--bg-card)), var(--bg-card));
  overflow: hidden;
}

.game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
  display: block;
}

/* Crash/Mines thumbnails are generic promotional art — tall portrait images
   (icon cluster + wordmark), so the shared "center 75%" crop above would cut
   the icon cluster off entirely. Bias toward the upper-middle where the
   rocket/diamond artwork sits. */
a.game-card[href$="crash"] .game-thumb img,
a.game-card[href$="mines"] .game-thumb img {
  object-position: center 32%;
}

/* Icon fallback for cards with no source artwork to use (our own tools,
   not a game with promo art to self-host). */
.game-thumb-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  opacity: 0.85;
}

.game-thumb .tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.45);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}

.game-card h3 {
  font-size: 0.95rem;
  margin: 14px 14px 2px;
}

.game-card p {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0 14px 14px;
}

/* Review */
.fair-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}

.fair-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.fair-list li {
  padding-left: 22px;
  position: relative;
  color: var(--text-dim);
}

.fair-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.fair-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.fair-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.fair-row:last-child { border-bottom: none; }
.fair-row span { color: var(--text-dim); }
.fair-row code {
  background: var(--bg-elevated);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
}

.fair-row.result code { color: var(--accent); }

/* Pros & cons */
.pros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.pros-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.pros-card h3 { margin: 0 0 14px; font-size: 1.05rem; }

.check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.check-list li {
  padding-left: 22px;
  position: relative;
  color: var(--text-dim);
  font-size: 0.92rem;
}

.check-list.good li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.check-list.bad li::before {
  content: "!";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 20px;
}

.faq-item summary {
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--accent);
  font-weight: 700;
}

.faq-item[open] summary::after { content: "−"; }

.faq-item p {
  color: var(--text-dim);
  margin: 0 0 18px;
  font-size: 0.92rem;
}

/* Responsible gambling */
.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.help-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.help-card h3 { font-size: 0.95rem; margin: 0 0 8px; }
.help-card p { color: var(--text-dim); font-size: 0.85rem; margin: 0; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 50px 24px 24px;
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-brand {
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-brand p {
  flex-basis: 100%;
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.85rem;
  margin: 8px 0 0;
}

.footer-grid h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.footer-grid ul { display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { color: var(--text); font-size: 0.9rem; }
.footer-grid a:hover { color: var(--accent); }

.footer-legal-notice {
  max-width: var(--max-width);
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.footer-legal-notice h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0 0 10px;
}

.footer-legal-notice p {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 8px;
}

.footer-legal-notice p:last-child { margin-bottom: 0; }

.footer-bottom {
  max-width: var(--max-width);
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: center;
}

.footer-lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 0.78rem;
}

.footer-lang-switch span {
  color: var(--text-dim);
}

.footer-lang-switch a {
  color: var(--text-dim);
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

.footer-lang-switch a:hover { color: var(--text); }

.footer-lang-switch a.active {
  color: var(--accent);
  border-color: var(--accent-dim);
}

/* Crash game demo — kept deliberately compact top-to-bottom (short intro,
   tight paddings) so the whole card fits a typical laptop viewport without
   scrolling, rather than the usual long-form review-page rhythm. */
.crash-intro-section {
  padding: 22px 24px 10px;
}

.crash-intro-section .section-head { margin-bottom: 0; }
.crash-intro-section h1 { font-size: 1.5rem; margin: 0; }
.crash-intro-section .eyebrow { margin-bottom: 4px; }

.crash-game {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 28px;
}

.crash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.crash-history {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  /* Fixed floor so the bar is the same height empty or full of pills — Mines
     starts empty (no seeded history) and fills in as you play, and without
     this the whole card would grow/shift the first time a pill appears. */
  min-height: 52px;
  overflow-x: auto;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.crash-pill {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.crash-pill--mid { color: var(--accent); border-color: var(--accent-dim); }
.crash-pill--high { color: var(--gold); border-color: var(--gold); }
.crash-pill--loss { color: var(--danger); border-color: var(--danger); }

.crash-body {
  display: flex;
}

.crash-stage {
  flex: 1;
  position: relative;
  min-height: min(340px, 44vh);
}

@keyframes crash-win-flash {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

.crash-win-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(28, 231, 131, 0.4), transparent 70%);
  pointer-events: none;
  animation: crash-win-flash 0.6s ease-out forwards;
  z-index: 4;
}

.crash-bust-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(242, 84, 91, 0.45), transparent 70%);
  pointer-events: none;
  animation: crash-win-flash 0.5s ease-out forwards;
  z-index: 4;
}

@keyframes crash-win-float {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.85); }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -56px) scale(1); }
}

.crash-win-float {
  position: absolute;
  left: 50%;
  top: 38%;
  color: var(--accent);
  font-weight: 800;
  font-size: 1.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  white-space: nowrap;
  animation: crash-win-float 1.1s ease-out forwards;
  z-index: 5;
}

.crash-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.crash-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

/* Mines stage — no canvas to overlay text on like Crash has, so the
   multiplier/status readout and the tile grid just stack in normal flow
   instead of the absolute-positioned .crash-readout trick. */
.mines-stage {
  flex: 1;
  display: flex;
  /* Needed so the absolutely-positioned win/bust flash effects (appended
     here by mines.js) anchor to this box instead of falling back to the
     viewport as their containing block. */
  position: relative;
  /* Top-anchored on purpose, not centered — .crash-body's default
     align-items:stretch means this box grows taller whenever the sibling
     panel's content (e.g. the potential-payout text) grows, and a centered
     grid would visibly re-center/shift every time that happens. Pinning it
     to the top means the box growing just adds empty space below it. */
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  min-height: min(560px, 64vh);
}

.mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  /* Capped by vh, not just a flat px value — a 5-wide grid of square tiles
     is exactly as tall as it is wide, so on a shorter laptop screen this is
     what keeps the whole card fitting on screen without scrolling. Measured
     against real headroom at both 1440x818 (96px to spare at 56vh) and
     1280x750 (66px to spare) — 62vh uses most of that room at the more
     constrained 750px-tall viewport while still leaving ~15px margin there. */
  width: min(560px, 100%, 62vh);
}

.mines-grid.is-shake { animation: mines-grid-shake 0.4s ease; }

@keyframes mines-grid-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.mines-tile {
  aspect-ratio: 1;
  border-radius: 14px;
  border: none;
  background: var(--bg-elevated);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.3s ease;
}

.mines-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
}

.mines-tile:disabled { cursor: default; }

.mines-tile.is-gem {
  background: rgba(28, 231, 131, 0.16);
  box-shadow: inset 0 -3px 0 rgba(28, 231, 131, 0.3);
  color: var(--accent);
  animation: mines-pop 0.25s ease;
}

.mines-tile.is-mine {
  background: rgba(242, 84, 91, 0.18);
  box-shadow: inset 0 -3px 0 rgba(242, 84, 91, 0.35);
  color: var(--danger);
  animation: mines-pop 0.25s ease;
}

@keyframes mines-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

.crash-multiplier {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Green while a round is live — the climbing number is the win growing,
     so it reads as a positive, not just a neutral readout. */
  color: var(--accent);
  text-shadow: 0 4px 24px rgba(28, 231, 131, 0.25);
}

.crash-multiplier.is-waiting {
  color: var(--text-dim);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.crash-multiplier.is-crashed { color: var(--danger); }

.crash-status {
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 8px;
}

.crash-panel {
  width: 300px;
  flex-shrink: 0;
  padding: 16px 20px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crash-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.crash-balance strong {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}

@keyframes crash-balance-pop {
  0% { transform: scale(1); text-shadow: 0 0 0 rgba(28, 231, 131, 0); }
  40% { transform: scale(1.14); text-shadow: 0 0 12px rgba(28, 231, 131, 0.65); }
  100% { transform: scale(1); text-shadow: 0 0 0 rgba(28, 231, 131, 0); }
}

.crash-balance strong.is-win-pop {
  display: inline-block;
  animation: crash-balance-pop 0.5s ease;
}

.crash-balance-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crash-balance button {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.crash-balance button:hover { color: var(--text); }

.crash-mute {
  font-size: 0.95rem;
  text-decoration: none !important;
  line-height: 1;
}

.crash-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.crash-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.crash-input:focus { outline: none; border-color: var(--accent-dim); }

/* Native <select> arrows render flush against the box edge with no
   reserved space, which reads as "too close to the border" next to this
   input's other rounded padding. Replace it with a custom CSS chevron (same
   look as the nav dropdown's) with real breathing room from the edge. */
select.crash-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 15px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.crash-input:disabled { opacity: 0.55; }

.crash-chip-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.crash-chip {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 7px 0;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.crash-chip:hover:not(:disabled) { color: var(--text); border-color: var(--accent-dim); }
.crash-chip:disabled { opacity: 0.4; cursor: not-allowed; }

.crash-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.crash-toggle-row label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.mines-percent {
  color: var(--text-dim);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.crash-toggle-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.crash-action {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  /* Always a 1px border, transparent by default — reserving the same box
     size in every state (only .is-placed below swaps the color to visible)
     so switching states never nudges the button's height by the border's
     width, which otherwise shifts everything below it by a couple of px. */
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  background: var(--accent);
  color: #06231a;
  font-family: inherit;
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}

.crash-action:hover:not(:disabled) { transform: translateY(-1px); }
.crash-action:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Cash Out is the "take your win" action — green, with a slow glow so it
   keeps drawing the eye the whole time a bet is live and cashable. */
@keyframes crash-cashout-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(28, 231, 131, 0); }
  50% { box-shadow: 0 0 16px 4px rgba(28, 231, 131, 0.4); }
}

.crash-action.is-cashout {
  background: var(--accent);
  color: #06231a;
  animation: crash-cashout-glow 1.6s ease-in-out infinite;
}

.crash-action.is-placed {
  background: var(--bg-elevated);
  color: var(--text-dim);
  border-color: var(--border);
}

/* Distinct from .is-placed (busted/closed/neutral) — a completed cash-out
   is a win and should read as one, not blend into the muted/neutral states.
   Gold rather than green here, to keep green reserved for the live/in-play
   states (multiplier, Cash Out glow) elsewhere on this panel. */
.crash-action.is-won {
  background: rgba(255, 176, 32, 0.14);
  color: var(--gold);
  border-color: var(--gold);
}

@keyframes crash-action-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(28, 231, 131, 0.5); }
  35% { transform: scale(1.045); box-shadow: 0 0 0 8px rgba(28, 231, 131, 0.2); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(28, 231, 131, 0); }
}

.crash-action.is-win-pulse {
  animation: crash-action-pulse 0.55s ease;
}

.crash-potential {
  min-height: 1.2em;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}

.crash-potential.is-win { color: var(--accent); font-weight: 700; }
.crash-potential.is-loss { color: var(--danger); }

.crash-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

.crash-note a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(28, 231, 131, 0.35); }
.crash-note a:hover { text-decoration-color: currentColor; }

/* Odds converter tool */
.tools-game {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 28px;
}

.tools-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.tools-field label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.tools-probability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.tools-probability span { color: var(--text-dim); font-size: 0.9rem; }

.tools-probability strong {
  color: var(--accent);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.tools-error {
  color: var(--danger);
  font-size: 0.8rem;
  min-height: 1.2em;
  margin: 0 0 12px;
}

.tools-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tools-chip-row .crash-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
}

.tools-note {
  font-size: 0.76rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

/* Bet slip calculator */
.calc-bets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.calc-add-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 0;
}

.calc-add-btn:hover { color: var(--accent-dim); }

.calc-bets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.calc-bet-row {
  display: flex;
  gap: 8px;
}

.calc-bet-row .calc-bet-name { flex: 2; min-width: 0; }
.calc-bet-row .calc-bet-odds { flex: 1; min-width: 0; }

.calc-remove-btn {
  flex-shrink: 0;
  width: 40px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.calc-remove-btn:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.calc-remove-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.calc-single-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.calc-single-result {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 1fr 1.2fr;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.85rem;
}

.calc-single-result-name {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calc-single-result-odds {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.calc-single-result-payout {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.calc-single-result-profit {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.calc-parlay-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.calc-parlay-label {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.calc-parlay-odds {
  color: var(--text);
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 16px;
}

.calc-parlay-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.calc-parlay-stats > div {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px;
}

.calc-parlay-stats span {
  display: block;
  color: var(--text-dim);
  font-size: 0.76rem;
  margin-bottom: 4px;
}

.calc-parlay-stats strong {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.calc-parlay-stats strong.is-profit { color: var(--accent); }

/* Responsive */
@media (max-width: 860px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .fair-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .verdict-card { flex-direction: column; text-align: center; }
  .step-list li { padding-left: 24px; padding-top: 56px; }
  .step-list li::before { left: 24px; top: 20px; }

  /* Below this width there isn't room for all 6 columns — drop Time and
     Multiplier and keep User/Game/Bet/Payout, on both the header row and
     every data row (they share --activity-cols, so this stays aligned). */
  .activity-card {
    --activity-cols: minmax(0, 1fr) minmax(0, 1fr) 66px 76px;
  }
  .activity-col--time,
  .activity-col--mult {
    display: none;
  }

  .crash-body { flex-direction: column; }
  .crash-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); }
  .crash-stage { min-height: 300px; }
  .mines-stage { min-height: 360px; padding: 18px; }
  .mines-grid { width: min(360px, 100%); gap: 8px; }
  .mines-tile { font-size: 1.6rem; border-radius: 10px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tools-card { padding: 20px; }
  .calc-single-result {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name odds" "payout profit";
    row-gap: 4px;
  }
  .calc-single-result-name { grid-area: name; }
  .calc-single-result-odds { grid-area: odds; text-align: right; }
  .calc-single-result-payout { grid-area: payout; text-align: left; }
  .calc-single-result-profit { grid-area: profit; }
  .calc-parlay-stats { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .navbar.open .nav-links,
  .navbar.open .nav-actions {
    display: flex;
  }
  .navbar.open {
    flex-wrap: wrap;
  }
  .navbar.open .nav-links {
    flex-direction: column;
    /* flex-basis 100% + shrink:0, not just `width: 100%` — with only `width`,
       there was still ~118px free on the logo/toggle row, and instead of
       wrapping to its own line the browser shrank this into that leftover
       space, squeezing all 5 links into a narrow column overlapping the
       header row (confirmed via computed layout: nav-links ended up
       118px wide, 176px tall, top-aligned with the header instead of below
       it). flex-shrink: 0 makes it refuse to shrink, forcing the wrap. */
    flex: 1 0 100%;
    order: 3;
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    gap: 2px;
  }
  .navbar.open .nav-links a {
    display: block;
    padding: 10px 4px;
  }
  /* No hover on touch — the dropdown just stays expanded inline as an
     indented sub-item once the mobile menu itself is open. */
  .navbar.open .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0 0 0 16px;
    margin: 0;
  }
  .navbar.open .nav-dropdown-menu a {
    padding: 8px 4px;
    color: var(--text-dim);
  }
  .navbar.open .nav-actions {
    order: 4;
    flex: 1 0 100%;
    margin-top: 4px;
    padding-bottom: 4px;
  }
  .navbar.open .nav-actions .btn {
    width: 100%;
    text-align: center;
  }
}