/*
 * CenterAction: styles.
 * One deliberate look: the craps table. A rail-black room, a felt center with
 * cream layout lines, red dice, clay chips and brass trim. It stays the same in
 * light and dark system themes, so every color is set explicitly here.
 */

:root {
  color-scheme: dark;

  --rail: #14100d;
  --rail-2: #1d1814;
  --rail-3: #28211c;
  --rail-4: #352c25;
  --line: #3a3029;
  --line-hi: #5a4a3c;

  --ink: #f4ede1;
  --ink-2: #cbbfad;
  --ink-3: #978b7c;

  --brass: #d7aa4f;
  --brass-hi: #f1cd78;
  --brass-ink: #1d1508;

  --felt: #3e3072;
  --felt-deep: #2b2156;
  --felt-lit: #4e408d;
  --felt-line: #eee8e1;
  --felt-ink: #f6f0e6;
  --felt-dim: rgba(246, 240, 230, 0.68);

  --plum: #6a3b6d;
  --plum-lit: #86537f;
  --lay-ink: #f4eee8;
  --die-red: #e3261b;
  --die-red-pip: #5e3263;
  --die-white: #f2ede4;
  --die-white-pip: #4a2a50;
  --big-red: #ef4a33;

  --win: #62d597;
  --win-wash: rgba(98, 213, 151, 0.14);
  --lose: #ff806b;
  --lose-wash: rgba(255, 128, 107, 0.13);
  --push: #d9d3c9; /* silver: a push neither wins nor loses, and stays clear of the yellow glow */
  --focus: #ffd97a;

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lay-serif: 'Tinos', 'Times New Roman', Times, serif;
  --lay-sans: 'Jost', Futura, 'Avenir Next', 'Century Gothic', sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  background: var(--rail);
  scroll-padding-top: 10px;
}

body {
  margin: 0;
  padding-inline: 16px;
  padding-block: 0 40px;
  background: var(--rail);
  color: var(--ink);
  font: 15px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
}

button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

/* ------------------------------------------------------------- nav bar */

.navbar {
  margin-inline: -16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--rail);
}

