/* Steeler Nation Daily: a riveted steel plate under stadium lights.
   Steeler Nation's black and gold, steel grays mixed from the two, warm white for type. Red only marks a miss. */
:root { /* type scale: 0.75, 0.875, 1, 1.25, 1.75rem; display heroes above it: 2.1rem machinery (the lever, a revealed figure) and the clamped titles and ratings */
  --steel: #101820;
  --gold: #F9BC09;
  --bone: #F5F2EA;
  --red: #E12519; /* the logo's own red */
  --plate: color-mix(in oklab, var(--steel), var(--bone) 15%);
  --plate-deep: color-mix(in oklab, var(--steel), var(--bone) 9%);
  --seam: color-mix(in oklab, var(--steel), var(--bone) 24%);
  --rivet: color-mix(in oklab, var(--steel), var(--bone) 48%);
  --rivet-hi: color-mix(in oklab, var(--steel), var(--bone) 58%); /* a field or a setting's edge: past 3:1 on the plate */
  --gold-deep: color-mix(in oklab, var(--gold), var(--steel) 16%);
  --bone-dim: color-mix(in oklab, var(--bone), var(--steel) 28%);
  --miss: color-mix(in oklab, var(--red), var(--steel) 28%); /* red type on bone, dark enough to read */
  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; } /* a scrollbar arriving never slides the plate sideways */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* a quick second tap (calling a reel, Give up) never zooms the page, and no gray box flashes over a press; pinch zoom stays */
button, .reel, #suggest li { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* a held thumb presses the control, it never selects its label */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: radial-gradient(ellipse 80% 55% at 50% -8%, color-mix(in oklab, var(--bone), transparent 80%), transparent 70%) var(--steel); /* one overhead light */
  color: var(--bone);
  font: 400 1rem/1.5 var(--text);
  min-height: 100dvh;
}

.floor {
  display: grid;
  gap: 28px;
  margin: 0 auto;
  padding: clamp(10px, 3vw, 40px) clamp(10px, 3vw, 32px) 40px;
  max-width: 620px;
}
#ad-slot { margin-top: 122px; } /* with the 28px row gap: 150px clear of the game */
.floor:has(.house) #ad-slot { margin-top: 0; } /* the partner sign hangs under the plate; the clearance returns with the ad */

/* ---------- the plate ---------- */
.plate {
  position: relative;
  background:
    linear-gradient(104deg, transparent 0 34%, color-mix(in oklab, var(--bone), transparent 91%) 44%, transparent 56%) left top / 100% 900px no-repeat, /* a sheen of fixed size: it never slides as the plate grows */
    repeating-linear-gradient(180deg, color-mix(in oklab, var(--bone), transparent 96%) 0 1px, transparent 1px 5px), /* brushed grain you can see on a phone */
    linear-gradient(180deg, var(--plate), var(--plate-deep));
  border: 4px solid var(--steel);
  border-radius: 8px;
  box-shadow: inset 0 2px 0 color-mix(in oklab, var(--bone), transparent 82%), inset 0 -3px 0 var(--steel), inset 0 0 0 1px var(--rivet), 0 0 0 1px var(--seam), 0 24px 48px oklch(0 0 0 / 0.5); /* a machined edge: the plate stands off the floor */
  overflow: hidden;
  --hi: radial-gradient(circle at calc(50% - 1.5px) calc(50% - 1.5px), color-mix(in oklab, var(--bone), var(--rivet) 30%) 0.8px, transparent 1.8px); /* the light catches the dome up and left */
  --dot: radial-gradient(circle, var(--rivet) 3.2px, color-mix(in oklab, var(--steel), var(--rivet) 40%) 4.4px, transparent 5.2px); /* a dome with a dark underside, centred on its band */
}
/* rivets: a row along the top and bottom edges, spaced by the plate's width (which content never changes) */
.plate::before, .plate::after { content: ""; position: absolute; pointer-events: none; z-index: 1; }
.plate::before {
  inset: 0;
  background: var(--hi) top / 96px 14px space no-repeat, var(--dot) top / 96px 14px space no-repeat,
    var(--hi) bottom / 96px 14px space no-repeat, var(--dot) bottom / 96px 14px space no-repeat;
}
/* and down the sides at a fixed pitch from under the tape, stopping short of the bottom corners: they never shift as the plate grows */
.plate::after {
  inset: var(--rivet-top, 0px) 0 34px;
  background: var(--hi) left top / 14px 96px repeat-y, var(--dot) left top / 14px 96px repeat-y,
    var(--hi) right top / 14px 96px repeat-y, var(--dot) right top / 14px 96px repeat-y;
}
.plate > section { padding-inline: clamp(24px, 5vw, 28px); } /* text clears the rivet columns */
.modes { padding-inline: clamp(12px, 4vw, 24px); } /* the rocker row keeps Rules and Mute on one line */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.marquee {
  background: var(--steel);
  border-bottom: 2px solid var(--seam); /* the masthead is a panel bolted on, not a hole */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 16px clamp(14px, 4vw, 24px) 12px;
}
.lockup { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.lockup img { height: 52px; width: auto; } /* the mark leads the masthead */
.daily { margin: 0; font: 800 clamp(1.75rem, 6vw, 2rem)/1 var(--display); text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.daily span { color: var(--bone); }
.presented { grid-area: 2 / 1; margin: 4px 0 0; font-size: 0.75rem; font-weight: 600; color: var(--bone-dim); }
.presented a { display: inline-block; padding-block: 3px; margin-block: -3px; color: var(--bone-dim); font-weight: 700; text-decoration: none; }
@media (hover: hover) { .presented a:hover { color: var(--bone); text-decoration: underline; } }
@media (min-width: 600px) { .lockup img { height: 64px; } .presented { font-size: 0.875rem; } }

/* scoreboard tiles: black numerals on gold */
.counters { grid-area: 1 / 2 / span 2; display: flex; gap: 6px; margin: 0; }
.counters div { text-align: center; }
.counters dt { font-size: 0.75rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.counters dd {
  margin: 0;
  min-width: 2.9rem;
  padding: 3px 7px 2px;
  background: var(--gold);
  color: var(--steel);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--bone), transparent 50%), inset 0 -2px 0 var(--gold-deep);
  font: 800 1.25rem/1.2 var(--display);
  font-variant-numeric: tabular-nums;
}
.challenge { grid-column: 1 / -1; margin: 2px 0 0; font: 600 0.75rem/1.3 var(--text); color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* where a day-old dare came from, in the Presented-by voice: one quiet line, not a second gold dare */

/* caution tape under the header */
.stripes { height: 12px; margin-inline: 0; background: repeating-linear-gradient(45deg, var(--gold) 0 14px, var(--steel) 14px 28px) center; border-block: 2px solid var(--steel); } /* border to border under the masthead */

.modes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-block: 14px 12px; margin-top: 2px; }
.modes:has(.rocker[hidden]) { position: relative; height: 0; padding: 0; z-index: 2; } /* under the rules only Mute stays, beside the heading */
.modes:has(.rocker[hidden]) .tools { position: absolute; right: clamp(12px, 4vw, 24px); top: 14px; }
#plate:has(#intro-dare:not([hidden])) .modes .tools { top: 6px; } /* Mute sits on the eyebrow's line */
.tools { display: flex; gap: 14px; margin: 0; }
.rocker { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; } /* no box around the tabs: the lit tab is the only tab shape */
.rocker button {
  position: relative; border: 0; border-radius: 4px; padding: 7px clamp(8px, 2.6vw, 14px); min-height: 44px; background: none; color: var(--bone);
  font: 800 1rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; cursor: pointer;
}
.rocker button[aria-selected="true"] { background: var(--plate); color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold), transparent 15%), inset 0 1px 0 color-mix(in oklab, var(--bone), transparent 85%); } /* a lit tab: raised plate, gold letters, a thin gold ring all round */
.rocker button.done::before { content: ""; display: inline-block; width: 0.65em; height: 0.65em; margin-right: 6px; vertical-align: 0.08em; border-radius: 1px; background: var(--gold); box-shadow: 0 0 0 1px var(--bone-dim); } /* square, then label: the share's own grammar */
@media (hover: hover) { .rocker button:not([aria-selected="true"]):hover { background: var(--plate); } }
.rocker button.done.lost::before { background: linear-gradient(45deg, transparent 38%, var(--bone) 38% 62%, transparent 62%), linear-gradient(135deg, transparent 38%, var(--bone) 38% 62%, transparent 62%), var(--red); box-shadow: 0 0 0 1px var(--bone); } /* finished, not solved: the share's red square with its ✕, not colour alone */
#mode-drill.done.lost::before { background: linear-gradient(135deg, transparent 40%, var(--bone) 40% 60%, transparent 60%), var(--red); } /* a 0-for-5 Drill leads with its own share square, the slashed miss, not the ✕ */
.rocker button.done.lost[aria-selected="true"] { color: var(--bone); box-shadow: inset 0 0 0 1px var(--rivet-hi), inset 0 1px 0 color-mix(in oklab, var(--bone), transparent 85%); } /* lit, but in steel: gold means a solve */
@media (hover: hover) { #rules:hover, #mute:not([aria-pressed="true"]):hover { color: var(--bone); } }
#mute[aria-pressed="true"] { color: var(--bone); background: var(--steel); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--bone-dim); text-decoration: none; } /* pressed in steel: gold stays for what is earned */
#rules, #mute {
  border: 0; background: none; color: var(--bone-dim); padding: 7px 6px; min-height: 44px; min-width: 44px; text-align: center;
  font: 600 0.875rem/1.2 var(--text); white-space: nowrap; cursor: pointer; /* utilities in the text face: they never read as more tabs */
}

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.rocker button[aria-selected="true"]:focus-visible, #lever:focus-visible, #share.lead:focus-visible, #next:focus-visible, #mute[aria-pressed="true"]:focus-visible, .choice.right:focus-visible { outline-color: var(--bone); } /* a bone ring on anything gold */

