/* ============ shared: Samsung fonts and B2B Connect 2026 tokens ============ */
@font-face { font-family: 'SamsungSharpSans'; src: url('assets/fonts/SamsungSharpSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'SamsungSharpSans'; src: url('assets/fonts/SamsungSharpSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'SamsungOne'; src: url('assets/fonts/SamsungOne-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SamsungOne'; src: url('assets/fonts/SamsungOne-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --glow: #0042d2; --mid: #002eab; --edge: #001b80;                   /* stage background, as the QR display */
  --samsung-blue: #0033a0; --samsung-blue-deep: #001f6b; --samsung-blue-pale: #eaf2ff;
  --gold: #f7d046; --red: #e84c3d;                                      /* gold: winner moments only */
  --ink: #0b0d10; --muted: #6f7782; --line: #dde1e7; --surface-alt: #f7f8fa;
  --ok: #16a34a; --warn: #b45309; --danger: #dc2626;
  --head: 'SamsungSharpSans', 'SamsungOne', system-ui, sans-serif;
  --body: 'SamsungOne', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
[hidden] { display: none !important; }   /* the hidden attribute always wins over a component's display */

/* ============ drum ============ */
.drum { position: absolute; left: 2vw; top: 13vh; width: 58vw; height: 90vh; perspective: 150vh; transition: opacity .35s, transform .9s var(--ease); }
.drum.faded { opacity: 0; }
.drum .card { position: absolute; left: 6.9%; right: 6.9%; top: 50%; height: 10.5vh; margin-top: -5.25vh; box-sizing: border-box; padding: 0 3vh;
  display: flex; align-items: center; gap: 2vh; border-radius: 2.25vh; border: 1px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .1);
  color: #fff; font: 700 4.1vh/1 var(--body); backface-visibility: hidden; will-change: transform, opacity; }
.drum .name { position: relative; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: filter .5s; }
.drum .country { flex: none; display: inline-flex; align-items: center; padding: .75vh 1.5vh; border-radius: 1.25vh; background: rgb(255 255 255 / .18); font: 400 2.5vh/1 var(--body); }
.flag { flex: none; height: 1em; aspect-ratio: 4 / 3; margin-right: .45em; border-radius: .14em; object-fit: cover; vertical-align: -.14em; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); }
.flag[hidden] { display: none; }
.drum .card.on { background: #fff; border-color: #fff; color: var(--samsung-blue); }
.drum .card.on .country { background: var(--samsung-blue-pale); color: var(--samsung-blue); }
.drum .card.landed { box-shadow: 0 0 0 .5vh rgb(255 255 255 / .55); }
.drum .card.win { outline: .6vh solid var(--gold); outline-offset: .5vh; animation: win-pulse 1.4s ease-in-out infinite; }
@keyframes win-pulse { 50% { outline-offset: 1.25vh; } }
.drum .name::after { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: .6vh; margin-top: -.3vh; background: var(--red); }
/* the line draws in, but vanishes at once: the card is reused for the next name straight after the strike-off */
.drum .card.struck .name::after, .drum .card.absent .name::after { width: 100%; transition: width .45s ease; }
.drum .card.absent { background: rgb(232 76 61 / .3); border-color: var(--red); color: #fff; }
.drum.blurred .name { filter: blur(calc(var(--blur, 1) * 3.75vh)); -webkit-text-stroke: .44vh currentColor; }   /* thicker letters: a smudge you can see but not read */
/* a blurred name vanishes on white, so the centre card turns blue while names are blurred */
.drum.blurred .card.on { background: var(--samsung-blue); border-color: rgb(255 255 255 / .85); color: #fff; }
.drum.blurred .card.on .country { background: rgb(255 255 255 / .2); color: #fff; }
.drum .card.win { transition: background-color .6s, color .6s, border-color .6s; }
.drum.blurred .card.win .name { filter: none; -webkit-text-stroke: 0; transition: filter 2.6s cubic-bezier(.45, 0, .25, 1); }
.drum .card.gone { visibility: hidden !important; }   /* lifted into the spotlight, or struck off */
/* the gold pointers: they breathe while waiting, flick like a wheel's flapper at every card (--kick grows with
   speed) and glow while the drum spins; when it lands they jab at the winner, pulsing */
.pointer { --w: calc(var(--pw) * var(--ps, 1)); --h: calc(var(--ph) * var(--ps, 1));   /* --ps: the Arrow size setting */
  position: absolute; top: 50%; z-index: 5000; width: var(--w); height: var(--h); margin-top: calc(var(--h) / -2);
  filter: drop-shadow(0 0 .8vh rgb(247 208 70 / .6)); transition: transform .16s cubic-bezier(.3, 1.6, .5, 1), filter .3s; }
/* each design's size, and where it pivots (--po: a needle or flapper turns about its hub) */
.drum { --pw: 4.2vh; --ph: 6vh; --po: 0%; }
.drum[data-pointer=blade] { --pw: 11vh; --ph: 3.4vh; }
.drum[data-pointer=needle] { --pw: 11vh; --ph: 5vh; --po: 14%; }
.drum[data-pointer=arrow] { --pw: 10vh; --ph: 4vh; }
.drum[data-pointer=chevrons] { --pw: 8.5vh; --ph: 4.6vh; }
.drum[data-pointer=flapper] { --pw: 7.5vh; --ph: 4.7vh; --po: 23%; }
.drum[data-pointer=gem] { --pw: 7vh; --ph: 5vh; }
.pointer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pointer.right svg { transform: scaleX(-1); }
/* the tip sits just short of the card edge, however long the design */
.pointer.left { left: calc(6.9% - var(--w) - .6vh); transform-origin: var(--po) 50%; animation: ptr-l 1.8s ease-in-out infinite; }
.pointer.right { right: calc(6.9% - var(--w) - .6vh); transform-origin: calc(100% - var(--po)) 50%; animation: ptr-r 1.8s ease-in-out infinite; }
.pointer .c { animation: chev 1s ease-in-out infinite; }
.pointer .c2 { animation-delay: .15s; }
.pointer .c3 { animation-delay: .3s; }
.drum.spinning .pointer .c { animation-duration: .4s; }
@keyframes chev { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* Settings → Pulsing arrows off: no breathing, no pulsing at the winner (a steady jab instead); the flick stays */
.drum.still .pointer, .drum.still .pointer .c { animation: none; }
.drum.still.hit .pointer.left { translate: 1.6vh 0; scale: 1.2; }
.drum.still.hit .pointer.right { translate: -1.6vh 0; scale: 1.2; }
@keyframes ptr-l { 50% { translate: 1.3vh 0; scale: 1.15; } }
@keyframes ptr-r { 50% { translate: -1.3vh 0; scale: 1.15; } }
.drum.tick .pointer.left { transform: rotate(var(--kick, 14deg)); transition-duration: .04s; }
.drum.tick .pointer.right { transform: rotate(calc(var(--kick, 14deg) * -1)); transition-duration: .04s; }
/* at speed the cards outrun a single flick: the flapper chatters between a light touch and its full kick */
.drum.flutter .pointer.left { animation: flutter-l .085s ease-in-out infinite alternate; }
.drum.flutter .pointer.right { animation: flutter-r .085s ease-in-out infinite alternate; }
@keyframes flutter-l { from { transform: rotate(3deg); } to { transform: rotate(var(--kick, 20deg)); } }
@keyframes flutter-r { from { transform: rotate(-3deg); } to { transform: rotate(calc(var(--kick, 20deg) * -1)); } }
.drum.spinning .pointer { animation-duration: .5s; filter: drop-shadow(0 0 1.8vh rgb(247 208 70 / .95)) brightness(1.15); }
.drum.hit .pointer { filter: drop-shadow(0 0 2.6vh var(--gold)) brightness(1.25); }
.drum.hit .pointer.left { animation: hit-l .55s cubic-bezier(.3, 1.6, .5, 1) infinite alternate; }
.drum.hit .pointer.right { animation: hit-r .55s cubic-bezier(.3, 1.6, .5, 1) infinite alternate; }
@keyframes hit-l { from { translate: 2.4vh 0; scale: 1.35; } to { translate: .6vh 0; scale: 1.1; } }
@keyframes hit-r { from { translate: -2.4vh 0; scale: 1.35; } to { translate: -.6vh 0; scale: 1.1; } }
.confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* ============ stage ============ */
body.stage { margin: 0; height: 100vh; overflow: hidden; color: #fff; font-family: var(--body); user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse 80% 70% at 50% 38%, var(--glow) 0%, var(--mid) 48%, var(--edge) 100%); }
body.stage.idle-cursor, body.stage.idle-cursor * { cursor: none; }
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.glow { position: absolute; inset: -10%; background: radial-gradient(circle at 50% 36%, rgb(60 120 255 / .42), transparent 52%); }
.cloud-wrap { position: absolute; }
.cloud-wrap img { display: block; width: 100%; opacity: .5; animation: drift 9s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.cloud-tl { top: 1%; left: -5vw; width: 34vw; }
.cloud-tl2 { top: 27%; left: -4.5vw; width: 14vw; }
.cloud-tr { top: 2%; right: -5vw; width: 27vw; }
.cloud-tl img, .cloud-tl2 img { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%); mask-image: linear-gradient(to right, transparent, #000 8%); }
.cloud-tl2 img { animation-duration: 7.5s; }
.cloud-tr img { -webkit-mask-image: linear-gradient(to left, transparent, #000 8%); mask-image: linear-gradient(to left, transparent, #000 8%); animation-name: drift-r; animation-duration: 10s; }
@keyframes drift { to { transform: translate(2vw, -.5vh); } }
@keyframes drift-r { to { transform: translate(-2vw, .4vh); } }
.skyline { position: absolute; left: 50%; bottom: 0; display: block; width: max(100vw, calc(30vh * 3.057)); aspect-ratio: 3.057; transform: translateX(-50%); opacity: .3; transition: opacity .8s; }
body.blank .skyline { opacity: .55; }
/* the draw: the scenery dims to a deep navy (B2BConnectQR's blue hour) so the names and finalists read; the title and
   intermission screens keep it bright */
.sky::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .8s;
  background: linear-gradient(to bottom, rgb(3 10 52 / .62), rgb(4 14 70 / .42) 45%, rgb(3 10 52 / .66)); }
body:not(.blank) .sky::after { opacity: 1; }
body:not(.blank) .skyline { opacity: .16; }

/* the heading (Settings → Titles): Samsung Sharp title, SamsungOne subtitle */
.brand { position: fixed; left: 50%; top: 6vh; z-index: 2; margin: 0; max-width: 92vw; transform: translateX(-50%); pointer-events: none; text-align: center;
  color: #fff; font-size: 4.6vh; transition: top .9s var(--ease), font-size .9s var(--ease); text-shadow: 0 .3vh 2vh rgb(0 20 120 / .35); }
.brand-title { display: block; font: 700 1em/1.12 var(--head); letter-spacing: -.01em; white-space: nowrap; }
.brand-sub { display: block; margin-top: .25em; font: 500 .74em/1.2 var(--body); letter-spacing: .02em; opacity: .95; }
.brand-sub[hidden] { display: none; }
body.blank .brand { top: 24vh; font-size: 9vh; }
body.blank:has(.holding-title.big) .brand { top: 9vh; font-size: 6.4vh; }   /* make room for the big opening line */

.draw { position: fixed; inset: 0; transition: opacity .6s; }
body.blank .draw, body.blank .hero, body.teasing .draw { opacity: 0; pointer-events: none; }
.panel { position: absolute; left: 61vw; top: 27vh; width: 34vw; transform-origin: 100% 0; transition: transform .9s var(--ease); }
/* centre layout while spinning: the drum glides to the middle, the prize shrinks into a top corner, and the
   finalists get their own column beneath it */
.centre-spin .drum, .centre-spin .country-banner { transform: translateX(19vw); }
.centre-spin .panel { transform: translate(2vw, -17vh) scale(.5); }
.corner-left .panel { transform-origin: 0 0; }
.centre-spin.corner-left .panel { transform: translate(-58vw, -17vh) scale(.5); }
.rail-dock { position: absolute; top: 44vh; right: 2vw; width: 18vw; }
.corner-left .rail-dock { right: auto; left: 2vw; }
.rail-dock .finalists { margin: 0; }
.panel-prize { margin: 0; text-align: center; font: 700 5.2vh/1.08 var(--head); letter-spacing: -.015em; overflow-wrap: anywhere; }
.panel-art { height: 28vh; margin-top: 2.4vh; transition: height .5s var(--ease); }
.panel.has-finalists .panel-art { height: 13vh; }
.panel-art:has(video:not([hidden])) { height: 46vh; margin-top: -2vh; }
.panel.has-finalists .panel-art:has(video:not([hidden])) { height: 24vh; }
.panel-art video { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2vh 4vh rgb(0 0 0 / .35)); }
.panel-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2vh 4vh rgb(0 0 0 / .35)); animation: nudge 5.5s ease-in-out infinite; }
/* a flat prize picture (no 3D animation) is never still: a slow sway and lift */
@keyframes nudge { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-1.4vh); } }
.finalists { list-style: none; margin: 2vh 0 0; padding: 0; display: grid; gap: .8vh; }
.finalists li { padding: 1vh 1.6vh; border-radius: 1.2vh; background: rgb(4 14 70 / .66); border: 1px solid rgb(255 255 255 / .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 .6vh 2vh rgb(0 0 0 / .25);
  font: 700 2.3vh var(--body); animation: pop-in .5s var(--ease) both; }   /* a frosted navy plate: readable on any background */
.finalists li span { margin-left: 1vh; font-weight: 400; opacity: .8; }
@keyframes pop-in { from { opacity: 0; transform: translateX(3vh) scale(.9); } }
.country-banner { position: absolute; left: 2vw; top: 14vh; width: 58vw; margin: 0; text-align: center; font: 700 6vh var(--head); letter-spacing: -.015em; animation: pop-in .6s var(--ease) both; transition: transform .9s var(--ease); }
.country-banner[hidden] { display: none; }

/* the winner's pill, front and centre: lifted off the drum (spotlight.js), glowing gold; for a no-show it is struck
   through in red and shatters */
.spotlight { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; pointer-events: none; }
.spotlight[hidden] { display: none; }
.spotlight::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgb(0 20 110 / .3), rgb(0 10 60 / .8)); }
.spotlight.on::before { opacity: 1; }
.spot-pill { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.2vh; max-width: 84vw; box-sizing: border-box;
  padding: 4.5vh 8vh 4vh; border-radius: 5vh; background: #fff; color: var(--samsung-blue); text-align: center;
  box-shadow: 0 0 0 .8vh var(--gold), 0 0 8vh 2vh rgb(247 208 70 / .5), 0 4vh 10vh rgb(0 0 0 / .45); }
.spotlight.on .spot-pill { animation: spot-glow 1.6s ease-in-out 1s infinite, spot-nudge 3.2s ease-in-out .95s infinite; }
/* the winner's card wiggles as it lands, then gives a little nudge every few seconds */
@keyframes spot-nudge { 0%, 26%, 100% { rotate: 0deg; scale: 1; } 6% { rotate: -3deg; scale: 1.06; } 12% { rotate: 2.6deg; scale: 1.05; } 18% { rotate: -1.4deg; scale: 1.02; } }
@keyframes spot-glow { 50% { box-shadow: 0 0 0 1.2vh var(--gold), 0 0 13vh 4vh rgb(247 208 70 / .75), 0 4vh 10vh rgb(0 0 0 / .45); } }
.spot-name { position: relative; font: 700 11vh/1.05 var(--head); letter-spacing: -.02em; overflow-wrap: anywhere; }
.spot-country { display: inline-flex; align-items: center; padding: 1vh 2.4vh; border-radius: 1.6vh; background: var(--samsung-blue-pale); font: 500 3.6vh var(--body); }
.spot-country[hidden] { display: none; }
/* not here: a red marker pen strikes the name out, there and back (spotlight.js PEN) */
.spot-name .pen { position: absolute; left: -5%; top: 30%; width: 110%; height: 46%; overflow: visible; pointer-events: none; filter: drop-shadow(0 .3vh .6vh rgb(160 20 20 / .35)); }
.spot-name .pen path { fill: none; stroke: #e0261b; stroke-width: 1.9vh; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: pen-draw .34s cubic-bezier(.5, 0, .7, 1) forwards; }
.spot-name .pen path + path { stroke-width: 1.5vh; opacity: .92; animation-delay: .3s; animation-duration: .3s; }
@keyframes pen-draw { to { stroke-dashoffset: 0; } }
.spotlight.on .spot-pill.struck { animation: none; box-shadow: 0 0 0 .8vh var(--red), 0 4vh 10vh rgb(0 0 0 / .45); }
.spotlight.on .spot-pill.poof { animation: poof .42s ease-in forwards; }
@keyframes poof { 0% { transform: scale(1); opacity: 1; filter: blur(0); } 35% { transform: scale(1.14); opacity: .95; } 100% { transform: scale(.35) rotate(-8deg); opacity: 0; filter: blur(1.4vh); } }
.holding { position: fixed; left: 0; right: 0; top: 50vh; z-index: 2; text-align: center; transition: opacity .6s; }   /* over the dancers' jumps */
body:not(.blank) .holding, body:has(.gate:not([hidden])) .holding { opacity: 0; pointer-events: none; }
.holding-title { margin: 0; font: 500 3.6vh var(--head); opacity: .92; }
/* the opening "Lucky Draw": letters bounce in one by one, a shine sweeps across them, they bob, and sparkles
   twinkle. The entrance replays whenever the holding screen comes up (blank on, gate gone). */
.holding:has(.big) { top: 31vh; }
.holding-title.big { position: relative; display: inline-block; white-space: nowrap; font: 700 20vh/1.05 var(--head); letter-spacing: -.035em; opacity: 1;
  filter: drop-shadow(0 .8vh 3vh rgb(0 30 190 / .6)); }
.holding-title.big span { display: inline-block; white-space: pre; color: transparent; -webkit-background-clip: text; background-clip: text;
  padding: 0 .12em .22em; margin: 0 -.12em -.22em;   /* room for glyphs that reach outside their box (y, k, w), else the shine crops them */
  background-image: linear-gradient(105deg, #fff 35%, #9ecbff 47%, #fff 52%, #fff); background-size: 320% 100%; background-position: 100% 0; }
body.blank:not(:has(.gate:not([hidden]))) .holding-title.big span {
  animation: ld-pop .9s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .07s) both,
    ld-shine 3.4s ease-in-out calc(1.4s + var(--i) * .06s) infinite,
    ld-bob var(--bob-t, 3s) ease-in-out calc(1s + var(--i) * .13s) infinite; }
.holding-title.big::before, .holding-title.big::after { content: '✦'; position: absolute; color: #fff; opacity: 0; text-shadow: 0 0 2vh #9ecbff; }
.holding-title.big::before { left: -6vh; top: -2vh; font-size: 7vh; }
.holding-title.big::after { right: -5vh; bottom: 0; font-size: 5vh; }
body.blank:not(:has(.gate:not([hidden]))) .holding-title.big::before { animation: ld-twinkle 2.2s ease-in-out 1.2s infinite; }
body.blank:not(:has(.gate:not([hidden]))) .holding-title.big::after { animation: ld-twinkle 2.2s ease-in-out 2.3s infinite; }
@keyframes ld-pop { from { opacity: 0; transform: translateY(10vh) scale(.3) rotate(-14deg); } }
@keyframes ld-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes ld-bob { 50% { translate: 0 calc(var(--bob, 1.4vh) * -1); rotate: var(--rock, 0deg); scale: var(--puff, 1); } }
/* Settings → Opening line movement: how far and how fast the letters bob, rock and swell */
.holding[data-motion="0"] { --bob: 0vh; --bob-t: 3s; }
.holding[data-motion="1"] { --bob: .7vh; --bob-t: 4s; }
.holding[data-motion="2"] { --bob: 1.4vh; --bob-t: 3s; }
.holding[data-motion="3"] { --bob: 2.6vh; --bob-t: 1.7s; --rock: 4deg; --puff: 1.06; }
.holding[data-motion="4"] { --bob: 4vh; --bob-t: 1.05s; --rock: 9deg; --puff: 1.14; }
@keyframes ld-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .holding-title.big span, .holding-title.big::before, .holding-title.big::after { animation: none !important; } }
/* the Just Dance hanbok dancers: a see-through loop along the bottom of the blank screens, with a glow outline */
/* the clips leave room round the dancers (hats at about 36% of the height, feet at --feet, measured per take in
   stage.js): 96vh tall, set so their feet stand on the ground 1.5vh above the foot of the screen, about 48vh tall */
.dancers { position: fixed; left: 50%; bottom: calc(1.5vh - (1 - var(--feet, .87)) * 96vh); z-index: 1; height: 96vh; aspect-ratio: 16 / 9; transform: translateX(-50%); opacity: 0; pointer-events: none;
  transition: opacity .6s; filter: drop-shadow(0 0 .3vh #fff) drop-shadow(0 0 1.8vh rgb(140 190 255 / .9)); }
body.blank:not(:has(.gate:not([hidden]))) .dancers.on { opacity: 1; }
body.with-dancers .holding:has(.big) { top: 27vh; }
body.with-dancers .holding-title.big { font-size: 15vh; }
/* the end screen's roll of winners: solid white cards, so the names read over the skyline from the back of the room */
.winners { list-style: none; margin: 4vh auto 0; padding: 0 4vw; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8vh; }
.winners li { min-width: 22vh; padding: 1.8vh 2.8vh; border-radius: 1.6vh; background: #fff; color: var(--samsung-blue-deep);
  box-shadow: 0 1vh 3vh rgb(0 10 50 / .45); font: 700 3.6vh var(--head); text-align: center; }
.winners li span { display: flex; align-items: center; justify-content: center; gap: .8vh; margin-top: .8vh; color: #3a4a6b; font: 500 2.2vh var(--body); }
.winners li .flag { height: 1.8vh; margin: 0; border-radius: .3vh; }
.winners.many li { min-width: 0; padding: 1.2vh 2vh; font-size: 2.6vh; }   /* more than eight: smaller, so they all fit */
.winners.many li span { font-size: 1.7vh; }

.hero { position: fixed; inset: 0; z-index: 20; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 45%, #0a4be0, var(--edge) 75%); transition: opacity .45s, background .3s; }
.hero[hidden] { display: none; }
.hero.out { opacity: 0; }
.rays { position: absolute; left: 50%; top: 40%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(rgb(255 255 255 / .1) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 45%); mask-image: radial-gradient(circle, #000 0%, transparent 45%);
  animation: spin-rays 50s linear infinite; }
@keyframes spin-rays { to { transform: rotate(360deg); } }
/* one centred stack. Winner: Congratulations! (very big) · product · name · flag + country · wins the prize.
   Teaser: Up next · product · prize name · prize kind */
.hero-stack { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3vh 4vw; text-align: center; }
.hero-stack > * { margin: 0; }
.hero-kicker { font: 400 2.6vh var(--body); opacity: .85; }
.hero.win .hero-kicker { font: 700 13vh/1 var(--head); letter-spacing: -.03em; opacity: 1; text-shadow: 0 1vh 4vh rgb(0 0 0 / .35); }
.hero-img { height: 42vh; max-width: 70vw; margin-top: 3vh; object-fit: contain; filter: drop-shadow(0 3vh 6vh rgb(0 0 0 / .45)); }
.hero.win .hero-img { height: 32vh; margin-top: 3vh; }
/* 3D loops: square frames with room around the product, so they sit a little larger than the flat pictures */
.hero-vid { height: 60vh; aspect-ratio: 1; margin: -2vh 0 -1vh; filter: drop-shadow(0 3vh 5vh rgb(0 0 0 / .4)); }
.hero.win .hero-vid { height: 50vh; margin: -2vh 0 -3vh; }
.hero-title { margin-top: 2.6vh; font: 700 8vh/1.05 var(--head); letter-spacing: -.02em; overflow-wrap: anywhere; }
.hero-sub { margin-top: 1.4vh; display: inline-flex; align-items: center; font: 500 3.8vh var(--head); }
.hero-line { margin-top: .8vh; font: 400 3.2vh var(--body); opacity: .9; }
.hero-kicker:empty, .hero-sub:empty, .hero-line:empty { display: none; }
.hero.show .hero-stack > * { animation: fade-up .7s var(--ease) both; }
.hero.show .hero-vid { animation: hero-in 1.3s var(--ease) .1s both; }
.hero.show .hero-img { animation: hero-in 1.3s var(--ease) .1s both, nudge 5.5s ease-in-out 1.4s infinite; }
.hero.win.show .hero-kicker { animation: pop-big .8s var(--ease) both; }
.hero.show .hero-title { animation-delay: .35s; }
.hero.show .hero-sub { animation-delay: .5s; }
.hero.show .hero-line { animation-delay: .62s; }
@keyframes hero-in { from { opacity: 0; transform: perspective(100vh) rotateY(-50deg) scale(.55); } }
@keyframes pop-big { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.04); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(2vh); } }
/* the curtain between prizes: tiles of the four logo icons stack up over the winner, then fall away onto the next prize */
.curtain-layer { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.curtain { position: absolute; inset: 0; }
body.blank .curtain-layer { display: none; }
/* the stage curtain: its two clips stacked full screen, only the one playing showing */
/* Black Screen: a black sheet over everything on the stage, faded in and out */
#black-screen { position: fixed; inset: 0; z-index: 100000; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
body.black #black-screen { opacity: 1; }
.drape-layer { visibility: hidden; }
.drape-layer.on { visibility: visible; }
.drape-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.drape-layer video.front { opacity: 1; }
.tile { position: absolute; box-sizing: border-box; padding: calc(var(--s) * .03); background: #000a8f; transform: translateY(-130vh); will-change: transform; }   /* solid backing: no gaps between tiles */   /* % padding would follow the screen, not the tile */
.tile svg { display: block; width: 100%; height: 100%; padding: calc(var(--s) * .2); box-sizing: border-box; border-radius: 16%; fill: currentColor; }
.tile.t0 svg { background: #020dcb; color: #fff; }   /* the logo's blues */
.tile.t1 svg { background: #0560f0; color: #fff; }
.tile.t2 svg { background: #9ecbff; color: #020dcb; }
.tile.t3 svg { background: #fff; color: #020dcb; }
.curtain-layer.stack .tile { animation: tile-in .6s var(--in) both; }
.curtain-layer.drop .tile { animation: tile-out .95s cubic-bezier(.55, 0, 1, .45) var(--out) both; }
@keyframes tile-in {
  0% { transform: translateY(-130vh); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  78% { transform: none; animation-timing-function: ease-out; }
  89% { transform: translateY(-1.2vh); animation-timing-function: ease-in; }
  100% { transform: none; } }
@keyframes tile-out { from { transform: none; } to { transform: translate(var(--dx), 130vh) rotate(var(--r)); } }

.gate { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vh;
  border: 0; background: rgb(0 20 90 / .35); color: #fff; font-family: var(--body); cursor: pointer; }
.gate[hidden] { display: none; }
.gate-pill { padding: 1.8vh 3.6vh; border-radius: 99px; background: #fff; color: var(--samsung-blue); font: 700 2.6vh var(--body); animation: breathe 2.4s ease-in-out infinite; }
.gate-sub { font-size: 1.8vh; opacity: .85; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.notice { position: fixed; left: 50%; top: 74%; z-index: 50; max-width: 80vw; padding: 24px 28px; border-radius: 26px; transform: translate(-50%, -50%);
  background: #fff; color: var(--ink); font: 400 16px/1.5 var(--body); text-align: center; }
.notice[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cloud-wrap img, .rays, .panel-art img, .hero.show .hero-img, .pointer, .spotlight.on .spot-pill { animation: none !important; } }

/* ============ console (One UI feel: white cards, 26px corners, pill buttons) ============ */
body.console { margin: 0; background: var(--surface-alt); color: var(--ink); font: 400 15px/1.5 var(--body); }
.bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--line); }
.bar h1 { margin: 0; font: 700 20px var(--head); color: var(--samsung-blue); }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface-alt); color: var(--muted); font-size: 13px; white-space: nowrap; }
.chip.ok { background: #e8f6ee; border-color: #bfe5cf; color: #166534; }
.chip.accent { background: var(--samsung-blue-pale); border-color: #c9dcfb; color: var(--samsung-blue); }
.chip.warn { background: #fff4e0; border-color: #f5d9a8; color: #8a4b00; }
.chip-btn { cursor: pointer; font: inherit; font-size: 13px; }
.chip-btn[aria-pressed="true"] { background: var(--samsung-blue); border-color: var(--samsung-blue); color: #fff; }
.tabs { display: flex; gap: 4px; padding: 12px 24px 0; }
.tabs button { padding: 10px 18px; border: 0; border-radius: 99px; background: transparent; color: var(--muted); font: 700 14px var(--body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--samsung-blue); color: #fff; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 40%); gap: 20px; align-items: start; padding: 16px 24px 40px; }
body[data-tab="people"] .layout, body[data-tab="prizes"] .layout { grid-template-columns: minmax(0, 1fr); }
body[data-tab="people"] .preview, body[data-tab="prizes"] .preview { display: none; }
.preview { position: sticky; top: 80px; }
/* debug: the scene jumper under the stage preview */
.debug { margin-top: 14px; padding: 12px 14px; border: 2px dashed #f0b500; border-radius: 14px; background: #fffaf0; font-size: 13px; }
.debug-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.debug-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 7px 0; border-top: 1px solid #f3e3bf; }
.debug-prize { padding-top: 4px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.debug-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.debug .btn.small { padding: 4px 10px; font-size: 12px; }
.debug .btn.accent { border-color: #b45309; color: #8a4b00; }
.mirror { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: var(--edge); }
.mirror iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .4)); pointer-events: none; }
.box { padding: 20px 22px; border-radius: 26px; background: #fff; box-shadow: 0 1px 2px rgb(11 13 16 / .05), 0 8px 28px rgb(0 51 160 / .06); }
.box + .box { margin-top: 16px; }
.box h2 { margin: 0; font: 700 24px/1.2 var(--head); }
.box h3 { margin: 0; font: 700 16px var(--head); }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1px solid var(--samsung-blue); border-radius: 99px; background: #fff; color: var(--samsung-blue); font: 700 14px var(--body); white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--samsung-blue-pale); }
.btn.primary { background: var(--samsung-blue); color: #fff; }
.btn.primary:hover { background: var(--samsung-blue-deep); }
.btn.big { padding: 16px 26px; font-size: 19px; }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn.ghost { border-color: transparent; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.play { padding: 7px 13px; font-size: 13px; }
/* the console's yes/no questions (LD.ask): in the page, so the stage window keeps its fullscreen */
dialog.ask { max-width: 440px; padding: 24px; border: 0; border-radius: 18px; box-shadow: 0 20px 60px rgb(0 0 0 / .25); font: 15px/1.45 var(--body); color: var(--ink); }
dialog.ask::backdrop { background: rgb(10 20 60 / .35); }
dialog.ask p { margin: 0 0 18px; }
dialog.ask .actions { display: flex; justify-content: flex-end; gap: 10px; }
dialog.ask.code-ask::backdrop { background: rgb(10 20 60 / .5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
dialog.ask input.code { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: 18px/1.2 var(--body); letter-spacing: .2em; }
dialog.ask .code-note { min-height: 1.45em; margin: 6px 0 12px; color: var(--danger); font-size: 13px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.redo { border-color: #0f8a6c; color: #0f8a6c; }   /* teal: it only shows after an undo */
.btn.redo:hover { background: #e6f6f1; }
.btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn:focus-visible, .tabs button:focus-visible, .chip-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--samsung-blue); outline-offset: 2px; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], select, textarea {
  min-width: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; }
textarea { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, monospace; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
/* Live: the round's facts on top, then a tinted strip with the progress track and the buttons */
.round-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.round-head > div:first-child { min-width: 0; }
.round-head #round-label { margin: 0 0 4px; font-size: 13px; }
.round-head .chips { margin: 0 0 2px auto; }
/* Online: which device may change the show. Cobalt when it's this one; grey, with the take-over button, when it isn't */
.control-banner { display: flex; align-items: center; gap: 12px; min-height: 30px; margin-bottom: 16px; padding: 6px 6px 6px 16px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface-alt); color: var(--muted); font-weight: 700; font-size: 14px; }
.control-banner.mine { border-color: var(--samsung-blue); background: var(--samsung-blue); color: #fff; }
.control-banner .btn { margin-left: auto; }
/* the link (console.js renderControl): amber while it's down, green for a moment once it's back and the show re-read */
.control-banner[data-link=down] { border-color: var(--warn); background: #fff7e6; color: var(--warn); }
.control-banner[data-link=synced] { border-color: var(--ok); background: #ecfdf3; color: var(--ok); }
@property --hold { syntax: '<number>'; inherits: true; initial-value: 0; }   /* LD.hold's progress, 0 to 1 */
#control-take[data-mode="hold"] { background: linear-gradient(90deg, var(--samsung-blue-pale) calc(var(--hold) * 100%), #fff 0); touch-action: none; user-select: none; }
.control-strip { margin-top: 18px; padding: 4px 18px 18px; border-radius: 16px; background: #f3f6fc; }
.control-strip .actions { margin-top: 18px; }
.hint { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
/* the Live tab's shortcut keys, drawn as keycaps like the guide, in even columns */
.shortcuts { display: flex; align-items: center; gap: 8px 14px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.shortcuts-title { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.shortcuts ul { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.shortcuts li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.shortcuts kbd { min-width: 20px; padding: 0 5px; font-size: 11px; }
kbd { display: inline-block; min-width: 24px; padding: 0 7px; border: 1.5px solid #c9ced6; border-bottom-width: 3px; border-radius: 6px;
  background: #fff; color: var(--samsung-blue); font: 700 12px/1.6 var(--body); text-align: center; white-space: nowrap; }
/* the "Run from your phone" card: online only, and not on the phone itself */
body.phone .phone-toggle, body.phone .phone-details { display: none; }   /* the phone has its own banner */
.phone-toggle { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--samsung-blue); cursor: pointer; }   /* in the control banner, after the text and any take-control button */
#control-take:not([hidden]) ~ .phone-toggle { margin-left: 0; }
.phone-toggle:hover, .phone-toggle[aria-expanded="true"] { background: var(--samsung-blue-pale); box-shadow: 0 0 0 2px var(--samsung-blue); }
.phone-toggle:focus-visible { outline: 2px solid var(--samsung-blue); outline-offset: 2px; }
.phone-details { display: flex; align-items: center; gap: 14px; margin: -6px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: 13px; }
.phone-details[hidden] { display: none; }
.phone-details p { margin: 2px 0 6px; }
.phone-details code { font-size: 12px; word-break: break-all; }
.phone-qr { flex: none; width: 96px; height: 96px; }
.phone-qr svg { display: block; width: 100%; height: 100%; }
.warn-text { margin: 10px 0 0; color: var(--warn); font-size: 14px; }
.warn-text:empty { display: none; }
.warn-list { margin: 12px 0 0; padding-left: 18px; color: var(--warn); font-size: 14px; }
.warn-list:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* the round's steps as a progress track: a dot per step on a line, done in green, the current one large and ringed */
.stepper { display: flex; margin: 18px 0 4px; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.stepper li { position: relative; flex: 1; min-width: 0; padding-top: 20px; text-align: center; }
.stepper li::before { content: ''; position: absolute; z-index: 1; top: 3px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--line); }
.stepper li::after { content: ''; position: absolute; top: 7px; right: 50%; width: 100%; height: 2px; background: var(--line); }   /* the line in from the step before */
.stepper li:first-child::after { content: none; }
.stepper li.done { color: var(--ok); }
.stepper li.done::before, .stepper li.done::after, .stepper li.now::after { background: var(--ok); }
.stepper li.now { color: var(--samsung-blue); font-size: 13px; font-weight: 700; }
.stepper li.now::before { top: 0; width: 16px; height: 16px; margin-left: -8px; background: var(--samsung-blue); box-shadow: 0 0 0 4px #cfdcf5; }
.stepper li.brk.now { color: #b45309; }
.stepper li.brk.now::before { background: #f5a623; box-shadow: 0 0 0 4px #fde7c0; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { padding: 8px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 400; text-align: left; }
.table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { width: 72px; }
.table tr.absent-row td { color: var(--muted); }
.won { color: var(--ok); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.filters input[type=search] { width: min(320px, 100%); margin-left: auto; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.form-error { color: var(--danger); font-size: 13px; }
.thumb { display: block; width: 56px; height: 42px; border-radius: 8px; background: var(--edge); object-fit: contain; }
.thumb.empty { display: grid; place-items: center; box-sizing: border-box; border: 1px dashed rgb(255 255 255 / .45); background: transparent; font: 600 11px var(--body); opacity: .85; }
.img-pick:hover .thumb { outline: 2px solid var(--samsung-blue-pale); outline-offset: 2px; }
/* the three stage screens as one segmented group (only one is ever up): joined, they fit beside the main buttons */
.screens { display: inline-flex; margin-left: auto; border: 1px solid var(--samsung-blue); border-radius: 99px; background: #fff; overflow: hidden; }
.screens .btn { padding: 9px 13px; border: 0; border-radius: 0; font-size: 13px; }
.screens .btn + .btn { border-left: 1px solid #c9d6f0; }
.screens .btn:focus-visible { outline-offset: -3px; }
#blank[aria-pressed=true], #intermission[aria-pressed=true], #black[aria-pressed=true] { background: var(--red); color: #fff; }   /* the stage is blanked: hard to miss */
#black[aria-pressed=true] { background: #111; }
/* Live: the blank screens' quick settings */
/* the Live tab's quick settings: one slim line of matching pills */
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.quick label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.quick .toggles { gap: 6px; margin-left: auto; }   /* Music and Sound effects on the right */
.quick input[type=text] { box-sizing: border-box; width: 220px; height: 34px; padding-top: 0; padding-bottom: 0; border-radius: 99px; font-size: 13px; }
.quick .combo input { padding-left: 14px; }
.quick .toggle { box-sizing: border-box; height: 34px; }
.quick select { box-sizing: border-box; width: auto; height: 34px; padding: 0 34px 0 14px; border-radius: 99px; font-size: 13px; appearance: none; -webkit-appearance: none; cursor: pointer; }
/* a dropdown drawn like the intermission line: the same pill, the same ▾, the same list below it */
.menu-btn { position: relative; box-sizing: border-box; height: 34px; min-width: 180px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font: 13px var(--body); text-align: left; white-space: nowrap; cursor: pointer; }
.menu-btn::after { content: '▾'; position: absolute; top: 50%; right: 6px; width: 26px; height: 26px; margin-top: -13px; border-radius: 6px; color: var(--muted); font: 14px/26px Arial, sans-serif; text-align: center; }
.menu-btn:hover::after { background: var(--samsung-blue-pale); color: var(--samsung-blue); }
.menu-btn[aria-expanded="true"] { border-color: var(--samsung-blue); }
.combo.menu .combo-list { right: auto; min-width: 100%; }
.quick .dancer-pick select { color: var(--ink); }
.toggles { display: flex; gap: 6px; }
.toggle { position: relative; padding: 6px 14px; }
.toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }   /* the pill is the switch */
.toggle:has(input:checked) { background: var(--samsung-blue); border-color: var(--samsung-blue); color: #fff; }
.toggle:has(input:focus-visible) { outline: 2px solid var(--samsung-blue); outline-offset: 2px; }
/* Settings sections */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.subtabs button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--muted); font: 600 13px var(--body); cursor: pointer; }
.subtabs button[aria-selected=true] { border-color: var(--samsung-blue); background: var(--samsung-blue); color: #fff; }
.settings-group[hidden] { display: none; }
.order-cell { white-space: nowrap; }
.name-stack { display: grid; gap: 6px; }
.name-stack .tagline { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.drag { display: inline-block; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: grab; font-size: 18px; line-height: 1; opacity: .6; user-select: none; vertical-align: middle; }
.drag:focus-visible { opacity: 1; outline: 2px solid var(--samsung-blue); outline-offset: 2px; }
.move { width: 28px; height: 28px; margin: 0 0 0 2px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--samsung-blue); font-size: 11px; line-height: 1; cursor: pointer; vertical-align: middle; }
.move:hover:not(:disabled) { background: var(--samsung-blue-pale); border-color: var(--samsung-blue); }
.move:disabled { opacity: .3; cursor: default; }
.move:focus-visible { outline: 2px solid var(--samsung-blue); outline-offset: 2px; }
.drag:hover { opacity: 1; }
#prize-table tr.dragging { opacity: .45; }
#prize-table tr.break-row td { background: var(--samsung-blue-pale); border-top: 1px solid #b9cdf2; border-bottom: 1px solid #b9cdf2; }
#prize-table tr.break-row.off td { background: none; border-color: var(--line); opacity: .7; }
/* Live: the planned intermission is coming up, so the operator can't miss it */
.chip.break-soon { animation: break-soon 1.6s ease-in-out infinite; }
@keyframes break-soon { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 176 0 / .6); transform: scale(1); } 50% { background: #ffc21a; border-color: #f0a500; color: #3d2400; box-shadow: 0 0 0 7px rgb(255 176 0 / 0), 0 0 14px rgb(255 194 26 / .7); transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .chip.break-soon { animation: none; } }
.break-pick { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; cursor: pointer; color: var(--samsung-blue); }
.break-row small { color: var(--muted, #555); }
#prize-table tr.drop-above td { box-shadow: inset 0 3px 0 var(--samsung-blue-pale); }
#prize-table tr.drop-below td { box-shadow: inset 0 -3px 0 var(--samsung-blue-pale); }
.img-pick { display: inline-block; cursor: pointer; }
.forced { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.forced input { width: 190px; }
.settings-group + .settings-group { margin-top: 22px; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting.off { opacity: .45; }
.setting small { grid-column: 1; color: var(--muted); font-size: 13px; }
.setting .control { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; }
.setting .control input[type=text] { box-sizing: border-box; width: min(360px, 42vw); height: 34px; padding-top: 0; padding-bottom: 0; border-radius: 99px; font-size: 13px; }   /* the same pills as on Live */
.setting .combo input { padding-left: 14px; }
.settings-group h3 { margin: 30px 0 2px; }                 /* a section's heading sits clear of the row above */
.settings-group h3:first-child { margin-top: 0; }
/* a setting whose control is a row of pictures: text on top, the pictures across the full width below */
.setting.wide { grid-template-columns: minmax(0, 1fr); }
.setting.wide .pick { grid-column: 1; margin-top: 10px; }
.pick { display: grid; gap: 12px; }
.pick.curtains { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pick.arrows { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }   /* the arrows alone, all in one row; the name shows on hover */
.pick-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 13px; color: var(--ink); }
.pick-card:hover { border-color: #b9cdf2; }
.pick-card:has(input:checked) { border-color: var(--samsung-blue); box-shadow: 0 0 0 3px #cfdcf5; }
.pick-card:has(input:checked) span { color: var(--samsung-blue); font-weight: 700; }
.pick-card:has(input:focus-visible) { outline: 2px solid var(--samsung-blue); outline-offset: 2px; }
.pick-card input { position: absolute; opacity: 0; pointer-events: none; }
.pick-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; background: var(--edge); }
.pick.arrows .pick-card { padding: 4px; }
.pick.arrows .pick-card img { aspect-ratio: 5 / 3; object-fit: contain; background: #0a2a9e; }   /* every arrow on the same tile */
.pick.arrows .pick-card span { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5; padding: 4px 9px; border-radius: 6px; background: var(--ink); color: #fff !important; font-weight: 400 !important; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s; }
.pick.arrows .pick-card:hover span, .pick.arrows .pick-card:has(input:focus-visible) span { opacity: 1; transform: translate(-50%, 0); }
.pick-card span { padding: 0 2px 2px; }
/* a text box with its own list of ready-made lines (▾) */
.combo { position: relative; display: inline-flex; }
.combo input { padding-right: 34px; }
.combo-btn { position: absolute; top: 50%; right: 6px; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 14px/26px Arial, sans-serif; cursor: pointer; }
.combo-btn:hover { background: var(--samsung-blue-pale); color: var(--samsung-blue); }
.combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgb(0 0 0 / .12); list-style: none; }
.combo-list li { padding: 7px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; cursor: pointer; }
.combo-list li:hover, .combo-list li.on { background: var(--samsung-blue-pale); color: var(--samsung-blue); }
.setting output { min-width: 72px; font-size: 14px; text-align: right; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 99px; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.toast.show { opacity: 1; }
.toast.error { background: var(--danger); }
.blocked { max-width: 560px; margin: 40px auto; }
.blocked[hidden], .layout[hidden], .tabs[hidden], .tab[hidden] { display: none; }

/* sign-in, used by the console and the online stage */
.sign-in { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--samsung-blue-deep); }
.sign-in[hidden] { display: none; }
/* until the show has loaded (after sign-in, online) the console stays out of sight */
body.booting .bar, body.booting .tabs, body.booting .layout { visibility: hidden; }
.sign-in-card { display: grid; gap: 14px; width: min(380px, calc(100vw - 32px)); box-sizing: border-box; padding: 28px; border-radius: 26px; background: #fff; color: var(--ink); font: 400 15px/1.5 var(--body); }
.sign-in-card h1 { margin: 0; color: var(--samsung-blue); font: 700 22px var(--head); }
.sign-in-card p { margin: 0; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 700; }
.sign-in-error { min-height: 1.2em; color: var(--danger); font-size: 14px; }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 32px; }
  .preview { position: static; order: -1; }
  .bar, .tabs { padding-left: 16px; padding-right: 16px; }
}

/* ============ phone layout (console-remote.js): the console as a remote, dark, in one column ============ */
/* the stage preview between the header and the controls; the bar, the tabs and the laptop's tabs are hidden */
.remote-top, .remote { display: none; }
body.phone { --p-bg: #0b0c0f; --p-raise: #20232a; --p-line: #2d3038; --p-text: #e9ecf2; --p-muted: #9aa1ad;
  --p-accent: #2f6bff; --p-amber: #f5c542; --p-red: #ff5a5f; --p-green: #3ccf7a;
  background: var(--p-bg); color: var(--p-text); color-scheme: dark; -webkit-tap-highlight-color: transparent; }
body.phone .bar, body.phone .tabs, body.phone main, body.phone .preview .hint, body.phone .debug { display: none; }
body.phone .layout { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 480px; margin: 0 auto; padding: 14px 16px 32px; }
body.phone .remote-top, body.phone .remote { display: block; }
body.phone .preview { position: static; order: 0; }
body.phone .mirror { border-radius: 12px; }
.remote-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.remote-head b { font-size: 15px; }
.remote-full { padding: 4px 0; color: var(--p-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
/* the stage chip: a slow breathing dot while the stage is live, red when offline, amber while it waits for its click */
.stage-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border: 1px solid var(--p-line); border-radius: 99px; color: var(--p-muted); font-size: 12px; white-space: nowrap; }
.stage-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-green); animation: p-breathe 2.4s ease-in-out infinite; }
@keyframes p-breathe { 50% { opacity: .3; } }
.stage-chip[data-gate=offline] { border-color: var(--p-red); color: var(--p-red); }
.stage-chip[data-gate=waiting] { border-color: var(--p-amber); color: var(--p-amber); }
.stage-chip[data-gate=offline] .dot, .stage-chip[data-gate=waiting] .dot { background: currentColor; animation: none; }
/* the control banner, moved up from the Live tab: cobalt when this phone is in control */
body.phone .control-banner { flex-wrap: wrap; gap: 8px; min-height: 0; margin: 0 0 10px; padding: 8px 8px 8px 12px; border: 1px solid var(--p-line); border-radius: 14px;
  background: none; color: var(--p-muted); font-size: 13px; }
body.phone .control-banner.mine { min-height: 34px; box-sizing: border-box; border-color: var(--p-accent); color: var(--p-text); }
body.phone .control-banner.mine::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); }
body.phone #control-take { margin-left: auto; padding: 7px 14px; border-color: var(--p-accent); background: none; color: var(--p-text); font-size: 13px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.phone #control-take[data-mode="hold"] { background: linear-gradient(90deg, rgb(47 107 255 / .5) calc(var(--hold) * 100%), transparent 0); }
/* the link: amber with a pulsing dot while it's down, green once it's back and synced */
body.phone .control-banner[data-link=down] { border-color: var(--p-amber); background: none; color: var(--p-amber); }
body.phone .control-banner[data-link=synced] { border-color: var(--p-green); background: none; color: var(--p-green); }
body.phone .control-banner[data-link=down]::before, body.phone .control-banner[data-link=synced]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
body.phone .control-banner[data-link=down]::before { animation: p-breathe 1s ease-in-out infinite; }
/* over the preview: paused on its last frame (greyed) while the link is down, or what the room is missing */
.mirror-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 12px; background: rgb(11 12 15 / .55); color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
.mirror-note[hidden] { display: none; }
.mirror.paused iframe { filter: grayscale(1); }
/* the console can't open (the stage account): readable on the dark page */
body.phone .blocked { margin: 24px 16px; background: var(--p-raise); color: var(--p-text); }
.remote-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin: 8px 2px 12px; color: var(--p-muted); font-size: 12px; }
.remote-now b { color: var(--p-text); font-weight: 400; }
.remote-saver { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 2px 0; cursor: pointer; }
.remote-saver input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 99px; background: var(--p-line); cursor: pointer; transition: background .2s; }
.remote-saver input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--p-text); transition: transform .2s var(--ease); }
.remote-saver input:checked { background: var(--p-accent); }
.remote-saver input:checked::before { transform: translateX(14px); }
.remote-saver input:focus-visible, body.phone .remote button:focus-visible, .remote-full:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
/* every button: raised dark pills; pressed ones shrink a little */
body.phone .remote button { box-sizing: border-box; border: 1px solid var(--p-line); background: var(--p-raise); color: var(--p-text); font: 500 14px var(--body); cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .12s, background .2s, border-color .2s, opacity .2s; }
body.phone .remote button:active:not(:disabled) { transform: scale(.97); }
body.phone .remote button:disabled { opacity: .35; cursor: default; }
.remote-seg { display: flex; gap: 6px; margin-bottom: 12px; }
body.phone .remote-seg button { flex: 1; padding: 8px; border-radius: 99px; }
body.phone .remote-seg button[aria-selected=true] { border-color: var(--p-text); background: var(--p-text); color: var(--p-bg); }
.remote-count { opacity: .6; }
.remote-prize { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 0 2px 8px; color: var(--p-muted); font-size: 12px; }
.remote-break { padding: 2px 8px; border: 1px solid var(--p-amber); border-radius: 99px; color: var(--p-amber); font-size: 11px; white-space: nowrap; }
/* the round's steps: a dot each, filled once done, the current one large and cobalt (amber for the intermission) */
.remote-track { display: flex; margin: 6px 0 14px; padding: 0; list-style: none; }
.remote-track li { flex: 1; padding: 0 2px; color: var(--p-muted); font-size: 11px; line-height: 1.2; text-align: center; }   /* never narrower than its longest word */
.remote-track i { display: block; width: 10px; height: 10px; margin: 0 auto 5px; box-sizing: border-box; border: 1.5px solid var(--p-line); border-radius: 50%; background: var(--p-bg); }
.remote-track .done i { border-color: var(--p-muted); background: var(--p-muted); }
.remote-track .now { color: var(--p-text); }
.remote-track .now i { border-color: var(--p-accent); background: var(--p-accent); transform: scale(1.35); }
.remote-track .brk.now { color: var(--p-amber); }
.remote-track .brk.now i { border-color: var(--p-amber); background: var(--p-amber); }
/* the step button, in the thumb zone. ::before is the fill: the spin's progress (--fill), or a hold (--hold) */
body.phone .remote .remote-go { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; margin-bottom: 10px; overflow: hidden;
  border-color: var(--p-accent); border-radius: 99px; background: var(--p-accent); color: #fff; font-size: 19px; }
.remote-go::before { content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0; width: calc(var(--fill, 0) * 100%); background: rgb(255 255 255 / .2); }
.remote-go[data-kind=hold] { touch-action: none; }
.remote-go[data-kind=hold]::before { width: calc(var(--hold, 0) * 100%); background: rgb(255 255 255 / .3); }
body.phone .remote .remote-go[data-kind=off] { border-color: var(--p-line); background: var(--p-raise); color: var(--p-muted); }
body.phone .remote .remote-go.failed { border-color: var(--p-red); background: var(--p-red); }
.go-lbl { display: block; overflow: hidden; max-width: calc(100% - 96px); text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity .18s, transform .18s; }
.go-lbl.out { opacity: 0; transform: translateY(-8px); }
.go-ring, .go-tick { position: absolute; top: 50%; right: 22px; width: 24px; height: 24px; margin-top: -12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.go-ring circle { stroke-dasharray: 18 39; }
.remote-go.sending .go-ring { opacity: 1; animation: p-ring .8s linear infinite; }
@keyframes p-ring { to { transform: rotate(360deg); } }
.go-tick path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.remote-go.done:not(.sending) .go-tick { opacity: 1; }
.remote-go.done .go-tick path { animation: p-tick .3s ease-out forwards; }
@keyframes p-tick { to { stroke-dashoffset: 0; } }
.remote-go.bounce { animation: p-bounce .4s var(--ease); }
@keyframes p-bounce { 40% { transform: scale(1.04); } }
.remote-go.shake { animation: p-shake .4s; }
@keyframes p-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.remote-row { display: flex; gap: 8px; margin-bottom: 10px; }
body.phone .remote-round { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.remote-round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.phone .remote .remote-not-here { position: relative; isolation: isolate; flex: 1; min-width: 0; height: 48px; overflow: hidden; border-color: var(--p-red); border-radius: 99px; touch-action: none; }
.remote-not-here::before { content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0; width: calc(var(--hold, 0) * 100%); background: rgb(255 90 95 / .4); }
.remote-screens { display: flex; align-items: center; gap: 6px; }
body.phone .remote-screens button:not(.remote-round) { flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; border-radius: 12px; font-size: 13px; }
body.phone .remote-screens button[aria-pressed=true]:not(.remote-toggle) { border-color: var(--p-text); background: var(--p-text); color: var(--p-bg); }
body.phone .remote-toggle { margin-left: auto; color: var(--p-muted); }   /* off: the dark round, muted icon, slashed */
body.phone .remote-toggle + .remote-toggle { margin-left: 0; }
.remote-toggle::after { content: ''; position: absolute; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }
body.phone .remote .remote-toggle { position: relative; }
body.phone .remote .remote-toggle[aria-pressed=true] { border-color: var(--p-accent); background: var(--p-accent); color: #fff; }
.remote-toggle[aria-pressed=true]::after { display: none; }
.remote-warn { margin: 12px 2px 0; color: var(--p-amber); font-size: 13px; line-height: 1.45; }
.remote-warn:empty { display: none; }
.remote-results { margin: 0; padding: 0; list-style: none; }
.remote-results li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--p-line); font-size: 14px; }
.remote-results .r-prize { min-width: 0; color: var(--p-muted); }
.remote-results .r-who { flex: none; max-width: 55%; text-align: right; }
.remote-results .r-who b { display: block; overflow-wrap: anywhere; }
.remote-results .r-who small { color: var(--p-muted); font-size: 12px; }
.remote-empty { margin: 8px 2px; color: var(--p-muted); font-size: 13px; }
/* the toasts slide up from the bottom: the phone's own (with the way back) and the console's */
.remote-toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 11px 16px;
  border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-raise); color: var(--p-text); font-size: 14px; white-space: nowrap; box-shadow: 0 10px 30px rgb(0 0 0 / .45);
  opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .25s, transform .25s var(--ease); }
.remote-toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
body.phone .remote .remote-toast button { margin: -6px -8px; padding: 6px 8px; border: 0; background: none; color: var(--p-accent); font-weight: 700; }
body.phone .toast { bottom: calc(16px + env(safe-area-inset-bottom)); border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-raise); color: var(--p-text); }
body.phone .toast.error { border-color: var(--p-red); background: #3a1517; }
/* Reduce Motion: fills and fades are instant; the ticks and the labels stay */
@media (prefers-reduced-motion: reduce) {
  body.phone *, body.phone *::before, body.phone *::after { transition: none !important; animation: none !important; }
  .remote-go.done .go-tick path { stroke-dashoffset: 0; }
}
@media (max-width: 360px) {   /* an iPhone SE: three pills and two circles still share one row */
  body.phone .remote-screens { gap: 3px; }
  body.phone .remote-screens button:not(.remote-round) { padding: 8px 1px; font-size: 10.5px; }
  body.phone .remote-screens .remote-round { width: 38px; height: 38px; }
}