@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@700;800;900&display=swap");

:root {
  color-scheme: dark;
  --paper: #09090b;
  --paper-deep: #111115;
  --ink: #f8f7f6;
  --ink-soft: #c2c0c3;
  --line: #39383d;
  --forest: #c91e31;
  --mint: #fff9f7;
  --coral: #ef3344;
  --coral-deep: #ff7781;
  --panel: #151519;
  --muted: #29282d;
  --font-display: "Barlow Condensed", Impact, sans-serif;
  --font-body: "Barlow", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.page-shell {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  padding: 0 clamp(20px, 5.3vw, 84px);
}

.page-shell::before {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  content: "";
  inset: 0;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}

.topbar {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark, .closed-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  color: var(--paper);
  background: var(--forest);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.08em;
  transform: rotate(-5deg);
}
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; }
.brand-copy strong span { color: var(--coral-deep); }
.brand-copy small { color: var(--ink-soft); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.topbar-note, .balance-caption, .section-index, .rail-title, .game-tag, .round-count, .side-card-head, .tiny-status, .history-total, .page-footer, .age-topline, .age-legal, .rail-stamp {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}
.topbar-note { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.balance-chip { display: grid; justify-items: end; gap: 4px; min-width: 120px; }
.balance-caption { color: var(--ink-soft); }
.balance-value { display: flex; align-items: baseline; gap: 6px; }
.balance-value strong { font-family: var(--font-display); font-size: 25px; line-height: 1; letter-spacing: -.07em; }
.balance-value span { font-size: 11px; color: var(--ink-soft); }

.app-content { animation: enter .45s ease both; }
.intro-row { display: flex; align-items: end; justify-content: space-between; padding: 42px 0 31px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.eyebrow-rule { width: 24px; height: 2px; background: var(--coral); }
h1, h2, p { margin-top: 0; }
.intro-row h1, .closed-screen h1, .age-dialog h1 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(43px, 5.4vw, 72px);
  font-weight: 900;
  letter-spacing: -.085em;
  line-height: .92;
}
.intro-row h1 span, .closed-screen h1 span, .age-dialog h1 span { color: var(--coral-deep); }
.intro-aside { display: flex; flex-direction: column; align-items: flex-end; max-width: 235px; padding: 0 0 7px; }
.intro-aside p { max-width: 205px; margin-bottom: 13px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; text-align: right; }
.round-count { padding: 7px 9px; border: 1px solid var(--line); color: var(--forest); }

.game-layout { display: grid; grid-template-columns: 194px minmax(0, 1fr) 270px; align-items: start; gap: 22px; }
.mode-rail { min-height: 100%; display: flex; flex-direction: column; padding: 16px 0 0; }
.rail-heading { display: grid; gap: 10px; padding: 0 12px 15px; border-bottom: 1px solid var(--line); }
.section-index { color: #74827b; }
.rail-title { font-size: 9px; color: var(--forest); letter-spacing: .1em; }
.mode-list { display: grid; padding-top: 6px; }
.mode-button {
  position: relative;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px 1fr 18px;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid rgba(201,208,195,.7);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mode-button:hover { transform: translateX(3px); }
.mode-button.is-active { color: var(--paper); background: var(--forest); }
.mode-number { color: #89958c; font-family: monospace; font-size: 10px; }
.is-active .mode-number { color: var(--mint); }
.mode-name { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.mode-arrow { color: var(--coral); opacity: 0; }
.is-active .mode-arrow, .mode-button:hover .mode-arrow { opacity: 1; }
.rail-footer { margin-top: auto; padding: 22px 12px 3px; }
.rail-stamp { display: inline-block; padding: 6px 8px; border: 1px solid var(--coral); color: var(--coral-deep); transform: rotate(-2deg); }
.rail-footer p { margin: 11px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }

.play-column { min-width: 0; }
.play-card { position: relative; padding: 23px clamp(18px, 3vw, 36px) 24px; background: var(--panel); border: 1px solid #d9d9cc; box-shadow: 5px 5px 0 rgba(23,72,63,.08); }
.play-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.play-card-head h2, .side-card h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 29px; font-weight: 900; letter-spacing: -.07em; line-height: 1; }
.game-tag { margin-top: 1px; padding: 7px 9px; background: var(--muted); color: var(--forest); font-size: 8px; white-space: nowrap; }
.game-visual {
  position: relative;
  height: 134px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 19px 0 15px;
  background: var(--forest);
  color: var(--mint);
}
.game-visual::before, .game-visual::after { position: absolute; content: ""; }
.game-visual::before { inset: 0; opacity: .25; background: repeating-linear-gradient(135deg, transparent 0 15px, rgba(241,238,228,.12) 15px 16px); }
.visual-aviator .visual-word { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(27px, 4vw, 48px); font-weight: 900; letter-spacing: -.1em; transform: rotate(-7deg); }
.visual-aviator .flight-line { position: absolute; width: 75%; height: 2px; background: var(--coral); transform: rotate(-11deg) translateY(9px); }
.visual-aviator .flight-line::before, .visual-aviator .flight-line::after { position: absolute; content: ""; width: 6px; height: 6px; top: -2px; border-radius: 50%; background: var(--paper); }
.visual-aviator .flight-line::before { left: 0; } .visual-aviator .flight-line::after { right: 0; }
.visual-dice { gap: 10px; }
.dice-tile { position: relative; width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid var(--mint); color: var(--mint); font-family: var(--font-display); font-weight: 900; font-size: 29px; transform: rotate(-7deg); }
.dice-tile:last-child { transform: rotate(8deg) translateY(9px); border-color: var(--coral); color: var(--coral); }
.visual-horses { align-items: stretch; justify-content: flex-start; padding: 16px 20px; flex-direction: column; gap: 9px; }
.track-lane { position: relative; height: 17px; border-bottom: 1px dashed rgba(241,238,228,.45); }
.track-lane::before { content: attr(data-label); position: absolute; left: 0; top: 1px; font: 700 8px monospace; color: var(--mint); }
.track-lane::after { content: ""; position: absolute; left: 29%; right: 0; top: 8px; border-top: 1px dotted rgba(241,238,228,.35); }
.track-finish { position: absolute; right: 12%; top: 0; height: 100%; width: 1px; border-right: 2px dashed var(--coral); }
.track-gate { position: absolute; right: calc(12% - 7px); top: -3px; color: var(--coral); font-size: 14px; line-height: 1; }
.visual-random { gap: 8px; }
.random-token { position: relative; z-index: 1; width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid var(--mint); border-radius: 50%; color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.random-token:nth-child(2) { transform: translateY(-13px); color: var(--coral); border-color: var(--coral); }
.random-token:nth-child(3) { transform: translateY(8px); }
.visual-football { display: flex; gap: 0; align-items: center; width: 100%; }
.field-line { position: absolute; inset: 14px 16px; border: 1px solid rgba(201,228,91,.5); border-radius: 2px; }
.field-line::before { position: absolute; content: ""; left: 50%; top: 0; height: 100%; border-left: 1px solid rgba(201,228,91,.45); }
.field-line::after { position: absolute; content: ""; top: 50%; left: 50%; width: 45px; height: 45px; border: 1px solid rgba(201,228,91,.45); border-radius: 50%; transform: translate(-50%,-50%); }
.ball-mark { position: relative; z-index: 1; width: 19px; height: 19px; border: 2px solid var(--paper); border-radius: 50%; background: var(--coral); }
.visual-football .ball-mark { transform: translateX(18px); }
.game-description { margin: 0 0 19px; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
#game-fields { margin: 0 0 17px; }
.field-label { display: block; margin-bottom: 9px; color: var(--ink); font-size: 11px; font-weight: 800; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.choice-grid.six-choice { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.choice-button {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.choice-button:hover { border-color: var(--forest); }
.choice-button[aria-pressed="true"] { border-color: var(--forest); background: var(--forest); color: var(--paper); }
.choice-button .choice-num { color: var(--coral-deep); font-family: monospace; font-size: 10px; }
.choice-button[aria-pressed="true"] .choice-num { color: var(--mint); }
.choice-button.die-choice { width: 100%; height: 39px; padding: 3px; font-size: 18px; }
.team-choice { justify-content: flex-start; min-height: 45px; text-align: left; }
.team-choice span:last-child { line-height: 1.15; }
.match-form-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; padding: 9px 11px; background: #e8ecdf; }
.match-form-preview span { font-size: 11px; font-weight: 800; }
.versus { color: var(--coral-deep) !important; font-family: monospace; font-size: 9px !important; }
.stake-row { padding-top: 14px; border-top: 1px solid var(--line); }
.stake-row > label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 800; }
.stake-row > label span { color: var(--ink-soft); font-size: 10px; font-weight: 500; }
.stake-control { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; height: 42px; border: 1px solid var(--line); background: #fffdf5; }
.stake-adjust { border: 0; background: transparent; color: var(--forest); font-size: 20px; cursor: pointer; }
.stake-adjust:hover { background: var(--muted); }
.stake-control input { width: 100%; min-width: 0; border: 0; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: transparent; color: var(--ink); text-align: center; font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.stake-control input::-webkit-inner-spin-button, .stake-control input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.stake-control input { appearance: textfield; }
.stake-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: var(--ink-soft); font-size: 9px; }
.max-button { padding: 3px 0 3px 8px; border: 0; background: none; color: var(--coral-deep); font-size: 9px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.play-button {
  width: 100%;
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 0 15px;
  border: 0;
  background: var(--coral);
  color: #172d28;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.play-button:hover:not(:disabled) { background: #f09173; transform: translateY(-2px); }
.play-button:disabled { cursor: not-allowed; opacity: .55; }
.play-button span:last-child { font-size: 20px; font-weight: 400; }
.form-error { margin: 9px 0 0; color: var(--coral-deep); font-size: 11px; font-weight: 700; }
.result-panel { margin-top: 17px; padding: 14px; border-left: 3px solid var(--forest); background: #e8ecdf; animation: enter .24s ease both; }
.result-panel.is-loss { border-color: var(--coral-deep); }
.result-eyebrow { margin-bottom: 6px; color: var(--ink-soft); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.result-title { margin: 0 0 5px; font-family: var(--font-display); font-size: 20px; font-weight: 900; letter-spacing: -.05em; }
.result-copy { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.result-balance { display: flex; justify-content: space-between; align-items: baseline; margin-top: 11px; padding-top: 9px; border-top: 1px solid #c4ccbc; font-size: 10px; }
.result-balance strong { font-family: var(--font-display); font-size: 17px; letter-spacing: -.05em; }
.below-note { display: flex; gap: 9px; align-items: flex-start; padding: 13px 4px 0; }
.note-symbol { width: 15px; height: 15px; display: grid; place-items: center; flex: 0 0 15px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); font-family: Georgia, serif; font-size: 10px; font-weight: 700; }
.below-note p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }

.side-column { display: grid; gap: 14px; }
.side-card { padding: 17px; border: 1px solid var(--line); background: rgba(250,248,241,.63); }
.side-card-head { display: flex; align-items: center; justify-content: space-between; color: #74827b; }
.tiny-status { color: var(--coral-deep); font-size: 8px; }
.side-card h2 { margin-top: 15px; font-size: 20px; }
.side-intro { margin: 8px 0 18px; color: var(--ink-soft); font-size: 11px; }
.matchup { display: grid; gap: 7px; }
.team-line { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; background: #e7eadf; }
.team-line strong { font-size: 11px; }
.team-strength { display: flex; gap: 3px; }
.strength-mark { width: 6px; height: 6px; background: #c2c9ba; }
.strength-mark.is-lit { background: var(--forest); }
.match-footnote { margin: 12px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }
.history-card h2 { margin-bottom: 12px; }
.history-total { color: var(--ink-soft); font-size: 8px; letter-spacing: .04em; }
.history-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.history-empty { padding: 13px 0 2px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.history-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.history-game { font-size: 10px; font-weight: 800; }
.history-outcome { color: var(--ink-soft); font-size: 9px; }
.history-delta { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-display); font-size: 13px; font-weight: 900; }
.history-delta.win { color: var(--forest); } .history-delta.loss { color: var(--coral-deep); }
.exit-button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink-soft); text-align: left; font-size: 10px; cursor: pointer; }
.exit-button:hover { color: var(--coral-deep); }
.exit-button span { font-size: 15px; }
.page-footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px 0 22px; color: #7d8982; font-size: 8px; }
.footer-divider { margin: 0 7px; color: var(--coral-deep); }

.age-overlay { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(19,42,38,.88); }
.age-dialog { width: min(100%, 425px); padding: 29px clamp(24px, 7vw, 44px) 25px; background: var(--paper); box-shadow: 11px 11px 0 rgba(201,228,91,.23); animation: enter .35s ease both; }
.age-topline { display: flex; align-items: center; gap: 12px; margin-bottom: 36px; color: var(--ink-soft); }
.age-topline .age-logo { width: 118px; height: auto; object-fit: contain; }
.age-dialog h1 { font-size: clamp(46px, 12vw, 59px); }
.age-dialog > p:not(.eyebrow):not(.age-legal) { margin: 19px 0 21px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.age-confirm { margin-top: 0; }
.age-decline { display: block; margin: 12px auto 0; padding: 8px; border: 0; background: transparent; color: var(--ink-soft); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.age-legal { margin: 20px 0 0; color: #7b8880; font-size: 8px; text-align: center; letter-spacing: .08em; }
.closed-screen { width: min(100%, 430px); margin: 9vh auto; padding: 12px 0; animation: enter .35s ease both; }
.closed-mark { margin-bottom: 30px; width: 47px; height: 47px; font-size: 17px; }
.closed-screen .eyebrow { margin-bottom: 15px; }
.closed-screen h1 { font-size: clamp(52px, 10vw, 72px); }
.closed-screen > p:not(.eyebrow):not(.closed-disclaimer) { max-width: 350px; margin: 20px 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.closed-screen .play-button { max-width: 350px; }
.closed-disclaimer { margin-top: 18px; color: var(--ink-soft); font-size: 10px; }

[hidden] { display: none !important; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1450px) {
  .page-shell { max-width: 1640px; margin: 0 auto; }
}

@media (max-width: 1050px) {
  .game-layout { grid-template-columns: 165px minmax(0,1fr); }
  .side-column { grid-column: 2; grid-template-columns: 1fr 1fr; align-items: start; }
  .exit-button { grid-column: 1 / -1; }
  .rail-footer { padding-top: 50px; }
}

@media (max-width: 700px) {
  .page-shell { padding: 0 18px; }
  .topbar { height: 74px; }
  .topbar-note { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { font-size: 7px; }
  .balance-chip { min-width: auto; }
  .balance-caption { font-size: 8px; }
  .balance-value strong { font-size: 22px; }
  .intro-row { align-items: flex-start; padding: 33px 0 22px; }
  .intro-row h1 { font-size: clamp(42px, 11vw, 62px); }
  .intro-aside { max-width: 130px; padding-top: 12px; }
  .intro-aside p { font-size: 10px; }
  .round-count { font-size: 8px; }
  .game-layout { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .mode-rail { padding: 0; }
  .rail-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 0 9px; }
  .mode-list { display: flex; gap: 6px; overflow-x: auto; padding: 1px 1px 8px; scrollbar-width: thin; }
  .mode-button { min-width: max-content; min-height: 39px; display: flex; gap: 7px; padding: 0 10px; border: 1px solid var(--line); }
  .mode-name { font-size: 11px; }
  .mode-number { font-size: 9px; }
  .mode-arrow { display: none; }
  .rail-footer { display: none; }
  .play-card { padding: 19px 17px 18px; }
  .play-card-head h2 { font-size: 26px; }
  .game-visual { height: 120px; margin: 16px 0 13px; }
  .game-description { font-size: 11px; }
  .side-column { grid-column: auto; grid-template-columns: minmax(0,1fr); gap: 11px; }
  .side-card { padding: 15px; }
  .page-footer { flex-direction: column; gap: 8px; padding: 22px 0 16px; line-height: 1.5; }
}

@media (max-width: 390px) {
  .page-shell { padding: 0 13px; }
  .intro-aside { max-width: 115px; }
  .intro-aside p { font-size: 9px; }
  .choice-grid.six-choice { gap: 5px; }
  .choice-button.die-choice { height: 36px; }
  .play-card { padding-right: 13px; padding-left: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

html, body { background: var(--paper); }

body {
  background-image:
    radial-gradient(ellipse at 50% -18%, rgba(166, 22, 37, .19), transparent 48%),
    linear-gradient(180deg, #0b0a0c 0%, #09090b 56%, #0d0c0f 100%);
  color: var(--ink);
  font-weight: 500;
}

.page-shell::before { opacity: .07; }
.topbar { border-color: var(--line); }
.brand-mark, .closed-mark {
  color: #fff;
  background: var(--coral);
  box-shadow: 3px 3px 0 #71101d;
}
.brand-copy strong, .balance-value strong { font-family: var(--font-display); font-weight: 900; }
.brand-copy strong span, .footer-divider { color: var(--coral-deep); }
.brand-copy small, .topbar-note, .balance-caption, .balance-value span,
.intro-aside p, .rail-footer p, .game-description, .below-note p,
.side-intro, .match-footnote, .history-empty, .history-outcome,
.exit-button, .closed-disclaimer { color: var(--ink-soft); }
.live-dot { background: var(--coral); box-shadow: 0 0 12px rgba(239, 51, 68, .55); }

.eyebrow, .section-index, .side-card-head { color: #c4c1c4; }
.eyebrow-rule { background: var(--coral); }
.intro-row h1, .closed-screen h1, .age-dialog h1,
.play-card-head h2, .side-card h2 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
}
.intro-row h1, .closed-screen h1, .age-dialog h1 { letter-spacing: -.035em; }
.intro-row h1 span, .closed-screen h1 span, .age-dialog h1 span { color: var(--coral-deep); }
.round-count {
  color: #fff;
  border-color: #694047;
  background: rgba(201, 30, 49, .13);
}

.rail-heading { border-color: var(--line); }
.rail-title { color: #fff; }
.mode-button { border-bottom-color: rgba(255, 255, 255, .09); color: #f8f7f6; }
.mode-button:hover { background: #19181c; }
.mode-button.is-active {
  color: #fff;
  background: #bd1e30;
  box-shadow: inset 3px 0 0 #ff7881;
}
.mode-number { color: #aaa7ab; }
.is-active .mode-number { color: #fff; }
.mode-name { font-weight: 800; }
.mode-arrow, .rail-stamp { color: #ff9098; }
.rail-stamp { border-color: #a92b39; }

.play-card {
  border: 1px solid #3b292d;
  background: linear-gradient(145deg, #19181c 0%, #121216 68%);
  box-shadow: 5px 5px 0 rgba(176, 25, 43, .14);
}
.play-card-head h2, .side-card h2 { letter-spacing: -.025em; }
.section-index { color: #d0cdd0; }
.game-tag { color: #fff; background: #312126; border: 1px solid #563039; }
.game-visual { background: #171216; color: #fff; border: 1px solid rgba(255, 255, 255, .1); }
.game-visual::before {
  background: repeating-linear-gradient(135deg, transparent 0 15px, rgba(255,255,255,.07) 15px 16px);
}
.visual-aviator { background: linear-gradient(115deg, #311018, #161317 64%, #271016); }
.visual-aviator .flight-line { background: #ff4656; }
.visual-dice { background: radial-gradient(ellipse, #35121a, #171216 70%); }
.dice-tile { border-color: #fff; color: #fff; }
.dice-tile:last-child { border-color: #ff5967; color: #ff7a84; }
.visual-horses { background: linear-gradient(90deg, #251017, #141317 66%); }
.track-lane { border-bottom-color: rgba(255,255,255,.36); }
.track-lane::before { color: #fff; }
.track-lane::after { border-top-color: rgba(255,255,255,.27); }
.track-finish { border-right-color: #ff5361; }
.track-gate { color: #ff6875; }
.visual-random { background: linear-gradient(120deg, #3a111a, #151418 70%); }
.random-token { border-color: #fff; color: #fff; }
.random-token:nth-child(2) { color: #ff838c; border-color: #ff5765; }
.visual-football {
  height: 184px;
  background-color: #111316;
  background-image:
    linear-gradient(90deg, rgba(8, 8, 10, .13), rgba(8, 8, 10, .03) 55%, rgba(8, 8, 10, .16)),
    url("cassino-futebol-blaze.webp");
  background-size: cover;
  background-position: center 65%;
}
.visual-football::before {
  opacity: 1;
  background: linear-gradient(90deg, rgba(7, 7, 9, .25), transparent 42%, rgba(7, 7, 9, .06));
}
.visual-football .field-line, .visual-football .ball-mark { display: none; }

.field-label, .stake-row > label { color: #fff; font-weight: 800; }
.stake-row > label span { color: #c4c1c4; }
.choice-button { color: #f8f7f6; border-color: #4a484e; background: #1b1a1f; }
.choice-button:hover { border-color: #ff707a; background: #282025; }
.choice-button[aria-pressed="true"] { border-color: #f04452; background: #a91d2c; color: #fff; }
.choice-button .choice-num { color: #ff8a93; }
.choice-button[aria-pressed="true"] .choice-num { color: #fff; }
.match-form-preview { color: #fff; background: #292329; border: 1px solid #493138; }
.versus { color: #ff8a93 !important; }
.stake-row { border-color: var(--line); }
.stake-control { border-color: #4b484f; background: #0e0d10; }
.stake-adjust { color: #fff; }
.stake-adjust:hover { background: #352127; }
.stake-control input { color: #fff; border-color: #4b484f; font-family: var(--font-display); font-weight: 800; }
.stake-meta { color: #c7c3c7; }
.max-button { color: #ff8790; }
.play-button {
  color: #fff;
  background: #c91e31;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .015em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 #71101d;
}
.play-button:hover:not(:disabled) { background: #e12b3d; }
.play-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #71101d; }
.form-error { color: #ff9199; }
.result-panel { border-left-color: #ff5c68; background: #21191d; }
.result-panel.is-loss { border-color: #ff7881; }
.result-eyebrow { color: #d1cbd0; }
.result-title { color: #fff; font-family: var(--font-display); font-weight: 900; }
.result-copy { color: #d1cbd0; }
.result-balance { border-color: #4b3a40; color: #e4dfe2; }
.result-balance strong { color: #fff; font-family: var(--font-display); }
.below-note { color: #d5d1d4; }
.note-symbol { color: #fff; border-color: #5b555c; }

.side-card { border-color: #39343a; background: rgba(21, 20, 24, .9); }
.tiny-status { color: #ff8992; }
.side-card h2 { color: #fff; }
.team-line { color: #fff; background: #27242a; }
.strength-mark { background: #59535b; }
.strength-mark.is-lit { background: #ff5966; }
.history-total { color: #d0cbd0; }
.history-empty, .history-item { border-color: #3c383e; }
.history-game { color: #fff; }
.history-delta.win { color: #ff838c; }
.history-delta.loss { color: #d8d2d6; }
.exit-button { border-color: var(--line); }
.exit-button:hover { color: #ff8992; }
.page-footer { color: #b0abb1; }

.age-overlay { background: rgba(4, 4, 6, .9); }
.age-dialog {
  color: #fff;
  border: 1px solid #533039;
  background: linear-gradient(145deg, #1b191e, #100f12);
  box-shadow: 8px 8px 0 rgba(173, 22, 39, .35);
}
.age-topline, .age-dialog > p:not(.eyebrow):not(.age-legal) { color: #d0cbd0; }
.age-dialog .eyebrow { color: #ff9ba2; }
.age-decline { color: #d6d1d5; }
.age-decline:hover { color: #fff; }
.age-legal { color: #bab4ba; }
.closed-screen > p:not(.eyebrow):not(.closed-disclaimer) { color: #d2cdd1; }

button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #ff828b; outline-offset: 3px; }

@media (max-width: 700px) {
  .visual-football { height: 156px; }
  .mode-button { background-color: #151418; }
  .mode-button.is-active { background-color: #bd1e30; }
}

@media (max-width: 390px) {
  .visual-football { height: 144px; }
}