/* Squeekchain's own look, as in the approved prototype: a calm grey page and rounded panels. The LED board is the
   hero; right under it one dashboard row: your bulb, the one number that matters, the one button. Everything else
   waits below. Light and dark follow the device, or data-theme on <html>. */
:root {
  --bg: #f5f5f7; --panel: #ffffff; --line: #e0e0e6; --ink: #17171b; --dim: #6e6e7a; --faint: #b6b6c2;
  --gold: #b07a0c; --gold-dot: #e3a21a; --blue: #4460cf; --win: #1b7849; --lose: #c33346;
  --btn: #17171b; --btn-ink: #f7f7f9; --chip: #ededf0; --note: #fff7e2; --note-line: #f1dca5;
  --board: #08080c; --board-edge: #26262f; /* the LED panels stay dark in both themes */
  --texture: rgba(23, 23, 27, .05); --glow: rgba(227, 162, 26, .10);   /* the page around the panels: faint LED dots, warm light under the title */
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --num: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e0e12; --panel: #16161b; --line: #2a2a33; --ink: #f2f2f4; --dim: #9a9aa6; --faint: #5c5c68;
  --gold: #efbe45; --gold-dot: #efbe45; --blue: #8fa3f5; --win: #35d07f; --lose: #ef6b7d;
  --btn: #f2f2f4; --btn-ink: #17171b; --chip: #24242c; --note: #251f10; --note-line: #4a3c17;
  --board: #050508; --board-edge: #23232c; --texture: rgba(255, 255, 255, .045); --glow: rgba(239, 190, 69, .09); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0e0e12; --panel: #16161b; --line: #2a2a33; --ink: #f2f2f4; --dim: #9a9aa6; --faint: #5c5c68;
  --gold: #efbe45; --gold-dot: #efbe45; --blue: #8fa3f5; --win: #35d07f; --lose: #ef6b7d;
  --btn: #f2f2f4; --btn-ink: #17171b; --chip: #24242c; --note: #251f10; --note-line: #4a3c17;
  --board: #050508; --board-edge: #23232c; --texture: rgba(255, 255, 255, .045); --glow: rgba(239, 190, 69, .09); color-scheme: dark; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background-color: var(--bg); color: var(--ink);
  background-image: radial-gradient(ellipse 70% 420px at 50% 0, var(--glow), transparent 75%), radial-gradient(circle, var(--texture) 1px, transparent 1.6px);
  background-size: 100% 100%, 14px 14px; background-repeat: no-repeat, repeat; font-family: var(--mono); font-size: 14px; line-height: 1.55;
  padding-block: 20px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); overflow-x: hidden; }