/* ---------- reels ---------- */
#reels {
  list-style: none; margin: 0; padding: 10px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px;
  background: var(--steel); border-radius: 4px; box-shadow: inset 0 2px 6px oklch(0 0 0 / 0.55); /* a recess cut in the plate, not a card in a card */
}

.reel { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reel .label { color: var(--bone-dim); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; text-align: center; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
/* a brushed-steel window; the value sits behind glass */
.reel .window {
  min-height: 68px; border-radius: 3px; /* grows with enlarged text instead of clipping the clue */
  background: var(--plate-deep); box-shadow: none; /* flat: the one cut is the bank around them */
  display: grid; place-items: center; padding: 4px;
  border: 0; width: 100%; font: inherit; color: inherit; position: relative; /* a button: tapping a hidden reel calls the audible */
}
#board .reel:not(.revealed) .window { grid-template-rows: 1fr auto; } /* the ? above, a cue row below: in the flow, so large text never overlaps them */
.reel .window::after { text-align: center; font: 700 0.875rem/1 var(--text); color: var(--bone); }
#board .reel:not(.revealed) .window::after { content: attr(data-cue); min-height: 1em; } /* the action, under the ? it acts on; an empty row on every hidden reel keeps the ?s on one line */
.reel.callable .window { box-shadow: inset 0 0 0 1px var(--rivet-hi); } /* every callable window shows it can be pressed; the words stay on the first */
.reel.armed .window { box-shadow: 0 0 0 2px var(--gold); }
@media (hover: hover) { .reel.callable:not(.callable ~ .callable) .window::after { opacity: 1; } .reel.callable ~ .reel.callable .window::after { opacity: 0; } .reel.callable .window:hover::after, .reel.callable .window:focus-visible::after, .reel.armed .window::after { opacity: 1; color: var(--gold); } } /* with a pointer the gold ring says it; the word appears on hover */
#board.lost .reel.revealed .window { box-shadow: inset 0 0 0 2px var(--seam); } /* a lost board does not wear gold rings */
.reel.armed .window::after { color: var(--gold); font-size: 0.75rem; }
.reel.callable .window { cursor: pointer; } /* at rest the ring is steel; gold marks a reel armed, hovered or focused */
.reel.callable .window:focus-visible { background: var(--seam); outline-color: var(--bone); } /* keyboard focus in bone: gold on a reel means armed */
@media (hover: hover) { .reel.callable .window:hover { background: var(--seam); box-shadow: 0 0 0 2px var(--gold); } }
.reel .value {
  font: 800 clamp(1rem, 4.4vw, 1.25rem)/1.02 var(--text);
  text-align: center; text-wrap: balance; overflow-wrap: anywhere;
  color: var(--bone-dim);
}
.reel.revealed[data-clue="position"] .value, .reel.revealed[data-clue="jersey"] .value { font: 800 2.1rem/1 var(--display); }
.reel.revealed[data-clue="honors"] .value { font-size: clamp(0.875rem, 3.6vw, 1rem); }
.reel.revealed[data-clue="years"] .value, .reel.revealed[data-clue="draft"] .value { font: 800 1.25rem/1.05 var(--display); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* figures in the scoreboard face, words in the text face */
.reel .value small { display: block; font: 700 0.75rem/1.2 var(--text); color: var(--bone-dim); margin-top: 2px; }
#board .reel:not(.revealed):not(.spinning) .value { font: 800 1.75rem/1 var(--display); color: var(--rivet-hi); } /* a reel's ? in the scoreboard face: reels waiting to spin, not blanks on a form */
.reel.revealed .window { background: var(--plate-deep); box-shadow: none; } /* a revealed clue is engraved into the bank, no ring; gold rings wait for the solve */
#board { padding-bottom: 30px; } /* the guess box, and a raised GUESS's lip, clear the bottom rivet row */
.reel.callable ~ .reel.callable:not(.armed) .window:not(:hover):not(:focus-visible)::after { visibility: hidden; }
@media (hover: none) { #board .reel:not(.revealed):not(.armed):not(.callable) .window::after, #board .reel.callable ~ .reel.callable:not(.armed) .window::after { content: none; } } /* on touch only the reel that speaks keeps a cue row: every silent ? centres in its window */ /* on touch one 'call' teaches it; an armed reel always says 'tap again' */
#board.won .reel.revealed .window { box-shadow: inset 0 0 0 2px var(--gold-deep); }
.reel.revealed .value { color: var(--bone); }
.reel.fresh .window { box-shadow: inset 0 -4px 0 var(--bone); } /* the clue the last move bought: a bone sill under its window, never gold, never a ring */
.reel.fresh .label { color: var(--bone); } /* the sill carries the shape; the label only brightens */
.reel.spinning .value { color: var(--bone-dim); animation: roll 0.14s linear infinite; }
.reel.spinning .window { overflow: hidden; } /* only the rolling text needs the clip */
.reel.lock .value { animation: settle 0.5s var(--out); }
@keyframes roll { from { transform: translateY(-120%); } to { transform: translateY(120%); } }
@keyframes settle { from { transform: translateY(-90%); } to { transform: none; } }
/* the reel box pulses once in gold when the last reel locks on a win */
#reels.pulse { animation: pulse 0.5s var(--out); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px var(--gold); } }

/* a small plate hanging off the bottom of the reel box: the misses, then the dare */
#tried { width: fit-content; max-width: 100%; margin: 0 auto; padding: 2px 12px 4px; background: var(--steel); border-radius: 0 0 4px 4px; text-align: center; color: var(--bone); font-size: 0.875rem; font-weight: 600; min-height: 1.3em; display: flex; justify-content: center; align-items: baseline; gap: 0.5em; white-space: nowrap; } /* one held line, never two: a nameplate hanging from the bank in the bank's own steel, not the ladder's caption */
#tried:empty { background: none; }
#board.day-done #tried { display: none; }
#tried .dare, #result-dare.dare { font: 800 1rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--bone); } /* the dare wears one face everywhere: the scoreboard's */
#tried .ruled { flex: 0 1 auto; min-width: 0; }
#tried .ruled:has(~ .dare) { border-right: 2px solid var(--seam); padding-right: 0.5em; } /* the parts divided by a seam, as the plate's panels are; it goes with the misses */
#tried .dare { flex: 0 0 auto; max-width: 100%; white-space: normal; text-wrap: balance; } /* one line at any normal size; at large text it wraps rather than clip */
#board:has(#status.miss) #tried .ruled { display: none; }
#board:has(#status.miss) #tried:not(:has(.dare)) { background: none; } /* no dare to hold: the plate goes with the misses */ /* the status already names the miss: the dare holds the line alone, centred */
#suggest li.tried, #suggest li.tried b { color: var(--bone-dim); text-decoration: line-through; }
#suggest li.tried[aria-selected="true"] { background: none; outline: 2px dashed var(--rivet-hi); outline-offset: -2px; cursor: default; } /* a miss stays struck in the list and never wears the live ring */

/* ---------- payout ladder ---------- */
.ladder { display: flex; align-items: center; gap: 8px; margin: 12px 0 14px; font-size: 0.875rem; font-weight: 700; }
#ladder-label { white-space: nowrap; color: var(--bone-dim); }
#ladder { list-style: none; display: flex; flex: 1; gap: 0; margin: 0; padding: 2px; } /* the figures sit on the plate: only the gold rung stands out */
#ladder li {
  flex: 1; text-align: center; padding: 2px 0; border-radius: 3px; color: var(--bone-dim);
  font: 800 1rem/1.4 var(--display); font-variant-numeric: tabular-nums;
  transition: background-color 0.2s;
}
#ladder li.now { background: var(--steel); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } /* the live rung is ringed, not filled: the lever stays the one gold mass */
#ladder li.gone { text-decoration: line-through; }

/* ---------- controls ---------- */
#lever { display: block; width: 100%; min-height: 56px; padding: 10px 12px; font: 800 2.1rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--steel); background: var(--gold); border: 3px solid var(--steel); border-radius: 8px; box-shadow: inset 0 2px 0 color-mix(in oklab, var(--gold), var(--bone) 40%), inset 0 -2px 0 var(--gold-deep), 0 6px 0 var(--gold-deep), 0 9px 0 var(--steel); margin-bottom: 24px; cursor: pointer; transition: transform 0.08s, box-shadow 0.08s; position: relative; }
@media (hover: hover) { #lever:hover:not(:disabled) { background: color-mix(in oklab, var(--gold), var(--bone) 24%); } }
#lever:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 0 0 var(--gold-deep), 0 3px 0 var(--steel); }
#lever:disabled { background: var(--plate-deep); color: var(--bone-dim); box-shadow: 0 6px 0 var(--steel); cursor: not-allowed; }
#lever.spinning { transform: translateY(6px); box-shadow: 0 0 0 var(--gold-deep), 0 3px 0 var(--steel); } /* stays pulled while the reels turn */

#guess-form label { display: block; font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.guess-row { position: relative; display: flex; gap: 8px; }
/* the typeahead: a steel tray under the box, lit matches in gold; it hangs out of the plate while open */
.plate.listing { overflow: visible; }
#suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  list-style: none; margin: 0; padding: 4px; max-height: 272px; overflow-y: auto;
  background: var(--steel); border: 1px solid var(--rivet); border-radius: 8px; overscroll-behavior: contain;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--bone), transparent 88%), 0 16px 32px oklch(0 0 0 / 0.55);
}
#suggest.up { top: auto; bottom: calc(100% + 6px); display: flex; flex-direction: column-reverse; justify-content: flex-start; } /* the best match sits nearest the box */
#suggest.more { mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); } /* more names past the edge: the list fades out */
#suggest li { display: block; min-height: 44px; padding: 11px 12px; border-radius: 6px; font-weight: 700; line-height: 22px; cursor: pointer; } /* block, not flex: flex items drop the space between the lit letters and the rest of the name */
#suggest li b { color: var(--gold); font-weight: 800; }
#suggest li[aria-selected="true"] { background: var(--plate); outline: 2px solid var(--gold); outline-offset: -2px; }
@media (hover: hover) { #suggest li:not(.tried):hover { background: var(--plate); outline: 2px solid var(--gold); outline-offset: -2px; } #suggest li.tried:hover { outline: 2px dashed var(--rivet-hi); outline-offset: -2px; cursor: default; } }
#suggest[data-pick]:not(.up)::before, #suggest.up[data-pick]::after { content: attr(data-pick) / ""; display: block; padding: 8px 14px; font: 800 0.875rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--bone); border-block: 1px solid var(--seam); } /* the nudge sits at the box end of the open list, where the eye is */
#guess {
  flex: 1; min-width: 0; padding: 11px 14px;
  font: 600 1rem/1.2 var(--text); color: var(--bone);
  background: var(--steel); border: 2px solid var(--rivet-hi); border-radius: 8px;
}
#guess:focus-visible { border-color: var(--gold); outline-offset: 0; }
#guess::placeholder { color: var(--bone-dim); opacity: 1; }
#guess:disabled { background: var(--plate-deep); }
#guess-btn, #share, #copy, #next, #retry { /* every action in the scoreboard voice; #copy steps back to the text face below */
  font: 800 1rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.04em; padding: 11px 18px; border-radius: 8px;
  border: 2px solid var(--bone); background: var(--bone); color: var(--steel);
  cursor: pointer; text-decoration: none; display: inline-block;
}
#guess-btn { background: var(--steel); border-color: var(--rivet); color: var(--bone); } /* one filled mass at kickoff: the lever */
.guess-row:has(#guess:not(:placeholder-shown)) #guess-btn:not(:disabled) { background: var(--bone); border-color: var(--bone); color: var(--steel); }
#guess-btn:disabled { background: var(--plate-deep); border-color: var(--seam); color: var(--bone-dim); cursor: not-allowed; }
@media (hover: hover) { #guess-btn:not(:disabled):hover { border-color: var(--bone); } }
#board.pricing:has(#guess:not(:placeholder-shown)) #lever:not(:disabled) { background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--bone), transparent 94%) 0 1px, transparent 1px 5px), var(--seam); color: var(--bone); font-size: 1.25rem; line-height: 2.1rem; letter-spacing: 0.04em; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--bone), transparent 80%), 0 3px 0 var(--steel); } /* stepped back, still live: the same lever out of gold, raised brushed metal on a steel lip (the box holds its height), so the raised gold GUESS leads and the guess field stays the only ringed well */
@media (hover: hover) { #board.pricing:has(#guess:not(:placeholder-shown)) #lever:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--rivet-hi), 0 3px 0 var(--steel); } #board.pricing .guess-row #guess-btn:not(:disabled):hover { background: color-mix(in oklab, var(--gold), var(--bone) 18%); } }
#board.pricing:has(#guess:not(:placeholder-shown)) #lever:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--seam); }
#board.pricing .guess-row #guess-btn:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--steel); box-shadow: 0 6px 0 var(--gold-deep), 0 9px 0 var(--steel); } /* the one raised gold object */
#board.pricing .guess-row #guess-btn:focus-visible { outline-color: var(--bone); }
#board.pricing .guess-row #guess-btn:active:not(:disabled) { transform: translateY(6px); box-shadow: 0 0 0 var(--gold-deep), 0 3px 0 var(--steel); } /* the raised GUESS presses its whole lip, like the lever */
#give-up { display: block; margin: 26px auto 0; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--bone-dim); font: 700 1rem/1.2 var(--text); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 3px; cursor: pointer; } /* the quiet way out once every clue is showing */
@media (hover: hover) { #give-up:hover { color: var(--bone); } }

#status { min-height: 1.5em; margin: 2px 0 12px; font-weight: 600; text-wrap: pretty; } /* above the box: a phone keyboard never covers it */
#status.miss::before, #drill-why.miss:not(:empty)::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.45em; border-radius: 2px; background: linear-gradient(135deg, transparent 42%, var(--bone) 42% 58%, transparent 58%), var(--red); box-shadow: inset 0 0 0 1px var(--bone); } /* the scoreboard's miss square: ring and slash, not colour alone */
#status .fig, #drill-why .fig { font: 800 1rem/1.2 var(--display); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bone); } /* the figure in the scoreboard face; the sentence in the text face */
#retry { margin: 0 0 14px; }

/* ---------- the Drill ---------- */
#drill { padding-block: 4px 20px; }
#drill-progress { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font: 800 1rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--bone-dim); }
#drill-dots { display: flex; gap: 3px; }
#drill-dots .sq { width: 0.8em; height: 0.8em; }
#drill-progress:has(#drill-dare:not(:empty)) { flex-wrap: wrap; row-gap: 2px; }
#drill-dare { flex-basis: 100%; font: 800 1rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--bone); } /* where most dares are decided */
#drill-dare:empty { display: none; }
.sq.now { box-shadow: inset 0 0 0 2px var(--gold); }
#board.day-done #reels { display: none; } /* a complete day: the crown and the share take the plate */
html.keys :is(#drill-q, #result-title, #day-rating, #intro h2, #drill-why):focus-visible { outline: none; box-shadow: -10px 0 0 -6px var(--gold-deep); } /* focus on text is a bar beside it, for keyboard players only: script focus after a click is for screen readers */
#drill-clock { position: absolute; inset: 0; background: color-mix(in oklab, var(--steel), var(--bone) 34%); border-bottom: 4px solid var(--rivet-hi); /* no gold: the right answer is the feedback's only gold */ transform-origin: left; transform: scaleX(0); } /* the whole Hold button is the clock: a steel fill with a steel edge drains toward the next question */
#hint-label { position: relative; } /* the label rides on top of the draining fill */
#drill-hint.held #drill-clock { background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--steel), var(--bone) 34%) 0 6px, color-mix(in oklab, var(--steel), var(--bone) 24%) 6px 12px); border-bottom-color: var(--rivet); } /* stopped machinery: the frozen fill hatched in the tape's rhythm */
/* Held: the clock frozen where it stopped, the button now says Resume; it stays in its slot, so Next never moves */
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#drill-q { margin: 0 0 12px; font: 800 1.25rem/1.2 var(--text); text-wrap: balance; }
@media (min-width: 480px) { #drill-q { font-size: 1.75rem; } } /* on the scale: 1.25 on phones, 1.75 wider */
#drill-q:focus { outline: none; }
#choices { display: grid; gap: 8px; counter-reset: c; padding: 10px; background: var(--steel); border-radius: 4px; box-shadow: inset 0 2px 6px oklch(0 0 0 / 0.55); } /* the answers sit in a bank cut in the plate, like the reels */
.choice { position: relative; counter-increment: c; width: 100%; min-height: 52px; padding: 10px 14px 10px 50px; text-align: left; font: 700 1rem/1.25 var(--text); color: var(--bone); background: var(--plate-deep); border: 0; box-shadow: inset 0 0 0 1px var(--rivet); border-radius: 3px; cursor: pointer; transition: transform 0.08s, background-color 0.12s; } /* flat windows in the bank, like the reels */
.choice::before { content: counter(c, upper-alpha); position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 3px; background: var(--steel); color: var(--gold); box-shadow: none; font: 800 1.25rem/30px var(--display); text-align: center; } /* a steel scoreboard chip with a gold letter, unringed: the window carries the edge; keys A-D answer. Gold fill waits for the answer */
.choice.wrong::before { background: var(--red); color: var(--bone); box-shadow: none; } /* one red on the control: bone on red clears 3:1 for the large letter */
@media (hover: hover) { .choice:not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 2px var(--gold); } }
.choice:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }
.choice:not([aria-disabled="true"]):active { transform: translateY(2px); }
.choice[aria-disabled="true"] { cursor: default; color: var(--bone-dim); }
.choice.right { background: var(--gold); color: var(--steel); opacity: 1; animation: hit 0.45s var(--out); } /* the answer lands, then the Drill moves on by itself */
.choice.wrong { background: var(--steel); box-shadow: inset 0 0 0 2px var(--red); color: var(--bone); text-decoration: line-through; text-decoration-color: var(--bone); opacity: 1; animation: miss 0.4s linear; } /* strike and ring above 3:1 on steel */
@keyframes hit { 40% { transform: scale(1.04); } }
@keyframes miss { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
#drill-why { margin: 14px 0 6px; font-weight: 600; }
#drill-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; } /* right under the choices, where the thumb already is */
#drill-hint { position: relative; overflow: hidden; }

#drill-hint, #drill-next { display: block; flex: 1 1 0; min-height: 44px; margin: 0; padding: 8px 10px; border: 0; border-radius: 6px; background: var(--steel); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--bone), transparent 80%), inset 0 -3px 0 var(--plate-deep), 0 0 0 1px var(--rivet); color: var(--bone); cursor: pointer; font: 800 1rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; white-space: nowrap; } /* outline buttons in two equal halves: the draining Hold reads as a timer, then Next */
#drill-hint:active, #drill-next:active { transform: translateY(1px); } /* a tap shows before the label changes */
@media (hover: hover) { #drill-hint:hover, #drill-next:hover { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--bone), transparent 80%), inset 0 -3px 0 var(--plate-deep), 0 0 0 2px var(--bone-dim); } }
#choices.settling .choice { opacity: 0.85; } /* still above 4.5:1 while the choices settle */
#result:not(.won):not(.complete) #result-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--bone-dim); } /* a loss is an eyebrow: the answer is the headline */
#result:not(.won):not(.complete) #result-title::before { content: "✕" / ""; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--red); color: var(--bone); font: 800 0.75rem/1 var(--text); }
#result:not(.won):not(.complete) #result-answer b { font-size: clamp(2rem, 9vw, 2.6rem); }
#result-points b { display: block; margin-top: 4px; font: 800 1.25rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--bone); } /* the hand up after a loss, in bone: the slab below is the one gold go */
@media (hover: none) and (pointer: coarse) { html:not(.keys) .kbd { display: none; } } /* keys shown once keys are used */
.choice[aria-disabled="true"]:not(.right):not(.wrong)::before { background: var(--plate-deep); color: var(--bone-dim); }
#result-dare.fell { color: var(--gold); font: 800 1.25rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.copy-fallback { display: block; width: 100%; margin-top: 8px; padding: 10px; font: 600 0.875rem/1.4 var(--text); color: var(--bone); background: var(--steel); border: 2px solid var(--rivet); border-radius: 6px; }
#drill-why:empty { margin: 0; }
#drill-source-line { margin: 0 0 3px; font-size: 0.875rem; }
#drill-source { display: inline-block; padding-block: 11px; margin-block: -6px; } /* a 44px target on the link itself */
#drill-source-line a { color: var(--bone); font-weight: 700; text-decoration-color: var(--gold-deep); text-underline-offset: 3px; }

/* ---------- result tray ---------- */
#result { position: relative; overflow: hidden; background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--bone), transparent 96%) 0 1px, transparent 1px 5px), var(--steel); box-shadow: inset 0 2px 0 color-mix(in oklab, var(--bone), transparent 82%); border-top: 2px solid var(--seam); /* every tray is a brushed panel bolted into the plate */ padding-block: 26px 22px; animation: pay 0.45s var(--out); }
@keyframes pay { from { transform: translateY(100%); } } /* the tray slides out of the plate */
/* the towel: a gold ribbon unrolls along the top edge of a won tray and stays, waving like the tile's */
#result.won::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 18px; background: var(--gold); pointer-events: none;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 18' preserveAspectRatio='none'%3E%3Cpath d='M0 7C12 1 20 13 32 9S52 1 64 7V18H0Z'/%3E%3C/svg%3E") 0 0 / 64px 18px repeat-x;
  animation: wave 0.7s var(--out) both;
}
@keyframes wave { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
#result-title { margin: 0; font: 800 clamp(2rem, 9vw, 2.8rem)/1 var(--display); text-transform: uppercase; color: var(--gold); }
#result:not(.won) #result-title { color: var(--bone); } /* gold means a solve */
#result-title:focus { outline: none; }
/* a complete day: the rating is the one headline, the last part's score steps down, the dare verdict stands on its own line */
#result.complete #result-title { font-size: 1.25rem; color: var(--bone-dim); }
#result.complete #day-rating { font-size: clamp(2.6rem, 11vw, 3.4rem); }
#day-verdict { margin: 6px 0 10px; font: 700 1rem/1.3 var(--text); color: var(--bone); } /* the rating is the one shout; calm text under it */
#result-answer { margin: 8px 0 10px; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--bone-dim); text-wrap: balance; }
#result-answer b { display: block; margin-bottom: 2px; font: 800 clamp(1.75rem, 6.5vw, 1.9rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--bone); }
#result-points { margin: 0 0 6px; font: 800 1.25rem/1.3 var(--display); letter-spacing: 0.02em; color: var(--gold); font-variant-numeric: tabular-nums; }
#result:not(.won) #result-points { color: var(--bone-dim); } /* gold means a solve */
#result-dare { margin: 0 0 16px; font-weight: 700; color: var(--bone-dim); } /* the plan reads after the board figure */ /* spacing comes from above, never a pull-up */
#result-points:has(+ #result-dare:empty) { margin-bottom: 16px; }
#result-dare:empty { display: none; }
#day { margin: 0 0 18px; }
#day-preview { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; } /* a thumbnail of the towel that goes out, lying on the tray: the rows above are the scoreboard */
#day-return-line { margin: 16px 0 0; padding-top: 16px; border-top: 2px solid var(--seam); } /* the way back: the tray's last unit, one voice per line */
#day-return-line .when { margin: 0; font: 800 1rem/1.4 var(--display); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bone-dim); } /* the come-back steps down under the scoreboard */
#day-return-line .go { margin: 8px 0 0; font: 700 1rem/1.4 var(--text); color: var(--bone-dim); }
#day-return-line .when span { white-space: nowrap; }
#day-return { display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--bone); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 3px; }
#day-tile { flex: none; display: block; width: 168px; height: auto; padding: 6px; background: var(--plate-deep); box-shadow: inset 0 2px 6px oklch(0 0 0 / 0.55); border-radius: 4px; } /* the shared file itself, lying in a recessed well like the reels */
.wait-switch { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--bone); font: 700 1rem/1.2 var(--text); text-align: left; cursor: pointer; } /* a setting, in the squares' vocabulary */
.wait-switch .box { flex: none; width: 18px; height: 18px; border-radius: 4px; background: var(--steel); box-shadow: inset 0 0 0 2px var(--rivet-hi); display: grid; place-items: center; font: 800 0.875rem/1 var(--text); font-style: normal; color: var(--steel); }
.wait-switch[aria-checked="true"] .box { background: var(--gold); box-shadow: none; }
.wait-switch[aria-checked="true"] .box::before { content: "✓"; }
.wait-switch:focus-visible { outline-offset: 2px; }
#drill-wait { margin-top: 2px; }
#day .label { margin: 0 0 4px; font: 700 0.875rem/1.2 var(--text); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); } /* the edition eyebrow; the masthead carries the lockup */
#day-rating { margin: 0; font: 800 clamp(2rem, 9vw, 2.6rem)/1 var(--display); text-transform: uppercase; color: var(--gold); }
#day-rating:focus { outline: none; }
html.keys #result:not(.won) #day-rating:focus-visible { box-shadow: -10px 0 0 -6px var(--rivet-hi); } /* no gold beside a rating that has not earned it */
#result.complete:not(.won) #day-rating { color: var(--bone); } /* gold is earned: from Starter up, like the towel and the tile's stripes */
#result.complete #result-answer { margin: 6px 0 22px; } /* closes the scoreboard group; the slab starts the next */
#result.complete #result-answer b { display: inline; font-size: 1.25rem; } /* one quiet line naming the last answer */
#result-answer .part { display: block; margin-bottom: 2px; font: 700 0.875rem/1.2 var(--text); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); } /* the lit tab's part, said where the name is */
#day-line { display: block; margin-top: 2px; font: 600 0.875rem/1.3 var(--text); color: var(--bone-dim); } /* one dim second sentence of the verdict */
#day-total { display: block; font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bone-dim); }
#day-total b { font: 800 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--bone); margin-right: 4px; } /* the figure the share dares, set like the tile's */
#day-verdict-text { display: block; margin-top: 6px; }
#day-verdict-text:empty { display: none; }
#result.relay #day-total b { font-size: 1rem; color: var(--bone-dim); } /* a 0 day passing a dare on: the 0 steps down, as on the tile */
#result.relay #day-verdict-text { font: 800 1.25rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--bone); } /* the tile's words, in bone: nothing was earned */
#day-verdict-text.fell { color: var(--gold); font: 800 1.25rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.03em; } /* a beaten dare: the crown's earned gold */
#day-rows p { margin: 0; font: 800 1rem/1.7 var(--display); letter-spacing: 0.03em; text-transform: uppercase; display: grid; grid-template-columns: 4.8em minmax(0, 1fr) auto; align-items: center; gap: 4px; color: var(--bone); } /* a scoreboard: the points line up on the right, like the tile */
#day-rows .pts { font-size: 1.25rem; font-variant-numeric: tabular-nums; text-align: right; }
#day-rows .marks { display: inline-flex; flex-wrap: wrap; gap: 3px; min-width: 0; } /* at 320px or large text the marks wrap; the points never overrun the band */
#day-rows .sq { width: 1.1em; height: 1.1em; }
#day-rows { background: var(--steel); box-shadow: inset 0 2px 6px oklch(0 0 0 / 0.55); border-radius: 4px; padding: 10px 16px; position: relative; --thread: color-mix(in oklab, var(--gold-deep), transparent 25%); } /* the tile's band, cut into the plate like the reel bank */
#day-rows::before { content: ""; position: absolute; inset: 6px; pointer-events: none; background: repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px) top / 100% 2px no-repeat, repeating-linear-gradient(90deg, var(--thread) 0 9px, transparent 9px 16px) bottom / 100% 2px no-repeat, repeating-linear-gradient(180deg, var(--thread) 0 9px, transparent 9px 16px) left / 2px 100% no-repeat, repeating-linear-gradient(180deg, var(--thread) 0 9px, transparent 9px 16px) right / 2px 100% no-repeat; } /* the tile's sewn 9/7 stitch in gold thread */
#share-note { margin: 6px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--bone); } /* the reason to tap the slab, tight under it */
.sq { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 2px; background: var(--seam); box-shadow: inset 0 0 0 1px var(--rivet-hi); } /* the ring clears 3:1 on the plate */
.sq.wrong, .sq.loss { background: var(--red); }
.sq.loss, .sq.wrong, .sq.turn { position: relative; }
.sq.turn::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--bone-dim); } /* a bone dot: a pull or call, never a minus or a blank */
.sq.wrong::after { content: ""; position: absolute; left: 45%; top: 18%; width: 12%; height: 64%; background: var(--bone); border-radius: 1px; transform: rotate(45deg); } /* a slash: a miss reads without its colour */
.sq.loss::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--bone); font: 800 0.7em/1 var(--text); } /* the share's ❌ */
.sq.win { background: var(--gold); }
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* gold marks the one thing to do next: the next part until the day is done, then the share */
#next, #share.lead { background: var(--gold); border-color: var(--gold); }
/* the one next action is a slab like the lever: the share is the growth engine */
#next, #share.lead { display: block; width: 100%; min-height: 56px; padding: 10px 12px; font-size: 1.75rem; line-height: 1; color: var(--steel); background: var(--gold); border: 3px solid var(--steel); box-shadow: inset 0 2px 0 color-mix(in oklab, var(--gold), var(--bone) 40%), inset 0 -2px 0 var(--gold-deep), 0 6px 0 var(--gold-deep), 0 9px 0 var(--steel); /* a flat painted face with a machined edge, not a glossy arcade button */ margin-bottom: 10px; }
#next:active, #play:active, #share.lead:active { transform: translateY(6px); box-shadow: 0 0 0 var(--gold-deep), 0 3px 0 var(--steel); }
.result-actions:has(#share.lead) { display: block; }
@media (hover: hover) { #next:hover, #play:hover, #share.lead:hover { background: color-mix(in oklab, var(--gold), var(--bone) 18%); } }
#share:not(.lead) { display: block; width: 100%; background: var(--steel); border-color: var(--rivet); color: var(--bone); } /* an outline: the gold slab is the one filled shape */
@media (hover: hover) { #share:not(.lead):hover { border-color: var(--gold); } }
#share[aria-busy="true"] { cursor: wait; } /* busy without dimming the label below 4.5:1 */
#copy { border: 0; background: none; color: var(--bone); padding: 11px 0; margin-block: -11px; min-height: 0; font: inherit; text-transform: none; letter-spacing: normal; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-deep); } /* the quiet third route: text for any chat, beside the links */
@media (hover: hover) { #retry:hover { background: var(--gold); border-color: var(--gold); } #copy:hover { background: none; color: var(--gold); } #review summary:hover, .partner-links a:hover, #drill-source-line a:hover, #day-return:hover, .house:hover span { color: var(--gold); } } /* a tap on a phone leaves no gold behind */
.rocker button:active, #guess-btn:active:not(:disabled), #share:not(.lead):active { transform: translateY(1px); }
#review { margin: 0 0 18px; }
#result.complete #review { margin: 8px 0 0; }
#review summary { cursor: pointer; width: fit-content; padding-block: 13px; font: 700 1rem/1.2 var(--text); color: var(--bone); list-style: none; }
#review summary::-webkit-details-marker { display: none; }
#review summary::before { content: "+" / ""; display: inline-block; width: 1em; margin-right: 4px; font: 800 1.25rem/1 var(--display); color: var(--rivet-hi); } /* a stamped plus, not the browser's triangle */
#review[open] summary::before { content: "−" / ""; }
#review ol { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: q; }
#review li { position: relative; padding-left: 34px; font-size: 1rem; line-height: 1.4; color: var(--bone-dim); }
#review li::before { counter-increment: q; content: counter(q); position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 4px; text-align: center; font: 800 1rem/24px var(--display); color: var(--steel); background: var(--gold); }
#review li.wrong::before { background: var(--miss); color: var(--bone); } /* the darker red: bone on it reads at 6.4:1 */
#review li b { display: block; color: var(--bone); }
#review li span { display: block; font-weight: 700; color: var(--bone); }
#review li a { display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--bone); font-weight: 700; text-decoration-color: var(--gold-deep); text-underline-offset: 3px; } /* a 44px target in a thumb's scroll */
.partner-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 1rem; font-weight: 700; }
.partner-links a { color: var(--bone); text-decoration-color: var(--gold-deep); display: inline-block; padding-block: 11px; margin-block: -11px; }
#share-status { margin: 10px 0 0; font-weight: 700; }
a[target="_blank"]:not(.house):not(.presented a)::after { content: " ↗" / ""; font-size: 0.8em; } /* opens elsewhere, for the eye only; the header lockup line stays clean */
#share-status:empty { margin: 0; } /* stays rendered while empty so screen readers announce what lands in it */
#share-status:not(:empty) { margin: 8px 0 0; }

/* ---------- the rules screen, ad, footer ---------- */
#intro { padding-block: 18px 26px; } /* the bottom rivets clear the Play slab's lip */
#intro h2 { margin: 0 0 12px; font: 800 clamp(2rem, 9vw, 2.6rem)/1 var(--display); text-transform: uppercase; color: var(--gold); }
#intro h2:focus { outline: none; }
#intro-dare:not([hidden]), #intro-dare[hidden] + h2 { padding-right: 3.5rem; text-wrap: balance; } /* Mute sits in this line's right lane: large text breaks before it, never under it */
#intro-dare { margin: 0 0 4px; font: 800 1.25rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold); } /* the dare is the hook: it speaks first */
#intro:has(#intro-dare:not([hidden])) h2 { color: var(--bone); }
.rules { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: rule; }
.rules li { position: relative; padding-left: 46px; font-size: 1rem; line-height: 1.4; }
.rules li::before { counter-increment: rule; content: counter(rule); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 4px; text-align: center; font: 800 1.75rem/34px var(--display); color: var(--bone); background: none; box-shadow: none; } /* bare figures: on this screen gold is the dare and the Play slab */
.rules b { color: var(--bone); font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; margin-right: 4px; }
.rules-note { margin: 0 0 16px; color: var(--bone-dim); font-weight: 600; text-wrap: pretty; }
#play { display: block; width: 100%; min-height: 56px; padding: 10px 12px; font: 800 1.75rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.05em; color: var(--steel); background: var(--gold); border: 3px solid var(--steel); border-radius: 8px; box-shadow: inset 0 2px 0 color-mix(in oklab, var(--gold), var(--bone) 40%), inset 0 -2px 0 var(--gold-deep), 0 6px 0 var(--gold-deep), 0 9px 0 var(--steel); /* a flat painted face with a machined edge, not a glossy arcade button */ cursor: pointer; }
#play:focus-visible { outline-color: var(--bone); }
#play:disabled { background: var(--plate-deep); color: var(--bone); box-shadow: 0 6px 0 var(--steel); cursor: wait; } /* loading: a recessed face, legible */

.ad { min-height: 100px; display: grid; place-items: center; text-align: center; }
/* the partner panel while no ad runs: a hanging steel sign, caution tape along its top edge, a headline and the link */
.house { position: relative; display: grid; justify-items: start; gap: 2px; padding: 18px 28px 14px; width: 86%; text-align: left; background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--bone), transparent 96%) 0 1px, transparent 1px 5px), var(--plate-deep); border: 0; border-radius: 2px; box-shadow: none; color: var(--bone-dim); font-weight: 600; text-decoration: none; overflow: hidden; margin: 20px auto 0; } /* a brushed face for the sign */
.house::before { content: ""; position: absolute; inset: 0 0 auto; height: 14px; border-top: 2px solid var(--seam); background: radial-gradient(circle at 14px 7px, var(--rivet) 3px, transparent 3.6px), radial-gradient(circle at calc(100% - 14px) 7px, var(--rivet) 3px, transparent 3.6px); } /* a sign hung on two bolts; the tape stays the masthead's */
.house b { margin-top: 6px; font: 800 1.25rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bone); }
.house span { font: 800 1rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.04em; } /* stenciled, in the product's voice */
.house span i { font: 800 1em/1 var(--text); }

