/* ============================================================================
   The Rope Drop — ceremony + effects (rope-drop-fx.js). Loads after arcade.css.
   ========================================================================== */

/* the rope canvas overhangs the board; clip sideways so phones never scroll horizontally
   (clip, unlike hidden, keeps the sticky toast working) */
.rd-app { overflow-x: clip; }

/* the board sits inside a wrapper while the rope is up, so the posts and the rope
   canvas can overhang it */
.rd-gatewrap { position: relative; width: fit-content; margin: 0 auto; isolation: isolate; }   /* no padding: the board keeps its size; posts overhang the gutter */
.rd-gatewrap .rd-board { margin: 0; position: relative; z-index: 0; }

/* pre-dawn veil over the tiles, with a light sweep when the gates open */
.rd-veil { position: absolute; inset: 6px -8px; z-index: 1; pointer-events: none; overflow: hidden; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 115%, oklch(62% 0.13 50 / 0.35), transparent 60%), linear-gradient(180deg, oklch(16% 0.05 280 / 0.62), oklch(22% 0.06 300 / 0.42));
  transition: opacity 1.4s ease 0.15s; }
.rd-sweep { position: absolute; inset: -20% -60%; background: linear-gradient(100deg, transparent 38%, oklch(96% 0.08 86 / 0.55) 50%, transparent 62%); transform: translateX(-70%); opacity: 0; }
.rd-gatewrap.is-open .rd-veil { opacity: 0; }
.rd-gatewrap.is-open .rd-sweep { animation: rd-sweep 1.3s 0.1s cubic-bezier(.3,.6,.3,1) both; }
@keyframes rd-sweep { 0% { transform: translateX(-70%); opacity: 1; } 100% { transform: translateX(70%); opacity: 1; } }

/* brass stanchions */
.rd-post { position: absolute; z-index: 4; top: calc(14px + 30%); bottom: 4px; width: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #5e4113, #b98f38 28%, #fbe7a6 46%, #c9a14a 64%, #5e4113);
  box-shadow: 0 10px 18px oklch(8% 0.03 280 / 0.55);
  transition: transform 0.75s cubic-bezier(.55,0,.8,.2), opacity 0.6s ease 0.15s; }
