/*
 * Zones' own surfaces: the board with its band targets, the odds rail, the
 * first-run art and the provably-fair panel. The page layout is
 * /core/layout.css; the shared pieces are /core/kit.css. The bands, their
 * labels, the live band and the winner's frame are canvas (/core/chart.js).
 *
 * COSMIC ORANGE: the art direction redefines the TOKENS, so every shared
 * piece changes colour without moving. Black / white / orange (hue 25).
 */
:root {
  --attention: hsla(25, 100%, 50%, 1); /* #ff6a00, THE orange */
  --attention-foreground: #000;
  --attention-hover: hsla(25, 100%, 58%, 1);
  --ab-pro-hi: hsla(25, 100%, 66%, 1);
  --ab-pro-lo: hsla(25, 100%, 38%, 1);
  --ab-page: hsla(25, 20%, 3%, 1);
  --ab-surface: hsla(25, 18%, 5%, 1);
  --ab-raised: hsla(25, 14%, 8%, 1); /* idle chips: dark so white type pops */
  --ab-core: hsla(25, 100%, 42%, 1);

  --background: var(--ab-page);
  --foreground: #fff;
  --heading: #fff;

  --card: var(--ab-surface);
  --popover: var(--ab-surface);
  --popover-foreground: #fff;

  --primary: var(--ab-core);
  --primary-foreground: #fff;
  --primary-hover: hsla(0, 0%, 70%, 1);

  --secondary: var(--ab-raised);
  --secondary-foreground: #fff;
  --secondary-hover: hsla(25, 20%, 12%, 1);

  --muted-foreground: hsla(0, 0%, 55%, 1);
  --accent: hsla(25, 20%, 12%, 1);

  --border: hsla(0, 0%, 100%, 0.08);
  --ring: var(--attention);
  --icon: hsla(0, 0%, 45%, 1);

  /* the brand word, the menu's icons, numbers and switches */
  --accent-color: var(--attention);
}

/* ---- the board: plot and odds, two surfaces side by side ---- */