footer { font-size: 0.875rem; font-weight: 500; color: var(--bone-dim); }
footer p { margin: 0; max-width: 70ch; }
#tip { display: inline-block; margin-bottom: 8px; color: var(--gold); font-weight: 800; font-size: 1rem; }
footer p a { color: var(--bone); font-weight: 700; }
footer a { display: inline-block; padding-block: 11px; margin-block: -11px; }

/* ---------- a win: black, gold and bone squares fall ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -24px; width: 14px; height: 14px; border-radius: 2px; animation: fall 1.7s cubic-bezier(0.3, 0, 0.8, 0.6) forwards; }
@keyframes fall { to { transform: translateY(112vh) rotate(600deg); } }

/* ---------- the counter pops, the plate rattles on a cold solve, the title slams in ---------- */
.plate.shake { animation: shake 0.4s linear; }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
#result-title.slam { animation: slam 0.35s var(--out); }
@keyframes slam { from { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reel.spinning .value, .reel.lock .value, #reels.pulse, #result, #result.won::before,
  .plate.shake, #result-title.slam, .confetti i, .choice.right, .choice.wrong { animation: none; }
  #result.won::before { clip-path: none; }
  #lever, #ladder li, .choice { transition: none; }
}

/* ---------- plain reading pages (privacy) ---------- */
.sheet { max-width: 760px; margin: 0 auto; padding: clamp(14px, 3vw, 40px) clamp(10px, 3vw, 32px) 48px; }
.sheet .home { display: inline-block; margin-bottom: 14px; color: var(--gold); text-decoration: none; font: 800 1.25rem/1.1 var(--display); text-transform: uppercase; }
.sheet article { background: var(--plate); border: 1px solid var(--seam); border-radius: 8px; padding: clamp(18px, 5vw, 40px); }
.sheet h1 { margin: 0 0 6px; font: 800 clamp(2.2rem, 10vw, 3.4rem)/1 var(--display); text-transform: uppercase; color: var(--gold); }
.sheet h2 { font: 800 1.25rem/1.2 var(--text); margin: 30px 0 6px; }
.sheet p, .sheet li { max-width: 65ch; }
.sheet p { margin: 0 0 10px; }
.sheet ul { margin: 0 0 10px; padding-left: 1.2em; }
.sheet li { margin-bottom: 4px; }
.sheet a:not(.home) { color: var(--bone); font-weight: 700; }
.sheet .updated { color: var(--bone-dim); font-weight: 600; margin-bottom: 18px; }

/* ---------- phones: last, so these rules win over the component rules above ---------- */
/* the lockup and three counters don't fit one line: the counters drop to a second row; the board tightens
   so the lever and the guess box stay above the fold */
@media (max-width: 479px) {
  .lockup { grid-area: 1 / 1 / 2 / 3; }
  .presented { grid-area: 2 / 1; align-self: end; margin-top: 8px; }
  .counters { grid-area: 2 / 2; margin-top: 8px; }
  #plate .marquee .lockup { grid-area: 1 / 1; } /* while playing: the lockup and the streak share one line */
  #plate .marquee .counters { grid-area: 1 / 2; display: flex; margin-top: 0; }
  #plate .marquee .presented { grid-area: 2 / 1 / 3 / 3; margin-top: 4px; }
  .modes { padding-block: 8px 6px; }
  .rocker button { padding-inline: 5px; font-size: 1rem; }
  .modes { column-gap: 4px; }
  .rocker button.done::before { margin-right: 4px; }
  .tools { gap: 4px; }
  #rules, #mute { padding-inline: 4px; font-size: 0.875rem; } /* ~48px targets on the same row */
  #intro { padding-block: 12px 24px; } /* the Play slab's lip clears the bottom rivets */
  #intro h2 { font-size: 1.9rem; margin-bottom: 8px; }
  .rules { gap: 10px; }
  .rules li { padding-left: 40px; font-size: 1rem; line-height: 1.35; }
  .rules li::before { width: 30px; height: 30px; font-size: 1.25rem; line-height: 30px; }
  .reel .value { font-size: 1rem; } /* "Mississippi Valley State" in three lines of a 58px window */
  .reel.revealed[data-clue="honors"] .value { font-size: 0.875rem; line-height: 1.1; } /* in its own cell: the bank never shows an empty window */
  .rules-note { margin-bottom: 12px; font-size: 1rem; }
  .reel .window { min-height: 58px; }
  .reel.revealed[data-clue="position"] .value, .reel.revealed[data-clue="jersey"] .value { font-size: 1.75rem; } /* room for the era line under the position */
  .reel .value small { font-size: 0.75rem; }
  .ladder { margin: 6px 0 8px; }
  #lever { min-height: 52px; margin-bottom: 12px; }
  #status { min-height: 4.5em; } /* room for the longest line: the guess row never moves */
  #guess-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* read, not shown */
  .choice { min-height: 46px; }
  #next, #share.lead { font-size: 1.25rem; min-height: 52px; }
}
@media (max-width: 359px) { /* the narrowest phones: six marks stay on one line; Rules and Mute sit right under the tabs */
  #day-rows { padding-inline: 12px; }
  #day-rows p { grid-template-columns: 4.4em minmax(0, 1fr) auto; }
  #day-rows .sq { width: 0.95em; height: 0.95em; }
  .tools { margin-left: auto; }
  .modes { row-gap: 0; }
}
@media (max-width: 479px) and (max-height: 700px) { /* Safari and in-app browsers show ~635px: keep the guess box above the toolbar */
  #board { padding-bottom: 26px; } /* the 635px view keeps its fold */
  .rules { gap: 8px; }
  .rules li { font-size: 1rem; line-height: 1.3; }
  #intro h2 { font-size: 1.75rem; }
  .rules-note { margin-bottom: 10px; font-size: 0.875rem; }
  .rules-note .long, .rules .long { display: none; }
  .reel.revealed[data-clue="honors"] { grid-column: auto; } /* on a short screen Honors keeps its cell: the guess box stays above the toolbar */
  .reel.revealed[data-clue="honors"] .value { font-size: 0.875rem; line-height: 1.1; }
  .counters dt, .reel .label { font-size: 0.75rem; } /* the short screen keeps its tighter labels */
  #wait-drill { margin-top: 0; }
  .reel .window { min-height: 50px; }
  #reels, #choices { padding: 8px; }
  #reels { gap: 6px 8px; }
  .ladder { margin: 4px 0 6px; }
  #lever { min-height: 48px; font-size: 1.9rem; }
  #board.pricing:has(#guess:not(:placeholder-shown)) #lever:not(:disabled) { line-height: 1.9rem; } /* the priced box holds the short screen's height too */
  #status { margin: 0 0 8px; }
  .marquee { padding-block: 10px 8px; }
  .lockup img { height: 44px; }
}