/* Improbable: a lime event field (today's draw and the run) beside a navy panel. Base in ../style.css. */
.stage { display: grid; }
.field { position: relative; overflow: hidden; background: var(--lime); color: var(--ink); padding: 0 var(--pad) 22px; display: flex; flex-direction: column; }
.field > * { position: relative; }
/* One giant pictogram: the last draw (or today's game), cropped off the field's edge. */
.giant { position: absolute; top: 62px; right: calc(-1 * clamp(28px, 5vw, 80px)); width: clamp(120px, 22vw, 300px); aspect-ratio: 1; color: var(--ink); }
.giant svg { width: 100%; height: 100%; display: block; }
@media (max-width: 899px) { .giant { top: 36px; right: -22vw; width: 64vw; color: rgba(20, 33, 61, 0.14); } }
/* Back up to the Improbable page (or the level select): a plain link with an arrow, under the masthead. */
.up-row { margin-top: 14px; }
.up-link { color: var(--ink); text-decoration: none; }
.up-link::before { content: "\2190  "; }
@media (hover: hover) { .up-link:hover { text-decoration: underline; } }
.field h1 { font-size: clamp(40px, 10vw, 76px); margin: 22px 0 0; }
.today { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* Today's one rule, as big as the title's second line. */
.goal { font-size: clamp(30px, 5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 4px; max-width: 12em; }
.today .soon { opacity: 0.7; }
/* Two lines reserved, so a one-line result and the two-line rules don't move everything under them. */
.prompt { min-height: 3em; line-height: 1.5; margin: 6px 0 14px; font-size: 17px; font-weight: 700; }

/* The last draw on white: a card (rank in the corner, suit in the middle), a coin or a die. Face down before the first. */
/* As tall as a card on every day, so a coin or a die replacing the face-down card doesn't shift anything. */
.table { --w: clamp(100px, 17vw, 160px); display: flex; align-items: center; gap: clamp(20px, 4vw, 44px); min-height: calc(var(--w) * 1.4); }
.draw { position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.4); background: #fff; color: var(--ink); display: grid; place-items: center; }
.draw.coin { height: var(--w); border-radius: 50%; }
.draw.die { height: var(--w); background: transparent; }
.draw .face { font-size: calc(var(--w) * 0.42); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.draw .rank { position: absolute; left: 10%; top: 6%; font-weight: 800; font-size: calc(var(--w) * 0.2); letter-spacing: -0.03em; line-height: 1; }
.draw .rank.flip { left: auto; top: auto; right: 10%; bottom: 6%; transform: rotate(180deg); }
.draw .pip { width: 52%; }
.draw.die .pip { width: 100%; }
.draw .pip svg { display: block; width: 100%; height: auto; }
/* Face down, before the first draw: a plain navy card, coin, die or pocket. */
.draw.down { background: var(--ink); }
.draw.dealt { animation: deal 0.28s var(--ease) both; }
.draw.hit { outline: 6px solid var(--orange); outline-offset: -6px; }
.draw.die.hit { outline: 0; color: var(--orange); }
/* Two dice side by side, the same height as one; face down, two navy squares. */
/* The globe (Don't land on land): a canvas globe with a pin on the place; out is ringed in orange. */
.draw.globe, .draw.globe.down { height: var(--w); background: transparent; }
.draw.globe canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.draw.globe.hit { outline: 0; }
.draw.globe.hit canvas { box-shadow: 0 0 0 6px var(--orange); }
.globe-pin { position: absolute; left: 50%; top: 50%; width: 20%; transform: translate(-50%, -100%); pointer-events: none; }
.globe-pin svg { display: block; width: 100%; height: auto; }
.draw.dice { width: calc(var(--w) * 1.6); height: calc(var(--w) * 0.75); background: transparent; display: flex; align-items: center; justify-content: space-between; }
.draw.dice .pip { width: 47%; }
.draw.dice.down { background: linear-gradient(var(--ink), var(--ink)) left center / 47% 47% no-repeat, linear-gradient(var(--ink), var(--ink)) right center / 47% 47% no-repeat; }
.draw.dice.hit { outline: 0; color: var(--orange); }
/* Three dice in the same width as two. */
.draw.dice.three { width: calc(var(--w) * 2.1); }
.draw.dice.three .pip { width: 31%; }
.draw.dice.three.down { background: linear-gradient(var(--ink), var(--ink)) left center / 31% 58% no-repeat, linear-gradient(var(--ink), var(--ink)) center / 31% 58% no-repeat, linear-gradient(var(--ink), var(--ink)) right center / 31% 58% no-repeat; }
/* Rock paper scissors: your throw, "vs", theirs, on bare field like the dice. */
.draw.rps { width: calc(var(--w) * 1.8); height: calc(var(--w) * 0.75); background: transparent; display: flex; align-items: center; justify-content: space-between; }
.draw.rps .pip { width: 40%; }
.draw.rps .vs { font-weight: 800; font-size: calc(var(--w) * 0.14); text-transform: uppercase; letter-spacing: 0.08em; }
.draw.rps.down { background: linear-gradient(var(--ink), var(--ink)) left center / 40% 75% no-repeat, linear-gradient(var(--ink), var(--ink)) right center / 40% 75% no-repeat; }
.draw.rps.hit { outline: 0; color: var(--orange); }
/* A roulette pocket: its number on the pocket's color. */
.draw.pocket { height: var(--w); background: var(--ink); color: #fff; }
/* The Levels games as dailies: square tiles. A die with a number (4 to 20 sides), a wheel's color, a numbered ball, a
   lock code, a clock time, a calendar page, the Lucky Drop's slot. */
.draw.poly, .draw.wheel, .draw.number, .draw.ball, .draw.lock, .draw.clock, .draw.calendar { height: var(--w); }
.draw.poly { background: var(--ink); color: #fff; border-radius: 18%; }
.draw.ball, .draw.clock, .draw.wheel { border-radius: 50%; }
.draw.ball .face { font-size: calc(var(--w) * 0.36); }
.draw.lock .face, .draw.clock .face { font-size: calc(var(--w) * 0.24); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.draw.lock { border-radius: 14%; }
.draw.lock .face { font-size: calc(var(--w) * 0.19); }
.draw.calendar { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4%; border-radius: 10%; }
.draw.calendar:not(.down) { border-top: calc(var(--w) * 0.1) solid var(--red); }
.draw.calendar .ev { font-size: calc(var(--w) * 0.12); }
.draw.wheel { box-shadow: inset 0 0 0 4px var(--ink); }
.draw.wheel .face { font-size: calc(var(--w) * 0.17); }
.draw.down.poly, .draw.down.lock, .draw.down.calendar { border-radius: 14%; }
.draw.down.wheel, .draw.down.ball, .draw.down.clock { border-radius: 50%; box-shadow: none; }
.c-blue { background: var(--sky) !important; color: #fff; } .c-orange { background: var(--orange) !important; }
.c-pink { background: var(--pink) !important; } .c-lime { background: var(--lime) !important; }
.c-yellow { background: var(--yellow) !important; } .c-navy { background: var(--navy) !important; color: #fff; }
.c-red { background: var(--red) !important; color: #fff; } .c-green { background: var(--green) !important; color: #fff; }
.draw.wheel.hit { outline: 0; box-shadow: inset 0 0 0 4px var(--ink), 0 0 0 6px var(--orange); }
.history li.small { font-size: 10px; padding: 0 3px; }
.history li[class*="c-"] { box-shadow: inset 0 0 0 2px var(--ink); }
.history li[class*="c-"].hit { outline: 3px solid var(--orange); outline-offset: -3px; }

.draw.pocket.R { background: var(--red); }
.draw.pocket.G { background: var(--green); }
@keyframes deal { from { transform: scaleX(0.05); } }
.tally .streak { font-size: clamp(72px, 14vw, 150px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.85; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tally .odds { margin-top: 10px; font-size: clamp(18px, 2.4vw, 24px); font-weight: 800; letter-spacing: -0.01em; }

/* This run's draws, oldest first: small white tiles with the result, the ending hit in orange. */
/* One row, always there (empty before a run), so nothing below it moves as draws come in. */
.history { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; height: 32px; max-width: 760px; }
.history li { flex: none; min-width: 24px; height: 32px; padding: 0 5px; background: #fff; display: grid; place-items: center; font: 800 13px var(--font); }
.history li svg { width: 16px; display: block; }
.history li.hit { background: var(--orange); }
.history li.pR, .history li.pB, .history li.pG { color: #fff; background: var(--ink); }
.history li.pR { background: var(--red); }
.history li.pG { background: var(--green); }
.history li.pR.hit { outline: 2px solid var(--orange); outline-offset: -2px; }
.history li.more { background: transparent; outline: 2px solid var(--ink); outline-offset: -2px; font-size: 11px; padding: 0 6px; }

.status { display: flex; gap: clamp(24px, 5vw, 56px); margin-top: 26px; padding-top: 10px; border-top: 2px solid var(--ink); }
.num { font-size: clamp(30px, 7vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }

.panel { background: var(--navy); color: #fff; padding: 24px var(--pad) 28px; }
.soft, .ev.soft { color: var(--navy-soft); }
.panel-title { font-size: clamp(28px, 5vw, 38px); letter-spacing: -0.02em; line-height: 1.05; }
.panel .more { display: inline-block; margin-top: 28px; color: #fff; }

.go { margin-top: 18px; width: 100%; max-width: 520px; padding: 18px 24px; border: 0; border-radius: 0; background: var(--ink); color: #fff; font: 800 15px var(--font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
@media (hover: hover) { .go:hover:not(:disabled) { background: var(--orange); color: var(--ink); } }
.go:active { transform: scale(0.98); }
.go:disabled { opacity: 0.6; cursor: default; }
/* Rock paper scissors: one tile per throw, and a tap throws it. */
.throws { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 520px; }
.throws[hidden] { display: none; }
.throws.two { grid-template-columns: repeat(2, 1fr); }
.throws.two button { padding: 18px 8px; }
.throws button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; border: 0; border-radius: 0; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.throws svg { width: 48px; height: 48px; }
@media (hover: hover) { .throws button:hover { background: var(--orange); } }
.throws button:active { transform: scale(0.97); }
.end { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; max-width: 520px; }
.end .share { margin-top: 18px; padding: 18px 12px; border: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 800 15px var(--font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
@media (hover: hover) { .end .share:hover { background: var(--orange); border-color: var(--orange); } }
.end[hidden] { display: none; }

/* The run that just ended: how long, and how rare. Then the pitch for the levels. */
.result { margin-top: 24px; padding-top: 10px; border-top: 2px solid rgba(255, 255, 255, 0.3); }
.result .big { font-size: clamp(44px, 5.6vw, 72px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.result .note { font-size: 17px; }
.levels-promo { display: block; margin-top: 16px; padding: 14px 16px; border: 2px solid #fff; color: #fff; text-decoration: none; }
.levels-promo strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 4px 0 2px; }
.levels-promo span:last-child { font-size: 15px; color: var(--navy-soft); }
@media (hover: hover) { .levels-promo:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); } .levels-promo:hover span:last-child { color: var(--ink); } }

/* Today's leaderboard: rank, name, streak, attempts. Your row is white. */
.board { margin-top: 28px; padding-top: 10px; border-top: 2px solid rgba(255, 255, 255, 0.3); }
.top { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: r; }
.top li { counter-increment: r; display: grid; grid-template-columns: 2.2em 1fr auto; align-items: baseline; gap: 10px; padding: 8px 6px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 16px; }
.top li::before { content: counter(r); font-weight: 800; color: var(--navy-soft); font-variant-numeric: tabular-nums; }
.top li.empty { display: block; border: 0; padding-left: 0; }
.top li.empty::before { content: none; }
.top li.gap { display: block; padding: 2px 6px; border: 0; color: var(--navy-soft); }
.top li.gap::before { content: none; }
.top li.you { background: #fff; color: var(--ink); }
.top li.you::before { color: var(--ink); }
.top li[data-rank]::before { content: attr(data-rank); }
.top b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; }
.top .tries { display: block; font-size: 13px; font-weight: 700; color: var(--navy-soft); text-align: right; }
.top li.you .tries { color: var(--ink-soft); }
.me { margin-top: 12px; }
.board .submit, .board .show-board { display: block; width: 100%; max-width: 420px; margin-top: 12px; padding: 14px 18px; border: 2px solid #fff; border-radius: 0; font: 800 13px var(--font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.board .submit { background: #fff; color: var(--ink); }
.board .submit:disabled { opacity: 0.55; cursor: default; }
.board .show-board { background: transparent; color: #fff; }
@media (hover: hover) { .board .submit:hover:not(:disabled), .board .show-board:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); } }
.submit-note { margin-top: 8px; font-size: 15px; color: var(--navy-soft); }
.submit-note:empty { display: none; }
.namer { display: grid; grid-template-columns: 1fr 1fr 4.2em auto; gap: 6px; margin-top: 8px; max-width: 420px; }
.namer select, .namer button { min-width: 0; padding: 10px 8px; border: 2px solid #fff; border-radius: 0; background: var(--navy); color: #fff; font: 700 16px var(--font); -webkit-appearance: none; appearance: none; }
/* 16px keeps iOS from zooming in when a dropdown opens. */
.namer select { padding-right: 24px; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 8px center / 10px 6px; }
.namer button { font: 800 12px var(--font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
@media (hover: hover) { .namer button:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); } }

/* The math: a ladder of streak lengths and their odds, the reasoning, and expected records on a green field. */
.math { padding-top: clamp(40px, 7vw, 72px); }
.math h2 { font-size: clamp(36px, 6vw, 64px); padding-bottom: 14px; border-bottom: var(--rule) solid var(--ink); }
.math .therefore { margin-top: clamp(20px, 3vw, 32px); font-size: clamp(18px, 2vw, 22px); max-width: 36em; color: var(--ink-soft); }
.math .ladder { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; max-width: 900px; }
.math .ladder li { display: grid; grid-template-columns: 7em 9em 1fr; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(20, 33, 61, 0.15); }
.math .ladder b { font-size: clamp(17px, 2vw, 22px); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.math .ladder i { display: block; height: 14px; min-width: 2px; background: var(--ink); }
.math .ladder .best { border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); }
.math .ladder .best i { background: var(--orange); }
.math .steps-math { margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; max-width: 40em; }
.math .steps-math li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 12px; font-size: clamp(17px, 1.8vw, 20px); color: var(--ink-soft); }
.math .steps-math li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; background: var(--ink); color: #fff; font-weight: 800; }
.math .steps-math b { color: var(--ink); }
.math .worked { margin-top: clamp(24px, 4vw, 40px); font-size: clamp(28px, 5.6vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.math .worked .hl { background: var(--orange); padding: 0 0.12em; }
.math .worked .eq { display: block; font-size: 0.55em; color: var(--ink-soft); letter-spacing: -0.01em; margin-bottom: 0.2em; }
.math .odds-box { margin-top: clamp(32px, 5vw, 56px); background: var(--green); color: #fff; padding: clamp(20px, 4vw, 40px); }
.math .odds-box h3 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; }
.math table { width: 100%; border-collapse: collapse; margin: 18px 0 20px; }
.math th, .math td { padding: 12px 0; border-top: 2px solid rgba(255, 255, 255, 0.5); text-align: left; vertical-align: baseline; }
.math th { font-weight: 700; font-size: 17px; padding-right: 16px; }
.math td { text-align: right; font-size: clamp(24px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.math td .sub { display: block; font-size: 14px; font-weight: 700; letter-spacing: 0; opacity: 0.9; }
.math .odds-box p { max-width: 40em; color: rgba(255, 255, 255, 0.92); }
.math .source { margin-top: 32px; font-size: 15px; color: var(--ink-soft); max-width: 60em; }

@media (min-width: 900px) {
  .stage { grid-template-columns: minmax(0, 1.55fr) minmax(380px, 1fr); min-height: 100svh; }
  .field { padding-bottom: 36px; }
  /* The field stays in view while the panel's leaderboard scrolls. */
  .field { position: sticky; top: 0; align-self: start; min-height: 100svh; }
  .field h1 { margin-top: 30px; }
  .status { margin-top: auto; }
  .panel { padding-top: 76px; padding-bottom: 36px; display: flex; flex-direction: column; }
  .panel .more { margin-top: auto; padding-top: 28px; align-self: flex-start; }
}
/* Phones: the rule, the draw, the score and the button share one screen, even a small one (375 x 553).
   Every line keeps its height from first load to the end of a run, so nothing jumps while you tap. */
@media (max-width: 899px) {
  .table { --w: 88px; }
  .tally .streak { font-size: 64px; }
  .tally .odds { font-size: 16px; margin-top: 6px; }
  .today { margin-top: 12px; }
  .prompt { font-size: 15px; margin: 4px 0 10px; }
  .history { margin-top: 10px; }
  .go { padding: 15px 20px; }
  /* As tall as the Draw button, so the play area still fits a small phone. */
  .throws button { flex-direction: row; gap: 8px; padding: 10px 6px; }
  .throws svg { width: 28px; height: 28px; }
  .end .share { padding: 15px 12px; }
  .status { margin-top: 14px; padding-top: 6px; }
}
@media (max-width: 640px) {
  .status .num { font-size: 30px; }
  .math .ladder li { grid-template-columns: 5.4em 7.4em 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .draw.dealt { animation: none; } }

/* Lucky Drop: the peg board itself, wider than a card, the ball dropping through it (plinko.js). */
.draw.plinko, .draw.plinko.down { width: calc(var(--w) * 2.1); height: calc(var(--w) * 1.4); background: var(--ink); border-radius: 18px; }
.draw.plinko canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 18px; }
.draw.plinko.hit { outline: 0; box-shadow: 0 0 0 6px var(--orange); }

/* The newer games' reveals (reveal.js): the thing itself, on the field, not a white card. Each fits the table's height. */
.draw.fx { background: transparent; outline: 0; border-radius: 0; box-shadow: none; border: 0; }
.draw.fx.hit { outline: 0; }
/* A wheel of color slices under a pointer. */
.draw.fx.wheel { width: calc(var(--w) * 1.3); height: calc(var(--w) * 1.3); }
.draw.fx.wheel .rotor { width: 100%; height: 100%; }
.draw.fx.wheel svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 0 rgba(20, 33, 61, 0.25)); }
.draw.fx.wheel .pointer { position: absolute; top: -6%; left: 50%; transform: translateX(-50%); transform-origin: 50% 20%; width: 0; height: 0;
  border-left: calc(var(--w) * 0.11) solid transparent; border-right: calc(var(--w) * 0.11) solid transparent; border-top: calc(var(--w) * 0.2) solid var(--ink); }
.draw.fx.wheel.hit { box-shadow: none; }
.draw.fx.wheel.hit svg { filter: drop-shadow(0 0 0 var(--orange)) drop-shadow(0 0 7px var(--orange)); }
/* A many-sided die: its outline in navy, the number in white. */
.draw.fx.poly { width: calc(var(--w) * 1.15); height: calc(var(--w) * 1.15); }
.draw.fx.poly .body { width: 100%; height: 100%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.draw.fx.poly .face { font-size: calc(var(--w) * 0.4); }
.draw.fx.poly .face.low { padding-top: 22%; font-size: calc(var(--w) * 0.34); }
.draw.fx.poly.hit .body { background: var(--orange); color: var(--ink); }
/* A number on a white tile. */
.draw.fx.number { width: var(--w); height: var(--w); background: #fff; border-radius: 16%; overflow: hidden; }
.draw.fx.number .face { font-variant-numeric: tabular-nums; }
.draw.fx.number.hit { box-shadow: 0 0 0 6px var(--orange); }
/* A bingo ball: a colored ball, a white band with the letter and the number. */
.draw.fx.ball { width: calc(var(--w) * 1.15); height: calc(var(--w) * 1.15); }
.draw.fx.ball .orb { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), transparent 42%), var(--c, var(--ink)); display: grid; place-items: center; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18); }
.draw.fx.ball .band { width: 62%; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; align-content: center; line-height: 1; }
.draw.fx.ball .ltr { font-size: calc(var(--w) * 0.13); font-weight: 800; }
.draw.fx.ball .face { font-size: calc(var(--w) * 0.3); }
.draw.fx.ball .blank .band { background: rgba(255,255,255,.15); color: #fff; }
.draw.fx.ball.hit .orb { box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 0 0 6px var(--orange); }
/* A combination lock: a shackle and one rolling dial per digit. */
.draw.fx.lock { --d: 3; width: calc(var(--w) * (0.3 * var(--d) + 0.32)); height: calc(var(--w) * 1.2); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.draw.fx.lock .shackle { width: 54%; height: 36%; border: calc(var(--w) * 0.09) solid var(--ink); border-bottom: 0; border-radius: 999px 999px 0 0; margin-bottom: -2px; }
.draw.fx.lock .dials { width: 100%; height: 64%; background: var(--ink); border-radius: calc(var(--w) * 0.14); display: flex; justify-content: center; align-items: center; gap: calc(var(--w) * 0.04); }
.draw.fx.lock .dial { width: calc(var(--w) * 0.26); height: calc(var(--w) * 0.4); background: #fff; border-radius: calc(var(--w) * 0.06); overflow: hidden; font-size: calc(var(--w) * 0.3); line-height: calc(var(--w) * 0.4); font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 8px 8px -6px rgba(0,0,0,.35), inset 0 -8px 8px -6px rgba(0,0,0,.35); }
.draw.fx.lock .strip { display: flex; flex-direction: column; text-align: center; }
.draw.fx.lock.hit .dials { background: var(--orange); }
/* A clock face, its hands, the time under it. */
.draw.fx.clock { width: calc(var(--w) * 1.15); height: calc(var(--w) * 1.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6%; }
.draw.fx.clock .dialface { position: relative; width: 100%; aspect-ratio: 1; }
.draw.fx.clock svg { display: block; width: 100%; height: 100%; }
.draw.fx.clock .hand { position: absolute; left: 50%; bottom: 50%; background: var(--ink); border-radius: 99px; transform-origin: 50% 100%; }
.draw.fx.clock .hand.h { width: 6%; height: 24%; margin-left: -3%; }
.draw.fx.clock .hand.m { width: 4%; height: 36%; margin-left: -2%; background: var(--red); }
.draw.fx.clock .hub { position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; margin: -4.5% 0 0 -4.5%; border-radius: 50%; background: var(--ink); }
.draw.fx.clock .time { font-weight: 800; font-size: calc(var(--w) * 0.17); font-variant-numeric: tabular-nums; background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 99px; transition: opacity .15s; }
.draw.fx.clock .time.dim { opacity: 0.25; }
.draw.fx.clock.hit svg circle { stroke: var(--orange); }
.draw.fx.clock.hit .time { background: var(--orange); color: var(--ink); }
/* A tear-off calendar: pages stacked, the top one rips away. */
.draw.fx.calendar { width: calc(var(--w) * 1.05); height: calc(var(--w) * 1.15); border-top: 0; }
.draw.fx.calendar .sheet { position: absolute; inset: 0; background: #fff; border-radius: 10%; overflow: hidden; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 rgba(20,33,61,.25); transform-origin: 30% 0; }
.draw.fx.calendar .top { width: 100%; height: 28%; background: var(--red); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: calc(var(--w) * 0.17); letter-spacing: 0.04em; text-transform: uppercase; }
.draw.fx.calendar .face { flex: 1; display: grid; place-items: center; font-size: calc(var(--w) * 0.44); }
.draw.fx.calendar.hit .sheet:not(.torn) { box-shadow: 0 0 0 6px var(--orange); }
/* The shell game: three cups on the table, the ball under one. */
.draw.fx.shell { width: calc(var(--w) * 2.1); height: calc(var(--w) * 1.1); }
.draw.fx.shell .cup { position: absolute; bottom: 0; width: 33.333%; padding: 0 3%; box-sizing: border-box; z-index: 1; }
.draw.fx.shell .cup svg { display: block; width: 100%; height: auto; }
.draw.fx.shell .ball { position: absolute; bottom: 4%; width: 33.333%; display: grid; place-items: center; opacity: 0; }
.draw.fx.shell .ball::before { content: ""; width: calc(var(--w) * 0.3); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, transparent 45%), var(--yellow); border: 3px solid var(--ink); }
.draw.fx.shell.hit .ball::before { background: radial-gradient(circle at 35% 30%, #fff, transparent 45%), var(--orange); }
/* Three curtains on a navy stage, a star behind one. */
.draw.fx.door { width: calc(var(--w) * 2.1); height: calc(var(--w) * 1.2); display: flex; align-items: stretch; gap: 4%; padding: 4%; box-sizing: border-box; background: var(--ink); border-radius: calc(var(--w) * 0.12); }
.draw.fx.door .slot { position: relative; flex: 1; border-radius: 8px; background: #23345a; display: grid; place-items: center; overflow: hidden; }
.draw.fx.door .prize { width: 70%; }
.draw.fx.door .prize svg { display: block; width: 100%; }
.draw.fx.door .curtain { position: absolute; inset: 0; transform-origin: 50% 0; background: repeating-linear-gradient(90deg, #c81f35 0 14%, #e2394c 14% 24%, #b01a2e 24% 33.333%); display: grid; place-items: end center; padding-bottom: 8%; }
.draw.fx.door .curtain b { color: #fff; font-size: calc(var(--w) * 0.22); }
.draw.fx.door.hit .slot.win { box-shadow: inset 0 0 0 4px var(--orange); }
/* A dartboard, the dart stuck in it, its number lit. */
.draw.fx.dart { width: calc(var(--w) * 1.35); height: calc(var(--w) * 1.35); }
.draw.fx.dart svg { display: block; width: 100%; height: 100%; }
.draw.fx.dart .nums { font: 800 7px var(--font, sans-serif); fill: #fff; text-anchor: middle; }
.draw.fx.dart .lit { fill: var(--yellow); opacity: 0.85; }
.draw.fx.dart.hit .lit { fill: var(--orange); }
.draw.fx.dart .arrow { position: absolute; width: calc(var(--w) * 0.42); height: calc(var(--w) * 0.07); margin-top: calc(var(--w) * -0.035); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, #8a8f99 0 8%, var(--ink) 8% 64%, transparent 64%), linear-gradient(90deg, transparent 64%, var(--orange) 64% 100%);
  clip-path: polygon(0 50%, 8% 35%, 64% 35%, 64% 0, 100% 0, 92% 50%, 100% 100%, 64% 100%, 64% 65%, 8% 65%); rotate: -35deg; }