/* ==========================================================================
   Roulette Payout Trainer · styles
   Order: tokens → base → shared pieces → header → drill → felt drawings →
   picture bets → levels → loading screen → responsive.
   The app is an inline-size container named "app"; the breakpoints are container
   queries on it: 1180px (narrower pay panel), 960px (levels stack), 760px (phone layout).
   ========================================================================== */

:root {
  /* Grounds and lines */
  --page: #0B0E0D;
  --card: #131817;
  --raised: #1B2220;
  --line: #222B29;
  --line-2: #2E3836;
  --line-3: #3A4644;

  /* Text */
  --text: #EDF0EA;
  --text-2: #D5DBD6;
  --text-3: #B6BFB9;
  --muted: #9AA5A0;
  --caption: #8D9892;
  --placeholder: #56625F;

  /* Accent and verdicts */
  --gold: #E2B24C;
  --gold-ink: #1A1406;
  --gold-tint: rgba(226, 178, 76, .10);
  --right: #5AB8FF;
  --right-fill: rgba(90, 184, 255, .10);
  --right-edge: rgba(90, 184, 255, .45);
  --wrong: #FF9245;
  --wrong-fill: rgba(255, 146, 69, .10);
  --wrong-edge: rgba(255, 146, 69, .45);

  /* Felt */
  --felt: #0F5B3A;
  --red: #B3132D;
  --black: #141616;
  --dolly-band: #2A1F08;

  /* Color Up brand (the logo and wordmark, as on colorup-site) */
  --brand-ink: #F2EEE6;
  --brass: #C9A55C;
  --brass-hi: #E3C88A;
  --brass-soft: #F3DFB0;

  /* Type */
  --font-ui: 'Barlow', 'Helvetica Neue', system-ui, sans-serif;
  --font-num: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-brand: 'Big Shoulders Display', 'Arial Narrow', sans-serif;

  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0; background: var(--page); }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