.rd-post-l { left: -17px; }
.rd-post-r { right: -17px; }
.rd-knob { position: absolute; left: 50%; top: -13px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe8, #f0cf78 30%, #a67b25 72%, #5e4113); box-shadow: 0 3px 6px oklch(8% 0.03 280 / 0.45); }
.rd-base { position: absolute; left: 50%; bottom: -7px; width: 40px; height: 12px; margin-left: -20px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 25%, #fbe7a6, #b88a2c 50%, #4d350f); box-shadow: 0 4px 8px oklch(8% 0.03 280 / 0.5); }
.rd-post-down { transform: translateY(60px) scaleY(0.3); opacity: 0; }

.rd-rope { position: absolute; z-index: 5; pointer-events: none; }

/* the park sign hanging off the rope */
.rd-sign { position: absolute; left: 0; top: 0; z-index: 6; transform-origin: 50% 0; will-change: transform;
  min-width: 190px; padding: 14px 16px 11px; border: 0; border-radius: 10px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, #27336f, #19224f); color: #fff;
  box-shadow: inset 0 0 0 2px #e8c267, inset 0 0 0 5px #19224f, inset 0 0 0 6px oklch(84% 0.13 86 / 0.5), 0 14px 26px oklch(8% 0.03 280 / 0.55); }
.rd-sign::before, .rd-sign::after { content: ""; position: absolute; top: -10px; width: 2px; height: 12px; background: #d8c49a; }
.rd-sign::before { left: 26%; }
.rd-sign::after { right: 26%; }
.rd-sign b { display: block; font-family: var(--pixel); font-weight: 400; font-size: 9.5px; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 7px; }
.rd-sign span { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; line-height: 1.1; }
.rd-sign small { display: block; margin-top: 6px; font-family: var(--label); font-weight: 700; font-size: 11px; letter-spacing: 0.03em; color: oklch(90% 0.03 90 / 0.85); animation: rd-hint 1.8s ease-in-out infinite; }
@keyframes rd-hint { 50% { opacity: 0.45; } }
.rd-sign:hover { filter: brightness(1.08); }
.rd-sign:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.rd-sign.is-falling small { animation: none; }

/* the title catches the light when the gates open */
.rd-app.rd-is-open .rd-title { animation: rd-title-glow 1.6s 0.2s ease both; }
@keyframes rd-title-glow { 30% { text-shadow: 0 0 18px oklch(90% 0.14 86 / 0.95), 0 0 42px oklch(84% 0.13 86 / 0.7); transform: scale(1.06); } }

/* reduced motion: the gate simply fades */
.rd-gatewrap.is-fading .rd-post, .rd-gatewrap.is-fading .rd-sign { opacity: 0; transition: opacity 0.4s ease; }

/* mute toggle in the header */
.rd-actions [data-rd-mute] svg { width: 17px; height: 17px; }
.rd-actions [data-rd-mute] .off, .rd-actions [data-rd-mute][aria-pressed="true"] .on { display: none; }
.rd-actions [data-rd-mute][aria-pressed="true"] .off { display: block; }

@media (max-width: 400px) {
  .rd-post-l { left: -13px; }
  .rd-post-r { right: -13px; }
  .rd-sign { min-width: 170px; padding: 12px 12px 9px; }
  .rd-sign span { font-size: 17px; }
}

/* ============================================================================
   Split-flap board: tiles are slots on a ride's wait board. Letters flip
   through the alphabet (rope-drop-fx.js), then land in their color. Green
   tiles light up with chasing marquee bulbs; gold tiles glow warm.
   ========================================================================== */
.rd-board .rd-tile {
  --slot-a: #1f2438; --slot-b: #141828;
  position: relative; perspective: 260px; overflow: visible;
  border: 1px solid #2c3352; border-radius: 7px; color: #f4ecd6;
  background: linear-gradient(180deg, var(--slot-a) 0 49.4%, var(--slot-b) 50.6% 100%);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 3px 0 oklch(6% 0.03 280 / 0.55), 0 6px 12px oklch(6% 0.03 280 / 0.25);
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.5);
}
/* the hinge seam across every slot */
.rd-board .rd-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, oklch(0% 0 0 / 0.55), oklch(100% 0 0 / 0.05)); }
.rd-board .rd-tile.rd-filled { border-color: #4a5480; animation: rd-pop 0.12s ease; }

/* the flap halves */
.rd-tile .fl { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.rd-tile .fl b { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; font-weight: 800; }
.rd-tile .fl-top { top: 0; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #262c45, #1c2135); transform-origin: 50% 100%; }
.rd-tile .fl-top b { top: 0; }
.rd-tile .fl-bot { bottom: 0; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #171b2d, #121626); transform-origin: 50% 0; }
.rd-tile .fl-bot b { top: -100%; }
.rd-tile .fl-flap { z-index: 2; box-shadow: 0 0 10px oklch(0% 0 0 / 0.4); }
.rd-tile.rd-flapping { border-color: #3a4266; }

/* landed colors keep the slot's seam and depth */
.rd-board .rd-tile.rd-correct { --slot-a: oklch(70% 0.16 150); --slot-b: oklch(62% 0.16 150); border-color: oklch(78% 0.15 150); color: oklch(20% 0.04 150); text-shadow: 0 1px 0 oklch(100% 0 0 / 0.25); }
.rd-board .rd-tile.rd-present { --slot-a: oklch(86% 0.13 86); --slot-b: oklch(79% 0.13 80); border-color: oklch(90% 0.12 86); color: oklch(26% 0.05 78); text-shadow: 0 1px 0 oklch(100% 0 0 / 0.3);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.3), 0 3px 0 oklch(45% 0.1 70), 0 0 18px oklch(84% 0.13 86 / 0.35); }
.rd-board .rd-tile.rd-absent { --slot-a: #3a3f55; --slot-b: #31354a; border-color: #454b66; color: oklch(82% 0.02 84); }
.rd-board .rd-tile.rd-landed { animation: rd-land 0.32s cubic-bezier(.2,1.6,.4,1); }
@keyframes rd-land { 0% { transform: scale(0.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* marquee bulbs chase around the green tiles */
.rd-board .rd-tile.rd-correct::before {
  content: ""; position: absolute; inset: -5px; border-radius: 10px; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, #fff7d6 0 1.7px, oklch(88% 0.12 90 / 0.5) 2.4px, transparent 3.2px) 0 0 / 7.5px 7.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 3px;
  filter: drop-shadow(0 0 3px oklch(92% 0.12 90 / 0.8));
  animation: rd-chase 0.9s steps(3) infinite;
}
@keyframes rd-chase { to { background-position: 7.5px 7.5px; } }
.rd-board .rd-tile.rd-correct.rd-landed::before { animation: rd-bulbs-on 0.5s ease both, rd-chase 0.9s 0.5s steps(3) infinite; }
@keyframes rd-bulbs-on { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rd-board .rd-tile.rd-correct::before, .rd-board .rd-tile.rd-landed { animation: none; }
}

/* ============================================================================
   The sky behind the board (rope-drop-fx.js sets the --vars per guess)
   ========================================================================== */
.rd-app { position: relative; }
.rd-app > .rd-head, .rd-app > .rd-sub, .rd-app > .rd-board, .rd-app > .rd-gatewrap, .rd-app > .rd-keyboard { position: relative; z-index: 1; }
.rd-sky {
  --sky-top: #070b26; --sky-mid: #161a45; --sky-low: #2d2556; --sil-far: #232452; --sil-near: #0d1030; --cloud: #2a2f5e;
  --sun-y: -0.25; --sun-c: #ff8a5c; --glow: 0; --stars: 1; --lights: 0.9;
  position: absolute; left: -24px; right: -24px; z-index: 0; overflow: hidden; pointer-events: none; border-radius: 22px;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
  -webkit-mask: radial-gradient(ellipse 72% 88% at 50% 58%, #000 62%, transparent 100%);
  mask: radial-gradient(ellipse 72% 88% at 50% 58%, #000 62%, transparent 100%);
}
.rd-stars { position: absolute; inset: 0; opacity: var(--stars);
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent), radial-gradient(1.4px 1.4px at 44% 22%, #fff, transparent),
    radial-gradient(1px 1px at 63% 12%, #fff, transparent), radial-gradient(1.3px 1.3px at 79% 26%, #fff, transparent), radial-gradient(1px 1px at 90% 9%, #fff, transparent),
    radial-gradient(1px 1px at 6% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 94% 44%, #fff, transparent), radial-gradient(1px 1px at 54% 4%, #fff, transparent),
    radial-gradient(1px 1px at 36% 33%, #fff, transparent), radial-gradient(1.1px 1.1px at 71% 38%, #fff, transparent), radial-gradient(1px 1px at 19% 52%, #fff, transparent);
  animation: rd-twinkle 4s ease-in-out infinite alternate; }
@keyframes rd-twinkle { to { filter: brightness(0.6); } }
/* the sun climbs from behind the skyline; its glow warms the whole sky */
.rd-sun { position: absolute; left: 78%; bottom: 0; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0%, var(--sun-c) 55%, transparent 72%);
  box-shadow: 0 0 calc(60px + 80px * var(--glow)) calc(20px + 50px * var(--glow)) color-mix(in oklab, var(--sun-c) calc(var(--glow) * 60%), transparent);
  transform: translateY(calc(10px - var(--sun-y) * 260px)); }
.rd-cloud { position: absolute; height: 18px; border-radius: 20px; background: var(--cloud); opacity: 0.55; filter: blur(3px);
  box-shadow: 18px -8px 0 2px var(--cloud), 40px -2px 0 0 var(--cloud); }
.rd-cloud.c1 { top: 14%; width: 70px; animation: rd-drift 70s linear infinite; }
.rd-cloud.c2 { top: 34%; width: 50px; animation: rd-drift 95s -40s linear infinite; opacity: 0.4; }
.rd-cloud.c3 { top: 8%; width: 60px; animation: rd-drift 120s -80s linear infinite; opacity: 0.35; }
@keyframes rd-drift { from { transform: translateX(-120px); } to { transform: translateX(680px); } }
.rd-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 150px; }
.rd-skyline .far { fill: var(--sil-far); stroke: var(--sil-far); }
.rd-skyline .near { fill: var(--sil-near); stroke: var(--sil-near); }
.rd-skyline path[fill="none"], .rd-skyline circle[fill="none"] { fill: none; }
.rd-wheel { transform-box: view-box; transform-origin: 512px 70px; animation: rd-spin 60s linear infinite; }
.rd-wheel .cars circle { stroke: none; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
.rd-windows { fill: #ffd98a; opacity: var(--lights); filter: drop-shadow(0 0 3px #ffc46b); }
.rd-windows rect:nth-child(3n) { animation: rd-win 3.2s ease-in-out infinite; }
@keyframes rd-win { 50% { opacity: 0.4; } }
/* a win sends a few birds across */
.rd-birds { position: absolute; left: -60px; top: 22%; width: 60px; height: 20px; opacity: 0; }
.rd-sky.is-won .rd-birds { animation: rd-birds 7s 0.8s ease-in-out forwards; }
.rd-birds::before, .rd-birds::after { content: "〰"; position: absolute; font-size: 14px; color: var(--sil-near); transform: scaleY(0.6); }
.rd-birds::after { left: 22px; top: 9px; font-size: 11px; }
@keyframes rd-birds { 0% { opacity: 0; transform: translate(0, 10px); } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { opacity: 0; transform: translate(640px, -30px); } }
@media (prefers-reduced-motion: reduce) { .rd-wheel, .rd-cloud, .rd-stars, .rd-windows rect, .rd-sky.is-won .rd-birds { animation: none; } }
@media (max-width: 540px) { .rd-sky { left: -10px; right: -10px; } }

/* ============================================================================
   Finale: fireworks / confetti / balloons canvas, the stamp, the loss ticket
   ========================================================================== */
.rd-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 900; pointer-events: none; }
.rd-stamp { position: fixed; left: 50%; top: 38%; z-index: 950; transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none;
  padding: 18px 30px 20px; border-radius: 16px; text-align: center; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, #27336f, #19224f);
  box-shadow: inset 0 0 0 3px #e8c267, inset 0 0 0 7px #19224f, inset 0 0 0 8px oklch(84% 0.13 86 / 0.55), 0 24px 60px oklch(6% 0.03 280 / 0.6), 0 0 60px oklch(84% 0.13 86 / 0.35);
  animation: rd-stamp-in 0.6s cubic-bezier(.2,1.6,.35,1) both; }
.rd-stamp p { margin: 0 0 8px; font-family: var(--label); font-weight: 800; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.rd-stamp h2 { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: clamp(16px, 5vw, 26px); line-height: 1.3; color: #fff; text-shadow: 0 3px 0 oklch(30% 0.06 280), 0 0 24px oklch(84% 0.13 86 / 0.7); }
.rd-stamp span { display: block; margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 14.5px; color: oklch(92% 0.03 90 / 0.9); }
.rd-stamp.is-out, .rd-ticket.is-out { animation: rd-out 0.5s ease forwards; }
@keyframes rd-stamp-in { from { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(2.1); } }
@keyframes rd-out { to { opacity: 0; transform: translate(-50%, -60%) rotate(-4deg) scale(0.9); } }

/* a gold admission ticket with punched notches */
.rd-ticket { position: fixed; left: 50%; top: 40%; z-index: 950; transform: translate(-50%, -50%) rotate(-2deg); pointer-events: none; text-align: center;
  width: min(340px, 86vw); padding: 18px 26px 16px; color: #3a2a0c;
  background: linear-gradient(180deg, #f7dd8f, #e3b95a);
  -webkit-mask: radial-gradient(circle 13px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 13px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 20px 30px oklch(6% 0.03 280 / 0.6));
  animation: rd-ticket-in 0.7s cubic-bezier(.2,1.2,.35,1) both; }
.rd-ticket::before { content: ""; position: absolute; inset: 8px 22px; border: 1.5px dashed oklch(40% 0.08 70 / 0.5); border-radius: 6px; pointer-events: none; }
.rd-ticket p { margin: 0 0 8px; font-family: var(--label); font-weight: 800; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.75; }
.rd-ticket > span { display: block; font-family: var(--display); font-weight: 700; font-size: 13.5px; opacity: 0.8; }
.rd-ticket h2 { margin: 6px 0 8px; display: flex; justify-content: center; gap: 6px; }
.rd-ticket h2 i { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: 0.02em; animation: rd-print 0.3s calc(0.45s + var(--i) * 0.07s) ease both; }
.rd-ticket small { display: block; font-size: 11.5px; font-weight: 600; opacity: 0.7; }
@keyframes rd-ticket-in { from { opacity: 0; transform: translate(-50%, 30%) rotate(4deg); } }
@keyframes rd-print { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }

/* the winning row hops in a wave */
.rd-board .rd-tile.rd-dance { animation: rd-dance 0.55s cubic-bezier(.3,1.6,.5,1); }
@keyframes rd-dance { 0% { transform: translateY(0); } 40% { transform: translateY(-16px) scale(1.06); } 70% { transform: translateY(2px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rd-stamp, .rd-ticket, .rd-ticket h2 i, .rd-board .rd-tile.rd-dance { animation: none; } }

/* ============================================================================
   Feel: typed tiles flash like a bulb, backspace snaps shut, bad words flap NOPE,
   keys ripple in their own colour
   ========================================================================== */
.rd-board .rd-tile.rd-typed { animation: rd-typed 0.3s cubic-bezier(.2,1.5,.4,1); }
@keyframes rd-typed {
  0% { transform: scale(0.86); box-shadow: 0 0 0 2px oklch(92% 0.13 88 / 0.95), 0 0 22px oklch(88% 0.14 88 / 0.8); border-color: #f2cf63; }
  60% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.rd-board .rd-tile.rd-backed { animation: rd-backed 0.18s ease; }
@keyframes rd-backed { 0% { transform: scaleY(0.8); } 100% { transform: none; } }
.rd-board .rd-tile.rd-nope { --slot-a: #6b2433; --slot-b: #561a28; border-color: #a33a4f; color: #ffe1e6; }
.rd-tile.rd-nope .fl-top { background: linear-gradient(180deg, #74283a, #62202f); }
.rd-tile.rd-nope .fl-bot { background: linear-gradient(180deg, #521926, #45131f); }
.rd-key { position: relative; overflow: hidden; }
.rd-ripple { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, oklch(100% 0 0 / 0.45), transparent 65%); transform: scale(0); animation: rd-ripple 0.5s ease-out forwards; }
.rd-key.rd-correct .rd-ripple { background: radial-gradient(circle, oklch(92% 0.15 150 / 0.7), transparent 65%); }
.rd-key.rd-present .rd-ripple { background: radial-gradient(circle, oklch(96% 0.12 90 / 0.8), transparent 65%); }
@keyframes rd-ripple { to { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rd-board .rd-tile.rd-typed, .rd-board .rd-tile.rd-backed, .rd-ripple { animation: none; } }

/* ============================================================================
   Split-flap countdown to the next Rope Drop
   ========================================================================== */
.rd-clock { position: relative; z-index: 1; margin: 2px auto 6px; text-align: center; animation: rd-rise-in 0.5s ease both; }
@keyframes rd-rise-in { from { opacity: 0; transform: translateY(10px); } }
.rd-clock-k { margin: 0 0 8px; font-family: var(--label); font-weight: 800; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.rd-clock-row { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 12px; background: #0e1222; box-shadow: inset 0 2px 8px oklch(0% 0 0 / 0.6), 0 0 0 1px #2c3352; }
.rd-clock .rd-cd {
  --slot-a: #1f2438; --slot-b: #141828;
  position: relative; perspective: 200px; display: grid; place-items: center; width: 30px; height: 42px; border-radius: 6px;
  font-family: var(--display); font-weight: 800; font-size: 26px; color: #f4ecd6; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--slot-a) 0 49.4%, var(--slot-b) 50.6% 100%); border: 1px solid #2c3352;
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.06), 0 2px 0 oklch(6% 0.03 280 / 0.55); aspect-ratio: auto; text-shadow: 0 1px 0 oklch(0% 0 0 / 0.5);
}
.rd-clock .rd-cd::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 3; background: linear-gradient(180deg, oklch(0% 0 0 / 0.55), oklch(100% 0 0 / 0.05)); }
.rd-clock .rd-cd .fl-top, .rd-clock .rd-cd .fl-top { border-radius: 6px 6px 0 0; }
.rd-clock .rd-cd .fl-bot { border-radius: 0 0 6px 6px; }
.rd-colon { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--gold); padding: 0 2px; animation: rd-blink 1s steps(1) infinite; }
@keyframes rd-blink { 50% { opacity: 0.35; } }
.rd-clock-u { display: flex; justify-content: center; gap: 44px; margin-top: 6px; font-family: var(--label); font-weight: 700; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rd-clock-go { display: block; margin: 10px auto 0; padding: 11px 18px; border: 0; border-radius: 10px; cursor: pointer; background: var(--gold); color: oklch(24% 0.045 78); font-family: var(--display); font-weight: 800; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .rd-clock, .rd-colon { animation: none; } }

/* ============================================================================
   Stats sheet as a ride pass
   ========================================================================== */
.rd-sheet.rd-pass { padding-top: 0; overflow: hidden; border-color: oklch(84% 0.13 86 / 0.55);
  box-shadow: 0 30px 70px oklch(6% 0.03 280 / 0.6), 0 0 0 1px oklch(84% 0.13 86 / 0.15), 0 0 40px oklch(84% 0.13 86 / 0.12); }
.rd-stub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -24px 18px; padding: 14px 52px 16px 24px;
  background: linear-gradient(180deg, #f7dd8f, #e3b95a); color: #3a2a0c; }
.rd-stub::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 14px;
  background: radial-gradient(circle 6px at 50% 50%, var(--paper-2) 98%, transparent) 0 0 / 18px 14px repeat-x; }
.rd-stub-k { font-family: var(--pixel); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.rd-stub b { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.rd-stub-a { font-family: var(--label); font-weight: 800; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.rd-pass .rd-close { z-index: 2; color: #3a2a0c; top: 13px; }
.rd-pass .rd-stat { position: relative; }
.rd-pass .rd-stat b { font-variant-numeric: tabular-nums; }
.rd-flame { position: absolute; top: -10px; right: calc(50% - 30px - 6px * var(--heat, 0)); width: calc(14px + 10px * var(--heat, 0)); height: calc(19px + 13px * var(--heat, 0));
  transform-origin: 50% 100%; animation: rd-flicker 0.9s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px oklch(75% 0.18 55 / 0.7)); }
.rd-flame[hidden] { display: none; }
.rd-flame svg { width: 100%; height: 100%; display: block; }
@keyframes rd-flicker { 0% { transform: scale(1, 1) rotate(-3deg); } 50% { transform: scale(0.94, 1.06) rotate(2deg); } 100% { transform: scale(1.04, 0.96) rotate(-1deg); } }
.rd-pass .rd-bar { position: relative; overflow: visible; transition: width 0.7s cubic-bezier(.2,.8,.2,1); border-radius: 5px;
  background-image: linear-gradient(90deg, oklch(100% 0 0 / 0.06), transparent); }
.rd-pass .rd-bar.rd-bar-hot { background: repeating-linear-gradient(-45deg, #f2cf63 0 8px, #e8bd4a 8px 16px); color: oklch(24% 0.045 78);
  box-shadow: 0 0 14px oklch(84% 0.13 86 / 0.5); background-size: 22.6px 22.6px; animation: rd-meter 1.2s linear infinite; }
@keyframes rd-meter { to { background-position: 22.6px 0; } }
.rd-pass .rd-bar[data-today]::after { content: attr(data-today); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  font-family: var(--label); font-weight: 800; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .rd-flame, .rd-pass .rd-bar.rd-bar-hot { animation: none; } }
.rd-pass .rd-bar.rd-today-in::after { left: 8px; color: oklch(30% 0.06 70); }

/* ============================================================================
   Ticket-booth keyboard: enamel keycaps in brass rims on a booth counter
   ========================================================================== */
.rd-keyboard { gap: 8px; margin-top: auto; padding: 16px 10px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #1c2138, #13172a);
  box-shadow: inset 0 2px 0 #c9a14a, inset 0 3px 0 #6d4c16, inset 0 -1px 0 oklch(100% 0 0 / 0.05), 0 14px 30px oklch(6% 0.03 280 / 0.45); }
.rd-keyboard .rd-krow { gap: 6px; }
.rd-keyboard .rd-key {
  --cap-a: #2b3150; --cap-b: #20253d; --cap-ink: #f1e9d2; --rim: #b98f38; --depth: #0d1020;
  min-height: 54px; border-radius: 9px; border: 0; color: var(--cap-ink);
  font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--cap-a), var(--cap-b)) padding-box, linear-gradient(180deg, #fbe7a6, var(--rim) 45%, #5e4113) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 0 var(--depth), 0 6px 10px oklch(0% 0 0 / 0.35), inset 0 1px 0 oklch(100% 0 0 / 0.12);
  text-shadow: 0 1px 0 oklch(0% 0 0 / 0.45);
  transform: translateY(0); transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.15s ease; }
.rd-keyboard .rd-key:hover:not(:disabled) { filter: brightness(1.12); }
.rd-keyboard .rd-key:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--depth), 0 2px 4px oklch(0% 0 0 / 0.35), inset 0 1px 0 oklch(100% 0 0 / 0.08); }
.rd-keyboard .rd-key.rd-correct { --cap-a: oklch(70% 0.16 150); --cap-b: oklch(60% 0.16 150); --cap-ink: oklch(20% 0.04 150); --depth: oklch(38% 0.1 150); text-shadow: 0 1px 0 oklch(100% 0 0 / 0.3); }
.rd-keyboard .rd-key.rd-present { --cap-a: oklch(87% 0.13 86); --cap-b: oklch(78% 0.13 80); --cap-ink: oklch(26% 0.05 78); --depth: oklch(52% 0.1 70); text-shadow: 0 1px 0 oklch(100% 0 0 / 0.35);
  box-shadow: 0 4px 0 var(--depth), 0 0 16px oklch(84% 0.13 86 / 0.4), inset 0 1px 0 oklch(100% 0 0 / 0.3); }
.rd-keyboard .rd-key.rd-absent, .rd-keyboard .rd-key.rd-dead { --cap-a: #22263a; --cap-b: #1b1e2f; --cap-ink: oklch(55% 0.02 280); --rim: #5b4a2a; opacity: 1; box-shadow: 0 1px 0 var(--depth); transform: translateY(3px); text-shadow: none; }
/* Enter is the big red GO button; backspace is all brass */
.rd-keyboard .rd-key[data-key="enter"] { --cap-a: #d8434f; --cap-b: #a82836; --cap-ink: #fff4e4; --depth: #5e1019; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.rd-keyboard .rd-key[data-key="back"] { --cap-a: #e2c06c; --cap-b: #b98f38; --cap-ink: #3a2a0c; --depth: #5e4113; font-size: 20px; text-shadow: 0 1px 0 oklch(100% 0 0 / 0.35); }
@media (max-width: 420px) {
  .rd-keyboard { padding: 12px 5px 10px; border-radius: 14px; }
  .rd-keyboard .rd-krow { gap: 4px; }
  .rd-keyboard .rd-key { min-height: 52px; font-size: 15px; border-radius: 7px; }
}