.navbar__inner {
  max-width: 1180px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

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

.brand__dice {
  display: inline-flex;
  gap: 4px;
  transform: rotate(-9deg);
}

.brand__dice .die:last-child { transform: rotate(16deg) translateY(4px); }

.brand__name {
  margin: 0;
  font: 900 26px/0.95 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__name span { color: var(--brass); }

/* Anchor replay to the name without taking space in either header row. */
.brand__title { position: relative; }

.brand__tour {
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
}

.brand__tour:hover { color: var(--brass-hi); }

.brand__tour svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.brand__tour .brand__tour-dot { fill: currentColor; stroke: none; }

.navbar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.nav-modes { display: contents; }

.seg {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--rail-2);
}

.seg__label {
  padding: 0 4px 0 10px;
  font: 700 10.5px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mode,
.lvl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.mode { padding: 0 13px 0 6px; }

.lvl {
  min-width: 34px;
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
}

.mode:hover,
.lvl:hover { color: var(--ink); }

.mode[aria-pressed='true'],
.lvl[aria-pressed='true'] {
  background: var(--rail-4);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(215, 170, 79, 0.75);
}

.stat__value--name {
  font-size: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ⓘ: what the buttons in a group do */
.info {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
}

.info:hover,
.info[aria-expanded='true'] { color: var(--brass-hi); }

.info svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.info .info__dot { fill: currentColor; stroke: none; }

.tip {
  position: absolute;
  z-index: 60;
  width: min(330px, calc(100vw - 24px));
  padding: 12px 14px 13px;
  border: 1px solid var(--line-hi);
  border-radius: 12px;
  background: var(--rail-3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.4;
}

/* the arrow toward the ⓘ */
.tip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: calc(var(--arrow, 50%) - 6px);
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--line-hi);
  border-left: 1px solid var(--line-hi);
  background: var(--rail-3);
  transform: rotate(45deg);
}

.tip--above::before {
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}

.tip__title {
  margin: 0 0 8px;
  color: var(--brass);
  font: 800 12.5px/1.2 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tip__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
}

.tip__list dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.tip__list--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.tip__list--stack dd:not(:last-child) { margin-bottom: 8px; }

.tip__list dt svg { width: 16px; height: 16px; }
.tip__list dt .chip { --size: 14px; }
.tip__list dd { margin: 0; }

.tip__note {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12.5px;
}

/* a tapped bet's amount and name, over its chip; taps go straight through to the table */
.bubble {
  position: absolute;
  z-index: 25; /* under the phone's pinned panel, which covers its chip the same way */
  padding: 7px 12px 6px;
  border: 1px solid rgba(255, 222, 92, 0.75);
  border-radius: 10px;
  background: #1b1511;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  color: var(--ink);
  font: 700 14px/1.2 var(--body);
  white-space: nowrap;
  pointer-events: none;
  animation: bubble-in 0.16s ease-out;
}

.bubble b {
  color: var(--brass-hi);
  font: 800 17px/1 var(--display);
  letter-spacing: 0.02em;
}

/* the tail toward the chip */
.bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: calc(var(--arrow, 50%) - 5px);
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(255, 222, 92, 0.75);
  border-bottom: 1px solid rgba(255, 222, 92, 0.75);
  background: #1b1511;
  transform: rotate(45deg);
}

.bubble--below::after {
  top: -6px;
  bottom: auto;
  transform: rotate(225deg);
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
}

.bubble--below { animation-name: bubble-in-below; }

@keyframes bubble-in-below {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
}

.lvl:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mode__flame {
  width: 17px;
  height: 17px;
  margin-left: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.mode[data-mode='challenge'][aria-pressed='true'] .mode__flame { fill: #f08a24; stroke: #f7c63c; }

.mode[data-mode='challenge'][aria-pressed='true'] {
  box-shadow: inset 0 0 0 1px #f08a24, 0 0 12px rgba(240, 138, 36, 0.35);
}

.mode__track {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.mode__track circle { fill: currentColor; stroke: none; }
.mode[data-mode='track'][aria-pressed='true'] .mode__track { stroke: #38c6ff; }
.mode[data-mode='track'][aria-pressed='true'] .mode__track circle { fill: #38c6ff; }

.mode[data-mode='track'][aria-pressed='true'] {
  box-shadow: inset 0 0 0 1px #38c6ff, 0 0 12px rgba(56, 198, 255, 0.3);
}

/* Flash options share a compact row on phones. */
.nav-track,
.nav-flash {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}



/* the Mode button phones use in place of the mode tabs */
.picker { display: none; }

.picker__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
}

.picker__icon .chip--xs,
.modepick__icon .chip--xs { --size: 20px; }
.picker__icon svg,
.modepick__icon svg { width: 20px; height: 20px; margin: 0; }
.picker[data-mode='challenge'] .mode__flame { fill: #f08a24; stroke: #f7c63c; }
.picker[data-mode='flash'] .mode__cards { stroke: var(--brass-hi); }
.picker[data-mode='track'] .mode__track { stroke: #38c6ff; }
.picker[data-mode='track'] .mode__track circle { fill: #38c6ff; }

.picker__text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.picker__text small {
  color: var(--ink-3);
  font: 700 9.5px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.picker__text b {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker__chev {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sheet__body.modepicks { gap: 6px; }
.modepicks .sheet__h:not(:first-child) { margin-top: 8px; }

.modepick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--rail-3);
  color: var(--ink);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.modepick:hover { border-color: var(--line-hi); }

.modepick[aria-current='true'] {
  border-color: rgba(215, 170, 79, 0.8);
  background: #2f271f;
}

.modepick__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  padding-top: 1px;
}

.modepick__text { display: grid; gap: 2px; }
.modepick__text b { font-size: 16px; }

.modepick__text small {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.35;
}

/* Compact option switches: Improper and Player colors. */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.switch:hover,
.switch[aria-checked='true'] { color: var(--ink); }

.switch:disabled { cursor: default; opacity: 0.65; }

.switch__box {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--rail-4);
  box-shadow: inset 0 0 0 1px var(--line-hi);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.switch__box::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform 0.2s, background-color 0.2s;
}

.switch[aria-checked='true'] .switch__box {
  background: rgba(215, 170, 79, 0.3);
  box-shadow: inset 0 0 0 1px var(--brass);
}

.switch[aria-checked='true'] .switch__box::after {
  transform: translateX(12px);
  background: var(--brass-hi);
}

.mode__cards {
  width: 18px;
  height: 18px;
  margin-left: 2px;
  fill: var(--rail-2);
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tools { display: flex; gap: 8px; }
.navbar__nav { width: 100%; }
.navbar__nav .tools { margin-left: auto; }

.tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--rail-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}

.tool:hover { color: var(--ink); border-color: var(--line-hi); }
/* Pay chart and Settings wait out a test or a Challenge run */
.tool.is-locked { opacity: 0.45; cursor: not-allowed; }

.tool svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.tool circle { fill: var(--rail-2); }
.tool .tool__dot { fill: currentColor; stroke: none; }

/* Compact, inline options stay distinct from the underlined Mode tabs. */
.nav-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
}

.navbar .seg {
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.navbar .seg--difficulty,
.navbar .seg--deck {
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

.navbar .seg__label {
  flex: none;
  padding: 0 6px 0 0;
  font-size: 9.5px;
  letter-spacing: 0.06em;
}

.navbar .lvl {
  height: 32px;
  min-width: 0;
  padding-inline: 5px;
  border-radius: 6px;
  font-size: 12px;
}

.navbar .lvl:hover { background: var(--rail-2); }

.navbar .lvl[aria-pressed='true'] {
  background: var(--rail-3);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-hi);
}

.navbar .info { width: 24px; height: 32px; }
.navbar .info svg { width: 16px; height: 16px; }

.navbar .switch {
  height: 32px;
  padding-inline: 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 400;
}

.navbar .switch:hover:not(:disabled) { background: var(--rail-2); }

/* Tablet: brand and tools, then wrapping Mode and option groups.
   The nav remains a landmark while its children participate in the header grid. */
@media (min-width: 561px) {
  .navbar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .brand { grid-area: 1 / 1; min-width: 0; min-height: 32px; gap: 8px; }
  .brand__dice { flex: none; }
  .brand__dice .die { --s: 20px; }
  .brand__name { font-size: 22px; }
  .navbar__nav { display: contents; }
  .nav-controls { grid-column: 1 / -1; }
  .navbar__nav .tools { grid-area: 1 / 2; margin: 0; gap: 2px; }

  .navbar .tool {
    height: 32px;
    gap: 5px;
    padding-inline: 5px;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
  }

  .navbar .tool:hover { background: var(--rail-2); }
  .navbar .tool circle { fill: var(--rail); }
  .navbar .tool .tool__dot { fill: currentColor; }

  .nav-modes {
    display: flex;
    max-width: 100%;
    border-bottom: 1px solid var(--line);
  }

  .nav-modes .seg { gap: 0; flex-wrap: wrap; }

  .navbar .mode {
    height: 36px;
    padding-inline: 6px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13px;
  }

  /* The icons still appear in help and the phone picker. */
  .navbar .mode > .chip,
  .navbar .mode > svg { display: none; }

  .navbar .mode:hover { background: var(--rail-2); }

  .navbar .mode[aria-pressed='true'] {
    border-bottom-color: var(--brass);
    background: transparent;
    color: var(--brass-hi);
    box-shadow: none;
  }

  .nav-flash { display: contents; }
  /* Keep Player colors beside Track difficulty when the options move to another row. */
  .nav-track { max-width: 100%; }
}

/* Wide screens: share one row where the groups fit; longer Flash options can wrap. */
@media (min-width: 1200px) {
  .navbar__inner { display: flex; flex-wrap: nowrap; gap: 8px; }
  .brand { flex: none; margin: 0; }
  .navbar__nav { display: flex; flex: 1; flex-wrap: nowrap; min-width: 0; width: auto; gap: 8px; }
  .nav-controls { flex: 1; column-gap: 8px; }
  .navbar__nav .tools { flex: none; margin-left: auto; }
}

.blurb {
  margin: 0;
  max-width: 78ch;
  color: var(--ink-2);
}

/* -------------------------------------------------------------- stats */

.railbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  overflow-anchor: none; /* its text changes with every answer; the page shouldn't chase that (a 21px jump on a phone) */
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
}

.stat {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px 14px 11px;
  background: var(--rail-2);
  min-width: 0;
}

.stat__label {
  font: 700 10.5px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat__value {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 800 27px/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.stat__sub { font-size: 12px; color: var(--ink-3); }
.stat__value.is-bad { color: var(--lose); }

.stat__of {
  font: 700 12px/1 var(--body);
  color: var(--ink-3);
}

/* three strike marks; a strike fills in red */
.strikes { gap: 6px; }

.strikes i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--rail-4);
}

.strikes i.is-on {
  background: var(--lose);
  box-shadow: 0 0 10px rgba(255, 128, 107, 0.45);
}

.stat--test .btn { justify-self: start; }

.stat__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --------------------------------------------------------------- game */

.game {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: 14px;
  align-items: start;
}

/* the felt, framed by a padded rail */
.table {
  container-type: inline-size;
  padding: 16px;
  border: 10px solid #231a14;
  border-radius: 26px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 5px),
    radial-gradient(120% 90% at 50% 22%, var(--felt-lit) 0%, var(--felt) 50%, var(--felt-deep) 100%);
  box-shadow:
    0 0 0 1px #4e3b2c,
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 12px 40px rgba(0, 0, 0, 0.35),
    0 20px 40px rgba(0, 0, 0, 0.45);
}

.tray {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.tray .dice { display: flex; gap: 12px; }

.call {
  margin: 0;
  display: grid;
  gap: 5px;
}

.call small {
  font: 700 10.5px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-dim);
}

.call span {
  font: 800 clamp(19px, 2.3vw, 27px)/1.05 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--felt-ink);
}

.call.is-waiting span { color: var(--felt-dim); }

/* -------------------------------------------------------------- dice */

.die {
  --s: 56px;
  width: var(--s);
  height: var(--s);
  display: block;
  padding: 0;
  border-radius: calc(var(--s) * 0.2);
  background: linear-gradient(150deg, #f0604a 0%, #cc2a1f 42%, #8e1510 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    0 7px 14px rgba(0, 0, 0, 0.45);
}

.die--logo {
  --s: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* recessed pips: a dark rim shows at the top edge of each */
.die .pip-rim { fill: #5c0c08; fill-opacity: 0.45; }
.die .pip { fill: #fff8ec; }

@keyframes tumble {
  0% { transform: translate(-70px, -26px) rotate(-280deg) scale(0.8); opacity: 0.3; }
  55% { transform: translate(6px, 3px) rotate(16deg) scale(1.03); opacity: 1; }
  80% { transform: translate(-2px, 0) rotate(-5deg); }
  100% { transform: none; }
}

.die.is-rolling { animation: tumble 0.56s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
#die2.is-rolling { animation-duration: 0.62s; }

/* ------------------------------------------------------------ loader */
/* The loading screen: three bets go down, two dice are thrown onto the felt, and the stickman calls
   the roll (app.js picks the throw and the call). It shows only while <html> has .is-loading, which
   its script in index.html adds, and while it fades out, so without scripts the page shows as usual. */

.loader { display: none; }

.is-loading,
.is-loading body { overflow: hidden; }

.is-loading .loader,
.loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding:
    max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  grid-template-columns: minmax(0, 1fr); /* nothing inside can push the felt off a narrow screen */
  background: radial-gradient(90% 70% at 50% 42%, #261d17, var(--rail) 72%);
  touch-action: none; /* a drag on it never scrolls the page under it (older iPhones ignore overflow) */
}

.loader.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease; /* LOADER_FADE_MS in app.js */
}

.loader__felt {
  position: relative;
  width: min(400px, 100%);
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 36px 22px 30px;
  border-radius: 26px;
  background: radial-gradient(120% 85% at 50% 32%, var(--felt-lit), var(--felt) 55%, var(--felt-deep));
  box-shadow:
    0 0 0 3px var(--rail-4),
    0 0 0 5px rgba(215, 170, 79, 0.55),
    0 24px 60px rgba(0, 0, 0, 0.6);
}

/* the white layout line around the felt */
.loader__felt::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 2px solid var(--felt-line);
  border-radius: 16px;
  opacity: 0.8;
  pointer-events: none;
}

/* the brand lettering as outlines (Big Shoulders Display 900 at 46px), so it shows right away */
.loader__brand {
  display: block;
  width: min(253px, 100%);
  height: auto;
  fill: var(--ink);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}

.loader__brand .loader__pro { fill: var(--brass); }

.loader__bets { display: flex; gap: 14px; }

.loader__bets .chip {
  --size: 46px;
  font-size: 15px;
  animation: loader-toss 0.42s cubic-bezier(0.3, 1.45, 0.5, 1) 0.15s both;
}

.loader__bets .chip--long { font-size: 12.5px; }
.loader__bets .chip:nth-child(2) { animation-delay: 0.38s; }
.loader__bets .chip:nth-child(3) { animation-delay: 0.61s; }

@keyframes loader-toss {
  0% { transform: translateY(-48px) scale(1.3); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.loader__dice { display: flex; gap: 16px; }

/* thrown in from the left, tumbling; the second die lands last, and app.js calls the roll then */
.loader__die {
  --s: 62px;
  animation: loader-throw 0.74s cubic-bezier(0.2, 0.75, 0.25, 1) 1s both;
}

.loader__die + .loader__die { animation-duration: 0.82s; animation-delay: 1.06s; }

@keyframes loader-throw {
  0% { transform: translate(-50vw, -70px) rotate(-540deg) scale(0.75); opacity: 0; }
  12% { opacity: 1; }
  58% { transform: translate(10px, 5px) rotate(18deg) scale(1.04); }
  80% { transform: translate(-3px, 0) rotate(-5deg); }
  100% { transform: none; opacity: 1; }
}

/* the stickman's line, styled like the table's (.call) but on its own */
.loader__call {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.loader__call small {
  font: 700 10.5px/1 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-dim);
}

.loader__call span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1em; /* room for a two-line call, so nothing shifts when it lands */
  max-width: 15em;
  font: 800 clamp(20px, 6.2vw, 26px)/1.05 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--felt-dim);
}

.loader__call.is-called span {
  color: var(--felt-ink);
  animation: loader-call 0.38s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes loader-call {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* a phone on its side: everything smaller, so the whole felt fits the screen's height */
@media (max-height: 430px) {
  .loader__felt { gap: 12px; padding: 22px 22px 18px; }
  .loader__brand { width: min(200px, 100%); }
  .loader__bets .chip { --size: 38px; font-size: 13px; }
  .loader__bets .chip--long { font-size: 11px; }
  .loader__die { --s: 48px; }
  .loader__call span { font-size: 20px; }
}

/* ------------------------------------------------------------ layout */
/* A Harrah's-style center layout, read from the stickman's side. Sizes are in
   cqw (percent of the layout's width) so the whole box scales like a drawing. */

.layout {
  --chip: clamp(24px, 6cqw, 36px);
  container-type: inline-size;
  display: grid;
  gap: 2cqw;
  transform-origin: 0 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* double-tap zoom: the drawing scales inside this frame, and drags to pan while zoomed */
.view {
  position: relative;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* one finger pans the zoomed drawing; a pinch still zooms the page */
.view.is-zoomed {
  touch-action: pinch-zoom;
  cursor: grab;
}

/* the clip stays on until a zoom-out has finished shrinking */
.view.is-clipped {
  overflow: hidden;
  border-radius: 6px;
}

.view.is-dragging { cursor: grabbing; }

/* "Correct" or "Incorrect", popped up over the board after an answer; taps go straight through */
.verdict-pop {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.verdict-pop span {
  padding: 0.14em 0.5em 0.1em;
  border-radius: 0.32em;
  background: rgba(14, 10, 8, 0.78);
  box-shadow: inset 0 0 0 3px currentColor, 0 14px 34px rgba(0, 0, 0, 0.5);
  font: 900 clamp(40px, 12cqw, 96px)/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  animation: verdict-pop 1.6s ease-out; /* no fill: with reduced motion it simply shows until the timer */
}

.verdict-pop.is-right span { color: var(--win); animation-name: verdict-pop-long; animation-duration: 2.6s; }
.verdict-pop.is-wrong span { color: var(--lose); }

@keyframes verdict-pop {
  0% { opacity: 0; transform: scale(0.6); }
  13% { opacity: 1; transform: scale(1.08); }
  22% { transform: scale(1); }
  62% { opacity: 1; }
  90%, 100% { opacity: 0; transform: scale(1.04); }
}

/* "Correct" pops in just as fast, then holds about a second longer before it fades */
@keyframes verdict-pop-long {
  0% { opacity: 0; transform: scale(0.6); }
  8% { opacity: 1; transform: scale(1.08); }
  13% { transform: scale(1); }
  78% { opacity: 1; }
  95%, 100% { opacity: 0; transform: scale(1.04); }
}
.view.is-dragging .layout { transition: none; }

.view__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: rgba(18, 12, 9, 0.78);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font: 700 11px/1 var(--body);
  letter-spacing: 0.03em;
  pointer-events: none;
}

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

/* printed dice. Each area sets --d for its dice (hops, hardways, horn numbers, horn high). */
.dice {
  display: inline-flex;
  gap: calc(var(--d, 16px) * 0.16);
}

.dice--stack { flex-direction: column; }

.d {
  display: block;
  flex: none;
  width: var(--d, 16px);
  height: var(--d, 16px);
}

/* whole pixels keep each die crisp; browsers without round() keep the exact size */
@supports (width: round(1.5px, 1px)) {
  .d {
    width: round(var(--d, 16px), 1px);
    height: round(var(--d, 16px), 1px);
  }
}

.d > svg,
.die > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.d__body { fill: var(--die-red); }
.d circle { fill: var(--die-red-pip); }
.dice--white .d__body { fill: var(--die-white); }
.dice--white .d circle { fill: var(--die-white-pip); }

/* bonus bets across the far side */
.bonus {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--felt-line);
}

.bonus__box {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.5cqw;
  padding: 1.4cqw 1cqw;
  color: var(--lay-ink);
  text-align: center;
}

.bonus__box + .bonus__box { border-left: 2px solid var(--felt-line); }

/* a bonus bet sits in the bottom corner of its box, beside the odds and clear of the name */
.bonus__box { position: relative; }
.bonus__box > .spot { top: calc(100% - var(--chip) * 0.5); left: calc(100% - var(--chip) * 0.62); }

.bonus__box b {
  font: 700 clamp(9px, 3cqw, 20px)/1 var(--lay-sans);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bonus__box > span:not(.spot) { font: 600 clamp(6.5px, 1.45cqw, 10px)/1.2 var(--lay-sans); }

.bonus__box em {
  font: 700 clamp(9px, 2.8cqw, 19px)/1 var(--lay-serif);
  font-style: normal;
}

.bonus__box small { font-size: 0.72em; }

/* fire bet row with a world bet globe at each end */
.fire {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4cqw;
}

.world {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(26px, 7.4cqw, 48px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #86dccf 0%, #36ad9b 55%, #1f7c6f 100%);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
  color: #0f3b34;
}

.world svg {
  position: absolute;
  inset: 10%;
  width: 80%;
  height: 80%;
}

.world b {
  position: relative;
  width: 72%;
  font: 800 clamp(5px, 1.35cqw, 9px)/1 var(--lay-sans);
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.fire__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4cqw;
  margin: 0;
  padding: 2.2cqw 0;
  list-style: none;
}

.fire__spot {
  position: relative;
  flex: 1 1 0;
  max-width: 5.4cqw;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.fire__spot svg {
  position: absolute;
  left: -16%;
  top: -48%;
  width: 132%;
  height: 150%;
}

.fire__spot span {
  position: relative;
  width: 82%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #5b2d66;
  box-shadow: 0 0 0 1px #f7c63c;
  color: #fff;
  font: 700 clamp(6px, 1.7cqw, 12px)/1 var(--lay-serif);
}

.fire__logo {
  flex: none;
  padding: 0.4cqw 0.7cqw;
  border-radius: 3px;
  background: #d93a24;
  box-shadow: 0 0 0 1px #f7c63c;
  color: #fff8e8;
  font: 800 clamp(5px, 1.3cqw, 9px)/1 var(--lay-sans);
  text-align: center;
  text-transform: uppercase;
}

/* C&E circles down both sides of the box */
.center {
  display: grid;
  grid-template-columns: clamp(15px, 4.8cqw, 32px) minmax(0, 1fr) clamp(15px, 4.8cqw, 32px);
  gap: 1.8cqw;
}

.rail {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.ce {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--felt-line);
  border-radius: 50%;
  color: #f0473a;
  font: 700 clamp(5px, 1.45cqw, 10px)/1 var(--lay-serif);
  letter-spacing: -0.02em;
}

/* an arrow out toward the players, as printed on the felt */
.ce::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 1.3cqw;
  margin-top: -0.75px;
  border-top: 1.5px solid var(--felt-line);
}

.rail--right .ce::after { right: auto; left: 100%; }

.ce::before {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 1.3cqw);
  transform: translateY(-50%);
  border-right: 0.9cqw solid var(--felt-line);
  border-block: 0.5cqw solid transparent;
}

.rail--right .ce::before {
  right: auto;
  left: calc(100% + 1.3cqw);
  border-right: 0;
  border-left: 0.9cqw solid var(--felt-line);
}

/* the prop box: white lines are the 2px gaps between plum cells */
.pbox {
  display: grid;
  gap: 2px;
  border: 2px solid var(--felt-line);
  background: var(--felt-line);
}

.hop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9cqw 3.4cqw;
  background: var(--plum);
  color: var(--lay-ink);
  font: 400 clamp(7px, 2cqw, 13px)/1 var(--lay-serif);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.hop-head .odds { letter-spacing: 0.04em; }
/* letter-spacing trails the last letter; pull it back so both labels sit square */
.hop-head > span:not(.odds) { margin-right: -0.3em; }

.hops {
  display: grid;
  grid-template-columns: repeat(19, minmax(0, 1fr));
  align-items: center;
  gap: 0.5cqw;
  padding: 1cqw 1.2cqw;
  background: var(--plum);
}

.hop {
  --d: clamp(8px, 3.2cqw, 21px);
  position: relative;
  display: grid;
  justify-items: center;
  padding: 0.5cqw 0;
  border-radius: 3px;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.hop-odds {
  display: grid;
  justify-items: center;
  color: var(--lay-ink);
  font: 700 clamp(7px, 1.9cqw, 13px)/1.05 var(--lay-sans);
  text-align: center;
}

.hardways {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(10px, 3.4cqw, 24px) minmax(0, 1fr);
  grid-template-areas: 'h6 lbl h10' 'h8 lbl h4';
  gap: 2px;
  background: var(--felt-line);
}

.hw-6 { grid-area: h6; }
.hw-10 { grid-area: h10; }
.hw-8 { grid-area: h8; }
.hw-4 { grid-area: h4; }

.hw-label {
  grid-area: lbl;
  display: grid;
  place-items: center;
  background: var(--plum);
  color: var(--lay-ink);
  font: 400 clamp(7px, 2cqw, 13px)/1 var(--lay-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.horn {
  display: grid;
  grid-template-columns:
    minmax(0, 12.5fr) minmax(0, 23.5fr) minmax(0, 14fr)
    minmax(0, 14fr) minmax(0, 23.5fr) minmax(0, 12.5fr);
  grid-template-rows: repeat(4, minmax(clamp(15px, 5.2cqw, 34px), auto)) minmax(clamp(26px, 8cqw, 52px), auto);
  grid-template-areas:
    'hl1 ad ac ac bx hr1'
    'hl2 ad ac ac bx hr2'
    'hl3 yo1 hb1 hb2 yo2 hr3'
    'hl4 yo1 hb1 hb2 yo2 hr4'
    'cr1 cr1 sv sv cr2 cr2';
  gap: 2px;
  background: var(--felt-line);
}

.a-hl1 { grid-area: hl1; }
.a-hl2 { grid-area: hl2; }
.a-hl3 { grid-area: hl3; }
.a-hl4 { grid-area: hl4; }
.a-hr1 { grid-area: hr1; }
.a-hr2 { grid-area: hr2; }
.a-hr3 { grid-area: hr3; }
.a-hr4 { grid-area: hr4; }
.a-ad { grid-area: ad; }
.a-ac { grid-area: ac; }
.a-bx { grid-area: bx; }
.a-yo1 { grid-area: yo1; }
.a-yo2 { grid-area: yo2; }
.a-hb1 { grid-area: hb1; }
.a-hb2 { grid-area: hb2; }
.a-cr1 { grid-area: cr1; }
.a-sv { grid-area: sv; }
.a-cr2 { grid-area: cr2; }

.cell,
.hh {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  background: var(--plum);
  color: var(--lay-ink);
  transition: background-color 0.2s, box-shadow 0.2s;
}

.cell {
  gap: 0.7cqw;
  padding: 0.8cqw;
}

.cell--hw {
  --d: clamp(13px, 5.4cqw, 36px);
  min-height: clamp(38px, 11.5cqw, 76px);
}

.cell--num { --d: clamp(11px, 4.6cqw, 31px); }

.odds {
  color: var(--lay-ink);
  font: 400 clamp(8px, 2.2cqw, 15px)/1 var(--lay-serif);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.odds small { font-size: 0.74em; }

.hh {
  --d: clamp(9px, 2.3cqw, 16px);
  gap: 0.4cqw;
  padding: 0.3cqw;
}

.hh b {
  font: 700 clamp(5px, 1.4cqw, 10px)/1 var(--lay-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cell--horn > span:first-child {
  font: 400 clamp(7px, 2.2cqw, 15px)/1 var(--lay-serif);
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.cell--craps {
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.4cqw;
  font: 400 clamp(8px, 2.5cqw, 17px)/1 var(--lay-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the chip sits between the paired boxes, so their labels step toward the outside */
.cell--craps.a-cr1 { justify-content: start; padding-left: 1cqw; }
.cell--craps.a-cr2 { justify-content: end; padding-right: 1cqw; }
.a-hb1 { justify-items: start; }
.a-hb2 { justify-items: end; }

.seven-logo {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.seven-logo b {
  color: #e8261c;
  font: 700 clamp(22px, 7.4cqw, 50px)/0.85 var(--lay-serif);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  transform: skewX(-6deg);
}

.seven-logo i {
  position: absolute;
  left: 50%;
  bottom: 18%;
  padding: 0.25cqw 0.9cqw;
  border-radius: 2px;
  background: #f6d53f;
  box-shadow: 0 0 0 1px #b88b17;
  color: #2a190c;
  font: 800 clamp(5px, 1.35cqw, 9px)/1 var(--lay-sans);
  font-style: normal;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-5deg);
}

@container (max-width: 420px) {
  .hh b { display: none; }
  .hh { --d: 3.9cqw; }
  .hops { gap: 0.3cqw; padding-inline: 0.8cqw; }
  .hop { --d: 3.3cqw; }
  .cell--num { --d: 5.2cqw; }
}

/* where chips sit: a zero-size anchor, the chip centers on it */
.spot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 2;
}

.cell--hw > .spot { left: 82%; }
.a-bx > .spot--edge { left: 0; z-index: 3; }

/* one-number boxes: the chip sits in the corner beside the dice, clear of the odds */
.spot[data-spot="aceDeuce"],
.spot[data-spot="aces"],
.spot[data-spot="yo"] { left: calc(var(--chip) / 2); top: 37%; }
.spot[data-spot="boxcars"] { left: calc(100% - var(--chip) / 2); top: 37%; }

/* 3-way craps: on the 3 (left) or the 12 (right), pushed against the outside edge of the box */
.a-ad > .spot--out { left: calc(var(--chip) * 0.42); z-index: 3; }
.a-bx > .spot--out { left: calc(100% - var(--chip) * 0.42); z-index: 3; }
.a-hb1 > .spot { left: calc(100% + 1px); top: 50%; }
.spot[data-home="yo:right"] { left: calc(100% - var(--chip) / 2); top: 37%; }
.a-cr2 > .spot { left: calc(var(--chip) / 2); }
/* Track Mode sets a horn in the middle of the box on the player's side, over its label */
.is-track .a-hb1,
.is-track .a-hb2 { justify-items: center; }
.a-hb1 > .spot[data-home] { left: 50%; }
.a-cr1 > .spot { left: calc(100% - var(--chip) / 2); }
.a-sv > .spot { left: 82%; }

/* Track: two players' bets in one box sit side by side, on its left and right halves */
.cell > .spot.spot--lhalf { left: 28%; }
.cell > .spot.spot--rhalf { left: 72%; }
.cell--num > .spot.spot--half { top: 37%; }
.spot > .chip.chip--moved { animation: none; }

/* hop spreads: one stack in the middle of the 7s, or on the line between two easy 6s or 8s */
.hop > .spot--between { left: calc(100% + 0.25cqw); }
/* hop the hardways sits on the HARDWAYS label, the right way up */
.hw-label { position: relative; }
.hw-label > .spot { writing-mode: horizontal-tb; }

.cell.is-hit,
.hop.is-hit {
  background: var(--plum-lit);
  box-shadow: inset 0 0 0 2px var(--brass-hi);
}

/* -------------------------------------------------------------- chips */

.chip {
  --size: 36px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: var(--c-text);
  background:
    radial-gradient(circle, var(--c-face) 0 57%, var(--c-ring) 58% 62%, transparent 63%),
    repeating-conic-gradient(from 8deg, var(--c-spot) 0deg 16deg, var(--c-base) 16deg 45deg);
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.28),
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 5px 10px rgba(0, 0, 0, 0.35);
  font: 800 13px/1 var(--display);
  font-variant-numeric: tabular-nums;
  transition: box-shadow 0.2s, filter 0.2s, opacity 0.2s;
}

.chip--long { font-size: 11px; }

.chip--white { --c-base: #ece6d8; --c-spot: #2d5fb3; --c-face: #faf6ee; --c-ring: #c9bfa9; --c-text: #1b1a17; }
.chip--red { --c-base: #b8252a; --c-spot: #f3ede2; --c-face: #d23b39; --c-ring: #8b191d; --c-text: #fffaf2; }
.chip--green { --c-base: #1d7a43; --c-spot: #f3ede2; --c-face: #2a9657; --c-ring: #125a2f; --c-text: #fffaf2; }
.chip--black { --c-base: #141210; --c-spot: #e9e0cc; --c-face: #2b2621; --c-ring: #000; --c-text: #fffaf2; }
.chip--purple { --c-base: #57288a; --c-spot: #f1e9da; --c-face: #6c36a5; --c-ring: #3a175f; --c-text: #fffaf2; }
.chip--gold { --c-base: #d99a22; --c-spot: #1b1712; --c-face: #efb94a; --c-ring: #a2701a; --c-text: #1b1712; }

.chip--dot { --size: 20px; }

/* small chips keep a readable edge: a tighter ring and fewer, wider spots */
.chip--xs,
.chip--dot {
  background:
    radial-gradient(closest-side, var(--c-face) 0 58%, var(--c-ring) 59% 66%, transparent 67%),
    repeating-conic-gradient(from 15deg, var(--c-spot) 0deg 20deg, var(--c-base) 20deg 60deg);
}
.chip--xs { --size: 20px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }

.spot > .chip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  animation: place 0.26s ease-out both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes place {
  from { transform: translate(-50%, -80%) scale(0.7); opacity: 0; }
}

.lammer {
  position: absolute;
  left: 50%;
  top: calc(100% - 7px);
  transform: translateX(-50%);
  padding: 3px 6px 2px;
  border-radius: 999px;
  background: #f6f0e1;
  color: #1c1a16;
  font: 800 9.5px/1 var(--display);
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* chips on the layout scale with it, and glow yellow so every bet stands out on the felt. The glow
   grows with the chip. A result replaces it: green wins, red loses, silver pushes. */
.layout .chip {
  --size: var(--chip);
  --glow: 255, 214, 64;
  font-size: clamp(9.5px, 2.15cqw, 13px);
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(255, 222, 92, 0.95),
    0 0 calc(var(--size) * 0.3) calc(var(--size) * 0.1) rgba(var(--glow), 0.8),
    0 0 calc(var(--size) * 0.7) calc(var(--size) * 0.22) rgba(var(--glow), 0.45),
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 5px 10px rgba(0, 0, 0, 0.35);
}

.layout .chip--long { font-size: clamp(8px, 1.8cqw, 11px); }

/* Bets in play breathe: a soft extra halo swells and fades over the glow, so they catch the eye.
   It sits behind the chip's amount and marker, and stops once a result, a pick or a ding marks the chip. */
.layout .chip:not(.is-win, .is-push, .is-lose, .is-none, .is-picked, .is-mine, .is-wrong, .is-leaving)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--size) * 0.55) calc(var(--size) * 0.24) rgba(var(--glow), 0.6);
  opacity: 0;
  animation: glow 1.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow { 50% { opacity: 1; } }

.layout .lammer {
  top: calc(100% - 5px);
  padding: 2px 4px 1px;
  font-size: clamp(6.5px, 1.55cqw, 9.5px);
}

/* a heeled bet: the top chip is tipped off the stack toward the outside of the box */
.chip__heel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.2s;
}

/* positioned so the amount paints over the heel; the halo keeps it readable on the heel's edge */
.chip__amt { position: relative; }
.chip__heel + .chip__amt { text-shadow: 0 0 2px var(--c-face), 0 0 3px var(--c-face), 0 0 4px var(--c-face); }

/* the heel glows with its chip until a result shows */
.layout .chip:not(.is-win, .is-push, .is-lose) > .chip__heel {
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(255, 222, 92, 0.85),
    0 0 calc(var(--size) * 0.3) calc(var(--size) * 0.08) rgba(var(--glow), 0.7),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

.chip--heel-left > .chip__heel { transform: translate(-54%, -12%) rotate(-8deg) scaleX(0.8); }
.chip--heel-right > .chip__heel { transform: translate(54%, -12%) rotate(8deg) scaleX(0.8); }

/* the marker sits under the pair, toward the heel, clear of the box's odds */
.chip--heel-left > .lammer { left: 25%; }
.chip--heel-right > .lammer { left: 75%; }

.chip.is-win { box-shadow: 0 0 0 3px var(--win), 0 0 18px rgba(98, 213, 151, 0.55), 0 2px 0 rgba(0, 0, 0, 0.45); }
.chip.is-push { box-shadow: 0 0 0 3px var(--push), 0 2px 0 rgba(0, 0, 0, 0.45); }
.chip.is-lose { filter: saturate(0.35) brightness(0.72); box-shadow: 0 0 0 2px var(--lose), 0 2px 0 rgba(0, 0, 0, 0.45); }
.chip.is-none { opacity: 0.5; }

/* ------------------------------------------------------- pay station */

.station {
  display: grid;
  gap: 14px;
}

.panel {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--rail-2);
}

.panel__title {
  margin: 0 0 6px;
  font: 800 13px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.action {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bet {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: first baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.bet:first-child { border-top: 0; }
.bet > .chip--dot { align-self: start; margin-top: 4px; }

.bet__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.bet__aka {
  margin-left: 7px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

.bet__sub,
.bet__math {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}

.bet__math {
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.bet__side {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

.bet__amt {
  font: 800 22px/1 var(--display);
  font-variant-numeric: tabular-nums;
}

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

.bet__net {
  min-width: 3.2em;
  text-align: right;
  font: 800 18px/1 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.bet.is-win .bet__net { color: var(--win); }
.bet.is-lose .bet__net { color: var(--lose); }

.tag {
  padding: 4px 7px 3px;
  border-radius: 999px;
  font: 700 10.5px/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--win { color: var(--win); background: var(--win-wash); }
.tag--lose { color: var(--lose); background: var(--lose-wash); }
.tag--push { color: var(--push); background: rgba(217, 211, 201, 0.13); }
.tag--none { color: var(--ink-2); background: rgba(203, 191, 173, 0.1); }

/* register */
.register {
  display: grid;
  gap: 12px;
}

.register__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 12px;
}

/* the one-minute clock in Challenge mode */
.register__clock {
  display: flex;
  align-items: center;
  gap: 12px;
}

.countdown {
  font: 800 34px/0.9 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--brass-hi);
}

.strikes--mini { display: inline-flex; gap: 5px; }

.strikes--mini i {
  width: 12px;
  height: 12px;
}

.countdown.is-low { color: var(--lose); }

.timebar {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--rail-4);
}

.timebar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brass), var(--brass-hi));
  transform: scaleX(var(--left, 1));
  transform-origin: left center;
  transition: transform 0.2s linear;
}

.timebar.is-low > span { background: var(--lose); }

.prompt {
  margin: 0;
  display: grid;
  gap: 4px;
}

.prompt > span {
  font: 800 22px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prompt small { font-size: 13px; color: var(--ink-3); }

.display {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  min-height: 78px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c0a08;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
  color: var(--brass-hi);
  font: 800 54px/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.display__cur { font-size: 30px; color: var(--ink-3); }
.display.is-empty #entry { color: var(--line-hi); }
.display.is-empty .display__cur { color: var(--line-hi); }
.display.is-nudge { animation: nudge 0.3s; }

@keyframes nudge {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.key {
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--rail-4), var(--rail-3));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font: 800 28px/1 var(--display);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.key:hover { border-color: var(--line-hi); }

.key:active,
.key.is-pressed {
  transform: translateY(2px);
  box-shadow: none;
}

.key--fn {
  font: 700 13px/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.key[data-key='back'] { font-size: 22px; }

.register__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#payBtn { grid-column: span 2; height: 56px; }

/* Collect, for a short pay: the player's losers cost more than the win, so they owe the difference */
.register.is-collect .register__actions { grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr) repeat(2, minmax(0, 1fr)); }
.station.is-track .register.is-collect .register__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }

#hintBtn,
#collectBtn {
  height: 56px;
  background: linear-gradient(180deg, var(--rail-4), var(--rail-3));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  color: var(--ink-2);
  font: 700 13px/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#collectBtn { color: var(--ink); }

/* verdict */
.verdict {
  display: grid;
  gap: 14px;
}

.verdict__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 900 30px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.verdict__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 900 19px/1 var(--body);
}

.verdict.is-right .verdict__head { color: var(--win); }
.verdict.is-right .verdict__mark { background: var(--win-wash); }
.verdict.is-wrong .verdict__head { color: var(--lose); }
.verdict.is-wrong .verdict__mark { background: var(--lose-wash); }

.verdict__tip {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
}

.verdict__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c0a08;
}

.verdict__total > span {
  display: grid;
  gap: 5px;
  font: 800 16px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.verdict__total small {
  font: 400 13px/1.3 var(--body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

.verdict__total strong {
  font: 800 48px/1 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--brass-hi);
}

/* flash cards: four answers, each to the cent */
.flash {
  display: grid;
  gap: 14px;
}

.flash__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.flash__cents {
  flex: none;
  padding: 5px 10px 4px;
  border: 1px solid rgba(215, 170, 79, 0.6);
  border-radius: 999px;
  color: var(--brass-hi);
  font: 800 12px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flash__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.answer {
  position: relative;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--rail-4), var(--rail-3));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  color: var(--ink);
  font: 800 32px/1 var(--display);
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.answer small {
  position: absolute;
  top: 7px;
  left: 9px;
  color: var(--ink-3);
  font: 700 11px/1 var(--body);
}

.answer:hover:not(:disabled) { border-color: var(--line-hi); }
.answer:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.answer:disabled { cursor: default; }
.answer:disabled:not(.is-right):not(.is-wrong) { opacity: 0.45; }

.answer.is-right {
  border-color: var(--win);
  background: var(--win-wash);
  color: var(--win);
}

.answer.is-wrong {
  border-color: var(--lose);
  background: var(--lose-wash);
  color: var(--lose);
}

.flash__result {
  display: grid;
  gap: 10px;
}

.flash__verdict {
  margin: 0;
  font: 900 26px/1 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flash__verdict.is-right { color: var(--win); }
.flash__verdict.is-wrong { color: var(--lose); }

.flash__why,
.flash__math {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
}

/* Learn: progress through the lesson, and a note that opens each bet */
.flash__bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--rail-4);
}

.flash__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brass), var(--brass-hi));
  transition: width 0.3s ease;
}

.flash__intro {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(215, 170, 79, 0.45);
  border-radius: 10px;
  background: rgba(215, 170, 79, 0.08);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}

/* the way to remember a missed pay */
.flash__lesson {
  margin: 0;
  max-width: 62ch;
  padding-left: 12px;
  border-left: 3px solid var(--brass);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.flash__more summary {
  width: max-content;
  color: var(--ink-3);
  font: 700 11px/1.6 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.flash__more[open] summary { margin-bottom: 6px; }

.flash__math {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ buttons */

.btn {
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--rail-3);
  color: var(--ink);
  font: 700 15px/1 var(--body);
}

.btn:hover { border-color: var(--line-hi); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--brass {
  border-color: #b88c3a;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass));
  box-shadow: 0 2px 0 #7d5d22;
  color: var(--brass-ink);
  font: 900 22px/1 var(--display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.btn--brass:hover { border-color: #b88c3a; filter: brightness(1.06); }
.btn--brass:active { transform: translateY(2px); box-shadow: none; }

.btn--small {
  height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 13px;
}

.btn--danger { color: var(--lose); }

.btn--danger.is-armed {
  border-color: var(--lose);
  background: var(--lose);
  color: #1a0b08;
}

/* ------------------------------------------------------------ dialogs */

.sheet {
  width: min(800px, calc(100% - 32px));
  max-height: min(88vh, 920px);
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--rail-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  color: var(--ink);
}

.sheet--narrow { width: min(560px, calc(100% - 32px)); }
.sheet::backdrop { background: rgba(9, 7, 5, 0.76); }

.sheet__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--rail-2);
}

.sheet__head h2 {
  margin: 0;
  font: 900 25px/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sheet__close {
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
}

.sheet__close:hover { color: var(--ink); border-color: var(--line-hi); }

.sheet__body {
  display: grid;
  gap: 18px;
  padding: 18px 18px 24px;
}

.sheet__h {
  margin: 0;
  font: 800 15px/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.sheet__p {
  margin: -2px 0 0;
  max-width: 68ch;
  font-size: 13.5px;
  color: var(--ink-3);
}

/* Pay chart: flat rows, quiet labels and brass amounts, like Settings. */
#chartDialog { border-radius: 12px; }

#chartDialog .sheet__head { padding: 16px 24px; }

#chartDialog .sheet__close {
  width: 44px;
  height: 44px;
  border-color: transparent;
  border-radius: 6px;
}

#chartDialog .sheet__close:hover { background: var(--rail-3); }

#chartDialog .chart__intro {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
}

#chartBody { gap: 28px; padding: 24px; }

.chart-sec { display: grid; gap: 10px; min-width: 0; } /* the Learn explainer's sections too */

#chartBody .sheet__h {
  font: 700 15px/1.4 var(--body);
  letter-spacing: 0;
  text-transform: none;
}

#chartBody .sheet__p {
  margin: -4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

#chartBody .tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

#chartBody .tbl th,
#chartBody .tbl td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

#chartBody .tbl thead th {
  font: 700 12px/1.3 var(--body);
  vertical-align: bottom;
  color: var(--ink-2);
}

#chartBody .tbl thead th small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
}

#chartBody .tbl .num { text-align: right; }
#chartBody .tbl tbody th { font-weight: 700; white-space: normal; }
#chartBody .tbl__wins { color: var(--ink-2); }
#chartBody .tbl--grid { table-layout: fixed; }
#chartBody .tbl--grid thead th { white-space: normal; }
#chartBody .tbl--grid tbody th { color: var(--brass-hi); }

/* on a phone, what a one-number bet wins on moves under its name, so the table fits */
#chartBody .tbl__on { display: none; }

#chartBody .splits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}

#chartBody .split {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

#chartBody .split__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

#chartBody .split__head h4 { margin: 0; font-size: 14px; }

#chartBody .split__base {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brass-hi);
}

#chartBody .split__desc { font-size: 12.5px; color: var(--ink-2); }

#chartBody .split__rows {
  display: grid;
  gap: 4px;
  margin: 4px 0 0;
}

#chartBody .split__rows div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

#chartBody .split__rows dt { color: var(--ink-2); }
#chartBody .split__rows dd { margin: 0; font-weight: 700; }

/* the horn pays as formulas: what the bet is multiplied by, and the same worked a unit at a time */
#chartBody .splits--formula { grid-template-columns: minmax(0, 1fr); }

#chartBody .formula {
  display: grid;
  margin: 4px 0 0;
}

#chartBody .formula div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 16px;
  padding: 10px 0;
}

#chartBody .formula div + div { border-top: 1px solid var(--line); }

#chartBody .formula dt {
  color: var(--ink-2);
  font-size: 13px;
}

#chartBody .formula dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 2px 12px;
  margin: 0;
}

#chartBody .formula b {
  grid-row: span 2;
  align-self: center;
  color: var(--ink);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

#chartBody .formula small {
  grid-column: 2;
  color: var(--ink-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

#chartBody .notes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

#chartBody .notes li::marker { color: var(--brass); }

/* settings */
.field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field legend {
  margin-bottom: 8px;
  padding: 0;
  font: 800 14px/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--rail-3);
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: rgba(215, 170, 79, 0.8);
  background: #2f271f;
}

.choice input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--brass);
}

.choice > span {
  display: grid;
  gap: 2px;
  font-weight: 700;
}

.choice small {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-3);
}

/* Settings: quiet sections, flat switch rows and brass selection marks, like the nav tabs.
   Header overrides stay local to this dialog. */
#settingsDialog { border-radius: 12px; }

#settingsDialog .sheet__head { padding: 16px 24px; }
#settingsDialog .sheet__head .set__note { margin-top: 6px; }

#settingsDialog .sheet__close {
  width: 44px;
  height: 44px;
  border-color: transparent;
  border-radius: 6px;
}

#settingsDialog .sheet__close:hover { background: var(--rail-3); }

.sheet__body.settings { gap: 24px; padding: 24px; }
.set { display: grid; gap: 8px; min-width: 0; }

.set__title {
  margin: 0;
  color: var(--ink);
  font: 700 14px/1.4 var(--body);
}

.set__note {
  margin: 0;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.set__seg {
  display: grid;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--rail);
}

.set__seg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.set__seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.set__opt {
  position: relative;
  display: grid;
  min-width: 0;
  cursor: pointer;
}

.set__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.set__opt span {
  display: grid;
  place-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 6px;
  border-bottom: 2px solid transparent;
  border-radius: 4px;
  color: var(--ink-2);
  text-align: center;
}

.set__opt b { font-size: 15px; }
.set__opt small { color: var(--ink-2); font-size: 12px; }

.set__opt:hover span { background: var(--rail-2); }

.set__opt input:checked + span {
  border-bottom-color: var(--brass);
  background: var(--rail-3);
  color: var(--brass-hi);
}

.set__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

.set__list { display: grid; }

.set__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 10px 0;
  cursor: pointer;
}

.set__row + .set__row { border-top: 1px solid var(--line); }
.set__row[hidden] + .set__row { border-top: 0; }
.set__help { cursor: default; }
.set__row > span { display: grid; gap: 3px; min-width: 0; }
.set__row b { font-size: 15px; }

.set__row small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.set__switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--rail-4);
  box-shadow: inset 0 0 0 1px var(--line-hi);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.set__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink-2);
}

.set__switch:checked {
  background: var(--brass);
  box-shadow: inset 0 0 0 1px var(--brass);
}

.set__switch:checked::after {
  transform: translateX(18px);
  background: var(--brass-ink);
}

.set__switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* a row that opens something instead of switching it */
.set__go {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.set__go:hover { background: var(--rail-3); }

.set__go svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.set--reset {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.set--reset .btn {
  justify-self: start;
  height: auto;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 6px;
  line-height: 1.4;
}

.set--reset .btn:not(.is-armed) { background: transparent; }

.weak-list { display: grid; margin: 0; padding: 0; list-style: none; }
.weak-list li { display: grid; gap: 4px; padding: 12px 0; }
.weak-list li + li { border-top: 1px solid var(--line); }
.weak-list b { font-size: 15px; overflow-wrap: anywhere; }
.weak-list small { color: var(--ink-2); font-size: 13px; }

@media (max-width: 560px) {
  #settingsDialog .sheet__head { padding: 14px 16px; }
  .sheet__body.settings { padding: 20px 16px; }
  .set__row { gap: 16px; }
}

/* scorecard */
.score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.score__big {
  font: 900 76px/1 var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--brass-hi);
}

.score__big span { font-size: 38px; color: var(--ink-3); }

.score__meta {
  display: grid;
  gap: 4px;
  color: var(--ink-2);
}

.score__meta strong { color: var(--ink); }

.misses {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.misses li {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--rail-3);
  font-size: 13.5px;
}

.miss__bets { font-weight: 700; }
.miss__roll { color: var(--ink-3); }
.miss__pay { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.miss__pay b { color: var(--lose); }
.miss__pay strong { color: var(--win); }

/* ---------------------------------------------------------- odds + ends */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--brass-hi);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  color: var(--brass-ink);
  font-weight: 700;
  text-align: center;
  pointer-events: none; /* a note, not a button: taps go through to what's under it */
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s, transform 0.25s;
}

.toast.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.foot {
  display: grid;
  gap: 10px;
  /* extra room on short pages so the camera can still bring the table to the top */
  margin-top: var(--pan-room, 0px);
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}

.foot p { margin: 0; max-width: 92ch; }

kbd {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--rail-3);
  color: var(--ink-2);
  font: 700 11px/1 var(--body);
}

/* ------------------------------------------------------- learn explainer */

.learn-help .sheet__p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

.learn-help__lead {
  margin: 0;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.5;
}

/* the example: a $5 horn's pay, and the $50 horn's with the decimal point moved */
.learn-eg {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c0a08;
}

.learn-eg__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.learn-eg__row span { color: var(--ink-2); }

.learn-eg__row b {
  color: var(--brass-hi);
  font: 800 26px/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.learn-eg__note {
  margin: -2px 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
}

/* the box and the button stay in view while the text scrolls on a small screen */
.learn-help__foot {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 12px;
  margin: 0 -18px -24px;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line);
  background: var(--rail-2);
}

.learn-help__skip {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
}

.learn-help__skip input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brass);
}

/* -------------------------------------------------------------- track */

/* seats: a seated player's C&E circle shows their initial, in their own color on Easy */
.ce__who { display: none; }

.ce.is-seat {
  border-color: var(--own, #fff7e4);
  background: var(--own, #fff7e4);
  box-shadow: 0 0 0 2px rgba(20, 16, 13, 0.35);
}

.ce.is-seat .ce__txt { display: none; }

.ce.is-seat .ce__who {
  display: block;
  color: #1b1712;
  font: 900 clamp(8px, 2.6cqw, 16px)/1 var(--display);
}

/* the player tossing in a bet, or being picked or paid: a ring that breathes (and holds still for reduced motion) */
.ce.is-now {
  box-shadow: 0 0 0 3px rgba(255, 247, 228, 0.9), 0 0 10px 3px rgba(255, 247, 228, 0.4);
  animation: seat 1.4s ease-in-out infinite;
}

@keyframes seat {
  50% { box-shadow: 0 0 0 3px rgba(255, 247, 228, 0.35), 0 0 14px 5px rgba(255, 247, 228, 0.15); }
}

.table[data-step='placing'] .layout [data-track],
.table[data-step='picking'] .layout .chip { cursor: pointer; }

@media (hover: hover) {
  .table[data-step='placing'] .layout [data-track]:hover { box-shadow: inset 0 0 0 2px rgba(255, 247, 228, 0.6); }
}

/* after a tap in the wrong box: it flashes red and the right box pulses */
.layout [data-track].is-cue {
  background-color: var(--plum-lit);
  box-shadow: inset 0 0 0 3px var(--brass-hi), 0 0 0 2px var(--brass-hi);
  animation: cue 1s ease-in-out infinite;
}

@keyframes cue {
  50% { box-shadow: inset 0 0 0 3px rgba(241, 205, 120, 0.3), 0 0 0 2px rgba(241, 205, 120, 0.3); }
}

.layout [data-track].is-miss { animation: miss 0.7s ease-out; }

@keyframes miss {
  0%, 40% { background-color: #9b3a4a; box-shadow: inset 0 0 0 3px var(--lose), 0 0 0 2px var(--lose); }
}

/* Easy: each player's bets ring and glow in the player's own color */
.layout .chip--own { --glow: var(--own-rgb); }

.layout .chip--own:not(.is-win, .is-push, .is-lose) {
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.28),
    0 0 0 3px var(--own),
    0 0 calc(var(--size) * 0.3) calc(var(--size) * 0.12) rgba(var(--own-rgb), 0.85),
    0 0 calc(var(--size) * 0.75) calc(var(--size) * 0.26) rgba(var(--own-rgb), 0.45),
    0 2px 0 rgba(0, 0, 0, 0.45);
}

.layout .chip--own:not(.is-win, .is-push, .is-lose) > .chip__heel {
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.28), 0 0 0 3px var(--own), 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* picking: a bigger target, and a turning dashed ring on each chip picked */
.table[data-step='picking'] .layout .chip::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.layout .chip.is-picked::after {
  content: '';
  position: absolute;
  inset: calc(var(--size) * -0.22);
  border: 2px dashed #fff;
  border-radius: 50%;
  animation: turn 6s linear infinite;
  pointer-events: none;
}

@keyframes turn { to { transform: rotate(1turn); } }

.layout .chip.is-picked {
  box-shadow:
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.28),
    0 0 0 3px #fff,
    0 0 calc(var(--size) * 0.45) calc(var(--size) * 0.14) rgba(255, 255, 255, 0.75),
    0 2px 0 rgba(0, 0, 0, 0.45);
}

/* after a pick: the player's own bets carry their initial; one missed bounces; one that wasn't theirs gets an ✕ */
.layout .chip.is-mine:not(.is-win, .is-push, .is-lose) {
  box-shadow: 0 0 0 3px var(--own, #fff7e4), 0 0 16px 5px rgba(255, 247, 228, 0.5), 0 2px 0 rgba(0, 0, 0, 0.45);
}

.layout .chip.is-missed { animation: missed 1s ease-in-out infinite; }

@keyframes missed { 50% { transform: translate(-50%, -50%) scale(1.14); } }

.layout .chip.is-wrong { box-shadow: 0 0 0 3px var(--lose), 0 2px 0 rgba(0, 0, 0, 0.45); }

.chip__tag {
  position: absolute;
  top: calc(var(--size) * -0.24);
  right: calc(var(--size) * -0.24);
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--own, #fff7e4);
  box-shadow: 0 0 0 1.5px rgba(20, 16, 13, 0.6), 0 2px 4px rgba(0, 0, 0, 0.45);
  color: #1b1712;
  font: 900 10.5px/1 var(--display);
  pointer-events: none;
}

.chip.is-wrong > .chip__tag { background: var(--lose); color: #1a0b08; }

/* bets that come off: after a ding, or a loser when the player won nothing */
.layout .chip.is-leaving {
  animation: leave 0.45s ease-in 1.1s both;
  pointer-events: none;
}

@keyframes leave { to { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } }

/* the Track panel */
.track {
  display: grid;
  align-content: start;
  gap: 12px;
}

.track__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.track__body { display: grid; gap: 12px; }
.track__body:empty { display: none; }

.toss {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c0a08;
}

.toss.is-own { border-color: var(--own); }
.toss__main { display: grid; gap: 6px; min-width: 0; }
.toss__who { color: var(--ink-2); font-weight: 700; }
.toss.is-own .toss__who { color: var(--own); }
.toss__who small { margin-left: 4px; color: var(--ink-3); font-size: 12px; font-weight: 400; }

/* the player's whole spread, called at once; each bet ticks off once it's down */
.toss__bets {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toss__bets li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brass-hi);
  font: 800 26px/1.05 var(--display);
  letter-spacing: 0.02em;
}

.toss__bets li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--rail-4);
}

.toss__bets li.is-down { color: var(--ink-3); }

.toss__bets li.is-down::before {
  content: '✓';
  display: grid;
  place-items: center;
  background: var(--win);
  box-shadow: none;
  color: #0c0a08;
  font: 900 10px/1 var(--body);
}

.who__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff7e4;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  color: #1b1712;
  font: 900 15px/1 var(--display);
}

.who__dot.is-own { background: var(--own); }

.track__note {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
}

.track__note.is-miss {
  padding-left: 12px;
  border-left: 3px solid var(--lose);
  color: var(--ink);
}

.track__players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.pick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--rail-4), var(--rail-3));
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  color: var(--ink);
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pick-btn:hover:not(:disabled) { border-color: var(--line-hi); }
.pick-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.pick-btn:disabled { cursor: default; opacity: 0.55; }

.pick-btn__name {
  display: grid;
  gap: 2px;
  font-weight: 700;
}

.pick-btn__name small { color: var(--ink-3); font-size: 12px; font-weight: 400; }

.pick-btn__mark {
  margin-left: auto;
  color: var(--win);
  font: 800 14px/1 var(--body);
  font-style: normal;
}

.pick-btn__key {
  margin-left: auto;
  padding: 2px 5px;
  color: var(--ink-3);
}

.pick-btn__mark + .pick-btn__key { margin-left: 8px; }
.pick-btn__mark.is-ding {
  color: var(--lose);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.track__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px;
}

.track__sum {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.track__sum li { color: var(--ink-2); }

/* the players, in the panel above: each one's bets and pay once they're settled */
.who {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.who:first-child { border-top: 0; }

.who__name {
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
}

.who__name span { margin-left: 6px; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.who.is-now .who__name { color: var(--brass-hi); }

.who__bets {
  display: grid;
  gap: 7px;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
}

.who__bets li { display: grid; gap: 3px; font-size: 14px; font-weight: 700; }
.who__bets .tag { margin-left: 6px; }

.who__bets small {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.who__side {
  display: grid;
  justify-items: end;
  gap: 6px;
  padding-top: 6px;
  text-align: right;
}

.who__pay {
  font: 800 22px/1 var(--display);
  font-variant-numeric: tabular-nums;
}

.who__paid { color: var(--lose); font-size: 12px; }

/* ------------------------------------------------------------ tutorial */

/* The tour dims the page and rings one part of it at a time. The ring's shadow is the dim, so the
   two move together. Under them a clear layer takes stray taps; on the zoom step it has a hole cut
   where the ring is, so the table still takes double-taps and drags. The padding only carries the
   screen's safe areas, for the script to read. */
.tour {
  --tour-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  position: fixed;
  inset: 0;
  z-index: 70;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  pointer-events: none; /* only the clear layer and the card take taps, so the hole lets them through */
  animation: tour-in 0.25s ease-out;
}

@keyframes tour-in {
  from { opacity: 0; }
}

.tour__block {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  touch-action: manipulation;
}

.tour__ring {
  position: absolute;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px var(--brass-hi),
    0 0 24px 6px rgba(255, 214, 64, 0.3),
    0 0 0 200vmax rgba(9, 7, 5, 0.74);
  pointer-events: none;
  transition: left 0.4s var(--tour-ease), top 0.4s var(--tour-ease), width 0.4s var(--tour-ease), height 0.4s var(--tour-ease);
}

/* nothing to ring: just the dim */
.tour__ring.is-off { box-shadow: 0 0 0 200vmax rgba(9, 7, 5, 0.74); }

/* on the zoom step the ring ripples outward, because the table under it takes taps */
.tour.is-live .tour__ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--brass-hi);
  border-radius: inherit;
  animation: tour-ripple 1.8s ease-out infinite;
}

@keyframes tour-ripple {
  from { opacity: 0.85; transform: scale(1); }
  70%, to { opacity: 0; transform: scale(1.035); }
}

/* following a scroll or a resize, the ring and the card keep up instead of gliding */
.tour.is-still .tour__ring,
.tour.is-still .tour__card { transition: none; }

.tour__card {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 12px;
  width: min(370px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 0 16px; /* the foot's own padding is on .tour__nav */
  border: 1px solid var(--line-hi);
  border-radius: 16px;
  background: var(--rail-3);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  color: var(--ink-2);
  pointer-events: auto;
  transition: left 0.4s var(--tour-ease), top 0.4s var(--tour-ease);
}

/* how far through the tour */
.tour__bar {
  height: 3px;
  margin: 0 -16px;
  background: var(--rail-4);
}

.tour__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--brass), var(--brass-hi));
  transition: width 0.3s ease;
}

.tour__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour__count {
  color: var(--brass);
  font: 800 12.5px/1 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tour__close {
  width: 30px;
  height: 30px;
  flex: none;
  margin-right: -4px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1;
}

.tour__close:hover { color: var(--ink); border-color: var(--line-hi); }

.tour__title {
  margin: 0;
  color: var(--ink);
  font: 900 24px/1.02 var(--display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.tour__text {
  margin: 7px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
}

/* the zoom step's moves: each gets a green check once it's made */
.tour__try {
  display: grid;
  gap: 8px;
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c0a08;
}

.tour__try-head {
  margin: 0;
  color: var(--brass-hi);
  font: 700 10.5px/1.2 var(--body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tour__try.is-done .tour__try-head { color: var(--win); }

.tour__try-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour__try-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 700;
}

.tour__try-list li::before {
  content: '';
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--rail-4);
  color: #0c0a08;
  font: 900 11px/1 var(--body);
}

.tour__try-list li.is-done { color: var(--ink); }

.tour__try-list li.is-done::before {
  content: '✓';
  background: var(--win);
  box-shadow: none;
}

.tour__nav {
  position: sticky; /* stays at the card's foot when a short screen makes the card scroll */
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 14px;
  background: var(--rail-3);
  box-shadow: 0 -10px 10px var(--rail-3);
}

.tour__nav .btn {
  height: 42px;
  padding: 0 16px;
}

.tour__back {
  color: var(--ink-2);
  font-size: 14px;
}

.tour__next {
  min-width: 112px;
  font-size: 17px;
}

/* ---------------------------------------------------------- responsive */

/* Too narrow for a third tool: replay sits quietly beside the brand name. */
@media (max-width: 679px) {
  #tourBtn { display: none; }
  .brand__tour { display: grid; }
}

@media (min-width: 1001px) {
  /* Leave more of the viewport for the table without changing the playing field. */
  .app { gap: 8px; padding-top: 8px; }
  .stat { gap: 3px; padding-block: 6px; }

  /* the station runs the full height of the table, so both columns end together */
  .station { align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; }

  /* Track Mode: what to do next sits at the top, level with the table, and the players fill the rest */
  .station.is-track { grid-template-rows: auto minmax(0, 1fr); }
}

.station.is-track > .track,
.station.is-track > .register,
.station.is-track > .verdict { order: -1; }

@media (min-width: 561px) {
  /* Track Mode has no hint, so Pay takes the whole row */
  .station.is-track #payBtn { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  .game { grid-template-columns: minmax(0, 1fr); }
  .table { width: 100%; max-width: 700px; justify-self: center; }

  .station {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 720px) {
  .station { grid-template-columns: minmax(0, 1fr); }

  /* the table comes first on small screens; stats move below it */
  .railbar {
    order: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .railbar:has(.stat--difficulty:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat--difficulty { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; }
  .stat--difficulty .stat__label { grid-column: 1; }
  #difficultyName { grid-column: 1; }
  #difficultyProgress { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 22ch; text-align: right; }
  #betSizeSub { grid-column: 1 / -1; }

  .foot { order: 2; }

  .stat--test {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .stat--test .btn,
  .stat--test .stat__btns {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .stat__btns { justify-content: flex-end; }
}

/* phones: the nav bar stacks, and the pay register pins to the bottom of the screen like a calculator */
@media (max-width: 560px) {
  html { scroll-padding-bottom: calc(var(--dock-h, 250px) + 8px); }
  body { padding-block: 0 calc(var(--dock-h, 270px) + 16px); }

  .navbar { padding-block: 8px; }
  .navbar__inner { position: relative; gap: 6px; }
  .brand { width: 100%; height: 26px; gap: 8px; }
  .brand__dice { gap: 3px; }
  .brand__dice .die { --s: 17px; }
  .brand__dice .die:last-child { transform: rotate(16deg) translateY(2px); }
  .brand__name { font-size: 20px; }

  /* A slim title, then Mode and tools, then compact options if the mode has them. */
  .navbar__nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'picker tools' 'options options';
    gap: 0 8px;
  }

  .nav-controls { display: contents; }
  .seg--modes { display: none; }

  .picker {
    grid-area: picker;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 46px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--rail-2);
    color: var(--ink);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }

  .navbar .seg--practice,
  .nav-track,
  .nav-flash {
    grid-area: options;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    padding: 6px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
  }

  .navbar .seg--difficulty { justify-content: space-between; gap: 1px; }
  .navbar .seg__label { padding-right: 4px; font-size: 9px; }
  .navbar .lvl { padding-inline: 2px; }

  /* Colors uses the spare title-row space, preserving the full difficulty row.
     Center its 32px tap target on the 26px title without adding another row. */
  .nav-track .seg--colors { position: absolute; top: -3px; right: 0; }
  .navbar .seg--track { width: 100%; padding: 0; border: 0; }

  .nav-flash { gap: 6px 8px; justify-content: space-between; }
  .navbar .seg--deck { padding: 0; border: 0; }
  .navbar .switch { padding-inline: 2px; gap: 5px; }
  .switch__detail { display: none; }
  .navbar__nav .tools { grid-area: tools; justify-self: end; margin-left: 0; }

  .countdown { font-size: 26px; }

  .tool {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 56px;
    height: 46px;
    padding: 0 8px;
    border-radius: 14px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
  }

  .tour__title { font-size: 21px; }
  .tour__text { font-size: 14px; }

  .blurb { font-size: 13.5px; }

  .stat { padding: 9px 10px; gap: 4px; }
  .stat__label { font-size: 9.5px; letter-spacing: 0.08em; }
  .stat__value { gap: 5px; font-size: 21px; }
  .stat:not(.stat--test):not(.stat--difficulty) .stat__sub { display: none; }

  .table {
    padding: 10px;
    border-width: 7px;
    border-radius: 20px;
  }

  .tray { gap: 10px; margin-top: 10px; }
  .tray .die { --s: 42px; }
  .tray .dice { gap: 9px; }
  .call span { font-size: 18px; }

  .panel { padding: 14px; }

  .register,
  .verdict,
  .flash,
  .track {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    max-height: 72vh;
    overflow-y: auto;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.55);
  }

  .register {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'head head head'
      'hint display pay'
      'keys keys keys';
    gap: 8px;
  }

  .register__head { grid-area: head; align-items: center; }
  .prompt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .prompt > span { font-size: 16px; }
  .prompt small { font-size: 12px; }
  .register__actions { display: contents; }
  #hintBtn { grid-area: hint; height: auto; padding: 0 12px; font-size: 13px; }
  .station.is-track .register { grid-template-areas: 'head head head' 'display display pay' 'keys keys keys'; }
  #payBtn { grid-area: pay; height: auto; padding: 0 20px; font-size: 20px; }
  .display { grid-area: display; min-height: 54px; padding: 8px 12px; font-size: 38px; }
  .display__cur { font-size: 22px; }

  .keypad {
    grid-area: keys;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .key { height: 44px; font-size: 24px; }
  .key--fn { font-size: 11.5px; letter-spacing: 0.04em; }
  .key[data-key='back'] { grid-column: 4; grid-row: 1; font-size: 20px; }
  .key[data-key='clear'] { grid-column: 4; grid-row: 2; }
  .key[data-key='0'] { grid-column: 4; grid-row: 3; }

  /* Collect sits beside the keys, keeping the pinned panel the same height. */
  .register.is-collect {
    grid-template-areas:
      'head head head'
      'hint display pay'
      'keys keys collect';
  }
  .station.is-track .register.is-collect { grid-template-areas: 'head head head' 'display display pay' 'keys keys collect'; }
  #collectBtn { grid-area: collect; height: auto; min-width: 70px; padding: 0 8px; font-size: 11px; letter-spacing: 0.03em; }

  .verdict {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .verdict__head,
  .verdict__tip { grid-column: 1 / -1; }
  .verdict__head { font-size: 24px; }
  .verdict__mark { width: 28px; height: 28px; font-size: 15px; }
  .verdict__tip { font-size: 13.5px; }
  .verdict__total { padding: 10px 14px; }
  .verdict__total > span { font-size: 13px; }
  .verdict__total strong { font-size: 34px; }
  #nextBtn { height: auto; padding: 0 16px; font-size: 18px; }

  /* toasts drop in at the top, clear of the pinned keypad */
  .toast {
    top: calc(12px + env(safe-area-inset-top, 0px));
    bottom: auto;
    transform: translate(-50%, -16px);
  }

  .flash { gap: 10px; }
  .flash__choices { gap: 8px; }
  .answer { min-height: 54px; font-size: 26px; }
  .flash__verdict { font-size: 22px; }
  .flash__why { font-size: 13.5px; }
  .flash__intro { font-size: 13px; }
  .flash__lesson { font-size: 14px; }
  .flash__math { font-size: 12.5px; }

  /* the pay chart fits a phone without scrolling sideways: tighter cells, headings that wrap */
  #chartDialog .sheet__head { padding: 14px 16px; }
  #chartBody { gap: 24px; padding: 20px 12px 24px; }
  #chartBody .tbl { font-size: 13px; }
  #chartBody .tbl th,
  #chartBody .tbl td { padding: 9px 5px; }
  #chartBody .tbl .tbl__wins { display: none; }

  #chartBody .tbl__on {
    display: block;
    margin-top: 2px;
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 400;
  }

  #chartBody .tbl--grid { font-size: 12.5px; }
  #chartBody .tbl--grid th,
  #chartBody .tbl--grid td { padding: 8px 3px; }
  #chartBody .tbl--grid thead th { font-size: 10.5px; }
  #chartBody .tbl--grid thead th small { font-size: 10px; }

  #chartBody .splits { grid-template-columns: minmax(0, 1fr); }
  #chartBody .formula div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 12px; }
  #chartBody .formula dd { grid-template-columns: minmax(0, 1fr); }
  #chartBody .formula b { grid-row: auto; }
  #chartBody .formula small { grid-column: auto; }

  .track,
  .track__body { gap: 10px; }
  .toss { gap: 10px; padding: 8px 10px; }
  .toss__bets li { font-size: 21px; }
  .who__dot { width: 26px; height: 26px; font-size: 13px; }
  .who { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; }
  .who__name { line-height: 26px; }
  .track__note { font-size: 13px; }
  .track__players { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
  .pick-btn { min-height: 46px; gap: 8px; padding: 6px 10px; }
  .pick-btn__key { display: none; }
  .track .btn { height: 46px; }
}


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

  .tour.is-live .tour__ring::after { display: none; }

  /* no breathing: the extra halo holds at half strength */
  .layout .chip:not(.is-win, .is-push, .is-lose, .is-none, .is-picked, .is-mine, .is-wrong, .is-leaving)::after {
    animation: none;
    opacity: 0.5;
  }
}

/* ------------------------------------------------------- CenterAction */
/* CenterAction is this trainer under Color Up's brand (editions/centeraction.js adds these styles).
   Color Up's logo mark stands in for the dice, its wordmark sits under the name, and the loading
   screen signs off with both. The wordmark is Color Up's: a dark brass edge under the letters, like
   the edge of a chip, and "Up" in brass. */

/* sized to nothing rather than display: none, so the mark's gradients still paint where it's used */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.brand__mark { flex: none; width: 37px; height: 24px; }

/* under the name, inside the 32px the dice took, so the header keeps its height */
.brand__maker {
  margin: 1px 0 0;
  font: 900 10px/1 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f2eee6;
  text-shadow: 0 0.035em 0 #6e5a2f, 0 0.07em 0 #2a2317;
}

.brand__maker span {
  background: linear-gradient(180deg, #f3dfb0 0%, #e3c88a 45%, #c9a55c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

/* the loading screen: CENTERACTION, its letters as tall as the default title's, then Color Up's mark and name */
.loader__lockup { display: grid; justify-items: center; gap: 12px; }
.loader__brand { width: min(260px, 100%); }
.loader__maker { margin: 0; display: flex; align-items: center; gap: 9px; }
.loader__mark { flex: none; width: 37px; height: 24px; }

.loader__colorup {
  display: block;
  width: 70px;
  height: 15px;
  fill: #f2eee6;
  filter: drop-shadow(0 0.6px 0 #6e5a2f) drop-shadow(0 0.6px 0 #2a2317);
}

@media (max-height: 430px) {
  .loader__lockup { gap: 8px; }
  .loader__brand { width: min(206px, 100%); }
  .loader__mark { width: 31px; height: 20px; }
  .loader__colorup { width: 56px; height: 12px; }
}

/* phones: the title row is one slim line, so the mark shrinks and the wordmark waits for wider screens */
@media (max-width: 560px) {
  .brand__mark { width: 31px; height: 20px; }
  .brand__maker { display: none; }
}