/* the rail's ✕ badge reaches past the board's right edge */
.shell-board {
  overflow: visible;
}
.board-row {
  position: absolute;
  inset: 0 0 14px 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  --rail-w: 104px;
}
.board {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--card);
  border-radius: 0.8rem;
  overflow: hidden;
}
.plot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* the whole band is a bet target, over the canvas */
.zone-hits {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.zone-hit {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  cursor: default;
  transition: background 0.15s;
  touch-action: manipulation;
}
.zone-hit.is-open {
  cursor: pointer;
}
.zone-hit.is-open:hover {
  background: rgba(255, 255, 255, 0.06);
}
.zone-hit.is-open:active {
  background: rgba(255, 255, 255, 0.1);
}

.rail {
  position: relative;
  flex: 0 0 auto;
  width: var(--rail-w);
  /* the odds buttons measure the rail's height (cqh), so all seven rows fit
     whatever height the board resolves to */
  container-type: size;
}
.rail-row {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}
.rr-odds {
  position: relative;
  width: 100%;
  /* one height whether or not a stake is on it */
  height: min(58px, calc(100cqh / 7 - 5px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--secondary);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: default;
  transition: all 0.15s;
  touch-action: manipulation;
  overflow: hidden;
}
.rr-x,
.rr-amt,
.rr-stake {
  /* The line box has to hold the figure and no more: 1.15 wanted ~15px for a
     13px figure where the row had 10, and the glyphs were cut across the
     middle. A flat 1 then cut them too -- digits need a little over their
     own point size -- so this is the smallest box they fit in, and the row's
     height decides the size through the clamps below. */
  line-height: 1.35;
  display: block;
  overflow: visible;
}
.rr-x {
  display: block;
  font-size: clamp(9px, calc((100cqh / 7 - 5px) * 0.37), 17px);
  transform: translateY(0);
  transform-origin: center bottom;
  transition:
    transform 400ms ease-out,
    font-size 400ms ease-out,
    opacity 400ms ease-out;
}
/* staked: the × shrinks and lifts so the amount can take the headline */
.rr-odds.has-stake .rr-x {
  font-size: clamp(7px, calc((100cqh / 7 - 5px) * 0.22), 11px);
  transform: translateY(-3px);
  opacity: 0.5;
  font-weight: 700;
}
.rr-odds.win.has-stake .rr-x {
  opacity: 0.42;
}
.rr-amt {
  display: block;
  font-size: clamp(7px, calc((100cqh / 7 - 5px) * 0.24), 11px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A row too short for two lines: the odds are what the player bets on, the
   "BET" cue only names what a press does. Squeezed into a 3px slot the cue
   was an unreadable smear under every row (measured after the short-frame
   work made the rail shorter), so below the height where it can be read it
   goes, and the odds keep the row to themselves. */
@container (max-height: 300px) {
  .rr-amt {
    display: none;
  }
  /* With the cue gone the row is the odds and, once a bet is on it, the
     player's stake. The stake's floor is 11px, which a very short row cannot
     give it, and the figure came out as "1" instead of "1.00" -- money read
     wrong (24 findings in the verification run). Both now scale all the way
     down with the row they share. */
  .rr-stake {
    font-size: clamp(calc(8px * var(--fit, 1)), calc((100cqh / 7 - 4px) * 0.46 * var(--fit, 1)), calc(15px * var(--fit, 1)));
  }
  .rr-x {
    font-size: clamp(8px, calc((100cqh / 7 - 4px) * 0.42), 15px);
  }
}

/* The letterbox band gives the rail 90px for seven rows -- 8px each, which no
   type fits and no amount of shrinking saves: at that size the odds and the
   player's own stake are both unreadable smears. The rows keep a height they
   can be read at and the rail scrolls instead, so every zone is still
   reachable and every figure on it is legible. */
@container (max-height: 130px) {
  .rail {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar {
    display: none;
  }
  .rr-odds {
    height: 22px;
    min-height: 22px;
  }
  .rr-odds.has-stake .rr-x {
    display: none;
  }
  .rr-stake,
  .rr-x {
    font-size: 11px;
  }
}

/* Shorter still: the rail measured 149px for seven rows, about 21px each, and
   two lines in 21px leaves the odds at 7px and the stake at 3 -- both cut
   across the middle, the stake being the player's own money. One line then:
   with a bet on the row the stake replaces the odds, because what the player
   needs to see is what they staked. The odds are on the other six rows and
   in the rules. */
@container (max-height: 200px) {
  .rr-odds.has-stake .rr-x {
    display: none;
  }
  .rr-stake {
    font-size: clamp(calc(9px * var(--fit, 1)), calc((100cqh / 7 - 3px) * 0.62 * var(--fit, 1)), calc(15px * var(--fit, 1)));
  }
}
.rr-stake {
  display: block;
  /* --fit scales the size by the amount's length (mono: length is width) */
  font-size: clamp(calc(11px * var(--fit, 1)), calc((100cqh / 7 - 5px) * 0.4 * var(--fit, 1)), calc(17px * var(--fit, 1)));
  font-weight: 800;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: bet-stake-in 400ms ease-out both;
}
.rr-odds.is-open {
  cursor: pointer;
}
.rr-odds.is-open:hover:not(.on):not(.win):not(.lost) {
  background: rgba(255, 255, 255, 0.08);
  filter: brightness(1.15);
}
.rr-odds.on.is-open:hover {
  background: rgba(255, 255, 255, 0.08);
}
.rr-odds.is-open:active {
  transform: scale(0.95);
}
.rr-odds.is-dim {
  opacity: 0.7;
}
.rr-odds.is-inert {
  pointer-events: none;
}
/* the price is INSIDE this band right now */
.rr-odds.cur {
  opacity: 1;
  background: color-mix(in srgb, var(--attention) 28%, transparent);
}
/* staked: stroke only, the outline marks money on the table */
.rr-odds.on {
  opacity: 1;
  background: transparent;
  border-color: var(--attention);
}
.rr-odds.on.cur {
  background: transparent;
}
/* your winning stake: PRO metal, black type */
.rr-odds.win {
  background: linear-gradient(to bottom, var(--ab-pro-hi), var(--attention) 48%, var(--ab-pro-lo));
  background-origin: border-box;
  color: #000;
  opacity: 1;
  border: none;
}
/* the round's winner with nothing of yours on it: a deep tint */
.rr-odds.win-house {
  background: color-mix(in srgb, var(--attention) 44%, transparent);
  opacity: 1;
}
.rr-odds.lost {
  background: color-mix(in srgb, var(--destructive) 12%, transparent);
  color: #f59be4;
  opacity: 1;
}
/* the ✕ that takes a staked bet back: a corner badge on the button */
.rr-clear {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 1;
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  color: hsla(0, 0%, 70%, 1);
  background: hsla(25, 20%, 10%, 1);
  cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--attention) 20%, transparent);
}
.rr-clear:hover {
  color: #fff;
  background: hsla(25, 40%, 18%, 1);
}
@media (prefers-reduced-motion: reduce) {
  .rr-x {
    transition: none;
  }
  .rr-stake {
    animation: none;
  }
}

@media (max-width: 640px) {
  .board-row {
    --rail-w: 82px;
    bottom: 10px;
  }
  .rr-odds {
    font-size: 14px;
    padding: 0 4px;
  }
}

/* ---- the first-run card wears the orange: ring, wash and Play ---- */
.ftue__card {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--attention) 40%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.55);
}
.ftue__card::before {
  background-image: linear-gradient(to bottom, color-mix(in oklab, var(--attention) 18%, transparent), transparent);
}
.ftue__cta {
  background: var(--attention);
  color: var(--attention-foreground);
}
.ftue__cta:hover {
  background: var(--attention-hover);
}

/* ---- the first-run art: miniatures of the board ---- */
.art {
  margin-bottom: 10px;
  display: flex;
  height: 96px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #141416;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}
.art__bands {
  display: flex;
  height: 78%;
  width: 88%;
  flex-direction: column;
  gap: 1px;
}
.art__band {
  position: relative;
  flex: 1 1 0%;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.06);
}
.art__band.is-on {
  background: #3d2814;
}
.art__band > span {
  position: absolute;
  top: 2px;
  right: 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  color: rgb(255 255 255 / 0.35);
}
.art__band.is-on > span {
  color: rgb(255 255 255 / 0.8);
}
.art__chips {
  display: flex;
  width: 90%;
  flex-direction: column;
  gap: 4px;
}
.art__chip,
.art__win {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  line-height: 1.25;
}
.art__chip {
  height: 40px;
  border-radius: var(--radius-lg);
  background: var(--secondary);
  color: #fff;
}
.art__chip > span:first-child {
  font-size: 9px;
  opacity: 0.7;
}
.art__chip > span:last-child {
  font-size: 11px;
}
.art__win {
  height: 48px;
  width: 70%;
  border-radius: var(--radius-xl);
  background: #ff8c00;
  color: #000;
}
.art__win > span:first-child {
  font-size: 9px;
  font-weight: 700;
  opacity: 0.7;
}
.art__win > span:last-child {
  font-size: 14px;
}

/* ---- the provably-fair panel ---- */
.fair {
  padding-bottom: 4px;
}
.fair__how {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.625;
  color: #d7dae3;
}
.fair__verdict {
  margin-bottom: 12px;
  border: 1px solid;
  border-radius: var(--radius-xl);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.625;
}
.fair__verdict.is-center {
  text-align: center;
  font-size: 12px;
}
.fair__verdict.is-ok {
  border-color: color-mix(in oklab, var(--success) 35%, transparent);
  background: color-mix(in oklab, var(--success) 12%, transparent);
  color: var(--success);
}
.fair__verdict.is-bad {
  border-color: color-mix(in oklab, var(--destructive) 35%, transparent);
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  color: var(--destructive);
}
.fair-field {
  margin-bottom: 10px;
}
.fair-field__label {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--icon);
}
.fair-field code {
  display: block;
  user-select: all;
  -webkit-user-select: all;
  word-break: break-all;
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--heading);
}
.fair-field code.is-ok {
  color: var(--success);
}
.fair-field code.is-bad {
  color: var(--destructive);
}
.fair__recipe {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.fair__recipe summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--primary-hover);
}
.fair__recipe p {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--icon);
}
.fair__scope {
  font-size: 11px;
  line-height: 1.5;
  color: var(--icon);
}
.fair__wait {
  font-size: 13px;
  line-height: 1.625;
  color: var(--icon);
}