/* The round house screen: a 480x480 circle on a HyperPixel Round. On a bigger monitor it shows as a circle in the middle. */
html, body.kiosk { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; user-select: none; -webkit-user-select: none; cursor: none; -webkit-tap-highlight-color: transparent; }
body.kiosk { display: grid; place-items: center; background-image: none; }
.screen { --s: min(100vw, 100vh); position: relative; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--bg); touch-action: none; }
.track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.3, .7, .2, 1); will-change: transform; }
.track.drag { transition: none; }
.people-cards { display: contents; }
.card { position: relative; flex: 0 0 var(--s); width: var(--s); height: 100%; overflow: hidden; display: grid; justify-items: center; align-content: center; text-align: center; color: #fff; }

/* Race card: the banner fills the whole circle */
.race-hero { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; border-radius: 0; cursor: none; }
.rh-head { top: 40px; }
.rh-title { font-size: 25px; }
.rh-crown-top { font-size: 24px; }
.rh-lead { margin-top: 6px; padding: 3px 12px; font-size: 13px; }
.rh-wx-chip { top: auto; left: 50%; bottom: 40px; transform: translateX(-50%); }

/* Total cards */
.k-name { font-size: 22px; font-weight: 800; letter-spacing: .04em; margin-top: 30px; }
.k-ring { position: relative; width: 246px; height: 246px; margin-top: 6px; }
.k-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.k-ring .bg { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 12; }
.k-ring .fg { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .8s ease; }
.k-ring img, .k-ring .k-init { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; object-fit: cover; }
.k-ring .k-init { display: grid; place-items: center; font-size: 90px; font-weight: 900; color: #fff; background: var(--c); }
.k-ring .k-mid { position: absolute; inset: 0; display: grid; place-content: center; }
.k-ring .k-mid b { font-size: 38px; font-weight: 900; line-height: 1; }
.k-ring .k-mid span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 6px; }
.k-total { font-size: 38px; font-weight: 900; line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums; }
.k-sub { font-size: 14px; color: rgba(255, 255, 255, .72); margin-top: 3px; }
.k-up { color: var(--up); font-weight: 700; }
.k-down { color: #ff7a8a; font-weight: 700; }

/* Dots along the bottom curve, toast and notes */
.dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; pointer-events: none; z-index: 5; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.dots i.on { background: #fff; transform: scale(1.25); }
.toast, .note { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; padding: 8px 16px; border-radius: 99px; background: rgba(7, 20, 38, .9); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.toast { top: 50%; margin-top: -20px; }
.note { bottom: 36px; font-size: 12px; font-weight: 600; max-width: 70%; white-space: normal; text-align: center; border-radius: 16px; }
.toast[hidden], .note[hidden] { display: none; }

/* Old, slow Pis (one core): keep the slide, drop the endless background animation */
.lite *, .lite *::before { animation: none !important; }
.lite .rh-fx, .lite .rh-wx { display: none; }