.app {
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  container: app / inline-size;
  -webkit-tap-highlight-color: transparent;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Shared pieces
   ========================================================================== */

/* Buttons brighten on hover and press down 1px */
.btn { cursor: pointer; transition: filter .12s ease, transform .06s ease; }
.btn:hover:not(:disabled) { filter: brightness(1.14); }
.btn:active:not(:disabled), .btn.is-pressed:not(:disabled) { transform: translateY(1px); }
.btn.is-pressed:not(:disabled) { filter: brightness(1.14); }
.btn:disabled { cursor: default; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn--gold {
  border: 0; background: var(--gold); color: var(--gold-ink);
  font-family: var(--font-num); font-weight: 700; text-transform: uppercase;
}
.btn--gold:disabled { opacity: .45; }
.btn--big { height: 58px; border-radius: 14px; font-size: 22px; letter-spacing: .08em; }
/* Outlined, like the ladder's "Train here" */
.btn--line {
  height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--line-3); background: transparent; color: var(--text);
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.btn--line.is-armed { border-color: var(--wrong-edge); color: var(--wrong); background: var(--wrong-fill); }

/* Section labels */
.label {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}

/* Segmented controls: the pressed segment is filled gold */
.seg {
  display: flex; gap: 2px; padding: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.seg--dark { background: var(--page); }
.seg__btn {
  height: 44px; padding: 0 16px;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-3);
  font-family: var(--font-ui); font-weight: 600; font-size: 15px;
}
.seg__btn[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); }
.seg--fill .seg__btn { flex: 1; padding: 0 8px; }

.title { font-family: var(--font-num); font-weight: 700; font-size: 44px; line-height: 1; }
.intro { font-size: 16px; color: var(--text-3); }

/* ==========================================================================
   Header (scrolls away with the page; the drill pans past it when the trainer opens)
   ========================================================================== */
.topbar { background: #101513; border-bottom: 1px solid var(--line); }
.topbar__inner {
  max-width: 1400px; margin: 0 auto; padding: 20px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* min-height keeps the design's 30px brand row (its placeholder icon was 30px; the logo mark is 26px),
   so the header is the same height when the brand sits on its own row on phones */
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-height: 30px; }
.brand__mark { flex: none; width: 40px; height: 26px; }
.brand__words { display: flex; flex-direction: column; gap: 7px; }
/* Wordmark: a dark brass edge under the letters, like the edge of a chip; "Up" in brass like the top chip */
.brand__name {
  font-family: var(--font-brand); font-weight: 900; font-size: 23px; line-height: 1;
  letter-spacing: .045em; text-transform: uppercase; color: var(--brand-ink);
  text-shadow: 0 .035em 0 #6E5A2F, 0 .07em 0 #2A2317;
}
.brand__up {
  background: linear-gradient(180deg, var(--brass-soft) 0%, var(--brass-hi) 45%, var(--brass) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 .035em 0 #6E5A2F) drop-shadow(0 .035em 0 #2A2317);
}
.brand__app { font-size: 12px; line-height: 1; letter-spacing: .04em; color: var(--muted); }

.tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.tab {
  height: 44px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: 15px;
}
.tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current="page"] { color: var(--brass-hi); border-color: #4B4029; background: #262419; }
.tab:hover { color: var(--text); background: var(--raised); }

.seg--table .seg__btn { padding: 0 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.seg--table { margin-left: auto; background: var(--page); }
.seg--table .seg__btn[aria-pressed="true"] { background: var(--raised); color: var(--brass-hi); }
.seg__short { font-family: var(--font-num); font-weight: 700; font-size: 19px; line-height: 1; }

/* At least a screen tall, so the header can always scroll out of view */
.main { max-width: 1400px; margin: 0 auto; padding: 22px 32px 48px; min-height: 100vh; min-height: 100svh; }

/* ==========================================================================
   Drill
   ========================================================================== */
.screen--drill { display: flex; flex-direction: column; gap: 18px; }

/* Modes above, level and saved progress below: separate tasks from preferences. */
.status { padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: #101513; }
.trainingbar, .mode-control { display: flex; align-items: center; gap: 20px; }
.trainingbar { flex-wrap: wrap; gap: 12px; }
.mode-control > .label { white-space: nowrap; }
.seg--mode { background: var(--page); border-color: var(--line-2); }
.seg--mode .seg__btn { padding-inline: 20px; }
.seg--mode .seg__btn[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: inset 0 -2px var(--brass); }
.sessionbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.levelbar { display: flex; align-items: center; gap: 18px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.step {
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--line-2); background: transparent; color: var(--text);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.step:disabled { opacity: .35; }
.stepper__text { min-width: 118px; text-align: center; }
.stepper__of { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stepper__name { font-family: var(--font-num); font-weight: 600; font-size: 23px; line-height: 1.2; color: var(--text); }
.progress { display: flex; flex-direction: column; gap: 7px; }
.pips { display: flex; gap: 5px; }
.pip { width: 18px; height: 4px; border-radius: 3px; background: var(--line-2); }
.pip.is-on { background: var(--brass); }
.progress__text { font-size: 13px; color: var(--text-3); }
.decktext { font-size: 15px; color: var(--text-3); }
.stats { display: flex; gap: 26px; margin-left: auto; font-variant-numeric: tabular-nums; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__value { color: var(--text); font-family: var(--font-num); font-size: 23px; font-weight: 600; line-height: 1.1; }
.stat__label { color: var(--muted); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.study-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.study-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--text-3); text-decoration: none; font-size: 14px; font-weight: 600; }
.study-links a:hover { background: var(--raised); color: var(--brass-hi); }
.study-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lib__intro > .label, .ladder__head > .label { display: block; margin-bottom: 12px; color: var(--brass-hi); }
#chartHeading, #missesHeading, #library { scroll-margin-top: 20px; }

/* The picture on the left (1fr); the pay panel on the right with the full layout under it,
   so the picture, the payout and the full layout share one screen. */
.drill {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "pic pay" "pic map";
}
.pic { grid-area: pic; }
.pay { grid-area: pay; }
.map { grid-area: map; }

/* Picture card */
.pic { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pic__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.badge {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--black); box-shadow: 0 0 0 3px var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: 28px; color: #FFFFFF;
}
.badge.is-red { background: var(--red); }
.pic__title { display: flex; flex-direction: column; gap: 2px; }
.pic__number { font-family: var(--font-num); font-weight: 600; font-size: 24px; line-height: 1.1; }
.pic__note { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.pic__zero { font-size: 14px; color: var(--text-2); }
.pic__table { font-size: 13px; color: var(--caption); }
.legend { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--caption); }
.legend__chip { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 3px dashed transparent; }

/* Pay panel */
.pay { display: flex; flex-direction: column; gap: 14px; }
.readout {
  display: flex; align-items: center; gap: 10px;
  height: 92px; padding: 0 18px;
  background: var(--page); border: 1px solid var(--line-2); border-radius: 14px;
}
.readout:focus-within { box-shadow: 0 0 0 2px var(--gold); }
.readout__input {
  flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0;
  background: transparent; border: 0; outline: none; color: var(--text);
  font-family: var(--font-num); font-weight: 600; font-size: 60px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.readout__input::placeholder { color: var(--placeholder); opacity: 1; }
.readout__unit { font-size: 15px; color: var(--caption); }
.pay.is-right .readout { border-color: var(--right-edge); }
.pay.is-right .readout__input { color: var(--right); }
.pay.is-wrong .readout { border-color: var(--wrong-edge); }
.pay.is-wrong .readout__input { color: var(--wrong); }

.ask { display: flex; flex-direction: column; gap: 14px; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.key {
  height: 62px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--raised); color: var(--text);
  font-family: var(--font-num); font-weight: 600; font-size: 30px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  touch-action: manipulation;
}
.key--word { font-size: 17px; }
.pay__help { font-size: 13px; color: var(--caption); text-align: center; }

/* Flash cards: the picture's name and its question on top, then four amounts in place of the keypad,
   each with its number key */
.cards { display: flex; flex-direction: column; gap: 14px; }
.cards__head { display: flex; flex-direction: column; gap: 4px; }
.cards__name { font-family: var(--font-num); font-weight: 700; font-size: 26px; line-height: 1.1; }
.choices { display: flex; flex-direction: column; gap: 10px; border-radius: 14px; }
.choices:focus { outline: none; }
.choices:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.choice {
  min-height: 58px; padding: 8px 14px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--raised); color: var(--text);
  font-family: var(--font-ui); font-weight: 600; font-size: 17px; line-height: 1.25; text-align: left;
}
.choice__key {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--page); border: 1px solid var(--line-3); color: var(--gold);
  font-family: var(--font-num); font-weight: 700; font-size: 17px;
}
.choice__amount { font-family: var(--font-num); font-weight: 700; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.choice__unit { font-size: 14px; font-weight: 500; color: var(--caption); }

/* Result: rises in */
.result { display: flex; flex-direction: column; gap: 14px; }
.rise { animation: rise .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.verdict {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: var(--right-fill); border: 1px solid var(--right-edge);
}
.verdict__icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--right); color: var(--page);
  display: flex; align-items: center; justify-content: center;
}
.verdict__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.verdict__title { font-family: var(--font-num); font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--right); }
.verdict__line { font-size: 15px; color: var(--text-2); }
.verdict__hint { font-size: 14px; color: var(--text-3); }
.verdict__hint:empty { display: none; }
.verdict__bad { display: none; }
.pay.is-wrong .verdict { background: var(--wrong-fill); border-color: var(--wrong-edge); }
.pay.is-wrong .verdict__icon { background: var(--wrong); }
.pay.is-wrong .verdict__title { color: var(--wrong); }
.pay.is-wrong .verdict__ok { display: none; }
.pay.is-wrong .verdict__bad { display: block; }

.levelup {
  display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--gold); background: var(--gold-tint); color: var(--gold);
}
.levelup svg { flex: none; }
.levelup__words { display: flex; flex-direction: column; gap: 2px; }
.levelup__title { font-family: var(--font-num); font-weight: 700; font-size: 20px; line-height: 1.1; }
.levelup__text { font-size: 14px; color: var(--text-2); }
.picname { font-size: 14px; color: var(--text-3); }
.picname strong { color: var(--text); font-weight: 600; }
.deckdone { font-size: 14px; font-weight: 600; color: var(--gold); }

/* Count it by rate */
.rates { display: flex; flex-direction: column; }
.rates__label { padding-bottom: 8px; }
.rate {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.rate__odds { font-family: var(--font-num); font-weight: 700; font-size: 17px; line-height: 1.1; color: var(--gold); }
.rate__words { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rate__name { font-size: 15px; font-weight: 600; }
.rate__detail { font-size: 13px; color: var(--caption); }
.rate__sum { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.rate__pay { font-family: var(--font-num); font-weight: 600; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.rate__math { font-size: 12px; color: var(--caption); white-space: nowrap; }
.rates__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--line-3);
}
.rates__chips { font-size: 15px; color: var(--text-3); }
.rates__sum { font-family: var(--font-num); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.btn--next { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Full layout card */
.map { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.map__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.map__title { color: var(--text-3); }
.map__view { font-size: 12px; color: var(--caption); }
.map__caption { font-size: 13px; line-height: 1.4; color: var(--caption); }

/* ==========================================================================
   Felt drawings: cells, chips, frames and the dolly are placed by app.js from
   layout.js, in % of the drawing and cqw of its width. Each drawing is its own
   (unnamed) container for the cqw sizes; the breakpoints query the app by name.
   ========================================================================== */
.felt {
  position: relative; width: 100%;
  container-type: inline-size;
  background: var(--felt); overflow: hidden;
}
.felt--pic { border-radius: 14px; box-shadow: 0 24px 48px rgba(0, 0, 0, .35); }
.felt--map { max-width: 820px; margin: 0 auto; border-radius: 10px; }
.felt--card { border-radius: 9px; }

.cell {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 600; line-height: 1;
}
.chip {
  position: absolute; z-index: 2;
  transform: translate(-50%, -50%); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.chip__face {
  width: 72%; height: 72%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; line-height: 1;
}
/* The gold frame marks the picture; everything outside it is dimmed */
.frame {
  position: absolute; z-index: 2; pointer-events: none;
  border: 2px solid var(--gold); border-radius: 3px;
  box-shadow: 0 0 0 999px rgba(6, 9, 8, .42);
}
.dot { position: absolute; z-index: 3; transform: translate(-50%, -50%); border-radius: 50%; }
.dolly { position: absolute; z-index: 4; transform: translate(-50%, -50%); border-radius: 50%; background: var(--gold); }

/* The phone layout shows the three-street close-up and frame */
.only-phone { display: none; }

/* ==========================================================================
   Picture bets
   ========================================================================== */
.screen--pictures { width: 100%; max-width: 1120px; margin-inline: auto; display: flex; flex-direction: column; gap: 32px; text-align: center; }
.lib__head { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.lib__intro { max-width: 680px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lib__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lib__drill { height: 52px; padding: 0 22px; border-radius: 14px; font-size: 20px; letter-spacing: .06em; }
.lib__cards { height: 52px; padding: 0 20px; border-radius: 14px; font-size: 17px; }
.lib { display: flex; flex-direction: column; gap: 30px; }
.libgroup { display: flex; flex-direction: column; gap: 12px; }
.libgroup__head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.libgroup__title { font-family: var(--font-num); font-weight: 700; font-size: 24px; line-height: 1.1; }
.libgroup__sub { font-size: 14px; color: var(--muted); }
.libgrid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.libcard {
  flex: 0 1 212px; width: 212px; min-width: 0; max-width: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px; display: flex; flex-direction: column; gap: 10px;
}
.libcard__head { min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 4px; }
.libcard__words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.libcard__name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.libcard__chips { font-size: 12px; color: var(--caption); }
.libcard__total {
  font-family: var(--font-num); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.libgroup__action { margin-top: 4px; }
.libcard__hint { padding: 0 4px 2px; font-size: 12px; line-height: 1.35; color: var(--text-3); }

/* Pay chart: every bet, then the times table */
.chartgrid { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chartcard { padding: 16px 18px; }
.chart { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.chart__caption { text-align: center; padding-bottom: 12px; }
.chart th, .chart td { padding: 10px 6px; border-top: 1px solid var(--line); text-align: center; font-weight: inherit; vertical-align: middle; }
.chart:not(.chart--times) th:first-child { width: 50%; }
.chart thead th {
  padding-top: 0; border-top: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--caption);
}
.chart__name { display: block; font-size: 15px; font-weight: 600; }
.chart__covers { display: block; font-size: 13px; color: var(--caption); }
.chart__odds { font-family: var(--font-num); font-weight: 700; font-size: 17px; color: var(--gold); white-space: nowrap; }
.chart__num { font-family: var(--font-num); font-weight: 600; font-size: 22px; }
.chart__note { margin-top: 12px; font-size: 13px; color: var(--caption); }
.chart--times thead th { color: var(--gold); font-family: var(--font-num); font-weight: 700; font-size: 14px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.chart--times thead th:first-child { color: var(--caption); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.chart--times tbody th, .chart--times td { padding-top: 6px; padding-bottom: 6px; font-family: var(--font-num); font-weight: 600; font-size: 17px; }
.chart--times tbody th { color: var(--muted); }

/* ==========================================================================
   Levels
   ========================================================================== */
.levels { display: grid; gap: 24px; align-items: start; grid-template-columns: minmax(0, 1fr) 360px; }
.ladder { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ladder__head { display: flex; flex-direction: column; gap: 8px; }
.ladder__head .intro { max-width: 640px; }
.rungs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rung {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px 18px; align-items: center;
  padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
}
.rung__num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--raised); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: 26px;
}
.rung__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rung__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.rung__name { font-family: var(--font-num); font-weight: 700; font-size: 26px; line-height: 1; }
.rung__tag { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.rung__blurb { font-size: 15px; color: var(--text-3); }
.rung__facts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 4px 0 0; }
.rung__facts div { display: flex; gap: 8px; align-items: baseline; }
.rung__facts dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--caption); }
.rung__facts dd { margin: 0; font-family: var(--font-num); font-weight: 600; font-size: 19px; }
.rung__cta {
  height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--line-3); background: transparent; color: var(--text);
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.rung.is-current { background: rgba(226, 178, 76, .07); border-color: var(--gold); }
.rung.is-current .rung__num { background: var(--gold); color: var(--gold-ink); }
.rung.is-current .rung__cta { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }

.escalation { display: flex; flex-direction: column; gap: 24px; }
.escalation__title { font-family: var(--font-num); font-weight: 700; font-size: 28px; line-height: 1; }
.auto { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auto__words { display: flex; flex-direction: column; gap: 4px; }
.auto__label { font-size: 16px; font-weight: 600; }
.auto__desc { font-size: 14px; color: var(--muted); }
.switch { flex: none; position: relative; width: 60px; height: 44px; padding: 0; border: 0; background: transparent; }
.switch__track {
  position: absolute; left: 2px; top: 7px; width: 56px; height: 30px; border-radius: 15px;
  background: var(--raised); border: 1px solid var(--line-3);
}
.switch__knob {
  position: absolute; top: 10px; left: 5px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--muted); transition: left .15s ease;
}
.switch[aria-pressed="true"] .switch__track { background: var(--gold); border-color: var(--gold); }
.switch[aria-pressed="true"] .switch__knob { left: 31px; background: var(--gold-ink); }
.field { display: flex; flex-direction: column; gap: 10px; }
.field__label { font-size: 16px; font-weight: 600; }
.field__note { font-size: 14px; color: var(--muted); }

/* ==========================================================================
   Loading screen: the wheel spins and the ball lands on 17, the call holds,
   then the screen fades to the trainer (app.js draws the wheel and runs it).
   It sits outside the app container, so it sizes on the viewport.
   ========================================================================== */
html:has(.splash:not([hidden])) { overflow: hidden; }

.splash {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(58% 44% at 50% 50%, rgba(15, 91, 58, .5) 0%, rgba(15, 91, 58, 0) 100%),
    var(--page);
  color: var(--text); font-family: var(--font-ui); line-height: 1.4; text-align: center;
  transition: opacity .45s ease;
}
.splash__content { width: min(100%, 420px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.splash.is-leaving { opacity: 0; pointer-events: none; }

@keyframes splash-in { from { opacity: 0; transform: translateY(10px); } }
.splash__wheel, .splash__brand, .splash__app, .splash__tag { animation: splash-in .6s ease both; }
.splash__brand { animation-delay: .12s; }
.splash__app { animation-delay: .2s; }
.splash__tag { animation-delay: .28s; }

.splash__wheel {
  display: block; flex: none; width: min(320px, 76vw, 36svh); height: auto; aspect-ratio: 1; overflow: visible;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .55));
}

/* The call: shows when the wheel stops */
.splash__call {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.splash.is-stopped .splash__call { opacity: 1; transform: none; }
.splash__badge {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--black); box-shadow: 0 0 0 3px var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-weight: 700; font-size: 21px; color: #FFFFFF;
}
.splash__callText { font-family: var(--font-num); font-weight: 700; font-size: 28px; letter-spacing: .02em; }

.splash__brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.splash__mark { flex: none; width: 50px; height: 33px; }
.splash__name { font-size: 36px; }
.splash__app { font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); }
.splash__tag { font-family: var(--font-num); font-weight: 600; font-size: 17px; letter-spacing: .08em; color: var(--brass-hi); }

/* The wheel's parts, drawn by app.js in a 200-unit drawing */
.wheel__track { fill: none; stroke: #17110B; }
.wheel__deflector { fill: var(--brass); stroke: #6E5A2F; stroke-width: .4; }
.wheel__pocket--red { fill: var(--red); }
.wheel__pocket--black { fill: var(--black); }
.wheel__pocket--green { fill: var(--felt); }
.wheel__fret { stroke: var(--brass); stroke-width: .6; opacity: .85; }
.wheel__ring { fill: none; stroke: var(--brass); stroke-width: .7; opacity: .9; }
.wheel__ring--cone { stroke: rgba(0, 0, 0, .28); stroke-width: .8; opacity: 1; }
.wheel__num { font-family: var(--font-num); font-weight: 600; font-size: 7.6px; fill: #F4F0E6; }
.wheel__win {
  fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round;
  opacity: 0; transition: opacity .3s ease;
}
.splash.is-stopped .wheel__win { opacity: 1; }

/* Short screens (a phone on its side): a smaller wheel, no tagline */
@media (max-height: 560px) {
  .splash { padding: 12px 16px; }
  .splash__content { gap: 8px; }
  .splash__wheel { width: min(320px, 76vw, 34svh); }
  .splash__brand { margin-top: 0; }
  .splash__mark { width: 38px; height: 25px; }
  .splash__name { font-size: 26px; }
  .splash__tag { display: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@container app (max-width: 1180px) {
  .drill { grid-template-columns: minmax(0, 1fr) 340px; }
}

@container app (max-width: 960px) {
  .levels { grid-template-columns: minmax(0, 1fr); }
  .chartgrid { grid-template-columns: minmax(0, 1fr); }
  .mode-control { flex-wrap: wrap; gap: 10px; }
  .mode-control > .label { flex-basis: 100%; }
  .stats { gap: 20px; }
}

/* Phone: one column (picture, pay panel, full layout) and the three-street close-up */
@container app (max-width: 760px) {
  .drill { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "pic" "pay" "map"; }
  .only-wide { display: none !important; }
  .only-phone { display: block !important; }
  .main { padding: 14px 16px 32px; }
  .topbar__inner { padding: 18px 16px 14px; flex-wrap: wrap; gap: 18px; }
  .brand { width: 100%; }
  .brand__words { flex-direction: row; align-items: baseline; gap: 12px; }
  .tabs { width: 100%; }
  .tab { flex: 1; padding: 0 8px; gap: 8px; font-size: 14px; }
  .tab svg { width: 17px; height: 17px; }
  .status { padding: 14px; border-radius: 14px; }
  .mode-control { width: 100%; }
  .seg--mode { width: 100%; }
  .seg--mode .seg__btn { flex: 1; padding: 0 6px; font-size: 14px; }
  .seg--table { margin-left: 0; width: 100%; }
  .seg--table .seg__btn { flex: 1; justify-content: center; }
  .sessionbar { gap: 14px; padding-top: 14px; margin-top: 14px; }
  .levelbar { width: 100%; gap: 12px; flex-wrap: wrap; }
  .progress { flex: 1; min-width: 80px; }
  .stepper__text { min-width: 94px; }
  .stepper__name { font-size: 21px; }
  .progress__text { font-size: 12px; }
  .stats { width: 100%; margin-left: 0; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); }
  .stat__value { font-size: 22px; }
  .study-links { gap: 6px; }
  .study-links a { padding-inline: 12px; font-size: 13px; }
  .libcard { flex-basis: 320px; width: 320px; }
  .card { padding: 14px; }
  .rung { grid-template-columns: 48px minmax(0, 1fr); }
  .rung__cta { grid-column: 1 / -1; }
  .chart--times th, .chart--times td { padding-inline: 3px; }
  .chartcard { overflow-x: auto; }
}

/* Phone: the picture and the payout share one screen. The page pans past the header and the status bar
   to the picture. Its card drops the table note and the legend and puts the winning number in a narrow
   column beside the close-up, which keeps to the screen's height (--pic-chrome is everything else on that
   screen). The pay panel becomes a register: the readout and Pay side by side over a four-column keypad
   (1–9 with ⌫, Clear and 0 down the right). Keys stay 44px or more, and Next payout comes up under the
   verdict. */
@container app (max-width: 760px) {
  .drill { gap: 10px; --pic-chrome: 296px; }
  /* A flash card stands taller than the register (its name and question on top); the close-up gives way */
  .drill:has(> .pay > .cards:not([hidden])) { --pic-chrome: 340px; }
  .card.pic, .card.pay { padding: 10px; }
  .pic { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 10px; align-items: start; }
  .pic__head { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 8px; }
  .badge { width: 40px; height: 40px; font-size: 22px; box-shadow: 0 0 0 2px var(--gold); }
  .pic__number { font-size: 20px; }
  .pic__note, .legend, .pay__help { display: none; }
  .felt--pic {
    max-width: calc((100vh - var(--pic-chrome)) * var(--aspect, 0.7));
    max-width: calc((100svh - var(--pic-chrome)) * var(--aspect, 0.7));
    margin-inline: auto;
  }

  .pay { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
  #payLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .readout { grid-column: 1; grid-row: 1; height: 56px; padding: 0 14px; }
  .pay:has(> .ask[hidden]) .readout { grid-column: 1 / -1; }
  .readout__input { font-size: 40px; }
  .ask { display: contents; }
  .pay #payBtn { grid-column: 2; grid-row: 1; height: auto; font-size: 20px; }
  .keypad { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .key { height: 48px; font-size: 26px; }
  .key[data-key="back"] { grid-column: 4; grid-row: 1; }
  .key[data-key="clear"] { grid-column: 4; grid-row: 2; font-size: 15px; }
  .key[data-key="0"] { grid-column: 4; grid-row: 3; }
  .cards, .result { grid-column: 1 / -1; }
  .choices { gap: 6px; }
  .choice { min-height: 46px; padding: 6px 12px; font-size: 16px; }
  .cards__name { font-size: 22px; }
  .result > * { order: 2; }
  .result > .verdict, .result > .levelup { order: 0; }
  .result > .btn--next { order: 1; }
}
/* Tall phones (9:5 or taller): there's height to spare, so the winning number goes back above the
   close-up and the close-up takes the card's full width. */
@media (max-aspect-ratio: 5/9) {
  @container app (max-width: 760px) {
    .drill { --pic-chrome: 344px; }
    .drill:has(> .pay > .cards:not([hidden])) { --pic-chrome: 388px; }
    .pic { display: flex; flex-direction: column; gap: 8px; }
    .pic__head { flex-direction: row; align-items: center; gap: 10px; }
  }
}

/* Side by side, the picture, the payout and the full layout share one screen below the header.
   The close-up keeps to the screen's height: --pic-chrome is everything above and below its felt
   (the status bar, the card's head and legend, the gaps), and --aspect (width ÷ height) comes from
   app.js. On shorter screens the pay panel tightens step by step; keys stay at least 44px. */
@container app (width > 760px) {
  .drill { --pic-chrome: calc(254px + var(--status-extra, 0px)); }
  .felt--pic {
    max-width: calc((100vh - var(--pic-chrome)) * var(--aspect, 1.6));
    max-width: calc((100svh - var(--pic-chrome)) * var(--aspect, 1.6));
    margin-inline: auto;
  }
}
@media (max-height: 960px) {
  @container app (width > 760px) {
    .main { padding-top: 16px; }
    .screen--drill { gap: 14px; }
    .drill { --pic-chrome: calc(244px + var(--status-extra, 0px)); }
    .readout { height: 76px; }
    .readout__input { font-size: 52px; }
    .keypad { gap: 8px; }
    .key { height: 54px; }
    .map__caption { display: none; }
    .pay__help { display: none; }
  }
}
@media (max-height: 820px) {
  @container app (width > 760px) {
    .card.pay { padding: 14px; }
    .map { padding: 12px; gap: 8px; }
    .pay, .ask, .result { gap: 10px; }
    .readout { height: 64px; }
    .readout__input { font-size: 44px; }
    .key { height: 44px; font-size: 26px; }
    .pay .btn--big { height: 50px; }
    .pay__help { display: none; }
    .rate { padding: 7px 0; }
    .choice { min-height: 48px; }
    .choices { gap: 8px; }
  }
}
@media (max-height: 720px) {
  @container app (width > 760px) {
    .main { padding-top: 10px; }
    .screen--drill { gap: 10px; }
    .drill { gap: 12px; --pic-chrome: calc(210px + var(--status-extra, 0px)); }
    .card.pic, .card.pay { padding: 14px; }
    .pic { gap: 10px; }
    .map { padding: 10px; gap: 8px; }
    .readout { height: 56px; }
    .readout__input { font-size: 40px; }
    .keypad { gap: 6px; }
    .key { height: 44px; font-size: 24px; }
    .choice { min-height: 44px; padding: 6px 12px; font-size: 16px; }
    .pay .btn--big { height: 44px; font-size: 19px; }
    .rate { padding: 5px 0; }
    /* The readout says "chips"; the label stays for screen readers */
    #payLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    /* Next payout comes up under the verdict, so it's on screen; the count by rate follows */
    .result > * { order: 2; }
    .result > .verdict, .result > .levelup { order: 0; }
    .result > .btn--next { order: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .btn, .switch__knob { transition: none; }
  .splash__wheel, .splash__brand, .splash__app, .splash__tag { animation: none; }
  .splash, .splash__call, .wheel__win { transition: none; }
}