a { color: var(--blue); }
.wrap { max-width: 1040px; margin: 0 auto; display: grid; gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: clamp(14px, 3vw, 28px); display: grid; gap: 14px; min-width: 0; }
.eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0; }
/* the game panel's top line: where the numbers come from, and the switch between the real game and free practice */
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.coin a { display: inline-flex; align-items: center; gap: .45em; padding: 7px 11px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); text-decoration: none; white-space: nowrap; }
.coin a[aria-current="page"] { background: var(--chip); color: var(--ink); }
.coin a:hover { color: var(--ink); }
.coin .free { text-transform: none; letter-spacing: .02em; }
.eyebrow .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); margin-right: 6px; vertical-align: 1px; }
.eyebrow .dot[data-on="true"] { background: var(--win); }
h1 { font-family: var(--num); font-weight: 600; font-size: clamp(34px, 6vw, 56px); line-height: .95; letter-spacing: .02em; text-transform: uppercase; margin: 4px 0 0; text-wrap: balance; }
h2 { font-family: var(--num); font-weight: 500; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; margin: 0; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; }
.head > div:first-child { min-width: 0; }
.lede { margin: 6px 0 0; font-size: 16px; }
.board-wrap { border-radius: 12px; overflow: hidden; background: var(--board); border: 1px solid var(--board-edge); line-height: 0; }
canvas { display: block; width: 100%; }
#board { cursor: pointer; }
/* the LED panels keep their space before the page's code has run (no empty boxes, no jump) */
.cam canvas, .board-wrap canvas, .sign canvas { margin: 0 auto; max-width: 100%; }
/* a panel's box may shrink below its canvas's current pixel size, so a narrower window re-sizes the dots (no sideways scroll) */
.sign, .cam, .board-wrap { min-width: 0; }
.sign { overflow: hidden; }
#cam { aspect-ratio: 72 / 42; }
#board { aspect-ratio: 88 / 56; }   /* a page of 6 bulbs; 8 on wider boards (board.js sets the exact ratio) */
#sign { aspect-ratio: 134 / 10; }
@media (min-width: 848px) { #board { aspect-ratio: 116 / 56; } }
@media (min-width: 520px) and (max-width: 760px) { #sign { aspect-ratio: 69 / 19; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the top of the page, as on the share card: the LED title, the hamster cam, one line */
.hero { display: grid; gap: 14px; justify-items: center; min-width: 0; padding-block: 2px 6px; }
.main, .side { display: contents; }   /* only containers below 1340 px: the page keeps one column in reading order */
/* one column: tonight's bets and his last nights come before the long how-it-works panel */
.wrap > .main > .how { order: 1; } .wrap > .foot { order: 2; }
/* touch screens: buttons at least 44 px tall, and inputs at 16 px so phones don't zoom in when they are tapped */
@media (pointer: coarse) {
  .seg button, .seg a, .share, .primary, .ghost { min-height: 44px; }
  .share { display: inline-flex; align-items: center; }
  select, input { font-size: 16px; }
}
.stage { display: grid; gap: 14px; justify-items: center; min-width: 0; width: 100%; }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; }
.hero-top .ghost { padding: 9px 12px; }
.hero-top button { white-space: nowrap; }
.sound { display: inline-flex; align-items: center; gap: 8px; }
.sound svg { flex: none; }
.sound .on { display: none; } .sound[aria-pressed="true"] .on { display: inline; } .sound[aria-pressed="true"] .off { display: none; }
#modeReplay .narrow { display: none; }
.hero-top .seg button { padding: 10px 11px; }
.sign { width: 100%; line-height: 0; }
.cam { position: relative; width: min(100%, 640px); border-radius: 14px; overflow: hidden; background: var(--board); border: 1px solid var(--board-edge); line-height: 0; }
/* like a camera feed: LIVE with a red dot that breathes, or REPLAY */
.cam-tag { position: absolute; top: 8px; left: 10px; font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: #f2f2f4; background: rgba(5, 5, 8, .55); border-radius: 4px; padding: 4px 6px 4px 16px; pointer-events: none; }
.cam-tag::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #ef4a5f; }
.cam-tag[data-mode="live"]::before { animation: breathe 1.6s ease-in-out infinite; }
.cam-tag[data-mode="replay"]::before { background: transparent; width: 0; height: 0; border-radius: 0; margin-top: -4px;
  border-left: 6px solid #f2f2f4; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
@keyframes breathe { 50% { opacity: .25; } }
.tick { animation: tick .42s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes tick { from { transform: translateY(5px); opacity: .35; } to { transform: none; opacity: 1; } }
.cell b { display: inline-block; }
.stage .lede { margin: 0; font-size: clamp(11px, 2.4vw, 15px); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-align: center; text-wrap: balance; }
.caption { margin: -6px 0 0; color: var(--dim); font-size: 12px; }
/* the countdown under the board: the round's time as a thin bar, and what its end decides */
.meter { display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: 12px; align-items: center; margin: -4px 0 0; }
.meter-track { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.meter-track i { display: block; height: 100%; background: var(--gold); transform-origin: left center; transform: scaleX(0); transition: transform 1s linear; }
.meter[data-tone="wait"] .meter-track i { background: var(--dim); }
.meter[data-tone="danger"] .meter-track i { background: var(--lose); }
#meterText { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.meter[data-tone="danger"] #meterText { color: var(--lose); }
.banner { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--note); border: 1px solid var(--note-line); font-size: 13px; }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) fit-content(440px); gap: 16px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.cell { display: grid; gap: 2px; min-width: 0; }
.cell b { font-family: var(--num); font-weight: 500; font-size: clamp(26px, 4.4vw, 38px); line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cell small { color: var(--dim); font-size: 12px; }
.label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.cta { display: flex; gap: 10px; align-items: center; justify-content: end; flex-wrap: wrap; }
.cta .odds-line { flex-basis: 100%; text-align: right; color: var(--dim); font-size: 12px; margin: -4px 0 0; }
.cta .soon { margin: 0; font-family: var(--num); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.win { color: var(--win); } .lose { color: var(--lose); }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
button, select, input { font: 500 12px/1 var(--mono); letter-spacing: .1em; border-radius: 8px; }
button, select { text-transform: uppercase; cursor: pointer; }
.primary { background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn); padding: 16px 30px; font-size: 14px; min-width: 150px; }
.primary:disabled { opacity: .35; cursor: default; }
.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 12px 14px; justify-self: start; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; max-width: 100%; }
.seg button { border: 0; border-radius: 0; background: transparent; color: var(--dim); padding: 12px 11px; }
.seg button[aria-pressed="true"] { background: var(--chip); color: var(--ink); }
.seg input { width: 74px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); padding: 0 8px; letter-spacing: .02em; }
.seg input::placeholder { color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
select { background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: 11px 10px; max-width: 100%; text-transform: none; letter-spacing: .02em; }
button:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.hint { margin: 0; font-size: 15px; min-height: 1.55em; }
.wallet-line { margin: -6px 0 0; color: var(--dim); font-size: 12px; overflow-wrap: anywhere; }
.pick { display: flex; gap: 8px; flex-wrap: wrap; }
.pick-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }   /* a small label over the bulb picker and over the amounts */
#bPick { color: var(--ink); font-weight: 600; min-width: 42px; cursor: default; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps li { display: grid; gap: 4px; align-content: start; counter-increment: s; }
.steps li::before { content: counter(s); font-family: var(--num); font-weight: 600; font-size: 30px; line-height: 1; color: var(--gold); }
.steps b { font-family: var(--num); font-weight: 600; font-size: 20px; letter-spacing: .03em; text-transform: uppercase; }
.faq { display: grid; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 12px 0; font-weight: 500; }
details p { margin: 0 0 12px; color: var(--dim); max-width: 70ch; }
.riders { display: grid; }
.rider { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rider:last-child { border-bottom: 0; }
.rider i { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); }
.rider[data-st="riding"] i { background: var(--blue); }
.rider[data-st="lit"] i, .rider[data-st="won"] i { background: var(--win); }
.rider[data-st="short"] i, .rider[data-st="pot"] i { background: var(--gold-dot); }
.rider[data-st="caught"] i { background: var(--lose); }
.rider .who { min-width: 0; overflow-wrap: anywhere; }
.rider .who b { font-weight: 600; }
.rider .who small { display: block; color: var(--dim); font-size: 12px; }
.rider .amt { font-family: var(--num); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.empty { margin: 0; color: var(--dim); }
.odds { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); align-items: end; gap: 3px; height: 100px; margin-top: 4px; }
.odds div { background-image: radial-gradient(circle at center, var(--gold-dot) 2px, transparent 2.6px); background-size: 6px 6px; background-position: center bottom; min-height: 6px; }
.odds-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin: -10px 0 0; }
.odds-note { margin: -4px 0 0; color: var(--dim); font-size: 12px; }
/* his last nights: when, a strip of 24 LED dots (the lit ones gold), how far; a tap replays the night */
.nights { display: grid; }
.night { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when n" "strip strip"; gap: 6px 10px; align-items: center;
  width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 0; color: var(--ink); cursor: pointer; font: inherit; }
.night:last-child { border-bottom: 0; }
.night .when { grid-area: when; font-size: 13px; }
.night .n { grid-area: n; font-family: var(--num); font-size: 20px; font-variant-numeric: tabular-nums; }
.night .strip { grid-area: strip; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.night .strip i { aspect-ratio: 1; border-radius: 50%; background: var(--chip); }
.night .strip i.on { background: var(--gold-dot); box-shadow: 0 0 6px color-mix(in srgb, var(--gold-dot) 55%, transparent); }
.night:hover .when, .night:focus-visible .when { color: var(--blue); }
/* share your bet or your win on X */
.share { justify-self: start; font-size: 13px; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; color: var(--ink); }
.share:hover { border-color: var(--faint); }
.result-panel { gap: 10px; }
.result { font-family: var(--num); font-weight: 500; font-size: clamp(32px, 6vw, 48px); line-height: 1.05; margin: 0; }
.result-panel p { margin: 0; }
.foot { color: var(--dim); font-size: 12px; display: grid; gap: 4px; padding: 0 4px; }
.foot p { margin: 0; overflow-wrap: anywhere; }
/* wide screens (1340 px and up): the page grows to 1720 px and splits under the title. Left: the board and the bet
   panel, then your bets and how it works; right: the hamster cam and tonight's bets. The hamster, the board and the
   button are on the first screen together. (From 1340 px the left column stays over 900 px, so the dashboard keeps
   its one-row layout.) */
@media (min-width: 1340px) {
  /* rows: switch + sound, LED title, cam | game, tonight's bets | game (the game spans both; extra height goes to
     the flexible row, so tonight's bets sit right under the cam), footer. The cam stays in the header in the code,
     so a screen reader still meets it right after the title. */
  .wrap { max-width: 1720px; grid-template-columns: minmax(0, 1fr) clamp(360px, 28vw, 540px); grid-template-rows: auto auto auto 1fr auto; column-gap: 24px; align-items: start; }
  .hero { display: contents; }
  .hero-top, .sign, .foot { grid-column: 1 / -1; }
  .hero-top { grid-row: 1; } .sign { grid-row: 2; justify-self: center; }
  .sign { max-width: 1400px; }   /* the LED title stays a title, not a wall */
  .main, .side { display: grid; gap: 16px; min-width: 0; align-content: start; }
  .main { grid-column: 1; grid-row: 3 / span 2; }
  .stage { grid-column: 2; grid-row: 3; gap: 12px; }
  .side { grid-column: 2; grid-row: 4; }
  .foot { grid-row: 5; }
  .cam { width: 100%; }
  .stage .lede { font-size: 12px; }
}
/* wide but short (a 1366 x 768 laptop): a smaller title keeps the bet button on the first screen */
@media (min-width: 1340px) and (max-height: 820px) { .sign { max-width: 1040px; } .hero { gap: 10px; } #board { aspect-ratio: 150 / 56; } }
/* up to 920 px the bet controls take a row of their own under "your bulb" and the one number (with a game the
   controls are about 440 px wide, which would leave the two cells too narrow beside them) */
@media (max-width: 920px) {
  .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cta { grid-column: 1 / -1; justify-content: stretch; }
  .cta .primary { flex: 1 1 auto; }
  .cta .odds-line { text-align: left; margin: 0; }
}
@media (max-width: 760px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}
/* phones: the game on the first screen. The title goes to one line, the cam is a little smaller, and the caption
   and status move under the bet controls. */
@media (max-width: 560px) {
  .wrap { gap: 12px; }
  .hero, .stage { gap: 10px; }
  .cam { width: min(100%, 300px); }
  .panel > .caption { order: 19; margin: 0; }
  .panel > .board-wrap, .panel > .meter { order: -1; }
  .meter { grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; }
  #meterText { text-align: left; }
  .panel > #replayControls { order: -2; }
  .panel > #banner { order: -3; }
  .stage .lede { font-size: 11px; letter-spacing: .05em; }
  select, input { font-size: 16px; }   /* under 16 px an iPhone zooms the page when you tap them */
  .seg input { width: 92px; letter-spacing: .02em; }   /* room for "OTHER" at that size */
  .seg input::placeholder { letter-spacing: .04em; }
  #bMinus, #bPlus { min-width: 44px; }
  .hero-top .sound-label { display: none; }
  .hero-top .sound { padding: 9px 11px; }
  #replayControls { flex-wrap: nowrap; }
  #replayControls select { flex: 1 1 0; width: 0; min-width: 0; }
  #replayControls .seg button { padding: 12px 9px; }
}
@media (max-width: 400px) {
  #modeReplay .wide { display: none; } #modeReplay .narrow { display: inline; }
  .seg button { padding: 12px 9px; }
  .primary { padding: 16px 18px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .cam-tag::before, .tick { animation: none !important; }
}