:root{--bg:#0b0633;--bg2:#1a0f5c;--ink:#fff;--mute:#b9b3e6;--pink:#ff2e88;--yellow:#ffd60a;--cyan:#2de2e6;--card:rgba(255,255,255,.08);--line:rgba(255,255,255,.16);--ok:#3ddc84;--bad:#ff6b6b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);
  background-image:radial-gradient(60vw 60vw at 110% -10%,rgba(255,46,136,.45),transparent 60%),radial-gradient(50vw 50vw at -10% 110%,rgba(45,226,230,.35),transparent 60%),linear-gradient(160deg,var(--bg),var(--bg2));
  background-attachment:fixed;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.05}
.logo{font-weight:900;font-size:1.25rem;letter-spacing:-.02em}
.logo b{color:var(--pink)} .logo i{font-style:normal;color:var(--yellow)}
.mute{color:var(--mute)} .hidden{display:none!important}
button,input,select{font:inherit;color:inherit}
.btn{border:0;border-radius:999px;padding:.9em 1.6em;font-weight:800;background:var(--pink);color:#fff;cursor:pointer;box-shadow:0 6px 0 #a3104f;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a3104f}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.alt{background:var(--card);box-shadow:inset 0 0 0 2px var(--line)}
.btn.big{font-size:1.4rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;backdrop-filter:blur(8px)}
input[type=text],select{width:100%;padding:.85em 1em;border-radius:14px;border:2px solid var(--line);background:rgba(0,0,0,.25);outline:none}
input[type=text]:focus,select:focus{border-color:var(--cyan)}
select option{color:#111}
label{display:block;font-weight:700;font-size:.85rem;margin:0 0 6px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.bar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--yellow),var(--pink));transform-origin:left}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.45em .9em;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:700}
.chip.got{background:var(--ok);color:#06331a;border-color:transparent}
.chip.off{opacity:.4}
.demo{background:var(--yellow);color:#221a00;font-weight:700;text-align:center;padding:6px 12px;font-size:.85rem}

/* ---------- phone ---------- */
.phone{max-width:460px;margin:0 auto;padding:20px 16px 40px;min-height:100vh;display:flex;flex-direction:column;gap:16px}
.phone header{display:flex;justify-content:space-between;align-items:center}
.phone .field{margin-bottom:14px}
.phone #code{text-transform:uppercase;letter-spacing:.3em;font-weight:900;font-size:1.6rem;text-align:center}
.phone .center{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:center}
.phone .huge{font-size:2.4rem}
.or{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--mute);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.or:before,.or:after{content:'';flex:1;height:1px;background:var(--line)}
.char{aspect-ratio:1/1;border-radius:50%;background:#2a2060;display:block;overflow:hidden;flex:none}
/* Idle life: characters standing still breathe and sway a little (each at their own pace, set from chars.js), and now and then
   do a small thing: look around, bounce, stretch, wave or a little dance. Kept early in the file so a game's own animations win. */
.idl>.lbod,.idl>.jmbody{transform-origin:50% 100%;animation:idbreath var(--ib,3.2s) ease-in-out var(--idd,0s) infinite}
.idl>.char{transform-origin:50% 100%;animation:idsway var(--isw,4.6s) ease-in-out var(--idd,0s) infinite}
@keyframes idbreath{0%,100%{scale:1 1}50%{scale:1.025 1.04}}
@keyframes idsway{0%,100%{rotate:-1.8deg}50%{rotate:1.8deg}}
.idl.fid-look>.char{animation:idlook 1.5s ease-in-out}
@keyframes idlook{25%{translate:-7% 0;rotate:-7deg}65%{translate:7% 0;rotate:7deg}}
.idl.fid-bounce>.lbod,.idl.fid-bounce>.jmbody{animation:idbounce .7s ease-in-out 2}
.idl.fid-bounce>.char{animation:idbouncehead .7s ease-in-out 2}
@keyframes idbounce{30%{scale:1.05 .9}60%{scale:.97 1.08}}
@keyframes idbouncehead{30%{translate:0 9%}60%{translate:0 -10%}}
.idl.fid-stretch>.lbod .ca:nth-of-type(3),.idl.fid-stretch>.jmbody i:first-child{animation:idarml 1.7s ease-in-out}
.idl.fid-stretch>.lbod .ca:nth-of-type(4),.idl.fid-stretch>.jmbody i:last-child{animation:idarmr 1.7s ease-in-out}
@keyframes idarml{35%,70%{rotate:155deg}}
@keyframes idarmr{35%,70%{rotate:-155deg}}
.idl.fid-wave>.lbod .ca:nth-of-type(4),.idl.fid-wave>.jmbody i:last-child{animation:idwave 1.7s ease-in-out}
@keyframes idwave{20%{rotate:-150deg}35%{rotate:-118deg}50%{rotate:-150deg}65%{rotate:-118deg}85%{rotate:-150deg}}
.idl.fid-dance>.lbod,.idl.fid-dance>.jmbody{animation:iddance 1.7s ease-in-out}
.idl.fid-dance>.char{animation:iddancehead 1.7s ease-in-out}
.idl.fid-dance>.lbod .ca:nth-of-type(3),.idl.fid-dance>.jmbody i:first-child{animation:iddancel 1.7s ease-in-out}
.idl.fid-dance>.lbod .ca:nth-of-type(4),.idl.fid-dance>.jmbody i:last-child{animation:iddancer 1.7s ease-in-out}
@keyframes iddance{15%,45%,75%{rotate:-6deg}30%,60%,90%{rotate:6deg}}
@keyframes iddancehead{15%,45%,75%{rotate:-9deg;translate:-6% 0}30%,60%,90%{rotate:9deg;translate:6% 0}}
@keyframes iddancel{15%,45%,75%{rotate:120deg}30%,60%,90%{rotate:60deg}}
@keyframes iddancer{15%,45%,75%{rotate:-60deg}30%,60%,90%{rotate:-120deg}}
@media (prefers-reduced-motion:reduce){.idl>*,.idl>.lbod .ca{animation:none!important}}
.char>img,.chin>img{width:100%;height:100%;object-fit:cover;display:block}
.credits{max-width:760px;margin:0 auto;padding:24px 16px 48px}
.credits li{margin:0 0 14px;display:flex;gap:14px;align-items:center}
.credits .char{width:64px;height:64px;flex:none}
.credits a{color:var(--cyan)}
.chargrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.chargrid button{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;font-weight:700;line-height:1.15;text-align:center}
.chargrid .char{width:100%;height:auto;border-radius:50%;box-shadow:0 0 0 3px transparent;transition:transform .1s}
.chargrid button:active .char{transform:scale(.92)}
.chargrid button.mine .char{box-shadow:0 0 0 3px var(--yellow)}
.chargrid button:disabled{cursor:not-allowed;opacity:.3;filter:grayscale(1)}
.mychar .char{width:52px;height:52px}
.phone #me{display:flex;align-items:center;gap:8px}
.phone #me .char{width:28px;height:28px}
.chip .char{width:1.7em;height:1.7em;margin:-.2em 0 -.2em -.45em}
.board .who{display:flex;align-items:center;gap:.5em;min-width:0}
.board .char{width:1.8em;height:1.8em;flex:none}
.winchar .char{width:clamp(120px,18vw,200px);height:auto}
.fb{min-height:1.5em;font-weight:800}
.fb.ok{color:var(--ok)} .fb.close{color:var(--yellow)} .fb.no{color:var(--bad)}
.score{font-size:3rem;font-weight:900;color:var(--yellow)}

/* ---------- host ---------- */
.host{padding:20px clamp(16px,3vw,40px);min-height:100vh;display:flex;flex-direction:column;gap:20px}
.host>header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.roomtag{display:flex;align-items:center;gap:12px;font-weight:700}
.roomtag code{font:900 1.6rem/1 ui-monospace,Menlo,monospace;letter-spacing:.2em;background:var(--yellow);color:#221a00;padding:.25em .5em;border-radius:10px}
.lobby{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;flex:1;align-items:start}
.join h1{font-size:clamp(2rem,5vw,4rem)}
.join .codebig{font:900 clamp(4rem,12vw,9rem)/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:var(--yellow);margin:.1em 0}
.join .url{font-size:1.2rem;word-break:break-all}
.qr{background:#fff;border-radius:16px;padding:10px;width:200px;height:200px;flex:none}
.qr svg{width:100%;height:100%;display:block}
.joinrow{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 16px}
.check{display:flex;gap:.6em;align-items:center;font-weight:600;grid-column:1/-1;text-transform:none;letter-spacing:0;font-size:1rem;color:var(--ink)}
.check input{width:1.2em;height:1.2em;accent-color:var(--pink)}
.lobbyplayers{margin-top:26px}
.lobbyplayers .chip{font-size:1.15rem}
.rehost{margin-top:28px}
.rehost form{display:flex;gap:10px;margin-top:12px;max-width:420px}
.rehost input{text-transform:uppercase;letter-spacing:.3em;font-weight:900;text-align:center}
.btn.small{padding:.55em 1.1em;font-size:.95rem;box-shadow:inset 0 0 0 2px var(--line)}
.note{background:rgba(45,226,230,.14);border:1px solid var(--cyan);border-radius:14px;padding:10px 14px;margin:0 0 14px;font-weight:600}
.players{display:flex;flex-wrap:wrap;gap:8px;min-height:44px}
.game{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(240px,1fr);gap:24px;flex:1;align-items:start}
.stage{position:relative;aspect-ratio:16/9;max-height:41vh;width:100%;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--line)}
.stage #yt,.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stage #yt{pointer-events:none}   /* (the mouse only reaches the song's player while it moves over the stage, or during an ad: see ytCalm) */
.stage.ythot #yt{pointer-events:auto}
.shield{position:absolute;inset:0;z-index:2}
.maskbar{position:absolute;left:0;right:0;height:17%;background:#07042a;z-index:3}
.maskbar.t{top:0}.maskbar.b{bottom:0}
.cover{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;
  background:radial-gradient(circle at 50% 40%,#3b1fa8,#0b0633 70%)}
.cover .q{font-size:clamp(4rem,14vw,10rem);font-weight:900;color:var(--yellow);line-height:1}
.pulse{animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}
.under{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.reveal{margin-top:16px}
.reveal .under{flex-wrap:nowrap;align-items:flex-start;margin-top:0}
.reveal .under>div{min-width:0}
.reveal .btn{flex:none}
.reveal h2{font-size:clamp(1.8rem,3.6vw,3rem);color:var(--yellow)}
.reveal p{font-size:1.4rem;margin:.3em 0 0}
.res{color:var(--cyan);font-weight:700}
.res:empty{display:none}
.board{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.board li{display:flex;justify-content:space-between;gap:10px;padding:.6em .9em;border-radius:12px;background:rgba(0,0,0,.25);font-weight:700}
.board li.got{outline:2px solid var(--ok)}
.board li.off{opacity:.45}
.board .pts{color:var(--ok);font-size:.85em;margin-left:.5em}
.end{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.end h1{font-size:clamp(2.5rem,7vw,5rem)}
.end .board{width:min(520px,100%);font-size:1.3rem}
.end .board li:first-child{background:var(--yellow);color:#221a00;font-size:1.25em}
@media (max-width:820px){.lobby,.game{grid-template-columns:1fr}.host .opts{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.opt{display:flex;align-items:center;gap:.4em;padding:.7em 1em;border-radius:14px;background:var(--card);border:2px solid var(--line);font-weight:800;font-size:1.15rem;text-align:left;min-width:0;overflow-wrap:anywhere}
.opt b{flex:none;color:var(--yellow)}
.opt.right b{color:inherit}
.opt.right{background:var(--ok);color:#06331a;border-color:transparent}
.opt.dim{opacity:.4}
.opt.wrong{background:var(--bad);color:#3a0606;border-color:transparent}
.opt.wrong b{color:inherit}
.opts:empty{display:none}
.rpts{font-size:1.5rem;font-weight:900;margin:.5em 0 0;text-align:center}
.rpts.ok{color:var(--ok)}.rpts.no{color:var(--mute)}
.rpts:empty{display:none}
.phone #ropts{text-align:left}
.solo .rpts{text-align:left}
button.opt{cursor:pointer;width:100%;color:var(--ink)}
button.opt:disabled{cursor:default}
button.opt.picked{border-color:var(--yellow);background:rgba(255,214,10,.22)}
.phone .opts,.solo .opts{grid-template-columns:1fr}
.host .opts{grid-template-columns:repeat(4,1fr);margin-top:28px}
.host .opts:empty{display:none}
.host .opt{font-size:1.05rem;padding:.6em .8em}
.answerline{color:var(--mute);font-weight:700;font-size:1.05rem!important;margin:0 0 .2em!important}
.answerline:empty{display:none}
/* ---------- solo ---------- */
.solo{max-width:860px;margin:0 auto;padding:20px 16px 40px;min-height:100vh;display:flex;flex-direction:column;gap:16px}
.solo>header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sologuess{display:flex;gap:10px;margin:14px 0 4px}
.sologuess input{flex:1;min-width:0}
.solo .reveal .under{flex-wrap:wrap}
.autobox{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.autobox .check{font-size:.95rem;white-space:nowrap}
.autobox #autoleft{min-height:1.3em;font-weight:700;color:var(--yellow)}
.solo .autobox{align-items:flex-start}
.answered{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:18px}
.answered .pl{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;font-weight:700;font-size:.85rem;text-align:center;line-height:1.1;overflow-wrap:anywhere}
.answered .char{width:60px;height:60px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.14);opacity:.6;transition:box-shadow .2s,opacity .2s}
.answered .pl.in .char{box-shadow:0 0 0 5px var(--ok);opacity:1}
.answered .pl.off{opacity:.35}
.solo #hud{display:flex;align-items:center;gap:8px}
.solo #hud .char{width:30px;height:30px}
.solo .chargrid{grid-template-columns:repeat(8,1fr);margin-bottom:4px}
@media (max-width:600px){.solo .chargrid{grid-template-columns:repeat(4,1fr)}}
.recbtn.live{background:var(--bad);box-shadow:0 6px 0 #9c2f2f;animation:pulse .7s ease-in-out infinite alternate}
.opt .char{width:1.8em;height:1.8em;flex:none;margin-right:.2em}
select:disabled{opacity:.4}

/* ---------- games without a shared screen ---------- */
.phone #pstage{border-radius:16px}
.phone #tapplay{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%)}
body.remote .host .stage,body.remote #qtext,body.remote #qopts,body.remote #replay,body.remote .qr,body.remote #newgame+span{display:none}
body.remote .host{max-width:560px;margin:0 auto}
body.remote .lobby,body.remote .game{grid-template-columns:1fr}
body.remote .join .codebig{font-size:clamp(3rem,18vw,5rem)}
.selfplay{width:100%;height:760px;border:1px solid var(--line);border-radius:20px;background:transparent}
.remoteonly{display:none}
body.remote .remoteonly{display:inline-block}
/* during a song the host's phone is their own game with a slim control strip on top */
body.remote .host.ingame{height:100vh;height:100dvh;min-height:0;max-width:none;padding:8px 10px 0;gap:8px}
body.remote .host.ingame>header{display:none}
body.remote .host.ingame #v-game{display:block;flex:none}
body.remote .host.ingame #v-game>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.remote .host.ingame #guessui{flex:1}
body.remote .host.ingame #guessui .bar,body.remote .host.ingame #answered,body.remote .host.ingame .reveal .under>div:first-child,body.remote .host.ingame #err:empty{display:none}
body.remote .host.ingame .under{margin:0;flex-wrap:nowrap}
body.remote .host.ingame #revealui{flex:1;margin:0}
body.remote .host.ingame .autobox{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
body.remote .host.ingame .autobox #autoleft{min-height:0}
body.remote .host.ingame .btn.big{font-size:1rem;padding:.55em 1.2em}
body.remote .host.ingame .selfplay{flex:1;min-height:0;height:auto;border-radius:16px 16px 0 0;border-bottom:0}
body.remote .host.ingame aside{display:none}
body.remote .host.ingame .showboard aside{display:block;position:fixed;inset:12px;z-index:50;overflow:auto;background:#150c4a;cursor:pointer}
body.remote .host.ingame .showboard aside:after{content:'Tap to close';display:block;margin-top:14px;color:var(--mute);font-size:.9rem}
body.embed .phone{min-height:0;padding-top:12px}
.hright{display:flex;align-items:center;gap:10px;min-width:0}
.chatbtn{position:relative;flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.chatbtn svg{width:20px;height:20px}
/* unread messages in the conversation: a green ring that blinks */
.chatbtn.lit{box-shadow:0 0 0 3px var(--ok);animation:chatblink .8s ease-in-out infinite alternate}
@keyframes chatblink{from{box-shadow:0 0 0 3px var(--ok)}to{box-shadow:0 0 0 3px rgba(61,220,132,.12)}}
@media (prefers-reduced-motion:reduce){.chatbtn.lit,.pop{animation:none}}
/* video row (kept as a wrapper so the layout below never moves) */
.stagerow{display:flex;aspect-ratio:16/9;flex:none}
.stagerow #pstage{flex:1;min-width:0;aspect-ratio:auto;height:100%;max-height:none}
/* ---------- chat: a bar at the bottom of the screen ---------- */
.chatbar{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:460px;margin:0 auto;padding:0 10px calc(8px + env(safe-area-inset-bottom));pointer-events:none}
.chatbar>*{pointer-events:auto}
body.haschat .phone{padding-bottom:86px}
#chatform{display:flex;gap:6px;align-items:center;background:#150c4a;border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 -6px 24px rgba(0,0,0,.35)}
#chatform input{flex:1;min-width:0;border:0;background:transparent;padding:.5em .4em;border-radius:0}
#chatform input:focus{border:0}
#chatform .btn{padding:.5em 1em;font-size:.9rem;box-shadow:none}
/* new messages pop up just above the bar and fade after a few seconds */
.chatpop{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-bottom:8px;pointer-events:none}
.pop{display:flex;gap:8px;align-items:center;max-width:92%;background:#fff;color:#14094f;border-radius:16px 16px 16px 4px;padding:6px 12px 6px 6px;box-shadow:0 6px 20px rgba(0,0,0,.4);font-size:.95rem;animation:popin .25s ease-out,popout .5s ease-in 4.5s forwards;overflow-wrap:anywhere}
.pop .char{width:28px;height:28px;flex:none}
.pop b{margin-right:.35em}
@keyframes popin{from{transform:translateY(12px);opacity:0}}
@keyframes popout{to{opacity:0;transform:translateY(-6px)}}
/* the whole conversation opens as a sheet above the bar */
.chatsheet{background:#150c4a;border:1px solid var(--line);border-radius:16px;margin-bottom:8px;max-height:46vh;display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.chathead{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line)}
.chatx{border:0;background:none;color:var(--ink);font-size:1.5rem;line-height:1;padding:2px 10px;cursor:pointer}
.chatlog{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.chatlog:empty:before{content:'No messages yet. Say hi!';color:var(--mute)}
.msg{display:flex;gap:8px;align-items:flex-start;max-width:90%}
.msg .char{width:28px;height:28px;flex:none}
.msg b{display:block;font-size:.72rem;color:var(--mute)}
.msg span{display:block;background:var(--card);border-radius:4px 14px 14px 14px;padding:.4em .7em;overflow-wrap:anywhere}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.msg.mine b{text-align:right}
.msg.mine span{background:var(--pink);border-radius:14px 4px 14px 14px}
.allin{margin:.3em 0 0;font-weight:800;color:var(--yellow);font-size:1.15rem}
.allin:empty{display:none}
.phone .allin{text-align:center;margin:0}
/* host without a screen: avatar first, lobby second */
body.remote.selfpending .lobby{display:none}
/* in the lobby the host's own name and avatar sit on top, in a frame just as tall as its content */
body.remote .host:not(.ingame) .selfplay{order:-1;height:56px;border:0;border-radius:0}
body.remote .host>header{order:-2}
.avatarrow{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
/* ---------- briefing before the first song ---------- */
.brief{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;flex:1;align-items:start}
.brief h1{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:14px}
.briefset{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:0}
.briefset div{background:rgba(0,0,0,.22);border-radius:12px;padding:.55em .8em}
.briefset dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);font-weight:700}
.briefset dd{margin:0;font-weight:800;font-size:1.1rem}
.briefscore{margin:14px 0 0;font-size:1.05rem;color:var(--yellow);font-weight:700}
.phone .briefset dd{font-size:1rem}
@media (max-width:820px){.brief{grid-template-columns:1fr}}
body.remote .brief{grid-template-columns:1fr}
body.remote .host.ingame #autoleft{display:none}   /* shown under the verdict in the host's own game instead */
.solo #autoleft{margin:0}
.avatarrow strong{font-size:1.25rem}
body.embed .phone .center{justify-content:flex-start;gap:8px}
body.embed .phone>header .logo{display:none}
body.embed .phone>header{justify-content:flex-end;min-height:0}
body.embed .phone{padding:4px 2px 12px;gap:10px}
/* ---------- a steady phone layout during a game ---------- */
.phone.ingame .allin{display:block;min-height:1.4em;text-align:left}
.phone.ingame .center{justify-content:flex-start;text-align:left;gap:14px}
.phone.ingame #waittitle,.phone.ingame #qtext,.phone.ingame .verdict{font-size:1.5rem;font-weight:900;line-height:1.05;letter-spacing:-.02em;min-height:2.1em;margin:0}
/* the verdict and the points for this question share the two lines the question had */
.phone.ingame .verdict{min-height:0}
.phone.ingame .vblock{min-height:3.15rem}
.vblock .rpts{font-size:1.15rem;line-height:1.2;margin:.1em 0 0}
.solo .rpts{font-size:1.2rem;margin:.1em 0 0}
.phone.ingame #waitlabel,.phone.ingame #rround,.phone.ingame #roundlabel{min-height:1.2em}
.verdict{font-size:1.4rem}
.barspace{height:10px}
.phone.ingame .rpts{text-align:left}
/* ---------- final scoreboard ---------- */
.finalboard{width:min(560px,100%);gap:8px;text-align:left}
.finalboard li{border:3px solid var(--line);background:linear-gradient(90deg,#1b0f6b,#2a1890);font-size:1.15rem;align-items:center;padding:.5em .8em;transition:border-color .25s,box-shadow .25s}
.finalboard .num{min-width:2.6em;text-align:center;background:#fff;color:#14094f;border-radius:8px;padding:.15em .4em;font-weight:900;font-variant-numeric:tabular-nums}
.finalboard li.reached{border-color:var(--yellow)}
.finalboard li.winner{border-color:var(--ok);box-shadow:0 0 0 3px rgba(61,220,132,.35)}
.finalboard li.me .who{text-decoration:underline;text-underline-offset:4px}
.end .finalboard li:first-child{background:linear-gradient(90deg,#1b0f6b,#2a1890);color:var(--ink);font-size:1.15rem}
.endhead{display:flex;align-items:center;gap:18px;justify-content:center;min-height:5rem;flex-wrap:wrap}
.endhead .winchar .char{width:84px;height:84px}
.phone .finalboard{width:100%}
body.remote .host.ingame #allin{display:none}   /* already shown in the game below */
/* host's own row in the online lobby: just a pill around avatar, name and Edit */
body.embed .phone.compact{padding:2px;gap:0}
body.embed .phone.compact>header,body.embed .phone.compact #waitlabel,body.embed .phone.compact #waittitle,body.embed .phone.compact #waitsub,body.embed .phone.compact .allin{display:none}
body.embed .phone.compact .center{gap:0}
body.embed .phone.compact .avatarrow{display:inline-flex;align-self:flex-start;flex-wrap:nowrap;gap:10px;border:1px solid var(--line);border-radius:999px;padding:5px 8px 5px 5px;background:var(--card)}
body.embed .phone.compact .mychar .char{width:38px;height:38px}
body.embed .phone.compact .avatarrow strong{font-size:1.05rem}
body.embed .demo{display:none}
body.embed{background:transparent}   /* the host page behind the frame provides the background */
body.remote .brief>.card{display:none}   /* the settings and scoring already show in the host's own game above */
.audioonly{position:absolute!important;left:0;top:0;width:4px!important;height:4px!important;min-height:0!important;overflow:hidden;opacity:0;pointer-events:none;display:block!important}
.briefcd{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:900;color:var(--yellow);margin:0 0 14px;text-align:left}
.briefcd:empty{display:none}
.phone .briefcd{text-align:center;margin:0}
body.remote #briefcd{display:none}   /* the countdown already shows in the host's own game above */

.soloprofile{justify-content:flex-start;gap:12px;margin:16px 0 4px}
.soloprofile .mychar .char{width:44px;height:44px}
.soloprofile strong{font-size:1.1rem}
.solo #hud span{font-size:.85rem;line-height:1.25;white-space:nowrap}
.solo #hud b{color:var(--ink)}
/* fanfare is sound only: the video row takes no room, the players fill the top instead */
.stagerow.flat{position:absolute;width:4px;height:4px;aspect-ratio:auto}
.pbrief{margin:0;justify-content:center;gap:10px 12px}
.pbrief .pl{width:68px;font-size:.78rem}
.pbrief .char{width:52px;height:52px}
body.remote #briefplayers,body.remote .brief h3{display:none}   /* the players already show on top of the host's own game */
.why{color:var(--yellow);font-weight:800;font-size:1.1rem;margin:12px 0 0}
.why:empty{display:none}
.phone .why{margin:0;font-size:1rem}
body.remote .host.ingame #rwhy{display:none}   /* shown in the host's own game below */
/* ---------- Draw! ---------- */
.drawcanvas{width:100%;aspect-ratio:4/3;height:auto;background:#fff;border-radius:14px;border:1px solid var(--line);display:block}
.drawcanvas.pad{touch-action:none;cursor:crosshair}
.drawview{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);height:100%;aspect-ratio:4/3;background:#fff;z-index:5}
.drawtools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.drawtools button{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);cursor:pointer;color:#111;font-weight:800;padding:0}
.drawtools button.on{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow)}
.drawtools button.wide{width:auto;border-radius:999px;padding:0 14px;background:var(--card);color:var(--ink)}
.phone #pdraw{max-height:38vh;width:auto;max-width:100%;align-self:center}
.autorow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.solo .autorow{justify-content:flex-start}
select.mini{width:auto;padding:.3em .6em;font-size:.9rem;border-radius:10px}
/* Sing!: votes under each song, and the singer who is being heard */
.optcol{display:flex;flex-direction:column;gap:6px;min-width:0}
.voters{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.9rem;font-weight:700;padding:0 6px;min-height:1.6em}
.voters b{color:var(--yellow)}
.voters span{display:inline-flex;align-items:center;gap:5px}
.voters .char{width:22px;height:22px;border-radius:50%}
.voters.mute,.voters .mute{color:var(--mute);font-weight:600}
.answered .pl.now .char{box-shadow:0 0 0 5px var(--yellow);opacity:1;transform:scale(1.15)}
.answered .pl.now span{color:var(--yellow)}
.probebox{position:fixed;left:0;bottom:0;width:4px;height:4px;overflow:hidden;opacity:0;pointer-events:none}
.host .opts.votelist{grid-template-columns:1fr;gap:8px;margin-top:18px}
.host .opts.votelist .optcol{flex-direction:row;align-items:center;gap:14px}
.host .opts.votelist .opt{flex:0 1 46%;min-width:0}
.host .opts.votelist .voters{flex:1;font-size:1rem;padding:0}
.host .opts.votelist .voters .char{width:28px;height:28px}
.host .opts.votelist .opt{padding:.45em .9em;font-size:1.05rem}
.opt.singing{border-color:var(--yellow);background:rgba(255,214,10,.2)}
.opt .note{color:var(--yellow);font-size:.85rem;font-weight:700;margin-left:auto;white-space:nowrap}
#adnote:empty{display:none}
.musicbtn{position:fixed;left:12px;bottom:12px;z-index:40;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.2rem;cursor:pointer;backdrop-filter:blur(6px)}
body.haschat .musicbtn{bottom:76px}
.chip.pop{animation:chipPop .7s cubic-bezier(.2,1.6,.4,1) both;transform-origin:center}
@keyframes chipPop{0%{transform:scale(0) rotate(-12deg);opacity:0}55%{transform:scale(1.25) rotate(4deg);opacity:1}75%{transform:scale(.93)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.chip.pop{animation:none}}

/* ================= 2026-10 refresh: type, answer bars, tighter screens ================= */
:root{--surface:rgba(255,255,255,.07);--surface2:rgba(255,255,255,.13);--pick:#fff;--pickink:#160a55}
body{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-optical-sizing:auto}
h1,h2,h3{font-weight:800;letter-spacing:-.025em}
.logo{font-weight:800}
.btn{font-weight:700}
label{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:600}

/* answer bars: flat surface, a letter key on the left, no outline */
.opts{gap:8px;margin-top:12px}
.opt{position:relative;gap:.7em;padding:.5em .8em .5em .5em;border:0;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  font-weight:600;font-size:1rem;line-height:1.2;transition:background .12s,transform .08s,color .12s}
.opt b{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:8px;background:var(--surface2);color:var(--ink);font-weight:800;font-size:.9em;transition:background .12s,color .12s}
button.opt:hover:not(:disabled):not(.picked){background:var(--surface2)}
button.opt:active:not(:disabled){transform:scale(.985)}
button.opt:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* chosen: the bar turns white with dark type, the key turns pink */
button.opt.picked{background:var(--pick);color:var(--pickink);box-shadow:0 6px 18px -6px rgba(255,46,136,.55)}
button.opt.picked b{background:var(--pink);color:#fff}
button.opt:disabled:not(.picked){opacity:.45}
.opt.right{background:var(--ok);color:#052e16;box-shadow:none}
.opt.wrong{background:var(--bad);color:#3b0a0a;box-shadow:none}
.opt.right b,.opt.wrong b{background:rgba(0,0,0,.16);color:inherit}
.opt.dim{opacity:.38}
.host .opts{margin-top:16px;gap:10px}
.host .opt{font-size:1.05rem;padding:.5em .8em .5em .5em}
.opt .char{width:1.9em;height:1.9em;margin-right:0;border-radius:50%}

/* slimmer timer */
.bar{height:6px;background:rgba(255,255,255,.1)}
.barspace{height:6px}

/* everything a size down, so the answers and the song fit without scrolling */
.stage{max-height:36vh;border-radius:16px}
.host{gap:14px}
.under{margin-top:10px;gap:12px}
.reveal{margin-top:12px}
.reveal h2{font-size:clamp(1.25rem,2.2vw,1.9rem)}
.reveal p{font-size:1rem;margin:.2em 0 0}
.verdict,.solo #verdict{font-size:1.15rem!important}
.rpts,.solo .rpts,.vblock .rpts{font-size:1rem}
.answered{gap:8px 14px;margin-top:12px}
.answered .pl{width:64px;font-size:.78rem;gap:4px}
.answered .char{width:46px;height:46px;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.answered .pl.in .char{box-shadow:0 0 0 4px var(--ok)}
.btn.big{font-size:1.15rem;padding:.75em 1.4em}
.solo{gap:12px;padding-top:14px}
.solo #qtext{font-size:1.25rem;margin-top:10px!important}
.phone.ingame #waittitle,.phone.ingame #qtext,.phone.ingame .verdict{font-size:1.25rem;min-height:2.2em}
.phone.ingame .vblock{min-height:2.75rem}
.phone.ingame .center{gap:10px}
.why{font-size:1rem;margin-top:10px}

/* the song, right under the answers, as one compact block */
.songinfo,.phone #songcard{background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);border:0;border-radius:12px;padding:10px 14px;backdrop-filter:none}
.songinfo h2,.phone #songcard h2{font-size:1.2rem;color:var(--yellow)}
.songinfo p,.phone #songcard p{font-size:.95rem;margin:.15em 0 0!important}
.songinfo .res,.phone #songcard .res{font-weight:600}
.reveal .under{gap:14px;margin-top:10px}
.reveal .under>.songinfo{flex:1}
body.remote .host.ingame .songinfo{display:none}
.solo .autobox{flex:1 1 100%;min-width:0}
.solo .autobox .check{white-space:normal}

/* small control row on top: Next, autoplay, how long */
.ctrl{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 0}
.ctrl .btn,.ctrl .check,.ctrl select.mini{height:32px;font-size:.85rem;font-weight:600;border-radius:999px;padding:0 14px;margin:0;line-height:1;white-space:nowrap}
.ctrl .btn{box-shadow:none;min-width:84px}
.ctrl .btn:active{transform:scale(.97);box-shadow:none}
.ctrl .check{display:inline-flex;gap:.5em;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer;grid-column:auto}
.ctrl .check input{width:1em;height:1em}
.ctrl select.mini{width:auto;border:0;background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ctrl .autoleft{font-size:.85rem;font-weight:700;color:var(--yellow)}
.ctrl .autoleft:empty{display:none}

/* the player's result sits at the right end of their bar */
.opt .otext{flex:1;min-width:0}
.opt .mark{flex:none;margin-left:auto;font-weight:800;font-size:1.05em;white-space:nowrap;padding-left:.6em}
.opt .mark.none{font-size:.85em;font-weight:700;opacity:.8}
.verdict:empty,.vblock:has(.verdict:empty){display:none}
.phone.ingame .vblock{min-height:0}
.solo .rq{font-size:1.25rem;margin-top:10px;color:var(--ink)}
.solo .reveal{margin-top:0}
.fb.verdict:not(.ok):not(.no){color:var(--ink)}

/* the question on the left, "next song in…" on the right of the same line */
.qrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qrow>:first-child{flex:1;min-width:0;margin:0}
.nextin{flex:none;font-size:.9rem;font-weight:700;color:var(--yellow);white-space:nowrap}
.nextin:empty{display:none}
.solo .qrow{margin-top:10px}.solo .qrow .rq{margin-top:0}
.vblock:has(.verdict:empty){display:block}
.vblock:has(.verdict:empty):has(.nextin:empty){display:none}

/* Next on the top right; autoplay stays in the middle */
.host .ctrl{display:grid;grid-template-columns:1fr auto auto 1fr;justify-items:center}
.host .ctrl .check{grid-column:2;grid-row:1}
.host .ctrl select.mini{grid-column:3;grid-row:1}
.host .ctrl #next{grid-column:4;grid-row:1;justify-self:end}
.host .ctrl .autoleft{grid-column:1;grid-row:1;justify-self:end}
.topnext{height:32px;font-size:.85rem;font-weight:600;padding:0 18px;box-shadow:none;min-width:84px}
.topnext:active{transform:scale(.97);box-shadow:none}

/* one top line: logo, autoplay, seconds, Next */
.solo>header,.host>header{flex-wrap:nowrap;gap:8px;align-items:center}
header .ctrl,.host header .ctrl{display:flex;flex:1;min-width:0;justify-content:center;flex-wrap:nowrap;gap:6px;margin:0}
header .ctrl .check,header .ctrl select.mini{min-width:0;flex:0 1 auto}
header .ctrl select.mini{text-overflow:ellipsis}
.host .ctrl .check,.host .ctrl select.mini,.host .ctrl .autoleft{grid-column:auto;grid-row:auto}
.host>header .roomtag{flex:none}
.wideonly{display:inline}
@media (max-width:600px){
  .wideonly{display:none}
  .solo>header .logo{font-size:1.05rem}
  header .ctrl .check,header .ctrl select.mini,.topnext{font-size:.78rem;padding:0 10px}
  .topnext{min-width:0}
}
/* online hosting: the top line stays, without logo and room code */
body.remote .host.ingame>header{display:flex}
body.remote .host.ingame>header .logo,body.remote .host.ingame>header #joinhint,body.remote .host.ingame>header #roomcode{display:none}
header .ctrl .check{flex:none}
header .ctrl select.mini{flex:0 1 auto;max-width:150px}
@media (max-width:600px){header .ctrl .check,header .ctrl select.mini{padding:0 8px}header .ctrl select.mini{max-width:104px}}

.brand{display:flex;flex-direction:column;line-height:1;flex:none}
.tiny{font-size:.62rem;font-weight:600;color:var(--mute);margin-top:2px;white-space:nowrap;letter-spacing:.01em}
.tiny:empty{display:none}
body.remote .host.ingame>header .brand .logo{display:none}

/* host: answers stacked, pickers behind each */
.host .opts.votelist .opt{flex:0 0 52%}
.host .opts.votelist .voters{gap:6px 12px;min-height:0}
.host .opts.votelist .voters span{background:var(--surface);border-radius:999px;padding:2px 10px 2px 2px;font-weight:600;font-size:.95rem}
.host .opts.votelist .voters span b{color:var(--ok);margin-left:2px}
.voters .plop{animation:chipPop .45s cubic-bezier(.2,1.6,.4,1) both}
@media (prefers-reduced-motion:reduce){.voters .plop{animation:none}}
.host .stage{max-height:31vh}
.host .opts.votelist{gap:6px;margin-top:10px}

.chip.rdy{box-shadow:0 0 0 3px var(--ok);border-color:transparent}
.btn.small#lobbyready{box-shadow:none}

/* host: taller video, slimmer score panel, answer bars as wide as the video with the pickers inside on the right */
.host .game{grid-template-columns:minmax(0,1fr) 285px}
.host .stage{max-height:44vh}
.host .opts.votelist .optcol{position:relative;display:block}
.host .opts.votelist .opt{width:100%;padding-right:46%}
.host .opts.votelist .voters{position:absolute;right:8px;top:50%;transform:translateY(-50%);max-width:44%;justify-content:flex-end;flex-wrap:nowrap;overflow:hidden}
.host .opts.votelist .opt.right+.voters span{background:rgba(0,0,0,.18);color:#052e16}
.host .opts.votelist .opt.right+.voters span b{color:#052e16}
.host .board li{padding:.45em .7em;font-size:.95rem}
@media (max-width:820px){.host .game{grid-template-columns:1fr}}
.board li.ans .char{box-shadow:0 0 0 3px var(--ok)}
.board li .char{border-radius:50%;transition:box-shadow .2s}
.host #allin{margin-top:10px;font-size:1.05rem}
.phone #allinq{text-align:left;min-height:0}
.phone #allinq:empty{display:none}

/* final scores: one player counts up at a time */
.finalboard li{will-change:transform}
.finalboard li.counting{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,214,10,.35);background:linear-gradient(90deg,#2a1890,#4326c9)}
.finalboard li.counting .num{background:var(--yellow)}
.finalboard li.reached{border-color:var(--line)}
.finalboard li.winner{border:6px solid var(--yellow);box-shadow:0 0 0 4px rgba(255,214,10,.3),0 10px 40px -8px rgba(255,214,10,.6);font-size:1.35rem;padding:.6em .8em;background:linear-gradient(90deg,#3a1fb0,#6a2bd0)}
.finalboard li.winner .num{background:var(--yellow)}
.finalboard li.flash{animation:rowFlash .7s ease-out}
@keyframes rowFlash{0%{background:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.7);transform:scale(1.04)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.finalboard li.flash{animation:none}}

/* host lobby: just the avatar with the name under it */
.lobbyplayers .players{display:flex;flex-wrap:wrap;gap:14px 18px}
.lobbyplayers .chip{flex-direction:column;gap:6px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;width:84px;text-align:center;font-size:.95rem;line-height:1.1;overflow-wrap:anywhere}
.lobbyplayers .chip .char{width:68px;height:68px;margin:0;border-radius:50%;box-shadow:0 0 0 4px transparent;transition:box-shadow .2s}
.lobbyplayers .chip.rdy{box-shadow:none}
.lobbyplayers .chip.rdy .char{box-shadow:0 0 0 4px var(--ok)}
.lobbyplayers .chip.off{opacity:.4}
.lobbyplayers .players{margin-top:14px!important}

/* phone lobby: avatar and name on top with two edit buttons, a big Ready button at the bottom */
.phone #v-wait.lobbyview{justify-content:flex-start;gap:14px}
.phone #v-wait.lobbyview .avatarrow{flex-direction:column;gap:8px}
.phone #v-wait.lobbyview .mychar .char{width:96px;height:96px}
.editrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.editrow .btn{box-shadow:inset 0 0 0 1px var(--line);font-size:.85rem;padding:.5em 1em}
.phone #v-wait.lobbyview #waittitle{font-size:1.6rem;margin-top:8px}
.readybtn{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:center;gap:.6em;font-size:1.35rem;padding:.9em 1em;background:var(--surface2);box-shadow:inset 0 0 0 2px var(--line)}
.readybtn .tick{width:1.25em;height:1.25em;border-radius:7px;box-shadow:inset 0 0 0 2px #fff;display:grid;place-items:center;font-size:.9em;font-weight:800}
.readybtn.on{background:var(--ok);color:#052e16;box-shadow:0 6px 0 #1f9a57}
.readybtn.on .tick{background:#052e16;color:var(--ok);box-shadow:none}
.readybtn.on .tick:before{content:"✓"}
.readybtn:active{transform:translateY(2px)}
/* in the host's own frame everything stays on one compact line */
body.embed .phone.compact #v-wait.lobbyview{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
body.embed .phone.compact #v-wait.lobbyview .avatarrow{flex-direction:row}
body.embed .phone.compact #v-wait.lobbyview .mychar .char{width:38px;height:38px}
body.embed .phone.compact .readybtn{margin:0;width:auto;font-size:.95rem;padding:.5em 1.1em;box-shadow:inset 0 0 0 2px var(--line)}
body.embed .phone.compact .readybtn.on{box-shadow:none}

/* everyone ready: settings locked while the fanfare counts down */
.lobby.locked .settings{opacity:.5}
.lobby.locked #rehostbtn{display:none}

/* the countdown never moves anything: on the host it joins the tiny line under the logo, beside the question it has a fixed slot */
.tinyrow{display:block;min-height:1em}
.tinynext{color:var(--yellow);font-weight:700}
.tinynext:not(:empty):before{content:" · ";color:var(--mute)}
.qrow .nextin,.qrow .nextin:empty{display:inline-block;flex:none;min-width:8.6em;text-align:right}
.host>header .brand{width:230px;overflow:visible}

/* Ready sits right under the name and edit buttons, not at the bottom of the screen */
.phone #v-wait.lobbyview .readybtn{margin-top:6px;order:1}
.phone #v-wait.lobbyview #lobbystart{order:2}
.phone #v-wait.lobbyview #waitlabel{display:none}
.phone #v-wait.lobbyview #waittitle{order:3;font-size:1.3rem;margin-top:10px}
.phone #v-wait.lobbyview #waitsub{order:4;margin:0}
.phone #v-wait.lobbyview .avatarrow{order:0}
body.embed .phone.compact #lobbystart{width:auto!important;font-size:.95rem;padding:.5em 1.1em;box-shadow:none}

/* score panel: name | total | +points, each in a fixed column */
.host aside .board li{display:grid;grid-template-columns:minmax(0,1fr) auto auto 2.6em;align-items:center;gap:4px}
.host aside .board .who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.host aside .board .tot{text-align:right;font-variant-numeric:tabular-nums;min-width:2ch}
.host aside .board .pts{margin:0;text-align:left;font-variant-numeric:tabular-nums}
#lobbystart:disabled{background:var(--surface2);color:var(--mute);box-shadow:inset 0 0 0 2px var(--line);opacity:.7;cursor:not-allowed;transform:none}

/* tie roulette: the lit bar */
.opt.rolling{background:var(--yellow);color:#221a00;box-shadow:0 0 0 3px rgba(255,214,10,.4),0 8px 24px -8px rgba(255,214,10,.8);transform:scale(1.015)}
.opt.rolling b{background:rgba(0,0,0,.15);color:inherit}

/* host lobby: the name always shows under the avatar, on its own line */
.lobbyplayers .chip{display:flex;align-items:center;width:96px;overflow:visible}
.lobbyplayers .chip .char{flex:none}
.lobbyplayers .chip .pname{display:block;width:100%;font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.15;text-align:center;overflow-wrap:anywhere}

/* Draw!: no video until the reveal; then the drawing beside the video */
.stage.novideo #yt,.stage.novideo iframe,#pstage.novideo #yt,#pstage.novideo iframe{opacity:0}
.stage.withdraw #yt,.stage.withdraw iframe{width:62%}
.drawview.side{left:auto;right:0;top:50%;transform:translateY(-50%);height:auto;width:38%;max-height:100%;border-radius:0 14px 14px 0}
.rdraw{width:100%;max-height:26vh;object-fit:contain;background:#fff;border-radius:12px;display:block}

/* ten avatars now: five per row on a phone, all ten in one row on a wide solo screen */
.chargrid{grid-template-columns:repeat(5,1fr);gap:8px}
.solo .chargrid{grid-template-columns:repeat(10,1fr)}
@media (max-width:600px){.solo .chargrid{grid-template-columns:repeat(5,1fr)}}

/* two-clip questions: a second player stacked on the first; only one of them shows */
.stage #yt2,.stage iframe#yt2{opacity:0;pointer-events:none}
.stage.second iframe#yt2,.stage.second #yt2{opacity:1}
.stage.second iframe#yt,.stage.second #yt{opacity:0}
.pairtag{position:absolute;left:12px;top:12px;z-index:6;background:var(--yellow);color:#221a00;font-weight:800;border-radius:999px;padding:.3em .9em;font-size:1rem}

/* ---------- Ladder scoring ---------- */
.ladder{position:relative;margin-top:14px}
.ladder .rails{position:absolute;left:8px;width:40px;top:0;bottom:0;border-left:4px solid rgba(255,255,255,.28);border-right:4px solid rgba(255,255,255,.28);border-radius:4px}
.ladder .rung{position:absolute;left:8px;width:40px;height:34px;border-bottom:3px solid rgba(255,255,255,.28);display:flex;align-items:flex-end;justify-content:center}
.ladder .rung span{font-size:.78rem;font-weight:800;color:var(--mute);margin-bottom:3px;font-variant-numeric:tabular-nums}
.ladder .rung.top span{color:var(--yellow);font-size:.95rem}
.ladder .rung:after{content:"";position:absolute;left:48px;right:-400px;bottom:-3px;border-bottom:1px dashed rgba(255,255,255,.1)}
.ladder{overflow:hidden}
.climber{position:absolute;width:30px;height:30px;transition:bottom .9s cubic-bezier(.3,1.5,.5,1),left .5s ease}
.climber .char{width:30px;height:30px;box-shadow:0 0 0 2px #160a55}
.climber b{display:none}
.climber.ans .char{box-shadow:0 0 0 3px var(--ok)}
.climber.up .char{box-shadow:0 0 0 3px var(--ok),0 0 14px 2px rgba(61,220,132,.7)}
.climber.down .char{box-shadow:0 0 0 3px var(--bad)}
.climber.won .char{box-shadow:0 0 0 3px var(--yellow),0 0 16px 4px rgba(255,214,10,.8)}
.climber.off{opacity:.4}
@media (prefers-reduced-motion:reduce){.climber{transition:none}}

/* End game: a small button in the corner of the host screen, and the question it asks */
.endgame{position:fixed;right:14px;bottom:14px;z-index:45;opacity:.75}
.endgame:hover,.endgame:focus-visible{opacity:1}
body.remote .endgame{bottom:calc(14px + env(safe-area-inset-bottom))}
@media (max-width:760px){body.remote .endgame{bottom:auto;top:64px;right:10px}}
.endask{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,2,30,.72)}
.endask .card{width:min(420px,100%)}

/* 13 avatars: two rows in solo */
.solo .chargrid{grid-template-columns:repeat(7,1fr)}
@media (max-width:600px){.solo .chargrid{grid-template-columns:repeat(5,1fr)}}

/* Draw!: at the answer the drawing sits on the left and the video on the right (where YouTube's skip button is) */
.stage.withdraw #yt,.stage.withdraw iframe{left:auto;right:0}
.drawview.side{left:0;right:auto;border-radius:14px 0 0 14px}
/* Draw!: who is still drawing */
.answered .pl{position:relative}
.answered .pl.busy .char{opacity:1;animation:busychar 1.2s ease-in-out infinite}
.answered .pen{position:absolute;right:2px;top:26px;font-style:normal;font-size:1.5rem;line-height:1;animation:scribble .7s ease-in-out infinite;transform-origin:20% 90%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
@keyframes scribble{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-7px,3px) rotate(-12deg)}50%{transform:translate(2px,-2px) rotate(6deg)}75%{transform:translate(-4px,4px) rotate(-8deg)}}
@keyframes busychar{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.answered .pen,.answered .pl.busy .char{animation:none}}

/* Draw!: the vote for the best drawing */
.bestview{position:absolute;inset:0;z-index:6;display:grid;gap:10px;padding:10px;grid-template-columns:repeat(2,1fr);align-content:center;justify-items:center;background:radial-gradient(circle at 50% 40%,#3b1fa8,#0b0633 70%)}
.bestview.n3,.bestview.n4{grid-template-columns:repeat(4,1fr)}.bestview.n3{grid-template-columns:repeat(3,1fr)}
.bestview.n5,.bestview.n6,.bestview.n7,.bestview.n8{grid-template-columns:repeat(4,1fr)}
.bestview .tile{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:0;min-width:0;width:100%;transition:transform .3s,opacity .3s}
.bestview canvas{width:100%;max-height:100%;aspect-ratio:4/3;background:#fff;border-radius:10px;box-shadow:0 0 0 3px rgba(255,255,255,.2);min-height:0;object-fit:contain}
.bestview .tile span{font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bestview .tile span b{color:var(--yellow)}
.bestview .tile.win canvas{box-shadow:0 0 0 5px var(--ok),0 0 26px 4px rgba(61,220,132,.6)}
.bestview .tile.win{transform:scale(1.04)}
.bestview .tile.lose{opacity:.45}
.opts.bestgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.opt.bestopt{flex-direction:column;align-items:stretch;gap:6px;padding:8px;text-align:center;display:flex}
.opt.bestopt canvas{width:100%;aspect-ratio:4/3;background:#fff;border-radius:8px;pointer-events:none}
.opt.bestopt b{align-self:center}
.bestview{grid-auto-rows:minmax(0,1fr)}
.bestview .tile{height:100%;justify-content:center}
.bestview canvas{width:auto;height:calc(100% - 28px);max-width:100%}

/* still drawing or writing: a small pencil badge at the top right of the avatar, making short writing strokes */
.answered .pen{right:0;top:-8px;width:26px;height:26px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.45);filter:none;transform-origin:50% 50%;animation:penwrite .9s ease-in-out infinite}
@keyframes penwrite{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-2px,1px) rotate(-10deg)}40%{transform:translate(1px,2px) rotate(6deg)}60%{transform:translate(-1px,0) rotate(-6deg)}80%{transform:translate(2px,1px) rotate(8deg)}}
.answered .pl.busy .char{animation:none}

/* the big ladder on the final screen of a Ladder game */
.ladder.big{width:min(980px,100%);margin:10px auto 0;text-align:left}
.ladder.big .rails{left:14px;width:70px;border-left-width:6px;border-right-width:6px}
.ladder.big .rung{left:14px;width:70px;height:50px;border-bottom-width:4px}
.ladder.big .rung span{font-size:1.15rem;margin-bottom:8px}
.ladder.big .rung.top span{font-size:1.4rem}
.ladder.big .rung:after{left:82px;right:-1200px;bottom:-4px}
.ladder.big .climber{width:auto;height:44px;display:flex;align-items:center;gap:8px;transition:bottom 1.6s cubic-bezier(.3,1.3,.5,1)}
.ladder.big .climber .char{width:44px;height:44px;box-shadow:0 0 0 3px #160a55}
.ladder.big .climber b{display:block;font-size:1rem;font-weight:800;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.ladder.big .climber.won .char{box-shadow:0 0 0 4px var(--yellow),0 0 22px 6px rgba(255,214,10,.8)}
.ladder.big .climber.won b{color:var(--yellow)}

/* Advanced settings on the host screen: folded away until asked for */
.adv summary{cursor:pointer;font-weight:700;color:var(--mute);list-style:none;display:inline-flex;align-items:center;gap:8px;padding:6px 0}
.adv summary::-webkit-details-marker{display:none}
.adv summary:before{content:"▸";display:inline-block;transition:transform .15s}
.adv[open] summary:before{transform:rotate(90deg)}
.adv summary:hover,.adv[open] summary{color:var(--ink)}
.adv .settings{margin-bottom:0}
/* the decades of the spin: a row of tiles */
.host .opts.eras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.host .opts.eras .optcol{display:block}
.host .opts.eras .opt{justify-content:center;text-align:center;flex-direction:column;gap:2px;min-height:64px}

/* the ladder stands in the middle, players to both sides */
.ladder .rails,.ladder .rung{left:50%;margin-left:-24px}
.ladder .rung:after{left:-600px;right:-600px}
.ladder.big .rails,.ladder.big .rung{left:50%;margin-left:-41px}
.ladder.big .rung:after{left:-1200px;right:-1200px}
.ladder.big .climber.lefty{flex-direction:row-reverse}
.ladder.big .climber.lefty b{text-align:right}

.host .voters span{white-space:nowrap;flex:none}
.host .voters{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
.host .voters span .char{flex:none}

/* the title card before a party round */
.cover.funcard{background:radial-gradient(circle at 50% 40%,#ff2e88,#7a1fa8 55%,#0b0633 100%)}
.cover.funcard .q{animation:funpop .7s cubic-bezier(.2,1.6,.4,1) both}
.cover.funcard h2{font-size:clamp(2.4rem,7vw,5rem);font-weight:900;color:#fff;letter-spacing:.01em;animation:funpop .7s .12s cubic-bezier(.2,1.6,.4,1) both;text-shadow:0 4px 0 rgba(0,0,0,.25)}
@keyframes funpop{0%{transform:scale(.2) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.funsub{font-size:1.25rem;font-weight:700;margin:6px 0 0;color:var(--ink);grid-column:1/-1;width:100%}
.host .opts:has(.funsub){display:block}
@media (prefers-reduced-motion:reduce){.cover.funcard .q,.cover.funcard h2{animation:none}}

/* Question types and Party rounds: a field like the other settings that opens a list of switches */
.multi{position:relative}
.multibtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.85em 1em;border-radius:14px;border:2px solid var(--line);background:rgba(0,0,0,.25);cursor:pointer;text-align:left;font-weight:500}
.multibtn:after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.8;transition:transform .15s}
.multibtn[aria-expanded="true"]{border-color:var(--pink)}
.multibtn[aria-expanded="true"]:after{transform:rotate(225deg) translateY(-2px)}
.multibtn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.multipanel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#1c1260;border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 18px 50px -10px rgba(0,0,0,.7)}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-radius:11px;margin:0;cursor:pointer;text-transform:none;letter-spacing:0;color:var(--ink)}
.swrow:hover{background:rgba(255,255,255,.06)}
.swrow b{display:block;font-size:.98rem;font-weight:700}
.swrow small{display:block;font-size:.78rem;font-weight:500;color:var(--mute);margin-top:1px}
.swrow input{position:absolute;opacity:0;width:0;height:0}
.sw{flex:none;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.16);position:relative;transition:background .18s}
.sw:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.swrow input:checked + .sw{background:var(--pink)}
.swrow input:checked + .sw:after{transform:translateX(18px)}
.swrow input:focus-visible + .sw{outline:2px solid var(--yellow);outline-offset:2px}
.swrow:has(input:not(:checked)) b{color:var(--mute)}
.multi.off .multibtn{opacity:.4;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sw,.sw:after,.multibtn:after{transition:none}}

/* Sing!: the singers as bars, the one being heard marked on the right */
.host .opt.singing .note{margin-left:auto;position:static;transform:none}
.host .opts.votelist .opt.singing .note{margin-left:12px}
.host .opts.votelist .voters span.face{padding:2px}
.host .opts.votelist .opt.right+.voters>b{color:#052e16}
/* Sing!: the "singing now" mark never makes its bar taller; more than four singers become tiles */
.host .opts.votelist .opt .note{padding:0;margin:0 0 0 12px;border:0;background:none;line-height:1}
.host .opts.votelist.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.host .opts.votelist.tiles3{grid-template-columns:repeat(3,minmax(0,1fr))}
.host .opts.votelist.tiles .opt{padding-right:33%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host .opts.votelist.tiles .voters{max-width:31%;gap:3px}
.host .opts.votelist.tiles .voters>b{font-size:.85rem}
/* Final scores: the winner says thanks, in a speech balloon next to the avatar */
.balloon{position:relative;margin-left:16px;background:#fff;color:#1a1147;font-weight:800;font-size:.85rem;line-height:1;padding:6px 11px;border-radius:999px;white-space:nowrap;flex:none;animation:balloon .35s ease-out both}
.balloon:before{content:"";position:absolute;left:-6px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:0;border-right:7px solid #fff}
.host .opts.votelist.tiles .balloon{font-size:.72rem;padding:5px 8px;margin-left:10px}
@media (prefers-reduced-motion:reduce){.balloon{animation:none}}
@keyframes balloon{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.finalboard .who .balloon{margin-left:6px}
/* The last five seconds: who has not answered yet */
.host .allin .hurry{margin-right:10px;vertical-align:middle}
.host .allin .waitfor{display:inline-block;vertical-align:middle;margin-right:6px}
.host .allin .waitfor .char{width:34px;height:34px;display:block}
/* Jury Show on the phone: a giant circle counts down to the recording, the record button sits lower */
.bigcount{width:min(62vw,260px);height:min(62vw,260px);margin:10px auto 0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:min(34vw,140px);font-weight:900;line-height:1;color:#221a00;background:var(--yellow);box-shadow:0 0 0 10px rgba(255,214,10,.25)}
.bigcount.hidden{display:none}
.bigcount.tick{animation:bigtick .9s ease-out}
.bigcount.live{background:var(--bad);color:#fff;box-shadow:0 0 0 10px rgba(255,90,90,.25);animation:pulse .7s ease-in-out infinite alternate}
@keyframes bigtick{from{transform:scale(1.18)}to{transform:scale(1)}}
#srec .recbtn{margin-top:28px}
@media (prefers-reduced-motion:reduce){.bigcount.tick,.bigcount.live{animation:none}}
/* Postcard: more colours, three line widths, a paper colour */
.drawtools{gap:6px}
.drawtools button{width:32px;height:32px;border-width:2px}
.drawtools .toolbreak{flex-basis:100%;height:0}
.drawtools button.size{background:var(--card);display:flex;align-items:center;justify-content:center;width:38px;height:38px}
.drawtools button.size i{display:block;border-radius:50%;background:var(--ink)}
.drawtools button.wide{height:38px}
.drawtools button.wide .paper{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid var(--line);margin-right:7px;vertical-align:-3px}
/* Final scores: "Thank you Europe!" in a big balloon above the winner's avatar */
.endhead .winchar{display:flex;flex-direction:column;align-items:center;gap:14px}
.endhead .winchar .char{width:110px;height:110px}
.winfaces{display:flex;gap:12px;justify-content:center}
.winballoon{position:relative;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1;padding:14px 24px;border-radius:999px;white-space:nowrap;animation:balloon .4s ease-out both}
.winballoon:after{content:"";position:absolute;left:50%;bottom:-11px;margin-left:-10px;border:10px solid transparent;border-bottom:0;border-top:12px solid #fff}
@media (prefers-reduced-motion:reduce){.winballoon{animation:none}}
/* The Scores panel: a little wider, so full names fit */
.host .game{grid-template-columns:minmax(0,1fr) 310px}
@media (max-width:820px){.host .game{grid-template-columns:1fr}}
/* Final scores: the row that was just counted stays yellow while it moves, and lights up where it lands */
.finalboard li.landed{box-shadow:0 0 0 5px rgba(255,214,10,.55),0 8px 30px -6px rgba(255,214,10,.7)}
/* The spin's pick: the green pops as much as the yellow light that ran before it */
.opt.right.picked{background:#35f08a;color:#03260f;box-shadow:0 0 0 4px rgba(53,240,138,.5),0 10px 34px -6px rgba(53,240,138,.95);transform:scale(1.04);animation:pickpop .45s cubic-bezier(.2,1.5,.4,1) both;position:relative;z-index:1}
@keyframes pickpop{0%{transform:scale(1.015)}45%{transform:scale(1.1)}100%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.opt.right.picked{animation:none}}
.drawtools button.pickme{animation:pulse .6s ease-in-out infinite alternate}
.drawtools button.wide.on{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow)}
@media (prefers-reduced-motion:reduce){.drawtools button.pickme{animation:none}}
.bigcount.live{animation:none}
.bigcount.tick{animation:none}
/* The minigame spin: four big picture cards instead of small bars */
.host .stage.offstage{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.host .opts.bigtiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:16px}
.host .opts.bigtiles .optcol{display:block}
.host .opts.bigtiles .opt{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;height:min(24vh,190px);padding:12px 10px;border-radius:18px;gap:10px;font-size:clamp(1rem,1.5vw,1.25rem);font-weight:800}
.host .opts.bigtiles .bigicon{font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1}
.host .opts.bigtiles .bigname{display:block;line-height:1.15}
.host .opts.bigtiles .opt.dim{opacity:.28;filter:grayscale(1)}
@media (max-width:820px){.host .opts.bigtiles{grid-template-columns:repeat(2,minmax(0,1fr))}.host .opts.bigtiles .opt{height:min(26vh,220px)}}
.host aside .board li{position:relative}
/* More than four answers: two columns */
.host .opts.votelist.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* At the answer the video is covered against clicks, apart from the corner where YouTube puts "Skip ad" */
.shield.peek{clip-path:polygon(0 0,100% 0,100% 58%,58% 58%,58% 100%,0 100%)}
/* Green Room: each answer shown as a scribbled note, below the video where the answer bars will be */
.host .opts.notearea{display:block;position:relative;margin-top:22px;min-height:190px}
.sheet{--tilt:-2deg;position:relative;max-width:82%;min-width:46%;background:#fffbe6;color:#1d2a5c;border-radius:6px;padding:34px 40px 38px;box-shadow:0 18px 50px -10px rgba(0,0,0,.7);transform:rotate(var(--tilt));background-image:repeating-linear-gradient(transparent 0 2.05em,rgba(40,80,200,.18) 2.05em 2.12em);text-align:center}
.sheet:before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:30px;margin-left:-55px;background:rgba(255,214,10,.75);transform:rotate(-3deg);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sheet .scrib{display:block;font-family:"Caveat","Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-weight:700;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.12;overflow-wrap:anywhere}
.sheet small{position:absolute;right:14px;bottom:8px;font-size:.8rem;font-weight:700;color:rgba(29,42,92,.5)}
.sheet.in{animation:paperin .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes paperin{from{opacity:0;transform:translateY(40px) rotate(calc(var(--tilt) * -3)) scale(.85)}to{opacity:1;transform:rotate(var(--tilt))}}
@media (prefers-reduced-motion:reduce){.sheet.in{animation:none}}

/* Green Room: the notes gather below the video; the vote is held on them */
.noteboard{display:grid;gap:22px 16px;align-items:start;transition:opacity .3s,filter .3s}
.noteboard.back .snote:not(.moving){opacity:.4;filter:blur(1.5px)}
.snote.moving{z-index:4;opacity:1;filter:none}
.bigwrap .sheet.in{animation-delay:.55s}
.snote{--tilt:-1deg;position:relative;background:#fffbe6;color:#1d2a5c;border-radius:5px;padding:16px 12px 24px;min-height:96px;transform:rotate(var(--tilt));box-shadow:0 8px 22px -8px rgba(0,0,0,.7);text-align:center;background-image:repeating-linear-gradient(transparent 0 1.55em,rgba(40,80,200,.16) 1.55em 1.62em);;transition:opacity .3s,box-shadow .3s,filter .3s}
.snote.ghost{visibility:hidden}
.snote .scrib{display:block;font-family:"Caveat","Segoe Print","Bradley Hand","Comic Sans MS",cursive;font-weight:700;font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.1;overflow-wrap:anywhere}
.snote .tag{position:absolute;left:-9px;top:-11px;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:#221a00;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.snote .nvotes{position:absolute;right:-6px;bottom:-14px;display:flex;flex-direction:row-reverse}
.snote .nvotes span{display:block;margin-left:-8px}
.snote .nvotes .char{width:30px;height:30px;display:block;box-shadow:0 0 0 2px #fffbe6;border-radius:50%}
.snote .nvotes .plop{animation:chipPop .45s cubic-bezier(.2,1.6,.4,1) both}
.snote .by{position:absolute;left:10px;bottom:4px;font-size:.78rem;font-weight:800;color:#1d2a5c;white-space:nowrap}
.snote .by b{color:#0a7a3d}
.snote.win{box-shadow:0 0 0 5px var(--ok),0 10px 34px -6px rgba(53,240,138,.9);z-index:1}
.snote.lost{opacity:.62}
.snote.shrunk{animation:noteshrink .55s cubic-bezier(.3,.9,.3,1) both}
@keyframes noteshrink{from{transform:scale(2) rotate(0deg);opacity:.2}to{transform:rotate(var(--tilt));opacity:1}}
.bigwrap{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;z-index:3;pointer-events:none}
@media (prefers-reduced-motion:reduce){.snote.shrunk,.snote .nvotes .plop{animation:none}}
/* "Select all" on top of a list of switches */
.swrow.allrow{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;margin-bottom:4px}
.swrow.allrow b{color:var(--yellow)}

/* "Behind the curtain": a curtain of tiles over the silent video; they drop away a few at a time */
.peel{position:absolute;inset:-3px;z-index:4;display:grid;overflow:hidden;background:transparent}
.peel.hidden{display:none}
.peel i{display:block;background-color:#2a1890;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 800 500%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2250%25%22 cy=%2250%25%22 r=%2280%25%22%3E%3Cstop offset=%220%22 stop-color=%22%234a2fd0%22/%3E%3Cstop offset=%221%22 stop-color=%22%232a1890%22/%3E%3C/radialGradient%3E%3ClinearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ff2e88%22/%3E%3Cstop offset=%221%22 stop-color=%22%23ff8a3d%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%22800%22 height=%22500%22 fill=%22url%28%23g%29%22/%3E%3Ccircle cx=%2225%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2225%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%2275%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22125%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22175%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22225%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22275%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22325%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22375%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22425%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22475%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22525%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22575%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22625%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22675%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22725%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%2225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%2275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%22125%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%22175%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%22225%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%22275%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%22325%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%22375%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%22425%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Ccircle cx=%22775%22 cy=%22475%22 r=%223%22 fill=%22%23fff%22 opacity=%22.35%22/%3E%3Cpolygon transform=%22translate%28590.0 250.0%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28564.5 345.0%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28495.0 414.5%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28400.0 440.0%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28305.0 414.5%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28235.5 345.0%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28210.0 250.0%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28235.5 155.0%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28305.0 85.5%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28400.0 60.0%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28495.0 85.5%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpolygon transform=%22translate%28564.5 155.0%29 scale%281.5%29%22 points=%220,-10 2.9,-3.1 9.5,-3.1 4.2,1.2 6,8 0,3.8 -6,8 -4.2,1.2 -9.5,-3.1 -2.9,-3.1%22 fill=%22%23ffd60a%22/%3E%3Cpath d=%22M400 345 C 300 275 262 228 262 188 C 262 150 292 124 326 124 C 356 124 384 142 400 170 C 416 142 444 124 474 124 C 508 124 538 150 538 188 C 538 228 500 275 400 345 Z%22 fill=%22url%28%23h%29%22 stroke=%22%23fff%22 stroke-width=%228%22/%3E%3C/svg%3E");background-size:1200% 700%;transition:opacity .9s ease,transform .9s ease,visibility 0s linear 0s;box-shadow:0 0 0 .6px #2a1890;backface-visibility:hidden}
/* a tile that has gone is taken out of the picture altogether once it has faded: nothing of it (not even a hairline) stays behind */
.peel i.gone{opacity:0;transform:scale(.4) rotate(12deg);visibility:hidden;box-shadow:none;transition:opacity .9s ease,transform .9s ease,visibility 0s linear .9s,box-shadow 0s}
@media (prefers-reduced-motion:reduce){.peel i{transition:none}}
/* What a right answer is worth, in the corner of the video */
.worth{position:absolute;right:6px;top:6px;z-index:8;min-width:2em;text-align:center;background:var(--yellow);color:#221a00;font-weight:900;font-size:1.05rem;line-height:1;padding:6px 8px;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.worth:after{content:" pts";font-size:.6em;font-weight:800}
.worth.hidden{display:none}
.worth.tick{animation:worthtick .35s ease-out}
@keyframes worthtick{from{transform:scale(1.35)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.worth.tick{animation:none}}

/* The host screen on a phone: no room for the join address next to the controls while a game is on */
@media (max-width:700px){.host.ingame>header #joinhint{display:none}.host>header{flex-wrap:wrap}.host.ingame>header .ctrl{order:3;flex-basis:100%;justify-content:flex-start}}
@media (max-width:700px){.host .opts.votelist .opt{padding-right:26%}.host .opts.votelist .voters{max-width:26%}}
/* A list of switches: the word in its field is green when everything is on, orange for a selection of your own */
.multi.isall .multibtn span{color:var(--ok)}
.multi.iscustom .multibtn span{color:#ff9f1c}
/* The points spin while a song is being selected: a column of Eurovision points, the light stops on this question's worth */
.ptspin{position:absolute;right:10px;top:8px;bottom:8px;z-index:8;display:flex;flex-direction:column;justify-content:space-between;gap:3px}
.ptspin.hidden{display:none}
.ptspin i{flex:1;min-height:0;min-width:3.2em;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:clamp(.7rem,1.6vh,1.05rem);line-height:1;color:var(--mute);background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:8px;transition:transform .08s}
.ptspin i.on{background:var(--yellow);color:#221a00;border-color:transparent;transform:scale(1.12);box-shadow:0 0 0 2px rgba(255,214,10,.4),0 4px 14px -4px rgba(255,214,10,.9)}
.ptspin i.on.picked{background:#35f08a;color:#03260f;transform:scale(1.25);box-shadow:0 0 0 3px rgba(53,240,138,.5),0 6px 20px -4px rgba(53,240,138,.95)}
.ptspin i.lit{background:rgba(255,214,10,.28);color:#fff;border-color:rgba(255,214,10,.4)}
.ptspin i.on.picked{animation:worthland .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes worthland{0%{transform:scale(1.12)}50%{transform:scale(1.7)}100%{transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){.ptspin i.on.picked{animation:none}}
.ptspin i.on.picked.douze{background:var(--yellow);color:#221a00;box-shadow:0 0 0 4px rgba(255,214,10,.55),0 0 34px 6px rgba(255,214,10,.9);animation:worthland .5s cubic-bezier(.2,1.6,.4,1) both,douzeglow .5s ease-in-out .5s 3 alternate}
@keyframes douzeglow{to{box-shadow:0 0 0 7px rgba(255,46,136,.6),0 0 44px 10px rgba(255,46,136,.9)}}
/* The points light is a darker orange while it moves and turns the yellow of the points badge where it lands */
.ptspin i.on{background:#f08a1c;color:#2a1500;box-shadow:0 0 0 2px rgba(240,138,28,.4),0 4px 14px -4px rgba(240,138,28,.9)}
.ptspin i.on.picked{background:var(--yellow);color:#221a00;box-shadow:0 0 0 3px rgba(255,214,10,.5),0 6px 20px -4px rgba(255,214,10,.95)}
/* The points badge and the "Song 1 / Song 2" tag are small enough to sit inside the covered strip at the top of the video */
.worth{right:6px;top:4px;font-size:.85rem;padding:4px 7px;border-radius:8px;min-width:0}
.pairtag{left:6px;top:4px;font-size:.78rem;padding:.25em .7em}
/* Whose flag?: the flag fills the middle of the stage */
.cover .q .flagimg{display:block;height:min(24vh,220px);width:auto;max-width:80%;margin:0 auto;border-radius:10px;box-shadow:0 10px 40px -8px rgba(0,0,0,.8),0 0 0 3px rgba(255,255,255,.85)}

/* On the map: the outline of a country on the cover */
.cover .q .mapimg{display:block;height:min(30vh,270px);width:auto;max-width:80%;margin:0 auto;overflow:visible;filter:drop-shadow(0 10px 26px rgba(0,0,0,.75))}
.cover .q .mapimg path{fill:#ffd23f;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.cover .q .mapimg .mapdot{fill:#e6007e;stroke:#fff;stroke-width:2}
.cover .q .mapimg .mapring{fill:none;stroke:#e6007e;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:mapring 1.6s ease-out infinite}
@keyframes mapring{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.6);opacity:0}}

/* Beat the Favourite: the favourite is marked on the scoreboard, and points taken away show in red */
.board li.fav .who::after{content:' 🎯'}
.board li.lost{outline:2px solid #ff4d6d}
.board li.lost .pts{color:#ff6b84}

/* ---------- The Final Chase ---------- */
.chase{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 120%,#3a0d4f 0%,#12061d 55%,#07030c 100%);color:#fff;overflow:hidden}
.chase.hidden{display:none}
.chhead{display:flex;align-items:center;gap:16px;padding:14px 22px;font-size:clamp(1.1rem,1.8vw,1.6rem)}
.chhead b{letter-spacing:.02em}
.chhead span{color:var(--mute,#b9a9d6);font-weight:700;font-size:.8em}
.chhead button{margin-left:auto}
.chtrack{position:relative;flex:1;margin:0 18px 18px;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(255,47,168,.25),transparent 60%)}
.chstage{position:absolute;right:0;top:0;bottom:0;width:26%;z-index:1}
.chled{position:absolute;inset:3% 3% 30% 22%;border-radius:18px;background:linear-gradient(200deg,#2b0a52,#7a1170 40%,#1a2a80 70%,#2b0a52);background-size:100% 300%;animation:chled 6s linear infinite;box-shadow:0 0 50px rgba(255,47,168,.45),inset 0 0 0 2px rgba(255,255,255,.12)}
.chled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,.15) 1px,transparent 1.5px) 0 0/8px 8px}
@keyframes chled{to{background-position:0 300%}}
.chfloor{position:absolute;left:0;top:2%;bottom:2%;width:22%;border-radius:50% 0 0 50%/50% 0 0 50%;background:linear-gradient(90deg,#3b1d5c,#1c0c2e);box-shadow:0 0 30px rgba(255,210,63,.25),inset 3px 0 0 rgba(255,210,63,.6)}
.chtro{position:absolute;left:58%;top:50%;transform:translate(-50%,-50%);height:58%;display:flex;flex-direction:column;align-items:center;z-index:2}
.chtro .trophy{height:88%;width:auto;filter:drop-shadow(0 0 18px rgba(159,217,255,.8))}
.chtro .fnrays{animation:chrays 2s ease-in-out infinite;transform-origin:60px 70px}
.chtro span{font-weight:900;color:#ffd23f;font-size:clamp(.7rem,1.1vw,1rem);text-shadow:0 2px 6px #000;white-space:nowrap}
@keyframes chrays{0%,100%{opacity:.25}50%{opacity:.8}}
.chbeams{position:absolute;inset:0 0 0 -40%;pointer-events:none}
.chbeams i{position:absolute;top:-10%;width:30%;height:130%;background:linear-gradient(rgba(255,255,255,.16),transparent 75%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);transform-origin:50% 0;animation:chbeam 4s ease-in-out infinite alternate}
.chbeams i:nth-child(1){left:0;animation-delay:-1s}.chbeams i:nth-child(2){left:25%;animation-delay:-2.2s}.chbeams i:nth-child(3){left:50%;animation-delay:-.4s}.chbeams i:nth-child(4){left:75%;animation-delay:-3s}
@keyframes chbeam{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.chview{position:absolute;left:0;right:0;top:9%;bottom:0;perspective:1500px;perspective-origin:50% -40%;z-index:2}
.chrun{position:absolute;left:22%;right:22%;top:2%;bottom:5%;transform-origin:50% 100%;transform:rotateX(26deg);transform-style:preserve-3d}
.chtiles{position:absolute;inset:0;display:grid;gap:3px;transform-style:preserve-3d}
.chtiles i{display:block;border-radius:5px;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,210,63,.18);transition:background .6s,opacity .6s,box-shadow .4s}
.chtiles i.even{background:linear-gradient(135deg,rgba(255,47,168,.16),rgba(255,47,168,.05))}
.chtiles i.occ{background:linear-gradient(135deg,rgba(255,210,63,.42),rgba(255,210,63,.14));box-shadow:inset 0 0 0 2px rgba(255,210,63,.75)}
.chtiles i.gone{background:radial-gradient(circle at 50% 50%,rgba(255,40,80,.35),rgba(20,0,10,.95) 70%);box-shadow:inset 0 0 0 1px rgba(255,40,80,.4);opacity:.85}
.chtiles i.warn{background:repeating-linear-gradient(45deg,rgba(255,40,80,.45) 0 8px,rgba(255,200,0,.28) 8px 16px);animation:chwarn .7s ease-in-out infinite alternate}
.chtiles i.doom{background:repeating-linear-gradient(45deg,#ff1744 0 8px,#3a0010 8px 16px);box-shadow:inset 0 0 0 3px #ff1744,0 0 22px #ff1744;animation:chwarn .35s ease-in-out infinite alternate}
@keyframes chwarn{from{opacity:.5}to{opacity:1}}
.chtoks{position:absolute;inset:0;transform-style:preserve-3d}
.chtok{position:absolute;transform:translate(-50%,-80%) rotateX(-26deg);transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center;gap:1px;transition:left 1.1s cubic-bezier(.3,1.3,.5,1),top 1.4s ease-in-out,opacity .6s,filter .6s}
.chtok .ch-face{width:var(--tok,56px);height:var(--tok,56px);border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.6);background:#2a1640}
.chtok .ch-face svg,.chtok .ch-face img{width:100%;height:100%;display:block}
.chtok .ch-name{font-size:max(13px,calc(var(--tok,56px) * .24));font-weight:800;text-shadow:0 1px 3px #000;white-space:nowrap}
.chtok .ch-res{position:absolute;top:-8px;right:-26px;background:#16a34a;color:#fff;font-weight:900;border-radius:999px;padding:1px 8px;font-size:calc(var(--tok,56px) * .3);opacity:0;transform:scale(.4);transition:opacity .25s,transform .25s}
.chtok .ch-res.on{opacity:1;transform:scale(1)}
.chtok .ch-res.zero{background:#6b5a80}
.chtok .ch-res.gold{background:#d4a00b}
.chtok.locked .ch-face{border-color:#ffd23f}
.chtok.doomed .ch-face{border-color:#ff1744;animation:chshake .25s linear infinite}
.chtok.doomed::before{content:'⚠️';position:absolute;top:-10px;left:-12px;font-size:calc(var(--tok,56px) * .38)}
@keyframes chshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.chtok.out{opacity:.35;filter:grayscale(1)}
.chtok.out .ch-face{border-color:#ff4d6d;animation:none}
.chtok.out::after{content:'💀';position:absolute;top:-6px;left:-12px;font-size:calc(var(--tok,56px) * .4)}
.chtok.won .ch-face{border-color:#ffd23f;box-shadow:0 0 0 6px rgba(255,210,63,.35),0 0 30px #ffd23f}
.chtok.near .ch-face{box-shadow:0 0 0 4px rgba(255,210,63,.5),0 0 18px rgba(255,210,63,.8)}
.chmon{position:absolute;top:82%;width:46%;transform:translate(-72%,-100%) rotateX(-26deg);transform-origin:50% 100%;transition:left 1.4s ease-in-out;pointer-events:none;z-index:3}
.chbob{animation:chbob .9s ease-in-out infinite;transform-origin:50% 100%}
.chbob .diva{width:100%;height:auto;display:block}
.chmon .dveyes{animation:chblink 3.2s infinite;transform-box:fill-box;transform-origin:center}
.chmon .dvhair{animation:chhair 1.4s ease-in-out infinite;transform-origin:140px 40px}
.chmon .dvmouth{animation:chwail 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.chmon .dvclaw{animation:chclaw 1.1s ease-in-out infinite;transform-origin:262px 136px}
.chmon.hungry .chbob{animation:chbob .4s ease-in-out infinite}
.chmon.sleep .chbob{animation:chbob 2.4s ease-in-out infinite}
.chmonname{position:absolute;left:42%;bottom:3%;transform:translateX(-50%);font-weight:900;color:#ff6b9b;text-shadow:0 2px 6px #000;letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;white-space:nowrap}
@keyframes chbob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-5%) scaleY(1.02)}}
@keyframes chblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes chhair{0%,100%{transform:rotate(0) scaleX(1)}50%{transform:rotate(-2deg) scaleX(1.04)}}
@keyframes chwail{0%,100%{transform:scaleY(.8)}50%{transform:scaleY(1.2)}}
@keyframes chclaw{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
.chnote{position:absolute;left:42%;top:1.5%;transform:translateX(-50%);z-index:4;background:rgba(10,4,20,.85);border:2px solid #ffd23f;color:#ffd23f;font-weight:900;padding:6px 16px;border-radius:999px;font-size:clamp(.8rem,1.2vw,1.05rem);white-space:nowrap;box-shadow:0 0 20px rgba(255,210,63,.35)}
.chnote.red{border-color:#ff4d6d;color:#ff8aa3;box-shadow:0 0 20px rgba(255,77,109,.35)}
.chnote.hidden{display:none}
.chq{position:absolute;left:44%;top:55%;transform:translate(-50%,-50%);width:min(620px,58vw);background:rgba(10,4,20,.9);border:2px solid rgba(255,255,255,.18);border-radius:18px;padding:16px 18px 14px;z-index:5;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.chq.hidden{display:none}
.chqt{font-weight:900;font-size:clamp(1rem,1.6vw,1.35rem);margin-bottom:4px}
.chqs{color:#b9a9d6;font-size:.85rem;margin-bottom:10px}
.chqi{display:flex;flex-direction:column;gap:8px}
.chqi div{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border-radius:10px;padding:8px 12px;font-weight:700;font-size:clamp(.85rem,1.2vw,1.05rem)}
.chqi div b{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;flex:none}
.chqi div.yes{background:rgba(22,163,74,.35)}
.chqi div.no{background:rgba(225,29,72,.3)}
.chqi div i{margin-left:auto;font-style:normal;font-weight:900}
.chbar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);margin-top:12px;overflow:hidden}
.chbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff2fa8,#ffd23f)}
.chbig{position:absolute;left:44%;top:50%;transform:translate(-50%,-50%);z-index:6;text-align:center;font-weight:900;font-size:clamp(1.6rem,4vw,3.4rem);text-shadow:0 4px 18px #000;background:#170a26;border:2px solid rgba(255,210,63,.55);box-shadow:0 20px 60px rgba(0,0,0,.8);padding:20px 34px;border-radius:22px}
.chbig.hidden{display:none}
.chbig small{display:block;font-size:.4em;color:#d9c8f0;margin-top:8px;font-weight:700}
.chopts button.opt.on,.chopts button.opt.on:hover{background:rgba(22,163,74,.35)!important;border-color:#16a34a}   /* (also after a tap: a touch screen keeps the last tapped button in hover) */
.chopts .opt.on b{background:#16a34a;color:#fff}

/* the stage at the end of the runway, in the same 3D plane */
.chstg{position:absolute;left:100%;top:-6%;bottom:-6%;width:30%;transform-style:preserve-3d}
.chstg-floor{position:absolute;inset:0 0 0 3%;border-radius:10px 50% 50% 10px/10px 50% 50% 10px;background:radial-gradient(ellipse at 40% 50%,#5b2a8a,#24103d 70%);box-shadow:inset 0 0 0 3px rgba(255,210,63,.85),0 0 40px rgba(255,47,168,.5);overflow:hidden}
.chstg-floor i{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.35) 1.4px,transparent 2px) 0 0/16px 16px;animation:chdots 1.6s linear infinite}
@keyframes chdots{0%,100%{opacity:.35}50%{opacity:.9}}
.chstg-ring{position:absolute;left:28%;top:22%;width:56%;height:56%;border-radius:50%;border:4px solid rgba(255,210,63,.8);box-shadow:0 0 30px #ffd23f,inset 0 0 30px rgba(255,210,63,.6);animation:chring 2.4s ease-in-out infinite}
@keyframes chring{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.04);opacity:1}}
.chtro{position:absolute;left:56%;top:58%;height:auto;width:46%;transform:translate(-50%,-100%) rotateX(-26deg);transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center}
.chtro .trophy{width:100%;height:auto}
.chpyro{position:absolute;left:14%;width:12%;height:70%;z-index:2;transform:translate(-50%,-100%) rotateX(-26deg) scale(1.5);transform-origin:50% 100%;pointer-events:none}
.chpyro i{position:absolute;bottom:0;left:50%;width:9px;height:9px;border-radius:50%;background:#ffd23f;box-shadow:0 0 10px #ff9d00,0 0 4px #fff;animation:chspark 1.6s ease-out infinite;opacity:0}
.chpyro i:nth-child(2){animation-delay:-.3s;margin-left:-8px}.chpyro i:nth-child(3){animation-delay:-.6s;margin-left:7px}.chpyro i:nth-child(4){animation-delay:-.9s;margin-left:-4px}.chpyro i:nth-child(5){animation-delay:-1.2s;margin-left:4px}
@keyframes chspark{0%{transform:translateY(0) scale(1.4);opacity:1}70%{opacity:.9}100%{transform:translateY(-260%) scale(.3);opacity:0}}
.chpyro::before{content:'';position:absolute;left:50%;bottom:0;width:14px;height:14px;margin-left:-7px;border-radius:3px;background:#2a1640;box-shadow:inset 0 0 0 2px #ffd23f}
.chpyro.boom i{animation-duration:.7s}
/* smashed spaces: the floor cracks, shakes, drops away and is gone */
.chvoid{position:absolute;left:0;top:-6%;bottom:-6%;width:0;background:radial-gradient(ellipse at 100% 50%,rgba(255,40,80,.35),rgba(10,0,6,.0) 70%);transition:width 1.4s ease-in-out;pointer-events:none}
.chtiles i.crumble{animation:chcrumble 1.3s ease-in forwards!important;background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.25) 0 2px,transparent 3px),linear-gradient(135deg,#5a1022,#2a0610)!important;box-shadow:inset 0 0 0 2px #ff1744!important}
@keyframes chcrumble{0%{transform:translate(0,0) rotate(0)}10%{transform:translate(-2px,1px) rotate(-2deg)}20%{transform:translate(2px,-1px) rotate(2deg)}30%{transform:translate(-2px,0) rotate(-1deg)}45%{transform:translate(1px,2px) rotate(3deg);opacity:1}100%{transform:translateZ(-160px) translateY(30px) rotate(25deg) scale(.6);opacity:0}}
.chtiles i.gone{visibility:hidden;animation:none}
/* the Diva rises out of smoke: no hard edge at the bottom */
.chbob{-webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 90%);mask-image:linear-gradient(to bottom,#000 58%,transparent 90%)}
.chsmoke{position:absolute;left:8%;right:22%;bottom:-6%;height:42%;pointer-events:none;z-index:1}
.chsmoke i{position:absolute;bottom:0;width:46%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(70,40,90,.85),rgba(40,20,60,.5) 45%,rgba(20,10,30,0) 70%);filter:blur(6px);animation:chsmoke 3.4s ease-in-out infinite}
.chsmoke i:nth-child(1){left:-4%}.chsmoke i:nth-child(2){left:20%;animation-delay:-1.1s}.chsmoke i:nth-child(3){left:44%;animation-delay:-2.2s}.chsmoke i:nth-child(4){left:62%;animation-delay:-.6s}.chsmoke i:nth-child(5){left:30%;bottom:22%;width:40%;animation-delay:-1.7s;opacity:.7}
@keyframes chsmoke{0%,100%{transform:translateY(0) scale(1);opacity:.85}50%{transform:translateY(-12%) scale(1.15);opacity:1}}
.chmonname{bottom:12%!important;z-index:2}
.chview{transition:transform 1.8s cubic-bezier(.3,.8,.3,1)}
.chview.zoom{transform:scale(var(--z,2))}
.chtok.jump .ch-face{animation:chjump .9s ease-out 1}
@keyframes chjump{0%{transform:translateY(0)}45%{transform:translateY(-120%)}100%{transform:translateY(0)}}
.chtok.won{z-index:5}
.chbig.winbox{top:84%}
.chtok.unplaced{opacity:0}
.chtok.unplaced .ch-face{transform:scale(.3)}
.chtok .ch-face{transition:transform .35s cubic-bezier(.3,1.6,.5,1),border-color .3s}
.chbig{transition:top .8s cubic-bezier(.3,.8,.3,1),transform .8s cubic-bezier(.3,.8,.3,1),font-size .8s}
.chbig.introbox{top:10.5%;transform:translate(-50%,0);font-size:clamp(1.1rem,2.2vw,1.8rem);padding:10px 22px;max-width:62%}
.chbig.introbox small{font-size:.5em}
.chtiles i.deny{animation:chdeny .3s ease-in-out 4 alternate!important;box-shadow:inset 0 0 0 3px #ff1744,0 0 24px #ff1744!important}
@keyframes chdeny{from{background:rgba(255,23,68,.25)}to{background:rgba(255,23,68,.95)}}
.chmon.defeat .chbob{animation:chdefeat 2s ease-in forwards}
.chmon.defeat .chsmoke{animation:chsmokeout 2.2s ease-in forwards}
@keyframes chdefeat{0%{transform:translateY(0) rotate(0)}12%{transform:translateX(-3%) rotate(-6deg)}24%{transform:translateX(3%) rotate(6deg)}36%{transform:translateX(-3%) rotate(-8deg)}50%{transform:translateY(4%) rotate(10deg) scaleY(.95)}100%{transform:translateY(70%) rotate(-24deg) scale(.7);opacity:0;filter:brightness(2.5) saturate(0)}}
@keyframes chsmokeout{0%{opacity:1}60%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(1.8)}}
.chcard{position:absolute;left:44%;top:52%;transform:translate(-50%,-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(10,4,20,.88);border:2px solid rgba(255,210,63,.5);border-radius:24px;padding:22px 40px;box-shadow:0 20px 60px rgba(0,0,0,.7);animation:chcardin .35s cubic-bezier(.3,1.5,.5,1)}
.chcard.hidden{display:none}
.chcard-face{width:clamp(90px,12vw,150px);height:clamp(90px,12vw,150px);border-radius:50%;overflow:hidden;border:4px solid #fff;background:#2a1640}
.chcard-face svg,.chcard-face img{width:100%;height:100%;display:block}
.chcard b{font-size:clamp(1.2rem,2.2vw,1.8rem)}
.chcard span{color:#b9a9d6;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.chcard strong{font-size:clamp(2.4rem,5vw,4.2rem);color:#ffd23f;line-height:1;font-variant-numeric:tabular-nums}
.chcard.final strong{animation:chfinal .25s ease-in-out 4 alternate}
.chcard.final{border-color:#ffd23f;box-shadow:0 0 40px rgba(255,210,63,.5),0 20px 60px rgba(0,0,0,.7)}
@keyframes chfinal{from{transform:scale(1);color:#ffd23f}to{transform:scale(1.25);color:#fff}}
@keyframes chcardin{from{transform:translate(-50%,-50%) scale(.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.chmon.lurk{opacity:0;transition:none}
.chmon.rise .chbob{animation:chrise 1.8s cubic-bezier(.2,1.2,.4,1) 1,chbob .9s ease-in-out 1.8s infinite}
@keyframes chrise{from{transform:translateY(60%) scale(.7);opacity:0;filter:brightness(3)}to{transform:translateY(0) scale(1);opacity:1;filter:none}}
.chmon{transition:left 1.4s ease-in-out,opacity .6s}
.chtok.bonk .ch-face{animation:chbonk .5s ease-out 1}
@keyframes chbonk{0%{transform:translateX(0) rotate(0)}20%{transform:translateX(-14%) rotate(-14deg) scale(.92)}45%{transform:translateX(6%) rotate(8deg)}70%{transform:translateX(-3%) rotate(-4deg)}100%{transform:none}}
.chtok.vanish{opacity:0!important;transition:opacity .8s}
.chtok.won{transition:left 1.6s ease-in-out,top 1.6s ease-in-out}
.chbob .goblin{width:100%;height:auto;display:block}
.chbob .phoenix{width:100%;height:auto;display:block}
.chmon[data-mon="diva"] .goblin,.chmon[data-mon="diva"] .phoenix,.chmon[data-mon="goblin"] .diva,.chmon[data-mon="goblin"] .phoenix,.chmon[data-mon="phoenix"] .diva,.chmon[data-mon="phoenix"] .goblin,.chmon:not([data-mon]) .goblin,.chmon:not([data-mon]) .phoenix{display:none}
.chmon[data-mon="goblin"] .chmonname{color:#7dff4f}
.chmon[data-mon="goblin"] .chsmoke i{background:radial-gradient(circle,rgba(40,90,40,.85),rgba(20,60,20,.5) 45%,rgba(10,30,10,0) 70%)}
.chtok .ch-face{position:relative}
.chtok.doomed .ch-face::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(255,23,68,.45);mix-blend-mode:multiply}
.chtok.doomed .ch-face{box-shadow:0 0 0 3px rgba(255,23,68,.6),0 0 18px #ff1744}
.chwheel{position:absolute;left:44%;top:56%;transform:translate(-50%,-50%);z-index:7}
.chwheel.hidden{display:none}
.whl{position:relative;width:min(56vh,440px);height:min(56vh,440px);border-radius:50%;border:6px solid #ffd23f;box-shadow:0 0 0 6px rgba(10,4,20,.9),0 0 50px rgba(255,210,63,.45),inset 0 0 40px rgba(0,0,0,.6);animation:whin .4s cubic-bezier(.3,1.5,.5,1)}
@keyframes whin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.whs{position:absolute;left:25%;top:25%;width:50%;height:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.whs svg{width:72%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 92%);mask-image:linear-gradient(to bottom,#000 60%,transparent 92%)}
.whs b{font-size:clamp(.7rem,1.2vw,1rem);text-shadow:0 2px 4px #000;white-space:nowrap;margin-top:-8%}
.wharrow{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0;pointer-events:none}
.wharrow::before{content:'';position:absolute;left:-9px;top:-46%;width:18px;height:0;border-left:9px solid transparent;border-right:9px solid transparent}
.wharrow::after{content:'';position:absolute;left:-7px;bottom:0;width:14px;height:calc(min(56vh,440px) * .42);background:linear-gradient(#fff,#ffd23f);border-radius:7px 7px 3px 3px;clip-path:polygon(50% 0,100% 18%,70% 18%,70% 100%,30% 100%,30% 18%,0 18%);box-shadow:0 0 12px rgba(0,0,0,.6)}
.whhub{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ffd23f 55%,#b8860b);box-shadow:0 0 12px rgba(0,0,0,.7)}
.chmon[data-mon="phoenix"] .chmonname{color:#ffb347}
.chmon[data-mon="phoenix"] .chsmoke i{background:radial-gradient(circle,rgba(120,60,20,.8),rgba(80,40,10,.5) 45%,rgba(40,20,5,0) 70%)}
.chmon .phflames{animation:phflame .5s ease-in-out infinite alternate;transform-origin:140px 60px}
@keyframes phflame{from{transform:scaleY(.9)}to{transform:scaleY(1.12)}}
.whwin{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0}
.chwheel.landed .whwin{animation:whflash .4s ease-in-out infinite alternate}
@keyframes whflash{from{opacity:.25}to{opacity:1}}
.whs{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.whs.won svg{filter:drop-shadow(0 0 14px #ffd23f) drop-shadow(0 0 4px #fff)}
.whs.won b{color:#ffd23f}
.chwheel.landed .whl{box-shadow:0 0 0 6px rgba(10,4,20,.9),0 0 80px rgba(255,210,63,.9),inset 0 0 40px rgba(0,0,0,.6)}
.chready{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px;font-size:.38em}
.chready span{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.45;transition:opacity .3s,transform .3s}
.chready span.on{opacity:1;transform:scale(1.08)}
.chready span>i{width:56px;height:56px;border-radius:50%;overflow:hidden;border:3px solid #6b5a80;display:block;background:#2a1640}
.chready span.on>i{border-color:#16a34a;box-shadow:0 0 14px #16a34a}
.chready i svg,.chready i img{width:100%;height:100%;display:block}
.chtok.fall{opacity:0!important;transition:top 1.2s cubic-bezier(.5,0,.9,.5),opacity .6s .7s!important}
.chtok.fall .ch-face{animation:chtumble 1.2s ease-in forwards}
@keyframes chtumble{to{transform:rotate(200deg) scale(.6)}}
.chreadyq{font-size:.42em;color:#ffd23f;margin-top:14px;font-weight:900}
.chrbar{height:8px;border-radius:4px;background:rgba(255,255,255,.12);margin:12px auto 0;width:80%;overflow:hidden}
.chrbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff2fa8,#ffd23f)}
.chmon.defeat .chmonname{opacity:0;transition:opacity .6s}
.chdanger{background:#ff1744;color:#fff;font-weight:900;border-radius:12px;padding:10px 12px;margin:0;animation:chwarn .5s ease-in-out infinite alternate}
.chdanger.hidden{display:none}
/* volume button: always in the top right corner of the host screen */
.volbtn{position:fixed;top:12px;right:12px;z-index:90;width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(20,10,35,.9);color:#fff;font-size:1.2rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.volpanel{position:fixed;top:62px;right:12px;z-index:90;background:#170a26;border:2px solid rgba(255,210,63,.5);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-width:220px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.volpanel.hidden{display:none}
.volpanel label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:.9rem;color:#fff}
.volpanel input{width:100%;accent-color:#ffd23f}
header{padding-right:66px!important}
.chhead{padding-right:66px!important}
.chtro{transition:opacity .5s .9s,transform .6s .9s}
.chtro.taken{opacity:0;transform:translate(-50%,-140%) rotateX(-26deg) scale(.4)}
.chmon.grab{transition:left 1.6s cubic-bezier(.5,0,.3,1)}
.chmon.grab .chbob{animation:chbob .35s ease-in-out infinite}
.endbtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* the way into the Final Chase: lights out, a line in the dark, then a circle opens on the runway */
.chblack{position:fixed;inset:0;z-index:80;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 1s ease}
.chblack.on{opacity:1}
.chblack.gone{opacity:0;transition:opacity .6s ease}
.chblack div{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-align:center}
.chblack b{font-size:clamp(2rem,5vw,4rem);font-weight:900;opacity:0;animation:chwhisper 1.2s ease .8s forwards}
.chblack span{font-size:clamp(1rem,2vw,1.5rem);color:#ff8aa3;opacity:0;animation:chwhisper 1.2s ease 1.6s forwards}
@keyframes chwhisper{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.chase.iris{animation:chiris 1.6s cubic-bezier(.6,0,.2,1) both}
@keyframes chiris{0%{clip-path:circle(0% at 50% 55%);filter:brightness(2.2)}60%{filter:brightness(1.2)}100%{clip-path:circle(150% at 50% 55%);filter:none}}
/* the Phoenix Queen: a battle cry when she is picked, and when she is defeated she bursts into flames and feathers */
.chcry{font-size:.55em;color:#ffb347;text-shadow:0 0 18px rgba(255,140,0,.8);margin-bottom:6px}
.phburst{position:absolute;left:42%;top:45%;width:0;height:0;z-index:4;pointer-events:none}
.phburst i{position:absolute;left:0;top:0;font-style:normal;font-size:2rem;opacity:0}
.chmon[data-mon="phoenix"].defeat .phburst i{animation:phfly 1.6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes phfly{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1.2)}}
.chmon[data-mon="phoenix"].defeat .chbob{animation:phburn 1.4s ease-in forwards}
@keyframes phburn{0%{transform:none;filter:none;opacity:1}35%{transform:scale(1.08);filter:brightness(2.4) saturate(1.6) drop-shadow(0 0 40px #ff8c00);opacity:1}100%{transform:scale(1.25) translateY(-6%);filter:brightness(4) drop-shadow(0 0 60px #ffb347);opacity:0}}
/* building the scene on the way in */
.chase .chstg,.chase .chtiles,.chase .chbeams,.chase .chstg-ring,.chase .chpyro{transition:transform 1s cubic-bezier(.2,.9,.3,1.1),opacity .8s ease}
.chase.nostage .chstg{transform:translateX(120%);opacity:0}
.chase.norunway .chtiles{transform:translateX(-110%);opacity:0}
.chase.nolights .chbeams i:not(.lit){opacity:0}
.chase.nolights .chstg-ring:not(.lit){opacity:0}
.chase.nolights .chtro:not(.lit){filter:brightness(.4)}
.chase.nolights .chstg-floor:not(.lit) i{animation:none;opacity:.15}
.chase .chbeams i,.chase .chstg-ring,.chase .chpyro{transition:transform 1s cubic-bezier(.2,.9,.3,1.1),opacity .06s linear}
.chase.nolights .lit{animation:chlitpop .5s ease-out}
.chase.nolights .chbeams i.lit{animation:chlitpop .5s ease-out,chbeam 4s ease-in-out infinite alternate}
.chase.nolights .chstg-ring.lit{animation:chlitpop .5s ease-out,chring 2.4s ease-in-out infinite}
@keyframes chlitpop{0%{filter:brightness(3)}100%{filter:brightness(1)}}

/* ---------- round summary: the scoreboard moves to the middle and grows ---------- */
.recapbg{position:fixed;inset:0;z-index:60;background:rgba(6,0,18,.7);backdrop-filter:blur(4px);opacity:0;transition:opacity .6s ease}
.recapbg.on{opacity:1}
.recap{position:fixed;z-index:61;width:min(620px,88vw);max-height:90vh;overflow:hidden;transform-origin:0 0;margin:0;padding:24px 28px}
.recap.go{transition:transform .9s cubic-bezier(.22,.8,.3,1),opacity .5s ease}
.recap.leave{transition:opacity .5s ease,transform .5s ease;opacity:0;transform:scale(.92)}
.recap h3{margin:0 0 4px;font-size:1.9rem;text-align:center}
.recap .board{gap:10px}
.recap .board li{display:grid;grid-template-columns:2em minmax(0,1fr) auto 3.4em;align-items:center;gap:12px;font-size:1.35rem;padding:.55em .9em}
.recap .board .char{width:2em;height:2em}
.recap .rk{opacity:.7;text-align:center}
.recap .tot{text-align:right;font-variant-numeric:tabular-nums}
.recap .gain{color:var(--ok);font-size:.85em;animation:rcgain .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(1.1s + var(--i) * .22s)}
.recap li.best{outline:2px solid var(--yellow);box-shadow:0 0 18px rgba(255,210,63,.35)}
.recap li.best .gain::after{content:' ⭐'}
.recap .recapnext{text-align:center;margin:16px 0 0;opacity:.8;font-weight:700}
@keyframes rcgain{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
aside.recapgone{visibility:hidden}

.recap.tally{width:min(640px,90vw)}
.recap.tally .board li{display:grid;grid-template-columns:minmax(0,1fr) 3.4em 4em;align-items:center;gap:12px}
.recap.tally .rstep{text-align:center;margin:0 0 6px;font-weight:800;color:var(--yellow);font-size:1.15rem;min-height:1.4em}
.recap.tally .rstep.rpop{animation:rcgain .45s cubic-bezier(.3,1.6,.5,1)}
.recap.tally .gain{opacity:0;animation:none;text-align:left;font-size:1.05em;font-weight:900;color:#3dff9a;text-shadow:0 0 10px rgba(61,255,154,.5);transition:transform .45s ease-in,opacity .45s ease-in}
.recap.tally .gain.on{opacity:1;animation:rcpop .4s cubic-bezier(.3,1.6,.5,1)}
.recap.tally .gain.on.off{animation:none;opacity:0;transform:translateX(-2.2em) scale(.6)}
@keyframes rcpop{from{transform:scale(.3)}to{transform:none}}
.recap.tally .board .tot{font-size:1.15em;text-align:right;font-variant-numeric:tabular-nums}
.recap.tally .recapnext{opacity:0;transition:opacity .5s}
.recap.tally .recapnext.on{opacity:.85}
.recap.tally li.best{outline:2px solid var(--yellow);box-shadow:0 0 22px rgba(255,210,63,.45)}
.recap.tally li.best .who::after{content:' 👑'}

/* ---------- the audience on both sides of the runway ---------- */
.chcrowd{position:absolute;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;transition:transform 1.1s cubic-bezier(.2,.9,.3,1.05),opacity .8s ease,filter .6s ease}
.chase.nolights .chcrowd{filter:brightness(.3)}
.chcrowd.back{left:19%;right:27.5%;top:-8%;height:18%;-webkit-mask-image:linear-gradient(#000 55%,transparent 92%);mask-image:linear-gradient(#000 55%,transparent 92%)}
.chcrowd.front{left:12%;right:23%;bottom:-5%;height:18%}
.chcrowd .fan{height:100%;width:auto;flex:none;transform-origin:50% 100%;animation:fanjump var(--d) ease-in-out infinite alternate;animation-delay:var(--dl);overflow:visible}
/* each row of fans: packed, overlapping; the far rows are smaller, darker and a little hazy */
.chcrowd .crow{position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-end}
.chcrowd.back .crow .fan{margin:0 -7px}
.chcrowd.back .r0{bottom:38%;height:46%;left:3%;right:3%;filter:brightness(.42) blur(.6px)}
.chcrowd.back .r1{bottom:22%;height:56%;left:1.5%;right:1.5%;filter:brightness(.55) blur(.3px)}
.chcrowd.back .r2{bottom:4%;height:66%;filter:brightness(.7)}
.chcrowd.front .crow .fan{margin:0 -9px}
.chcrowd.front .r0{bottom:22%;height:78%;left:4%;right:2%;filter:brightness(.7)}
.chcrowd.front .r1{bottom:-6%;height:96%}
.chcrowd .fan .arm{transform-box:fill-box;animation:fanwave calc(var(--d) * 1.3) ease-in-out infinite alternate;animation-delay:var(--dl)}
.chcrowd .fan .arm.l{transform-origin:100% 100%}.chcrowd .fan .arm.r{transform-origin:0 100%}
.chcrowd .fan.p0 .arm.l,.chcrowd .fan.p2 .arm.l{animation-name:fanwavel}
.chcrowd .fan .stick{filter:drop-shadow(0 0 3px currentColor)}
@keyframes fanjump{from{transform:translateY(0) scale(var(--s))}to{transform:translateY(calc(-1 * var(--h))) scale(var(--s)) rotate(2deg)}}
@keyframes fanwave{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes fanwavel{from{transform:rotate(14deg)}to{transform:rotate(-14deg)}}
.chase.nocrowd .chcrowd.back{transform:translateY(60%);opacity:0}
.chase.nocrowd .chcrowd.front{transform:translateY(110%);opacity:0}
.recap{background:#1b0f30}

/* the spotlights also fall faintly across the LED stage */
.chstage.over{z-index:3;pointer-events:none;opacity:.32;mix-blend-mode:screen}

/* the stage flames: off while the scene is built, then they burst up */
.chase.nofire .chpyro i{animation:none;opacity:0}   /* the launchers stand on the stage already; only the fire waits */
.chase .chpyro.ign{animation:chignite .9s ease-out}
@keyframes chignite{0%{filter:brightness(3.2)}30%{filter:brightness(2.6)}100%{filter:none}}

/* ---------- overview after the Final Chase ---------- */
.chaseov{width:min(760px,94vw);margin:6px auto 0;display:flex;gap:18px}
.chaseov .ovcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.chaseov.two{width:min(1240px,96vw)}
.chaseov.two .ovcol{gap:6px}
.chaseov .ovrow{display:grid;grid-template-columns:var(--cols,minmax(0,1fr) 6.4em);align-items:center;gap:10px;padding:.5em .9em;border-radius:12px;background:rgba(0,0,0,.28);font-weight:800;font-size:1.15em;animation:rcgain .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.6s + var(--i) * .15s)}
.chaseov .ovrow > span:not(.who){text-align:center;font-variant-numeric:tabular-nums}
.chaseov .ovhead{background:none;font-size:.8em;opacity:.7;padding-top:0;padding-bottom:0;animation:none}
.chaseov .who{display:flex;align-items:center;gap:.5em;min-width:0}
.chaseov .who .char{width:1.9em;height:1.9em;flex:none}
.chaseov .fc{color:var(--yellow)}
.chaseov .ovrow.win{background:var(--yellow);color:#221a00;box-shadow:0 0 24px rgba(255,210,63,.4)}
.chaseov .ovrow.win .fc{color:#221a00}
.chaseov .ovrow.dead{filter:grayscale(1) brightness(.5)}

/* ---------- Eurofan Shop ---------- */
.shopov{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;background:rgba(6,0,18,.72);backdrop-filter:blur(4px)}
.shopcard{width:min(900px,92vw);text-align:center;padding:26px 30px;background:#1b0f30}
.shopcard h2{margin:0;font-size:2.4rem}
.shopitems{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.shopitem{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 14px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,210,63,.35)}
.shopitem .si{font-size:3rem;line-height:1}
.shopitem b{font-size:1.25rem}.shopitem small{opacity:.8}
.shoppers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.shopper{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:99px;background:rgba(0,0,0,.3);opacity:.45;font-weight:700}
.shopper .char{width:28px;height:28px}
.shopper i{font-style:normal}
.shopper.done{opacity:1;box-shadow:0 0 0 2px var(--ok)}
.shopper.done i::after{content:' ✓';color:var(--ok)}
.shopui{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:12px}
.shopbtn{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px 14px;border-radius:14px;border:0;background:rgba(255,255,255,.08);color:inherit;font:inherit;cursor:pointer;box-shadow:inset 0 0 0 2px transparent}
.shopbtn .si{font-size:2rem}
.shopbtn .char{width:36px;height:36px;flex:none}
.shopbtn b{display:block}.shopbtn small{opacity:.75}
.shopbtn.on{box-shadow:inset 0 0 0 3px var(--yellow);background:rgba(255,210,63,.14)}
.bagbtn{position:fixed;right:14px;bottom:14px;z-index:40;width:58px;height:58px;border-radius:50%;border:0;background:var(--yellow);font-size:1.7rem;box-shadow:0 6px 20px rgba(0,0,0,.45);cursor:pointer}
.bagbtn b{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;border-radius:11px;background:#ff2f6d;color:#fff;font-size:.8rem;line-height:22px}
.bagpanel{position:fixed;left:12px;right:12px;bottom:84px;z-index:41;max-height:70vh;overflow:auto;padding:14px;border-radius:18px;background:#1b0f30;box-shadow:0 10px 40px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:8px}
.bagpanel h3{margin:0 0 4px}
.ptoast{position:fixed;left:12px;right:12px;top:12px;z-index:42;padding:12px 14px;border-radius:14px;background:var(--yellow);color:#221a00;font-weight:800;text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.45)}

/* many players (9+): names on a dark pill so they stay readable, and the front crowd ducks a little */
.chase.many .chtok .ch-name{font-size:15px;background:rgba(10,4,24,.78);padding:1px 7px;border-radius:99px;margin-top:2px;position:relative;z-index:2}
.chase.many .chcrowd.front{height:11%}

/* a big group: the winner's header gets smaller and the table shrinks to fit the screen (see chaseOverview) */
.end.ovmany{gap:10px;justify-content:flex-start;padding-top:8px}
.end.ovmany .endhead .winchar .char{width:80px;height:80px}
.end.ovmany .endhead .winchar{gap:8px}
.end.ovmany h1{font-size:clamp(2rem,4.5vw,3.2rem);margin:0}
.end.ovmany .endhead{min-height:0}
.end.ovmany .winballoon{font-size:.8em}
.chaseov{font-size:16px}

.shopbtn:disabled{opacity:.45;cursor:default}
.shopflash{position:fixed;left:50%;top:18px;z-index:70;transform:translate(-50%,-160%);padding:12px 22px;border-radius:999px;background:var(--yellow);color:#221a00;font-weight:900;font-size:1.4rem;box-shadow:0 8px 30px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.3,1.4,.5,1);white-space:nowrap}
.shopflash.on{transform:translate(-50%,0)}

/* Smoke Machine: the answers disappear in drifting smoke; only the letters stay */
.smoked .opt{position:relative;overflow:hidden}
.smoked .opt .otx{filter:blur(9px);opacity:.35}
.smoked .opt::after{content:'';position:absolute;inset:-20% -40%;pointer-events:none;background:radial-gradient(ellipse at 20% 50%,rgba(225,220,240,.85),transparent 55%),radial-gradient(ellipse at 60% 40%,rgba(200,195,225,.8),transparent 50%),radial-gradient(ellipse at 90% 60%,rgba(235,230,250,.85),transparent 55%);animation:smokedrift 6s ease-in-out infinite alternate}
.smoked .opt:nth-child(2n)::after{animation-delay:-2s}.smoked .optcol:nth-child(2n) .opt::after{animation-delay:-3s}
@keyframes smokedrift{from{transform:translateX(-12%)}to{transform:translateX(12%)}}
.smoked .opt b{position:relative;z-index:1}

/* an item lands: a big announcement over everything */
.shophit{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(6,0,18,.72);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s ease}
.shophit.on{opacity:1}
.shophit .shcard{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:min(1000px,92vw);text-align:center;transform:scale(.6);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.shophit.on .shcard{transform:none}
.shophit .shicon{font-size:clamp(5rem,14vw,10rem);line-height:1;animation:shbounce 1s ease-in-out infinite alternate;filter:drop-shadow(0 0 30px rgba(255,210,63,.5))}
.shophit .shtxt{font-size:clamp(1.6rem,3.6vw,3rem);font-weight:900;line-height:1.15;text-shadow:0 4px 18px rgba(0,0,0,.7)}
.shophit .shdel{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.shophit .shd{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(0,0,0,.45);font-size:1.5rem;opacity:0}
.shophit.on .shd{animation:shpop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.6s + var(--i) * .35s)}
.shophit .shd .char{width:52px;height:52px}
.shophit .shd em{font-style:normal;font-weight:900;font-size:2.2rem}
.shophit .shd.neg em{color:#ff4d6d}.shophit .shd.pos em{color:#3dff9a}
@keyframes shbounce{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-14px) rotate(6deg)}}
@keyframes shpop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}

.shophit.onstage{inset:auto;border-radius:16px;background:rgba(6,0,18,.86);backdrop-filter:none;overflow:hidden}
.shophit.onstage .shcard{gap:10px;max-width:92%}
.shophit.onstage .shicon{font-size:clamp(3.5rem,8vw,7rem)}
.shophit.onstage .shtxt{font-size:clamp(1.3rem,2.4vw,2.2rem)}
.shophit.onstage .shd{font-size:1.2rem}.shophit.onstage .shd em{font-size:1.8rem}.shophit.onstage .shd .char{width:42px;height:42px}
.shophit .shd.neu em{color:#ffd23f;font-size:1.5rem}

/* ---------- The Envelope, Please ---------- */
.bombov{position:fixed;inset:0;z-index:55;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#5a1a7a 0%,#2a0d45 45%,#0c0418 80%);font-family:inherit}
.bombov .bbeams i{position:absolute;top:-10%;width:22%;height:120%;background:linear-gradient(rgba(255,255,255,.14),transparent 70%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);transform-origin:50% 0;animation:chbeam 5s ease-in-out infinite alternate}
.bombov .bbeams i:nth-child(1){left:2%;animation-delay:-1s}.bombov .bbeams i:nth-child(2){left:26%;animation-delay:-3s}.bombov .bbeams i:nth-child(3){left:52%;animation-delay:-2s}.bombov .bbeams i:nth-child(4){left:76%;animation-delay:-4s}
.bombov .bfloor{position:absolute;left:8%;right:8%;bottom:-18vh;height:46vh;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#3c1a62,#1a0a30 70%);box-shadow:0 0 0 4px rgba(255,210,63,.6),0 0 60px rgba(255,47,168,.45)}
.bombov .bhead{position:absolute;top:2.5vh;left:0;right:0;text-align:center;font-weight:900;font-size:clamp(1.6rem,3.4vw,2.8rem);text-shadow:0 4px 18px rgba(0,0,0,.6)}
.bombov .bhead small{display:block;font-size:.45em;opacity:.75;font-weight:700}
.bombov .bstrip{position:absolute;top:13vh;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 6vw}
.bombov .bps{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;background:rgba(0,0,0,.35);font-weight:800;font-size:.95rem}
.bombov .bps .char{width:28px;height:28px}.bombov .bps i{font-style:normal}
.bombov .bps.now{box-shadow:0 0 0 3px var(--yellow);background:rgba(255,210,63,.18)}
.bombov .bps.out{opacity:.4;filter:grayscale(1)}
.bombov .bhosts .ehost{position:absolute;bottom:20vh;height:52vh;width:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3.2s ease-in-out infinite alternate}
.bombov .bhosts .him{left:6vw}.bombov .bhosts .her{right:6vw;animation-delay:-1.6s}
@keyframes ehbob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-8px) rotate(1deg)}}
.bombov[data-st="boom"] .bhosts .ehost{animation:ehshock .25s linear 6}
@keyframes ehshock{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px) rotate(-4deg)}75%{transform:translateX(10px) rotate(4deg)}}
.bombov .bplayer{position:absolute;left:50%;bottom:37vh;transform:translateX(-50%)}
.bombov .bme{display:flex;flex-direction:column;align-items:center;gap:6px;animation:bmewalk .9s cubic-bezier(.3,1.4,.5,1) both}
.bombov .bme .char{width:20vh;height:20vh;border-radius:50%;box-shadow:0 0 0 5px #fff,0 0 40px rgba(255,210,63,.6)}
.bombov .bme b{font-size:clamp(1.3rem,2.6vw,2.2rem);font-weight:900;text-shadow:0 3px 10px #000}
.bombov .bme.boom{animation:bmeboom 1.6s cubic-bezier(.2,.8,.3,1) forwards}
.bombov .bme.win .char{box-shadow:0 0 0 6px var(--yellow),0 0 70px var(--yellow)}
.bombov .bme.win{animation:bmewin .7s ease-in-out infinite alternate}
@keyframes bmewalk{from{opacity:0;transform:translateX(-40vw) scale(.6)}to{opacity:1;transform:none}}
@keyframes bmeboom{0%{transform:none;filter:none}15%{transform:scale(1.25);filter:brightness(3)}100%{transform:translate(30vw,-60vh) rotate(720deg) scale(.2);opacity:0;filter:grayscale(1)}}
@keyframes bmewin{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.bombov .bmsg{position:absolute;left:0;right:0;bottom:21vh;text-align:center;font-size:clamp(1.3rem,2.8vw,2.4rem);font-weight:900;text-shadow:0 4px 16px rgba(0,0,0,.8);padding:0 18vw}
.bombov .benvs{position:absolute;left:0;right:0;bottom:4vh;display:flex;justify-content:center;flex-wrap:wrap;gap:14px;padding:0 4vw}
.bombov .benv{position:relative;width:clamp(70px,9vw,120px);height:clamp(48px,6.2vw,82px);border-radius:8px;background:linear-gradient(135deg,#ffe27a,#d9a520);box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#3a2600;font-weight:900;animation:benvin .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * .08s);transition:transform .3s}
.bombov .benv::before{content:'';position:absolute;left:0;right:0;top:0;height:55%;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:8px 8px 0 0}
.bombov .benv .bno{font-size:1.5rem;position:relative}
.bombov .benv.picked{transform:translateY(-22px) scale(1.15);box-shadow:0 0 0 4px #fff,0 0 34px var(--yellow);animation:benvshake .18s linear infinite}
.bombov .benv.open{background:#fff;color:#14094f}
.bombov .benv.open .bno{display:none}
.bombov .benv.open .bin{font-size:2.2rem;line-height:1}
.bombov .benv.open small{font-size:.6rem;font-weight:800;max-width:95%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bombov .benv.bomb{background:radial-gradient(circle,#ff9a1f,#c4150f 60%,#2a0000);box-shadow:0 0 50px #ff4d1f}
@keyframes benvin{from{opacity:0;transform:translateY(40px) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes benvshake{0%,100%{rotate:0deg}25%{rotate:-3deg}75%{rotate:3deg}}
.bombov[data-st="boom"]{animation:bflash .9s ease-out}
@keyframes bflash{0%{box-shadow:inset 0 0 0 100vmax rgba(255,240,200,.95)}40%{box-shadow:inset 0 0 0 100vmax rgba(255,80,30,.45)}100%{box-shadow:inset 0 0 0 100vmax rgba(255,80,30,0)}}
/* the phone: envelopes to tap */
.bombui{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:14px}
.benvbtn{aspect-ratio:3/2;border:0;border-radius:10px;background:linear-gradient(135deg,#ffe27a,#d9a520);color:#3a2600;font-size:1.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.benvbtn b{font-size:1rem}
.benvbtn.open{background:#fff;opacity:.5}
.benvbtn:disabled{cursor:default}

/* ---------- The Green Room Boutique ---------- */
.shopov.boutique{display:block;background:radial-gradient(ellipse at 50% 20%,#3a1663 0%,#1d0a36 55%,#0b0416 100%);backdrop-filter:none}
.boutique .bqsign{position:absolute;top:3vh;left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:clamp(1.8rem,4.2vw,3.6rem);color:#fff;padding:.25em .9em;border-radius:18px;border:4px solid #ff2fa8;box-shadow:0 0 22px #ff2fa8,inset 0 0 18px rgba(255,47,168,.6);text-shadow:0 0 10px #ff8ad0,0 0 24px #ff2fa8;animation:bqneon 2.4s ease-in-out infinite}
@keyframes bqneon{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.7}52%{opacity:1}}
.boutique .bqbunting{position:absolute;top:16vh;left:-2vw;right:-2vw;display:flex;justify-content:space-between;font-size:clamp(1.4rem,2.6vw,2.4rem)}
.boutique .bqbunting::before{content:'';position:absolute;left:0;right:0;top:.3em;height:2px;background:rgba(255,255,255,.35)}
.boutique .bqbunting span{position:relative;transform-origin:50% 0;animation:bqsway 2.6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.23s)}
@keyframes bqsway{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.boutique .bqshelf{position:absolute;right:4vw;width:38vw;text-align:center;font-size:clamp(1.6rem,3vw,2.8rem);letter-spacing:.3em;padding:.2em 0 .35em;border-bottom:10px solid #6a3b1f;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.boutique .bqshelf.top{top:26vh}.boutique .bqshelf.low{top:39vh}
.boutique .bqkeeper{position:absolute;left:5vw;bottom:6vh;height:62vh}
.boutique .bqkeeper .keeper{height:100%;width:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3s ease-in-out infinite alternate}
.boutique .bqbubble{position:absolute;left:21vw;top:27vh;max-width:30vw;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1rem,1.7vw,1.5rem);padding:.7em 1em;border-radius:18px 18px 18px 4px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.boutique .bqcounter{position:absolute;left:28vw;right:3vw;bottom:15vh;padding:14px 18px;border-radius:18px;background:linear-gradient(#5b2b85,#3a1663);box-shadow:0 0 0 3px rgba(255,210,63,.6),0 14px 30px rgba(0,0,0,.6)}
.boutique .shopitems{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:0}
.boutique .shopitem{padding:10px 6px;gap:4px;animation:benvin .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * .07s)}
.boutique .shopitem .si{font-size:2.2rem}.boutique .shopitem b{font-size:.85rem;line-height:1.15}
.boutique .shoppers{position:absolute;left:28vw;right:3vw;bottom:5vh}
.boutique .bqshelf{width:46vw;white-space:nowrap;letter-spacing:.12em;font-size:clamp(1.2rem,2.3vw,2.1rem)}
.boutique .bqshelf.top{top:25vh}.boutique .bqshelf.low{top:36vh}
.boutique .shopitems{grid-template-columns:repeat(5,1fr)}

.opt .rankpts{margin-left:auto;background:var(--yellow);color:#221a00;font-weight:900;border-radius:999px;padding:2px 10px;font-size:1rem}
.opt .rankpts.hidden{display:none}


/* the presenters in front of the video screen, and the screen as a big LED wall */
.host .stage{box-shadow:0 0 0 4px #1b1030,0 0 0 6px rgba(255,210,63,.45),0 0 40px rgba(255,47,168,.35)}
.shosts{position:absolute;inset:0;pointer-events:none;z-index:6}
.shosts .ehost{position:absolute;bottom:-3%;height:80%;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.7));animation:ehbob 3.2s ease-in-out infinite alternate}
.shosts .ehost.him{left:1%}.shosts .ehost.her{right:1%;animation-delay:-1.6s}
.shosts .hbub{position:absolute;top:6%;max-width:38%;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(.9rem,1.5vw,1.25rem);line-height:1.2;padding:.6em .9em;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.shosts .hbub.him{left:6%;border-bottom-left-radius:4px;transform-origin:0 100%}
.shosts .hbub.her{right:6%;border-bottom-right-radius:4px;transform-origin:100% 100%}
.shosts .hbub.on{opacity:1;transform:none}

/* ---------- entrances: everything slides in ---------- */
@keyframes inLeft{from{transform:translateX(-110vw);opacity:0}to{transform:none;opacity:1}}
@keyframes inRight{from{transform:translateX(110vw);opacity:0}to{transform:none;opacity:1}}
@keyframes inTop{from{transform:translateY(-110vh);opacity:0}to{transform:none;opacity:1}}
@keyframes inBottom{from{transform:translateY(80vh);opacity:0}to{transform:none;opacity:1}}
@keyframes inUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.enter-ease,.game.enter .stage,.game.enter aside,.game.enter #qtext,.game.enter #qopts,.game.enter .shosts .ehost{animation-duration:.8s;animation-timing-function:cubic-bezier(.2,.9,.3,1.08);animation-fill-mode:both}
.game.enter .stage{animation-name:inTop}
.game.enter .shosts .ehost.him{animation-name:inLeft;animation-delay:.35s}
.game.enter .shosts .ehost.her{animation-name:inRight;animation-delay:.35s}
.game.enter aside{animation-name:inRight;animation-delay:.7s}
.game.enter #qtext,.game.enter #qopts{animation-name:inBottom;animation-delay:1s}
.end.enter > *{animation:inBottom .8s cubic-bezier(.2,.9,.3,1.08) both}
.end.enter > *:nth-child(2){animation-delay:.2s}.end.enter > *:nth-child(n+3){animation-delay:.45s}
#qtext.qin{animation:inUp .5s cubic-bezier(.2,.9,.3,1.1) both}
#qopts.qin .optcol,#qopts.qin > .opt{animation:inUp .5s cubic-bezier(.2,.9,.3,1.1) both}
#qopts.qin .optcol:nth-child(1){animation-delay:.12s}#qopts.qin .optcol:nth-child(2){animation-delay:.22s}#qopts.qin .optcol:nth-child(3){animation-delay:.32s}#qopts.qin .optcol:nth-child(4){animation-delay:.42s}#qopts.qin .optcol:nth-child(n+5){animation-delay:.5s}
/* the boutique and the envelope stage build up piece by piece */
.boutique.enter .bqsign{animation:inTop .8s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.enter .bqbunting{animation:inTop .8s .15s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.enter .bqkeeper{animation:inLeft .9s .3s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.enter .bqshelf{animation:inRight .8s .55s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.enter .bqcounter,.boutique.enter .shoppers{animation:inBottom .8s .85s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.enter .bqbubble{animation:inUp .5s 1.4s both}
.bombov.enter .bhead,.bombov.enter .bstrip{animation:inTop .8s cubic-bezier(.2,.9,.3,1.08) both}
.bombov.enter .ehost.him{animation:inLeft .9s .35s cubic-bezier(.2,.9,.3,1.08) both}
.bombov.enter .ehost.her{animation:inRight .9s .35s cubic-bezier(.2,.9,.3,1.08) both}
.bombov.enter .bfloor{animation:inBottom .8s .6s cubic-bezier(.2,.9,.3,1.08) both}

.recap.standings .ebuline{opacity:0;transition:opacity .4s;font-size:1.15rem;color:var(--yellow)}
.recap.standings .ebuline.on{opacity:1}
.recap.standings{transform:none}

/* the boutique on the big screen: the shop, the shopkeeper and what she says (the items are on the phones) */
.boutique .bqbubble{left:30vw;top:52vh;max-width:44vw;font-size:clamp(1.3rem,2.4vw,2.2rem);padding:.8em 1.1em}
.boutique .shoppers{left:30vw;bottom:6vh}

.boutique .bqshelf{left:30vw;right:3vw;width:auto;display:flex;justify-content:space-around;align-items:flex-end;letter-spacing:0;white-space:normal;padding:0 1vw .3em}
.boutique .bqshelf.top{top:23vh}.boutique .bqshelf.low{top:38vh}
.boutique .bqi{display:flex;flex-direction:column;align-items:center;gap:2px;width:7.5vw;text-align:center}
.boutique .bqi .si{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1}
.boutique .bqi b{font-size:clamp(.6rem,.9vw,.85rem);line-height:1.1;opacity:.85}
.boutique .bqbubble{top:55vh}

/* leaving the studio: the presenters go first, then the screen, the scoreboard and the question */
@keyframes outLeft{to{transform:translateX(-110vw);opacity:0}}
@keyframes outRight{to{transform:translateX(110vw);opacity:0}}
@keyframes outTop{to{transform:translateY(-110vh);opacity:0}}
@keyframes outBottom{to{transform:translateY(80vh);opacity:0}}
.game.leaving .shosts .ehost.him{animation:outLeft .6s cubic-bezier(.6,0,.8,.4) forwards}
.game.leaving .shosts .ehost.her{animation:outRight .6s cubic-bezier(.6,0,.8,.4) forwards}
.game.leaving .shosts .hbub{opacity:0}
.game.leaving .stage{animation:outTop .7s .3s cubic-bezier(.6,0,.8,.4) forwards}
.game.leaving aside{animation:outRight .7s .55s cubic-bezier(.6,0,.8,.4) forwards}
.game.leaving #qtext,.game.leaving #qopts,.game.leaving #revealui,.game.leaving .bar{animation:outBottom .7s .8s cubic-bezier(.6,0,.8,.4) forwards}

/* the opening: the presenters wait in the wings until the studio is in, then walk on */
.game.opening .shosts .ehost{opacity:0;animation:none}
.game.opening .shosts.arrive .ehost{opacity:1}
.game.opening .shosts.arrive .ehost.him{animation:inLeft 1s cubic-bezier(.2,.9,.3,1.08) both,ehbob 3.2s 1s ease-in-out infinite alternate}
.game.opening .shosts.arrive .ehost.her{animation:inRight 1s .15s cubic-bezier(.2,.9,.3,1.08) both,ehbob 3.2s 1.2s ease-in-out infinite alternate}

/* a more shoppy boutique: wall panels, flag pennants, a disco ball, fans, hats, a clothes rack and bags */
.boutique .bqwall{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 90px),linear-gradient(transparent 70%,rgba(0,0,0,.35));pointer-events:none}
.boutique .bqbunting{top:15vh;align-items:flex-start}
.boutique .bqpen{width:clamp(28px,3.2vw,46px);height:clamp(36px,4.2vw,58px);clip-path:polygon(0 0,100% 0,50% 100%);overflow:hidden;background:#fff;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.boutique .bqpen img{width:180%;height:70%;object-fit:cover;margin-left:-40%;display:block}
.boutique .bqdisco{position:absolute;left:3vw;top:20vh;font-size:clamp(2.5rem,5vw,4.5rem);animation:bqspin 4s linear infinite;filter:drop-shadow(0 0 18px rgba(255,255,255,.6))}
.boutique .bqdisco::before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:14vh;background:rgba(255,255,255,.4)}
@keyframes bqspin{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
.boutique .bqsale{position:absolute;left:14vw;top:21vh;transform:rotate(-8deg);background:#ffd23f;color:#b0103a;font-weight:900;text-align:center;line-height:1.05;padding:.4em .7em;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.5);font-size:clamp(.8rem,1.3vw,1.2rem)}
.boutique .bqsale b{font-size:1.25em}
.boutique .bqfans{position:absolute;left:4vw;top:34vh;display:flex;gap:.3vw;font-size:clamp(1.6rem,2.8vw,2.6rem)}
.boutique .bqfans span{display:inline-block;transform-origin:50% 100%;animation:bqsway 1.8s ease-in-out infinite alternate}
.boutique .bqfans span:nth-child(odd){animation-delay:-.9s;filter:hue-rotate(140deg)}
.boutique .bqhats{position:absolute;left:30vw;right:3vw;top:16.5vh;display:none}
.boutique .bqhats{display:flex;justify-content:space-around;top:auto;bottom:35vh;left:auto;right:3vw;width:26vw;font-size:clamp(1.6rem,2.8vw,2.6rem);border-bottom:8px solid #6a3b1f;padding-bottom:.15em}
.boutique .bqrack{position:absolute;right:31vw;bottom:13vh;display:flex;gap:.3vw;font-size:clamp(1.8rem,3.2vw,3rem);padding-top:1vh}
.boutique .bqrack .rail{position:absolute;left:-1vw;right:-1vw;top:0;height:6px;border-radius:3px;background:#c9c9d6}
.boutique .bqrack span{transform-origin:50% 0;animation:bqsway 2.4s ease-in-out infinite alternate}
.boutique .bqrack span:nth-child(even){animation-delay:-1.2s}
.boutique .bqfloor{position:absolute;right:3vw;bottom:13vh;display:flex;gap:1vw;font-size:clamp(1.8rem,3.2vw,3rem)}
.boutique .bqbubble{left:30vw;top:auto;bottom:24vh;max-width:36vw}
.boutique .shoppers{left:30vw;right:auto;bottom:4vh}

.boutique .bqfans{left:auto;right:4vw;top:47vh}
.boutique .bqbubble{bottom:21vh;max-width:30vw;font-size:clamp(1rem,1.8vw,1.6rem)}
.boutique .bqpen{background:#ff2fa8}
.boutique .bqfans{top:51vh}

/* the presenters only come on when they have something to say */
.shosts .ehost{transition:translate .6s cubic-bezier(.3,.8,.3,1),opacity .5s}
.shosts.away .ehost.him{translate:-160% 0;opacity:0}
.shosts.away .ehost.her{translate:160% 0;opacity:0}
.shosts.away .hbub{opacity:0}

/* the boutique slides away */
.boutique.leaving .bqbubble{animation:outBottom .5s cubic-bezier(.6,0,.8,.4) forwards}
.boutique.leaving .bqkeeper{animation:outLeft .7s .1s cubic-bezier(.6,0,.8,.4) forwards}
.boutique.leaving .bqshelf,.boutique.leaving .bqhats,.boutique.leaving .bqfans,.boutique.leaving .bqfloor{animation:outRight .7s .25s cubic-bezier(.6,0,.8,.4) forwards}
.boutique.leaving .bqrack,.boutique.leaving .shoppers{animation:outBottom .7s .25s cubic-bezier(.6,0,.8,.4) forwards}
.boutique.leaving .bqsign,.boutique.leaving .bqbunting,.boutique.leaving .bqdisco,.boutique.leaving .bqsale{animation:outTop .7s .4s cubic-bezier(.6,0,.8,.4) forwards}
.boutique.leaving{transition:background-color .4s 1s}

/* a card between the presenters: smaller, so they stand beside it */
.cover.introcard .covericon,#cover.introcard #covericon{font-size:clamp(3rem,7vw,6rem)}
#cover.introcard #covertext,#cover.introcard .covertext{font-size:clamp(1.6rem,3.4vw,3rem);max-width:56%;margin:0 auto;line-height:1.05}
/* the opening: the two presenters stand close together in the middle of the stage */
.shosts .ehost{transition:translate .6s cubic-bezier(.3,.8,.3,1),opacity .5s,left .8s ease,right .8s ease}
.game.opening .shosts .ehost.him{left:33%}
.game.opening .shosts .ehost.her{right:33%}
.game.opening .shosts .hbub.him{left:12%;max-width:30%}
.game.opening .shosts .hbub.her{right:12%;max-width:30%}
.game.opening .shosts .hbub.him{left:6%;max-width:26%}
.game.opening .shosts .hbub.her{right:6%;max-width:26%}
.boutique .bqbunting::before{top:.15em}
.boutique .bqbunting{top:15.6vh}
.boutique .bqbunting::before{top:0;height:3px;background:rgba(255,255,255,.5)}
.boutique .bqpen{margin-top:3px}

/* presenters who are off stage stay off while the studio slides in */
.game.enter .shosts.away .ehost{animation:none}
/* the rest of the boutique slides in too */
.boutique.enter .bqdisco,.boutique.enter .bqsale{animation:inTop .8s .2s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.enter .bqhats,.boutique.enter .bqfans,.boutique.enter .bqfloor{animation:inRight .8s .6s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.enter .bqrack{animation:inBottom .8s .75s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.enter .bqwall{animation:fadein .6s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* side by side in the middle when they talk; they step apart when something appears on the screen between them */
.shosts.together .ehost.him{left:33%}
.shosts.together .ehost.her{right:33%}
.shosts.together .hbub.him{left:6%;max-width:26%}
.shosts.together .hbub.her{right:6%;max-width:26%}
.bombov .benv .bflag{height:clamp(22px,3vw,40px);width:auto;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.3);display:block}

/* the envelopes always fit in one row, so the text above never runs through them */
.bombov .benvs{flex-wrap:nowrap;gap:10px;padding:0 3vw}
.bombov .benv{width:min(clamp(70px,9vw,120px),calc((94vw - (var(--n,4) - 1) * 10px) / var(--n,4)));height:auto;aspect-ratio:3/2}
.bombov .benv .bno{font-size:clamp(.9rem,1.6vw,1.5rem)}
.bombov .benv.open .bin{font-size:clamp(1.2rem,2.2vw,2.2rem)}
/* items in the bag, on the scoreboard */
#board .binv:empty { padding: 0; background: none; }
#board .binv { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px 0 6px; padding: 1px 7px 1px 3px; border-radius: 999px; background: rgba(255,63,164,.16); border: 1px solid rgba(255,63,164,.35); font-size: .8em; font-weight: 800; white-space: nowrap; }
#board .binv .bagico { width: 1.75em; height: 1.75em; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
#board .binv:empty { margin: 0; border: 0; }

/* presenters talking: the rest of the line waits, invisible, so the balloon keeps its size */
.hbub .unsaid, .bqbubble .unsaid { visibility: hidden; }

/* ---------- The Green Room scene (the presenters take everyone there before a Green Room game) ---------- */
.grov{position:fixed;inset:0;z-index:55;overflow:hidden;background:#120724;font-family:inherit;color:#fff}
.grov .grwall{position:absolute;inset:0 0 30% 0;background:
  radial-gradient(circle,rgba(255,220,150,.55) 0 1.5px,transparent 2.5px) 0 0/34px 34px,
  radial-gradient(ellipse at 50% 30%,#3a1d66 0%,#21103f 55%,#120724 100%)}
.grov .grwall::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,#120724)}
.grov .grfloor{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(#2a1450,#160a2c);box-shadow:inset 0 10px 30px rgba(0,0,0,.5)}
.grov .grsign{position:absolute;top:9vh;left:0;right:0;margin:0 auto;width:fit-content;z-index:3;font-weight:900;font-size:clamp(1.8rem,4vw,3.4rem);padding:.15em .7em;border-radius:18px;background:rgba(18,7,36,.7);border:3px solid #6ff2b0;color:#eafff4;text-shadow:0 0 12px #3ff29a,0 0 28px #3ff29a;box-shadow:0 0 18px rgba(63,242,154,.6),inset 0 0 18px rgba(63,242,154,.35);white-space:nowrap;animation:bqneon 3s ease-in-out infinite}
.grov .grflags{position:absolute;top:1vh;left:0;right:0;display:flex;justify-content:space-between;padding:0 2vw;pointer-events:none}
.grov .grflags i{width:4.2vw;max-width:56px;aspect-ratio:3/2;transform-origin:50% 0;animation:bqsway 2.6s ease-in-out infinite alternate;box-shadow:0 3px 8px rgba(0,0,0,.4);background:#3a2560}
.grov .grflags i:nth-child(odd){animation-delay:-1.3s;margin-top:1.2vh}
.grov .grflags img{width:100%;height:100%;object-fit:cover;display:block}
/* the sofas, in three tiers: the stars at the back, the players at the front */
.grov .grrow{position:absolute;left:15vw;right:15vw;display:flex;justify-content:center;align-items:flex-end;gap:2.5vw}
.grov .grrow.back{bottom:45vh;transform:scale(.72);transform-origin:50% 100%;filter:brightness(.8)}
.grov .grrow.mid{bottom:25vh;transform:scale(.86);transform-origin:50% 100%;filter:brightness(.9)}
.grov .grrow.front{bottom:3.5vh}
.grov .grsofa{position:relative;padding:0 1.8vh 3.4vh;--c:#8e1b3a}
.grov .grsofa::before{content:'';position:absolute;left:0;right:0;bottom:6vh;height:15vh;border-radius:3vh 3vh 1vh 1vh;background:linear-gradient(color-mix(in srgb,var(--c) 85%,#fff),var(--c));box-shadow:0 8px 20px rgba(0,0,0,.45)}
.grov .grseat{position:relative;display:flex;gap:1.2vh;align-items:flex-end}
.grov .grfront{position:absolute;left:-.8vh;right:-.8vh;bottom:3.4vh;height:9vh;border-radius:1.8vh;background:linear-gradient(color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 75%,#000));box-shadow:0 6px 14px rgba(0,0,0,.5);z-index:2}
.grov .grnames{position:absolute;left:1.8vh;right:1.8vh;bottom:0;display:flex;gap:1.2vh;z-index:3}
.grov .grnames b{width:11vh;margin:0 -.6vh;text-align:center;font-size:clamp(.7rem,1.15vw,1rem);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.grov .grp{position:relative;width:11vh;height:22vh;animation:grbob 2.4s ease-in-out infinite alternate;animation-delay:var(--d)}
.grov .grp.hop{animation:grhop 1.6s ease-in-out infinite;animation-delay:var(--d)}
.grov .grp .char{position:absolute;left:50%;bottom:11.5vh;width:9.6vh;height:9.6vh;margin-left:-4.8vh;border:3px solid rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(0,0,0,.45);z-index:1}
.grov .grp .grbody{position:absolute;left:50%;bottom:2vh;width:10vh;margin-left:-5vh;height:10.5vh;border-radius:5vh 5vh 1.2vh 1.2vh;box-shadow:inset 0 -8px 12px rgba(0,0,0,.25)}
.grov .grflag{position:absolute;bottom:13vh;left:70%;width:2px;height:11vh;background:#ddd;z-index:2;transform-origin:50% 100%;animation:grwave 1.1s ease-in-out infinite alternate;animation-delay:var(--d)}
.grov .grflag img{position:absolute;top:0;left:2px;width:6.5vh;aspect-ratio:3/2;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.4);background:#3a2560}
/* the presenters, at the sides, with their own balloons */
.grov .grhosts .ehost{position:absolute;bottom:4vh;height:54vh;width:auto;z-index:4;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3.2s ease-in-out infinite alternate}
.grov .grhosts .him{left:2vw}.grov .grhosts .her{right:2vw;animation-delay:-1.6s}
.grov .grbub{position:absolute;top:22vh;max-width:30vw;z-index:6;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.25;padding:.65em 1em;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.grov .grbub.him{left:4vw;border-bottom-left-radius:4px;transform-origin:0 100%}
.grov .grbub.her{right:4vw;border-bottom-right-radius:4px;transform-origin:100% 100%}
.grov .grbub.on{opacity:1;transform:none}
.grov .grbub .unsaid{visibility:hidden}
@keyframes grbob{from{transform:translateY(0)}to{transform:translateY(-.6vh)}}
@keyframes grhop{0%,55%,100%{transform:translateY(0)}70%{transform:translateY(-2.8vh)}85%{transform:translateY(0)}}
@keyframes grwave{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
/* coming in, and going (on to the performance) */
.grov.enter{animation:fadein .5s both}
.grov.enter .grsign{animation:inTop .8s .2s cubic-bezier(.2,.9,.3,1.08) both}
.grov.enter .grrow.back .grsofa{animation:inUp .7s .4s cubic-bezier(.2,.9,.3,1.08) both}
.grov.enter .grrow.mid .grsofa{animation:inUp .7s .65s cubic-bezier(.2,.9,.3,1.08) both}
.grov.enter .grrow.front .grsofa{animation:inUp .7s .9s cubic-bezier(.2,.9,.3,1.08) both}
.grov.enter .ehost.him{animation:inLeft .9s 1s cubic-bezier(.2,.9,.3,1.08) both}
.grov.enter .ehost.her{animation:inRight .9s 1s cubic-bezier(.2,.9,.3,1.08) both}
.grov.leaving{transition:opacity .9s,transform .9s;opacity:0;transform:scale(1.12)}

/* ---------- Where the Hell Is Edgar? (on top of the Green Room scene styles: wall, floor, presenters, balloons) ---------- */
.clueov{background:#0b0616}
.clueov .grwall{background:radial-gradient(circle,rgba(160,190,255,.25) 0 1.2px,transparent 2px) 0 0/30px 30px,radial-gradient(ellipse at 50% 20%,#1d2350 0%,#120d2c 55%,#0b0616 100%)}
.clueov .clspot{position:absolute;left:50%;top:-10vh;width:46vw;height:80vh;margin-left:-23vw;background:radial-gradient(ellipse at 50% 100%,rgba(255,240,200,.22),transparent 60%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);pointer-events:none}
.clueov .clsign{top:3vh;border-color:#ffd23f;color:#fff6d6;text-shadow:0 0 12px #ffb000,0 0 26px #ff8a00;box-shadow:0 0 18px rgba(255,180,0,.55),inset 0 0 18px rgba(255,180,0,.3);font-size:clamp(1.5rem,3.2vw,2.8rem)}
.clueov .clped{position:absolute;left:50%;top:15vh;width:16vh;margin-left:-8vh;height:16vh}
.clueov .clbase{position:absolute;left:0;right:0;bottom:0;height:5vh;border-radius:6px;background:linear-gradient(#d9d4e6,#8b84a3);box-shadow:0 8px 18px rgba(0,0,0,.5)}
.clueov .clgone{position:absolute;left:0;right:0;bottom:4.5vh;text-align:center;font-size:9vh;line-height:1;opacity:.12;filter:grayscale(1);transition:opacity .6s,filter .6s,transform .6s}
.clueov .clgone.back{opacity:1;filter:none;transform:scale(1.15);animation:shpop .6s both}
.clueov .cltape{position:absolute;left:-14vh;right:-14vh;top:7vh;z-index:2;transform:rotate(-8deg);background:#ffd23f;color:#111;font-weight:900;font-size:clamp(.6rem,1vw,.85rem);letter-spacing:.12em;text-align:center;padding:2px 0;white-space:nowrap;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.5)}
.clueov .clrows{position:absolute;left:17vw;right:17vw;top:34vh;display:flex;flex-direction:column;gap:1.4vh;z-index:3}
.clueov .clrow{display:flex;align-items:center;gap:.8vw}
.clueov .cllab{width:9vw;flex:none;text-align:right;font-weight:900;font-size:clamp(.7rem,1.1vw,1rem);color:#9dffcf;line-height:1.1}
.clueov .clcard{flex:1;min-width:0;height:9vh;border-radius:10px;background:linear-gradient(#fdf7e6,#e9dfc2);color:#2a1a00;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 5px 12px rgba(0,0,0,.45);transition:transform .4s,opacity .4s,box-shadow .4s,filter .4s}
.clueov .clcard span{font-size:3.4vh;line-height:1}
.clueov .clcard b{font-size:clamp(.6rem,.95vw,.85rem);font-weight:900;text-align:center;line-height:1.1;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.clueov .clcard.dim{opacity:.25;filter:grayscale(1);transform:scale(.92)}
.clueov .clcard.hit{transform:scale(1.14);box-shadow:0 0 0 4px #ffd23f,0 0 30px rgba(255,210,63,.8);z-index:2;animation:shpop .5s both}
.clueov.enter .clrow{animation:inUp .7s cubic-bezier(.2,.9,.3,1.08) both}
.clueov.enter .clrow:nth-child(1){animation-delay:.5s}.clueov.enter .clrow:nth-child(2){animation-delay:.7s}.clueov.enter .clrow:nth-child(3){animation-delay:.9s}
.clueov .clmsg{position:absolute;left:17vw;right:17vw;top:68vh;text-align:center;font-weight:900;font-size:clamp(1rem,2vw,1.6rem);text-shadow:0 3px 10px rgba(0,0,0,.7);z-index:3}
.clueov .clplayers{position:absolute;left:17vw;right:17vw;bottom:3vh;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;z-index:3}
.clueov .clp{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;background:rgba(0,0,0,.45);font-weight:800;font-size:clamp(.75rem,1.1vw,.95rem)}
.clueov .clp .char{width:30px;height:30px}
.clueov .clp em{font-style:normal;font-size:1.05em;padding:0 2px;border-radius:6px}
.clueov .clp em.ok{background:rgba(85,194,122,.35)}.clueov .clp em.no{background:rgba(232,69,124,.3);filter:grayscale(.5)}
.clueov .clp em.wait{opacity:.6}
.clueov .clp i{font-style:normal;opacity:.6;font-weight:600}
.clueov .clp strong{color:#ffd23f;margin-left:4px}
.clueov .clp.solved{box-shadow:0 0 0 3px #ffd23f;background:rgba(255,210,63,.18)}
.clueov .grbub{top:30vh;max-width:13vw;font-size:clamp(.8rem,1.2vw,1.1rem)}
.clueov .grhosts .ehost{height:46vh}
/* the phone: the detective's notebook */
.clueui{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:10px}
.clset>span{display:block;font-weight:900;color:var(--yellow);margin-bottom:6px;text-align:left}
.clset>div{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.clbtn{display:flex;align-items:center;gap:6px;border:2px solid transparent;border-radius:10px;padding:8px;background:rgba(255,255,255,.1);color:inherit;font:inherit;font-weight:800;font-size:.9rem;text-align:left;cursor:pointer}
.clbtn i{font-style:normal;font-size:1.2rem}
.clbtn.out{opacity:.45;text-decoration:line-through}
.clbtn.sel{border-color:var(--yellow);background:rgba(255,210,63,.2);opacity:1}

/* Edgar, the mascot: a MISSING poster while he is gone, and Edgar himself, back on stage, at the end */
.clueov .clsign{border-color:#ffd23f;color:#fff6d6;text-shadow:0 0 12px #ffb000,0 0 26px #ff8a00;box-shadow:0 0 18px rgba(255,180,0,.55),inset 0 0 18px rgba(255,180,0,.3)}
.clueov .cllab{color:#ffd23f}
.clueov .clposter{position:absolute;left:50%;top:12.5vh;width:15vh;margin-left:-7.5vh;padding:.8vh .8vh 1vh;background:#f4ead2;color:#3a2600;text-align:center;border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,.55);transform:rotate(-3deg);transition:opacity .5s,transform .5s}
.clueov .clposter b{display:block;font-size:2.4vh;letter-spacing:.12em;color:#b3122e;line-height:1}
.clueov .clposter .edgar{display:block;height:13vh;width:auto;margin:.4vh auto;background:#e6dcc2;border-radius:3px}
.clueov .clposter small{display:block;font-size:1.2vh;font-weight:800}
.clueov.found .clposter{opacity:0;transform:rotate(-20deg) scale(.6)}
.clueov .cledgar{position:absolute;left:50%;top:12vh;height:21vh;margin-left:-7vh;opacity:0;transform:translateY(4vh) scale(.6);transition:opacity .5s,transform .6s cubic-bezier(.3,1.6,.5,1);z-index:4}
.clueov .cledgar .edgar{height:100%;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.clueov.found .cledgar{opacity:1;transform:none;animation:edgarhop 1s .6s ease-in-out infinite alternate}
.clueov .edraven{transform-origin:160px 160px;animation:edgarcaw 2.2s ease-in-out infinite}
@keyframes edgarhop{from{translate:0 0}to{translate:0 -1.6vh}}
@keyframes edgarcaw{0%,80%,100%{transform:none}88%{transform:rotate(-8deg)}}
/* Lynda pops in with a gift when nobody unmasked Edgar */
.clueov .clynda{position:absolute;left:20vw;bottom:13vh;height:42vh;z-index:7;animation:inUp .8s cubic-bezier(.2,.9,.3,1.08) both}
.clueov.withlynda .clrows{opacity:.18;transition:opacity .6s}
.clueov .clynda .keeper{height:100%;width:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3s ease-in-out infinite alternate}
.clueov .clynda .grbub.lynda{position:absolute;top:2vh;left:100%;width:34vw;max-width:34vw;margin-left:1vw;border-bottom-left-radius:4px;transform-origin:0 100%;font-size:clamp(1rem,1.7vw,1.4rem)}

/* Edgar: wider balloons up top (the cards fill the middle), a row lights up while it is explained, and the phone notebook */
.clueov .grbub{top:13vh;max-width:25vw;font-size:clamp(.85rem,1.3vw,1.15rem)}
.clueov .grbub.him{left:2vw}.clueov .grbub.her{right:2vw}
.clueov .clrow{transition:transform .4s,filter .4s}
.clueov .clrow.lit{transform:scale(1.04);filter:drop-shadow(0 0 14px rgba(255,210,63,.7))}
.clueov .clrow.lit .cllab{color:#fff;text-shadow:0 0 10px #ffd23f}
.clbtn.ro{cursor:default}
.clbtn.new{opacity:1;text-decoration:none;border-color:#55c27a;background:rgba(85,194,122,.25);box-shadow:0 0 12px rgba(85,194,122,.6);animation:shpop .4s both}
.clbtn{transition:opacity .35s,background .35s,border-color .35s}

/* Edgar's story first: no cards yet, the MISSING poster big in the middle, the presenters close together;
   then they step apart and the rows come in one by one as they are explained */
.clueov .clposter{transition:top .9s cubic-bezier(.3,1.2,.5,1),transform .9s cubic-bezier(.3,1.2,.5,1),opacity .5s}
.clueov.story .clposter{top:24vh;transform:rotate(-3deg) scale(2.1)}
.clueov.intro .clrow:not(.on){opacity:0;transform:translateY(4vh);pointer-events:none}
.clueov .clrow{transition:opacity .6s,transform .6s,filter .4s}
.clueov.story .clmsg,.clueov.story .clplayers{opacity:0}
.clueov .clmsg,.clueov .clplayers{transition:opacity .6s}
.clueov .grhosts .ehost{transition:left .9s cubic-bezier(.3,1.1,.5,1),right .9s cubic-bezier(.3,1.1,.5,1)}
.clueov.story .grhosts .him{left:27vw}.clueov.story .grhosts .her{right:27vw}
.clueov .grbub{transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1),left .9s,right .9s}
.clueov.story .grbub.him{left:14vw}.clueov.story .grbub.her{right:14vw}

/* Edgar's start: the poster alone, then a framed photo of Teya & Salena (top right), then the presenters walk on */
.clueov .clframe{position:absolute;right:5vw;top:13vh;width:17vh;padding:1vh 1vh 1.4vh;background:linear-gradient(135deg,#d9b44a,#8a6a1c);border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.6),inset 0 0 0 3px rgba(0,0,0,.25);transform:rotate(3deg);transition:opacity .8s,transform .8s cubic-bezier(.3,1.4,.5,1);z-index:2}
.clueov .clframe img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 40%;border:3px solid #2a1c0a;background:#3a2c4a}
.clueov .clframe small{display:block;margin-top:.6vh;font-size:1.05vh;font-weight:800;line-height:1.2;color:#2a1c0a;text-align:center}
.clueov.noframe .clframe{opacity:0;transform:rotate(3deg) scale(.6)}
.clueov.nohosts .grhosts .ehost{opacity:0;translate:0 14vh}
.clueov .grhosts .ehost{transition:left .9s cubic-bezier(.3,1.1,.5,1),right .9s cubic-bezier(.3,1.1,.5,1),opacity .7s,translate .8s cubic-bezier(.3,1.3,.5,1)}
.clueov.intro.enter .ehost.him,.clueov.intro.enter .ehost.her{animation:none}

.clueov.intro.enter .clrow{animation:none}
/* the phone notebook after a question: compact, so every card is in view while the new clues come in */
.clueui.compact{gap:6px;margin-top:2px}
.clueui.compact .clset>span{margin-bottom:3px;font-size:.85rem}
.clueui.compact .clset>div{gap:4px}
.clueui.compact .clbtn{padding:5px 8px;font-size:.8rem;border-radius:8px}
.clueui.compact .clbtn i{font-size:1rem}

/* Edgar: the fastest right answer gets an extra clue, and stands out */
.host .opts.votelist .voters span.fastest,.host .opts.votelist .opt.right+.voters span.fastest{background:#ffd23f;color:#2a1a00;box-shadow:0 0 0 2px #fff,0 0 18px rgba(255,210,63,.9)}
.host .opts.votelist .voters span.fastest b{color:#2a1a00}

/* Edgar: the balloons right by the presenters' heads (they may cover the cards) */
.clueov .grbub{top:31vh;max-width:24vw}
.clueov .grbub.him{left:9vw;border-bottom-left-radius:4px}.clueov .grbub.her{right:9vw;border-bottom-right-radius:4px}
.clueov.story .grbub.him{left:15vw}.clueov.story .grbub.her{right:15vw}

/* ---------- Hold That Note (on top of the Green Room scene styles: wall, floor, presenters, balloons) ---------- */
.noteov{background:#0d0620}
.noteov .grwall{background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 2px,transparent 2px 60px),repeating-linear-gradient(65deg,rgba(255,255,255,.05) 0 2px,transparent 2px 80px),radial-gradient(ellipse at 50% 30%,#ff3fa4 0%,#b0127a 40%,#3a0a3e 80%,#14061e 100%)}
.noteov .grfloor{background:linear-gradient(#ff5cb8,#a3127a 30%,#3a0a3e);box-shadow:inset 0 6px 0 rgba(255,255,255,.35),inset 0 10px 30px rgba(0,0,0,.3)}
.noteov .ntspot{position:absolute;left:50%;top:-10vh;width:56vw;height:110vh;margin-left:-28vw;background:radial-gradient(ellipse at 50% 100%,rgba(255,230,250,.25),transparent 62%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);opacity:0;transition:opacity 1s}
.noteov.diva-on .ntspot{opacity:1}
.noteov .ntsign{top:3vh;border-color:#ff7ad9;color:#fff0fb;text-shadow:0 0 12px #ff3fb0,0 0 26px #b04dff;box-shadow:0 0 18px rgba(255,63,176,.5),inset 0 0 18px rgba(176,77,255,.35);font-size:clamp(1.5rem,3.2vw,2.8rem)}
.noteov .ntdiva{position:absolute;left:50%;bottom:-9vh;height:92vh;width:auto;transform:translateX(-50%) translateY(100%);transition:transform 1.6s cubic-bezier(.2,.9,.3,1.05);z-index:2;pointer-events:none}
.noteov .ntdiva .diva{height:100%;width:auto;display:block;filter:drop-shadow(0 0 30px rgba(255,255,255,.45))}
.noteov.diva-on .ntdiva{transform:translateX(-50%) translateY(0)}
.noteov[data-st="sing"] .ntdiva .diva{animation:ntsway 2.4s ease-in-out infinite alternate}
.noteov .dvmouth{transform-origin:300px 140px;transition:transform .25s}
.noteov[data-st="sing"].lead .dvmouth{animation:ntchat .13s ease-in-out infinite alternate}
.noteov[data-st="sing"]:not(.lead) .dvmouth{transform:scale(1.25,1.7);animation:nthold .5s ease-in-out infinite alternate}
@keyframes ntchat{from{transform:scaleY(.25)}to{transform:scaleY(1.15)}}
@keyframes nthold{from{transform:scale(1.22,1.62)}to{transform:scale(1.3,1.78)}}
.noteov .ntnotes{position:absolute;left:50%;top:6%;width:0;height:0}
.noteov .ntnotes i{position:absolute;font-style:normal;font-size:5vh;color:#ffd23f;opacity:0;text-shadow:0 0 10px rgba(255,210,63,.8)}
.noteov[data-st="sing"] .ntnotes i{animation:ntfloat 2.4s linear infinite}
.noteov .ntnotes i:nth-child(1){left:-10vh;animation-delay:0s}.noteov .ntnotes i:nth-child(2){left:6vh;animation-delay:.6s}.noteov .ntnotes i:nth-child(3){left:-4vh;animation-delay:1.2s}.noteov .ntnotes i:nth-child(4){left:10vh;animation-delay:1.8s}
.noteov[data-st="cut"] .ntdiva .diva{animation:ntglitch .5s steps(2) 1}
.noteov .dvmic{transform-box:fill-box;transform-origin:50% 50%}
.noteov[data-st="cut"] .dvmic,.noteov[data-st="done"] .dvmic{animation:ntdrop 1s cubic-bezier(.5,0,1,.6) forwards}
.noteov[data-st="cut"] .dvmouth,.noteov[data-st="done"] .dvmouth{transform:scaleY(1.4);transform-origin:300px 146px}
@keyframes ntdrop{0%{transform:none}100%{transform:translate(-40px,640px) rotate(260deg)}}
.noteov[data-st="cut"] .ntsparks{display:none;position:absolute;left:24%;top:82%;width:12vh;height:12vh;background:radial-gradient(circle,#fff 0 8%,#ffd23f 20%,transparent 60%);animation:shpop .4s both,fadeout 1.2s .4s forwards;border-radius:50%}
.noteov .nttimer{position:absolute;right:5vw;top:13vh;font-weight:900;font-size:clamp(2.6rem,7vw,6rem);font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 20px rgba(255,63,176,.8);opacity:0;transition:opacity .5s;z-index:4}
.noteov .nttimer small{font-size:.4em;margin-left:.1em;opacity:.8}
.noteov[data-st="sing"] .nttimer,.noteov[data-st="cut"] .nttimer,.noteov[data-st="done"] .nttimer{opacity:1}
.noteov[data-st="cut"] .nttimer,.noteov[data-st="done"] .nttimer{color:#ff5a5a;text-shadow:0 0 20px rgba(255,60,60,.9)}
.noteov .ntline{position:absolute;left:8vw;right:8vw;bottom:5vh;height:1.2vh;border-radius:99px;background:rgba(255,255,255,.18);z-index:5;opacity:0;transition:opacity .5s}
.noteov .ntline::before{content:'';position:absolute;left:16.67%;right:0;top:0;bottom:0;border-radius:0 99px 99px 0;background:linear-gradient(90deg,rgba(255,63,176,.45),rgba(255,210,63,.45))}
.noteov[data-st="sing"] .ntline,.noteov[data-st="cut"] .ntline,.noteov[data-st="done"] .ntline{opacity:1}
.noteov .ntscale span{position:absolute;top:1.8vh;transform:translateX(-50%);font-size:clamp(.7rem,1vw,.9rem);font-weight:800;opacity:.7}
.noteov .ntneedle{position:absolute;top:-1.4vh;width:.6vh;height:4vh;margin-left:-.3vh;background:#fff;border-radius:99px;box-shadow:0 0 12px #fff;left:0}
.noteov .ntpin{position:absolute;bottom:2.4vh;transform:translateX(-50%) translateY(calc(var(--i) * -5.2vh));display:flex;flex-direction:column;align-items:center;animation:shpop .4s both}
.noteov .ntpin .char{width:4vh;height:4vh;border:2px solid #fff}
.noteov .ntpin b{font-size:clamp(.6rem,.9vw,.8rem);white-space:nowrap;background:rgba(0,0,0,.6);padding:1px 6px;border-radius:99px;margin-top:2px}
.noteov .ntpin::after{content:'';width:2px;height:calc(1vh + var(--i) * 5.2vh);background:rgba(255,255,255,.6)}
.noteov .ntpin.win b{background:#ffd23f;color:#2a1a00}.noteov .ntpin.win .char{border-color:#ffd23f;box-shadow:0 0 14px #ffd23f}
.noteov .ntmsg{position:absolute;left:20vw;right:20vw;top:14vh;text-align:center;font-weight:900;font-size:clamp(1rem,2vw,1.6rem);text-shadow:0 3px 10px rgba(0,0,0,.8);z-index:4}
.noteov .ntplayers{position:absolute;left:17vw;right:17vw;bottom:3vh;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;z-index:5}
.noteov .ntplayers .clp{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;background:rgba(0,0,0,.55);font-weight:800;font-size:clamp(.75rem,1.1vw,.95rem)}
.noteov .ntplayers .clp .char{width:30px;height:30px}.noteov .ntplayers em{font-style:normal}
.noteov .grbub{top:31vh;max-width:24vw;font-size:clamp(.85rem,1.3vw,1.15rem);z-index:6}
.noteov .grbub.him{left:9vw;border-bottom-left-radius:4px}.noteov .grbub.her{right:9vw;border-bottom-right-radius:4px}
.noteov .grhosts .ehost{height:46vh;z-index:3}
.noteov.diva-on .grhosts .ehost{opacity:.95}
.noteov.leaving{transition:opacity .9s,transform .9s;opacity:0;transform:scale(1.1)}
@keyframes ntsway{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
@keyframes ntmouth{from{transform:scaleY(.8)}to{transform:scaleY(1.25)}}
@keyframes ntfloat{0%{opacity:0;transform:translateY(0) rotate(-10deg)}15%{opacity:1}100%{opacity:0;transform:translateY(-22vh) rotate(15deg)}}
@keyframes ntglitch{0%{transform:translateX(0)}25%{transform:translateX(-1.5vh) skewX(4deg)}50%{transform:translateX(1.5vh) skewX(-4deg)}100%{transform:translateX(0)}}
@keyframes fadeout{to{opacity:0}}
/* the phone: the slider */
.noteui{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:14px}
.noteui .ntval{font-weight:800;font-size:1.1rem;text-align:center}.noteui .ntval b{font-size:3rem;color:var(--yellow);font-variant-numeric:tabular-nums}
.noteui input[type=range]{width:100%;height:44px;accent-color:#ff3fb0}
.noteui .ntends{display:flex;justify-content:space-between;font-weight:700;opacity:.7;margin-top:-8px}

/* Hold That Note: the timeline above her head, with everyone's guess hanging below it; the timer top right; the text lower down */
.noteov .ntdiva{bottom:-17vh}
.noteov .nttimer{top:2vh;right:7vw;font-size:clamp(2rem,4.6vw,4rem)}
.noteov .ntline{top:15vh;bottom:auto;left:8vw;right:8vw}
.noteov .ntscale span{top:auto;bottom:1.6vh}
.noteov .ntpin{bottom:auto;top:1.2vh;transform:translateX(-50%) translateY(calc(var(--i) * 6vh));flex-direction:column-reverse}
.noteov .ntpin::after{height:calc(.6vh + var(--i) * 6vh)}
.noteov .ntpin .char{width:3.4vh;height:3.4vh}
.noteov .ntmsg{top:auto;bottom:12vh;z-index:6}

/* her eyes: open (looking at us) until the note starts, closed while she holds it */
.noteov .dveyesc{display:none}
.noteov[data-st="sing"]:not(.lead) .dveyesc{display:inline}
.noteov[data-st="sing"]:not(.lead) .dveyeso{display:none}

/* Hold That Note: 10% smaller, so the guesses on the line stay clear of her hair; a guess she sings past drops off */
.noteov .ntdiva{height:83vh;bottom:-17vh}
.noteov .ntpin{transition:opacity .3s}
.noteov .ntpin.out{animation:ntout .9s cubic-bezier(.5,0,1,.6) forwards}
@keyframes ntout{0%{opacity:1;translate:0 0;rotate:0deg}25%{translate:0 -1.5vh;rotate:-10deg}100%{opacity:0;translate:0 30vh;rotate:120deg}}

/* Hold That Note: she stands on a square, lit stage (white top with pink LED chevrons, a glowing pink front) */
.noteov .ntstage{position:absolute;left:50%;bottom:2vh;width:50vw;transform:translateX(-50%) translateY(40vh);transition:transform 1.2s cubic-bezier(.2,.9,.3,1.05);z-index:1;filter:drop-shadow(0 0 30px rgba(255,80,180,.6))}
.noteov.diva-on .ntstage{transform:translateX(-50%)}
.noteov .ntstop{height:9vh;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);background:
  repeating-linear-gradient(60deg,rgba(255,92,184,.55) 0 6px,transparent 6px 28px),
  repeating-linear-gradient(-60deg,rgba(255,92,184,.55) 0 6px,transparent 6px 28px),
  linear-gradient(#fff6fb,#ffd2ec)}
.noteov .ntsfront{height:5.5vh;background:linear-gradient(#ff8fd0,#d81b8a 55%,#7a0a52);box-shadow:0 0 24px rgba(255,63,176,.8),inset 0 2px 0 rgba(255,255,255,.7)}
.noteov .ntdiva{height:62vh;bottom:8.5vh}
.noteov.diva-on .ntdiva{transition-delay:.4s}

/* the cause of it all: an electric shock in her microphone, just before it drops */
.noteov .ntshock{position:absolute;left:33%;top:13%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:3;filter:drop-shadow(0 0 6px #7fd8ff) drop-shadow(0 0 14px #3fa9ff)}
.noteov .ntshock svg{width:100%;height:100%;display:block}
.noteov[data-st="cut"] .ntshock{animation:ntzap 1.2s steps(1) forwards}
.noteov[data-st="cut"] .ntshock svg{animation:ntzaprot .12s steps(1) infinite}
.noteov[data-st="cut"] .dvmic,.noteov[data-st="done"] .dvmic{animation-delay:.5s}
.noteov[data-st="cut"] .dvmic{filter:drop-shadow(0 0 6px #9fe2ff)}
@keyframes ntzap{0%{opacity:1}10%{opacity:.2}18%{opacity:1}30%{opacity:.4}38%{opacity:1}55%{opacity:.3}62%{opacity:.9}80%{opacity:.2}90%{opacity:.6}100%{opacity:0}}
@keyframes ntzaprot{0%{transform:rotate(0) scale(1)}33%{transform:rotate(25deg) scale(1.1)}66%{transform:rotate(-20deg) scale(.95)}}
/* (before she is announced she is completely out of sight, below the stage) */
.noteov:not(.diva-on) .ntdiva{transform:translateX(-50%) translateY(130%);opacity:0}
.noteov .ntdiva{transition:transform 1.6s cubic-bezier(.2,.9,.3,1.05),opacity .4s}

/* her mouth: closed (a little smile) until she starts singing */
.noteov:not([data-st="sing"]):not([data-st="cut"]):not([data-st="done"]) .dvmouth{transform:scale(1.1,.18)}
.noteov:not([data-st="sing"]):not([data-st="cut"]):not([data-st="done"]) .dvtongue{opacity:0}
/* the stage and the diva swipe in together, as one, from the right */
.noteov .ntstage,.noteov .ntdiva{transition:transform 1.1s cubic-bezier(.2,.9,.25,1.05),opacity .3s;transition-delay:0s}
.noteov:not(.diva-on) .ntstage{transform:translateX(calc(-50% + 100vw))}
.noteov:not(.diva-on) .ntdiva{transform:translateX(calc(-50% + 100vw));opacity:1}
.noteov.diva-on .ntstage,.noteov.diva-on .ntdiva{transform:translateX(-50%)}
.noteov.diva-on .ntdiva{transition-delay:0s}

/* ---------- The presenters' scene for each party game (on top of the Green Room scene styles) ---------- */
.hsov .hssign{top:4vh;left:0;right:0;margin:0 auto;width:fit-content;font-size:clamp(1.6rem,3.6vw,3rem)}
.hsov .hsspot{position:absolute;left:50%;top:-10vh;width:50vw;height:100vh;margin-left:-25vw;background:radial-gradient(ellipse at 50% 80%,rgba(255,255,255,.2),transparent 60%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);pointer-events:none}
.hsov .hsart{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:2}
.hsov.enter .hsart{animation:shpop .8s .5s cubic-bezier(.3,1.5,.5,1) both}
.hsov.enter .ehost.him{animation:inLeft .9s .6s cubic-bezier(.2,.9,.3,1.08) both}
.hsov.enter .ehost.her{animation:inRight .9s .6s cubic-bezier(.2,.9,.3,1.08) both}
.hsov .grhosts .ehost{height:50vh;bottom:4vh}
.hsov .grbub{top:27vh;max-width:25vw;font-size:clamp(.9rem,1.4vw,1.2rem);z-index:6}
.hsov .grbub.him{left:9vw;border-bottom-left-radius:4px}.hsov .grbub.her{right:9vw;border-bottom-right-radius:4px}
.hsov.leaving{transition:opacity .9s,transform .9s;opacity:0;transform:scale(1.1)}
/* Postcard: an art studio in pastels, a giant postcard with a stamp */
.hs-postcard .grwall{background:radial-gradient(circle,rgba(255,255,255,.3) 0 1.5px,transparent 2.5px) 0 0/28px 28px,radial-gradient(ellipse at 50% 30%,#6f5bd6 0%,#3b2a8a 55%,#1a1240 100%)}
.hs-postcard .hssign{border-color:#ffd166;color:#fff8e6;text-shadow:0 0 12px #ffb000;box-shadow:0 0 18px rgba(255,209,102,.5)}
.hspost{position:relative}
.hspcard{width:46vh;height:30vh;background:#fffaf0;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,.5);display:flex;transform:rotate(-5deg);padding:2vh;gap:2vh;color:#2a1a40}
.hspl{flex:1.3;border-right:2px dashed #c9b8e8;display:flex;flex-direction:column;justify-content:center}
.hspl b{font-size:2vh;font-weight:800;opacity:.7}.hspl i{font-size:4.2vh;font-weight:900;font-style:italic;color:#e8457c;line-height:1}
.hsdoodle{font-size:3.6vh;margin-top:1.4vh;letter-spacing:.4vh}
.hspr{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:2.2vh}
.hsstamp{width:7vh;height:8.5vh;background:#ffd166;border:3px dotted #fff;outline:2px solid #ffd166;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:3.4vh;color:#7a3b00}
.hsline{display:block;width:100%;height:2px;background:#c9b8e8}
.hspencil{position:absolute;right:-6vh;bottom:-5vh;font-size:9vh;transform:rotate(-20deg);animation:hspen 1.2s ease-in-out infinite alternate}
@keyframes hspen{from{transform:rotate(-20deg) translate(0,0)}to{transform:rotate(-8deg) translate(-2vh,-1vh)}}
/* Jury Show: a jury desk with score cards, and the microphone waiting */
.hs-jury .grwall{background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 70px),radial-gradient(ellipse at 50% 25%,#1f6fbf 0%,#14306a 55%,#0a1230 100%)}
.hs-jury .hssign{border-color:#7fd8ff;color:#eefaff;text-shadow:0 0 12px #3fa9ff;box-shadow:0 0 18px rgba(63,169,255,.5)}
.hsjury{display:flex;flex-direction:column;align-items:center}
.hsmic{font-size:16vh;line-height:1;filter:drop-shadow(0 0 24px rgba(127,216,255,.7));animation:ehbob 2s ease-in-out infinite alternate}
.hsdesk{display:flex;gap:1.4vh;margin-top:2vh;padding:1.6vh 2.4vh;background:linear-gradient(#3a3f66,#1e2140);border-radius:10px 10px 4px 4px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.hsdesk span{width:7vh;height:8vh;border-radius:6px;background:#fff;color:#14306a;font-weight:900;font-size:4vh;display:flex;align-items:center;justify-content:center;animation:hscard 1.8s ease-in-out infinite;animation-delay:calc(var(--d,0) * 1s)}
.hsdesk span:nth-child(1){--d:0;background:#ffd23f}.hsdesk span:nth-child(2){--d:.25}.hsdesk span:nth-child(3){--d:.5}.hsdesk span:nth-child(4){--d:.75}
.hsdesklabel{margin-top:1vh;font-weight:900;letter-spacing:.4em;font-size:1.8vh;opacity:.8}
@keyframes hscard{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-2.2vh)}}
/* Lost in Translation: a dictionary, with names of languages floating around it */
.hs-bluff .grwall{background:radial-gradient(circle,rgba(255,255,255,.2) 0 1.2px,transparent 2px) 0 0/30px 30px,radial-gradient(ellipse at 50% 30%,#0f8f86 0%,#0a4d5e 55%,#061c2e 100%)}
.hs-bluff .hssign{border-color:#7ff0d6;color:#ecfffa;text-shadow:0 0 12px #2fe0b8;box-shadow:0 0 18px rgba(47,224,184,.5)}
.hsbluff{position:relative;width:1px;height:1px}
.hsbook{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:18vh;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5))}
.hsw{position:absolute;left:0;top:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));white-space:nowrap;background:#fff;color:#0a4d5e;font-weight:900;font-size:2.4vh;padding:.6vh 1.4vh;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.4);animation:hsfloat 3s ease-in-out infinite alternate}
.hsw:nth-child(odd){animation-delay:-1.5s}
@keyframes hsfloat{from{margin-top:0}to{margin-top:-1.6vh}}
/* The Envelope, Please: golden envelopes, and a bomb with a fizzing fuse */
.hs-bomb .grwall{background:radial-gradient(ellipse at 50% 120%,#5a1a7a 0%,#2a0d45 45%,#0c0418 80%)}
.hs-bomb .hssign{border-color:#ffd23f;color:#fff6d6;text-shadow:0 0 12px #ffb000;box-shadow:0 0 18px rgba(255,180,0,.55)}
.hsbomb{position:relative;width:1px;height:1px}
.hsenv{position:absolute;left:0;top:0;font-size:12vh;transform:translate(calc(-50% + var(--x)),-50%) rotate(var(--r));filter:sepia(1) saturate(3) hue-rotate(5deg) drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.hsenv.hsboom{animation:hsshake .6s ease-in-out infinite}
.hsfuse{position:absolute;left:0;top:0;font-size:7vh;transform:translate(calc(-50% + 8vh),calc(-50% - 9vh));animation:hsfizz .4s steps(2) infinite}
@keyframes hsshake{0%,100%{transform:translate(calc(-50% + var(--x)),-50%) rotate(var(--r))}50%{transform:translate(calc(-50% + var(--x) + .6vh),-50%) rotate(calc(var(--r) + 4deg))}}
@keyframes hsfizz{0%{filter:drop-shadow(0 0 4px #ff7a00)}100%{filter:drop-shadow(0 0 14px #ffd23f)}}
/* Hold That Note: each guess hangs from the bar itself (its line starts on the bar), and when she passes it,
   it drops straight down from that spot (no sideways drift) */
.noteov .ntpin{top:.6vh}
.noteov .ntpin::after{height:calc(1.2vh + var(--i) * 6vh)}
.noteov .ntpin.out{animation:ntout2 .9s cubic-bezier(.5,0,1,.6) forwards}
@keyframes ntout2{0%{opacity:1;translate:0 0}20%{opacity:1;translate:0 -.8vh}100%{opacity:0;translate:0 26vh}}
/* (the pins are centred with 'translate', so the pop-in and drop-out animations, which use 'transform' and 'scale',
   can never shift them off their spot on the bar) */
.noteov .ntpin{transform:none;translate:-50% calc(var(--i) * 6vh);animation:ntpinin .4s both}
.noteov .ntpin.out{animation:ntout3 .9s cubic-bezier(.5,0,1,.6) forwards}
@keyframes ntpinin{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes ntout3{0%{opacity:1;transform:translateY(0)}20%{opacity:1;transform:translateY(-.8vh)}100%{opacity:0;transform:translateY(26vh)}}
/* (the lower row hangs on a longer line, so every line starts right on the bar) */
.noteov .ntpin{translate:-50% 0}
.noteov .ntpin::after{height:calc(1.2vh + var(--i) * 6vh)}
/* ---------- Postcard: the whole game in the presenters' studio ---------- */
.pcov .grhosts .ehost{height:48vh;bottom:3vh}
.pcov .grhosts .him{left:1.5vw}.pcov .grhosts .her{right:1.5vw}
.pcov .grbub{top:12vh;max-width:19vw;font-size:clamp(.8rem,1.2vw,1.05rem)}
.pcov .grbub.him{left:1.5vw}.pcov .grbub.her{right:1.5vw}
.pcov .hssign{top:2.2vh;font-size:clamp(1.2rem,2.6vw,2.2rem)}
.pcov .hsspot{opacity:.7}
.pcmid{position:absolute;left:21vw;right:21vw;top:11vh;bottom:2vh;z-index:2;display:flex;flex-direction:column;align-items:center}
.pcstage{position:relative;width:100%;height:46vh;flex:none;display:flex;align-items:center;justify-content:center}
.pcstage>div{display:none}
.pcov[data-st=dall] .pcblank,.pcov[data-st=wait] .pcslot,.pcov[data-st=card] .pccard,.pcov[data-st=best] .pcbest{display:flex}
/* while everyone draws: the blank postcard, and a pencil at work */
.pcblank{position:relative;flex-direction:column;align-items:center;gap:3vh}
.pcblank .hspcard{transform:rotate(-4deg)}
.pcblank .hspencil{right:-5vh;bottom:4vh;animation:hspen .35s ease-in-out infinite alternate}
.pcbusy{font-size:clamp(1rem,2.2vw,1.8rem);font-weight:900;text-shadow:0 3px 10px rgba(0,0,0,.6);animation:bqneon 2.4s ease-in-out infinite}
/* between two postcards: the letterbox */
.pcslot{flex-direction:column;align-items:center;font-size:16vh;line-height:1;animation:ehbob 1.2s ease-in-out infinite alternate}
.pcslot b{font-size:clamp(1rem,2.2vw,1.8rem);margin-top:2vh;text-shadow:0 3px 10px rgba(0,0,0,.6)}
/* the postcard: the drawing on the front, a stamp, a postmark and who sent it */
.pccard{position:relative;height:42vh;aspect-ratio:4/3;padding:1.6vh;box-sizing:content-box;background:#fffaf0;border-radius:8px;box-shadow:0 18px 44px rgba(0,0,0,.55);transform:rotate(var(--r,-2deg))}
.pccard.in{animation:pcin .8s cubic-bezier(.2,.9,.3,1.15) both}
@keyframes pcin{from{transform:translateY(-70vh) rotate(-25deg);opacity:0}60%{opacity:1}to{transform:rotate(var(--r,-2deg))}}
.pcfront{position:absolute;inset:1.6vh;background:#fff;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pcfront canvas{width:100%;height:100%;display:block}
.pcstamp{position:absolute;top:-2.2vh;right:-2.2vh;width:8vh;height:9.5vh;background:#ffd166;border:3px dotted #fff;outline:2px solid #ffd166;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:3.6vh;color:#7a3b00;transform:rotate(8deg);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.pcpost{position:absolute;top:1vh;right:7.5vh;width:9vh;height:9vh;border:2px solid rgba(60,40,120,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2vh;font-weight:900;letter-spacing:.1vh;color:rgba(60,40,120,.6);transform:rotate(-14deg);background:repeating-linear-gradient(0deg,transparent 0 1.3vh,rgba(60,40,120,.25) 1.3vh 1.5vh)}
.pcfrom{position:absolute;left:-2vh;bottom:-2.6vh;padding:.35em .9em;background:#e8457c;color:#fff;font-weight:900;font-size:clamp(.9rem,1.7vw,1.4rem);border-radius:10px;transform:rotate(-4deg);box-shadow:0 6px 14px rgba(0,0,0,.4);white-space:nowrap}
/* at the answer: the song title is stamped on the card */
.pcmark{position:absolute;left:50%;top:50%;max-width:80%;padding:.3em .8em;border:5px solid #2fbf71;border-radius:12px;color:#1f9e5a;background:rgba(255,255,255,.82);font-weight:900;font-size:clamp(1.1rem,2.6vw,2.2rem);text-align:center;line-height:1.1;text-transform:uppercase;opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.4);pointer-events:none}
.pcmark.on{animation:pcstampin .35s cubic-bezier(.5,0,.8,.5) forwards}
@keyframes pcstampin{to{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
/* the vote: all postcards on the table */
.pcbest{flex-wrap:wrap;justify-content:center;align-content:center;gap:2.4vh 2vw;width:100%;height:100%}
.pctile{position:relative;height:16vh;aspect-ratio:4/3;padding:.9vh;box-sizing:content-box;background:#fffaf0;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.5);transform:rotate(var(--r));animation:pcin .7s var(--d) cubic-bezier(.2,.9,.3,1.15) both;transition:opacity .4s,filter .4s,scale .4s}
.pcbest.n1 .pctile,.pcbest.n2 .pctile{height:32vh}.pcbest.n3 .pctile{height:22vh}.pcbest.n4 .pctile{height:18vh}
.pcbest.n5 .pctile,.pcbest.n6 .pctile,.pcbest.n7 .pctile,.pcbest.n8 .pctile{height:16vh}
.pcbest.n2,.pcbest.n3{gap:3vh 2.4vw}
.pctile canvas{width:100%;height:100%;display:block;background:#fff}
.pctile span{position:absolute;left:-1vh;bottom:-1.8vh;padding:.2em .6em;background:#e8457c;color:#fff;font-weight:900;font-size:clamp(.75rem,1.2vw,1rem);border-radius:8px;white-space:nowrap;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.pctile span b{color:#ffd166;margin-right:.2em}
.pctile.win{scale:1.12;z-index:2;box-shadow:0 0 0 5px #ffd166,0 0 40px rgba(255,209,102,.8)}
.pctile.lose{opacity:.45;filter:grayscale(.6)}
/* underneath: the question, the time and the answers */
.pcq{width:100%;margin-top:3.6vh}
.pcq .bar{margin:0}
.pcq h2{margin:.5vh 0 0;text-align:center;font-size:clamp(1rem,2vw,1.6rem);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.pcov[data-st=wait] .pcq .bar{visibility:hidden}
.pcopts{width:100%;margin-top:1vh}
.pcopts .opt{font-size:clamp(.8rem,1.25vw,1.05rem);padding:.5em .8em;background:rgba(26,16,60,.85);backdrop-filter:blur(4px)}
.pcopts .opt.right{background:var(--ok)}.pcopts .opt.wrong{background:var(--bad)}
.pcans{justify-content:center;margin-top:1.6vh}
.pcans .pl{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7)}
/* the intro's postcard makes way for the game */
.hsart.pcgo{transition:opacity .6s,transform .6s;opacity:0;transform:translate(-50%,-60%) scale(.9)}
/* ---------- The final scores: the presenters show the board (and a courier brings the EBU's envelope) ---------- */
.hs-scores .grwall{background:repeating-linear-gradient(90deg,rgba(255,215,90,.07) 0 2px,transparent 2px 64px),radial-gradient(ellipse at 50% 25%,#3a2a8a 0%,#1d1450 55%,#0c0824 100%)}
.hs-scores .hssign{border-color:#ffd166;color:#fff8e6;text-shadow:0 0 12px #ffb000;box-shadow:0 0 18px rgba(255,209,102,.5)}
.fsov .hssign{top:2.2vh;font-size:clamp(1.2rem,2.6vw,2.2rem)}
.fsov .grhosts .ehost{height:48vh;bottom:3vh}
.fsov .grhosts .him{left:1.5vw}.fsov .grhosts .her{right:1.5vw}
.fsov .grbub{top:12vh;max-width:19vw;font-size:clamp(.8rem,1.2vw,1.05rem)}
.fsov .grbub.him{left:1.5vw}.fsov .grbub.her{right:1.5vw}
.fsboard{position:absolute;left:23vw;right:23vw;top:12vh;bottom:5vh;z-index:2;display:flex;align-items:center;justify-content:center}
.fsboard ol{list-style:none;margin:0;padding:1.6vh 1.6vw;width:100%;display:flex;flex-direction:column;gap:calc(var(--rh) * .16);background:linear-gradient(rgba(20,12,50,.88),rgba(12,8,32,.92));border:3px solid rgba(255,209,102,.6);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 30px rgba(255,209,102,.2)}
.fsboard li{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto 3.2em;align-items:center;gap:.8em;height:var(--rh);padding:0 .9em;border-radius:12px;background:rgba(255,255,255,.07);font-weight:900;font-size:calc(var(--rh) * .4);opacity:0;transform:translateX(-30px);transition:opacity .4s,transform .45s cubic-bezier(.3,1.5,.5,1),background .4s,box-shadow .4s}
.fsboard li.on{opacity:1;transform:none}
.fsboard li .rk{color:#ffd166;text-align:center}
.fsboard li .who{display:flex;align-items:center;gap:.6em;min-width:0}
.fsboard li .who>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsboard li .char{width:1.7em;height:1.7em;flex:none}
.fsboard li .tot{text-align:right;font-variant-numeric:tabular-nums;font-size:1.15em}
.fsboard li .gain{opacity:0;color:#3dff9a;text-shadow:0 0 10px rgba(61,255,154,.5)}
.fsboard li .gain.on{opacity:1;animation:rcpop .4s cubic-bezier(.3,1.6,.5,1)}
.fsboard li.top{background:rgba(255,209,102,.18);box-shadow:0 0 0 2px #ffd166,0 0 24px rgba(255,209,102,.4)}
.fsboard li.top .who>span::after{content:' 👑'}
.fsboard li.bribed{background:rgba(160,110,50,.35)}
/* the courier: runs in from the right, hands over the envelope, runs off again */
.fscour{position:absolute;bottom:3vh;left:104vw;height:46vh;z-index:7;transition:left 2.4s cubic-bezier(.3,.6,.5,1)}
.fscour .courier{height:100%;width:auto;display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));transform:scaleX(-1)}
.fsov.cin .fscour{left:15vw}
.fsov.cin:not(.cstop) .fscour .courier,.fsov.cout .fscour .courier{animation:crun .33s ease-in-out infinite alternate}
.fsov.cout .fscour{left:110vw;transition:left 1.6s ease-in}
.fsov.cout .fscour .courier{transform:none}
@keyframes crun{from{translate:0 0;rotate:-3deg}to{translate:0 -2.2vh;rotate:3deg}}
.fscour .cleg{transform-box:fill-box;transform-origin:50% 0}
.fsov.cin:not(.cstop) .cleg.l,.fsov.cout .cleg.l{animation:cleg .33s ease-in-out infinite alternate}
.fsov.cin:not(.cstop) .cleg.r,.fsov.cout .cleg.r{animation:cleg .33s ease-in-out infinite alternate-reverse}
@keyframes cleg{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.fscbub{position:absolute;bottom:100%;left:30%;width:22vw;margin-bottom:1vh;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(.8rem,1.25vw,1.1rem);line-height:1.25;padding:.6em .9em;border-radius:16px;border-bottom-left-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.fscbub.on{opacity:1;transform:none}.fscbub .unsaid{visibility:hidden}
/* the brown envelope: in the courier's hand, then big in the middle, opened, and gone */
.fsenv{position:absolute;z-index:8;left:calc(104vw - 5vh);bottom:22vh;width:14vh;height:9.5vh;opacity:0;transform:rotate(-8deg);transition:left 2.4s cubic-bezier(.3,.6,.5,1),bottom .9s cubic-bezier(.3,1.2,.5,1),width .9s cubic-bezier(.3,1.2,.5,1),height .9s cubic-bezier(.3,1.2,.5,1),transform .9s,opacity .4s}
.fsov.cgive .fsenv,.fsov.envbig .fsenv{transition:left .9s cubic-bezier(.3,1.2,.5,1),bottom .9s cubic-bezier(.3,1.2,.5,1),width .9s cubic-bezier(.3,1.2,.5,1),height .9s cubic-bezier(.3,1.2,.5,1),transform .9s,opacity .4s}
.fsov.cin .fsenv{opacity:1}
.fsov.cin .fsenv{left:calc(15vw - 5vh)}
.fsov.cgive .fsenv{left:8vw;bottom:25vh;transform:rotate(6deg)}
.fsov.envbig .fsenv{left:calc(50vw - 26vh);bottom:22vh;width:52vh;height:35vh;transform:rotate(-2deg)}
.fsov.envgone .fsenv{opacity:0;transform:scale(.3) rotate(20deg)}
.fsback,.fsfront{position:absolute;inset:0;border-radius:6px;background:linear-gradient(#c8955a,#a87440)}
.fsback{box-shadow:0 20px 50px rgba(0,0,0,.6)}
.fsfront{background:linear-gradient(160deg,#d4a066,#b07a42);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);z-index:2}
.fsflap{position:absolute;left:0;right:0;top:0;height:58%;background:linear-gradient(#b98348,#9c6a36);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;z-index:3;transition:transform .6s ease-in-out,z-index 0s .3s}
.fsseal{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;margin:-13% 0 0 -13%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e0384f,#8a0f22);color:#ffd0d6;font-weight:900;font-size:min(3.2vh,2.2vw);display:flex;align-items:center;justify-content:center;z-index:4;box-shadow:0 3px 8px rgba(0,0,0,.4);transition:opacity .3s}
.fsov:not(.envbig) .fsseal{font-size:1.2vh}
.fsov.envopen .fsflap{transform:rotateX(180deg);z-index:0}
.fsov.envopen .fsseal{opacity:0}
.fsletter{position:absolute;left:6%;right:6%;top:6%;bottom:6%;z-index:1;background:#fffaf0;border-radius:4px;color:#2a1a40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;padding:2vh;text-align:center;transition:transform .9s .4s cubic-bezier(.3,1.3,.5,1);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.fsletter b{font-size:5vh;line-height:1;color:#1d1450;letter-spacing:.3vh}
.fsletter i{font-size:1.8vh;font-weight:800;text-transform:uppercase;letter-spacing:.3vh;color:#8a6a40}
.fsletter span{font-size:2.3vh;font-weight:800;line-height:1.3}
.fsov.envopen .fsletter{transform:translateY(-62%);z-index:5}
/* the drama */
.fsov.shock .grhosts .ehost{animation:fsjump .32s ease-out 2}
@keyframes fsshake{from{translate:-4px 0}to{translate:4px 0}}
@keyframes fsjump{0%,100%{translate:0 0}40%{translate:0 -2.2vh}}   /* (the presenters: a startled little jump, straight up; shaking sideways made them look like they were walking) */
.fssiren{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:conic-gradient(from 0deg at 50% 0%,transparent 0 40%,rgba(255,40,60,.35) 45%,transparent 50% 90%,rgba(255,40,60,.35) 95%,transparent 100%);transition:opacity .4s}
.fsov.siren .fssiren{opacity:1;animation:fssiren 1.2s linear infinite}
@keyframes fssiren{to{filter:hue-rotate(0deg);transform:rotate(360deg) scale(2.2)}}
/* ---------- The boutique, tidied up: a display cabinet, Lynda's balloon in a free spot, less clutter ---------- */
.shopov.boutique .bqrack,.shopov.boutique .bqhats{display:none}
.shopov.boutique .bqkeeper{left:3vw;bottom:4vh;height:60vh}
.shopov.boutique .bqsale{left:15vw;top:24vh}
.shopov.boutique .bqcase{position:absolute;left:27vw;right:3vw;top:22vh;padding:1.4vh 1.4vw 1vh;border-radius:20px;background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.03));border:2px solid rgba(255,214,120,.45);box-shadow:inset 0 0 40px rgba(255,47,168,.15),0 18px 40px rgba(0,0,0,.45)}
.shopov.boutique .bqshelf{position:relative;left:auto;right:auto;top:auto;width:auto;display:flex;justify-content:space-around;align-items:flex-end;padding:.6vh .6vw .5vh;border-bottom:9px solid #7a4422;box-shadow:0 6px 0 -3px #4a2814;filter:none}
.shopov.boutique .bqshelf.low{margin-top:2.2vh}
.shopov.boutique .bqi{width:7vw;gap:.5vh;opacity:.5;filter:saturate(.6);transition:opacity .4s,filter .4s,transform .4s}
.shopov.boutique .bqi .si{font-size:clamp(1.7rem,3.2vw,2.8rem);transition:transform .4s}
.shopov.boutique .bqi b{font-size:clamp(.6rem,.85vw,.82rem);opacity:1}
.shopov.boutique .bqi.offer{opacity:1;filter:none}
.shopov.boutique .bqi.offer .si{filter:drop-shadow(0 0 12px rgba(255,214,120,.9));animation:bqoffer 1.6s ease-in-out infinite alternate}
.shopov.boutique .bqi.offer b::before{content:'✨ ';}
@keyframes bqoffer{from{transform:translateY(0) scale(1)}to{transform:translateY(-.6vh) scale(1.08)}}
.shopov.boutique .bqcasenote{text-align:right;font-size:clamp(.6rem,.8vw,.78rem);font-weight:800;opacity:.6;margin-top:.8vh}
.shopov.boutique .bqbubble{left:23vw;top:auto;bottom:31vh;max-width:36vw;font-size:clamp(1rem,1.75vw,1.55rem);line-height:1.3;border-radius:22px 22px 22px 4px;padding:.75em 1.1em}
.shopov.boutique .bqfans{left:auto;right:4vw;top:auto;bottom:24vh}
.shopov.boutique .bqfloor{right:3vw;bottom:11vh}
.shopov.boutique .shoppers{left:24vw;right:3vw;bottom:3.5vh;justify-content:flex-start;gap:12px}
.shopov.boutique .shopper{padding:5px 14px 5px 5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);opacity:.6;font-size:clamp(.8rem,1.1vw,1rem)}
.shopov.boutique .shopper .char{width:32px;height:32px}
.shopov.boutique .shopper.done{opacity:1;background:rgba(61,255,154,.14);border-color:transparent}
.boutique.enter .bqcase{animation:inRight .8s .55s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.leaving .bqcase{animation:outRight .7s .25s cubic-bezier(.6,0,.8,.4) forwards}
/* Grand Final sudden death: the one still standing walks over and shoves the loser off the stage */
.chtok.shove{z-index:6;transition:left .7s cubic-bezier(.3,1.2,.5,1),top .7s cubic-bezier(.3,1.2,.5,1)}
.chtok.shove .ch-face{animation:chshove .9s .55s ease-in-out 1 both}
@keyframes chshove{0%{transform:none}40%{transform:translateX(-18%) rotate(-10deg)}70%{transform:translateX(40%) rotate(14deg) scale(1.08)}100%{transform:none}}
.chtok.fall.shoved{transition:left .5s ease-out,top 1.2s cubic-bezier(.5,0,.9,.5),opacity .6s .7s!important;left:114%!important}
.chtok.fall.shoved .ch-face{animation:chshoved 1.2s ease-in forwards}
@keyframes chshoved{0%{transform:none}15%{transform:translateX(30%) rotate(30deg)}100%{transform:translateX(60%) rotate(540deg) scale(.6)}}
/* after the Grand Final: the points from before it, with a silver crown for the most */
.chaseov .pc{color:#dfe6f2}
.chaseov .silvercrown{display:inline-block;filter:grayscale(1) brightness(1.55) contrast(1.1) drop-shadow(0 0 6px rgba(220,230,255,.8));animation:silvershine 2.4s ease-in-out infinite alternate}
@keyframes silvershine{from{transform:rotate(-8deg)}to{transform:rotate(8deg) scale(1.1)}}
.chaseov .ovrow.silver.dead{filter:grayscale(.5) brightness(.85)}
/* the Broken Heel in the Grand Final: a shoe on the token, and a limp */
.chtok.heeled .ch-face{animation:chlimp .5s ease-in-out infinite alternate}
.chtok.heeled::after{content:'👠';position:absolute;right:-.4em;bottom:1.2em;font-size:calc(var(--tok,56px) * .45);transform:rotate(-25deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
@keyframes chlimp{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(6deg) translateY(8%)}}
/* Ice Skates in the Grand Final: they glide in ahead of the others */
.chtok .ch-sk{display:none;position:absolute;left:50%;bottom:100%;margin-bottom:4px;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:calc(var(--tok,56px) * .34);color:#06324a;background:linear-gradient(#e6fbff,#9fe6ff);padding:.15em .55em;border-radius:99px;box-shadow:0 0 12px #3fc8ff,0 3px 8px rgba(0,0,0,.5);z-index:3}
.chtok.skated .ch-sk{display:block;animation:rcpop .5s cubic-bezier(.3,1.6,.5,1)}
.chtok.skated .ch-face{box-shadow:0 0 0 4px rgba(150,230,255,.7),0 0 20px #7fdcff}
/* ---------- Item alert: a police siren, red and blue flashing, for three seconds before the item's card ---------- */
.alarmov{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;animation:fadein .15s both}
.alarmov.out{transition:opacity .3s;opacity:0}
.alarmov .alred,.alarmov .alblue{position:absolute;inset:0}
.alarmov .alred{background:radial-gradient(ellipse at 0% 50%,rgba(255,20,40,.75),transparent 60%);animation:alflash .5s steps(1) infinite}
.alarmov .alblue{background:radial-gradient(ellipse at 100% 50%,rgba(30,90,255,.75),transparent 60%);animation:alflash .5s steps(1) infinite reverse;animation-delay:-.25s}
@keyframes alflash{0%{opacity:1}50%{opacity:0}}
.alarmov .albar{position:absolute;left:0;right:0;height:5vh;background:repeating-linear-gradient(-45deg,#ffd23f 0 3vh,#1a1147 3vh 6vh);background-size:200% 100%;animation:albar 1s linear infinite;box-shadow:0 0 20px rgba(0,0,0,.6)}
.alarmov .albar.t{top:0}.alarmov .albar.b{bottom:0;animation-direction:reverse}
@keyframes albar{to{background-position:-8.5vh 0}}
.alarmov .alsign{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:2vw;padding:2vh 3vw;border-radius:20px;background:rgba(10,4,24,.85);border:4px solid #ff2f4a;box-shadow:0 0 40px rgba(255,47,74,.8),inset 0 0 30px rgba(255,47,74,.4);animation:alpulse .5s ease-in-out infinite alternate}
.alarmov .alsign b{font-size:clamp(2rem,6vw,5rem);font-weight:900;color:#fff;letter-spacing:.08em;text-shadow:0 0 18px #ff2f4a,0 0 40px #2f6bff;white-space:nowrap}
.alarmov .allight{font-size:clamp(2.4rem,7vw,6rem);animation:alspin .5s linear infinite;display:inline-block;filter:drop-shadow(0 0 20px #ff2f4a)}
.alarmov .allight:last-child{animation-direction:reverse}
@keyframes alpulse{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.08)}}
@keyframes alspin{0%{transform:rotate(-15deg) scale(1)}50%{transform:rotate(15deg) scale(1.15)}100%{transform:rotate(-15deg) scale(1)}}
.bagrule{margin:-4px 0 10px;font-size:.85rem;font-weight:700;opacity:.8;line-height:1.3}
/* buying after a party game: prices on the shelves, on the phone, and who paid what */
.shopov.boutique .bqi .bqp{display:none;font-style:normal;font-weight:900;font-size:clamp(.6rem,.85vw,.8rem);color:#1a1147;background:#ffd23f;border-radius:99px;padding:.05em .55em;margin-top:.2vh}
.shopov.boutique.buying .bqi .bqp{display:inline-block}
.shopper em{font-style:normal;font-weight:900;margin-left:4px;font-size:.9em}
.shopper em.paid{color:#ff8f8f}.shopper em.free{color:#ffd23f}.shopper em.nobuy{opacity:.7;font-weight:700}
.shopper.skip{opacity:.7}
.shopbtn .price{font-style:normal;margin-left:.4em;padding:.05em .5em;border-radius:99px;background:#ffd23f;color:#1a1147;font-size:.85em;white-space:nowrap}
.shopbtn.poor{opacity:.45}
#shopskip{width:100%;margin-top:8px}
/* three shelves: luxury on top, popular in the middle, bargains at the bottom; Lynda's balloon above her head */
.shopov.boutique .bqfans,.shopov.boutique .bqfloor,.shopov.boutique .bqdisco{display:none}
.shopov.boutique .bqcase{left:31vw;right:3vw;top:20vh;padding:1vh 1.2vw .8vh}
.shopov.boutique .bqshelf{position:relative;padding-top:3.6vh}
.shopov.boutique .bqshelf.t2,.shopov.boutique .bqshelf.t1{margin-top:1.6vh}
.shopov.boutique .bqtier{position:absolute;left:.4vw;top:.2vh;font-size:clamp(.6rem,.85vw,.82rem);font-weight:900;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.shopov.boutique .bqtier em{font-style:normal;color:#ffd23f;margin-left:.3em}
.shopov.boutique .bqshelf.t3{border-bottom-color:#c9a227;box-shadow:0 6px 0 -3px #8a6a10,0 0 24px rgba(255,210,63,.25)}
.shopov.boutique .bqshelf.t3 .bqtier{color:#ffe28a}
.shopov.boutique .bqi .si{font-size:clamp(1.5rem,2.8vw,2.5rem)}
.shopov.boutique .bqkeeper{left:4vw;bottom:3vh;height:52vh}
.shopov.boutique .bqsale{left:auto;right:1.5vw;top:15.5vh;z-index:3;font-size:clamp(.7rem,1vw,.95rem)}
.shopov.boutique .bqbubble{left:2vw;top:20vh;bottom:auto;max-width:27vw;font-size:clamp(.9rem,1.35vw,1.2rem);border-radius:22px 22px 22px 22px}
.shopov.boutique .bqbubble::after{content:'';position:absolute;left:7vw;bottom:-14px;border:14px solid transparent;border-top-color:#fff;border-bottom:0}
.shopov.boutique .shoppers{left:31vw}
/* below the bunting */
.shopov.boutique .bqcase{top:25vh}
.shopov.boutique .bqbubble{top:25vh}
.shopov.boutique .bqsale{top:22vh}
/* every item on the shelves shines and bobs (not only today's picks) */
.shopov.boutique .bqi,.shopov.boutique .bqi.offer{opacity:1;filter:none}
.shopov.boutique .bqi .si{filter:drop-shadow(0 0 12px rgba(255,214,120,.9));animation:bqoffer 1.6s ease-in-out infinite alternate}
.shopov.boutique .bqi:nth-child(odd) .si{animation-delay:-.8s}
.shopov.boutique .bqi:nth-child(3n) .si{animation-delay:-.4s}
.shopov.boutique .bqi.offer b::before{content:none}
/* the Eurovision Fan: blown-away answers fly off the phone */
.opt.blown{animation:fanblow .8s cubic-bezier(.5,0,.8,.4) forwards;pointer-events:none}
@keyframes fanblow{0%{transform:none;opacity:1}30%{transform:translateX(-6px) rotate(-2deg)}100%{transform:translateX(120%) rotate(18deg);opacity:0;visibility:hidden}}
/* crisper items on the shelves: a soft shadow and just a hint of glow */
.shopov.boutique .bqi .si,.shopov.boutique .bqi.offer .si{filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)) drop-shadow(0 0 4px rgba(255,214,120,.35))}
/* everything below the sign a little lower: the bunting hangs just under it */
.shopov.boutique .bqbunting{top:19vh}
.shopov.boutique .bqcase{top:29vh}
.shopov.boutique .bqbubble{top:29vh}
.shopov.boutique .bqsale{top:26vh}
.shopov.boutique .bqkeeper{height:50vh}
/* the 30 seconds to shop: on the big screen and on the phone */
.shopov.boutique .bqtimer{position:absolute;right:3vw;bottom:3vh;padding:.3em .8em;border-radius:99px;background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.25);font-weight:900;font-size:clamp(1rem,1.8vw,1.6rem);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s}
.shopov.boutique .bqtimer.on{opacity:1}
.shopov.boutique .bqtimer.hurry{color:#ff6b7f;border-color:#ff6b7f;animation:alpulse2 .5s ease-in-out infinite alternate}
@keyframes alpulse2{to{transform:scale(1.08)}}
.shoptime{margin:0 0 10px;font-weight:800;font-size:.95rem;opacity:.85;font-variant-numeric:tabular-nums}
.shoptime.hurry{color:#ff6b7f;opacity:1}
/* how an item works, on the phones */
.shopbtn small.imode{display:block;font-weight:800;font-size:.75rem;margin:1px 0 2px;opacity:1}
.imode.m-instant{color:#ffd23f}.imode.m-delivery{color:#7fdcff}.imode.m-self{color:#9ff2b8}.imode.m-secret{color:#ffb3e1}
/* a purchase in the boutique: coins fly from the buyer to Lynda */
.bqcoin{position:fixed;z-index:9;font-style:normal;font-size:clamp(1.2rem,2vw,1.8rem);pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));animation:bqcoin 1.1s cubic-bezier(.3,.1,.6,1) both}
@keyframes bqcoin{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:0}12%{opacity:1;transform:translate(calc(var(--dx) * .08),var(--h)) scale(1.1) rotate(90deg)}85%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.6) rotate(540deg);opacity:0}}
.chtok .ch-sk{left:100%;bottom:auto;top:12%;transform:none;margin:0 0 0 6px}
/* stock in the boutique: one-of-a-kind items, and items that are gone */
.shopov.boutique .bqi .bqstock{display:block;font-style:normal;font-weight:800;font-size:clamp(.5rem,.7vw,.68rem);opacity:.7;margin-top:.2vh}
.shopov.boutique .bqi .bqstock.one{opacity:1;color:#ff9fd0}
.shopov.boutique .bqi.sold{animation:bqsold .9s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes bqsold{0%{transform:none;opacity:1}30%{transform:scale(1.15) rotate(-6deg)}100%{transform:scale(0) rotate(30deg);opacity:0;visibility:hidden}}
.shopov.boutique .bqcase{top:27vh}
.shopov.boutique .bqshelf{padding-top:3vh}
.shopov.boutique .bqshelf.t2,.shopov.boutique .bqshelf.t1{margin-top:1.1vh}
.shopov.boutique .bqi .si{font-size:clamp(1.3rem,2.4vw,2.2rem)}
/* under an umbrella: on the scoreboard */
.rshield{display:inline-block;margin-left:.2em;filter:drop-shadow(0 0 6px rgba(140,200,255,.8));animation:ehbob 2s ease-in-out infinite alternate}
/* the price is on the shelf: not on every item */
.shopov.boutique.buying .bqi .bqp,.shopov.boutique .bqi .bqp{display:none}
.shopbtn .price{display:none}
/* the middle shelf in silver */
.shopov.boutique .bqshelf.t2{border-bottom-color:#b9c2d0;box-shadow:0 6px 0 -3px #6f7888,0 0 20px rgba(200,215,235,.2)}
.shopov.boutique .bqshelf.t2 .bqtier{color:#e3e9f2}
.rshield b{font-size:.7em;margin-left:1px;vertical-align:top}
/* ---------- Queue Jump: the queue in front of the arena ---------- */
.qjov .grwall{background:radial-gradient(circle,rgba(255,255,255,.5) 0 1px,transparent 1.6px) 0 0/90px 70px,linear-gradient(#0b0f2e 0%,#1b1550 55%,#3a1d5e 100%)}
.qjov .grfloor{height:36%;background:linear-gradient(#3b3550,#24203a 40%,#16132a);box-shadow:inset 0 8px 24px rgba(0,0,0,.5)}
.qjov .qjsign{top:2.5vh;font-size:clamp(1.3rem,2.8vw,2.4rem);border-color:#7fd8ff;color:#eefaff;text-shadow:0 0 12px #3fa9ff;box-shadow:0 0 18px rgba(63,169,255,.5)}
.qjarena{position:absolute;left:58vw;width:22vw;top:15vh;height:50vh;border-radius:18px 18px 0 0;background:linear-gradient(#4a3f6e,#2c2548);box-shadow:0 0 0 4px rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.6);z-index:1}
.qjarena::before{content:'';position:absolute;inset:3vh 2vw auto;height:8vh;background:repeating-linear-gradient(90deg,rgba(255,220,120,.25) 0 1.2vw,transparent 1.2vw 2.4vw);border-radius:8px;opacity:.6}
.qjneon{position:absolute;left:0;right:0;top:12.5vh;text-align:center;font-weight:900;letter-spacing:.4em;font-size:clamp(1.2rem,2.4vw,2.2rem);color:#fff0f8;text-shadow:0 0 10px #ff3fa4,0 0 26px #ff3fa4;animation:bqneon 2.6s ease-in-out infinite}
.qjdoors{position:absolute;left:50%;bottom:0;width:14vw;height:28vh;margin-left:-7vw;perspective:600px;background:#fff6c8;box-shadow:0 0 0 6px #1a1530,inset 0 0 40px rgba(255,200,80,.8)}
.qjdoors i{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#8a1d3a,#b52a50 50%,#8a1d3a);border:3px solid #1a1530;transition:transform 1.4s cubic-bezier(.4,.1,.3,1)}
.qjdoors i::after{content:'';position:absolute;top:45%;width:.6vw;height:4vh;border-radius:4px;background:#ffd23f}
.qjdoors i.l{left:0;transform-origin:0 50%}.qjdoors i.l::after{right:.6vw}
.qjdoors i.r{right:0;transform-origin:100% 50%}.qjdoors i.r::after{left:.6vw}
.qjov[data-st=doors] .qjdoors i.l,.qjov[data-st=done] .qjdoors i.l{transform:rotateY(-80deg)}
.qjov[data-st=doors] .qjdoors i.r,.qjov[data-st=done] .qjdoors i.r{transform:rotateY(80deg)}
.qjlight{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,#fff,rgba(255,220,120,.6) 40%,transparent 75%);opacity:0;transition:opacity 1s .5s}
.qjov[data-st=doors] .qjlight,.qjov[data-st=done] .qjlight{opacity:1}
.qjrope{position:absolute;left:-46vw;right:100%;bottom:3vh;height:6px}
.qjsteward{position:absolute;left:51.5vw;bottom:5vh;height:32vh;z-index:3}
.qjsteward .steward{height:100%;width:auto;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.qjsbub{position:absolute;bottom:100%;left:40%;white-space:nowrap;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(.75rem,1.1vw,1rem);padding:.4em .8em;border-radius:14px;border-bottom-left-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.qjsbub.on{opacity:1;transform:none}
.qjline{position:absolute;inset:0;z-index:4;pointer-events:none}
.qjp{position:absolute;bottom:6vh;width:var(--qsz,8vh);margin-left:calc(var(--qsz,8vh) * -.5);display:flex;flex-direction:column;align-items:center;transition:left 1s cubic-bezier(.3,1.2,.5,1)}
.qjp .char{width:var(--qsz,8vh);height:var(--qsz,8vh);border:3px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.45);position:relative;z-index:2;animation:grbob 2.2s ease-in-out infinite alternate}
.qjp .qjbody{order:2;width:calc(var(--qsz,8vh) * 1.05);height:calc(var(--qsz,8vh) * 1.1);margin-top:calc(var(--qsz,8vh) * -.15);border-radius:40% 40% 12% 12%;background:linear-gradient(color-mix(in srgb,var(--c) 85%,#fff),var(--c));box-shadow:inset 0 -6px 10px rgba(0,0,0,.25)}
.qjp b{order:3;margin-top:.5vh;font-size:clamp(.6rem,.95vw,.85rem);font-weight:900;white-space:nowrap;max-width:calc(var(--qsz,8vh) * 1.8);overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.qjp .qjno{position:absolute;top:calc(var(--qsz,8vh) * -.35);font-weight:900;font-size:clamp(.6rem,.9vw,.85rem);color:#ffd23f;text-shadow:0 2px 4px rgba(0,0,0,.8)}
.qjp .qjmove{position:absolute;top:calc(var(--qsz,8vh) * -1.05);font-size:calc(var(--qsz,8vh) * .55);filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.qjp .qjmove:not(:empty){animation:rcpop .45s cubic-bezier(.3,1.6,.5,1)}
.qjp .qjok{position:absolute;right:-.4vw;top:0;z-index:3;width:2.4vh;height:2.4vh;border-radius:50%;background:var(--ok);color:#06331a;font-weight:900;font-size:1.4vh;display:none;align-items:center;justify-content:center}
.qjp.picked .qjok{display:flex}
.qjp.act .char{box-shadow:0 0 0 4px #ffd23f,0 0 20px #ffd23f}
.qjp.caught .char{box-shadow:0 0 0 4px #ff4d6a,0 0 20px #ff4d6a;animation:fsshake .12s linear infinite alternate}
.qjp.won .char{box-shadow:0 0 0 5px #ffd23f,0 0 30px #ffd23f}
.qjov:not(.sfov)[data-st=done] .qjp.won{left:68vw!important;opacity:0;transition:left 1.6s ease-in,opacity .6s 1.2s}
.qjmsg{position:absolute;left:18vw;right:18vw;top:13vh;z-index:5;text-align:center;font-weight:900;font-size:clamp(1rem,2vw,1.7rem);text-shadow:0 3px 10px rgba(0,0,0,.8);line-height:1.3}

.qjround{position:absolute;right:2vw;top:3vh;font-weight:900;font-size:clamp(.8rem,1.3vw,1.1rem);opacity:.8}
.qjov .grhosts .ehost{height:42vh;bottom:3vh}
.qjov .grhosts .him{left:1vw}.qjov .grhosts .her{right:1vw}
.qjov .grbub{top:24vh;max-width:22vw;font-size:clamp(.8rem,1.25vw,1.1rem);z-index:6}
.qjov .grbub.him{left:2vw;border-bottom-left-radius:4px}.qjov .grbub.her{right:2vw;border-bottom-right-radius:4px}
.qjov.enter .qjarena{animation:inTop .8s .2s cubic-bezier(.2,.9,.3,1.08) both}
.qjov.enter .qjsteward{animation:inRight .8s .5s cubic-bezier(.2,.9,.3,1.08) both}
.qjov.enter .ehost.him{animation:inLeft .9s 1s cubic-bezier(.2,.9,.3,1.08) both}
.qjov.enter .ehost.her{animation:inRight .9s 1s cubic-bezier(.2,.9,.3,1.08) both}
/* the phone: three big buttons */
.qjui{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:14px}
.qjbtn{display:grid;grid-template-columns:3rem 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;text-align:left;padding:12px 14px;border-radius:16px;border:0;background:rgba(255,255,255,.09);color:inherit;font:inherit;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.qjbtn span{grid-row:1/3;font-size:2.2rem;text-align:center}
.qjbtn b{font-size:1.15rem}
.qjbtn small{opacity:.75;font-size:.85rem;line-height:1.25}
.qjbtn:active{transform:scale(.98)}
.qjbtn.off{opacity:.4}
.qjmsg.qjpop{animation:rcpop .45s cubic-bezier(.3,1.6,.5,1)}
.qjround{right:auto;left:2vw}
/* ---------- Dodge the Superfans: a hall with doors, everyone with their crowd of dancing fans ---------- */
.sfov .grwall{background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 80px),radial-gradient(ellipse at 50% 20%,#4b2a7a 0%,#2a1650 55%,#120a26 100%)}
.sfov .grfloor{height:40%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 6vw,transparent 6vw 12vw),linear-gradient(#5a2a52,#2a1530 50%,#160c20)}
.sfov .qjsign{border-color:#ff8fd8;color:#fff0fa;text-shadow:0 0 12px #ff3fa4;box-shadow:0 0 18px rgba(255,63,164,.5)}
.sfhall{position:absolute;left:2vw;top:3vh;font-weight:900;font-size:clamp(.8rem,1.3vw,1.1rem);opacity:.85}
.sfdoors{position:absolute;inset:0;z-index:1;pointer-events:none}
.sfdoor{position:absolute;top:22vh;width:min(11vw,15vh);height:34vh;transform:translateX(-50%);perspective:500px;background:radial-gradient(ellipse at 50% 70%,#fff8d8,#ffd27a 60%,#c27a2a);border-radius:10vh 10vh 0 0;box-shadow:0 0 0 5px #2a1530,0 0 0 9px #c9a227,0 14px 30px rgba(0,0,0,.5)}
.sfdoors.in .sfdoor{animation:sfdoorin .7s var(--d) cubic-bezier(.2,.9,.3,1.1) both}
@keyframes sfdoorin{from{transform:translateX(-50%) translateY(-30vh);opacity:0}to{transform:translateX(-50%);opacity:1}}
.sfdoor i{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#3a1f6e,#5a34a0 50%,#3a1f6e);border:2px solid #1a0f30;transition:transform 1s cubic-bezier(.4,.1,.3,1)}
.sfdoor i.l{left:0;transform-origin:0 50%;border-radius:10vh 0 0 0}.sfdoor i.r{right:0;transform-origin:100% 50%;border-radius:0 10vh 0 0}
.sfdoors.open .sfdoor i.l{transform:rotateY(-75deg)}.sfdoors.open .sfdoor i.r{transform:rotateY(75deg)}
.sfdoor b{position:absolute;left:50%;top:-6vh;transform:translateX(-50%);width:5vh;height:5vh;border-radius:50%;background:#ffd23f;color:#1a1147;font-weight:900;font-size:2.8vh;display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(255,210,63,.7)}
.sfov .qjline{z-index:4}
.sfp{bottom:5vh;transition:left 1.6s cubic-bezier(.4,.1,.3,1)}
.sfp.atdoor{bottom:9vh}
.sfp .sfn{position:absolute;top:calc(var(--qsz,8vh) * -1.6);white-space:nowrap;font-weight:900;font-size:clamp(.7rem,1.1vw,1rem);padding:.1em .5em;border-radius:99px;background:rgba(0,0,0,.55);color:#ffd23f;z-index:4}
.sfp.grew .sfn{animation:rcpop .5s cubic-bezier(.3,1.6,.5,1);background:#ff3f6a;color:#fff}
.sfcrowd{position:absolute;left:50%;bottom:calc(var(--qsz,8vh) * .6);width:calc(var(--qsz,8vh) * 2.2);height:calc(var(--qsz,8vh) * 1.6);transform:translateX(-50%);z-index:0;pointer-events:none}
.sfcrowd i{position:absolute;left:calc(50% + var(--x) * .9);bottom:calc(var(--y) * var(--qsz,8vh) * .35);font-style:normal;font-size:calc(var(--qsz,8vh) * .62);transform:translateX(-50%);animation:sfdance .5s var(--dl) ease-in-out infinite alternate;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.sfcrowd i.new{animation:sfjoin .6s calc(var(--j) * .05s) cubic-bezier(.3,1.6,.5,1) both,sfdance .5s calc(.6s + var(--dl)) ease-in-out infinite alternate}
@keyframes sfdance{from{transform:translateX(-50%) translateY(0) rotate(-8deg)}to{transform:translateX(-50%) translateY(-28%) rotate(8deg)}}
@keyframes sfjoin{from{transform:translateX(-50%) scale(0) translateY(60%);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
.sfp .char{z-index:2}
.sfp.won .char{box-shadow:0 0 0 5px #ffd23f,0 0 30px #ffd23f}
.qjdoor{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:0;background:rgba(255,255,255,.09);color:inherit;font:inherit;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.qjdoor span{font-size:2rem}.qjdoor b{font-size:1.25rem}
.qjdoor:active{transform:scale(.98)}
/* the superfans: Grand Final crowd figures, as tall as the player, in front of and behind them */
.sfp{--fh:calc(var(--qsz,8vh) * 2.25);--fw:calc(var(--fh) * .5)}
.sfp .char,.sfp .qjbody{position:relative;z-index:2}
.sfp .sfcrowd{position:absolute;left:50%;bottom:calc(var(--qsz,8vh) * .2);width:0;height:0;transform:none;z-index:auto}
.sff{position:absolute;left:0;bottom:0;width:var(--fw);height:var(--fh);transform:translate(calc(-50% + var(--fx) * var(--fw)),calc(var(--fy) * var(--fh) * -1))}
.sff.front{z-index:4}
.sff.back{z-index:1;filter:brightness(.8)}
.sff .fan{width:100%;height:100%;overflow:visible;transform-origin:50% 100%;animation:fanjump var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
.sff .fan .arm{transform-box:fill-box;animation:fanwave calc(var(--d) * 1.3) ease-in-out infinite alternate;animation-delay:var(--dl)}
.sff .fan .arm.l{transform-origin:100% 100%}.sff .fan .arm.r{transform-origin:0 100%}
.sff .fan.p0 .arm.l,.sff .fan.p2 .arm.l{animation-name:fanwavel}
.sff .fan .stick{filter:drop-shadow(0 0 3px currentColor)}
.sff.new{animation:sffin .6s calc(var(--j) * .07s) cubic-bezier(.3,1.5,.5,1) both}
@keyframes sffin{from{opacity:0;margin-bottom:-40%;scale:.4}to{opacity:1;margin-bottom:0;scale:1}}
.sfp .sfn{top:calc(var(--qsz,8vh) * -2.1)}
.sfp b{position:relative;z-index:5}
.sfp .char{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 4px 12px rgba(0,0,0,.6)}
.sfp b{background:rgba(10,4,24,.6);padding:0 .4em;border-radius:6px}
.sfov[data-st=done] .sfp.won{z-index:6;animation:sfwin .5s ease-in-out infinite alternate}
@keyframes sfwin{to{translate:0 -2vh}}
.sfp.won .sfn{background:#ffd23f;color:#1a1147}
/* ---------- Lost in Verona: a moonlit crossroads, three street signs, the road to the balcony ---------- */
.vrov .grwall{background:radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.6px) 0 0/110px 80px,linear-gradient(#0d1033 0%,#2a1b52 60%,#5a2f4a 100%)}
.vrmoon{position:absolute;right:16vw;top:9vh;width:11vh;height:11vh;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fffbe6,#f3e2a8 70%);box-shadow:0 0 50px rgba(255,240,190,.6)}
.vrtown{position:absolute;left:0;right:0;bottom:36%;height:30vh;background:linear-gradient(transparent,rgba(0,0,0,.2)),
  linear-gradient(#7a3b2a,#5a2a20) 4vw 8vh/10vw 22vh no-repeat,linear-gradient(#8a4a30,#6a3420) 15vw 3vh/8vw 27vh no-repeat,linear-gradient(#a0553a,#7a3b2a) 24vw 12vh/12vw 18vh no-repeat,
  linear-gradient(#6a3424,#4a2218) 63vw 6vh/9vw 24vh no-repeat,linear-gradient(#8a4a30,#6a3420) 73vw 0/6vw 30vh no-repeat,linear-gradient(#a0553a,#7a3b2a) 80vw 10vh/14vw 20vh no-repeat;filter:brightness(.55) saturate(.8)}
.vrov .grfloor{height:36%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4vw),repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 3vh),linear-gradient(#6a5a52,#3e332e)}
.vrsign{border-color:#ff9fc0;color:#fff2f6;text-shadow:0 0 12px #ff4d8a;box-shadow:0 0 18px rgba(255,77,138,.5)}
.vrcross{position:absolute;left:50%;top:15vh;width:56vw;height:44vh;transform:translateX(-50%);z-index:3}
.vrpost{position:absolute;left:50%;bottom:0;width:1.6vh;height:38vh;margin-left:-.8vh;background:linear-gradient(90deg,#3a3a3a,#6a6a6a,#3a3a3a);border-radius:4px}
.vrs{position:absolute;width:17vw;padding:1.4vh 1vw;border-radius:10px;background:linear-gradient(#f6f1e3,#e2d8bd);color:#3a1d14;border:4px solid #7a4a2a;box-shadow:0 10px 24px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;gap:.4vh;text-align:center;opacity:0;transform:scale(.4);transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1),filter .3s}
.vrs i{font-style:normal;font-size:4vh;line-height:1}
.vrs .vi{font-size:5.2vh;line-height:1}
.vrs b{font-size:clamp(.9rem,1.6vw,1.45rem);font-weight:900;line-height:1.1}
.vrs.l{left:0;top:6vh;rotate:-4deg}.vrs.c{left:50%;top:0;margin-left:-8.5vw}.vrs.r{right:0;top:6vh;rotate:4deg}
.vrcross.on .vrs{opacity:1;transform:none}
.vrs.right{box-shadow:0 0 0 5px #3dff9a,0 0 40px #3dff9a;transform:scale(1.08)!important}
.vrs.wrong{filter:grayscale(1) brightness(.5)}
.vrcd{position:absolute;left:50%;top:10vh;transform:translateX(-50%);font-size:16vh;font-weight:900;color:#fff;text-shadow:0 0 30px #ff4d8a}
.vrcd.pop{animation:rcpop .5s cubic-bezier(.3,1.6,.5,1)}
.vrmsg{top:auto;bottom:24vh}
.vrroad{position:absolute;left:16vw;right:16vw;bottom:5vh;height:13vh;z-index:4;border-radius:12px;background:linear-gradient(#5a4a42,#3a2e2a);box-shadow:inset 0 3px 10px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.4)}
.vrroad::before{content:'';position:absolute;left:4vw;right:4vw;top:50%;border-top:3px dashed rgba(255,255,255,.3)}
.vrgate,.vrbal{position:absolute;top:50%;transform:translateY(-50%);font-size:5vh;display:flex;flex-direction:column;align-items:center;line-height:1}
.vrgate small,.vrbal small{font-size:1.2vh;font-weight:900;text-transform:uppercase;opacity:.8}
.vrgate{left:-3.6vw}.vrbal{right:-4vw;filter:drop-shadow(0 0 12px #ff4d8a)}
.vrrun{position:absolute;left:3vw;right:4vw;top:0;bottom:0}
.vrp{position:absolute;top:calc(50% - 2.6vh - var(--lane) * 1.6vh);margin-left:-2.6vh;width:5.2vh;display:flex;flex-direction:column;align-items:center;transition:left 1s cubic-bezier(.3,1.2,.5,1);z-index:calc(10 - var(--lane))}
.vrp .char{width:5.2vh;height:5.2vh;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.vrp b{font-size:clamp(.5rem,.75vw,.7rem);font-weight:900;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.9);max-width:8vw;overflow:hidden;text-overflow:ellipsis}
.vrp.in .char{box-shadow:0 0 0 3px var(--ok)}
.vrp.won .char{box-shadow:0 0 0 4px #ffd23f,0 0 24px #ffd23f}
.vrp .vrg{position:absolute;top:-3vh;font-weight:900;font-size:clamp(.8rem,1.3vw,1.1rem);color:#3dff9a;text-shadow:0 1px 4px rgba(0,0,0,.9);opacity:0}
.vrp .vrg.on{opacity:1;animation:rcpop .45s cubic-bezier(.3,1.6,.5,1)}
.vrp .vrg.fast{color:#ffd23f}
.vrov .grhosts .ehost{height:44vh}
.vrov .grbub{top:20vh}
/* the phone: three big arrows */
.vrarrows{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:6px}
.vrbtn{aspect-ratio:1;border-radius:20px;border:0;font-size:3.4rem;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 3px rgba(255,255,255,.18);cursor:pointer;touch-action:manipulation}
.vrbtn:active{transform:scale(.94);background:rgba(255,255,255,.25)}
.qjui.wait .vrbtn{opacity:.35;pointer-events:none}
.vrroad{height:19vh;bottom:3vh}
.vrp{top:calc(50% - 2.6vh + var(--off,0) * 1vh)}
.vrp b{font-size:clamp(.5rem,.7vw,.68rem);background:rgba(0,0,0,.45);padding:0 .3em;border-radius:4px}
.vrov[data-st=done] .vrp.won{left:100%!important;transition:left 2.4s cubic-bezier(.4,.1,.3,1);z-index:20}
/* ---------- Lost in Verona: Juliet's maze ---------- */
.jmov .vrtown{opacity:.6}
.jmbalc{position:absolute;right:3vw;top:10vh;width:17vw;height:30vh;z-index:3}
.jmjul{position:absolute;left:50%;bottom:7vh;height:22vh;transform:translateX(-50%)}
.jmjul .juliet{height:100%;width:auto;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.jmjul.talk .jarm{animation:jwave .45s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0 100%}
@keyframes jwave{to{transform:rotate(-14deg)}}
.jmrail{position:absolute;left:0;right:0;bottom:2vh;height:7vh;border-radius:6px 6px 0 0;background:repeating-linear-gradient(90deg,#e8dcc4 0 1.2vh,#b8a888 1.2vh 1.6vh,transparent 1.6vh 2.6vh),linear-gradient(#efe4cc,#c9b896);box-shadow:0 8px 18px rgba(0,0,0,.5);border-top:1.2vh solid #f4ead4}
.jmrail::after{content:'';position:absolute;left:-1vw;right:-1vw;bottom:-2vh;height:2vh;background:#d8c9a8;border-radius:0 0 8px 8px}
.jmsay{position:absolute;right:100%;top:2vh;margin-right:1vw;display:flex;flex-direction:column;align-items:center;justify-content:center;width:12vh;height:12vh;border-radius:50%;background:#fff;color:#1a1147;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.4);transition:opacity .15s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.jmsay.on{opacity:1;transform:none}
.jmsay b{font-size:7vh;line-height:1}.jmsay small{font-weight:900;font-size:1.6vh;color:#c2185b}
.jmmaze{position:absolute;left:50%;top:15vh;height:60vh;aspect-ratio:7/6;transform:translateX(-50%);z-index:2;border-radius:12px;background:#120a1e;box-shadow:0 0 0 6px #3a2a20,0 0 0 10px #7a5a3a,0 20px 50px rgba(0,0,0,.6)}
.jmgrid{position:absolute;inset:0;display:grid;gap:3px;padding:3px}
.jmgrid i{border-radius:4px;background:radial-gradient(circle at 50% 50%,#1e1430,#140c22);transition:background .5s,box-shadow .5s}
.jmgrid i.lit{background:repeating-linear-gradient(45deg,#b8a07a 0 6px,#a88f68 6px 12px);box-shadow:inset 0 0 0 2px rgba(255,236,190,.6),0 0 14px rgba(255,220,140,.5);animation:jmlit .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes jmlit{from{transform:scale(.4);opacity:.3}}
.jmgrid i.goal{background:radial-gradient(circle,#ff7aa8,#c2185b);box-shadow:0 0 30px #ff4d8a}
.jmtoks{position:absolute;inset:0}
.jmt{position:absolute;width:5vh;margin:-2.5vh 0 0 -2.5vh;display:flex;flex-direction:column;align-items:center;transition:left .35s cubic-bezier(.3,1.3,.5,1),top .35s cubic-bezier(.3,1.3,.5,1),opacity .4s;translate:calc((var(--s) % 3 - 1) * 1.6vh) calc(var(--s) * -.9vh);z-index:3}
.jmt .char{width:5vh;height:5vh;border:2px solid #fff;border-radius:50%;box-shadow:0 3px 8px rgba(0,0,0,.6)}
.jmt b{font-size:clamp(.45rem,.65vw,.62rem);font-weight:900;white-space:nowrap;background:rgba(0,0,0,.55);padding:0 .3em;border-radius:4px;margin-top:-.4vh}
.jmt.fail .char{box-shadow:0 0 0 3px #ff4d6a,0 0 14px #ff4d6a;animation:fsshake .12s linear infinite alternate}
.jmt.out{opacity:.25;filter:grayscale(1)}
.jmt.won .char{box-shadow:0 0 0 4px #ffd23f,0 0 24px #ffd23f}
.jmgate{position:absolute;left:50%;bottom:-5.5vh;transform:translateX(-50%);font-size:4vh}
.jmmsg{top:auto;bottom:4vh}
.jmov .grbub{top:12vh}
.jmov .grbub.her{right:auto;left:2vw;top:34vh}
/* the phone: four arrows in a cross, and the steps so far */
.jmpad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:". u ." "l . r" ". d .";gap:8px;width:100%;max-width:340px;margin:6px auto 0}
.jmpad [data-dir="1"]{grid-area:u}.jmpad [data-dir="0"]{grid-area:l}.jmpad [data-dir="2"]{grid-area:r}.jmpad [data-dir="3"]{grid-area:d}
.jmb.hit{animation:jmhit .25s ease-out}
@keyframes jmhit{50%{transform:scale(.88);background:rgba(255,210,63,.35)}}
.jmdots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;min-height:14px;margin-top:6px}
.jmdots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2)}
.jmdots i.on{background:#ffd23f}
.jmov .grbub.her{right:2vw;left:auto;top:42vh;max-width:18vw}
.jmov .grbub.him{max-width:18vw}
.jmgrid i:not(.lit){transition:background 1.2s,box-shadow 1.2s}
/* ---------- Lost in Verona: the crossroads from above, the sliding city, the balcony in the mist ---------- */
.jmov{background:#6a5a50}
.jmcity{position:absolute;inset:0;--cell:36vh;background-size:var(--cell) var(--cell);background-repeat:repeat;background-position:calc(50vw - var(--cell) / 2 - var(--x,0) * var(--cell)) calc(62vh - var(--cell) / 2 - var(--y,0) * var(--cell));transition:background-position .6s cubic-bezier(.45,.05,.3,1);filter:saturate(.9)}
.jmcity.jump{transition:none}
.jmcity::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 62%,transparent 30%,rgba(10,6,20,.55) 85%)}
.jmmist{position:absolute;left:0;right:0;top:0;height:34vh;z-index:3;pointer-events:none;background:radial-gradient(ellipse 30% 60% at 20% 30%,rgba(255,255,255,.55),transparent 70%),radial-gradient(ellipse 30% 60% at 80% 25%,rgba(255,255,255,.5),transparent 70%),radial-gradient(ellipse 40% 70% at 50% 75%,rgba(255,255,255,.8),transparent 70%),linear-gradient(rgba(40,30,70,.9),rgba(230,225,240,.65) 55%,transparent);animation:jmmist 8s ease-in-out infinite alternate}
@keyframes jmmist{to{background-position:3vw 0,-3vw 0,0 0,0 0}}
.jmov .jmbalc{left:50%;right:auto;top:-1vh;width:22vh;height:24vh;margin-left:-11vh;z-index:2}
.jmov .jmjul{bottom:6vh;height:20vh}
.jmov .jmrail{bottom:1vh}
.jmov .jmsay{right:auto;left:100%;margin:0 0 0 1vw;top:3vh;z-index:6}
.jmov .vrsign{top:auto;bottom:2.5vh;left:2vw;right:auto;margin:0;font-size:clamp(1rem,2vw,1.6rem);z-index:5}
.jmov .vrno{z-index:5}
.jmov .qjmsg{top:auto;bottom:3vh;z-index:5;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.jmholes{position:absolute;left:50vw;top:62vh;z-index:1}
.jmhole{position:absolute;left:0;top:0;width:13vh;height:8vh;margin:-4vh 0 0 -6.5vh;border-radius:50%;background:radial-gradient(ellipse,#000 35%,#1a0f0a 60%,rgba(0,0,0,.4) 72%,transparent 74%);translate:var(--fx) var(--fy);animation:jmhole .5s .3s cubic-bezier(.3,1.5,.5,1) both}
@keyframes jmhole{from{scale:0}to{scale:1}}
.jmgroup{position:absolute;left:50vw;top:62vh;z-index:2}
.jmt{position:absolute;left:0;top:0;width:6vh;margin:-4vh 0 0 -3vh;display:flex;flex-direction:column;align-items:center;translate:var(--gx,0) var(--gy,0);transition:translate .5s cubic-bezier(.3,1.2,.5,1),opacity .4s}
.jmt .char{width:6vh;height:6vh;border:2px solid #fff;border-radius:50%;box-shadow:0 4px 10px rgba(0,0,0,.6);position:relative;z-index:2}
.jmt .jmbody{position:absolute;top:4.4vh;width:4.6vh;height:3.2vh;border-radius:40% 40% 20% 20%;background:#2e1a4d;box-shadow:0 3px 6px rgba(0,0,0,.5)}
.jmt b{position:relative;z-index:3;margin-top:1.4vh;font-size:clamp(.5rem,.75vw,.7rem);font-weight:900;white-space:nowrap;background:rgba(0,0,0,.6);padding:0 .35em;border-radius:4px}
.jmt.run .char{animation:jmrun .18s ease-in-out infinite alternate}
@keyframes jmrun{to{transform:translateY(-.8vh) rotate(4deg)}}
.jmt.done .char{box-shadow:0 0 0 3px var(--ok),0 4px 10px rgba(0,0,0,.6)}
.jmt.falling{translate:var(--fx) var(--fy);transition:translate .6s ease-in;animation:jmfall .7s .65s ease-in forwards;z-index:3}
@keyframes jmfall{0%{transform:none;opacity:1}30%{transform:translateY(-1.5vh) scale(1.05)}100%{transform:translateY(1vh) scale(.1) rotate(540deg);opacity:0}}
.jmt.out{opacity:0;pointer-events:none}
.jmt.won .char{box-shadow:0 0 0 4px #ffd23f,0 0 26px #ffd23f}
.jmov[data-st=done] .jmt.won{translate:0 -38vh;transition:translate 2.6s cubic-bezier(.4,.1,.3,1)}
.jmov .grhosts .ehost{height:42vh;bottom:2vh;z-index:4}
.jmov .grbub{top:30vh;max-width:20vw;z-index:6}
.jmov .grbub.her{left:auto;right:2vw;top:30vh}
/* ---------- Lost in Verona in 3D: the city blocks around the crossroads ---------- */
.jmov .jmcity{display:none}
.jm3d{position:absolute;inset:0;perspective:260vh;perspective-origin:50% 30%;overflow:hidden;--C:92vh;--B:58vh;--H:30vh;background:#2a1d3a}
.jmplane{position:absolute;left:50%;top:60%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(32deg) translate3d(calc(var(--x,0) * var(--C) * -1),calc(var(--y,0) * var(--C) * -1),0);transition:transform .6s cubic-bezier(.45,.05,.3,1)}
.jmplane.jump{transition:none}
.jmblocks{position:absolute;left:0;top:0;transform-style:preserve-3d}
.jmground{position:absolute;left:calc(var(--C) * -8);top:calc(var(--C) * -9);width:calc(var(--C) * 16);height:calc(var(--C) * 16);background-color:#5e524c;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 2.4vh),repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 3.6vh)}
.jmov .jm3d::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 22% 28% at 50% 56%,rgba(255,196,120,.42),transparent 70%),radial-gradient(ellipse at 50% 60%,transparent 40%,rgba(12,6,26,.55) 100%)}
.jmb3{position:absolute;width:var(--B);height:var(--B);left:calc(var(--C) * var(--i) - var(--B) / 2 + var(--C) / 2);top:calc(var(--C) * var(--j) - var(--B) / 2 + var(--C) / 2);transform-style:preserve-3d;--wc:#e9d0a2}
.jmb3[style*="--t:1"]{--wc:#e8b99c}.jmb3[style*="--t:2"]{--wc:#efdcb4}.jmb3[style*="--t:3"]{--wc:#d9a888}
.jmb3 i{position:absolute;display:block}
.jmb3 .roof{inset:0;transform:translateZ(var(--H));background:repeating-linear-gradient(0deg,#b85a36 0 1.4vh,#9c4426 1.4vh 1.7vh);box-shadow:inset 0 0 0 .9vh #7a3418,inset 0 0 5vh rgba(0,0,0,.4)}
.jmb3[style*="--t:1"] .roof{background:repeating-linear-gradient(90deg,#c46a3c 0 1.4vh,#a24f2a 1.4vh 1.7vh)}
.jmb3 .roof::after{content:'';position:absolute;left:62%;top:22%;width:12%;height:16%;background:#8a3a20;box-shadow:0 0 0 .3vh #5a2410}
.jmfac{background-color:var(--wc);--glass:rgba(255,205,120,.92)}
.jmfac::before{content:'';position:absolute;inset:8% 4% 22% 4%;background:repeating-linear-gradient(90deg,transparent 0 1.6vh,#2f5a3a 1.6vh 2.2vh,var(--glass) 2.2vh 5vh,#2f5a3a 5vh 5.6vh,transparent 5.6vh 8.4vh);-webkit-mask:repeating-linear-gradient(0deg,transparent 0 2.4vh,#000 2.4vh 7.4vh);mask:repeating-linear-gradient(0deg,transparent 0 2.4vh,#000 2.4vh 7.4vh)}
.jmfac::after{content:'';position:absolute;left:0;right:0;bottom:0;height:16%;background:repeating-linear-gradient(90deg,#5a3a26 0 1vh,rgba(255,200,120,.8) 1vh 4.6vh,#5a3a26 4.6vh 5.6vh,transparent 5.6vh 12vh)}
.jmb3 .s,.jmb3 .n{left:0;width:var(--B);height:var(--H);transform-origin:0 0}
.jmb3 .s{top:100%;transform:rotateX(-90deg) translateY(calc(var(--H) * -1))}
.jmb3 .n{top:0;transform:rotateX(-90deg) translateY(calc(var(--H) * -1));filter:brightness(.65)}
.jmb3 .w,.jmb3 .e{top:0;width:var(--H);height:var(--B);transform-origin:0 0}
.jmb3 .w{left:0;transform:rotateY(90deg) translateX(calc(var(--H) * -1));filter:brightness(.88)}
.jmb3 .e{left:var(--B);transform:rotateY(90deg) translateX(calc(var(--H) * -1));filter:brightness(.78)}
.jmb3 .w::before,.jmb3 .e::before{inset:4% 8% 4% 22%;background:repeating-linear-gradient(0deg,transparent 0 1.6vh,#2f5a3a 1.6vh 2.2vh,var(--glass) 2.2vh 5vh,#2f5a3a 5vh 5.6vh,transparent 5.6vh 8.4vh);-webkit-mask:repeating-linear-gradient(90deg,transparent 0 2.4vh,#000 2.4vh 7.4vh);mask:repeating-linear-gradient(90deg,transparent 0 2.4vh,#000 2.4vh 7.4vh)}
.jmb3 .w::after,.jmb3 .e::after{left:0;top:0;bottom:0;right:auto;width:16%;height:auto;background:repeating-linear-gradient(0deg,#5a3a26 0 1vh,rgba(255,200,120,.8) 1vh 4.6vh,#5a3a26 4.6vh 5.6vh,transparent 5.6vh 12vh)}
.jmov .jmholes,.jmov .jmgroup{top:56vh}
.jmhole{width:15vh;height:7vh;margin:-3.5vh 0 0 -7.5vh;scale:var(--hs,1)}
.jmov .jmmist{height:30vh}
.jmov .jmbalc{top:-2vh}
.jm3d{--x:0;--y:0}
.jm3d.jump .jmplane{transition:none}
.jmgp{transform-style:flat}
.jmb3.t1{--wc:#e8b99c}.jmb3.t2{--wc:#efdcb4}.jmb3.t3{--wc:#d9a888}
.jmb3.t1 .roof{background:repeating-linear-gradient(90deg,#c46a3c 0 1.4vh,#a24f2a 1.4vh 1.7vh)}
.jm3d{perspective:none}
.jmcam{position:absolute;inset:0;perspective:260vh;perspective-origin:50% 30%;overflow:hidden}
.jmb3 i{will-change:transform}
.jmb3 .roof{inset:-2px;transform:translateZ(calc(var(--H) + 3px))}
/* Lost in Verona in real 3D */
.jm3h{position:absolute;inset:0;background:#1b1236}
.jm3h canvas{display:block;width:100%!important;height:100%!important}
.jmov.v3 .jmgroup{left:var(--jx,50vw);top:var(--jy,56vh)}
.jmov .jmholes{display:none}
.jmov .jmmist{height:26vh;background:radial-gradient(ellipse 30% 60% at 20% 30%,rgba(255,255,255,.45),transparent 70%),radial-gradient(ellipse 30% 60% at 80% 25%,rgba(255,255,255,.4),transparent 70%),radial-gradient(ellipse 40% 70% at 50% 75%,rgba(235,230,250,.7),transparent 70%),linear-gradient(rgba(27,18,54,.95),rgba(210,200,235,.45) 60%,transparent)}
/* Juliet on her tower (in 3D), mist around its foot */
.jmov.v3 .jmbalc{left:var(--bx);top:var(--by);width:16vh;height:20vh;margin:-18.5vh 0 0 -8vh}
.jmov.v3 .jmbalc .jmrail{display:none}
.jmov.v3 .jmjul{bottom:0;height:17vh}
.jmov.v3 .jmmist{top:calc(var(--by) + 3vh);height:22vh;background:radial-gradient(ellipse 22% 50% at 30% 50%,rgba(240,235,255,.7),transparent 70%),radial-gradient(ellipse 26% 55% at 70% 45%,rgba(240,235,255,.65),transparent 70%),radial-gradient(ellipse 45% 60% at 50% 55%,rgba(230,222,250,.85),transparent 72%)}
/* little bodies that run */
.jmt .jmbody{top:4.6vh;width:4vh;height:3.6vh;border-radius:45% 45% 25% 25%;background:linear-gradient(#5a3a9a,#3a2470);z-index:1}
.jmt .jmbody i{position:absolute;top:.6vh;width:1.1vh;height:2.8vh;border-radius:1vh;background:#4a2f85;transform-origin:50% 0}
.jmt .jmbody i:first-child{left:-.7vh;rotate:20deg}.jmt .jmbody i:last-child{right:-.7vh;rotate:-20deg}
.jmlegs{position:absolute;top:7.6vh;left:50%;width:3vh;height:3vh;margin-left:-1.5vh;z-index:0}
.jmlegs i{position:absolute;top:0;width:1.1vh;height:2.8vh;border-radius:.6vh;background:#2a1a4a;transform-origin:50% 0}
.jmlegs i:first-child{left:.3vh}.jmlegs i:last-child{right:.3vh}
.jmt b{margin-top:5vh}
.jmt.run .jmlegs i:first-child,.jmt.falling .jmlegs i:first-child{animation:jmleg .22s ease-in-out infinite alternate}
.jmt.run .jmlegs i:last-child,.jmt.falling .jmlegs i:last-child{animation:jmleg .22s ease-in-out infinite alternate-reverse}
.jmt.run .jmbody i:first-child{animation:jmarm .22s ease-in-out infinite alternate-reverse}
.jmt.run .jmbody i:last-child{animation:jmarm .22s ease-in-out infinite alternate}
@keyframes jmleg{from{rotate:-32deg}to{rotate:32deg}}
@keyframes jmarm{from{rotate:-40deg}to{rotate:40deg}}
/* Juliet's tower: a backdrop rising out of the mist in the middle */
.jmtower{position:absolute;left:50%;top:-4vh;width:22vh;height:34vh;margin-left:-11vh;z-index:2;pointer-events:none}
.jmtower .tw{position:absolute;left:3vh;right:3vh;top:6vh;bottom:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 2.6vh),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 4vh),linear-gradient(90deg,#c9b48e,#efe0c0 40%,#d8c4a0 70%,#b49e78);box-shadow:0 0 40px rgba(0,0,0,.5)}
.jmtower .tw::before{content:'';position:absolute;left:50%;top:5vh;width:4vh;height:7vh;margin-left:-2vh;border-radius:2vh 2vh 0 0;background:linear-gradient(#ffd27a,#e88a3a);box-shadow:0 0 20px rgba(255,190,110,.8)}
.jmtower .tr{position:absolute;left:0;right:0;top:0;height:7vh;background:linear-gradient(135deg,#c86a42,#8a3a20);clip-path:polygon(50% 0,100% 100%,0 100%)}
.jmov.v3 .jmbalc{left:50%;top:5vh;width:18vh;height:20vh;margin:0 0 0 -9vh;z-index:3}
.jmov.v3 .jmbalc .jmrail{display:block;bottom:1vh;height:4vh;left:-1vh;right:-1vh}
.jmov.v3 .jmjul{bottom:4vh;height:15vh}
.jmov.v3 .jmmist{top:16vh;height:20vh;z-index:3}
.jmov.v3 .jmmist{top:14vh;height:22vh;background:radial-gradient(ellipse 18% 55% at 40% 50%,rgba(240,235,255,.85),transparent 70%),radial-gradient(ellipse 18% 55% at 60% 45%,rgba(240,235,255,.85),transparent 70%),radial-gradient(ellipse 34% 60% at 50% 55%,rgba(232,225,252,.92),transparent 72%)}
/* the top of the screen: a sky full of clouds that stays put; Juliet's tower far away, rising out of it */
.jmsky{position:absolute;left:0;right:0;top:0;height:34vh;z-index:2;pointer-events:none}
.jmsky:not(.front){background:linear-gradient(#120a2e 0%,#2e1c5a 45%,#6a3f7a 80%,rgba(140,100,150,0) 100%)}
.jmsky .cb{position:absolute;inset:0;background:radial-gradient(ellipse 14% 40% at 12% 70%,rgba(200,185,230,.55),transparent 70%),radial-gradient(ellipse 16% 42% at 86% 68%,rgba(200,185,230,.55),transparent 70%),radial-gradient(circle at 78% 22%,#fff8e0 0 2.2vh,rgba(255,248,224,.25) 2.4vh,transparent 7vh)}
.jmsky.front{top:12vh;height:28vh;z-index:3}
.jmsky.front i{position:absolute;left:-20%;right:-20%;height:100%;top:0}
.jmsky.front .c1{background:radial-gradient(ellipse 18% 46% at 10% 55%,#e9e2f6 0 40%,transparent 72%),radial-gradient(ellipse 20% 50% at 34% 50%,#ded4f0 0 40%,transparent 72%),radial-gradient(ellipse 22% 48% at 58% 58%,#e9e2f6 0 40%,transparent 72%),radial-gradient(ellipse 18% 46% at 82% 52%,#ded4f0 0 40%,transparent 72%),radial-gradient(ellipse 16% 40% at 102% 56%,#e9e2f6 0 40%,transparent 72%);opacity:.95;animation:jmdrift 40s linear infinite alternate}
.jmsky.front .c2{top:22%;background:radial-gradient(ellipse 22% 46% at 20% 60%,#cfc3e8 0 40%,transparent 74%),radial-gradient(ellipse 24% 50% at 50% 66%,#d8cdee 0 40%,transparent 74%),radial-gradient(ellipse 22% 46% at 80% 60%,#cfc3e8 0 40%,transparent 74%);opacity:.9;animation:jmdrift 55s linear infinite alternate-reverse}
.jmsky.front .c3{top:46%;background:linear-gradient(rgba(214,204,236,0),rgba(214,204,236,.85) 40%,rgba(180,160,210,.35) 80%,transparent);animation:none}
@keyframes jmdrift{to{transform:translateX(8%)}}
.jmov.v3 .jmmist{display:none}
.jmtower{top:2vh;width:10vh;height:26vh;margin-left:-5vh;z-index:2;transform-origin:50% 100%;scale:calc(1 + var(--near,0) * .06);transition:scale .6s}
.jmtower .tw{left:1.6vh;right:1.6vh;top:3.4vh;filter:brightness(.85) saturate(.8)}
.jmtower .tw::before{width:2vh;height:3.4vh;margin-left:-1vh;top:6vh}
.jmtower .tr{height:3.6vh}
.jmov.v3 .jmbalc{top:1vh;width:9vh;height:11vh;margin-left:-4.5vh;z-index:2;transform-origin:50% 100%;scale:calc(1 + var(--near,0) * .06);transition:scale .6s}
.jmov.v3 .jmjul{bottom:1.6vh;height:8vh}
.jmov.v3 .jmbalc .jmrail{height:2.2vh;bottom:.4vh}
.jmov.v3 .jmsay{width:9vh;height:9vh;top:0}
.jmov.v3 .jmsay b{font-size:5vh}
.jmtower{top:-1vh;height:30vh}
.jmov.v3 .jmbalc{top:6.5vh}
/* higher clouds; Juliet's romantic house */
.jmsky:not(.front){height:24vh}
.jmsky.front{top:7vh;height:19vh}
.jmtower,.jmtfront{position:absolute;left:50%;top:-3vh;width:16vh;height:25.6vh;margin-left:-8vh;z-index:2;pointer-events:none;transform-origin:50% 100%;scale:calc(1 + var(--near,0) * .06);transition:scale .6s}
.jmtfront{z-index:2}
.jmtower svg,.jmtfront svg{width:100%;height:100%;display:block;overflow:visible}
.jmtower .tw,.jmtower .tr{display:none}
.jmov.v3 .jmbalc{top:-2.4vh;width:9vh;height:11vh;margin-left:-4.5vh;z-index:2;transform-origin:50% 26vh;scale:calc(1 + var(--near,0) * .06)}
.jmov.v3 .jmjul{bottom:0;height:8.2vh}
.jmov.v3 .jmbalc .jmrail{display:none}
.jmov.v3 .jmsay{left:110%;top:0}
.jmtower,.jmtfront{top:1vh;width:20vh;height:32vh;margin-left:-10vh}
.jmov.v3 .jmbalc{top:5.6vh;width:11vh;height:11vh;margin-left:-5.5vh;transform-origin:50% 27.4vh}
.jmov.v3 .jmjul{height:10vh}
.jmsky.front{top:17vh;height:17vh}
.jmsky:not(.front){height:30vh}
.jmtower,.jmtfront{top:1vh;width:15vh;height:24vh;margin-left:-7.5vh}
.jmov.v3 .jmbalc{top:3.6vh;width:9vh;height:9vh;margin-left:-4.5vh;transform-origin:50% 21.4vh}
.jmov.v3 .jmjul{height:8vh}
.jmsky.front{top:12vh;height:13vh}
.jmsky:not(.front){height:22vh}
/* the buildings in front of the crossroads, drawn again over the players; the presenters in the street in front */
.jm3o{position:absolute;inset:0;z-index:2;pointer-events:none}
.jm3o canvas{display:block;width:100%!important;height:100%!important}
.jmov.v3 .grhosts .ehost{height:var(--hh,30vh);bottom:auto;top:calc(var(--hy) - var(--hh,30vh));z-index:4;translate:-50% 0}
.jmov.v3 .grhosts .him{left:var(--h1x)}.jmov.v3 .grhosts .her{left:var(--h2x);right:auto}
.jmov.v3 .grbub{top:auto;bottom:calc(100vh - var(--hy) + var(--hh,30vh) - 2vh);max-width:22vw}
.jmov.v3 .grbub.him{left:auto;right:calc(100vw - var(--h1x) + 3vw);border-bottom-right-radius:4px;border-bottom-left-radius:18px}
.jmov.v3 .grbub.her{left:calc(var(--h2x) + 3vw);right:auto;border-bottom-left-radius:4px;border-bottom-right-radius:18px}
/* a wrong way: they keep running down that street, out of the picture */
.jmt.falling{translate:var(--fx) var(--fy);transition:translate 1.6s cubic-bezier(.4,.1,.8,.6),opacity .5s 1.2s;animation:none;opacity:0}
.jmt.falling .char{animation:jmrun .18s ease-in-out infinite alternate}
.jmt.falling .jmbody i:first-child{animation:jmarm .22s ease-in-out infinite alternate-reverse}
.jmt.falling .jmbody i:last-child{animation:jmarm .22s ease-in-out infinite alternate}
/* the presenters north of the players (between them and Juliet), standing still; players the same size as them */
.jmov.v3 .grhosts{z-index:1}
.jmov.v3 .grhosts .ehost{animation:none!important;z-index:1}
.jmov.v3 .jmgroup{z-index:2}
.jmov.v3 .jmt{scale:var(--ps,1);transform-origin:50% 100%}
.jmov.v3 .grbub{bottom:calc(100vh - var(--hy) + var(--hh,30vh) + 1vh)}
.jmov.v3 .jmt{transform-origin:50% 50%}
/* the presenters run off north, into the clouds */
.jmov.v3 .grhosts .ehost{transition:translate 2.4s cubic-bezier(.5,0,.7,.4),scale 2.4s cubic-bezier(.5,0,.7,.4),opacity .6s 1.8s;transform-origin:50% 100%}
.jmov.v3.hostsgone .grhosts .ehost{translate:-50% -34vh;scale:.35;opacity:0;animation:jmhostrun .2s ease-in-out infinite alternate!important}
@keyframes jmhostrun{to{rotate:5deg}}
.jmnews{position:absolute;left:50%;top:27vh;transform:translateX(-50%);z-index:5;max-width:56vw;padding:.5em 1.1em;border-radius:16px;background:rgba(18,10,40,.78);color:#fff;font-weight:900;font-size:clamp(.95rem,1.6vw,1.35rem);text-align:center;opacity:0;transition:opacity .3s}
.jmnews.on{opacity:1}
.jmnews .unsaid{visibility:hidden}
/* Juliet stays inside until the presenters have gone, then steps out onto her balcony */
.jmov.v3 .jmjul{transition:translate .7s cubic-bezier(.3,1.5,.5,1),opacity .4s;translate:0 60%;opacity:0}
.jmov.v3.julon .jmjul{translate:0 0;opacity:1}
.jmjbub{position:absolute;left:calc(50% + 9vh);top:2vh;z-index:6;max-width:30vw;padding:.65em 1em;border-radius:18px;border-bottom-left-radius:4px;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(.9rem,1.45vw,1.25rem);line-height:1.25;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.jmjbub.on{opacity:1;transform:none}
.jmjbub .unsaid{visibility:hidden}

/* Lost in Verona on the phone: timer bar on top, the steps you tapped, the four arrows at the bottom */
.qjui.play{position:fixed;inset:0;z-index:40;margin:0;padding:14px 14px calc(16px + env(safe-area-inset-bottom));gap:12px;background:linear-gradient(170deg,#2a0f3a,#0b0633 70%);justify-content:flex-start}
.jmbar{display:none;height:16px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;flex:none}
.qjui.play .jmbar{display:block}
.jmbar i{display:block;height:100%;width:100%;border-radius:9px;background:linear-gradient(90deg,#ff4d6a,#ffd23f 40%,#3ddc84)}
.qjui.wait .jmbar i{background:rgba(255,255,255,.3)}
.jmtell{display:none;text-align:center;flex:none}
.qjui.play .jmtell{display:block}
.jmtell b{display:block;font-size:1.9rem;line-height:1.15;color:#ffd23f}
.jmtell span{display:block;margin-top:4px;font-size:1.05rem;color:var(--mute)}
.jmlog{display:flex;justify-content:center;align-content:center;flex-wrap:wrap;gap:5px;flex:1;min-height:40px}
.jmlog i{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);font-style:normal;font-size:1.25rem;display:flex;align-items:center;justify-content:center}
.jmlog i.on{background:rgba(255,210,63,.25);box-shadow:inset 0 0 0 2px #ffd23f}
.qjui.play .jmpad{margin-top:auto;max-width:380px;flex:none}

/* arriving in Verona: two seconds of black, then a little cloud of smoke from Stella */
.jmblack{position:absolute;inset:0;z-index:60;background:#000;pointer-events:none;transition:opacity .7s ease}
.jmov.lit .jmblack{opacity:0}
.jmpuff{position:absolute;z-index:31;left:calc(var(--h2x,70vw) + 1.5vw);top:calc(var(--hy,80vh) - var(--hh,20vh) * .82);width:0;height:0;pointer-events:none}
.jmpuff i{position:absolute;left:0;top:0;width:3.2vh;height:3.2vh;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.95),rgba(215,215,225,.75) 55%,rgba(200,200,210,0) 72%);opacity:0;filter:blur(1px)}
.jmov.puff .jmpuff i{animation:jmpuff 2.6s ease-out forwards}
.jmov.puff .jmpuff i:nth-child(2){animation-delay:.25s}
.jmov.puff .jmpuff i:nth-child(3){animation-delay:.5s}
.jmov.puff .jmpuff i:nth-child(4){animation-delay:.8s}
@keyframes jmpuff{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.95}100%{opacity:0;transform:translate(3vh,-9vh) scale(2.6)}}
.jmov.hostsgone .jmpuff{display:none}
/* a thick cloud bank at the foot of Juliet's tower: no gap between the end of the road and her building */
.jmsky.front .c4{top:auto;bottom:-7vh;height:11vh;animation:none;background:radial-gradient(ellipse 9% 60% at 38% 40%,#e3daf3 0 45%,transparent 75%),radial-gradient(ellipse 10% 65% at 50% 35%,#e9e2f6 0 45%,transparent 75%),radial-gradient(ellipse 9% 60% at 62% 40%,#e3daf3 0 45%,transparent 75%),linear-gradient(rgba(220,210,240,0),rgba(220,210,240,.95) 30%,rgba(214,204,236,.9) 62%,rgba(214,204,236,0))}

/* Lost in Verona: the car out of the mist, the jump over it, and the ones sent flying */
.jmcar{position:absolute;left:0;top:0;width:13vh;height:10vh;margin:-6vh 0 0 -6.5vh;z-index:0;pointer-events:none;transform-origin:50% 60%;scale:var(--ps,1);animation:jmcar 2.6s cubic-bezier(.55,0,.75,.6) forwards}
.jmcar svg{position:relative;width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 1vh 1vh rgba(0,0,0,.5))}
.jmcar .beam{position:absolute;left:-60%;right:-60%;top:55%;height:260%;background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(255,246,190,.55),rgba(255,240,170,.18) 50%,transparent 75%);filter:blur(4px)}
@keyframes jmcar{0%{transform:translate(var(--sx),var(--sy)) scale(.18);opacity:0}12%{opacity:1}62%{transform:translate(0,0) scale(1)}100%{transform:translate(0,var(--ey)) scale(3.2);opacity:1}}
.jmt.jump .char,.jmt.jump .jmbody,.jmt.jump .jmlegs{animation:jmjump .75s cubic-bezier(.2,.9,.3,1) both}
@keyframes jmjump{0%{transform:none}15%{transform:translateY(.8vh) scaleY(.85)}50%{transform:translateY(-11vh) rotate(-8deg)}85%{transform:translateY(-1vh)}100%{transform:none}}
.jmt.falling.hit{translate:0 0;opacity:1;transition:none;animation:jmhitfly 1.5s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes jmhitfly{0%{transform:none}100%{transform:translate(18vw,-120vh) rotate(1080deg) scale(.6)}}
.jmt.falling.hop{translate:0 0;transition:opacity .6s 1.2s}
.jmt.falling.hop .char{animation:jmjump .75s both}
.jmpad [data-dir="4"]{grid-area:2/2;display:none;flex-direction:column;align-items:center;justify-content:center;font-size:2.4rem;background:rgba(255,77,106,.28);box-shadow:inset 0 0 0 3px #ff4d6a}
.jmpad [data-dir="4"] small{font-size:.9rem;font-weight:900;letter-spacing:.08em;color:#fff}
.qjui.jumps .jmpad [data-dir="4"]{display:flex}
/* the top of Juliet's tower pokes out above the clouds (a copy of the tower over the cloud layer, fading out
   further down, so the foot stays hidden in the clouds); her balcony sits between the two copies */
.jmov .jmtower.jmtop{z-index:4;-webkit-mask-image:linear-gradient(#000 38%,transparent 52%);mask-image:linear-gradient(#000 38%,transparent 52%)}
.jmov.v3 .jmbalc{z-index:5}
.jmov .jmtfront.jmtop2{z-index:6;-webkit-mask-image:linear-gradient(#000 38%,transparent 52%);mask-image:linear-gradient(#000 38%,transparent 52%)}
.jmov .jmjbub{z-index:7}
/* Juliet's tower stays the same size all game (it no longer comes closer when the group walks north) */
.jmov .jmtower,.jmov .jmtfront,.jmov.v3 .jmbalc{scale:1!important}
/* (the cloud bank at the tower's foot only over the end of the road, not over the roofs beside it) */
.jmsky.front .c4{left:0;right:0;bottom:-6vh;height:10vh;background:radial-gradient(ellipse 7vh 60% at 50% 45%,#e7dff5 0 50%,transparent 80%),radial-gradient(ellipse 6vh 50% at calc(50% - 4vh) 55%,#e1d8f2 0 45%,transparent 80%),radial-gradient(ellipse 6vh 50% at calc(50% + 4vh) 55%,#e1d8f2 0 45%,transparent 80%)}

/* the end of Lost in Verona: the ones still in walk down the street, out of the bottom of the picture */
.jmt.home{translate:var(--gx,0) 70vh!important;transition:translate 3.2s ease-in!important}
.jmt.home .char{animation:jmrun .18s ease-in-out infinite alternate}
.jmt.home .jmlegs i:first-child{animation:jmleg .22s ease-in-out infinite alternate}
.jmt.home .jmlegs i:last-child{animation:jmleg .22s ease-in-out infinite alternate-reverse}

/* the car now comes from the side, along the cross street */
.jmcar{width:22vh;height:10vh;margin:-2vh 0 0 -11vh;transform-origin:50% 50%;animation:jmcar2 2.6s cubic-bezier(.3,.1,.6,.9) forwards}
.jmcar.rtl svg,.jmcar.rtl .beam{scale:-1 1}
.jmcar .beam{left:88%;right:auto;top:-10%;width:30vh;height:120%;background:radial-gradient(ellipse 60% 40% at 0% 55%,rgba(255,246,190,.6),rgba(255,240,170,.2) 50%,transparent 80%);transform-origin:-45% 50%}
.jmcar.rtl .beam{left:auto;right:88%;transform-origin:145% 50%}
@keyframes jmcar2{0%{transform:translateX(var(--sx))}62%{transform:translateX(0)}100%{transform:translateX(var(--ex))}}
/* no extra cloud at the foot of the tower; the cloud band itself a little thicker instead */
.jmsky.front .c4{display:none}
.jmsky.front{top:10.5vh;height:17vh}

/* Juliet's symbols bigger; no game name in the corner; a time bar while the route is tapped */
.jmov.v3 .jmsay{width:14vh;height:14vh}
.jmov.v3 .jmsay b{font-size:8.5vh}
.jmov.v3 .jmsay small{font-size:2vh}
.jmov .qjsign{display:none}
.jmtbar{position:absolute;left:50%;bottom:11vh;width:min(60vw,70vh);height:2.4vh;transform:translateX(-50%);border-radius:2vh;background:rgba(20,10,40,.55);box-shadow:0 0 0 3px rgba(255,255,255,.8),0 6px 18px rgba(0,0,0,.5);overflow:hidden;z-index:8;opacity:0;transition:opacity .3s;pointer-events:none}
.jmtbar.on{opacity:1}
.jmtbar i{display:block;height:100%;width:100%;border-radius:2vh;background:linear-gradient(90deg,#ff4d6a,#ffd23f 40%,#3ddc84)}

/* the little city car, and its beam of light (above the buildings, so it shows before the car comes round the corner) */
.jmcar{width:17vh;height:10vh;margin:-4vh 0 0 -8.5vh}
.jmcar .beam{display:none}
.jmbeam{position:absolute;left:var(--jx,50vw);top:var(--jy,56vh);width:44vh;height:16vh;margin:-7vh 0 0 6vh;z-index:3;pointer-events:none;mix-blend-mode:screen;transform-origin:-6vh 50%;scale:var(--ps,1);
  background:radial-gradient(ellipse 70% 45% at 0% 50%,rgba(255,248,200,.85),rgba(255,236,160,.35) 45%,transparent 75%);filter:blur(3px);animation:jmcar2 2.6s cubic-bezier(.3,.1,.6,.9) forwards}
.jmbeam.rtl{margin-left:-50vh;transform-origin:calc(100% + 6vh) 50%;background:radial-gradient(ellipse 70% 45% at 100% 50%,rgba(255,248,200,.85),rgba(255,236,160,.35) 45%,transparent 75%)}
/* the jump: up high and hanging in the air long enough for the whole car to pass underneath */
.jmt.jump .char,.jmt.jump .jmbody,.jmt.jump .jmlegs{animation:jmjump2 1.15s cubic-bezier(.25,.8,.35,1) both}
@keyframes jmjump2{0%{transform:none}10%{transform:translateY(.8vh) scaleY(.85)}28%{transform:translateY(-13vh) rotate(-6deg)}72%{transform:translateY(-14vh) rotate(6deg)}92%{transform:translateY(-1vh)}100%{transform:none}}

/* arriving in Verona: the presenters just stand there (no gliding into place); Stella keeps puffing smoke while .puff is on */
.jmov:not(.v3) .grhosts{visibility:hidden}
.jmov.v3:not(.hostsgone) .grhosts .ehost{transition:none}
.jmov.puff .jmpuff i{animation:jmpuff 2.2s ease-out infinite}
.jmov.puff .jmpuff i:nth-child(2){animation-delay:.55s}
.jmov.puff .jmpuff i:nth-child(3){animation-delay:1.1s}
.jmov.puff .jmpuff i:nth-child(4){animation-delay:1.65s}

/* The Envelope, Please: the one-time pass button under the envelopes */
.bombui .bpassbtn{grid-column:1/-1;width:100%;margin-top:6px;background:linear-gradient(135deg,#5b3bd6,#9a3fd0)}
.bombui .bpassbtn small{font-size:.75em;opacity:.8;font-weight:600}

/* everyone in their own outfit */
.jmt .jmbody{background:linear-gradient(var(--o1,#5a3a9a),var(--o2,#3a2470))}
.jmt .jmbody i{background:var(--o2,#4a2f85)}
.jmt .jmlegs i{background:var(--ol,#2a1a4a)}
/* the time bar sits at the foot of Juliet's tower */
.jmtbar{top:26vh;bottom:auto;width:32vh;height:2vh}

/* the players' own speech balloon, above the group ("Now what…?") */
.jmgbub{position:absolute;left:var(--jx,50vw);top:calc(var(--jy,56vh) - 27vh);transform:translateX(-50%) scale(.6);opacity:0;z-index:8;padding:.6em 1.1em;border-radius:20px;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(18px,2.8vh,34px);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.45);transition:opacity .3s,transform .3s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.jmgbub::after{content:'';position:absolute;left:50%;bottom:-12px;margin-left:-12px;border:12px solid transparent;border-bottom:0;border-top-color:#fff}
.jmgbub.on{opacity:1;transform:translateX(-50%) scale(1)}

/* every round starts with a big "Round 1 · Get ready!" and a 3, 2, 1 in the middle of the screen */
.jmcount{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;text-align:center;color:#fff;pointer-events:none;opacity:0;transition:opacity .25s;text-shadow:0 6px 24px rgba(0,0,0,.7),0 0 4px rgba(0,0,0,.6)}
.jmcount.on{opacity:1}
.jmcount b{display:block;font-size:min(16vh,14vw);font-weight:900;line-height:1;color:#ffd23f;-webkit-text-stroke:3px #7a1b4a}
.jmcount small{display:block;margin-top:1.5vh;font-size:min(5vh,5vw);font-weight:900}
.jmcount.jmpop b{animation:jmcdpop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes jmcdpop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
/* the round countdown in the style of the Grand Final's big messages: a dark box with a golden edge */
.jmcount{display:block;width:auto;height:auto;background:#170a26;border:2px solid rgba(255,210,63,.55);box-shadow:0 20px 60px rgba(0,0,0,.8);padding:20px 40px;border-radius:22px;font-weight:900;font-size:clamp(1.6rem,4vw,3.4rem);text-shadow:0 4px 18px #000;color:#fff;min-width:0;white-space:nowrap}
.jmcount b{display:block;font-size:1em;line-height:1.1;color:#fff;-webkit-text-stroke:0}
.jmcount small{display:block;font-size:.4em;color:#d9c8f0;margin-top:8px;font-weight:700}
.jmcount.num b{font-size:2em;color:#ffd23f}
/* the car drives through where the players stand now (they moved north) */
.jmcar{margin-top:-12vh}

.jmgbub .e{font-style:normal;font-size:1.4em;margin-right:.35em;vertical-align:-.15em;display:inline-block;animation:jmhuh 1s ease-in-out infinite alternate}
@keyframes jmhuh{from{rotate:-12deg}to{rotate:12deg}}

/* the countdown box keeps one size: "Round 1 · Get ready!" and the 3, 2, 1 in the same frame */
.jmcount{box-sizing:border-box;width:clamp(280px,30vw,480px);height:clamp(150px,24vh,240px);padding:0 20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jmcount.num b{font-size:2.2em;line-height:1}

/* done tapping: the arrows stay, greyed out a little, and can't be pressed */
.qjui.fin .vrbtn{opacity:.45;filter:grayscale(.7);pointer-events:none}

/* the phone: ten boxes for the route, Reset and Send */
.qjui.play .jmlog{flex:none;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;max-width:380px;margin:0 auto}
.qjui.play .jmlog i{width:auto;height:auto;aspect-ratio:1;font-size:1.6rem}
.jmlog i.off{opacity:.18}
.jmacts{display:none;gap:10px;width:100%;max-width:380px;margin:0 auto}
.qjui.play .jmacts{display:flex}
.jmacts .btn{flex:1;padding:12px 8px;font-size:1.05rem}
.jmacts .btn:disabled{opacity:.35}
.jmacts .jmsend.ready{background:linear-gradient(135deg,#3ddc84,#1fa860);animation:jmready 1s ease-in-out infinite alternate}
@keyframes jmready{to{transform:scale(1.04)}}

/* the phone layout holds still: the bar always at the top, the instruction in a block of fixed height */
.qjui.play{justify-content:flex-start}
.qjui.play .jmbar{display:block;flex:none}
.qjui.play .jmtell{display:flex;flex-direction:column;justify-content:center;height:5.6rem;flex:none;overflow:hidden}
.qjui.play .jmtell b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(1.3rem,6.5vw,1.9rem)}
.qjui.play .jmtell span{min-height:2.6em}

/* the phone: everything fits on one screen; the route boxes in one row of ten, smaller buttons */
.qjui.play{gap:10px}
.qjui.play .jmlog{grid-template-columns:repeat(10,1fr);gap:4px;max-width:400px}
.qjui.play .jmlog i{font-size:1.05rem;border-radius:7px}
.jmacts{max-width:320px}
.jmacts .btn{padding:7px 8px;font-size:.92rem;border-radius:12px}
.qjui.play .jmpad{max-width:min(330px,42vh);gap:7px}
.qjui.play .jmpad .vrbtn{font-size:clamp(1.8rem,7vh,2.8rem);border-radius:16px}
.qjui.play .jmpad [data-dir="4"]{font-size:clamp(1.4rem,5.5vh,2.2rem)}
/* Send: green all the way, with its own green edge underneath (not the pink one of the normal buttons) */
.jmacts .jmsend{box-shadow:0 4px 0 #a3104f}
.jmacts .jmsend.ready{background:linear-gradient(135deg,#3ddc84,#1fa860);box-shadow:0 4px 0 #137a43}
.jmacts .jmsend.ready:active{box-shadow:0 1px 0 #137a43;transform:translateY(3px)}
.jmacts .jmsend:disabled{box-shadow:none}

/* the car's own little headlight beam, a soft cone of light in front of it */
.jmcar .hl{position:absolute;left:94%;top:28%;width:16vh;height:8vh;margin-top:-1.5vh;pointer-events:none;mix-blend-mode:screen;z-index:-1;
  background:radial-gradient(ellipse 100% 55% at 0% 50%,rgba(255,248,205,.9),rgba(255,238,160,.35) 45%,transparent 75%);clip-path:polygon(0 38%,100% 0,100% 100%,0 62%);filter:blur(1.5px);animation:jmhl .18s ease-in-out infinite alternate}
.jmcar.rtl .hl{left:auto;right:94%;scale:-1 1}
@keyframes jmhl{to{opacity:.8}}
/* the runway is two spaces longer at the start (22 instead of 20): it reaches further to the left, the tiles keep their size */
.chrun{left:16.4%}

/* NOT SO FAST: the monster slides over to the leader's lane; three spaces glow, are smashed; new spaces slide in at the stage end */
.chmon{transition:left 1.4s ease-in-out,top 1s ease-in-out,opacity .6s}
.chtiles i.nsfglow{background:repeating-linear-gradient(45deg,#ff1744 0 8px,#3a0010 8px 16px)!important;box-shadow:inset 0 0 0 3px #ff1744,0 0 26px #ff1744!important;animation:chwarn .3s ease-in-out infinite alternate!important}
.chtiles i.nsfsmash{animation:chcrumble 1s ease-in forwards!important}
.chtiles i.nsfnew{animation:chnsfnew .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes chnsfnew{from{transform:translateX(120%) scale(.6);opacity:0}to{transform:none;opacity:1}}

/* The Envelope, Please: the deal - flaps open, the bomb drops in, flaps close, a shuffle */
.bombov .benvs{position:absolute}
.bombov .benv{transition:transform .3s}
.bombov .benvs.dealing .benv{animation:benvin .6s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes benvin{from{translate:0 40vh;rotate:-20deg;opacity:0}to{translate:0 0;rotate:0deg;opacity:1}}
.bombov .benv.flap::before{transform-origin:50% 0;transform:scaleY(-1);background:linear-gradient(200deg,#fff3b0,#e0b030);transition:transform .35s}
.bombov .benv::before{transition:transform .35s}
.bombov .benv.thud{animation:benvthud .4s ease-out}
@keyframes benvthud{30%{scale:1.15 .85}60%{scale:.95 1.08}}
.bombov .benv.hop{z-index:3;translate:0 -18px;transition:translate .15s}
.bombov .bdrop{position:absolute;left:50%;top:-60vh;font-size:clamp(2rem,4vw,3.4rem);transform:translateX(-50%);z-index:5;pointer-events:none;filter:drop-shadow(0 0 12px #ff6a00)}
.bombov .bdrop.fall{animation:bdrop 1s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes bdrop{0%{top:-60vh;rotate:0deg}85%{top:-1vh;rotate:540deg}100%{top:0;rotate:560deg;opacity:0;scale:.4}}
/* numbers only once the shuffle is over (they belong to the places, not to the envelopes); unopened envelopes float a little */
.bombov .benvs.dealing .bno{visibility:hidden}
.bombov .benvs:not(.dealing) .benv:not(.open):not(.picked){animation:benvfloat 2.2s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.37s)}
@keyframes benvfloat{from{translate:0 0;rotate:-1.5deg}to{translate:0 -7px;rotate:1.5deg}}

/* NOT SO FAST: a little smaller while she stands in a lane (so she still fits next to the top lane) */
.chmon{transition:left 1.4s ease-in-out,top 1s ease-in-out,scale 1s ease-in-out,opacity .6s}

/* the final scores: the presenters a little closer to the board, with big speech balloons */
.fsov .grhosts .him{left:8vw}.fsov .grhosts .her{right:8vw}
.fsov .grbub{top:9vh;max-width:30vw;font-size:clamp(1.15rem,2.1vw,1.9rem);padding:.7em 1.1em;border-radius:22px}
.fsov .grbub.him{left:3vw}.fsov .grbub.her{right:3vw}
.fsov.cin .fscour{left:21vw}

body.hasdock main{padding-bottom:84px}

/* items on you, on your own screen: the giant flag over the question, the pillar (half points), the broken mic */
#v-guess{position:relative}
.pflag{display:none;position:absolute;left:-6px;right:-6px;top:28px;height:150px;z-index:6;pointer-events:none}
.pflag.on{display:block}
.pflag .pole{position:absolute;left:6px;top:-18px;bottom:-30px;width:7px;border-radius:4px;background:linear-gradient(90deg,#c9c9c9,#fff,#9a9a9a)}
.pflag .cloth{position:absolute;left:13px;right:0;top:0;bottom:0;border-radius:4px 10px 10px 4px;background:linear-gradient(180deg,#ff2f88 0 33%,#ffd23f 33% 66%,#2de2e6 66%);box-shadow:0 10px 26px rgba(0,0,0,.5);transform-origin:0 50%;animation:pflagwave 1.1s ease-in-out infinite alternate}
.pflag .cloth b{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 22px,rgba(0,0,0,.12) 22px 44px);animation:pflagripple 1.1s linear infinite}
.pflag .cloth::after{content:'❤';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:64px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}
@keyframes pflagwave{from{transform:skewY(-2deg) scaleX(.98)}to{transform:skewY(2deg) scaleX(1)}}
@keyframes pflagripple{to{background-position:44px 0}}
.ppillar{display:none;position:absolute;left:58%;top:-10px;bottom:-40px;width:64px;z-index:6;pointer-events:none;flex-direction:column;align-items:center}
.ppillar.on{display:flex}
.ppillar .cap,.ppillar .base{width:84px;height:22px;border-radius:4px;background:linear-gradient(90deg,#7d7d86,#d8d8e0 45%,#8a8a94)}
.ppillar .shaft{flex:1;width:64px;background:repeating-linear-gradient(90deg,#9a9aa4 0 8px,#d0d0d8 8px 16px,#b4b4bd 16px 22px);box-shadow:0 0 30px rgba(0,0,0,.6)}
.ppillar span{position:absolute;top:44%;padding:4px 8px;border-radius:8px;background:#ff4d6a;color:#fff;font-weight:900;font-size:.85rem;white-space:nowrap;transform:rotate(-8deg);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.pmic{position:relative;display:block;width:120px;height:120px;margin:0 auto 10px}
.pmic i{position:absolute;inset:0;font-style:normal;font-size:96px;line-height:120px;filter:grayscale(.6);animation:pmicshake .15s linear infinite alternate}
.pmic b{position:absolute;right:-6px;top:-6px;font-size:54px;animation:pmicboom 1.2s ease-in-out infinite}
@keyframes pmicshake{from{transform:rotate(-8deg)}to{transform:rotate(6deg) translateX(2px)}}
@keyframes pmicboom{50%{transform:scale(1.25)}}
.pflag{top:36px;height:96px}
.pflag .cloth::after{font-size:46px}
/* the pillar really is in the way: wide, right in the middle of the question and the answers (taps still go through) */
.ppillar{left:50%;width:150px;margin-left:-75px;top:-20px;bottom:-60px}
.ppillar .cap,.ppillar .base{width:178px;height:26px}
.ppillar .shaft{width:150px;background:repeating-linear-gradient(90deg,#8e8e98 0 12px,#d4d4dc 12px 24px,#acacb6 24px 32px)}

/* the scoreboard: items working against a player, with the questions left */
.rfx{display:inline-block;margin-left:4px;padding:0 6px;border-radius:10px;background:rgba(255,77,106,.25);box-shadow:inset 0 0 0 1px rgba(255,77,106,.6);font-size:.78em;font-weight:900;white-space:nowrap;vertical-align:middle}
/* the pillar runs the full height of the phone, top to bottom */
.ppillar{position:fixed;top:0;bottom:0;z-index:30}
.ppillar .cap,.ppillar .base{display:none}

/* scoreboard: the name, and below it the bag, the umbrella and what is working against them */
.board .wtx{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.board .wn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .wsub{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:3px;font-size:.78em;font-weight:800}
.board .wsub .rfx{margin-left:0}
.board .wbag{display:inline-flex;align-items:center;gap:2px;padding:0 7px 0 2px;border-radius:999px;background:rgba(255,63,164,.16);border:1px solid rgba(255,63,164,.45)}
.board .wbag .bagico{width:1.5em;height:1.5em;flex:none}
#board .binv{display:none}

/* the giant flag on your phone: the answers are blank, only their outlines are left (you can still tap one) */
#opts.flagged .opt{color:transparent!important;text-shadow:none!important}
#opts.flagged .opt *{visibility:hidden}
#opts.flagged .opt{background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)!important}

/* the phone: robbed by a wristband (or the thief's loot), big in the middle */
.probbed{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(10,4,30,.7);opacity:0;pointer-events:none;transition:opacity .3s}
.probbed.on{opacity:1}
.probbed .pr{width:min(86vw,360px);padding:24px 20px;border-radius:24px;background:linear-gradient(160deg,#3a1460,#170a3a);box-shadow:0 0 0 3px #ff3fa4,0 20px 60px rgba(0,0,0,.6);text-align:center;transform:scale(.7);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.probbed.on .pr{transform:none}
.probbed .pri{font-size:4rem;line-height:1.1;margin-bottom:8px}
.probbed b{display:block;font-size:2rem;font-weight:900;color:#ffd23f;margin-bottom:6px}
.probbed span{display:block;font-size:1.1rem;font-weight:700;line-height:1.35}

/* the scoreboard tags: as tall as the bag, and a hand cursor for the explanation on hover */
.board .wsub .rfx{display:inline-flex;align-items:center;gap:2px;height:1.75em;padding:0 8px;font-size:1em;border-radius:999px;cursor:help}
.board .wsub .rshield{cursor:help}
.board .wbag{height:1.75em;cursor:help}
/* (the bag moved under the name: one column less, so the score sits further right) */
.host aside .board li{grid-template-columns:minmax(0,1fr) auto 2.4em}
.host aside .board li{grid-template-columns:minmax(0,1fr) auto auto}

/* the fan flag picker, and the waved flag in that country's colours */
.ccgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ccgrid button{background:rgba(255,255,255,.06);border:0;border-radius:10px;padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.66rem;font-weight:700;line-height:1.1;color:inherit;text-align:center}
.ccgrid img{width:44px;height:30px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.ccgrid button.mine{box-shadow:0 0 0 3px var(--yellow)}
.ccgrid button:disabled{opacity:.3;cursor:default}
.pflag.cc .cloth{background-color:#fff;background-size:100% 100%;background-position:center}
.pflag.cc .cloth::after{content:none}
.shflagimg{width:1.6em;height:auto;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.4);vertical-align:middle}
/* flag bonus: a question about your fan-flag country, double points */
.host aside .board .ccbonus{position:absolute;right:4px;top:-9px;display:flex;align-items:center;gap:4px;padding:1px 6px 1px 3px;border-radius:999px;background:var(--yellow);color:#1a0f4d;font-size:.62rem;font-weight:900;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.45);z-index:3;animation:ccbpop .55s cubic-bezier(.2,1.6,.4,1) both}
.host aside .board .ccbonus img{width:16px;height:11px;object-fit:cover;border-radius:2px}
@keyframes ccbpop{from{transform:scale(0) rotate(-12deg)}to{transform:none}}
.pflag .cloth::after{font-size:clamp(46px,18vw,90px)}
/* the little flag each avatar holds (their fan-flag country) */
.char{position:relative;overflow:visible}
.chin{display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.chflag{position:absolute;right:-24%;top:0;width:46%;height:56%;pointer-events:none;z-index:1}
.chflag b{position:absolute;left:0;top:0;bottom:0;width:9%;min-width:1px;border-radius:2px;background:linear-gradient(90deg,#bbb,#fff,#999)}
.chflag img{position:absolute;left:8%;top:0;width:92%;height:56%;object-fit:cover;border-radius:1px 3px 3px 1px;box-shadow:0 1px 3px rgba(0,0,0,.45);transform-origin:0 50%;animation:chflagwave 1.4s ease-in-out infinite alternate}
@keyframes chflagwave{from{transform:skewY(-5deg)}to{transform:skewY(4deg) scaleX(.94)}}
.grp .chflag{display:none}
/* the scoreboard: about 10% wider, bigger avatars */
.host .game{grid-template-columns:minmax(0,1fr) 341px}
@media (max-width:820px){.host .game{grid-template-columns:1fr}}
.host aside .board .char{width:2.75em;height:2.75em}
.host aside .board .who{overflow:visible;padding-top:3px}
.host aside .board .wtx{min-width:0;overflow:hidden}
.host aside .board .wn{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.host aside .board{font-size:1.07em}
.flagmsg{margin:22px 0 0;text-align:center;font-weight:800;color:var(--yellow);position:relative;z-index:7}
.pflag .pole{left:-4px}
.ccnote{display:flex;align-items:center;gap:10px;margin:26px 64px 0 0;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:.82rem;line-height:1.3;color:var(--mute)}
.ccnote img{width:30px;height:20px;object-fit:cover;border-radius:2px;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.4)}
#v-guess:not(.hidden){display:flex;flex-direction:column;min-height:calc(100vh - 170px);min-height:calc(100dvh - 170px)}
#v-guess .ccnote{margin-top:auto;order:99}
.host aside .board .who{gap:calc(.45em + 14px)}
/* under the Giant Flag: the answer you picked still lights up (its ends peek out on both sides) */
#opts.flagged .opt.picked{background:var(--pick,#ff2e88)!important;box-shadow:inset 0 0 0 3px var(--yellow),0 0 18px rgba(255,214,10,.55)!important}
#flagmsg{position:absolute;margin:0;transform:translateY(-100%) rotate(-2deg);z-index:8;padding:10px 14px;border-radius:14px;background:rgba(20,10,60,.86);color:var(--yellow);font-size:1rem;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none}
.bagpanel{z-index:300}
.host aside .board.tight li{padding-top:.25em;padding-bottom:.25em;margin-bottom:.25em}
.host aside .board.tight{gap:.25em}
/* flag bonus at the reveal: a badge on the right answer, a little flag next to the points */
.opt .ccbadge{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 6px;border-radius:999px;background:var(--yellow);color:#1a0f4d;font-size:.78em;font-weight:900;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:ccbadgepop .7s .65s cubic-bezier(.2,1.7,.4,1) both}
.opt .ccbadge img{width:22px;height:15px;object-fit:cover;border-radius:2px}
.opt .ccbadge b{color:inherit!important;background:none!important;min-width:0!important;padding:0!important}
@keyframes ccbadgepop{from{transform:scale(0) rotate(-10deg);opacity:0}to{transform:none;opacity:1}}
.voters .ccbmini{width:18px;height:12px;object-fit:cover;border-radius:2px;vertical-align:middle;margin-left:3px}
.opt .ccbadge{position:absolute;left:44px;top:-13px;margin:0;z-index:3;font-size:.72em}
.opt .ccbadge .ccbt{font-style:normal;line-height:1.2}
.chin{font-style:normal;border:0!important;box-shadow:none!important;background:none!important;margin:0!important;padding:0!important;width:100%!important;height:100%!important;display:block!important;position:static!important;transform:none!important;animation:none!important;opacity:1!important}
.voters span.char{padding:0!important;background:#2a2060!important;box-shadow:none!important;display:block!important;gap:0!important}
.metaflag{width:1.3em;height:.87em;object-fit:cover;border-radius:2px;vertical-align:-.1em}

/* the fan flag in a player's hand (Lost in Verona, the Grand Final) */
.hflag{position:absolute;pointer-events:none;z-index:3}
.hflag b{position:absolute;left:0;bottom:0;width:12%;height:100%;border-radius:2px;background:linear-gradient(90deg,#bbb,#fff,#999)}
.hflag img{position:absolute;left:11%;top:0;width:89%;height:52%;object-fit:cover;border-radius:1px 3px 3px 1px;box-shadow:0 1px 3px rgba(0,0,0,.45);transform-origin:0 50%;animation:chflagwave 1.3s ease-in-out infinite alternate}
.jmt .hflag{left:calc(50% + 1.6vh);top:3.2vh;width:3.4vh;height:4.6vh}
.jmt .chflag,.chtok .chflag{display:none}
/* the Grand Final: a little body under each face, that walks when it moves */
.chtok .chbod{position:absolute;left:50%;top:calc(var(--tok,56px) * .78);width:calc(var(--tok,56px) * .62);height:calc(var(--tok,56px) * .9);margin-left:calc(var(--tok,56px) * -.31);z-index:-1}
.chtok .chbod .ct{position:absolute;left:8%;right:8%;top:0;height:58%;border-radius:45% 45% 25% 25%;background:linear-gradient(var(--o1,#5a3a9a),var(--o2,#3a2470));z-index:1}
.chtok .chbod .ca{position:absolute;top:8%;width:18%;height:48%;border-radius:99px;background:var(--o2,#4a2f85);transform-origin:50% 0;z-index:0}
.chtok .chbod .ca:nth-of-type(3){left:-4%;rotate:20deg}.chtok .chbod .ca:nth-of-type(4){right:-4%;rotate:-28deg}
.chtok .chbod .cl{position:absolute;top:52%;width:20%;height:46%;border-radius:99px;background:var(--ol,#2a1a4a);transform-origin:50% 0}
.chtok .chbod .cl:nth-of-type(1){left:24%}.chtok .chbod .cl:nth-of-type(2){right:24%}
.chtok .chbod .hflag{left:88%;top:-10%;width:72%;height:96%}
.chtok .ch-name{margin-top:calc(var(--tok,56px) * .92)}
.chtok.walk .chbod .cl:nth-of-type(1){animation:jmleg .22s ease-in-out infinite alternate}
.chtok.walk .chbod .cl:nth-of-type(2){animation:jmleg .22s ease-in-out infinite alternate-reverse}
.chtok.walk .chbod .ca:nth-of-type(3){animation:jmarm .22s ease-in-out infinite alternate-reverse}
/* the fourth monster: the Phantom Fiddler (an original ghoul with a violin) */
.chmon .fiddler{display:none}
.chmon[data-mon="fiddler"] .diva,.chmon[data-mon="fiddler"] .goblin,.chmon[data-mon="fiddler"] .phoenix{display:none}
.chmon[data-mon="fiddler"] .fiddler{display:block;width:100%;height:auto}
.chmon[data-mon="fiddler"] .chmonname{color:#d9a2ff}
.chmon[data-mon="fiddler"] .chsmoke i{background:radial-gradient(circle,rgba(90,40,140,.85),rgba(60,25,100,.5) 45%,rgba(30,10,50,0) 70%)}
.chmon .fdnotes text{animation:fdnote 2.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.chmon .fdnotes text:nth-child(2){animation-delay:-.6s}.chmon .fdnotes text:nth-child(3){animation-delay:-1.2s}.chmon .fdnotes text:nth-child(4){animation-delay:-1.8s}
@keyframes fdnote{from{transform:translateY(6px) rotate(-12deg);opacity:.5}to{transform:translateY(-10px) rotate(10deg);opacity:1}}
.chmon .fdstr{animation:fdstr .12s linear infinite alternate}
@keyframes fdstr{to{opacity:.4}}
.chmon[data-mon="fiddler"] .dvclaw{animation:fdbow .5s ease-in-out infinite alternate;transform-origin:266px 129px}
@keyframes fdbow{from{transform:translate(-14px,3px)}to{transform:translate(12px,-2px)}}
.whs b{white-space:normal;text-align:center;line-height:1.05;max-width:120%}
/* ice skates in the Grand Final: blades under the feet, a long glide forward with a lean and an icy trail */
.chtok.hassk .chbod .cl::after{content:'';position:absolute;left:-60%;right:-60%;bottom:-12%;height:14%;border-radius:2px;background:linear-gradient(90deg,#e8f6ff,#9fd8ff);box-shadow:0 0 6px #bfe8ff}
.chtok.skating{transition:left 2.4s cubic-bezier(.25,.6,.3,1),top 1.4s ease-in-out!important}
.chtok.skating .chbod{animation:chskate 2.4s ease-out 1}
.chtok.skating .chbod .cl:nth-of-type(1){animation:chskleg .6s ease-in-out 4 alternate}
.chtok.skating .chbod .cl:nth-of-type(2){animation:chskleg .6s ease-in-out 4 alternate-reverse}
.chtok.skating .ch-face{animation:chsklean 2.4s ease-out 1}
.chtok.skating::after{content:'';position:absolute;right:60%;top:calc(var(--tok,56px) * 1.55);width:calc(var(--tok,56px) * 3);height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(200,240,255,.9));box-shadow:0 0 10px #bfe8ff;animation:chsktrail 2.4s ease-out 1 forwards}
@keyframes chskate{0%{transform:rotate(0)}20%,80%{transform:rotate(14deg)}100%{transform:rotate(0)}}
@keyframes chsklean{0%{transform:none}20%,80%{transform:translateX(4px) rotate(10deg)}100%{transform:none}}
@keyframes chskleg{from{rotate:-38deg}to{rotate:30deg}}
@keyframes chsktrail{0%{opacity:0;transform:scaleX(.2);transform-origin:right}30%{opacity:1}100%{opacity:0;transform:scaleX(1);transform-origin:right}}
.chmon[data-mon="fiddler"] .chbob>.fiddler{transform:translateX(9%)}

/* ---------- the start page: the hosts, a tagline, how to play ---------- */
.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin:0 auto 16px;max-width:460px}
.welcome .whosts{display:flex;justify-content:center;gap:4px;height:150px}
.welcome .whosts .ehost{height:100%;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));animation:ehbob 3.2s ease-in-out infinite alternate}
.welcome .whosts .ehost.her{animation-delay:-1.6s}
.welcome .wtag{margin:0;color:var(--mute);font-size:.95rem;line-height:1.35}
.howov{position:fixed;inset:0;z-index:400;background:rgba(8,4,24,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.howov.hidden{display:none}
.howcard{background:#1b1140;border-radius:20px;padding:20px 18px;max-width:460px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.howcard h2{margin:0 0 10px}
.howcard ol{margin:0 0 16px;padding-left:1.2em;display:flex;flex-direction:column;gap:10px;line-height:1.35}
.howcard li b{display:block}
/* ---------- the host lobby ---------- */
.qrwrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.qrwrap .qr{width:210px;height:210px}
.qrlab{margin:0;font-weight:900;color:var(--yellow);font-size:1.05rem}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 10px}
.preset{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;border-radius:14px;border:2px solid var(--line);background:rgba(255,255,255,.05);color:inherit;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.preset b{font-size:1.05rem}.preset small{color:var(--mute);font-size:.8rem;line-height:1.25}
.preset:hover{transform:translateY(-2px)}
.preset.on{border-color:var(--yellow);background:rgba(255,210,63,.12);box-shadow:0 0 18px rgba(255,210,63,.25)}
.gamelen{margin:0 0 12px;font-size:1rem}
.gamelen b{color:var(--yellow)}
/* players in the lobby: a little body with their flag in hand; ready = a happy hop */
.lobbyplayers .chip.lobfig{position:relative;padding-bottom:0}
.lobbyplayers .chip.lobfig .char{position:relative;z-index:2}
.lobbyplayers .chip.lobfig .chflag{display:none}
.lobbyplayers .chip .lbod{position:absolute;left:50%;top:52px;width:44px;height:62px;margin-left:-22px;z-index:1}
.lobbyplayers .chip.lobfig .pname{margin-top:46px}
.lbod .ct{position:absolute;left:8%;right:8%;top:0;height:58%;border-radius:45% 45% 25% 25%;background:linear-gradient(var(--o1,#5a3a9a),var(--o2,#3a2470));z-index:1}
.lbod .ca{position:absolute;top:8%;width:18%;height:48%;border-radius:99px;background:var(--o2,#4a2f85);transform-origin:50% 0}
.lbod .ca:nth-of-type(3){left:-4%;rotate:20deg}.lbod .ca:nth-of-type(4){right:-4%;rotate:-34deg}
.lbod .cl{position:absolute;top:52%;width:20%;height:46%;border-radius:99px;background:var(--ol,#2a1a4a)}
.lbod .cl:nth-of-type(1){left:24%}.lbod .cl:nth-of-type(2){right:24%}
.lbod .hflag{left:90%;top:-30%;width:70%;height:96%}
.lobbyplayers .pcc{display:block;font-size:.72rem;color:var(--mute);font-weight:700;margin-top:1px}
.lobbyplayers .chip.rdy.lobfig{animation:lbhop 1.6s ease-in-out infinite}
.lobbyplayers .chip.rdy .hflag img{animation-duration:.5s}
@keyframes lbhop{0%,60%,100%{transform:none}70%{transform:translateY(-8px)}80%{transform:none}88%{transform:translateY(-4px)}}
.lobbyplayers .chip.rm{outline:2px dashed #ff4d6a;outline-offset:4px;border-radius:12px}
.lobbyplayers .rmbtn{position:absolute;left:50%;top:20px;transform:translateX(-50%);z-index:5;background:#ff4d6a;color:#fff;border:0;border-radius:999px;padding:4px 10px;font-weight:900;font-size:.8rem;cursor:pointer;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.lobbyplayers .players{user-select:none;-webkit-user-select:none;padding-top:24px}
/* the hosts in the corner, welcoming players */
.lobhosts{position:fixed;left:16px;bottom:0;width:330px;height:260px;z-index:60;pointer-events:none;transform:translateY(110%);transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.lobhosts.on{transform:none}
.lobhosts .ehost{position:absolute;bottom:-14px;height:240px;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.7));animation:ehbob 3.2s ease-in-out infinite alternate}
.lobhosts .ehost.him{left:0}.lobhosts .ehost.her{left:110px;animation-delay:-1.6s}
.lobhosts .hbub{position:absolute;left:200px;bottom:150px;width:260px;background:#fff;color:#1a1147;font-weight:900;font-size:1.05rem;line-height:1.25;padding:.6em .9em;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .2s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.lobhosts .hbub.on{opacity:1;transform:none}
.lobhosts .hbub.him{border-bottom-left-radius:4px}
.lobhosts .hbub .unsaid{visibility:hidden}
.joinrow{flex-wrap:nowrap;gap:18px}.joinrow>div:first-child{min-width:0}
/* the flag in hand stays in front of the face (lobby, Grand Final, Verona) */
.lobbyplayers .chip .lbod{z-index:auto}
.lobbyplayers .chip .lbod .hflag{z-index:3}
.chtok .chbod{z-index:auto}
.chtok .chbod .cl,.chtok .chbod .ca{z-index:0}
.chtok .ch-face{z-index:2}
.chtok .chbod .hflag{z-index:3}
.jmt .hflag{z-index:6}
/* the flag really in the hand: the right arm hangs down, a hand at its end grips the pole */
.lbod .ca:nth-of-type(4){rotate:-6deg;z-index:3}
.lbod .ca::after,.chtok .chbod .ca::after{content:'';position:absolute;left:50%;bottom:-2px;width:120%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#e8b48c}
.lbod .ca .hflag{left:1px;top:-8px;width:30px;height:42px;z-index:1}
.lbod .ca:nth-of-type(4)::after{z-index:2}
.chtok .chbod .ca:nth-of-type(4){rotate:-6deg;z-index:3}
.chtok .chbod .ca .hflag{left:calc(var(--tok,56px) * .01);top:calc(var(--tok,56px) * -.32);width:calc(var(--tok,56px) * .45);height:calc(var(--tok,56px) * .86)}
.chtok .chbod .ca:nth-of-type(4)::after{z-index:2}
/* Verona: the right arm hangs straight down, the pole sits in that hand */
.jmt .jmbody i:last-child{rotate:-4deg}
.jmt .jmbody i::after{content:'';position:absolute;left:50%;bottom:-.3vh;width:1.3vh;height:1.3vh;transform:translateX(-50%);border-radius:50%;background:#e8b48c}
.jmt .hflag{left:calc(50% + 1.85vh);top:4.4vh;width:3.4vh;height:4.6vh}
.mypicrow{display:flex;gap:8px;justify-content:center;margin:4px 0 12px;flex-wrap:wrap}
.mypicrow label{cursor:pointer}
.chnopic{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.6em;background:#2a2060}
/* the boutique: sold out stays on the shelf, crossed out; your points on the phone */
.bqi.sold{opacity:.5;filter:grayscale(.8)}
.bqi.sold b{text-decoration:line-through;text-decoration-thickness:2px}
.bqi.sold .bqstock{color:#ff4d6a!important;font-weight:900}
.shopbtn.sold{opacity:.55;filter:grayscale(.7)}
.shopbtn.sold b{text-decoration:line-through}
.shopbtn.sold .price{text-decoration:none!important;display:inline-block;color:#ff4d6a}
.price.free s{opacity:.6;margin-right:4px}
.shoppts{margin:0 0 8px;text-align:center;font-weight:700}
.shoppts b{color:var(--yellow)}
#opts .opt.locked{box-shadow:0 0 0 3px var(--yellow),0 0 16px rgba(255,210,63,.5)!important}
.mypicrow{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:6px 0 14px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(255,46,136,.18),rgba(255,210,63,.12));box-shadow:inset 0 0 0 2px rgba(255,210,63,.35)}
.mypicrow label{text-align:center;cursor:pointer}
.mypichint{margin:0;text-align:center;font-weight:900;font-size:1.1rem}
.mypicor{margin:4px 0 0;text-align:center;color:var(--mute);font-size:.85rem}
/* the test section */
.testrow{margin:10px 0 0}
.testbtn{background:none;border:0;color:var(--mute);opacity:.35;font-size:.9rem;cursor:pointer;padding:2px 4px}
.testbtn:hover{opacity:.9}
.testov{position:fixed;inset:0;z-index:500;background:rgba(8,4,24,.85);display:flex;align-items:center;justify-content:center;padding:20px}
.testov.hidden{display:none}
.testcard{background:#1b1140;border-radius:20px;padding:20px 22px;width:min(720px,100%);max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.testhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.testhead h2{margin:0}
.testcard h3{margin:16px 0 8px;font-size:1rem;color:var(--mute)}
.testgrid{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.shopbtn .price{display:inline-block}

/* ---------- the slot machine (party game: random / Grand tour) ---------- */
.slotov{position:fixed;inset:0;z-index:58;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;background:radial-gradient(ellipse at 50% 40%,#3a1670,#120724 70%);animation:slin .5s ease-out both}
.slotov.leaving{animation:slout .6s ease-in forwards}
@keyframes slin{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@keyframes slout{to{opacity:0;transform:scale(.96)}}
.slsign{font-size:clamp(2rem,5vw,4.2rem);font-weight:900;color:#fff;text-shadow:0 0 18px #ff4fd8,0 0 40px #ff2e88;padding:.2em .8em;border-radius:24px;border:4px solid #ffd23f;box-shadow:0 0 30px rgba(255,210,63,.6),inset 0 0 20px rgba(255,210,63,.3);background:rgba(40,8,60,.6)}
.slmachine{position:relative;width:min(88vw,1200px);padding:2.2vh 2vw;border-radius:40px;background:linear-gradient(#ffcf4a,#c88a12);box-shadow:0 0 0 6px #7a4a06,0 0 60px rgba(255,190,60,.55),inset 0 4px 0 rgba(255,255,255,.5)}
.slrow{position:relative;overflow:hidden;border-radius:16px;background:#1b0a33}
.slrow.deco{height:7vh;opacity:.75;margin:1vh 0}
.sldeco{display:flex;gap:2.4vw;font-size:4.4vh;line-height:7vh;white-space:nowrap;padding-left:1vw;filter:saturate(1.2)}
.sldeco.spinl{animation:sldl .5s linear infinite}.sldeco.spinr{animation:sldr .5s linear infinite}
@keyframes sldl{to{transform:translateX(-12vw)}}@keyframes sldr{from{transform:translateX(-12vw)}to{transform:none}}
.slrow.main{height:24vh;box-shadow:inset 0 0 30px rgba(0,0,0,.8)}
.slstrip{display:flex;height:100%;will-change:transform}
.slcell{flex:none;width:17vw;max-width:230px;height:100%;margin:0 .5vw;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;text-align:center;background:linear-gradient(160deg,#6a2bd1,#2a0e5c);color:#fff;box-shadow:inset 0 0 0 3px rgba(255,255,255,.15)}
.slcell:nth-child(4n+2){background:linear-gradient(160deg,#d12b8f,#5c0e3d)}.slcell:nth-child(4n+3){background:linear-gradient(160deg,#16a37a,#0b4d3b)}.slcell:nth-child(4n){background:linear-gradient(160deg,#e08a12,#6b3b05)}
.slcell .sli{font-size:8vh;line-height:1}
.slcell b{font-size:clamp(.9rem,1.5vw,1.4rem);font-weight:900;padding:0 .5em;line-height:1.1}
.slcell.out{filter:grayscale(1) brightness(.55);opacity:.7}
.slcell.won{box-shadow:0 0 0 5px #ffd23f,0 0 40px #ffd23f;animation:slwon .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slwon{from{transform:scale(1)}to{transform:scale(1.08)}}
.slwin{position:absolute;left:50%;top:0;bottom:0;width:calc(min(17vw,230px) + 12px);transform:translateX(-50%);border:5px solid #ffd23f;border-radius:18px;box-shadow:0 0 24px #ffd23f,inset 0 0 24px rgba(255,210,63,.4);pointer-events:none}
.slwin::before,.slwin::after{content:'';position:absolute;left:50%;transform:translateX(-50%);border:14px solid transparent}
.slwin::before{top:-6px;border-top-color:#ffd23f}.slwin::after{bottom:-6px;border-bottom-color:#ffd23f}
.sllever{position:absolute;right:-3.2vw;top:10%;width:1.1vw;height:22vh;border-radius:99px;background:linear-gradient(90deg,#999,#eee,#888);transform-origin:50% 100%;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.sllever::before{content:'';position:absolute;left:50%;top:-3vh;width:5vh;height:5vh;margin-left:-2.5vh;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe680,#d4a00b)}
.sllever.pull{transform:rotate(28deg) scaleY(.85)}
.slbtn{padding:.5em 3em;border-radius:999px;background:linear-gradient(#ff4fa8,#c41a6b);color:#fff;font-weight:900;font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:.08em;box-shadow:0 8px 0 #7a0c40,0 0 30px rgba(255,79,168,.6)}
.slbtn.push{transform:translateY(6px);box-shadow:0 2px 0 #7a0c40,0 0 30px rgba(255,79,168,.6);transition:transform .15s,box-shadow .15s}
.slotov.done .slsign{animation:slwon .6s cubic-bezier(.2,1.6,.4,1) both}
/* ---------- vote: four game cards ---------- */
#qopts.gamecards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#qopts.gamecards .optcol{display:flex;flex-direction:column}
#qopts.gamecards .opt{min-height:120px;align-items:flex-start;padding:16px;font-size:1.3rem;border-radius:18px;background:linear-gradient(160deg,rgba(150,80,255,.35),rgba(40,10,90,.6));box-shadow:0 0 0 2px rgba(255,210,63,.45),0 0 24px rgba(160,90,255,.25)}
#qopts.gamecards .opt .otx{display:flex;flex-direction:column;gap:6px}
#qopts.gamecards .gsub{font-size:.85rem;font-weight:600;color:var(--mute);line-height:1.3}
#qopts.gamecards .opt.right{box-shadow:0 0 0 4px #ffd23f,0 0 30px #ffd23f}
/* Disqualivision: the winner in the green room */
.grov .grp.grwin{z-index:3}
.grov .grcrown{position:absolute;left:50%;top:-34%;transform:translateX(-50%) scale(0);font-size:2.4em;z-index:5;transition:transform .6s cubic-bezier(.2,1.7,.4,1);filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.grov.crowned .grcrown{transform:translateX(-50%) scale(1)}
.grov.crowned .grp.grwin{animation:grwinhop .7s ease-in-out infinite alternate}
.grov.crowned .grp:not(.grwin){filter:brightness(.6)}
@keyframes grwinhop{to{transform:translateY(-14px) scale(1.06)}}
/* Disqualivision: the answers as social-media posts */
.notearea .snote,.notearea .sheet{--tilt:0deg!important;transform:none;background:#fff;color:#0f1419;border-radius:16px;padding:12px 14px 10px;box-shadow:0 10px 26px -8px rgba(0,0,0,.6);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.notearea .snote .scrib,.notearea .sheet .scrib{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:500;font-size:clamp(.95rem,1.35vw,1.2rem);line-height:1.3;margin:6px 0}
.notearea .sheet .scrib{font-size:clamp(1.3rem,2.4vw,2rem)}
.twhead{display:flex;align-items:center;gap:8px;text-align:left}
.twhead .char,.twanon{width:34px;height:34px;flex:none;border-radius:50%}
.twanon{display:flex;align-items:center;justify-content:center;background:#cfd9de;font-size:1.1rem}
.twname{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.twname b{font-size:.9rem;color:#0f1419;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.twname small{font-size:.75rem;color:#536471}
.twtick{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:.6rem;vertical-align:1px}
.twfoot{display:flex;justify-content:space-between;color:#536471;font-size:.78rem;padding-top:6px;border-top:1px solid #eff3f4}
.twfoot .twlike{color:#f91880;font-weight:700}
.notearea .snote .by{position:static;display:block;margin-top:4px;color:#0f1419}
.notearea .snote .tag{background:#1d9bf0;color:#fff}
.notearea .snote.win{box-shadow:0 0 0 5px var(--ok),0 10px 34px -6px rgba(53,240,138,.9)}
/* Key Change!: the lyrics on the phone, greyed with a big Ready on top after the song */
.slywrap{position:relative;border-radius:18px;background:linear-gradient(160deg,rgba(255,46,136,.16),rgba(80,40,200,.2));box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);min-height:180px}
.slyrics{padding:16px 16px 18px;max-height:46vh;overflow:auto;text-align:center;transition:opacity .3s,filter .3s}
.slyrics .slyt{display:block;font-size:1.2rem}.slyrics .slya{display:block;color:var(--mute);margin-bottom:10px}
.slyrics p{margin:4px 0;font-size:1.15rem;font-weight:700;line-height:1.35}
.slyrics .slynone{font-weight:600;color:var(--mute)}
.slywrap.dim .slyrics{opacity:.35;filter:blur(.5px)}
.slyover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.slyover>*{pointer-events:auto}
.slywrap:not(.dim) .slyover #srecbtn:not(.live){display:none}
.slyover #srecbtn{font-size:1.6rem;padding:.7em 1.6em;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.slyover #srecbtn.live{position:absolute;bottom:8px;font-size:1rem;padding:.4em 1.2em}
.slyover .bigcount{font-size:5rem}
.slywrap.recording .slyover .bigcount.live{position:absolute;top:6px;right:10px;font-size:1.3rem;width:auto;height:auto;padding:.2em .6em}
.slyover #scount:not(.counting){display:none}

/* ---------- The Unlucky Draw ---------- */
.udov .bhosts .ehost{height:38vh;bottom:3vh}
.udov .bhosts .him{left:1vw}.udov .bhosts .her{right:1vw}
.udov .ughosts{position:absolute;top:15vh;left:0;right:0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:0 14vw;pointer-events:none}
.udov .ugt{font-weight:900;font-size:.95rem;opacity:.85;align-self:center;margin-right:4px}
.udov .ugh{display:flex;align-items:center;gap:5px;padding:2px 9px 2px 2px;border-radius:99px;background:rgba(160,190,255,.14);opacity:.75;filter:grayscale(.7);animation:ughost 3s ease-in-out infinite alternate}
.udov .ugh .char{width:26px;height:26px}.udov .ugh i{font-style:normal;font-weight:800;font-size:.85rem}
@keyframes ughost{to{transform:translateY(-5px)}}
.udov.fin .ugh{opacity:1;filter:none;box-shadow:0 0 0 2px rgba(190,220,255,.8),0 0 18px rgba(170,210,255,.6)}
.udov .utimer{position:absolute;top:3vh;right:4vw;width:11vh;height:11vh;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:6vh;font-weight:900;background:rgba(0,0,0,.45);box-shadow:0 0 0 4px var(--yellow);font-variant-numeric:tabular-nums}
.udov .utimer.on{display:flex}
.udov .utimer.hot{color:#ff4d4d;box-shadow:0 0 0 4px #ff4d4d,0 0 30px #ff4d4d;animation:uthot .5s ease-in-out infinite alternate}
@keyframes uthot{to{transform:scale(1.12)}}
.udov .ustage{position:absolute;left:14vw;right:14vw;top:20vh;bottom:15vh}
.udov .ucol{position:absolute;bottom:0;transform:translateX(-50%);width:calc(72vw / var(--n,4));display:flex;flex-direction:column;align-items:center;gap:4px;animation:benvin .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 80ms);transition:filter .4s,opacity .4s}
.udov .ucol .char{width:min(13vh,calc(56vw / var(--n,4)));height:min(13vh,calc(56vw / var(--n,4)));border-radius:50%;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(0,0,0,.5)}
.udov .ucol b{font-weight:900;font-size:clamp(.8rem,min(1.8vw,calc(14vw / var(--n,4))),1.5rem);text-shadow:0 2px 8px #000;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.udov .ucol .uins{display:none;font-style:normal;font-weight:900;font-size:clamp(.6rem,1.2vw,1rem);background:#14094f;color:var(--yellow);border-radius:99px;padding:1px 8px;box-shadow:0 0 0 2px var(--yellow);white-space:nowrap}
.udov .ucol.u-ins .uins{display:block;animation:benvin .5s cubic-bezier(.3,1.4,.5,1) both}
.udov .ucol.u-ins .char{box-shadow:0 0 0 4px var(--yellow),0 0 26px var(--yellow)}
.udov .ucol.u-sw .char{box-shadow:0 0 0 4px #3fd0ff,0 0 26px #3fd0ff}
.udov .ucol.u-dead{filter:grayscale(1) brightness(.6);opacity:.55;animation:udead .9s ease-out both}
@keyframes udead{0%{transform:translateX(-50%) scale(1.2)}30%{transform:translateX(-52%) rotate(-6deg)}100%{transform:translateX(-50%) scale(.9)}}
.udov .ucol.u-win{animation:uwin .7s ease-in-out infinite alternate}
@keyframes uwin{from{translate:0 0}to{translate:0 -14px}}
.udov .ucol.u-win .char{box-shadow:0 0 0 6px var(--yellow),0 0 60px var(--yellow)}
.udov .uenvs{position:absolute;left:0;right:0;top:4vh;height:0}
.uenv,.udenv{background:linear-gradient(160deg,#3a2270,#1d0f45);box-shadow:inset 0 0 0 3px #e0b030,0 8px 18px rgba(0,0,0,.55)}
.udov .uenv{position:absolute;top:0;width:min(16vh,calc(60vw / var(--n,4)));aspect-ratio:3/2;transform:translateX(-50%);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:left 1.5s cubic-bezier(.55,0,.35,1),transform .3s;animation:benvin .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 80ms + .3s)}
.udov .uenv::before,.udenv::before{content:'';position:absolute;left:3px;right:3px;top:3px;height:52%;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(200deg,rgba(255,255,255,.18),rgba(255,255,255,.04));border-bottom:2px solid rgba(224,176,48,.6)}
.udov .usym{position:relative;font-size:min(8vh,calc(30vw / var(--n,4)));line-height:1;color:var(--c);text-shadow:0 0 12px var(--c),0 2px 0 #000;font-weight:900}
.udov .uenv.u-fly{animation:uhop 1.5s ease-in-out both}
@keyframes uhop{0%{translate:0 0;scale:1}50%{translate:0 -9vh;scale:1.18}100%{translate:0 0;scale:1}}
.udov .uenv.u-sw{box-shadow:inset 0 0 0 3px #3fd0ff,0 0 30px #3fd0ff;animation:benvshake .2s linear infinite}
.udov[data-st="tense"] .uenv{animation:benvshake .14s linear infinite}
.udov .uin{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.udov .uenv.u-open .usym{opacity:0}
.udov .uenv.u-open .uin{display:flex}
.udov .uenv.u-flag{background:#fff;box-shadow:0 0 0 3px #3ddc84,0 0 26px rgba(61,220,132,.7);animation:uflag .5s cubic-bezier(.3,1.5,.5,1)}
.udov .uenv.u-flag img{width:78%;height:auto;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.udov .uenv.u-bomb{background:radial-gradient(circle,#ffd23f,#ff6a00 40%,#c4150f 70%,#2a0000);box-shadow:0 0 80px 20px #ff4d1f;animation:uboom .8s cubic-bezier(.2,.9,.3,1) both;z-index:3}
.udov .uenv.u-bomb .uin{font-size:min(10vh,calc(36vw / var(--n,4)))}
@keyframes uflag{0%{transform:translateX(-50%) rotateY(90deg)}100%{transform:translateX(-50%) rotateY(0)}}
@keyframes uboom{0%{transform:translateX(-50%) scale(1)}25%{transform:translateX(-50%) scale(1.9)}100%{transform:translateX(-50%) scale(1.25)}}
.udov .bmsg{bottom:4vh;padding:0 16vw;font-size:clamp(1.1rem,2.4vw,2.1rem)}
.udov[data-st="boom"]{animation:bflash .9s ease-out}
/* the phone */
.bombui:has(.udme),.bombui:has(.udmap){display:block}
.udenv{position:relative;display:inline-flex;align-items:center;justify-content:center;width:64px;aspect-ratio:3/2;border-radius:8px;vertical-align:middle}
.udenv b{position:relative;color:var(--c);font-size:1.6rem;line-height:1;text-shadow:0 0 8px var(--c),0 1px 0 #000}
.udenv.big{width:min(56vw,230px);border-radius:16px}
.udenv.big b{font-size:min(22vw,92px)}
.udme{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.udme small{opacity:.75;font-weight:700}
.udopen{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);font-size:4.5rem}
.udcount{text-align:center;font-size:2.6rem;font-weight:900;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.udcount.hot{color:#ff4d4d}
.udbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.udb{border:0;border-radius:16px;padding:22px 8px;font-size:1.45rem;font-weight:900;color:#fff;cursor:pointer;opacity:.5;transform:scale(.96);transition:all .15s;background:#3a2a6a;font-family:inherit}
.udb.hold.on{background:linear-gradient(135deg,#ff9f1c,#e0532a);opacity:1;transform:scale(1);box-shadow:0 0 0 3px #fff,0 6px 20px rgba(255,140,40,.5)}
.udb.swap.on{background:linear-gradient(135deg,#3fd0ff,#5b3bd6);opacity:1;transform:scale(1);box-shadow:0 0 0 3px #fff,0 6px 20px rgba(60,180,255,.5)}
.udnow{margin:10px 0 0;opacity:.85}
.udmap{margin-top:14px;padding:10px;border-radius:14px;background:rgba(0,0,0,.35);box-shadow:0 0 0 2px var(--yellow);display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.udmapt{width:100%;text-align:center;font-weight:900;color:var(--yellow)}
.udm{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:10px;min-width:70px}
.udm i{font-style:normal;font-weight:800;font-size:.8rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.udm em{font-style:normal;font-size:1.1rem}
.udm.bomb{background:rgba(255,60,40,.3);box-shadow:0 0 0 2px #ff4d4d}
.udm .udenv{width:52px}.udm .udenv b{font-size:1.3rem}

/* ---------- Hold That Note! (controls) ---------- */
.ntctl{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:14px}
.ntctl.hidden{display:none}
.ntctl .ntcl{font-weight:900;font-size:1.2rem;text-align:center}
.ntctl input[type=range]{width:100%;height:44px;accent-color:#ff6a1f}
.ntctl .ntends{display:flex;justify-content:space-between;font-weight:700;opacity:.7;margin-top:-8px}
.ntctl .ntgl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ntctl .ntt{border:0;border-radius:14px;padding:16px 6px;font-size:1.05rem;font-weight:900;color:#fff;background:#3a2a6a;opacity:.6;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .15s}
.ntctl .ntt small{font-size:.72rem;font-weight:700;opacity:.85}
.ntctl .ntt[data-t="1"].on{background:linear-gradient(135deg,#ff9f1c,#e0302a);opacity:1;box-shadow:0 0 0 3px #fff,0 6px 18px rgba(255,90,40,.5)}
.ntctl .ntt[data-t="-1"].on{background:linear-gradient(135deg,#3fd0ff,#2a6ae0);opacity:1;box-shadow:0 0 0 3px #fff,0 6px 18px rgba(60,160,255,.5)}
.ntctl .ntcd{text-align:center;font-weight:800;color:var(--yellow)}
.noteov .ntdesk{position:absolute;right:3vw;top:30vh;width:22vw;padding:1.4vh 1.2vw;border-radius:16px;background:rgba(10,4,30,.75);box-shadow:0 0 0 2px rgba(255,122,217,.7),0 10px 30px rgba(0,0,0,.5);z-index:5;opacity:0;transform:translateX(30vw);transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.3,1.05)}
.noteov.ctlopen .ntdesk,.noteov.ctlshut .ntdesk{opacity:1;transform:none}
.noteov .ntdt{font-weight:900;font-size:clamp(.9rem,1.5vw,1.3rem);margin-bottom:1vh}
.noteov .ntgauge{height:2.4vh;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.noteov .ntgauge i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fd0ff,#ffd23f 50%,#ff3a2a);background-size:22vw 100%;transition:width .4s}
.noteov .ntgl{display:flex;justify-content:space-between;font-size:clamp(.6rem,.9vw,.8rem);font-weight:800;opacity:.7;margin-top:.4vh}
.noteov .ntknobs{display:flex;gap:1vw;margin-top:1vh;font-weight:900;font-size:clamp(.9rem,1.4vw,1.2rem)}
.noteov .ntshut{margin-top:1vh;font-weight:900;color:var(--yellow);font-size:clamp(.8rem,1.3vw,1.1rem)}
.noteov.ctlshut .ntshut{color:#ff7a7a}
.noteov.ctlshut .ntgauge{opacity:.6}
.noteov.ctlopen .ntmsg{bottom:17vh}

/* ---------- Turquoise Carpet ---------- */
.tcov{position:fixed;inset:0;z-index:55;overflow:hidden;background:#0b1030;font-family:inherit}
.tcov.flashed::after{content:'';position:absolute;inset:0;background:#fff;pointer-events:none;animation:tcwhite .35s ease-out forwards;z-index:9}
@keyframes tcwhite{0%{opacity:.28}100%{opacity:0}}
.tcsky{position:absolute;inset:0;background:linear-gradient(#0b1440 0%,#2a2a78 38%,#b04d8f 62%,#ff9a5a 74%,#ffcf7a 80%);overflow:hidden}
.tcsky::before{content:'';position:absolute;inset:0 0 40% 0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 33% 9%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 22%,#fff,transparent),radial-gradient(1px 1px at 82% 12%,#fff,transparent),radial-gradient(1px 1px at 92% 30%,#fff,transparent);background-size:420px 260px;opacity:.85}
.tcmoon{position:absolute;right:12vw;top:8vh;width:9vh;height:9vh;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe8,#f3e3b0 60%,#d9c27a);box-shadow:0 0 50px rgba(255,240,190,.6)}
.tcbeam{position:absolute;bottom:30vh;width:4vw;height:90vh;background:linear-gradient(rgba(255,255,255,0),rgba(200,255,250,.22));clip-path:polygon(0 0,100% 0,60% 100%,40% 100%);transform-origin:50% 100%}
.tcbeam.a{left:20vw;animation:tcsweep 7s ease-in-out infinite alternate}.tcbeam.b{left:74vw;animation:tcsweep 8s ease-in-out infinite alternate-reverse}
@keyframes tcsweep{from{rotate:-28deg}to{rotate:24deg}}
.tchall{position:absolute;left:8vw;right:8vw;bottom:36vh;height:30vh;border-radius:24px 24px 0 0;background:linear-gradient(#3b3570,#23204a);box-shadow:inset 0 6px 0 rgba(255,255,255,.12),0 0 60px rgba(64,224,208,.25)}
.tcwins{position:absolute;left:4%;right:4%;top:14%;bottom:30%;display:grid;grid-template-columns:repeat(9,1fr);gap:1.4vh 1.4vw}
.tcwins i{border-radius:6px 6px 2px 2px;background:linear-gradient(#ffe7a3,#ffb84d);opacity:calc(.55 + var(--d) * .1);box-shadow:0 0 10px rgba(255,200,100,.4)}
.tcdoor{position:absolute;left:42%;right:42%;bottom:0;height:34%;border-radius:12px 12px 0 0;background:linear-gradient(#40e0d0,#1aa79c);box-shadow:0 0 30px rgba(64,224,208,.6)}
.tctrees i{position:absolute;bottom:34vh;width:7vw;height:16vh;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 40% 35%,#2f6b4a,#173a2a 70%)}
.tctrees i::after{content:'';position:absolute;left:46%;bottom:-5vh;width:8%;height:6vh;background:#3a2516}
.tctrees i:nth-child(1){left:1vw}.tctrees i:nth-child(2){left:10vw;height:12vh}.tctrees i:nth-child(3){right:10vw;height:12vh}.tctrees i:nth-child(4){right:1vw}
.tcsky,.tchall,.tctrees{pointer-events:none}
.tcsign{position:absolute;top:2.5vh;left:0;right:0;margin:0 auto;width:fit-content;padding:.5vh 2.2vw;border-radius:14px;border:3px solid #40e0d0;color:#e8fffc;font-weight:900;font-size:clamp(1.5rem,3.2vw,2.8rem);text-shadow:0 0 12px #40e0d0,0 0 26px #1ab3a6;box-shadow:0 0 18px rgba(64,224,208,.55),inset 0 0 18px rgba(64,224,208,.3);background:rgba(4,30,40,.55);white-space:nowrap;z-index:3}
.tcsec{position:absolute;top:12.5vh;left:0;right:0;text-align:center;font-weight:800;font-size:clamp(.9rem,1.6vw,1.3rem);opacity:.8;z-index:3}
.tcrun{position:absolute;left:0;right:0;bottom:0;height:36vh;background:linear-gradient(#5a5470,#3a3550 40%,#1c1a2c);z-index:1}
.tcrun::before{content:'';position:absolute;left:0;right:0;top:-1px;height:30%;background:linear-gradient(#6b6488,#5a5470)}
.tctopf{position:absolute;left:-6vw;right:-6vw;top:6vh;height:13vh;background:linear-gradient(#2fbfb2 0%,#40e0d0 45%,#6ff3e6 100%);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);box-shadow:0 0 40px rgba(64,224,208,.5)}
.tctopf::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 5vw),linear-gradient(rgba(0,0,0,.18),transparent 40%)}
.tcedge{position:absolute;left:-6vw;right:-6vw;top:19vh;height:3vh;background:linear-gradient(#17867c,#0d5a53);box-shadow:0 8px 18px rgba(0,0,0,.45)}
.tcropes{position:absolute;left:3vw;right:3vw;bottom:9vh;height:9vh;z-index:3;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 0)}
.tcropes span{position:absolute;bottom:0;width:1.1vh;height:8vh;margin-left:-.55vh;border-radius:99px;background:linear-gradient(90deg,#b8860b,#ffe27a,#b8860b)}
.tcropes span::before{content:'';position:absolute;left:-.5vh;top:-1.6vh;width:2.1vh;height:2.1vh;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#d9a520)}
.tcropes span::after{content:'';position:absolute;left:.55vh;top:-.6vh;width:calc(94vw / 8);height:4vh;border:solid #c8102e;border-width:0 0 .9vh 0;border-radius:0 0 50% 50%}
.tcropes span:last-child::after{display:none}
.tcwalk{position:absolute;left:0;right:0;bottom:23vh;height:60vh;z-index:2;pointer-events:none}
.tcg{position:absolute;left:50%;bottom:0;height:100%;transform:translateX(-50%);animation:tcpass 8.8s linear both}
.tcg .tcgirl{height:100%;width:auto;display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
@keyframes tcpass{0%{translate:-78vw 0;animation-timing-function:cubic-bezier(.2,.6,.4,1)}25%{translate:0 0}74%{translate:0 0;animation-timing-function:cubic-bezier(.6,0,.8,.5)}100%{translate:80vw 0}}
.tcgirl .tcleg,.tcgirl .tcarm{transform-box:view-box}
.tcgirl .tcleg{transform-origin:108px 256px}
.tcgirl .tcarm{transform-origin:109px 150px}
.tcg.walking .tcleg.f,.tcg.walking .tcarm.b{animation:tcswing .36s ease-in-out infinite alternate}
.tcg.walking .tcleg.b,.tcg.walking .tcarm.f{animation:tcswing .36s ease-in-out infinite alternate-reverse}
@keyframes tcswing{from{rotate:-17deg}to{rotate:17deg}}
.tcg.walking .tcgirl{animation:tcbob .36s ease-in-out infinite alternate}
@keyframes tcbob{from{translate:0 0}to{translate:0 -1.2%}}
.tcg.posing .tcgirl{animation:tcpose 2.7s ease-in-out both}
.tcg.posing .tcarm.f{rotate:-38deg;transition:rotate .35s}.tcg.posing .tcarm.b{rotate:150deg;transition:rotate .45s .3s}
.tcg.posing .tcleg.f{rotate:10deg;transition:rotate .25s}.tcg.posing .tcleg.b{rotate:-8deg;transition:rotate .25s}
@keyframes tcpose{0%{rotate:0deg;scale:1}15%{rotate:-3deg;scale:1.05;translate:0 2%}35%{rotate:2deg;scale:1.06;translate:0 2%}55%{rotate:-2deg;scale:1.06;translate:0 2%}80%{rotate:1deg;scale:1.05;translate:0 2%}100%{rotate:0deg;scale:1;translate:0 0}}
.tccams{position:absolute;left:0;right:0;bottom:-2vh;height:19vh;display:flex;justify-content:space-around;z-index:4;pointer-events:none}
.tccam{position:relative;width:11vw;height:100%;background:radial-gradient(circle at 50% 30%,#05060c 0 28%,transparent 29%),radial-gradient(ellipse at 50% 100%,#05060c 0 58%,transparent 59%)}
.tccam::before{content:'';position:absolute;left:58%;top:12%;width:4vw;height:3vw;border-radius:6px;background:#1c1f2c;box-shadow:inset 0 0 0 2px #333a52}
.tccam:nth-child(odd){translate:0 2vh}
.tcflash{position:absolute;left:68%;top:8%;width:2vw;height:2vw;border-radius:50%;background:#fff;opacity:0}
.tcflash.pop{animation:tcpop .45s ease-out}
@keyframes tcpop{0%{opacity:1;box-shadow:0 0 0 0 #fff,0 0 60px 30px rgba(255,255,255,.9)}100%{opacity:0;box-shadow:0 0 0 40px rgba(255,255,255,0),0 0 80px 40px rgba(255,255,255,0)}}
.tcq{position:absolute;left:4vw;right:31vw;top:17vh;z-index:6;padding:2vh 2vw;border-radius:22px;background:rgba(8,12,40,.82);box-shadow:0 0 0 2px rgba(64,224,208,.5),0 20px 50px rgba(0,0,0,.5)}
.tcq:empty{display:none}
.tcqt{font-weight:900;font-size:clamp(1.4rem,3vw,2.6rem);text-align:center;text-shadow:0 3px 14px rgba(0,0,0,.7);margin-bottom:2.4vh;animation:benvin .5s cubic-bezier(.3,1.4,.5,1) both}
.tcopts{display:grid;grid-template-columns:1fr 1fr;gap:1.6vh 1.4vw}
.tcopt{position:relative;display:flex;align-items:center;gap:1vw;padding:1.8vh 1.4vw;border-radius:16px;font-weight:900;font-size:clamp(1.1rem,2.2vw,2rem);background:linear-gradient(135deg,#1aa79c,#0e6f8a);box-shadow:0 6px 18px rgba(0,0,0,.4);animation:benvin .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 90ms + .2s);transition:opacity .4s,filter .4s}
.tcopt b{display:inline-flex;width:2.2em;height:2.2em;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.2);font-size:.8em}
.tcopt em{position:absolute;right:.8vw;top:50%;transform:translateY(-50%);display:flex;gap:2px;font-style:normal}
.tcopt .tcav .char{width:3.4vh;height:3.4vh}
.tcopt.right,.tcopt.wrong{animation:none}
.tcopt.right{background:linear-gradient(135deg,#2fd27a,#139a50);box-shadow:0 0 0 4px #fff,0 0 34px #2fd27a}
.tcopt.wrong{opacity:.4;filter:grayscale(.6)}
.tctime{height:1.2vh;border-radius:99px;background:rgba(255,255,255,.15);margin-top:2vh;overflow:hidden}
.tctime i{display:block;height:100%;background:linear-gradient(90deg,#40e0d0,#ffd23f);transition:width .5s linear}
.tcov[data-st="reveal"] .tctime{visibility:hidden}
.tcwho{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:2vh}
.tcp{display:flex;align-items:center;gap:5px;padding:2px 10px 2px 2px;border-radius:99px;background:rgba(0,0,0,.45);font-weight:800;font-size:clamp(.7rem,1.1vw,.95rem);opacity:.55}
.tcp .char{width:26px;height:26px}.tcp i{font-style:normal}
.tcp.in{opacity:1}.tcp.ok{opacity:1;box-shadow:0 0 0 2px #2fd27a}.tcp.no{opacity:.45}
.tcov[data-st="ask"] .tcwalk,.tcov[data-st="reveal"] .tcwalk{opacity:0}
.tcboard{position:absolute;right:2vw;top:17vh;width:27vw;max-height:66vh;overflow:hidden;z-index:6;display:flex;flex-direction:column;gap:.6vh;padding:1.4vh 1vw;border-radius:18px;background:rgba(8,12,40,.82)}
.tcboard:empty{display:none}
.tcbt{font-weight:900;font-size:clamp(.9rem,1.5vw,1.3rem);color:#40e0d0;margin-bottom:.4vh}
.tcrow{display:flex;align-items:center;gap:.6vw;padding:.4vh .8vw;border-radius:12px;background:rgba(0,0,0,.45);font-weight:800;font-size:clamp(.7rem,1.15vw,1rem)}
.tcrow b{width:1.6em;text-align:center;opacity:.7}.tcrow .char{width:3.4vh;height:3.4vh;flex:none}
.tcrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcrow em{font-style:normal;color:#ffd23f;letter-spacing:1px}.tcrow em small{color:rgba(255,255,255,.3);font-size:1em}
.tcrow i{font-style:normal;opacity:.7;width:3.4em;text-align:right}
.tcov.final .tcboard{left:50%;right:auto;top:17vh;width:min(560px,60vw);transform:translateX(-50%);max-height:none}
.tcov.final .tcbt{font-size:clamp(1.3rem,2.6vw,2.2rem);text-align:center;color:#fff;text-shadow:0 0 18px #40e0d0}
.tcov.final .tcrow{font-size:clamp(.9rem,1.5vw,1.3rem);animation:benvin .5s cubic-bezier(.3,1.4,.5,1) both}
.tcrow.win{background:linear-gradient(90deg,rgba(255,210,63,.4),rgba(64,224,208,.3));box-shadow:0 0 0 2px #ffd23f}
.tcov.enter .tcsign{animation:inTop .8s cubic-bezier(.2,.9,.3,1.08) both}
.tcov.enter .tccams{animation:inBottom .8s .5s cubic-bezier(.2,.9,.3,1.08) both}
/* the intro scene */
.hs-carpet .grwall{background:radial-gradient(ellipse at 50% 0%,#24305e 0%,#121735 55%,#070914 100%)}
.hs-carpet .hssign{border-color:#40e0d0;color:#e8fffc;text-shadow:0 0 12px #40e0d0;box-shadow:0 0 18px rgba(64,224,208,.55)}
.hscarpet{position:relative;display:flex;gap:2vw;align-items:flex-end;height:46vh}
.hscarpet .hsg{height:100%}.hscarpet .hsg svg{height:100%;width:auto}
.hscarpet .hsg.b{height:92%}
.hscarpet .hsflash{position:absolute;right:-5vw;top:0;font-size:6vh;animation:benvshake .3s linear infinite}
/* the phone */
.carpetui{display:grid;grid-template-columns:1fr;gap:10px;width:100%;margin-top:12px}
.tccount{text-align:center;font-size:2.4rem;font-weight:900;font-variant-numeric:tabular-nums}
.tccount.hot{color:#ff4d4d}
.tcbtn{display:flex;align-items:center;gap:12px;border:0;border-radius:16px;padding:16px 14px;font-size:1.3rem;font-weight:900;color:#fff;font-family:inherit;text-align:left;cursor:pointer;background:linear-gradient(135deg,#1aa79c,#0e6f8a);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.tcbtn b{display:inline-flex;flex:none;width:2em;height:2em;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.22);font-size:.85em}
.tcbtn:disabled{cursor:default;opacity:.55}
.tcbtn.mine{opacity:1;box-shadow:0 0 0 3px #fff,0 4px 14px rgba(0,0,0,.35)}
.tcbtn.right{opacity:1;background:linear-gradient(135deg,#2fd27a,#139a50)}
.tcbtn.wrong.mine{background:linear-gradient(135deg,#e0402a,#a01a1a)}

/* ---------- Zero Gravity ---------- */
.zgov{position:fixed;inset:0;z-index:55;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,#3a1d6e 0%,#170b35 40%,#05030f 100%);font-family:inherit}
.zgstars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 30% 70%,#fff,transparent),radial-gradient(2px 2px at 55% 15%,#cfe3ff,transparent),radial-gradient(1px 1px at 75% 45%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 80%,#ffe9c9,transparent),radial-gradient(1px 1px at 45% 55%,#fff,transparent),radial-gradient(1.5px 1.5px at 20% 90%,#fff,transparent),radial-gradient(1px 1px at 65% 85%,#fff,transparent);background-size:340px 300px;animation:zgtw 6s ease-in-out infinite alternate;opacity:.9}
.zgstars.two{background-size:520px 460px;background-position:120px 60px;animation-delay:-3s;opacity:.6}
@keyframes zgtw{from{opacity:.4}to{opacity:1}}
.zgplanet{position:absolute;right:8vw;top:14vh;width:16vh;height:16vh;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb3e6,#b04dff 50%,#3a1070 80%);box-shadow:0 0 60px rgba(176,77,255,.5)}
.zgplanet::after{content:'';position:absolute;left:-30%;right:-30%;top:44%;height:14%;border-radius:50%;border:3px solid rgba(255,220,255,.55);transform:rotate(-14deg)}
.zgsign{position:absolute;top:2.5vh;left:0;right:0;margin:0 auto;width:fit-content;padding:.5vh 2.2vw;border-radius:14px;border:3px solid #9a7bff;color:#f1ecff;font-weight:900;font-size:clamp(1.5rem,3.2vw,2.8rem);text-shadow:0 0 12px #9a7bff,0 0 26px #6a3dff;box-shadow:0 0 18px rgba(154,123,255,.55);background:rgba(20,10,50,.55);white-space:nowrap;z-index:3}
.zgclock{position:absolute;top:3vh;right:4vw;font-weight:900;font-size:clamp(2rem,5vw,4.4rem);font-variant-numeric:tabular-nums;text-shadow:0 0 20px #9a7bff;z-index:3}
.zgov[data-st="ready"] .zgclock{font-size:clamp(4rem,12vw,10rem);right:0;left:0;text-align:center;top:30vh;animation:uthot .5s ease-in-out infinite alternate}
.zgrod{position:absolute;left:50%;bottom:0;width:.7vw;min-width:5px;margin-left:-.35vw;height:var(--h,44vh);border-radius:99px;background:linear-gradient(90deg,#8b90b0,#f2f4ff 45%,#8b90b0);box-shadow:0 0 14px rgba(200,210,255,.35);transform-origin:50% 100%;rotate:var(--sw,0deg)}
.zgmid{position:absolute;left:50%;bottom:0;width:0;height:0;z-index:2}
.zgmid .zgrod{--h:58vh;width:1vw;margin-left:-.5vw;rotate:calc(var(--sw,0deg) * .6)}
.zgmid .zgtop{position:absolute;left:50%;bottom:calc(100% - 20vh);transform:translateX(-50%)}
.zgsing{height:36vh;width:auto;display:block;filter:drop-shadow(0 0 24px rgba(140,120,255,.6))}
.zgov[data-st="play"] .zgsing .zgsleeve{animation:zgsl 2.4s ease-in-out infinite alternate}
@keyframes zgsl{to{opacity:.9}}
.zgov[data-st="play"] .zgmouth{animation:nthold .5s ease-in-out infinite alternate;transform-origin:100px 88px}
.zgp{position:absolute;bottom:0;width:0;height:0;z-index:3}
.zgp .zgtop{position:absolute;left:50%;bottom:100%;width:0;height:0}
.zgfig{position:absolute;left:-3.6vh;bottom:0;width:7.2vh;height:11vh;transform-origin:50% 100%;transition:rotate .08s linear}
.zgfig .char{position:absolute;left:50%;top:0;width:6vh;height:6vh;margin-left:-3vh;z-index:2;box-shadow:0 0 0 2px #fff}
.zgfig .zgbod{position:absolute;left:50%;top:5.2vh;width:3.8vh;height:5.8vh;margin-left:-1.9vh;z-index:1}
.zglab{position:absolute;left:0;top:-15vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;font-weight:900;text-shadow:0 2px 8px #000;pointer-events:none}
.zglab b{font-size:clamp(.65rem,1.1vw,1rem)}.zglab i{font-style:normal;color:#ffd23f;font-size:clamp(.8rem,1.4vw,1.2rem)}
.zgp.risky .zgfig .char{box-shadow:0 0 0 3px #ff4d4d,0 0 20px #ff4d4d}
.zgp.out .zgfig{animation:zgfall 5s cubic-bezier(.3,.1,.5,1) forwards}
.zgp.out.hit .zgfig{animation:zgblast 1.8s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes zgblast{0%{translate:0 0;rotate:0deg;opacity:1;filter:brightness(3)}10%{filter:brightness(1)}100%{translate:calc(var(--dir,1) * 45vw) -90vh;rotate:calc(var(--dir,1) * 1440deg);opacity:0}}
.zgp.out .zglab{opacity:0;transition:opacity .6s}
.zgp.out .zglab b::after{content:' 🚀'}
@keyframes zgfall{0%{translate:0 0;rotate:calc(var(--dir,1) * 60deg);opacity:1}100%{translate:calc(var(--dir,1) * 22vw) -75vh;rotate:calc(var(--dir,1) * 1080deg);opacity:0}}
.zgp.win .zgfig .char{box-shadow:0 0 0 4px #ffd23f,0 0 30px #ffd23f}
.zgmsg{position:absolute;left:0;right:0;bottom:2.5vh;text-align:center;font-weight:900;font-size:clamp(1rem,2.2vw,1.9rem);text-shadow:0 3px 12px #000;z-index:5;padding:0 10vw}
.zgboard{position:absolute;left:50%;top:15vh;width:min(560px,60vw);transform:translateX(-50%);display:flex;flex-direction:column;gap:.6vh;z-index:6}
.zgboard:empty{display:none}
.zgboard .tcrow{font-size:clamp(.9rem,1.5vw,1.3rem);animation:benvin .5s cubic-bezier(.3,1.4,.5,1) both;background:rgba(10,5,30,.8)}
.zgov.enter .zgsign{animation:inTop .8s cubic-bezier(.2,.9,.3,1.08) both}
.hs-zg .grwall{background:radial-gradient(ellipse at 30% 20%,#3a1d6e 0%,#170b35 45%,#05030f 100%)}
.hs-zg .hssign{border-color:#9a7bff;color:#f1ecff;text-shadow:0 0 12px #9a7bff;box-shadow:0 0 18px rgba(154,123,255,.55)}
.hszg{position:relative;height:50vh;display:flex;flex-direction:column;align-items:center}
.hszg .zgsing{height:32vh;position:relative;z-index:1}
.hszg .hspole{width:10px;flex:1;margin-top:-12vh;border-radius:99px;background:linear-gradient(90deg,#8b90b0,#f2f4ff 45%,#8b90b0)}
/* the phone */
.zgui{width:100%;margin-top:10px;display:flex;flex-direction:column;gap:14px;user-select:none;-webkit-user-select:none;touch-action:none}
.zgsc{display:flex;justify-content:space-between;font-weight:900;font-size:1.3rem}.zgsc b{color:var(--yellow)}.zgsc i{font-style:normal;opacity:.75}
.zgmeter{position:relative;height:46px;border-radius:99px;background:linear-gradient(90deg,#ff3a3a 0%,#ff9f1c 20%,#3ddc84 42%,#3ddc84 58%,#ff9f1c 80%,#ff3a3a 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.3)}
.zgmeter .zgmid{position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:rgba(0,0,0,.4)}
.zgneedle{position:absolute;top:-8px;bottom:-8px;width:10px;margin-left:-5px;left:50%;border-radius:99px;background:#fff;box-shadow:0 0 0 2px #111,0 0 12px #fff;transition:left .25s linear}
.zgneedle.risky{background:#ffd23f;box-shadow:0 0 0 2px #111,0 0 16px #ff3a3a}
.zgbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zgb{height:min(38vh,260px);border:0;border-radius:22px;font-size:3.4rem;font-weight:900;color:#fff;background:linear-gradient(160deg,#6a4dff,#3a1d9e);box-shadow:0 8px 0 #22106a,0 10px 24px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:inherit;cursor:pointer;touch-action:none}
.zgb small{font-size:1rem;letter-spacing:2px}
.zgb.on{transform:translateY(6px);box-shadow:0 2px 0 #22106a;background:linear-gradient(160deg,#9a7bff,#6a3dff)}

/* ---------- We Will Rule the World ---------- */
.ruov{position:fixed;inset:0;z-index:55;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2a0f4a 0%,#12062a 55%,#05020d 100%);font-family:inherit}
.rulights i{position:absolute;top:-10vh;width:30vw;height:120vh;clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);transform-origin:50% 0;opacity:.18;animation:chbeam 4s ease-in-out infinite alternate}
.rulights i:nth-child(1){left:-6vw;background:linear-gradient(#ff3fb0,transparent)}.rulights i:nth-child(2){left:20vw;background:linear-gradient(#3fd0ff,transparent);animation-delay:-1s}.rulights i:nth-child(3){left:48vw;background:linear-gradient(#ffd23f,transparent);animation-delay:-2s}.rulights i:nth-child(4){left:74vw;background:linear-gradient(#7dff8a,transparent);animation-delay:-3s}
.rusign{position:absolute;top:2vh;left:2vw;padding:.4vh 1.4vw;border-radius:14px;border:3px solid #ff3fb0;color:#fff0fb;font-weight:900;font-size:clamp(1.1rem,2.2vw,2rem);text-shadow:0 0 12px #ff3fb0;box-shadow:0 0 18px rgba(255,63,176,.5);background:rgba(30,5,40,.6);z-index:3;white-space:nowrap}
.ruclock{position:absolute;top:2vh;right:3vw;font-weight:900;font-size:clamp(2rem,4.5vw,4rem);font-variant-numeric:tabular-nums;text-shadow:0 0 18px #ff3fb0;z-index:3}
.ruov[data-st="ready"] .ruclock{left:0;right:0;top:36vh;text-align:center;font-size:clamp(4rem,12vw,10rem);z-index:9;animation:uthot .5s ease-in-out infinite alternate}
.ruboard{position:absolute;left:4vw;top:11vh;width:86vh;height:86vh;max-width:62vw;max-height:62vw}
.rugrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:2px;padding:4px;border-radius:12px;background:#0a0418;box-shadow:0 0 0 3px rgba(255,255,255,.15),0 0 40px rgba(255,63,176,.3)}
.rugrid > i{border-radius:3px;background:rgba(255,255,255,.07);transition:background .3s,filter .3s}
.rugrid > i.own{filter:brightness(.72) saturate(.9)}
.rugrid > i.own.trail{filter:brightness(1.15) saturate(1.2);box-shadow:0 0 10px rgba(255,255,255,.5) inset}
.rustage{position:relative;border-radius:10px;background:radial-gradient(circle,#4a1a7a,#1d0838);box-shadow:inset 0 0 0 3px #ffd23f,0 0 24px rgba(255,210,63,.4);display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.rustage .rusing{height:92%;width:auto;filter:drop-shadow(0 0 12px rgba(255,210,63,.6))}
.ruov[data-st="play"] .rusing{animation:rudance .5s ease-in-out infinite alternate}
@keyframes rudance{from{rotate:-4deg}to{rotate:4deg;translate:0 -3%}}
.ruball{position:absolute;left:50%;top:-14%;translate:-50% 0;font-size:3.6vh;animation:ruspin 3s linear infinite;z-index:2}
@keyframes ruspin{to{rotate:360deg}}
.rutoks{position:absolute;inset:4px}
.rutok{position:absolute;width:calc(100% / var(--n));height:calc(100% / var(--n));translate:-50% -50%;transition:left .32s ease-out,top .32s ease-out;z-index:2;display:flex;align-items:center;justify-content:center}
.rutok .char{width:118%;height:118%;flex:none;box-shadow:0 0 0 3px var(--c),0 4px 10px rgba(0,0,0,.6)}
.rutok .rustar{position:absolute;top:-40%;font-size:2.6vh;display:none;animation:ruspin 1s linear infinite}
.rutok.stun .rustar{display:block}.rutok.stun .char{filter:grayscale(.7) brightness(.8)}
.rutok.win .char{box-shadow:0 0 0 4px #ffd23f,0 0 24px #ffd23f}
.rulist{position:absolute;right:2vw;top:13vh;width:30vw;display:flex;flex-direction:column;gap:.5vh;z-index:3}
.rurow{position:relative;display:flex;align-items:center;gap:.6vw;padding:.4vh .8vw;border-radius:12px;background:rgba(0,0,0,.5);font-weight:800;font-size:clamp(.7rem,1.2vw,1.05rem);overflow:hidden;box-shadow:inset 4px 0 0 var(--c)}
.rurow em{position:absolute;left:0;bottom:0;height:3px;background:var(--c);transition:width .4s}
.rurow b{width:1.5em;text-align:center;opacity:.7}.rurow .char{width:3.2vh;height:3.2vh;flex:none;box-shadow:0 0 0 2px var(--c)}
.rurow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rurow i{font-style:normal;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.rurow.win{background:linear-gradient(90deg,rgba(255,210,63,.35),rgba(0,0,0,.5));box-shadow:inset 4px 0 0 var(--c),0 0 0 2px #ffd23f}
.rumsg{position:absolute;right:2vw;bottom:4vh;width:30vw;text-align:center;font-weight:900;font-size:clamp(1rem,2vw,1.7rem);text-shadow:0 3px 12px #000;z-index:4}
.ruov.enter .ruboard{animation:inBottom .8s .2s cubic-bezier(.2,.9,.3,1.08) both}
.hs-rule .grwall{background:radial-gradient(ellipse at 50% 40%,#2a0f4a 0%,#12062a 55%,#05020d 100%)}
.hs-rule .hssign{border-color:#ff3fb0;color:#fff0fb;text-shadow:0 0 12px #ff3fb0;box-shadow:0 0 18px rgba(255,63,176,.5)}
.hsrule{position:relative;display:flex;flex-direction:column;align-items:center}
.hsrule .rusing{height:30vh;width:auto;position:relative;z-index:1;animation:rudance .5s ease-in-out infinite alternate}
.hsrule .ruball{top:-8vh;font-size:7vh}
.hsfloor{display:grid;grid-template-columns:repeat(3,7vh);gap:4px;margin-top:-1vh;transform:perspective(40vh) rotateX(40deg)}
.hsfloor i{height:5vh;border-radius:4px;animation:ruflash 1.2s steps(1) infinite}
.hsfloor i:nth-child(3n+1){background:#ff3fb0}.hsfloor i:nth-child(3n+2){background:#3fd0ff;animation-delay:-.4s}.hsfloor i:nth-child(3n){background:#ffd23f;animation-delay:-.8s}
@keyframes ruflash{50%{filter:brightness(.4)}}
/* the phone */
.ruui{width:100%;margin-top:6px;user-select:none;-webkit-user-select:none;touch-action:none}
.rucnt{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:1.3rem;margin-bottom:12px}
.rucnt i{font-style:normal;opacity:.75;font-variant-numeric:tabular-nums}
.rusw{display:inline-block;width:22px;height:22px;border-radius:6px;background:var(--c);vertical-align:-4px;box-shadow:0 0 0 2px #fff}
.rupad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:min(86vw,340px);aspect-ratio:1;margin:0 auto;transition:opacity .2s,filter .2s}
.rub{border:0;border-radius:18px;font-size:2.6rem;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c));box-shadow:0 6px 0 rgba(0,0,0,.35);cursor:pointer;touch-action:none;font-family:inherit}
.rub.u{grid-area:1/2}.rub.l{grid-area:2/1}.rub.r{grid-area:2/3}.rub.d{grid-area:3/2}
.rupad .rub{background:var(--c);box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 0 4px #fff}
.rupad .rub.on{filter:brightness(1.15);box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 0 5px #a020f0,0 0 20px 7px #a020f0,0 0 40px 12px rgba(160,32,240,.7);animation:rubglow 1.1s ease-in-out infinite alternate}
@keyframes rubglow{to{box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 0 5px #a020f0,0 0 12px 4px #a020f0,0 0 26px 7px rgba(160,32,240,.55)}}
.rupad .rub.tap{animation:rubtap .18s ease-out}
.rupad .rub.on.tap{animation:rubtap .18s ease-out,rubglow 1.1s .18s ease-in-out infinite alternate}
@keyframes rubtap{50%{transform:translateY(5px) scale(.95)}}
.ruc{grid-area:2/2;display:flex;align-items:center;justify-content:center;font-size:3.4rem;font-weight:900;color:#fff}
.rupad.stun .rub{opacity:.3;filter:grayscale(.8)}

/* ---------- Sja-la-lie Sja-la-Mayhem! ---------- */
.orov{position:fixed;inset:0;z-index:55;overflow:hidden;background:#7ec8f0;font-family:inherit}
.orsky{position:absolute;inset:0;background:linear-gradient(#5fb2e8 0%,#a9dcf5 55%,#e8f4fb 70%)}
.orsky::before,.orsky::after{content:'';position:absolute;top:10vh;width:20vw;height:7vh;border-radius:99px;background:#fff;opacity:.85;box-shadow:6vw -3vh 0 1vh #fff;animation:orcloud 40s linear infinite}
.orsky::before{left:-20vw}.orsky::after{left:-60vw;top:20vh;animation-delay:-20s}
@keyframes orcloud{to{translate:150vw 0}}
.orhouses{position:absolute;left:0;right:0;bottom:24vh;height:34vh;display:flex;align-items:flex-end;justify-content:space-between;padding:0 1vw}
.orhouses i{position:relative;width:13vw;height:var(--hh,30vh);background:linear-gradient(#a8522a,#7a3518);clip-path:polygon(0 22%,20% 22%,20% 10%,35% 10%,50% 0,65% 10%,80% 10%,80% 22%,100% 22%,100% 100%,0 100%);box-shadow:inset 0 0 0 4px rgba(0,0,0,.1)}
.orhouses i::after{content:'';position:absolute;left:18%;right:18%;top:32%;bottom:12%;background:repeating-linear-gradient(90deg,#fff7d6 0 22%,transparent 22% 39%),repeating-linear-gradient(#fff7d6 0 26%,transparent 26% 44%);background-blend-mode:multiply;opacity:.75}
.orhouses i:nth-child(2n){--hh:26vh;background:linear-gradient(#5c6b7a,#3c4856)}.orhouses i:nth-child(3n){--hh:33vh;background:linear-gradient(#c97b2a,#94531a)}
.orstreet{position:absolute;left:0;right:0;bottom:0;height:25vh;background:repeating-linear-gradient(90deg,#9a8a7a 0 4vw,#8a7a6a 4vw 4.3vw),linear-gradient(#a99a88,#7a6b5c);box-shadow:inset 0 6px 0 #6a5b4c}
.orsign{position:absolute;top:2vh;left:0;right:0;margin:0 auto;width:fit-content;padding:.5vh 2vw;border-radius:14px;border:3px solid #ff7a1a;background:rgba(40,20,10,.75);color:#fff3e0;font-weight:900;font-size:clamp(1.3rem,2.8vw,2.5rem);text-shadow:0 0 12px #ff7a1a;box-shadow:0 0 18px rgba(255,122,26,.5);z-index:3;white-space:nowrap}
.orph{position:absolute;top:11.5vh;left:0;right:0;text-align:center;font-weight:900;font-size:clamp(.9rem,1.6vw,1.3rem);color:#3a1a00;text-shadow:0 1px 0 #fff;z-index:3}
.orclock{position:absolute;top:2vh;right:3vw;font-weight:900;font-size:clamp(2rem,4.5vw,4rem);color:#fff;text-shadow:0 0 16px #ff7a1a,0 3px 0 #6b2a12;font-variant-numeric:tabular-nums;z-index:3}
.ormid{position:absolute;left:50%;bottom:6vh;width:min(62vw,98vh);transform:translateX(-50%);z-index:2}
.orsvg{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 20px rgba(0,0,0,.35))}
.orov.brk-speed .orsvg{animation:orrattle .18s linear infinite}
@keyframes orrattle{0%,100%{translate:0 0;rotate:0deg}25%{translate:-3px 1px;rotate:-.4deg}75%{translate:3px -1px;rotate:.4deg}}
.orov.brk-pitch .orpipe{animation:orpipe .4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s);transform-box:fill-box;transform-origin:50% 100%}
@keyframes orpipe{from{rotate:-6deg}to{rotate:7deg;translate:0 -4px}}
.orov:not(.brk-pitch)[data-st="fixed"] .orpipe,.orov[data-st="end"] .orpipe{animation:orplay .45s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.09s);transform-box:fill-box;transform-origin:50% 100%}
@keyframes orplay{to{scale:1 1.06}}
.orwheel{transform-box:fill-box;transform-origin:50% 50%;animation:ruspin 3s linear infinite}
.orov.brk-speed .orwheel{animation-duration:9s;animation-direction:reverse}
.orov.brk-speed .orfig{animation:orwob 1.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 50%}
@keyframes orwob{to{rotate:-10deg;scale:.94}}
.orsmoke{position:absolute;left:30%;right:30%;top:-4%;height:30%;pointer-events:none;display:none}
.orov.brk-speed .orsmoke{display:block}
.orsmoke i{position:absolute;bottom:0;width:7vh;height:7vh;border-radius:50%;background:radial-gradient(circle,rgba(110,110,110,.75),rgba(110,110,110,0) 70%);animation:orsm 2.4s ease-out infinite}
.orsmoke i:nth-child(1){left:10%}.orsmoke i:nth-child(2){left:45%;animation-delay:-.8s}.orsmoke i:nth-child(3){left:80%;animation-delay:-1.6s}
@keyframes orsm{0%{translate:0 0;scale:.5;opacity:.9}100%{translate:-2vw -22vh;scale:2.4;opacity:0}}
.orsparks{position:absolute;left:4%;top:44%;font-size:5vh;display:none;animation:benvshake .15s linear infinite}
.orov.brk-fx .orsparks{display:block}

.orsta{position:absolute;width:22vw;padding:1vh 1vw;border-radius:16px;background:rgba(30,15,5,.82);box-shadow:0 0 0 3px #ff4d4d,0 10px 24px rgba(0,0,0,.35);z-index:4;display:flex;flex-direction:column;gap:.5vh;transition:box-shadow .4s}
.orsta.speed{right:1.5vw;top:20vh}.orsta.pitch{left:50%;top:15vh;transform:translateX(-50%);width:26vw}.orsta.fx{left:1.5vw;top:20vh}
.orsta.done{box-shadow:0 0 0 3px #3ddc84,0 0 26px rgba(61,220,132,.6)}
.orsta.empty{display:none}
.orst{font-weight:900;font-size:clamp(.9rem,1.5vw,1.3rem)}
.orbad{font-style:normal;animation:uthot .4s ease-in-out infinite alternate;display:inline-block}
.orpl{display:flex;align-items:center;gap:.5vw;font-weight:800;font-size:clamp(.65rem,1vw,.9rem)}
.orpl .char{width:3vh;height:3vh;flex:none}
.orpl span{width:6vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orpl em{flex:1;height:1vh;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.orpl em i{display:block;height:100%;background:linear-gradient(90deg,#ff7a1a,#ffd23f);transition:width .3s}
.orpl.ok em i{background:#3ddc84}
.orpl b{width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
.ormsg{position:absolute;left:0;right:0;bottom:1.6vh;text-align:center;font-weight:900;font-size:clamp(1rem,2vw,1.7rem);color:#fff;text-shadow:0 3px 12px #000,0 0 4px #000;z-index:5;padding:0 6vw}
.orboard{position:absolute;left:50%;top:15vh;width:min(560px,60vw);transform:translateX(-50%);display:flex;flex-direction:column;gap:.6vh;z-index:6;padding:1.4vh 1vw;border-radius:18px;background:rgba(30,15,5,.85)}
.orboard:empty{display:none}
.orboard .tcrow{font-size:clamp(.9rem,1.5vw,1.3rem);animation:benvin .5s cubic-bezier(.3,1.4,.5,1) both}
.orboard .tcrow em{color:#3ddc84;font-weight:900}
.orov[data-st="fixed"] .orsta,.orov[data-st="end"] .orsta{display:none}
.orov.enter .orsign{animation:inTop .8s cubic-bezier(.2,.9,.3,1.08) both}
.hs-organ .grwall{background:linear-gradient(#5fb2e8 0%,#a9dcf5 60%,#e8f4fb 100%)}
.hs-organ .hssign{border-color:#ff7a1a;background:rgba(40,20,10,.75);color:#fff3e0;text-shadow:0 0 12px #ff7a1a;box-shadow:0 0 18px rgba(255,122,26,.5)}
.hsorgan{width:min(50vw,78vh)}.hsorgan .orsvg{animation:orrattle .2s linear infinite}
/* the phone */
.orui{width:100%;margin-top:6px;user-select:none;-webkit-user-select:none;touch-action:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.orcount{font-weight:900;font-size:1.6rem;color:var(--yellow)}
.orhint{margin:4px 0 0;opacity:.75;font-weight:700;text-align:center}
.orwh{width:min(80vw,300px);height:auto;touch-action:none}
.orpipes{display:flex;gap:10px;justify-content:center;width:100%}
.orpp{position:relative;flex:1;max-width:64px;height:min(46vh,320px);border-radius:12px;background:rgba(255,255,255,.08);touch-action:none}
.ortg{position:absolute;left:-4px;right:-4px;border:3px dashed #fff;border-radius:8px;background:rgba(255,255,255,.08)}
.orpb{position:absolute;left:14%;right:14%;bottom:0;border-radius:10px 10px 4px 4px;background:linear-gradient(90deg,#b8860b,#ffe27a,#b8860b);box-shadow:0 -3px 0 #fff3b0 inset}
.orpb i{position:absolute;left:-14%;right:-14%;top:-6px;height:12px;border-radius:6px;background:#ffe27a;box-shadow:0 0 0 2px #8a5a00}
.orpp.near .ortg{border-color:#ffd23f}
.orpp.ok .ortg{border-color:#3ddc84;border-style:solid;background:rgba(61,220,132,.2)}
.orpp.ok .orpb{background:linear-gradient(90deg,#1d8a4a,#7dffb0,#1d8a4a)}
.orfx{position:relative;width:min(88vw,330px);aspect-ratio:1;border-radius:18px;background:#1c1830;box-shadow:inset 0 0 0 3px #ffd23f;touch-action:none}
.orwires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orsrc,.orsock,.orplug{position:absolute;translate:-50% -50%}
.orsrc{top:10%;width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff}
.orsock{top:87.3%;width:40px;height:40px;border-radius:50%;background:#0c0a18;box-shadow:inset 0 0 0 6px var(--c),0 0 0 2px rgba(255,255,255,.3)}
.orsock.spare{box-shadow:inset 0 0 0 6px #666,0 0 0 2px rgba(255,255,255,.2)}
.orplug{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.5);z-index:2;touch-action:none;cursor:grab}
.orplug.bad{animation:benvshake .2s linear infinite;box-shadow:0 0 0 3px #ff4d4d,0 0 16px #ff4d4d}
.orplug.home{box-shadow:0 0 0 3px #3ddc84}
.orplug.loose{box-shadow:0 0 0 3px #ffd23f,0 6px 14px rgba(0,0,0,.6);scale:1.1}
.orplug.nope{animation:benvshake .1s linear 4}
.orpz{width:100%;display:flex;flex-direction:column;align-items:center}

/* Turquoise Carpet in 3D */
.tc3d{position:absolute;inset:0;z-index:0;display:none}
.tc3d canvas{display:block;width:100%!important;height:100%!important}
.tcov.is3d .tc3d{display:block}
.tcov.is3d .tcsec,.tcov.is3d .tcsky,.tcov.is3d .tchall,.tcov.is3d .tctrees,.tcov.is3d .tcrun,.tcov.is3d .tcwalk,.tcov.is3d .tcropes,.tcov.is3d .tccams{display:none}
.tcov.is3d.flashed::after{animation:tcwhite3 .22s ease-out forwards}
@keyframes tcwhite3{0%{opacity:.12}100%{opacity:0}}
/* We Will Rule the World in 3D */
.ru3{position:absolute;inset:0;z-index:0;display:none}
.ru3 canvas{display:block;width:100%!important;height:100%!important}
.rutoks3{position:absolute;inset:0;z-index:2;pointer-events:none;display:none}
.ruov.is3d .ru3,.ruov.is3d .rutoks3{display:block}
.ruov.is3d .ruboard,.ruov.is3d .rulights{display:none}
.ruov.is3d{background:#0a0414}
.rut{position:absolute;width:0;height:0;scale:var(--rs,1);transform-origin:0 0}
.rut .jmt{translate:0 0;margin:-10.5vh 0 0 -3vh;transition:none}
.rut .jmt .char{box-shadow:0 0 0 3px var(--c),0 4px 10px rgba(0,0,0,.6)}
.rut.drop .jmt{animation:rudrop .9s var(--d,0ms) cubic-bezier(.55,0,.75,1.25) backwards}
@keyframes rudrop{from{transform:translateY(-90vh)}to{transform:none}}
.rut .rustar{position:absolute;left:-1.6vh;top:-15vh;font-size:3.2vh;display:none;animation:ruspin 1s linear infinite}
.rut.stun .rustar{display:block}.rut.stun .jmt{filter:grayscale(.7) brightness(.8)}
.rut.win .jmt .char{box-shadow:0 0 0 4px #ffd23f,0 0 24px #ffd23f}
.ruov.is3d .rumsg{left:0;right:32vw;width:auto;bottom:3vh}
/* Sja-la-lie: on a big Eurovision stage, with the singer and two marionettes in front of the organ */
.orov{background:#07040e}
.orbg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,#4a1a10 0%,#1a0a14 50%,#07040e 100%)}
.orleds{position:absolute;top:8vh;bottom:22vh;width:9vw;display:grid;grid-template-rows:repeat(9,1fr);gap:1.4vh}
.orleds.l{left:1.5vw}.orleds.r{right:1.5vw}
.orleds i{border-radius:4px;background:repeating-linear-gradient(90deg,#ff5a1a 0 6px,transparent 6px 12px);opacity:.75;box-shadow:0 0 14px rgba(255,100,30,.6);animation:orled 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.18s)}
@keyframes orled{from{opacity:.25}to{opacity:.95}}
.orrig{position:absolute;left:0;right:0;top:0;height:3vh;display:flex;justify-content:space-around;align-items:center;background:linear-gradient(#1a1a22,#2a2a34)}
.orrig i{width:1.4vh;height:1.4vh;border-radius:50%;background:#ffd27a;box-shadow:0 0 12px #ffb040;animation:orled 1s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s)}
.orbeams i{position:absolute;top:2vh;width:16vw;height:90vh;background:linear-gradient(rgba(255,210,140,.22),transparent 80%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);transform-origin:50% 0;animation:chbeam 5s ease-in-out infinite alternate}
.orbeams i:nth-child(1){left:6vw}.orbeams i:nth-child(2){left:28vw;animation-delay:-2s}.orbeams i:nth-child(3){left:54vw;animation-delay:-1s}.orbeams i:nth-child(4){left:76vw;animation-delay:-3s}
.orfloor{position:absolute;left:0;right:0;bottom:0;height:20vh;background:linear-gradient(#2a1a24,#0a060c);box-shadow:inset 0 3px 0 rgba(255,200,120,.35)}
.orfloor::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,180,90,.3),transparent 60%)}
.ormid{left:50%;bottom:14vh;width:min(78vw,128vh);transform:translateX(-50%)}
.orsvg .orbulb{fill:#fff3b0;animation:orled .7s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.11s)}

@keyframes orflick{0%{fill:#fff3b0}50%{fill:#3a2a10}}
.orsvg .ormill{transform-box:fill-box;transform-origin:50% 25%;animation:ruspin 6s linear infinite}
.orov.brk-pitch .orsvg .orpipe{animation:orpipe .4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.13s);transform-box:fill-box;transform-origin:50% 100%}
.orov:not(.brk-pitch) .orsvg .orpipe{animation:orplay .45s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.09s);transform-box:fill-box;transform-origin:50% 100%}
.orov.brk-speed .orsvg{animation:orrattle .2s linear infinite}
.orsvg .orfig1,.orsvg .orfig2{transform-box:fill-box;transform-origin:50% 100%;animation:orwob 1s steps(2) infinite alternate}
.orsinger{position:absolute;left:50%;bottom:3vh;height:52vh;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.orsinger svg{height:100%;width:auto;display:block}
.orov[data-st="fix"] .orsinger svg,.orov[data-st="fixed"] .orsinger svg,.orov[data-st="end"] .orsinger svg{animation:orsway 1.4s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes orsway{from{rotate:-3deg}to{rotate:3deg}}
.orsing .orsmouth{transform-box:fill-box;transform-origin:50% 50%;animation:nthold .4s ease-in-out infinite alternate}

.orpuppet{position:absolute;bottom:4vh;height:56vh;z-index:3;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.orpuppet.p1{left:16vw}.orpuppet.p2{right:16vw}
.orpuppet svg{height:100%;width:auto;display:block;overflow:visible}
.orpup .parm,.orpup .pleg,.orpup .pdrum,.orpup .pskirt{transform-box:fill-box}
.orpup .parm{transform-origin:50% 0}.orpup .pleg{transform-origin:50% 0}
/* the robot dance: stiff, jerky steps */
.orpup .parm.l{animation:orrobA 2.4s steps(1) infinite}.orpup .parm.r{animation:orrobB 2.4s steps(1) infinite}
.orpup .pleg.l{animation:orrobL 2.4s steps(1) infinite}.orpup .pleg.r{animation:orrobL 2.4s steps(1) infinite 1.2s}
.orpuppet svg{animation:orbob 2.4s steps(1) infinite}
.orpuppet.p2 svg{animation-delay:-.6s}.orpuppet.p2 .parm,.orpuppet.p2 .pleg{animation-delay:-.6s}
@keyframes orrobA{0%{rotate:0deg}25%{rotate:60deg}50%{rotate:120deg}75%{rotate:45deg}}
@keyframes orrobB{0%{rotate:0deg}25%{rotate:-90deg}50%{rotate:-30deg}75%{rotate:-120deg}}
@keyframes orrobL{0%{rotate:0deg}25%{rotate:-25deg}50%{rotate:0deg}75%{rotate:0deg}}
@keyframes orbob{0%{translate:0 0;rotate:0deg}25%{translate:0 -1.2vh;rotate:-4deg}50%{translate:0 0;rotate:0deg}75%{translate:0 -1.2vh;rotate:4deg}}
.orov.brk-fire .orpuppet svg{animation-duration:1.2s}
.orov.brk-fire .orpup .parm,.orov.brk-fire .orpup .pleg{animation-duration:1.2s}
.orsta{top:15vh!important;bottom:auto;width:25vw!important;transform:none!important;background:rgba(20,8,4,.86)}
.orsta.fx{left:1.5vw!important;right:auto}.orsta.pitch{left:37.5vw!important}.orsta.speed{right:1.5vw!important;left:auto}
.orph{color:#ffe0b0;text-shadow:0 2px 8px #000}
.orboard{z-index:7}
/* Disqualivision posts: no tape, the counter under the post (not over it), the votes spread out below */
.notearea .sheet:before{display:none}
.notearea .sheet .twname small,.notearea .snote .twname small{position:static;font-size:.75rem;font-weight:400;color:#536471}
.notearea .sheet small.shcount{position:static;display:block;text-align:right;margin-top:6px;color:#8899a6}
.notearea .snote .nvotes{position:absolute;left:0;right:0;bottom:-17px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:4px;margin:0;z-index:2}
.notearea .snote{margin-bottom:12px;padding-bottom:22px}
.notearea .snote .nvotes span{margin-left:0}

/* Turquoise Carpet: the presenters welcome everyone on the carpet */
.tchosts .ehost{position:absolute;bottom:21vh;height:48vh;width:auto;z-index:4;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3.2s ease-in-out infinite alternate;transition:translate 1.2s cubic-bezier(.5,0,.7,.4),opacity 1.2s}
.tchosts .him{left:31vw}.tchosts .her{right:31vw;animation-delay:-1.6s}
.tcov:not([data-st="intro"]) .tchosts .him{translate:-60vw 0;opacity:0}
.tcov:not([data-st="intro"]) .tchosts .her{translate:60vw 0;opacity:0}
.tcbub{position:absolute;top:16vh;max-width:30vw;z-index:6;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.25;padding:.65em 1em;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s}
.tcbub.him{left:14vw;border-bottom-right-radius:4px}.tcbub.her{right:14vw;border-bottom-left-radius:4px}
.tcbub.on{opacity:1;transform:none}
.tcbub .unsaid{visibility:hidden}

/* ---------- Where the Hell Is Edgar?: the dollhouse ---------- */
.edov{position:fixed;inset:0;z-index:55;overflow:hidden;background:linear-gradient(#1a1240,#3a1a5a 60%,#2a1030);font-family:inherit}
.edov.leaving{animation:fadeout .9s forwards}
.edsky{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 10%,#fff,transparent),radial-gradient(1.5px 1.5px at 80% 25%,#fff,transparent);background-size:300px 220px;opacity:.6}
.edhouse{position:absolute;left:3vw;top:4vh;bottom:3vh;width:68vw;display:grid;grid-template-columns:1fr 13vw 1fr;grid-template-rows:12vh 1fr 1fr;gap:1.2vh;padding:0 1vw 1vw;background:#6b3a1e;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 6px #4a2410}
.edroof{grid-column:1/-1;margin:0 -2vw;background:linear-gradient(#b4532f,#7a3518);clip-path:polygon(4% 100%,50% 0,96% 100%);display:flex;align-items:flex-end;justify-content:center;padding-bottom:1.2vh;font-weight:900;font-size:clamp(1rem,2vw,1.8rem);color:#ffe0c0;text-shadow:0 2px 8px #000}
.edroom{position:relative;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 4px rgba(0,0,0,.25)}
.edroom > b{position:absolute;left:1vw;top:1vh;z-index:3;font-weight:900;font-size:clamp(.8rem,1.4vw,1.2rem);background:rgba(0,0,0,.55);padding:.2em .6em;border-radius:8px}
.edroom.green{grid-area:2/1;background:linear-gradient(#2f7a4a 0 70%,#5a3a20 70%)}
.edroom.club{grid-area:2/3;background:linear-gradient(#2a0f4a 0 70%,#1a0830 70%)}
.edroom.back{grid-area:3/1;background:linear-gradient(#3a3a48 0 70%,#22222c 70%)}
.edroom.boud{grid-area:3/3;background:linear-gradient(#e8a8c8 0 70%,#a85a7a 70%)}
.eddeco i{position:absolute;display:block}
.edroom.green .sofa{left:8%;bottom:22%;width:34%;height:22%;border-radius:12px 12px 6px 6px;background:linear-gradient(#ff5a8a,#c02a5a)}
.edroom.green .sofa.two{left:auto;right:30%}
.edroom.green .fridge{right:6%;bottom:22%;width:12%;height:52%;border-radius:6px;background:linear-gradient(90deg,#e8eef4,#fff,#cfd8e0);animation:edfr 4s ease-in-out infinite alternate}
@keyframes edfr{to{translate:-30vw 0}}
.edroom.club .edball{position:absolute;left:50%;top:6%;font-size:5vh;translate:-50% 0;animation:ruspin 3s linear infinite}
.edroom.club .booth{left:30%;bottom:22%;width:40%;height:18%;background:linear-gradient(#3a3a48,#15151c);border-radius:6px;box-shadow:0 0 18px #ff3fb0}
.edroom.club .eddj{position:absolute;left:50%;bottom:34%;height:34%;translate:-50% 0;animation:rudance .4s ease-in-out infinite alternate}
.edroom.back .spk{left:6%;bottom:22%;width:14%;height:40%;border-radius:6px;background:radial-gradient(circle at 50% 35%,#555 0 22%,#222 24% 30%,#111 32%)}
.edroom.back .spk.two{left:auto;right:6%}
.edroom.back .cab{left:20%;bottom:24%;width:60%;height:4%;border-radius:99px;background:#ff4d4d}
.edroom.back .cab.two{bottom:30%;background:#3fb6ff;rotate:-6deg}
.edroom.boud .mirror{left:8%;top:22%;width:16%;height:44%;border-radius:50% 50% 8px 8px;background:linear-gradient(135deg,#e8f6ff,#9fc8e8);box-shadow:0 0 0 5px #d9a520}
.edroom.boud .rack{left:40%;bottom:22%;width:30%;height:40%;border-top:4px solid #888;background:repeating-linear-gradient(90deg,#ff5a8a 0 12%,#3fb6ff 12% 24%,#ffd23f 24% 36%,transparent 36% 40%)}
.edroom.boud .screen{right:6%;bottom:22%;width:16%;height:50%;background:repeating-linear-gradient(90deg,#f3e2c0 0 30%,#c8962a 30% 33%)}
.edstairs{grid-area:2/2/4/3;position:relative;border-radius:8px;background:repeating-linear-gradient(170deg,#8a5a30 0 4vh,#6b3a1e 4vh 4.6vh);display:flex;flex-direction:column;align-items:center;padding-top:1vh}
.edclock{font-weight:900;font-size:clamp(1.6rem,3.4vw,3rem);background:#1a0a30;color:#fff;border-radius:14px;padding:.1em .4em;box-shadow:0 0 0 4px #ffd23f,0 0 20px rgba(255,210,63,.5);font-variant-numeric:tabular-nums;z-index:3}
.edclock.hot{color:#ff4d4d;animation:uthot .5s ease-in-out infinite alternate}
.edin{position:absolute;left:4%;right:4%;bottom:4%;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.4vw;z-index:4}
.edstairs .edin{top:12vh;bottom:auto;flex-direction:column;align-items:center}
.edp{position:relative;display:flex;flex-direction:column;align-items:center;width:5.4vh;animation:benvin .6s cubic-bezier(.3,1.4,.5,1) both}
.edp .char{width:4.4vh;height:4.4vh;position:relative;z-index:2;box-shadow:0 0 0 2px #fff}
.edp .lbod{position:absolute;left:50%;top:3.8vh;width:3vh;height:4.2vh;margin-left:-1.5vh;z-index:1}
.edp em{font-style:normal;font-weight:800;font-size:clamp(.5rem,.75vw,.68rem);margin-top:4.4vh;background:rgba(0,0,0,.6);padding:0 .3em;border-radius:4px;white-space:nowrap;max-width:9vh;overflow:hidden;text-overflow:ellipsis}
.edp.fin .char{box-shadow:0 0 0 3px #3ddc84}
.edlist{position:absolute;right:2vw;top:6vh;width:24vw;display:flex;flex-direction:column;gap:.6vh}
.edrow{display:flex;align-items:center;gap:.6vw;padding:.4vh .8vw;border-radius:12px;background:rgba(0,0,0,.5);font-weight:800;font-size:clamp(.7rem,1.1vw,.95rem)}
.edrow .char{width:3.2vh;height:3.2vh;flex:none}
.edrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.edrow i{font-style:normal;display:flex;gap:2px}.edrow i b{opacity:.25;font-weight:400}.edrow i b.ok{opacity:1}.edrow i b.now{opacity:1;animation:uthot .5s ease-in-out infinite alternate}
.edrow em{font-style:normal;color:#ffd23f;font-weight:900}
.edrow.fin{box-shadow:0 0 0 2px #3ddc84}
.edov.enter .edhouse{animation:inBottom .8s cubic-bezier(.2,.9,.3,1.08) both}
/* the phone */
.edui{width:100%;margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:10px;user-select:none;-webkit-user-select:none}
.eddoors{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.eddoor{border:0;border-radius:16px;padding:16px 8px;background:linear-gradient(160deg,#8a5a30,#5a3418);box-shadow:inset 0 0 0 3px #ffd23f,0 6px 14px rgba(0,0,0,.4);color:#fff;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.eddoor span{font-size:2.4rem}.eddoor b{font-size:1rem}.eddoor small{opacity:.75;font-weight:700}
.eddoor.done{opacity:.4;filter:grayscale(.6)}
.edwait{font-weight:900;font-size:1.2rem;padding:20px}
.edbar{width:100%;height:8px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.edbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffd23f,#ff5a8a);transform-origin:0 50%}
@keyframes edbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.edsofa{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;padding:12px;border-radius:18px;background:linear-gradient(#ff5a8a,#a02450);overflow:hidden}
.edseat{height:84px;border:0;border-radius:12px;background:rgba(0,0,0,.25);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit}
.edpp{display:flex;flex-direction:column;align-items:center;font-size:1.9rem;color:#fff}.edpp b{font-size:.8rem;background:var(--c);color:#111;border-radius:6px;padding:0 6px}
.edfridge{position:absolute;top:0;bottom:0;width:38%;left:-40%;background:linear-gradient(90deg,#d8e2ea,#fff,#c8d4de);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem;color:#7a8a9a;animation:edfridge 2.6s ease-in-out .4s infinite;box-shadow:0 0 0 3px #9aa8b6}
.edfridge b{font-size:.8rem}
@keyframes edfridge{0%{left:-40%}45%{left:104%}50%{left:104%}95%{left:-40%}100%{left:-40%}}
.edchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.edchip{border:0;border-radius:99px;padding:10px 14px;font-weight:900;font-size:1rem;font-family:inherit;background:var(--c,#5b3bd6);color:#111;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.edchip.sel{box-shadow:0 0 0 3px #fff,0 0 14px #fff}
.edchip.used{opacity:.45}
.edclub{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border-radius:18px;background:radial-gradient(circle,#4a1a7a,#12062a)}
.eddjw{height:170px}.eddjw svg{height:100%;width:auto}
.eddjw.dance svg{animation:rudance .35s ease-in-out infinite alternate}
.edballw{position:absolute;top:6px;right:16px;font-size:2.4rem;animation:ruspin 3s linear infinite}
.edballw.warn{filter:drop-shadow(0 0 12px #ff3a3a);animation:ruspin .5s linear infinite,uthot .25s ease-in-out infinite alternate}
.edsq{width:96px;height:96px;border-radius:14px;background:#0a0418;box-shadow:inset 0 0 0 3px #ffd23f;display:flex;align-items:center;justify-content:center;font-size:3.4rem}
.edsq.pop{animation:benvin .3s cubic-bezier(.3,1.5,.5,1)}
.edslots{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}
.edslots span{height:54px;border-radius:10px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.edsyms{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%}
.edsym{height:60px;border:0;border-radius:12px;font-size:1.9rem;background:linear-gradient(160deg,#6a4dff,#3a1d9e);cursor:pointer}
.edrow2{display:flex;gap:10px;width:100%}.edrow2 .btn{flex:1}
.edplan{display:flex;flex-direction:column;gap:8px;width:100%;padding:14px;border-radius:14px;background:#f3e2c0;color:#2a1a10;font-weight:900;font-size:1.3rem}
.edplan div{display:flex;align-items:center;justify-content:space-between}.edplan em{font-style:normal;font-size:2rem;color:#c8102e}
.edsocks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.edsock{height:78px;border:0;border-radius:50%;background:#1c1830;box-shadow:inset 0 0 0 5px #ffd23f;color:#fff;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;aspect-ratio:1;justify-self:center}
.edsock b{font-size:1.5rem}.edsock span{font-size:1.4rem}
.edboud{position:relative;width:100%;height:260px;border-radius:18px;overflow:hidden;background:linear-gradient(#f3c8dc 0 72%,#a85a7a 72%)}
.edwalk{position:absolute;bottom:6%;height:72%;animation:edwalk 4.5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.6s)}
.edwalk svg{height:100%;width:auto}
@keyframes edwalk{from{left:-4%}to{left:72%}}
.edscreen{position:absolute;bottom:6%;width:28%;height:60%;background:repeating-linear-gradient(90deg,#f3e2c0 0 30%,#c8962a 30% 33%);animation:edwalk 3.1s ease-in-out infinite alternate-reverse;box-shadow:0 0 0 3px #c8962a}
.edrack{position:absolute;bottom:6%;width:22%;height:46%;border-top:5px solid #777;background:repeating-linear-gradient(90deg,#ff5a8a 0 14%,#3fb6ff 14% 28%,transparent 28% 34%);animation:edwalk 5.3s ease-in-out infinite alternate}
.edq{font-weight:900;font-size:1.3rem;text-align:center}
.edopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.edopt{display:flex;align-items:center;gap:10px;border:0;border-radius:14px;padding:16px 12px;font-weight:900;font-size:1.1rem;font-family:inherit;background:#2a2050;color:#fff;cursor:pointer}
.edopt i{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.ednext{width:100%;margin-top:10px}

/* Sja-la-lie: a smaller singer; the marionettes hang from bars up near the ceiling */
.orsinger{height:42vh}
.orpuppet{height:94vh;bottom:2vh}

.orhosts .ehost{position:absolute;bottom:2vh;height:56vh;width:auto;z-index:5;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3.2s ease-in-out infinite alternate;transition:translate 1.2s cubic-bezier(.5,0,.7,.4),opacity 1.2s}
.orhosts .him{left:27vw}.orhosts .her{right:27vw;animation-delay:-1.6s}
.orov.hostsoff .orhosts .him,.orov:not([data-st="intro"]) .orhosts .him{translate:-60vw 0;opacity:0}
.orov.hostsoff .orhosts .her,.orov:not([data-st="intro"]) .orhosts .her{translate:60vw 0;opacity:0}
.orbub{top:22vh}.orbub.him{left:6vw}.orbub.her{right:6vw}
/* Rule the World: the presenters on the disco floor; the dancers appear only when they land */
.ruhosts .ehost{position:absolute;bottom:4vh;height:54vh;width:auto;z-index:5;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3.2s ease-in-out infinite alternate;transition:translate 1.2s cubic-bezier(.5,0,.7,.4),opacity 1.2s}
.ruhosts .him{left:18vw}.ruhosts .her{left:44vw;animation-delay:-1.6s}
.ruov:not([data-st="intro"]) .ruhosts .him{translate:-60vw 0;opacity:0}
.ruov:not([data-st="intro"]) .ruhosts .her{translate:70vw 0;opacity:0}
.rubub{top:14vh}.rubub.him{left:4vw}.rubub.her{left:auto;right:34vw}
.rut.pre{display:none}
.ruov[data-st="ready"] .ruclock{font-size:clamp(5rem,14vw,12rem)}

/* Rule the World: no scores during the game; at the end, the count on the right */
.ruov.is3d .rulist{right:-40vw;top:10vh;width:34vw;padding:2vh 1.4vw;border-radius:20px;background:rgba(10,4,24,.88);box-shadow:0 0 0 3px #ff3fb0,0 0 40px rgba(255,63,176,.4);transition:right .8s cubic-bezier(.2,.9,.3,1.05);gap:.8vh}
.ruov.is3d.counting .rulist{right:2vw}
.ruov.is3d .rulist:empty{display:none}
.rult{font-weight:900;font-size:clamp(1rem,1.8vw,1.6rem);text-align:center;margin-bottom:.6vh;text-shadow:0 0 14px #ff3fb0}
.ruov .rulist .rurow{gap:.7vw;padding:.6vh .8vw;font-size:clamp(.75rem,1.25vw,1.1rem)}
.ruov .rulist .rurow em{position:relative;flex:1.2;height:1.4vh;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;left:auto;bottom:auto;width:auto!important}
.ruov .rulist .rurow em u{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c);box-shadow:0 0 10px var(--c);transition:width .1s linear}
.ruov .rulist .rurow i{width:2.4em;text-align:right;font-size:1.25em}
.ruov .rulist .rurow.tick i{animation:benvin .18s ease-out}
.ruov .rulist .rurow.stop{opacity:.6}
.ruov .rulist .rurow.win{opacity:1;background:linear-gradient(90deg,rgba(255,210,63,.35),rgba(0,0,0,.5));box-shadow:inset 4px 0 0 var(--c),0 0 0 2px #ffd23f;animation:uwin .6s ease-in-out infinite alternate}

.tc3front{position:absolute;inset:0;z-index:5;pointer-events:none;display:none}
.tc3front canvas{display:block;width:100%!important;height:100%!important}
.tcov.is3d .tc3front{display:block}
.tcov .tcq,.tcov .tcboard,.tcov .tcbub{z-index:7}

/* Sja-la-lie: before the show the stage is still: no singer, no marionettes, the organ not moving */
.orov:not(.live) .orsinger,.orov:not(.live) .orpuppet{opacity:0;translate:0 6vh}
.orsinger,.orpuppet{transition:opacity .8s,translate .8s cubic-bezier(.2,.9,.3,1.1)}
.orov:not(.live) .orsvg,.orov:not(.live) .orsvg *,.orov:not(.live) .orleds i,.orov:not(.live) .orrig i,.orov:not(.live) .orbeams i{animation:none!important}
.orov:not(.live) .orsvg .orbulb{fill:#7a6a40}
.orok{font-style:normal;color:#3ddc84}
.orsta.brk{box-shadow:0 0 0 3px #ff4d4d,0 0 30px rgba(255,77,77,.7);animation:benvshake .25s linear infinite}
.orsta:not(.brk):not(.done){box-shadow:0 0 0 3px rgba(255,255,255,.3)}

.rutoksb,.ru3front{position:absolute;inset:0;pointer-events:none;display:none}
.rutoksb{z-index:1}.ru3front{z-index:2}
.ru3front canvas{display:block;width:100%!important;height:100%!important}
.ruov.is3d .rutoksb,.ruov.is3d .ru3front{display:block}
.ruov.is3d .rutoks3{z-index:3}

.orpuppet.p1{left:23vw}.orpuppet.p2{right:23vw}
.orov .orsign{z-index:6}
/* the avatar as a head: a bit smaller, sitting on top of the body instead of swallowing the shoulders */
.jmt .char{width:4.6vh;height:4.6vh;margin-top:.3vh}
.jmt b{margin-top:5.6vh}
.lobbyplayers .chip.lobfig .char{width:54px;height:54px}
.lobbyplayers .chip.lobfig .lbod{top:50px}
.lobbyplayers .chip.lobfig .pname{margin-top:60px}
.edp .char{width:3.6vh;height:3.6vh}
.edp .lbod{top:3.4vh}
.chtok .ch-face{width:calc(var(--tok,56px) * .8);height:calc(var(--tok,56px) * .8)}
.chtok .chbod{top:calc(var(--tok,56px) * .74)}
.zgfig .char{width:4.6vh;height:4.6vh;margin-left:-2.3vh;top:.9vh}
/* Where the Hell Is Edgar?: the four rooms, full screen (2×2), the timer in the middle */
.edov2{position:fixed;inset:0;z-index:55;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;background:#0d0820;overflow:hidden}
.edr2{position:relative;overflow:hidden;background:#000}
.edr2>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.edr2>b{position:absolute;left:1.2vw;bottom:1.4vh;z-index:2;background:rgba(10,6,30,.82);color:#fff;font-weight:900;font-size:clamp(.9rem,1.6vw,1.6rem);padding:.15em .6em;border-radius:999px;box-shadow:0 0 0 3px #ffd23f}
.edr2.club>b,.edr2.green>b{left:auto;right:1.2vw}
.edmid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5vh;background:#1a0a30;border-radius:22px;padding:1vh 1.4vw 1.2vh;box-shadow:0 0 0 5px #ffd23f,0 10px 40px rgba(0,0,0,.7)}
.edmid span{font-weight:900;font-size:clamp(.7rem,1.1vw,1.1rem);line-height:1.1;text-align:center;color:#ffd23f}
.edmid .edclock{box-shadow:none;padding:0;background:none}
.edov2.enter .edr2{animation:edr2in .7s cubic-bezier(.2,.9,.3,1.1) both}
.edov2.enter .edr2:nth-child(2){animation-delay:.12s}.edov2.enter .edr2:nth-child(3){animation-delay:.24s}.edov2.enter .edr2:nth-child(4){animation-delay:.36s}
.edov2.enter .edmid{animation:edr2in .6s .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes edr2in{from{opacity:0;transform:scale(.85)}}
.edmid{translate:0 0}
.edov2.leaving{animation:fadeout .9s forwards}
/* the room questions on the phone */
.edlook{font-size:.85rem;color:var(--mute);text-align:center}.edlook b{color:#ffd23f}
.edcode{display:flex;gap:10px;justify-content:center}
.edcode span{width:52px;height:64px;border-radius:12px;background:#1a1240;box-shadow:0 0 0 3px #ffe24a;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900}
.edpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(80vw,300px)}
.edkey{border:0;border-radius:14px;padding:14px 0;font-size:1.5rem;font-weight:900;font-family:inherit;background:#2a2050;color:#fff;cursor:pointer}
.edkey.ok{background:#27ae60}.edkey[disabled]{opacity:.35}
.edfloorlab{font-size:.8rem;font-weight:800;color:#ff6fb5}
.edfloor{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:min(78vw,290px);aspect-ratio:1}
.edtile{border:0;border-radius:8px;background:#2a1a40;box-shadow:inset 0 0 0 2px #0a0412;cursor:pointer}
.edtile.on{background:#3ff0ff;box-shadow:0 0 14px #3ff0ff}
.edfuses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;padding:14px;border-radius:12px;background:#8a909c}
.edfuse{position:relative;width:56px;height:92px;border:0;border-radius:6px;background:#2a2a30;cursor:pointer;padding:0}
.edfuse i{position:absolute;left:12px;top:46px;width:32px;height:38px;border-radius:4px;background:#f4f4f8;transition:top .12s}
.edfuse.on i{top:8px}
.edfuse b{position:absolute;left:0;right:0;bottom:-20px;color:#1a1a1a;font-size:.85rem}
.edfuse::after{content:'';position:absolute;right:-12px;top:6px;width:10px;height:10px;border-radius:50%;background:#ff4d4d}
.edfuse.on::after{background:#3ddc84}
.edrack2{display:flex;gap:8px;padding:10px 12px;border-top:6px solid #9aa0ad;border-radius:4px}
.edrack2 span{width:44px;height:64px;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.edrack2 i{width:34px;height:56px;clip-path:polygon(25% 0,75% 0,85% 25%,100% 100%,0 100%,15% 25%)}
.eddress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.eddr{display:flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:12px 10px;font-weight:900;font-family:inherit;background:#2a2050;color:#fff;cursor:pointer;font-size:1rem}
.eddr i{width:18px;height:28px;clip-path:polygon(25% 0,75% 0,85% 25%,100% 100%,0 100%,15% 25%)}
.eddr.used{opacity:.3}
.edslots2{display:flex;gap:8px;justify-content:center}
.edslots2 span{width:52px;height:60px;border-radius:8px;background:#2a1446;box-shadow:inset 0 0 0 2px #ff6fd8;display:flex;align-items:center;justify-content:center}
.edslots2 svg,.edsym2 svg{width:36px;height:36px;filter:drop-shadow(0 0 4px rgba(255,255,255,.35))}
.edsyms2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(80vw,300px)}
.edsym2{border:0;border-radius:14px;padding:12px 0;background:#14081f;box-shadow:inset 0 0 0 2px #4a2a6a;cursor:pointer}
.edcab{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.edcb{display:flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:12px;font-weight:900;font-family:inherit;font-size:1rem;background:#2a2050;color:#fff;cursor:pointer}
.edcb i{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.edcb.sel{box-shadow:0 0 0 3px #ffd23f}.edcb.used{opacity:.4}
.edpanel{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;border-radius:10px;background:#3a3e4a}
.edsk{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;border-radius:8px;padding:8px 10px;background:#16181e;cursor:pointer}
.edsk svg{width:40px;height:40px}
.edsk i{width:26px;height:26px;border-radius:50%;background:#0c0c10;box-shadow:0 0 0 3px #555}
/* the party game vote: a screenshot of every game on its card (big screen) and button (phone) */
#qopts.gamecards .opt{flex-wrap:wrap}
#qopts.gamecards .opt .gshot{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;display:block;margin-bottom:8px;box-shadow:0 4px 14px rgba(0,0,0,.45)}
#opts.shotgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#opts.shotgrid .opt{flex-wrap:wrap;align-items:flex-start;padding:8px}
#opts.shotgrid .opt .gshot{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;margin-bottom:6px}
#qopts.gamecards{grid-template-columns:repeat(4,1fr);gap:10px}
#qopts.gamecards .opt{min-height:0;padding:8px 10px 10px;font-size:1rem;border-radius:14px}
#qopts.gamecards .opt .gshot{margin-bottom:6px;border-radius:9px}
#qopts.gamecards .opt>b{display:none}
#qopts.gamecards .gsub{font-size:.72rem;line-height:1.25}
#opts.shotgrid .opt>b{display:none}
/* Lost in Verona: the jump moves the whole character, flag in hand and all */
.jmt.jump .char,.jmt.jump .jmbody,.jmt.jump .jmlegs{animation:none}
.jmt.jump{animation:jmjump2 1.15s cubic-bezier(.25,.8,.35,1) both;transform-origin:50% 100%}
.jmt.falling.hop .hflag{animation:jmjump .75s both}
.jmt.run .hflag,.jmt.home .hflag,.jmt.falling .hflag{animation:jmrun .18s ease-in-out infinite alternate}
/* Zero Gravity on the phone: follow the glowing zone with your finger */
.zginfo{font-weight:900;color:#c58bff;text-align:center}
.zgtrack{position:relative;width:min(88vw,360px,50vh);aspect-ratio:1;height:auto;margin:0 auto;border-radius:20px;background:linear-gradient(90deg,rgba(255,77,77,.35),#1a1240 18%,#1a1240 82%,rgba(255,77,77,.35));box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.zgzone{position:absolute;top:6px;bottom:6px;border-radius:14px;background:rgba(63,240,255,.35);box-shadow:0 0 24px #3ff0ff,inset 0 0 0 3px #3ff0ff}
.zgme{position:absolute;top:50%;width:0;height:0;z-index:3}
.zgme::after{content:'';position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff,0 0 0 3px #3ff0ff;opacity:.95}
.zgrock{position:absolute;z-index:2;border-radius:50%;background:radial-gradient(circle at 34% 30%,#c9a27a,#8a6440 45%,#4a3020 80%);box-shadow:inset -8px -10px 0 rgba(0,0,0,.28),0 0 18px rgba(255,140,60,.45)}
.zgrock::before,.zgrock::after{content:'';position:absolute;border-radius:50%;background:rgba(40,24,12,.45)}
.zgrock::before{left:22%;top:28%;width:22%;height:22%}.zgrock::after{left:58%;top:58%;width:16%;height:16%}
.zgwarn{position:absolute;top:0;bottom:0;width:16px;z-index:4;animation:zgblink .3s steps(2) infinite}
.zgwarn.l{left:0}.zgwarn.r{right:0}
@keyframes zgblink{50%{opacity:.25}}
.zgtrack[data-l="1"]{box-shadow:inset 0 0 0 3px #ffd23f}
.zgtrack[data-l="1"] .zgzone{background:rgba(255,210,63,.35);box-shadow:0 0 24px #ffd23f,inset 0 0 0 3px #ffd23f}
.zgtrack[data-l="2"]{box-shadow:inset 0 0 0 4px #ff4d4d;animation:uthot .25s ease-in-out infinite alternate}
.zgtrack[data-l="2"] .zgzone{background:rgba(255,77,77,.35);box-shadow:0 0 24px #ff4d4d,inset 0 0 0 3px #ff4d4d}
.zghint{font-size:.85rem;color:var(--mute)}
/* the big screen: the figures follow the path; a bit off = a wobble, about to fall = red and shaking */
.zgfig{transition:rotate .12s linear}
.zgp.wobbly .zgfig{filter:drop-shadow(0 0 10px #ffd23f)}
.zgov.stagefx .zgsing{animation:zgstage 1.2s ease-out}
@keyframes zgstage{30%{filter:drop-shadow(0 0 30px #fff) brightness(1.6)}}
/* Edgar's rooms come alive */
.edr2 .edsit{animation:edsit 30s linear infinite backwards}
.edr2 .edsit .edst{animation:edstand 30s linear infinite backwards;animation-delay:inherit}
.edr2 .edsit .edsi{opacity:0;animation:edseat 30s linear infinite backwards;animation-delay:inherit}
@keyframes edsit{0%,4%{transform:translateX(var(--from))}12%,26%{transform:translateX(0)}34%,100%{transform:translateX(var(--from))}}
@keyframes edstand{0%,12%{opacity:1}12.5%,25.5%{opacity:0}26%,100%{opacity:1}}
@keyframes edseat{0%,12%{opacity:0}12.5%,25.5%{opacity:1}26%,100%{opacity:0}}
.edr2 .edwk2{animation:edwk2 24s linear infinite backwards;opacity:0}
@keyframes edwk2{0%{transform:translateX(330px);opacity:0}1%{opacity:1}18%,30%{transform:translateX(0)}50%{transform:translateX(-330px);opacity:1}51%,100%{transform:translateX(-330px);opacity:0}}
.edr2 .edbob{animation:edbob .5s ease-in-out infinite alternate}
@keyframes edbob{to{transform:translateY(-4px)}}
.edr2 .eddance{animation:eddance .45s ease-in-out infinite alternate}
@keyframes eddance{to{transform:translateY(-9px) rotate(2deg)}}
.edr2 .edsg{opacity:.16}
.edr2 .edsg.lit{animation:edsglit 9s linear infinite}
@keyframes edsglit{0%,11%{opacity:1}13%,100%{opacity:.16}}
.edr2 .edbeam{animation:edbeam 3.9s ease-in-out infinite alternate;transform-origin:50% 0;transform-box:fill-box}
@keyframes edbeam{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.edr2 .edtw{animation:edtw 1.2s ease-in-out infinite alternate}
@keyframes edtw{to{opacity:.2}}
/* the content editor (🔧 Testing → ✏️ Edit songs & prompts) */
.editov .xecard{width:min(1000px,100%);display:flex;flex-direction:column;gap:10px}
.editov .testhead input{flex:1;max-width:260px;padding:8px 12px;border-radius:10px;border:0;background:#2a2050;color:#fff;font-family:inherit}
.xetabs{display:flex;flex-wrap:wrap;gap:6px}
.xetab{border:0;border-radius:999px;padding:8px 14px;font-weight:800;font-family:inherit;background:#2a2050;color:#cfc6ff;cursor:pointer}
.xetab.on{background:#ffd23f;color:#1a1040}
#xebody{display:flex;flex-direction:column;gap:10px}
#xebody p{margin:0}
.xelist{display:flex;flex-direction:column;gap:6px;max-height:48vh;overflow:auto;padding-right:4px}
.xerow{background:#241a52;border-radius:12px;padding:8px 10px}
.xerowtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.xerowtop>b{flex:1 1 260px;font-size:.95rem}
.xerow input[type=text],.xerow input[type=number],#xebody input[type=search],#xebody input[type=password]{padding:7px 10px;border-radius:8px;border:0;background:#160f38;color:#fff;font-family:inherit;font-size:.95rem}
.xerow input[type=number]{width:76px}
.xerow .xep{flex:2 1 300px}.xerow .xeh{flex:1 1 200px}.xerow .xename{flex:1 1 140px}.xerow .xeyt{flex:1 1 160px;font-family:monospace}
.xerow .xetr{flex:1 1 260px}
.xerow input.bad{box-shadow:0 0 0 2px #ff4d4d}
.xerow label{font-size:.85rem;color:var(--mute);display:flex;align-items:center;gap:4px}
.xeorig{display:flex;flex-direction:column;flex:1 1 240px}.xeorig small{font-weight:500;color:var(--mute);font-size:.78rem}
.xelytxt{width:100%;margin-top:8px;border-radius:8px;border:0;background:#160f38;color:#fff;padding:8px 10px;font-family:inherit;font-size:.95rem;resize:vertical}
#xebody input[type=search]{flex:1;min-width:220px}
.xefound{display:flex;flex-direction:column;gap:4px;max-height:24vh;overflow:auto}
.xehit{text-align:left;border:0;border-radius:8px;padding:8px 10px;background:#2a2050;color:#fff;font-family:inherit;cursor:pointer}
.xehit:hover{background:#3a2c70}
.xechk{font-size:.85rem;color:var(--mute);display:flex;align-items:center;gap:6px}
.xefoot{display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}
#xemsg{flex:1;font-weight:700;font-size:.9rem}#xemsg.ok{color:#3ddc84}#xemsg.bad{color:#ff6b6b}#xemsg.warn{color:#ffd23f}
.xerow input.xetime{width:92px;font-variant-numeric:tabular-nums;text-align:center}
/* Edgar: the green-room guests also pop into the fridge for a drink (and are out of sight for a while) */
@keyframes edsit{0%,4%{transform:translateX(var(--from));opacity:1}12%,26%{transform:translateX(0);opacity:1}35%{transform:translateX(var(--fr));opacity:1}36.5%,61.5%{transform:translateX(var(--fr));opacity:0}63%{transform:translateX(var(--fr));opacity:1}79%,100%{transform:translateX(var(--from));opacity:1}}
.edr2 .edfdoor{opacity:0;animation:edfdoor 30s linear infinite backwards}
@keyframes edfdoor{0%,33.5%{opacity:0}34.5%,37.5%{opacity:1}38.5%,59.5%{opacity:0}60.5%,63.5%{opacity:1}64.5%,100%{opacity:0}}
/* Euroclub: DJ Konstantin's arm goes up for 2 seconds, then the symbols light up one by one */
.edr2 .edarm{transform-box:view-box;transform-origin:436px 196px;animation:edarm 9s ease-in-out infinite;transform:rotate(150deg)}
@keyframes edarm{0%{transform:rotate(150deg)}4%,20%{transform:rotate(0deg)}24%,100%{transform:rotate(150deg)}}
/* where everyone is */
.edwho{position:absolute;left:1vw;right:1vw;top:6.5vh;z-index:2;display:flex;flex-wrap:wrap;gap:.5vw;pointer-events:none}
.edr2.club .edwho,.edr2.boud .edwho{justify-content:flex-end}
.edwho span{display:flex;flex-direction:column;align-items:center;gap:2px;animation:edwhoin .4s cubic-bezier(.3,1.5,.5,1) both}
.edwho .char{width:5.2vh;height:5.2vh;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.6)}
.edwho em{font-style:normal;font-weight:900;font-size:clamp(.55rem,.8vw,.8rem);background:rgba(10,6,24,.8);color:#fff;padding:0 .4em;border-radius:6px;white-space:nowrap}
.edwho.hall{position:static;justify-content:center;max-width:22vw}
.edwho.hall .char{width:3.6vh;height:3.6vh}
@keyframes edwhoin{from{transform:scale(.3);opacity:0}}
/* the intro: the rows of cards much smaller, at the bottom */
.clueov.intro .clrows{left:35vw;right:27vw;top:37vh;bottom:auto;gap:.7vh}
.clueov.intro .clcard{height:5.2vh;border-radius:7px}
.clueov.intro .clcard span{font-size:2.2vh}
.clueov.intro .clcard b{font-size:clamp(.45rem,.62vw,.62rem)}
.clueov.intro .cllab{width:6vw;font-size:clamp(.55rem,.75vw,.75rem)}
#qopts.gamecards .gsub{display:none}

/* Edgar: the guests hide behind the open fridge door; the boudoir visitors walk behind the screen, the rack and the big plant */
@keyframes edsit{0%,4%{transform:translateX(var(--from))}12%,26%{transform:translateX(0)}35%,63%{transform:translateX(var(--fr))}79%,100%{transform:translateX(var(--from))}}
.edr2 .edfopen{opacity:0;animation:edfopen 30s linear infinite backwards}
@keyframes edfopen{0%,33%{opacity:0}34%,64%{opacity:1}65%,100%{opacity:0}}
.edr2 .edfdoor{transform-box:view-box;transform-origin:198px 270px;animation:edfdoor 30s linear infinite backwards}
@keyframes edfdoor{0%,33%{opacity:0;transform:scaleX(.1)}33.5%{opacity:1;transform:scaleX(.1)}35%,62.5%{opacity:1;transform:scaleX(1)}64%{opacity:1;transform:scaleX(.1)}64.5%,100%{opacity:0;transform:scaleX(.1)}}
.edr2 .edwk2{opacity:1;animation:edwk3 30s linear infinite backwards}
@keyframes edwk3{0%{transform:translateX(175px)}8%,16%{transform:translateX(0)}24%,32%{transform:translateX(-160px)}40%,55%{transform:translateX(-395px)}63%,68%{transform:translateX(-160px)}76%{transform:translateX(0)}84%,100%{transform:translateX(175px)}}
/* the players' avatars walking from room to room */
.edtoks{position:absolute;inset:0;z-index:4;pointer-events:none}
.edtok{position:absolute;transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;gap:2px;transition:left 1.8s ease-in-out,top 1.8s ease-in-out}
.edtok .char{width:5.4vh;height:5.4vh;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.6);animation:edtokbob .5s ease-in-out infinite alternate}
.edtok em{font-style:normal;font-weight:900;font-size:clamp(.55rem,.8vw,.8rem);background:rgba(10,6,24,.82);color:#fff;padding:0 .45em;border-radius:6px;white-space:nowrap}
.edtok .edglass{position:absolute;right:-1.4vh;top:-1.2vh;font-size:2.8vh;opacity:0;transition:opacity .4s;z-index:2}
.edtok.srch .edglass{opacity:1;animation:edglass 1.6s ease-in-out infinite}
.edtok.srch .char{animation:none}
@keyframes edtokbob{to{transform:translateY(-3px)}}
@keyframes edglass{0%{transform:translate(0,0) rotate(-10deg)}25%{transform:translate(4px,-3px) rotate(8deg)}50%{transform:translate(0,3px) rotate(-4deg)}75%{transform:translate(-4px,-2px) rotate(10deg)}100%{transform:translate(0,0) rotate(-10deg)}}
/* Edgar: the rooms a little smaller than the screen, with room for the avatars above and below */
.edov2{display:grid;grid-template-columns:repeat(2,min(calc(40.5vh * 16 / 9),calc(49vw - 3px)));grid-template-rows:repeat(2,min(40.5vh,calc((49vw - 3px) * 9 / 16)));justify-content:center;align-content:center;gap:6px;background:radial-gradient(ellipse at center,#2a1450,#0d0820 70%)}
.edov2 .edr2{border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.6)}
.edtok .char{width:5vh;height:5vh}
/* Edgar's intro: three face-down cards (WHO? WHERE? INSIDE WHAT?) instead of all the rows; an example clue lands on WHO */
.clueov .clmyst{display:none}
.clueov.intro .clmyst{position:absolute;left:50%;top:56vh;transform:translateX(-50%);z-index:3;display:flex;gap:2.4vh}
.clueov.intro .clmyst>div{position:relative;width:15vh;height:20vh;border-radius:14px;background:repeating-linear-gradient(45deg,#3a1d7a 0 10px,#331a6c 10px 20px);box-shadow:0 0 0 4px #ffd23f,0 10px 30px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6vh;animation:clmyst .8s cubic-bezier(.3,1.4,.5,1) both}
.clueov.intro .clmyst>div:nth-child(2){animation-delay:.15s}.clueov.intro .clmyst>div:nth-child(3){animation-delay:.3s}
.clueov.intro .clmyst b{font-size:9vh;line-height:1;color:#ffd23f;text-shadow:0 0 18px rgba(255,210,63,.7)}
.clueov.intro .clmyst span{font-weight:900;font-size:clamp(.7rem,1.2vw,1.2rem);color:#fff;letter-spacing:.06em;text-align:center}
@keyframes clmyst{from{transform:rotateY(90deg) scale(.6);opacity:0}}
.clueov.intro.story .clmyst{top:56vh}
.clueov .clnote{position:absolute;left:50%;bottom:-2.4vh;transform:translateX(-50%) rotate(-6deg);white-space:nowrap;font-style:normal;font-weight:900;font-size:clamp(.65rem,1vw,1rem);background:#ffe86a;color:#2b1830;padding:.5vh .8vw;border-radius:4px;box-shadow:0 6px 14px rgba(0,0,0,.5);opacity:0}
.clueov.example .clnote{animation:clnote .7s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes clnote{from{opacity:0;transform:translate(-50%,-14vh) rotate(-30deg) scale(1.4)}to{opacity:1;transform:translateX(-50%) rotate(-6deg)}}
/* Backstage comes alive: sweeping spotlights, blinking sockets, a nodding roadie, a stagehand with a box */
.edr2 .edsweep{transform-box:view-box;animation:edsweep 5s ease-in-out infinite alternate}
@keyframes edsweep{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.edr2 .edblink{animation:edblink 1.4s ease-in-out infinite}
@keyframes edblink{50%{stroke:#b6ffd4;filter:drop-shadow(0 0 6px #3ddc84)}}
.edr2 .edhead{animation:edhead .6s ease-in-out infinite alternate}
@keyframes edhead{to{transform:translateY(-3px)}}
.edr2 .edcarry{animation:edcarry 22s linear infinite;transform:translateX(900px)}
@keyframes edcarry{0%,40%{transform:translateX(900px)}75%{transform:translateX(-100px)}100%{transform:translateX(-100px)}}
/* Edgar: the lobby next to the four rooms (with the clock): everyone starts there, goes back there between rooms and when done */
.edov2{grid-template-columns:15vw repeat(2,min(calc(40.5vh * 16 / 9),calc(41vw - 3px)));grid-template-rows:repeat(2,min(40.5vh,calc((41vw - 3px) * 9 / 16)))}
.edlob{grid-row:1 / span 2;grid-column:1;display:flex;flex-direction:column;gap:6px;min-height:0}
.edlobhd{display:flex;flex-direction:column;align-items:center;gap:.3vh;padding:.8vh .5vw;border-radius:12px;background:#1a0a30;box-shadow:0 0 0 4px #ffd23f,0 8px 24px rgba(0,0,0,.6)}
.edlobhd span{font-weight:900;font-size:clamp(.6rem,.95vw,1rem);color:#ffd23f;text-align:center;line-height:1.1}
.edlobhd .edclock{box-shadow:none;padding:0;background:none;font-size:clamp(1.3rem,2.6vw,2.6rem)}
.edlobroom{position:relative;flex:1;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(90deg,#7a3a5a 0 18px,#6e3352 18px 36px);box-shadow:0 6px 24px rgba(0,0,0,.6),inset 0 -26% 0 #4a1f34}
.edlobroom::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(#b0306a,#7a1f48);opacity:.55}
.edlobroom>b{position:absolute;left:50%;top:1vh;transform:translateX(-50%);z-index:1;white-space:nowrap;font-weight:900;font-size:clamp(.6rem,.95vw,1rem);letter-spacing:.1em;color:#ffd8a8;background:rgba(10,6,24,.8);padding:.2vh .7vw;border-radius:8px;box-shadow:0 0 0 2px #ffd8a8}
.edlobart{position:absolute;left:0;right:0;bottom:0;width:100%;height:24%;z-index:1}
.edtok.fresh{transition:none}
/* ---------- The Fake Fan ---------- */
.fkov{position:fixed;inset:0;z-index:55;overflow:hidden;font-family:inherit}
.fkbg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#4a1f7a,#1a0a33 60%,#0d0620)}
.fkbg::before{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#2a1050,#160830);box-shadow:0 -4px 30px rgba(180,90,255,.25)}
.fksign{position:absolute;left:50%;top:3vh;transform:translateX(-50%);z-index:2;font-weight:900;font-size:clamp(1.2rem,2.6vw,2.6rem);color:#fff;background:rgba(20,8,40,.85);padding:.3em 1em;border-radius:16px;box-shadow:0 0 0 4px #ffd23f,0 0 30px rgba(255,210,63,.4)}
.fkmid{position:absolute;left:50%;top:15vh;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:1vh}
.fkmid .fkart{width:17vh;height:17vh;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));animation:fkbob 2.4s ease-in-out infinite alternate}
@keyframes fkbob{to{transform:translateY(-1.2vh) rotate(4deg)}}
.fkov[data-st=reveal] .fkart,.fkov[data-st=guess] .fkart,.fkov[data-st=end] .fkart{display:none}
.fksong{display:none;flex-direction:column;align-items:center;gap:.4vh;background:linear-gradient(#fff7e0,#f1e2b8);color:#2a1a00;padding:2vh 3vw;border-radius:16px;box-shadow:0 0 0 5px #ffd23f,0 14px 40px rgba(0,0,0,.6);animation:fksong .7s cubic-bezier(.3,1.5,.5,1) both}
.fksong.on{display:flex}
.fksong b{font-size:clamp(1.1rem,2.4vw,2.4rem);font-weight:900}
.fksong span{font-weight:700;font-size:clamp(.7rem,1.2vw,1.2rem);opacity:.8}
@keyframes fksong{from{transform:rotateX(90deg) scale(.6);opacity:0}}
.fkmsg{position:absolute;left:50%;top:41vh;transform:translateX(-50%);z-index:3;width:80vw;text-align:center;font-weight:900;font-size:clamp(1rem,2vw,2rem);color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.8)}
.fkmsg b{color:#ffd23f}
.fkclock{position:absolute;right:3vw;top:3vh;z-index:3;font-weight:900;font-size:clamp(1.6rem,4vw,4rem);color:#fff;text-shadow:0 0 20px rgba(255,255,255,.4)}
.fkclock.hot{color:#ff4d4d}
.fkrow{position:absolute;left:3vw;right:3vw;bottom:5vh;z-index:3;display:flex;justify-content:center;align-items:flex-end;gap:1.6vw}
.fkpod{position:relative;display:flex;flex-direction:column;align-items:center;width:10vw;max-width:150px;transition:transform .4s,filter .4s}
.fkov.enter .fkpod{animation:fkpod .6s calc(var(--i) * .08s) cubic-bezier(.3,1.4,.5,1) both}
.fkpod .chflag{display:none}
@keyframes fkpod{from{transform:translateY(20vh);opacity:0}}
.fkpod .char{width:8vh;height:8vh;position:relative;z-index:2;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(0,0,0,.6)}
.fkpod .lbod{position:absolute;left:50%;bottom:2.6vh;width:6vh;height:8.4vh;margin-left:-3vh;z-index:1}
.fkpod em{position:relative;z-index:3;margin-top:7vh;font-style:normal;font-weight:900;font-size:clamp(.6rem,1vw,1rem);color:#fff;background:rgba(10,6,24,.85);padding:.1em .6em;border-radius:8px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fkword{position:relative;margin-bottom:1.6vh;min-width:8vw;max-width:12vw;text-align:center;font-weight:900;font-size:clamp(.8rem,1.5vw,1.5rem);background:#fff;color:#2b1830;padding:.5vh .8vw;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.5);overflow-wrap:anywhere}
.fkword.pop{animation:fkword .5s cubic-bezier(.3,1.6,.5,1) both}
.fkword::after{content:'';position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.fkword.empty{visibility:hidden}
.fkword.typing{background:#ffd23f;animation:fktype 1s ease-in-out infinite}
@keyframes fkword{from{transform:scale(.3);opacity:0}}
@keyframes fktype{50%{transform:scale(1.08)}}
.fkpod.now{transform:translateY(-2vh)}
.fkpod.now .char{box-shadow:0 0 0 4px #ffd23f,0 0 26px #ffd23f}
.fkpod.voted .char{box-shadow:0 0 0 4px #3ddc84}
.fkpod.accused{transform:translateY(-3vh) scale(1.08)}
.fkpod.accused .char{box-shadow:0 0 0 5px #ff4d6a,0 0 30px #ff4d6a}
.fkpod.fake .char{box-shadow:0 0 0 5px #b06bff,0 0 36px #b06bff}
.fkvotes{position:absolute;top:-1vh;right:-.6vw;z-index:4;font-style:normal;font-weight:900;font-size:clamp(.6rem,1vw,1rem);background:#ff4d6a;color:#fff;padding:.1em .5em;border-radius:999px}
.fktag{position:absolute;top:40%;z-index:5;font-weight:900;font-size:clamp(.7rem,1.2vw,1.2rem);background:#b06bff;color:#fff;padding:.2em .6em;border-radius:8px;transform:rotate(-8deg);animation:fksong .6s cubic-bezier(.3,1.6,.5,1) both}
.fkpts{position:absolute;top:-4vh;z-index:5;font-weight:900;font-size:clamp(.9rem,1.6vw,1.6rem);color:#ffd23f;text-shadow:0 2px 10px rgba(0,0,0,.8);animation:fksong .6s both}
.fkpod.win .char{box-shadow:0 0 0 5px #ffd23f,0 0 36px #ffd23f}
.fkov.leaving{animation:fadeout .9s forwards}
.hsfake .fkart{width:26vh;height:26vh;animation:fkbob 2.4s ease-in-out infinite alternate}
/* the phone */
.fkui{display:flex;flex-direction:column;gap:12px;width:100%;align-items:center}
.fkcard{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border-radius:18px;background:linear-gradient(#fff7e0,#f1e2b8);color:#2a1a00;box-shadow:0 0 0 4px #ffd23f}
.fkcard small{font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.6;font-size:.7rem}
.fkcard b{font-size:1.4rem;font-weight:900;text-align:center}
.fkcard span{font-weight:700;opacity:.8;text-align:center}
.fkcard.fake{background:linear-gradient(#5a2a9a,#2a1050);color:#fff;box-shadow:0 0 0 4px #b06bff}
.fkcard.wait{background:#2a2050;color:#fff;box-shadow:none}
.fkform{display:flex;gap:8px;width:100%;max-width:360px}
.fkform input{flex:1;font-size:1.3rem;padding:12px;border-radius:12px;border:0;font-family:inherit}
.fkvote{display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px}
.fkvote .opt{display:flex;align-items:center;gap:10px;text-align:left}
.fkvote .opt .char{width:36px;height:36px;flex:none}
.fkvote .opt span{flex:1;font-weight:900}
.fkvote .opt small{opacity:.7;font-weight:700}
.fkvote .opt.picked{box-shadow:0 0 0 3px #ffd23f}
.fksign small{display:block;text-align:center;font-size:.45em;color:#ffd23f;font-weight:800;margin-top:-.1em}
/* Edgar's avatars: no flying across the screen; a pop out and a pop in at the new place */
.edtok{transition:transform .25s ease-in,opacity .25s ease-in}
.edtok.out{transform:translate(-50%,0) scale(.2);opacity:0}
.edtok.in{animation:edtokin .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes edtokin{from{transform:translate(-50%,0) scale(.2);opacity:0}}
.fkguess{font-size:1.6rem;font-weight:900;text-align:center;padding:14px;border-radius:14px;background:#2a2050;width:100%;max-width:360px}
.fkjudge{display:flex;gap:10px;width:100%;max-width:360px}.fkjudge .btn{flex:1}
/* The Fake Fan: a round table in a dark velvet hall, Eurovision style */
.fkbg{background:radial-gradient(ellipse at 50% 35%,#3a1050 0%,#1a0628 55%,#08020f 100%)}
.fkbg::before{display:none}
.fkdrape{position:absolute;top:0;bottom:0;width:16vw;background:repeating-linear-gradient(90deg,#5a0f2e 0 3vw,#3e0820 3vw 6vw);box-shadow:inset -20px 0 40px rgba(0,0,0,.6)}
.fkdrape.l{left:0;border-radius:0 0 60% 0}.fkdrape.r{right:0;transform:scaleX(-1);border-radius:0 0 60% 0}
.fkheart{position:absolute;left:50%;top:5vh;width:34vh;height:30vh;margin-left:-17vh;background:none;filter:drop-shadow(0 0 18px #ff3fa8) drop-shadow(0 0 40px #ff3fa8);opacity:.55;animation:fkhb 2.4s ease-in-out infinite}
.fkheart::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 0);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'><path d='M50 86 C10 58 4 38 4 26 C4 12 15 4 27 4 C37 4 45 10 50 18 C55 10 63 4 73 4 C85 4 96 12 96 26 C96 38 90 58 50 86 Z' fill='none' stroke='black' stroke-width='5'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'><path d='M50 86 C10 58 4 38 4 26 C4 12 15 4 27 4 C37 4 45 10 50 18 C55 10 63 4 73 4 C85 4 96 12 96 26 C96 38 90 58 50 86 Z' fill='none' stroke='black' stroke-width='5'/></svg>") center/contain no-repeat;background:#ff6fd8}
@keyframes fkhb{50%{opacity:.85;transform:scale(1.04)}}
.fkbeam{position:absolute;top:-10vh;width:22vw;height:110vh;background:linear-gradient(rgba(255,111,216,.18),transparent 70%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);animation:fkbeam 6s ease-in-out infinite alternate;transform-origin:50% 0}
.fkbeam.a{left:18vw}.fkbeam.b{right:18vw;animation-delay:-3s;background:linear-gradient(rgba(120,90,255,.18),transparent 70%)}
@keyframes fkbeam{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.fktable{position:absolute;left:50%;top:63vh;width:82vw;height:34vh;margin-left:-41vw;z-index:15}
.fktop{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#7a1a3e,#4a0c24 60%,#2a0614);box-shadow:0 0 0 1.2vh #c8963a,0 0 0 1.6vh #6a4a1a,0 3vh 6vh rgba(0,0,0,.8),inset 0 0 6vh rgba(0,0,0,.6)}
.fkemb{position:absolute;left:50%;top:50%;width:14vh;height:14vh;transform:translate(-50%,-50%);filter:drop-shadow(0 0 20px rgba(255,210,63,.6))}
.fkemb .fkart{width:100%;height:100%}
.fkov[data-st=reveal] .fkemb,.fkov[data-st=judge] .fkemb,.fkov[data-st=end] .fkemb{opacity:.35}
.fkcandle{position:absolute;width:1.4vh;height:4vh;border-radius:3px;background:linear-gradient(#fff4e0,#e8d2b0);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.fkcandle b{position:absolute;left:50%;top:-2.6vh;width:1.6vh;height:2.6vh;margin-left:-.8vh;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 70%,#fff8c0,#ffb030 50%,#ff4d6d 80%,transparent 82%);filter:drop-shadow(0 0 8px #ffb030);animation:fkflame .3s ease-in-out infinite alternate}
@keyframes fkflame{to{transform:scale(.9,1.1) rotate(4deg)}}
.fkcandle.c0{left:16%;top:42%}.fkcandle.c1{left:28%;top:20%}.fkcandle.c2{left:70%;top:20%}.fkcandle.c3{left:82%;top:42%}.fkcandle.c4{left:30%;top:66%}.fkcandle.c5{left:68%;top:66%}
/* the players around the far side of the table, each in a high-backed chair */
.fkrow{position:absolute;inset:0;display:block;z-index:10}
.fkpod{position:absolute;width:12vh;max-width:none;transform:translate(-50%,-100%) scale(var(--s,1));transform-origin:50% 100%}
.fkpod.now{transform:translate(-50%,-100%) scale(var(--s,1)) translateY(-1.5vh)}
.fkpod.accused{transform:translate(-50%,-100%) scale(calc(var(--s,1) * 1.08)) translateY(-2vh)}
.fkchair{position:absolute;left:50%;bottom:-1vh;width:13vh;height:22vh;margin-left:-6.5vh;z-index:0;border-radius:6vh 6vh 1vh 1vh;background:linear-gradient(#4a0c24,#2a0614);box-shadow:inset 0 0 0 .6vh #c8963a,0 1vh 2vh rgba(0,0,0,.6)}
.fkchair::before{content:'';position:absolute;left:50%;top:1.2vh;width:3vh;height:3vh;margin-left:-1.5vh;background:#c8963a;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.fkpod .char,.fkpod .lbod,.fkpod em,.fkword{z-index:2}
.fkpod em{margin-top:6vh}
.fkmid{top:16vh;z-index:30}
.fkmsg{top:auto;bottom:4vh;z-index:30;width:86vw}
.fksign{z-index:31}
.fkclock{z-index:31}
.fkov.enter .fkpod{animation:fkpod2 .6s calc(var(--i) * .08s) cubic-bezier(.3,1.4,.5,1) both}
@keyframes fkpod2{from{opacity:0;transform:translate(-50%,-100%) scale(var(--s,1)) translateY(6vh)}}
/* The Fake Fan: real chairs, and a painting on the wall */
.fkchair{position:absolute;left:50%;bottom:-6vh;width:15vh;height:25vh;margin-left:-7.5vh;z-index:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 1vh 1.5vh rgba(0,0,0,.6))}
.fkchair::before{display:none}
.fkpaint{position:absolute;left:19vw;top:15vh;width:15vh;height:auto;transform:rotate(-2deg);filter:drop-shadow(0 1.2vh 2vh rgba(0,0,0,.7));z-index:1}

/* Edgar: wrong answer lock, who-sits-where, dress them up */
.edlock{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 16px;border-radius:18px;background:#4a1630;box-shadow:0 0 0 3px #ff4d6d;width:100%;animation:edshake .4s}
.edlock span{font-size:2.6rem}.edlock b{font-size:1.5rem;font-weight:900;color:#ff8fa3}.edlock small{opacity:.8;font-weight:700}.edlock em{font-style:normal;font-size:3rem;font-weight:900}
@keyframes edshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.edmini{width:100%;height:100%;display:block}
.edchairs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}
.edch{position:relative;height:96px;border:0;border-radius:12px;background:#2a2050;cursor:pointer;padding:4px}
.edch>i{position:absolute;left:12%;right:12%;bottom:8px;height:44px;border-radius:14px 14px 6px 6px;box-shadow:0 0 0 2px #fff}
.edch .edmini{position:absolute;left:10%;width:80%;height:76px;bottom:16px}
.edguests{display:flex;justify-content:center;gap:10px;width:100%}
.edgu{width:70px;height:96px;border:0;border-radius:14px;background:#2a2050;padding:6px;cursor:pointer}
.edgu.sel{box-shadow:0 0 0 4px #b06bff}.edgu.used{opacity:.3}
.edlooks{display:flex;flex-direction:column;gap:8px;width:100%}
.edlk{display:flex;gap:10px;align-items:center;background:#2a2050;border-radius:14px;padding:8px}
.edlkf{width:68px;flex:none;display:flex;flex-direction:column;align-items:center;gap:2px}.edlkf .edmini{height:74px}.edlkf small{font-size:.62rem;font-weight:800;text-align:center;opacity:.85;line-height:1.1}
.edlkc{display:flex;flex-direction:column;gap:8px;flex:1}.edlkc>div{display:flex;flex-wrap:wrap;gap:6px}
.edsw{width:30px;height:30px;border:0;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.5);cursor:pointer}
.edsw:not(.hair){border-radius:6px}.edsw.on{box-shadow:0 0 0 3px #fff,0 0 0 6px #b06bff}
/* Edgar intro: the three questions turn up one by one */
.clueov.intro .clmyst>div{display:none;animation-delay:0s}
.clueov.intro.m1 .clmyst>div:nth-child(1),.clueov.intro.m2 .clmyst>div:nth-child(2),.clueov.intro.m3 .clmyst>div:nth-child(3){display:flex}
/* Edgar briefing: the four rooms dark, the hosts in front, one room lit at a time */
.edov2 .edbrhosts,.edov2 .edbrbub{display:none}
.edov2.edbrief .edbrhosts{display:block;position:absolute;inset:0;z-index:30;pointer-events:none}
.edov2.edbrief .edbrhosts .ehost{position:absolute;bottom:0;height:52vh;width:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.8));animation:ehbob 3.2s ease-in-out infinite alternate;transition:translate .9s cubic-bezier(.5,0,.7,.4),opacity .9s}
.edov2.edbrief .edbrhosts .him{left:3vw}.edov2.edbrief .edbrhosts .her{right:3vw;animation-delay:-1.6s}
.edov2.edbrief .edbrbub{display:block;position:absolute;bottom:50vh;max-width:30vw;z-index:31;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.25;padding:.65em 1em;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.6);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.edov2.edbrief .edbrbub.him{left:6vw;border-bottom-left-radius:4px;transform-origin:0 100%}.edov2.edbrief .edbrbub.her{right:6vw;border-bottom-right-radius:4px;transform-origin:100% 100%}
.edov2.edbrief .edbrbub.on{opacity:1;transform:none}.edov2 .edbrbub .unsaid{visibility:hidden}
.edov2.edbrief .edr2{transition:filter .6s,transform .6s,box-shadow .6s;filter:brightness(.18) saturate(.4)}
.edov2.edbrief[data-lit="green"] .edr2.green,.edov2.edbrief[data-lit="club"] .edr2.club,.edov2.edbrief[data-lit="back"] .edr2.back,.edov2.edbrief[data-lit="boud"] .edr2.boud{filter:none;transform:scale(1.04);z-index:5;box-shadow:0 0 0 4px #ffd23f,0 0 40px rgba(255,210,63,.6)}
.edov2.edbrief[data-lit="all"] .edr2,.edov2.go .edr2{filter:none}
.edov2.go .edbrhosts .ehost{translate:0 60vh;opacity:0}.edov2.go .edbrbub{opacity:0!important}
/* Green Room: one guest sits down every 20 seconds (a 60 s round for the three of them) */
.edr2 .edsit{animation-duration:60s!important}.edr2 .edsit .edst,.edr2 .edsit .edsi{animation-duration:60s!important}
.edr2 .edfopen,.edr2 .edfdoor{animation-duration:60s!important}
@keyframes edsit{0%,2%{transform:translateX(var(--from))}6%,13%{transform:translateX(0)}17.5%,31.5%{transform:translateX(var(--fr))}39.5%,100%{transform:translateX(var(--from))}}
@keyframes edstand{0%,6%{opacity:1}6.25%,12.75%{opacity:0}13%,100%{opacity:1}}
@keyframes edseat{0%,6%{opacity:0}6.25%,12.75%{opacity:1}13%,100%{opacity:0}}
@keyframes edfopen{0%,16.5%{opacity:0}17%,32%{opacity:1}32.5%,100%{opacity:0}}
@keyframes edfdoor{0%,16.5%{opacity:0;transform:scaleX(.1)}16.75%{opacity:1;transform:scaleX(.1)}17.5%,31.25%{opacity:1;transform:scaleX(1)}32%{opacity:1;transform:scaleX(.1)}32.25%,100%{opacity:0;transform:scaleX(.1)}}

/* Key Change!: the Ready button and the 3-2-1 cover the whole lyrics box */
.slyover #srecbtn:not(.live){position:absolute;inset:0;width:100%;height:100%;border-radius:18px;font-size:2.2rem;padding:0;margin:0}
.slyover #scount.counting:not(.live){position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:18px;font-size:9rem;box-shadow:none}
#v-sing .hidden{display:none!important}

.mypicprev{display:flex;align-items:center;justify-content:center;gap:12px;font-weight:900}
.mypicprev img{width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--yellow)}
#nopic{font-size:.95rem}

/* Edgar: the guests in the Green Room wander out more often (still sitting down once every 20 seconds) */
@keyframes edsit{0%,2%{transform:translateX(var(--from))}6%,13%{transform:translateX(0)}17.5%,31.5%{transform:translateX(var(--fr))}39.5%,46%{transform:translateX(var(--from))}51%,57%{transform:translateX(var(--mid))}62%,72%{transform:translateX(var(--from))}76%,83%{transform:translateX(var(--mid2))}87%,100%{transform:translateX(var(--from))}}
/* Edgar: the countdown before the search */
.edov2.cd .edbrhosts .ehost{translate:0 60vh;opacity:0}
.edcd{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(10,4,30,.35)}
.edcd b{font-size:32vh;font-weight:900;color:#ffd23f;text-shadow:0 0 40px rgba(255,210,63,.8),0 10px 0 #2b1830;animation:edcdpop 1s ease-out both}
@keyframes edcdpop{0%{transform:scale(2.2);opacity:0}25%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(.85);opacity:0}}
/* We Will Rule the World, stunned: the pad greys out but still works; your chosen arrow stays lit (in grey) and you set off again by yourself when the stun ends */
.rupad.stun .rub{opacity:1;filter:grayscale(1) brightness(.6)}
.rupad.stun .rub.on{filter:grayscale(1) brightness(1.05);animation:none;box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 0 5px #d0d0d8,0 0 18px 6px rgba(220,220,230,.6)}
/* the fridge's left door swings open on its hinge, on the left */
.edr2 .edfdoor{transform-origin:24px 270px}
.edov2.leaving{z-index:57}
/* Edgar's story: the speech balloons close to the presenters */
.clueov.intro .grbub{top:auto;bottom:50vh}
.clueov.story .grbub.him{left:21vw}.clueov.story .grbub.her{right:21vw}

/* Edgar's accusation on the phone: a timer bar on top, every card on one screen */
.clueui.acc{gap:5px;margin-top:0}
.clacctop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 12px;border-radius:12px;background:rgba(255,255,255,.08);font-weight:900}
.clacctop span{font-size:.95rem}.clacct{font-size:1.3rem;color:var(--yellow);font-variant-numeric:tabular-nums}.clacct.hot{color:#ff6b6b}
.claccbar{position:absolute;left:10px;right:10px;bottom:4px;height:5px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden}
.claccbar em{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5fa8,#ffd23f);transition:width .25s linear}
.clueui.acc .clset>div{grid-template-columns:repeat(3,1fr);gap:4px}
.clueui.acc .clbtn{flex-direction:column;justify-content:center;text-align:center;gap:1px;padding:4px 3px;font-size:.72rem;line-height:1.1;min-height:44px}
.clueui.acc .clbtn i{font-size:1.05rem}
.clueui.acc #clueaccuse{padding:.55em 1em;margin-top:2px}

/* Edgar's accusation: the timer bar under the cards (after "Time for you to solve it!") */
.clacbar{position:relative;height:2.6vh;border-radius:99px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px rgba(255,210,63,.4);overflow:hidden;opacity:0;transform:scaleX(.2);transition:opacity .5s,transform .6s cubic-bezier(.3,1.4,.5,1);margin-top:.6vh}
.clacbar.on{opacity:1;transform:none}
.clacbar em{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,#ff5fa8,#ffd23f);transition:width 1s linear}
.clacbar.hot em{background:linear-gradient(90deg,#ff3b3b,#ff8a2a)}
.clacbar b{position:absolute;right:1vw;top:50%;translate:0 -50%;font-weight:900;font-size:1.8vh;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.clueov[data-st="acc"] .grbub{top:auto;bottom:13vh;max-width:28vw}
.clueov[data-st="acc"] .grbub.him{left:13vw}.clueov[data-st="acc"] .grbub.her{right:13vw}
/* Zero Gravity in space: a purple nebula, the planet's curve at the bottom with a glowing edge */
.zgov .zgplanet{display:none}
.zgneb{position:absolute;inset:0;background:radial-gradient(ellipse 55% 45% at 22% 40%,rgba(200,90,255,.55),transparent 70%),radial-gradient(ellipse 40% 35% at 35% 28%,rgba(255,120,220,.35),transparent 70%),radial-gradient(ellipse 45% 40% at 70% 30%,rgba(120,80,255,.35),transparent 70%),radial-gradient(ellipse 30% 25% at 80% 55%,rgba(80,160,255,.25),transparent 70%);filter:blur(8px);animation:zgneb 18s ease-in-out infinite alternate}
@keyframes zgneb{to{transform:scale(1.08) translate(1.5vw,-1vh);opacity:.85}}
.zgearth{position:absolute;left:-45vw;right:-45vw;top:74vh;height:190vw;border-radius:50%;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 18% 6% at 40% 3%,rgba(255,255,255,.7),transparent 70%),radial-gradient(ellipse 12% 4% at 62% 5%,rgba(255,255,255,.55),transparent 70%),radial-gradient(ellipse 10% 3% at 28% 7%,rgba(90,170,90,.8),transparent 70%),radial-gradient(ellipse 14% 4% at 55% 9%,rgba(80,150,80,.7),transparent 70%),radial-gradient(ellipse 60% 20% at 50% 0%,#3f8be0,#1d4fa8 40%,#0b2050 70%);
  box-shadow:0 -6px 18px 4px rgba(150,230,255,.9),0 -24px 60px 18px rgba(140,90,255,.65),0 -50px 120px 40px rgba(200,100,255,.35)}
.zgatmo{position:absolute;left:0;right:0;top:-3vh;height:12vh;border-radius:50% 50% 0 0/100% 100% 0 0;background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(190,140,255,.0) 60%,rgba(190,140,255,.45) 80%,transparent 100%);filter:blur(10px);animation:zgatmo 5s ease-in-out infinite alternate}
@keyframes zgatmo{to{opacity:.6;transform:scaleY(1.2)}}
/* the singer and the players rise from behind the planet */
.zgov .zgmid,.zgov .zgp{transition:translate 3.2s cubic-bezier(.2,.8,.3,1)}
.zgov.intro .zgmid{translate:0 70vh}.zgov.intro .zgp{translate:0 70vh}
.zgov.intro.rise .zgmid{translate:0 0}
.zgov.intro.rise2 .zgp{translate:0 0}
.zgov.intro.rise2 .zgp:nth-child(odd){transition-delay:.25s}.zgov.intro.rise2 .zgp:nth-child(3n){transition-delay:.5s}
/* the astronaut presenters */
.zghosts{position:absolute;inset:0;z-index:6;pointer-events:none}
.zgastro{position:absolute;bottom:14vh;height:52vh;width:auto;filter:drop-shadow(0 10px 30px rgba(120,60,255,.5));opacity:0;transition:translate 1.6s cubic-bezier(.2,.8,.3,1),opacity 1s}
.zgastro.him{left:6vw;translate:-40vw 10vh;rotate:-8deg}.zgastro.her{right:6vw;translate:40vw -10vh;rotate:8deg}
.zgov.hosts .zgastro{opacity:1;translate:0 0;animation:zgfloat 4.5s ease-in-out infinite alternate}.zgov.hosts .zgastro.her{animation-delay:-2.2s}
.zgov.hostsoff .zgastro{opacity:0;translate:0 -80vh;transition:translate 2.4s ease-in,opacity 2.4s}
@keyframes zgfloat{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-3vh) rotate(4deg)}}
.zgbub{position:absolute;top:12vh;max-width:30vw;z-index:7;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.25;padding:.65em 1em;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.zgbub.him{left:12vw;border-bottom-left-radius:4px;transform-origin:0 100%}.zgbub.her{right:12vw;border-bottom-right-radius:4px;transform-origin:100% 100%}
.zgbub.on{opacity:1;transform:none}.zgbub .unsaid{visibility:hidden}
.zgov.hostsoff .zgbub{opacity:0!important}
.zgov[data-st="intro"] .zgclock{display:none}
.zgov .zgmsg,.zgov .zgboard,.zgov .zgclock{z-index:8}

/* Edgar's accusation on the phone: nothing above the timer bar, everything moved up */
#v-wait.accmode{justify-content:flex-start;padding-top:0;gap:0;margin-top:-28px}
#v-wait.accmode #waitlabel,#v-wait.accmode #waittitle,#v-wait.accmode #waitsub{display:none}
.clueui.acc .clbtn{min-height:56px;font-size:.8rem}.clueui.acc .clbtn i{font-size:1.25rem}
.clueui.acc .clacctop{padding:10px 12px 14px}

.clueov.leaving{z-index:57}

/* Edgar: your accusation, after sending it */
.clsent{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:6px}
.clsentc{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(255,210,63,.22),rgba(255,95,168,.15));box-shadow:inset 0 0 0 2px rgba(255,210,63,.6);animation:clsentin .5s cubic-bezier(.3,1.5,.5,1) both}
.clsentc:nth-child(2){animation-delay:.12s}.clsentc:nth-child(3){animation-delay:.24s}
.clsentc small{grid-column:2;font-weight:800;color:var(--yellow);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.clsentc i{grid-row:1/3;font-style:normal;font-size:2rem}
.clsentc b{grid-column:2;font-size:1.15rem;font-weight:900}
@keyframes clsentin{from{opacity:0;transform:scale(.7)}}

/* Zero Gravity: the singer sings (her mouth) and waves her arms all the time; only the flag in the hand */
.zgsing .zgmouth{transform-box:fill-box;transform-origin:50% 50%;animation:zgmouth .45s ease-in-out infinite alternate}
@keyframes zgmouth{from{transform:scale(.8,.45)}to{transform:scale(1.15,1.35)}}
.zgsing .zgarm{transform-box:view-box;animation:zgwave 1.8s ease-in-out infinite alternate}
.zgsing .zgarm.l{transform-origin:82px 132px}.zgsing .zgarm.r{transform-origin:118px 132px;animation-delay:-.9s}
@keyframes zgwave{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
.zgov[data-st="play"] .zgmouth{animation:zgmouth .4s ease-in-out infinite alternate}
.zgp .chflag{display:none}

/* Zero Gravity: the breaks and the announcements */
.zgbrk{position:absolute;left:50%;top:30vh;translate:-50% 0;z-index:9;display:flex;flex-direction:column;align-items:center;gap:1vh;padding:2.4vh 3vw;border-radius:24px;background:rgba(20,10,50,.82);box-shadow:0 0 0 3px #b06bff,0 0 50px rgba(176,107,255,.6);opacity:0;scale:.6;transition:opacity .4s,scale .5s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.zgbrk.on{opacity:1;scale:1}
.zgbrk b{font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#fff}.zgbrk small{font-weight:800;font-size:clamp(.9rem,1.5vw,1.3rem);color:#d9c8ff}
.zgbrk i{display:block;width:30vw;height:2.4vh;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}.zgbrk em{display:block;height:100%;width:0;background:linear-gradient(90deg,#7ab8ff,#b06bff,#ff5fa8)}
.zgann{position:absolute;left:50%;top:30vh;translate:-50% 0;z-index:9;max-width:70vw;text-align:center;font-weight:900;font-size:clamp(1.6rem,3.6vw,3.2rem);color:#fff;text-shadow:0 0 24px #b06bff,0 4px 0 #2b1830;opacity:0;pointer-events:none}
.zgann b{color:#ffd23f}
.zgann.on{animation:zgann 4s ease-out both}
@keyframes zgann{0%{opacity:0;scale:2}10%{opacity:1;scale:1}85%{opacity:1;scale:1}100%{opacity:0;scale:.9}}
.zgtrack.brk .zgzone{background:rgba(122,184,255,.35)!important;box-shadow:none!important}

/* Zero Gravity: her mouth stays on her face (closed until 0:09, then singing) */
.zgov .zgsing .zgmouth,.zgov[data-st="play"] .zgsing .zgmouth{transform-box:fill-box;transform-origin:50% 50%;animation:none;transform:scale(.9,.32)}
.zgov.sing .zgsing .zgmouth,.zgov.sing[data-st="play"] .zgsing .zgmouth{animation:zgmouth .42s ease-in-out infinite alternate}
.zgbrk,.zgann{top:50vh}

/* Zero Gravity: a gentler singing mouth */
@keyframes zgmouth{from{transform:scale(.85,.4)}to{transform:scale(1,.85)}}
/* Zero Gravity: the control area on the phone is a square play field (left/right for the zone, up/down for the asteroids) */
.zgtrack{border-radius:26px}

/* Sja-la-lie: between the phases, a big "tasks swapped" message in front of the organ */
.orswap{position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:.8vh;padding:3vh 4vw;border-radius:28px;background:linear-gradient(135deg,#ff5fa8,#ffd23f);color:#2b1830;box-shadow:0 0 0 6px #fff,0 20px 60px rgba(0,0,0,.6);text-align:center;opacity:0;scale:.3;rotate:-8deg;pointer-events:none;transition:opacity .35s,scale .55s cubic-bezier(.3,1.6,.5,1),rotate .55s cubic-bezier(.3,1.6,.5,1)}
.orswap.on{opacity:1;scale:1;rotate:-2deg;animation:orswapw 1.2s .6s ease-in-out infinite alternate}
.orswap b{font-size:clamp(3rem,7vw,6rem);font-weight:900;line-height:1}
.orswap span{font-size:clamp(1.4rem,2.8vw,2.4rem);font-weight:900}
.orswap small{font-size:clamp(.9rem,1.5vw,1.3rem);font-weight:800;opacity:.8}
@keyframes orswapw{from{rotate:-2deg;scale:1}to{rotate:2deg;scale:1.04}}
.zgbrk strong{font-weight:900;font-size:clamp(1rem,1.9vw,1.6rem);color:#ffd23f;text-align:center;max-width:44vw}.zgbrk strong:empty{display:none}

/* Green Room: the flag held up in a hand */
.grov .grarm{position:absolute;left:62%;bottom:9.8vh;width:2.3vh;height:6vh;border-radius:1.2vh;transform-origin:50% 100%;rotate:24deg;z-index:3;box-shadow:inset -2px -3px 4px rgba(0,0,0,.2)}
.grov .grarm b{position:absolute;left:50%;top:-1vh;width:2.6vh;height:2.6vh;margin-left:-1.3vh;border-radius:50%;background:#f2c8a6;box-shadow:0 1px 3px rgba(0,0,0,.35);z-index:4}
.grov .grflag{left:79%;bottom:13.6vh;height:10vh;z-index:2}

/* Disqualivision: a typing bubble under the avatars of those still writing */
.answered .typing{position:absolute;left:50%;top:44px;translate:-50% 0;display:flex;gap:4px;padding:5px 8px;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:2}
.answered .typing b{width:6px;height:6px;border-radius:50%;background:#6a6f86;animation:typdot 1s ease-in-out infinite}
.answered .typing b:nth-child(2){animation-delay:.15s}.answered .typing b:nth-child(3){animation-delay:.3s}
@keyframes typdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* the vote on the slot machine: four games lit up, the rest dimmed */
.slcell.hi{box-shadow:0 0 0 4px #fff,0 0 30px rgba(255,255,255,.6);filter:none;opacity:1}
.slotov.voting .slcell.hi{animation:slhi 1.2s ease-in-out infinite alternate}
@keyframes slhi{to{box-shadow:0 0 0 5px #ffd23f,0 0 40px rgba(255,210,63,.8)}}
.slcell .slv{font-style:normal;font-weight:900;font-size:clamp(1rem,1.8vw,1.6rem);color:#ffd23f;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.slcell .slv:empty{display:none}
.slsub{font-weight:900;font-size:clamp(1.1rem,2vw,1.8rem);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);min-height:1.4em}

/* Party Night: how many party games */
.pcount{display:flex;gap:4px;margin-bottom:4px;flex-wrap:wrap}
.pcount i{font-style:normal;font-weight:800;font-size:.75rem;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line);color:var(--mute)}
.pcount i.on{background:var(--yellow);color:#221a00;box-shadow:none}

/* Sja-la-lie: the fourth station, the fire */
.orsta{width:22.5vw!important}
.orsta.fx{left:1.5vw!important}.orsta.pitch{left:26vw!important}.orsta.fire{left:50.5vw!important;right:auto!important}.orsta.speed{right:1.5vw!important;left:auto!important}
.orfire{position:absolute;left:24vw;right:24vw;top:30vh;height:44vh;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s}
.orov.onfire .orfire{opacity:1}
.orfire i{position:absolute;bottom:0;width:9vh;height:13vh;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 80%,#fff6a0 0%,#ffcf3a 25%,#ff7a1a 55%,rgba(255,60,0,0) 75%);filter:blur(1px);transform-origin:50% 100%;animation:orflame .5s ease-in-out infinite alternate}
.orfire i:nth-child(1){left:2%;bottom:6%}.orfire i:nth-child(2){left:24%;bottom:30%;animation-delay:-.2s;scale:1.3}.orfire i:nth-child(3){left:33%;bottom:52%;animation-delay:-.35s;scale:1.1}.orfire i:nth-child(4){left:68%;bottom:34%;animation-delay:-.1s}.orfire i:nth-child(5){left:88%;bottom:8%;animation-delay:-.4s;scale:1.2}
@keyframes orflame{from{transform:scaleY(.85) skewX(-4deg)}to{transform:scaleY(1.15) skewX(5deg)}}
/* the phone: tap out the flames */
.orfirepz{position:relative;width:100%;height:46vh;max-height:360px;border-radius:18px;background:radial-gradient(ellipse at 50% 100%,#5a1a08,#1a0804 70%);overflow:hidden;touch-action:none}
.orfl{position:absolute;translate:-50% -50%;width:74px;height:74px;border:0;border-radius:50%;background:radial-gradient(circle,rgba(255,140,40,.35),transparent 70%);cursor:pointer;touch-action:none;--k:1}
.orfl span{display:block;font-size:52px;line-height:1;transform:scale(calc(.4 + .6 * var(--k)));transition:transform .15s;animation:orfl .4s ease-in-out infinite alternate}
@keyframes orfl{to{rotate:6deg}}
.orfl.spray::after{content:'💦';position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:36px;animation:orspray .35s ease-out forwards}
@keyframes orspray{from{opacity:1;scale:.6}to{opacity:0;scale:1.6}}
.orfl.out{pointer-events:none}.orfl.out span{transform:scale(.01);opacity:0}
.orfl.out::before{content:'💨';position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:40px;animation:orspray 1s ease-out forwards}

/* Sja-la-lie: five stations in a row; the fifth, security, with stage invaders */
.orsta{width:18.6vw!important;padding:.8vh .7vw}
.orsta.fx{left:1vw!important}.orsta.pitch{left:20.6vw!important}.orsta.fire{left:40.2vw!important}.orsta.sec{left:59.8vw!important;right:auto!important}.orsta.speed{right:1vw!important;left:auto!important}
.orsta .orst{font-size:clamp(.75rem,1.15vw,1.05rem)}
.orinv{position:absolute;left:0;right:0;bottom:8vh;height:20vh;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s}
.orov.invaded .orinv{opacity:1}
.orinv i{position:absolute;bottom:0;font-style:normal;font-size:12vh;animation:orinvd .45s ease-in-out infinite alternate}
.orinv i:nth-child(1){left:22%}.orinv i:nth-child(2){left:62%;animation-delay:-.2s}.orinv i:nth-child(3){left:74%;animation-delay:-.3s;font-size:10vh}
@keyframes orinvd{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-2.5vh) rotate(8deg)}}
/* the phone: the stage, the singer in the middle, invaders running in */
.orsecpz{position:relative;width:100%;height:46vh;max-height:360px;border-radius:18px;background:linear-gradient(#2a1450,#120724 60%,#3a2a10);overflow:hidden;touch-action:none}
.orsecst{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:44px;filter:drop-shadow(0 0 12px #ffd23f)}
.oriv{position:absolute;width:62px;height:62px;margin-top:-31px;border:0;background:radial-gradient(circle,rgba(255,77,77,.35),transparent 70%);border-radius:50%;font-size:44px;line-height:62px;padding:0;cursor:pointer;touch-action:none;animation:orivl var(--d) linear var(--dl) infinite both}
.oriv.r{animation-name:orivr}
@keyframes orivl{from{left:-60px}to{left:calc(50% - 50px)}}
@keyframes orivr{from{left:calc(100% + 0px)}to{left:calc(50% - 12px)}}
.oriv.out{animation:orivout .6s ease-in forwards;pointer-events:none}
@keyframes orivout{to{transform:translateY(-60vh) rotate(720deg);opacity:0}}
.oriv.reach{filter:drop-shadow(0 0 10px #ff4d4d)}

/* Sja-la-lie: a stage invader pokes her head out from behind the organ */
.orpeek{position:absolute;right:-2%;top:6%;width:24%;z-index:-1;translate:-60% 30%;rotate:0deg;transition:translate .5s cubic-bezier(.3,1.4,.5,1),rotate .5s}
.orpeek svg{width:100%;display:block}
.orov.invaded .orpeek{translate:26% 4%;rotate:16deg;animation:orpeek 1.6s ease-in-out .5s infinite alternate}
@keyframes orpeek{from{rotate:14deg}to{rotate:6deg}}
.rugrid > i.ruitem::after{content:'⚡';display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2.4vh;font-style:normal;animation:uthot .4s ease-in-out infinite alternate}
/* Sja-la-lie: the fire is on the dancing dolls; a splash of water when it's out */
.orfire{display:none}
.orpfl,.orpwet{position:absolute;inset:0;pointer-events:none;z-index:2}
.orpfl{opacity:0;transition:opacity .4s}.orov.onfire .orpfl{opacity:1}
.orpfl i{position:absolute;width:48%;height:13%;translate:-50% -100%;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 80%,#fff6a0 0%,#ffcf3a 25%,#ff7a1a 55%,rgba(255,60,0,0) 75%);filter:blur(.6px);transform-origin:50% 100%;animation:orflame .45s ease-in-out infinite alternate}
.orpfl i:nth-child(1){left:50%;top:52%}.orpfl i:nth-child(2){left:28%;top:66%;animation-delay:-.2s;scale:.85}.orpfl i:nth-child(3){left:70%;top:76%;animation-delay:-.32s}.orpfl i:nth-child(4){left:42%;top:92%;animation-delay:-.1s;scale:.9}
.orov.onfire .orpuppet svg{filter:sepia(.5) brightness(.85)}
.orpwet{opacity:0}.orov.doused .orpwet{opacity:1}
.orpwet b{position:absolute;top:40%;width:10%;height:5%;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(#bfe8ff,#3fa9ff);box-shadow:0 0 6px rgba(120,200,255,.8);opacity:0}
.orov.doused .orpwet b{animation:orwet 1.1s ease-in 2}
.orpwet b:nth-child(1){left:20%}.orpwet b:nth-child(2){left:45%;animation-delay:.15s}.orpwet b:nth-child(3){left:70%;animation-delay:.3s}.orpwet b:nth-child(4){left:32%;animation-delay:.45s}.orpwet b:nth-child(5){left:58%;animation-delay:.6s}.orpwet b:nth-child(6){left:82%;animation-delay:.2s}
@keyframes orwet{0%{opacity:0;transform:translateY(-30vh)}20%{opacity:1}100%{opacity:0;transform:translateY(30vh)}}
.orov.doused .orpuppet::after{content:'💦';position:absolute;left:50%;top:44%;translate:-50% -50%;font-size:9vh;animation:orspray 1.3s ease-out forwards;z-index:3}
/* all five stations always on screen (an empty one is dimmed) */
.orsta.nobody{opacity:.55}
/* the invader peeks over the top of the organ: head and shoulders, the rest behind it */
.orpeek{right:8%;top:-13%;width:18%;translate:0 70%;rotate:0deg}
.orov.invaded .orpeek{translate:0 0;rotate:8deg;animation:orpeek 1.4s ease-in-out .5s infinite alternate}
@keyframes orpeek{from{rotate:8deg}to{rotate:-4deg}}
/* (final) the invader leans out from behind the right side of the organ: head and shoulders, fading out below */
.orpeek{right:-2%;top:16%;width:22%;translate:-70% 0;rotate:0deg;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 92%);mask-image:linear-gradient(to bottom,#000 62%,transparent 92%)}
.orov.invaded .orpeek{translate:30% 0;rotate:18deg;animation:orpeek2 1.4s ease-in-out .5s infinite alternate}
@keyframes orpeek2{from{rotate:18deg}to{rotate:10deg}}

.slcell.tick{box-shadow:0 0 0 6px #ffd23f,0 0 50px #ffd23f!important;scale:1.04}
.slcell .slv{display:block}
#slotov.four .slwin:not(.slw4){display:none}
#slotov.four .slcell.hi:not(.won):not(.tick){box-shadow:none}
.slwin.slw4{z-index:2}
#slotov.four .slcell.tick,#slotov.four .slcell.won{position:relative;z-index:3}
#slotov.four .slcell.tick{box-shadow:0 0 0 6px #fff,0 0 50px #fff!important;scale:1.06}
#slotov.ticking .slcell.hi:not(.tick){filter:brightness(.55)}
/* Sja-la-lie: compact stations, one bar per station, spread from the far left to the far right */
.orsta{width:15vw!important;padding:.7vh .7vw!important;gap:.6vh}
.orsta.fx{left:1vw!important;right:auto!important;top:12vh!important}.orsta.pitch{left:1vw!important;right:auto!important;top:32vh!important}.orsta.fire{left:1vw!important;right:auto!important;top:52vh!important}
.orsta.sec{right:1vw!important;left:auto!important;top:12vh!important}.orsta.speed{right:1vw!important;left:auto!important;top:32vh!important}
.orsta .orst{font-size:clamp(.7rem,1.05vw,1rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orfaces{display:flex;flex-wrap:wrap;gap:.3vw;min-height:3.6vh}
.orfaces span{width:3.6vh;height:3.6vh;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.12);display:block}
.orfaces span svg{width:100%;height:100%;display:block}
.orfaces span.ok{box-shadow:0 0 0 2px #3ddc84}
.orall{display:block;height:1.3vh;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.orall i{display:block;height:100%;background:linear-gradient(90deg,#ffd23f,#3ddc84);transition:width .3s}
.orov.doused .orpfl{opacity:0;transition:opacity .4s ease 1.7s}
.orov.doused .orpuppet svg{transition:filter .4s ease 1.7s}
/* the stage invader sings */
.orpeek .orpm{transform-box:fill-box;transform-origin:50% 0;scale:1 .35}
.orov.invaded .orpeek .orpm{animation:orsing .32s ease-in-out infinite alternate}
@keyframes orsing{0%{scale:1 .35}60%{scale:1 1.15}100%{scale:1 .7}}
.orov.brk-fx .orcab{animation:orcabsw .45s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 0}
@keyframes orcabsw{from{rotate:-14deg}to{rotate:14deg}}
/* each breakdown only does its own thing: wiring, an electric field round the cable box */
.orov.brk-fx .orpanel{filter:drop-shadow(0 0 4px #9ef) drop-shadow(0 0 12px #39f) drop-shadow(0 0 22px #36f);animation:orzap .22s steps(2) infinite}
@keyframes orzap{50%{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 18px #6cf) drop-shadow(0 0 34px #39f)}}
/* the stations: small, the names of who's on it, one bar */
.orsta{width:7.6vw!important;min-width:110px;padding:.6vh .5vw!important;gap:.4vh;border-radius:12px}
.orsta .orst{font-size:clamp(.62rem,.9vw,.9rem)}
.ornames{display:flex;flex-direction:column;gap:.1vh;font-size:clamp(.6rem,.85vw,.85rem);font-weight:700;color:#fff;line-height:1.15}
.ornames span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.ornames span.ok{color:#3ddc84}
.orall{height:1vh}
/* the stage invader: a bit further left, just left of the puppet strings, rising from behind the organ */
.orpeek{right:17%!important;top:-12%!important;width:17%!important;translate:0 75%!important;rotate:0deg!important}
.orov.invaded .orpeek{translate:0 -14%!important;rotate:5deg!important}
.orclock{display:none!important}
.slcell .slvv{display:flex;flex-wrap:wrap;justify-content:center;gap:.2vw .5vw;margin-top:.4vh;padding:0 .4vw}
.slcell .slvv i{display:flex;align-items:center;gap:.25vw;font-style:normal;font-size:clamp(.55rem,.8vw,.8rem);color:#fff;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.slcell .slvv .char{width:3vh;height:3vh}.slcell .slvv .chflag{display:none}.slcell .slvv .chin img{width:100%;height:100%;object-fit:cover;display:block}
.slcell .slvv u{text-decoration:none;max-width:6vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* wiring: the dolls crackle with electricity too */
.orov.brk-fx .orpuppet{animation:orzapP .24s steps(2) infinite}
@keyframes orzapP{0%{filter:drop-shadow(0 0 6px #9ef) drop-shadow(0 0 16px #39f) drop-shadow(0 10px 16px rgba(0,0,0,.6))}50%{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 26px #6cf) drop-shadow(0 10px 16px rgba(0,0,0,.6))}}
/* water on a burning doll: big clouds of steam and smoke */
.orpsmk{position:absolute;inset:0;pointer-events:none;z-index:4}
.orpsmk i{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(235,235,240,.95) 0%,rgba(190,190,200,.75) 40%,rgba(150,150,160,0) 70%);opacity:0;translate:-50% -50%}
.orpsmk i:nth-child(1){left:50%;top:40%}.orpsmk i:nth-child(2){left:25%;top:58%}.orpsmk i:nth-child(3){left:75%;top:62%}.orpsmk i:nth-child(4){left:40%;top:80%}.orpsmk i:nth-child(5){left:62%;top:28%}
.orov.doused .orpsmk i{animation:orpsmk 3.2s ease-out 1.5s both}
.orov.doused .orpsmk i:nth-child(2){animation-delay:1.65s}.orov.doused .orpsmk i:nth-child(3){animation-delay:1.8s}.orov.doused .orpsmk i:nth-child(4){animation-delay:1.95s}.orov.doused .orpsmk i:nth-child(5){animation-delay:1.7s}
@keyframes orpsmk{0%{opacity:0;scale:.3}20%{opacity:1;scale:1.2}70%{opacity:.85;scale:1.9}100%{opacity:0;scale:2.4;translate:-50% -90%}}
/* security done: a big fist, and the invader is slammed off the stage */
.orfist{position:absolute;right:17.5%;top:-15%;font-size:16vh;line-height:1;z-index:6;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.orov.punched .orfist{animation:orfist 1.3s cubic-bezier(.3,1.3,.5,1) both}
@keyframes orfist{0%{opacity:1;transform:translateX(-45vw) scale(.6)}25%{opacity:1;transform:translateX(0) scale(1.25)}32%{transform:translateX(-2vw) scale(1.1)}70%{opacity:1;transform:translateX(-1vw) scale(1.1)}100%{opacity:0;transform:translateX(-6vw) scale(.9)}}
.orov.punched .orpeek{translate:0 -14%!important;rotate:5deg!important;animation:orslam 1.6s ease-in .3s both!important}
@keyframes orslam{0%{transform:none;opacity:1}12%{transform:translate(12%,-4%) rotate(18deg);opacity:1}100%{transform:translate(260%,-180%) rotate(760deg) scale(.6);opacity:0}}
/* Edgar, Green Room: the guests never stand still in front of a chair: they walk out, sit down in their own chair (longer), get a drink at the fridge, and only wander about without stopping */
@keyframes edsit{0%,2%{transform:translateX(var(--from))}6%{transform:translateX(0)}6%,17%{transform:translateX(0)}21.5%,31.5%{transform:translateX(var(--fr))}39.5%,46%{transform:translateX(var(--from))}51%{transform:translateX(var(--mid))}56%,66%{transform:translateX(var(--from))}71%{transform:translateX(var(--mid2))}76%,100%{transform:translateX(var(--from))}}
@keyframes edstand{0%,6%{opacity:1}6.25%,16.75%{opacity:0}17%,100%{opacity:1}}
@keyframes edseat{0%,6%{opacity:0}6.25%,16.75%{opacity:1}17%,100%{opacity:0}}
@keyframes edfopen{0%,21%{opacity:0}21.5%,32%{opacity:1}32.5%,100%{opacity:0}}
@keyframes edfdoor{0%,20.5%{opacity:0;transform:scaleX(.1)}20.75%{opacity:1;transform:scaleX(.1)}21.5%,31.25%{opacity:1;transform:scaleX(1)}32%{opacity:1;transform:scaleX(.1)}32.25%,100%{opacity:0;transform:scaleX(.1)}}
.ccnote.cchit{background:linear-gradient(90deg,#ffd23f,#ff9f1c);color:#2b1830;font-weight:900;font-size:.95rem;box-shadow:0 0 20px rgba(255,210,63,.6);animation:cchit 1s ease-in-out infinite alternate}
@keyframes cchit{to{box-shadow:0 0 34px rgba(255,210,63,.95)}}
#v-guess .ccnote.cchit{order:-1;margin:10px 0}
#slotov.counted .slcell .slvv{margin-top:.2vh;gap:.15vh .35vw}
#slotov.counted .slcell .slvv i{font-size:clamp(.5rem,.7vw,.72rem)}
#slotov.counted .slcell .slvv .char{width:2.2vh;height:2.2vh}
/* the vote slot: the tiles keep their look; the voters pop in, small, along the bottom */
#slotov .slcell{position:relative}
#slotov .slcell .slv{position:absolute;left:0;right:0;bottom:.8vh;margin:0}
#slotov .slcell .slvv i{opacity:0;animation:slvpop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--d) * .35s)}
@keyframes slvpop{0%{opacity:0;transform:scale(.2) translateY(1vh)}100%{opacity:1;transform:none}}
/* Lynda behind her till */
.boutique .bqtill{position:absolute;left:1vw;bottom:1vh;width:34vh;z-index:2;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.boutique .bqtill .till{width:100%;height:auto;display:block}
.boutique.enter .bqtill{animation:inLeft .9s .2s cubic-bezier(.2,.9,.3,1.08) both}
.boutique.leaving .bqtill{animation:outLeft .7s .05s cubic-bezier(.6,0,.8,.4) forwards}
.tcpaps{position:absolute;left:0;right:0;bottom:-8.6vw;height:22.5vw;pointer-events:none}
.tcpaps svg{width:100%;height:100%;display:block}
/* Edgar: each room has a tab on its outer edge, in the room's colour, where the searchers' avatars sit (smaller now) */
.edtab{position:absolute;box-sizing:border-box;border:3px solid var(--tc);background:linear-gradient(var(--tb),rgba(10,6,24,.9));border-radius:0 0 14px 14px;border-top:none;box-shadow:0 6px 16px rgba(0,0,0,.45);transition:box-shadow .3s}
.edtab.top{border-radius:14px 14px 0 0;border-top:3px solid var(--tc);border-bottom:none;background:linear-gradient(rgba(10,6,24,.9),var(--tb))}
.edtab.busy{box-shadow:0 0 18px var(--tc)}
.edtab.green{--tc:#3ddc84;--tb:rgba(61,220,132,.35)}.edtab.club{--tc:#d97bff;--tb:rgba(217,123,255,.35)}.edtab.back{--tc:#3fb6ff;--tb:rgba(63,182,255,.35)}.edtab.boud{--tc:#ff6fd8;--tb:rgba(255,111,216,.35)}
.edtok .char{width:3.6vh!important;height:3.6vh!important;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.6)!important}
.edtok em{font-size:clamp(.48rem,.68vw,.7rem)!important;padding:0 .35em!important}
.edtok .edglass{font-size:2vh!important;right:-1vh!important;top:-.9vh!important}
.edov2 .edr2{transition:filter .6s}
.edov2 .edr2.dim{filter:brightness(.38) saturate(.6)}
.edtab{transition:box-shadow .3s,left .3s,width .3s}
.edtok em{max-width:5.4vw;overflow:hidden;text-overflow:ellipsis}
/* Edgar: the two strolling stars */
.edduo{position:absolute;left:50%;top:60%;z-index:3;display:flex;gap:.2vh;transform:translate(-50%,-100%);opacity:0;pointer-events:none;transition:left 3s ease-in-out,top 3s ease-in-out,opacity .6s}
.edduo.on{opacity:1}
.edduo span{display:block;height:15vh;width:8vh}
.edduo svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.edduo.flip{flex-direction:row-reverse}.edduo.flip svg{transform:scaleX(-1)}
.edduo.walking span{animation:edduowalk .32s ease-in-out infinite alternate}
.edduo.walking span:nth-child(2){animation-delay:-.16s}
@keyframes edduowalk{from{translate:0 0}to{translate:0 -.8vh}}
/* Edgar: the strolling duo inside the rooms */
.edduo2 .ddp{transition:transform 3s linear}
.edduo2 .ddact{display:none}.edduo2.act .ddact{display:inline}.edduo2.act .ddst{display:none}
.edduo2.walk .ddin{animation:ddwalk .3s ease-in-out infinite alternate}
@keyframes ddwalk{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.edduo2.r-club.act .ddin{animation:dddance .42s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.edduo2.r-club.act .ddp:nth-child(2) .ddin{animation-delay:-.21s}
@keyframes dddance{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-10px) rotate(6deg)}}
.edduo2.r-back.act .ddin{animation:ddstrum .25s ease-in-out infinite alternate}
@keyframes ddstrum{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.edduo2.r-boud.act .ddin{animation:ddpose 1.2s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes ddpose{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.edtab{transition:box-shadow .4s,opacity .4s,filter .4s}
.edtab:not(.busy){opacity:.45;filter:saturate(.4) brightness(.7)}
.edtab.busy{box-shadow:0 0 22px var(--tc),inset 0 0 14px var(--tb)}
.edov2 .edr2{transition:filter .6s,box-shadow .4s}
.edov2 .edr2.green{--tc:#3ddc84}.edov2 .edr2.club{--tc:#d97bff}.edov2 .edr2.back{--tc:#3fb6ff}.edov2 .edr2.boud{--tc:#ff6fd8}
.edov2 .edr2.lit{box-shadow:0 0 0 3px var(--tc),0 0 26px var(--tc),inset 0 0 18px color-mix(in srgb,var(--tc) 35%,transparent)}
.zgov.cd .zgclock{font-size:clamp(4rem,12vw,10rem);right:0;left:0;text-align:center;top:30vh;animation:uthot .5s ease-in-out infinite alternate}
.zgtrack.pre{opacity:.6}
.edduoq{display:flex;flex-direction:column;gap:10px}.edduoq p{font-weight:800;font-size:1.05rem;line-height:1.35;margin:0 0 4px}
.zgrod{transform-origin:50% 100%}.zgp .zgrod{rotate:var(--sw,0deg)}
/* Key Change!: the Ready button and the 3-2-1 cover the lyrics completely (no lyrics showing through) */
.slyover #srecbtn:not(.live),.slyover #srecbtn:not(.live):disabled{opacity:1;background:#e21d7a}
.slyover #scount.counting:not(.live){background:#1c0f3a;opacity:1;color:#fff;display:flex;align-items:center;justify-content:center}
.edduo2 .ddst2{display:none}.edduo2.shades:not(.act) .ddst2{display:inline}.edduo2.shades .ddst{display:none}
/* Just One!: the clue cards */
.fkword.ask{background:#ffd23f;color:#2b1830}
.fkword.in{background:#3ddc84;color:#0a2a18}
.fkword.out{background:#5a5a6a;color:#ddd;text-decoration:line-through;opacity:.85}
.fkpod.guesser .char{box-shadow:0 0 0 4px #ffd23f,0 0 26px #ffd23f}
.fksong small{display:block;font-size:.55em;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.fkpod.guesser .fktag{top:auto;bottom:-3.2vh;transform:rotate(-4deg);background:#ffd23f;color:#2b1830;font-size:clamp(.6rem,1vw,1rem)}
/* Edgar, Green Room: each guest sits down in their own chair once every 15 seconds (out from behind the screen, sit ~6 s, back) */
.edr2 .edsit{animation:edsit15 15s linear infinite backwards!important}
.edr2 .edsit .edst{animation:edstand15 15s linear infinite backwards!important;animation-delay:inherit!important}
.edr2 .edsit .edsi{animation:edseat15 15s linear infinite backwards!important;animation-delay:inherit!important}
.edr2 .edfopen,.edr2 .edfdoor{animation:none!important;opacity:0!important}
@keyframes edsit15{0%{transform:translateX(var(--from))}22%,68%{transform:translateX(0)}92%,100%{transform:translateX(var(--from))}}
@keyframes edstand15{0%,22%{opacity:1}23%,67%{opacity:0}68%,100%{opacity:1}}
@keyframes edseat15{0%,22%{opacity:0}23%,67%{opacity:1}68%,100%{opacity:0}}
/* Just One!: the clue check on the phone */
.fkchk{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px}
.fkck{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px;border:0;border-radius:14px;background:#fff;color:#2b1830;font-family:inherit;text-align:left;cursor:pointer}
.fkck b{font-size:1.3rem;font-weight:900}.fkck small{opacity:.65;font-weight:700}
.fkck.out{background:#ddd}.fkck.out b{text-decoration:line-through;color:#888}
.fkck.out::after{content:'✖';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:2rem;color:#e0283a;font-weight:900}
.fkck[disabled]{cursor:default;opacity:1}
.fkckdone{width:100%;max-width:380px;margin-top:10px}
/* ---------- Just One!: the press conference ---------- */
.jcov{background:#0c1030}
.jcbg{position:absolute;inset:0}
.jcwall{position:absolute;left:0;right:0;top:0;height:47vh;background:linear-gradient(180deg,#1b1f5c,#2a1460 70%,#3a1a6e);overflow:hidden;box-shadow:inset 0 -6px 0 #ffd23f}
.jcwall::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(255,111,216,.35),transparent 35%),radial-gradient(circle at 80% 25%,rgba(63,182,255,.35),transparent 35%),repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2vw,transparent 2vw 4vw)}
.jcban{position:absolute;left:3vw;top:10vh;font-weight:900;letter-spacing:.35em;font-size:clamp(.7rem,1.2vw,1.2rem);color:#bfe8ff;opacity:.85}
.jclogo{position:absolute;right:3vw;top:9.5vh;font-weight:900;font-size:clamp(1rem,2.2vw,2.2rem);color:#fff;text-shadow:0 0 18px #ff6fd8}
.jcflags{position:absolute;left:0;right:0;bottom:2vh;display:flex;justify-content:center;gap:1.4vw}
.jcflags i{width:3.6vw;height:2.4vw;border-radius:3px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.5);opacity:.85}
.jcflags img{width:100%;height:100%;object-fit:cover}
.jcfloor{position:absolute;left:0;right:0;top:47vh;bottom:0;background:linear-gradient(#2a1a4a,#140c2a);overflow:hidden}
.jcfloor::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 6vw);transform:perspective(40vh) rotateX(55deg);transform-origin:50% 0}
.jcspot{position:absolute;top:-10vh;width:22vw;height:70vh;background:linear-gradient(rgba(255,255,220,.22),transparent);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);filter:blur(2px);pointer-events:none}
.jcspot.a{left:26vw;transform:rotate(14deg)}.jcspot.b{right:26vw;transform:rotate(-14deg)}
/* the stage with the long table: the guesser */
.jcstage{position:absolute;left:50%;top:21vh;width:40vw;height:28vh;transform:translateX(-50%);z-index:5}
.jcstage::before{content:'';position:absolute;left:-3vw;right:-3vw;bottom:-2vh;height:4vh;border-radius:6px;background:linear-gradient(#5a3a8a,#2a1a4a);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.jcguest{position:absolute;left:50%;bottom:9vh;width:12vh;height:16vh;transform:translateX(-50%)}
.jcguest .char{position:absolute;left:50%;top:0;width:9vh;height:9vh;margin-left:-4.5vh;z-index:2;box-shadow:0 0 0 4px #ffd23f,0 0 30px #ffd23f}
.jcguest .lbod{position:absolute;left:50%;top:7vh;width:7vh;height:9vh;margin-left:-3.5vh;z-index:1}
.jcbub{position:absolute;left:50%;top:-6vh;transform:translateX(-50%);font-size:5vh;animation:fktype 1.2s ease-in-out infinite;z-index:3}
.jclong{position:absolute;left:0;right:0;bottom:0;height:10vh;border-radius:8px 8px 4px 4px;background:linear-gradient(#f4f4f8 0 18%,#2f3a8a 18%,#1d2560);box-shadow:0 10px 24px rgba(0,0,0,.6);z-index:3}
.jclong::after{content:'';position:absolute;left:8%;right:8%;top:35%;height:2px;background:rgba(255,210,63,.6)}
.jcmic{position:absolute;bottom:9vh;width:.5vw;height:5vh;background:#222;border-radius:3px;transform-origin:50% 100%}
.jcmic::before{content:'';position:absolute;left:50%;top:-1.4vh;width:1.4vh;height:2vh;margin-left:-.7vh;border-radius:50%;background:radial-gradient(#666,#111)}
.jcmic.m1{left:38%;transform:rotate(-16deg)}.jcmic.m2{left:45%;transform:rotate(-6deg)}.jcmic.m3{left:53%;transform:rotate(7deg)}.jcmic.m4{left:60%;transform:rotate(17deg)}
.jcnamecard{position:absolute;left:50%;top:-3.6vh;transform:translateX(-50%);padding:.25vh 1.2vw;background:#fff;color:#1d2560;font-weight:900;font-size:clamp(.7rem,1.2vw,1.2rem);border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.4);white-space:nowrap}
.jcnamecard:empty{display:none}
.jcgpts{left:50%;top:18vh;transform:translateX(-50%)}
/* the journalists' desks */
.jcdesk{position:absolute;width:12vw;max-width:190px;height:22vh;transform:translate(-50%,0) scale(var(--s));transform-origin:50% 100%}
.jcov.enter .jcdesk{animation:none}
.jcperson{position:absolute;left:50%;top:4vh;width:8vh;height:12vh;transform:translateX(-50%)}
.jcperson .char{position:absolute;left:50%;top:0;width:7vh;height:7vh;margin-left:-3.5vh;z-index:2;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.6)}
.jcperson .lbod{position:absolute;left:50%;top:5.6vh;width:5.6vh;height:7vh;margin-left:-2.8vh;z-index:1}
.jcperson .chflag{display:none}
.jctable{position:absolute;left:0;right:0;bottom:0;height:9vh;border-radius:6px 6px 3px 3px;background:linear-gradient(#e9e2d4 0 14%,#7a4a2a 14%,#4a2a16);box-shadow:0 8px 16px rgba(0,0,0,.55);z-index:3}
.jclap{position:absolute;left:12%;top:-3.4vh;width:34%;height:3.8vh;border-radius:4px 4px 0 0;background:linear-gradient(#c9ced8,#9aa0ad);box-shadow:inset 0 0 0 2px #6a6f7a}
.jclap::after{content:'';position:absolute;left:50%;top:40%;width:1.2vh;height:1.2vh;margin-left:-.6vh;border-radius:50%;background:#f4f4f8;opacity:.7}
.jcdmic{position:absolute;right:30%;top:-5.4vh;width:.35vw;height:5.6vh;background:#1a1a1a;border-radius:2px;transform:rotate(-14deg);transform-origin:50% 100%}
.jcdmic::before{content:'';position:absolute;left:50%;top:-1vh;width:1.1vh;height:1.6vh;margin-left:-.55vh;border-radius:50%;background:radial-gradient(#777,#111)}
.jcdmic::after{content:'';position:absolute;left:50%;top:-.4vh;width:.5vh;height:.5vh;margin-left:-.25vh;border-radius:50%;background:#ff3a3a;box-shadow:0 0 6px #ff3a3a}
.jcglass{position:absolute;right:8%;top:-2.6vh;width:1.6vh;height:2.8vh;border-radius:0 0 4px 4px;background:linear-gradient(rgba(190,230,255,.25) 0 30%,rgba(120,200,255,.55) 30%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.jcname{position:absolute;left:50%;bottom:1.2vh;transform:translateX(-50%);padding:.2vh .8vw;background:#fff;color:#2b1830;font-weight:900;font-size:clamp(.55rem,.95vw,.95rem);border-radius:3px;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.jccard{position:absolute;left:50%;top:-6vh;transform:translateX(-50%);min-width:9vw;max-width:14vw;padding:1vh 1vw;background:#fff;color:#2b1830;font-weight:900;font-size:clamp(.8rem,1.6vw,1.6rem);text-align:center;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 3px #ffd23f;z-index:6;white-space:nowrap;overflow:visible}
.jccard.typing{background:#ffd23f;animation:fktype 1s ease-in-out infinite}.jccard.in{background:#3ddc84;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.jccard.out{background:#d8d8e0;color:#888;text-decoration:line-through;min-height:3.4vh}
.jccard.pop{animation:fkword .5s cubic-bezier(.3,1.6,.5,1) both}
.jcx{position:absolute;inset:-1vh -.6vw;pointer-events:none}
.jcx::before,.jcx::after{content:'';position:absolute;left:50%;top:50%;width:120%;height:.9vh;margin-left:-60%;margin-top:-.45vh;background:#e0283a;border-radius:4px;box-shadow:0 0 8px rgba(224,40,58,.7)}
.jcx::before{transform:rotate(28deg)}.jcx::after{transform:rotate(-28deg)}
.jctag{position:absolute;left:50%;bottom:-3.4vh;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:clamp(.55rem,.95vw,.95rem);background:#3fb6ff;color:#fff;padding:.2em .6em;border-radius:8px;z-index:6}
.jcdesk.checker .jcperson .char{box-shadow:0 0 0 4px #3fb6ff,0 0 24px #3fb6ff}
.jcdesk.win .jcperson .char{box-shadow:0 0 0 4px #ffd23f,0 0 30px #ffd23f}
.jcdesk .fkpts{left:50%;top:-11vh;transform:translateX(-50%)}
.jcflash{position:absolute;width:16vh;height:16vh;margin:-8vh 0 0 -8vh;border-radius:50%;background:radial-gradient(#fff,rgba(255,255,255,.6) 20%,transparent 60%);opacity:0;pointer-events:none;z-index:40}
.jcflash.on{animation:pcflash .35s ease-out}
@keyframes pcflash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.jcov .fkmsg{bottom:2vh}
.jcov .fkmid{top:31vh;z-index:30}
.jccards{position:absolute;left:50%;top:-6vh;transform:translateX(-50%);display:flex;gap:.5vw;z-index:6}
.jccards .jccard{position:relative;left:auto;top:auto;transform:none;min-width:7vw}
.fkform.two{flex-direction:column}.fkform.two .btn{width:100%}
/* Just One!: the presenters explain it in front of the main desk, then the journalists pop up behind their desks */
.jchosts{display:none}
.jcov.intro .jchosts,.jcov.hostsout .jchosts{display:block}
.jchosts .ehost{position:absolute;bottom:26vh;height:46vh;width:auto;z-index:8;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3.2s ease-in-out infinite alternate}
.jchosts .him{left:34vw}.jchosts .her{right:34vw;animation-delay:-1.6s}
.jcov.enter .jchosts .him{animation:hsInL .9s cubic-bezier(.3,1.3,.5,1) both}
.jcov.enter .jchosts .her{animation:hsInR .9s cubic-bezier(.3,1.3,.5,1) both}
@keyframes hsInL{from{translate:-40vw 0;opacity:0}}
@keyframes hsInR{from{translate:40vw 0;opacity:0}}
.jcov.hostsout .jchosts .him{animation:hsOutL .8s cubic-bezier(.6,0,.8,.4) forwards}
.jcov.hostsout .jchosts .her{animation:hsOutR .8s cubic-bezier(.6,0,.8,.4) forwards}
@keyframes hsOutL{to{translate:-50vw 0;opacity:0}}
@keyframes hsOutR{to{translate:50vw 0;opacity:0}}
.jcov .jcbub2{position:absolute;top:24vh;max-width:28vw;z-index:9;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.25;padding:.65em 1em;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.jcov .jcbub2.on{opacity:1;transform:scale(1)}
.jcov .jcbub2.him{right:67vw;border-bottom-right-radius:4px;transform-origin:100% 100%}
.jcov .jcbub2.her{left:67vw;border-bottom-left-radius:4px;transform-origin:0 100%}
.jcov.intro .fkmsg,.jcov.intro .fkclock{display:none}
.jcov.rise .jcdesk{animation:jcrise .9s calc(var(--i) * .18s) cubic-bezier(.25,1.35,.5,1) both}
.jcov.rise .jcguest{animation:jcrise .9s cubic-bezier(.25,1.35,.5,1) both}
@keyframes jcrise{0%{translate:0 45vh;opacity:0}30%{opacity:1}100%{translate:0 0}}
/* Just One!: the clue and guess fields, clearly visible on the phone */
.fkform input{background:#fff;color:#1a1147;font-weight:800;border:3px solid #ffd23f;box-shadow:0 0 0 4px rgba(255,210,63,.25),0 6px 16px rgba(0,0,0,.35);caret-color:#e8457c}
.fkform input::placeholder{color:#8a83a8;font-weight:700;opacity:1}
.fkform input:focus{outline:none;border-color:#ff6fd8;box-shadow:0 0 0 4px rgba(255,111,216,.35),0 6px 16px rgba(0,0,0,.35)}
#fktimer{position:fixed;top:56px;right:14px;z-index:60;display:none;padding:6px 14px;border-radius:99px;background:#ffd23f;color:#221a00;font-weight:900;font-size:1.25rem;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#fktimer.on{display:block}
#fktimer.hot{background:#e0283a;color:#fff;animation:fktpulse .5s ease-in-out infinite alternate}
@keyframes fktpulse{to{transform:scale(1.12)}}
/* the clue check on the phone: a big red cross right through the clue */
.fkck{overflow:hidden}
.fkck.out::after{content:'';position:absolute;inset:0;right:0;top:0;transform:none;background:linear-gradient(to top right,transparent calc(50% - 3px),#e0283a calc(50% - 3px),#e0283a calc(50% + 3px),transparent calc(50% + 3px)),linear-gradient(to bottom right,transparent calc(50% - 3px),#e0283a calc(50% - 3px),#e0283a calc(50% + 3px),transparent calc(50% + 3px));font-size:0;pointer-events:none}
.fkck.out b{color:#e0283a;text-decoration-color:#e0283a}
.goldsure{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 10px;padding:16px;border-radius:16px;background:linear-gradient(#fff6d0,#ffd23f);color:#3a2600;box-shadow:0 0 0 3px #ffd23f,0 0 24px rgba(255,210,63,.5)}
.goldsure .si{font-size:2.6rem}.goldsure b{font-size:1.35rem;font-weight:900}
.shopbtn.poor{opacity:.72}
.shopbtn small.shopno{display:block;opacity:1;font-weight:800;color:#ff8fa3;margin-top:2px}
/* Just One!: little scoreboards on the desks (their Just One score so far) */
.jcscore,.jcgscore{position:absolute;left:50%;transform:translateX(-50%);min-width:2.2em;padding:.15vh .5vw;border-radius:4px;background:#0b0b12;color:#ffd23f;font-family:'Courier New',monospace;font-weight:900;text-align:center;letter-spacing:.06em;text-shadow:0 0 6px rgba(255,210,63,.9);box-shadow:inset 0 0 0 2px #3a3a48,0 2px 6px rgba(0,0,0,.5)}
.jcscore{bottom:4.1vh;font-size:clamp(.7rem,1.2vw,1.15rem)}
.jcgscore{top:3.6vh;font-size:clamp(.8rem,1.5vw,1.5rem);z-index:2}
.jcgscore:empty{display:none}
/* 🧪 Test and ⚙️ Admin on the host page */
.testrow{display:flex;gap:10px;justify-content:center}
.testbtn{opacity:.6;font-weight:800;border-radius:999px;padding:4px 12px;background:rgba(255,255,255,.06)}
.testbtn:hover{opacity:1}
.xegrp{display:flex;flex-direction:column;gap:4px;padding:6px 8px;border-radius:12px;background:rgba(255,255,255,.04)}
.xegrp>b{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.xegrp>span{display:flex;flex-wrap:wrap;gap:6px}
.xegate{padding:20px;display:flex;flex-direction:column;gap:10px;max-width:520px}
.xegate input{padding:9px 12px;border-radius:10px;border:0;background:#160f38;color:#fff;font-family:inherit;flex:1}
.xegate .bad,.xefoot .bad{color:#ff7a8a}
.xerow .xeicon{width:52px;text-align:center;font-size:1.2rem}
.xerow select,.xereqnew select{padding:7px 10px;border-radius:8px;border:0;background:#160f38;color:#fff;font-family:inherit}
.xerow.xeoff{opacity:.5}
.xetriv input{flex:1 1 150px}
.xerow .xeq{flex:1 1 400px}.xerow .xee{flex:2 1 300px}
.xereqhow{font-size:.85rem;margin:4px 0}
.xereq .xest{font-size:.85rem;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.xereq.st-needs_ok .xest,.xereq.st-question .xest{background:#ffd23f;color:#1a1040}
.xereq.st-done .xest{background:#2fbf71;color:#fff}
.xereq.st-feedback .xest{background:#3fb6ff;color:#06203a}
.xebody2{margin:6px 0;white-space:pre-wrap;font-size:.95rem}
.xenote{margin:4px 0 6px;padding:8px 10px;border-radius:8px;background:rgba(47,191,113,.12);border-left:3px solid #2fbf71;font-size:.9rem}
.xereq.st-needs_ok .xenote{background:rgba(255,210,63,.12);border-left-color:#ffd23f}
/* 💬 Feedback on the join screen */
.fbov{position:fixed;inset:0;z-index:90;background:rgba(6,0,18,.75);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.fbcard{width:100%;max-width:440px;background:var(--card,#1d1240);border-radius:20px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.fbcard h2{margin:0 0 6px}
.fbcard select,.fbcard textarea{width:100%;box-sizing:border-box;padding:12px;border-radius:12px;border:0;font-family:inherit;font-size:1rem;background:#fff;color:#1a1147}
.fbcard textarea{resize:vertical}
.fbcard{background:#1d1240;border:1px solid rgba(255,255,255,.1)}
.fbov{background:rgba(6,0,18,.88)}
.xerow select{width:auto;flex:0 0 auto}
.xerow .xerowtop .xename{flex:1 1 200px}
.xereqnew select{width:auto}
.xereqnew .xerowtop{flex-wrap:wrap}
.fbkinds{display:flex;gap:8px;margin:0 0 12px}
.fbkinds .btn{flex:1;margin:0}
.fbkinds .btn.on{background:var(--yellow,#ffd23f);color:#1a1040;box-shadow:none}
.fbkinds{display:flex;gap:8px;margin:0 0 12px}
.fbkinds .btn{flex:1;margin:0}
.fbkinds .btn.on{background:var(--yellow,#ffd23f);color:#1a1040;box-shadow:none}
.fbkinds .btn{white-space:nowrap;padding-left:8px;padding-right:8px;font-size:1rem}
#adminbtn{position:relative}
#adminbtn.attn{opacity:1;color:#fff;background:rgba(255,77,106,.25)}
#adminbtn.attn::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ff4d6a;color:#fff;font-size:.7rem;font-weight:900;line-height:18px;text-align:center}
.xenotes{margin:6px 0;background:rgba(63,182,255,.08);border-radius:12px;padding:8px 12px}
.xenotes summary{cursor:pointer;font-weight:800}
.xenew{background:#ff4d6a;color:#fff;border-radius:999px;padding:1px 8px;font-size:.75rem;margin-left:6px}
.xenoterow{padding:8px 0;border-top:1px solid rgba(255,255,255,.08);font-size:.9rem}
.xenoterow.unseen b{color:#ffd23f}
.xenoterow p{margin:4px 0 0;white-space:normal}
/* ⚙️ Admin: sections on the left, their parts as tabs on top */
.editov .xecard{width:min(1180px,100%);height:min(92vh,900px)}
.xemain{display:flex;gap:16px;flex:1;min-height:0}
.xemain.hidden{display:none}
.xenav{flex:0 0 230px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.xesec{position:relative;display:flex;align-items:center;gap:10px;text-align:left;border:0;border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04);color:#fff;font-family:inherit;cursor:pointer}
.xesec:hover{background:rgba(255,255,255,.09)}
.xesec .xesi{font-size:1.5rem;width:32px;text-align:center}
.xesec b{display:block;font-size:1rem}
.xesec small{display:block;font-size:.75rem;color:var(--mute);line-height:1.2}
.xesec.on{background:#ffd23f;color:#1a1040}.xesec.on small{color:#5a4a20}
.xesec.attn::after{content:'';position:absolute;top:10px;right:10px;width:10px;height:10px;border-radius:50%;background:#ff4d6a;box-shadow:0 0 8px #ff4d6a}
.xecontent{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;min-height:0}
.xesech{margin:0;font-size:1.3rem}
.xesubs .xetabs{margin-top:8px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}
.xesubhint{margin:0;color:var(--mute);font-size:.9rem}
.xecontent #xebody{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px}
.xecontent .xelist{max-height:none;overflow:visible}
.xecontent .xefoot{margin-top:auto}
@media (max-width:760px){.xemain{flex-direction:column}.xenav{flex:none;flex-direction:row;overflow-x:auto}.xesec small{display:none}.xesec{flex:0 0 auto}}
.xesubhint{display:none}
.testrow{position:fixed;right:16px;bottom:14px;margin:0;z-index:20;justify-content:flex-end}
#adminbtn.dot::after{content:"";min-width:10px;width:10px;height:10px;padding:0;top:-3px;right:-3px}
.xecat .xecatname{flex:1 1 300px;display:flex;flex-direction:column}
.xecat .xecatname small{color:var(--mute);font-size:.8rem}
.xecat .xecatname i{font-style:normal;opacity:.8}
.xecat .xew8{flex:0 1 220px;accent-color:#ffd23f}
.xecat .xepct{width:56px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.hostpage #musicbtn{display:none!important}
.volpanel .volchk{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer}
.volpanel .volchk input{width:auto;accent-color:#ffd23f}
.xerow.xegive{box-shadow:inset 3px 0 0 #ff9f1c}.xerow.xegive .xeorig::after{content:"⚠️ Gives it away: never used";display:block;font-size:.75rem;color:#ff9f1c;font-weight:800}
#flagmsg{transform:none;text-align:center}

/* The studio behind the presenters: a stage with an LED wall, light pillars, moving spotlights and a shiny floor,
   instead of a flat purple card (only on the presenters' cards: .funcard) */
.cover .studio{display:none}
.cover.funcard{background:#06021a}
.cover.funcard .studio{display:block;position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.cover.funcard>.q,.cover.funcard>h2{position:relative;z-index:1}
.studio i{position:absolute;display:block}
.studio .stwall{left:17%;right:17%;top:9%;bottom:27%;border-radius:8px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px),linear-gradient(115deg,#ff2e88,#8b2bd9 30%,#2a5bff 55%,#ff2e88 80%,#8b2bd9);
  background-size:auto,auto,300% 300%;animation:stwall 14s ease-in-out infinite alternate;opacity:.78;
  box-shadow:0 0 60px 8px rgba(255,46,136,.35),inset 0 0 50px rgba(0,0,0,.55)}
.studio .stwall::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 55%,rgba(255,255,255,.35),transparent 55%);animation:stpulse 2.6s ease-in-out infinite alternate}
.studio .stpillar{top:12%;bottom:27%;width:6%;border-radius:6px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 7px),linear-gradient(180deg,#30e3ff,#8b2bd9 50%,#ff2e88);
  background-size:auto,100% 200%;animation:stpillar 3s linear infinite;opacity:.55;box-shadow:0 0 30px rgba(48,227,255,.35)}
.studio .stpillar.l{left:6%}.studio .stpillar.r{right:6%;animation-delay:-1.5s}
.studio .sttruss{left:0;right:0;top:0;height:5%;background:linear-gradient(#1b1630,#0d0a1c);box-shadow:0 2px 10px rgba(0,0,0,.6)}
.studio .sttruss::after{content:'';position:absolute;left:2%;right:2%;bottom:18%;height:38%;
  background:radial-gradient(circle,#fff6c8 0 30%,rgba(255,210,63,.7) 40%,transparent 70%) 0 50%/2.4% 100% repeat-x;animation:stbulbs 1.2s steps(2) infinite}
.studio .stbeam{top:3%;width:16%;height:105%;margin-left:-8%;transform-origin:50% 0;mix-blend-mode:screen;filter:blur(3px);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);opacity:.5;animation:stsweep var(--d,7s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.studio .b1{left:12%;--a:-28deg;--b:8deg;--d:7s;background:linear-gradient(rgba(255,255,255,.95),rgba(255,46,136,.35) 45%,transparent 85%)}
.studio .b2{left:28%;--a:18deg;--b:-14deg;--d:9s;--dl:-3s;background:linear-gradient(rgba(255,255,255,.9),rgba(48,227,255,.35) 45%,transparent 85%)}
.studio .b3{left:44%;--a:-12deg;--b:16deg;--d:6s;--dl:-1s;background:linear-gradient(rgba(255,255,255,.9),rgba(255,210,63,.3) 45%,transparent 85%)}
.studio .b4{left:56%;--a:12deg;--b:-18deg;--d:8s;--dl:-5s;background:linear-gradient(rgba(255,255,255,.9),rgba(255,210,63,.3) 45%,transparent 85%)}
.studio .b5{left:72%;--a:-16deg;--b:14deg;--d:10s;--dl:-2s;background:linear-gradient(rgba(255,255,255,.9),rgba(48,227,255,.35) 45%,transparent 85%)}
.studio .b6{left:88%;--a:26deg;--b:-8deg;--d:7.5s;--dl:-4s;background:linear-gradient(rgba(255,255,255,.95),rgba(255,46,136,.35) 45%,transparent 85%)}
.studio .stfloor{left:-10%;right:-10%;bottom:0;height:28%;
  background:linear-gradient(rgba(255,46,136,.22),transparent 40%),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 8%),linear-gradient(#1c0b3e,#05020f);
  border-top:2px solid rgba(255,140,220,.8);box-shadow:0 -4px 24px rgba(255,46,136,.55),0 -1px 0 rgba(48,227,255,.6);transform:perspective(400px) rotateX(18deg);transform-origin:50% 100%}
.studio .stfloor::after{content:'';position:absolute;left:25%;right:25%;top:0;height:70%;background:radial-gradient(ellipse at 50% 0,rgba(180,90,255,.45),transparent 70%);filter:blur(6px)}
.studio .sthaze{left:0;right:0;bottom:0;height:45%;background:radial-gradient(ellipse at 50% 100%,rgba(160,120,255,.22),transparent 70%);animation:sthaze 9s ease-in-out infinite alternate}
@keyframes stwall{from{background-position:0 0,0 0,0% 50%}to{background-position:0 0,0 0,100% 50%}}
@keyframes stpulse{from{opacity:.35}to{opacity:.9}}
@keyframes stpillar{from{background-position:0 0,0 0}to{background-position:0 0,0 -200%}}
@keyframes stbulbs{0%{opacity:1}100%{opacity:.55}}
@keyframes stsweep{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
@keyframes sthaze{from{opacity:.6;transform:translateX(-3%)}to{opacity:1;transform:translateX(3%)}}
@media (prefers-reduced-motion:reduce){.studio i,.studio i::after{animation:none!important}}

/* The opening: the presenters shuffle in from the sides, little steps, three seconds (him from the left, her from the right) */
.game.opening .shosts.arrive .ehost.him{animation:walkL 3s cubic-bezier(.3,.2,.5,1) both,ehshuffle .375s ease-in-out 8 alternate,ehbob 3.2s 3s ease-in-out infinite alternate}
.game.opening .shosts.arrive .ehost.her{animation:walkR 3s cubic-bezier(.3,.2,.5,1) both,ehshuffle .375s .1s ease-in-out 8 alternate,ehbob 3.2s 3.2s ease-in-out infinite alternate}
@keyframes walkL{from{translate:-46vw 0}to{translate:0 0}}
@keyframes walkR{from{translate:46vw 0}to{translate:0 0}}
@keyframes ehshuffle{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-7px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.game.opening .shosts.arrive .ehost.him,.game.opening .shosts.arrive .ehost.her{animation:none}}

/* The round's title on the big LED screen behind the presenters: the screen flashes on, the title sits inside it */
.cover.funcard.onscreen .stwall{opacity:1;animation:stwall 14s ease-in-out infinite alternate,stscreenon .7s ease-out both;box-shadow:0 0 90px 16px rgba(255,46,136,.55),inset 0 0 40px rgba(0,0,0,.35)}
.cover.funcard.onscreen .stwall::before{content:'';position:absolute;inset:0;border-radius:inherit;background:#fff;animation:stflash .7s ease-out both;pointer-events:none}
.cover.funcard.onscreen>.q,.cover.funcard.onscreen>h2{top:-9%;filter:drop-shadow(0 0 14px rgba(255,255,255,.55))}
.cover.funcard.onscreen>.q{animation:stin .6s .15s cubic-bezier(.2,1.4,.4,1) both;font-size:clamp(2.2rem,5vw,4.2rem)}
.cover.funcard.onscreen #covericon{font-size:clamp(2.2rem,5vw,4.2rem)}
.cover.funcard.onscreen>h2{animation:stin .6s .25s cubic-bezier(.2,1.4,.4,1) both;max-width:60%}
.cover.funcard.onscreen .studio::after{content:'';position:absolute;left:17%;right:17%;top:9%;bottom:27%;border-radius:8px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);z-index:2;mix-blend-mode:multiply}
@keyframes stscreenon{0%{filter:brightness(.2) saturate(.4)}35%{filter:brightness(2.2)}100%{filter:none}}
@keyframes stflash{0%{opacity:0}20%{opacity:.85}100%{opacity:0}}
@keyframes stin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* Sofia points at the big screen (her right arm swings up towards it) */
.shosts .ehost.her .earm{transform-box:view-box;transform-origin:76px 156px;transition:transform .55s cubic-bezier(.3,1.5,.5,1)}
.shosts.point .ehost.her .earm{transform:rotate(128deg)}
/* stepping aside (from side by side to the edges of the stage) is a walk, not a jump */
.shosts .ehost.him{transition:translate .9s cubic-bezier(.3,.7,.35,1),opacity .6s,left .8s cubic-bezier(.3,.6,.4,1)}
.shosts .ehost.her{transition:translate .9s cubic-bezier(.3,.7,.35,1),opacity .6s,right .8s cubic-bezier(.3,.6,.4,1)}   /* (walking on and off stays smooth too) */

/* Talking mouths: closed (flat) until --mo opens them, set by the sound of the line or the typing */
.ehost .emin,.keeper .emin{transform-box:fill-box;transform-origin:50% 0%;transform:scaleY(var(--mo,0));transition:transform .07s ease-out}   /* (a soft open mouth with teeth and a tongue, hinged at the top lip…) */
.ehost .elip,.keeper .elip{transform:translateY(calc(var(--mo,0) * var(--lh,8px)));opacity:min(1,calc(var(--mo,0) * 6));transition:transform .07s ease-out,opacity .07s}   /* (…and the bottom lip always there, moving down with it) */
/* The boutique's timer: right next to Lynda, big and bright (it was a small pill in the bottom corner) */
.shopov.boutique .bqtimer{left:calc(4vw + 23vh);right:auto;bottom:auto;top:53vh;padding:.35em .75em;border-radius:18px;
  background:linear-gradient(160deg,#ff3fa4,#7a1fa8);border:3px solid #ffd23f;color:#fff;font-size:clamp(1.7rem,3.4vw,3.2rem);line-height:1;
  box-shadow:0 0 0 4px rgba(255,210,63,.18),0 10px 30px rgba(0,0,0,.55),0 0 34px rgba(255,63,164,.55);text-shadow:0 2px 0 rgba(0,0,0,.25);z-index:5}
.shopov.boutique .bqtimer.hurry{color:#fff;background:linear-gradient(160deg,#ff4a5f,#b0102e);border-color:#fff}
/* ---------- The finale: the big stage, packed with fans; winner with the trophy, the scores on the big screen ---------- */
.fnov{position:fixed;inset:0;z-index:56;overflow:hidden;background:#06021a;color:#fff;transition:opacity .9s}
.fnov.enter{animation:fnin 1.2s ease-out both}
.fnov.leaving{opacity:0}
@keyframes fnin{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.fnov .fnstudio{position:absolute;inset:0;overflow:hidden;display:block}
.fnov .fnstudio .stwall{left:9%;right:9%;top:7%;bottom:44%;opacity:1;border-radius:12px;box-shadow:0 0 120px 20px rgba(255,46,136,.5),inset 0 0 60px rgba(0,0,0,.4)}
.fnov .fnstudio .stfloor{height:46%}
.fnov .fnstudio .stbeam{opacity:.65}
/* the big screen: first the winner's name, then the scores */
.fnov .fnscreen{position:absolute;left:9%;right:9%;top:7%;bottom:44%;display:flex;align-items:center;justify-content:center;z-index:1}
.fnov .fntitle{text-align:center;transition:opacity .5s,transform .5s}
.fnov .fntitle span{display:block;font-size:clamp(2.5rem,7vh,5rem);animation:fnpulse 1.4s ease-in-out infinite alternate}
.fnov .fntitle b{display:block;font-size:clamp(1rem,3.4vh,2rem);letter-spacing:.3em;text-transform:uppercase;color:#ffd23f}
.fnov .fntitle em{display:block;font-style:normal;font-weight:900;font-size:clamp(2.2rem,8vh,5.6rem);line-height:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 4px 0 rgba(0,0,0,.3)}
.fnov.scores .fntitle{opacity:0;transform:scale(.8);position:absolute}
@keyframes fnpulse{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.15) rotate(4deg)}}
.fnov .fnboard{display:none;width:min(92%,900px);font-weight:800}
.fnov.scores .fnboard{display:block}
.fnov.scores .fnscreen{align-items:flex-start;padding-top:2vh}
.fnov .fnrow{display:grid;grid-template-columns:3.2em 1fr 8em 6em;align-items:center;gap:.6em;padding:.22em .8em;margin:.18em 0;border-radius:10px;background:rgba(10,4,40,.55);font-size:clamp(.8rem,2.3vh,1.35rem);opacity:0;animation:fnrow .45s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i) * .25s)}
.fnov .fnrow span:nth-child(3),.fnov .fnrow span:nth-child(4){text-align:right;font-variant-numeric:tabular-nums}
.fnov .fnrow.w{background:linear-gradient(90deg,#ffd23f,#ffb200);color:#2a1700}
.fnov .fnhead{background:none;opacity:1;animation:none;font-size:clamp(.7rem,1.8vh,1rem);text-transform:uppercase;letter-spacing:.08em;color:#ffd23f}
.fnov .fnn{display:flex;align-items:center;gap:.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnov .fnn .char{width:1.8em;height:1.8em;flex:none}
@keyframes fnrow{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
/* on the stage: the other players at the back, the winner in front between the presenters */
.fnov .fnback{position:absolute;left:24%;right:24%;bottom:45vh;display:flex;justify-content:center;gap:5vw;z-index:2}
.fnov .fnp{position:relative;width:9vh;height:18vh;animation:grbob 2.2s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.fnov .fnp .char{position:absolute;left:50%;top:0;width:8vh;height:8vh;margin-left:-4vh;z-index:2}
.fnov .fnp>b{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:clamp(.6rem,1.5vh,.85rem);white-space:nowrap;background:rgba(0,0,0,.45);padding:.05em .45em;border-radius:6px}
.fnov .fnwin{position:absolute;left:50%;bottom:17vh;transform:translateX(-50%);z-index:4;text-align:center}
.fnov .fnp.big{width:17vh;height:30vh;margin:0 auto}
.fnov .fnp.big .char{width:15vh;height:15vh;margin-left:-7.5vh}
.fnov .fnname{display:inline-block;margin-top:.4vh;font-size:clamp(1rem,3vh,1.8rem);font-weight:900;background:linear-gradient(90deg,#ffd23f,#ffb200);color:#2a1700;padding:.15em .8em;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.fnov .fnhosts .ehost{position:absolute;bottom:5vh;height:50vh;width:auto;z-index:4;filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));animation:ehbob 3.2s ease-in-out infinite alternate}
.fnov .fnhosts .him{left:14vw}.fnov .fnhosts .her{right:14vw;animation-delay:-1.6s}
.fnov .fnbub{position:absolute;top:30vh;max-width:28vw;z-index:6;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1rem,1.9vw,1.5rem);line-height:1.25;padding:.65em 1em;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.fnov .fnbub.him{left:3vw;border-bottom-left-radius:4px}.fnov .fnbub.her{right:3vw;border-bottom-right-radius:4px}
.fnov .fnbub.on{opacity:1;transform:none}
.fnov.scores .fnbub{opacity:0}
/* the fans in front of the stage: heads and shoulders, flags and phones in the air */
.fnov .fncrowd{position:absolute;left:-2%;right:-2%;bottom:0;height:16vh;z-index:7;pointer-events:none}
.fnov .fnfan{position:absolute;bottom:0;width:6vh;height:calc(9vh * var(--h));margin-left:-3vh;animation:fnjump .55s ease-in-out infinite alternate;animation-delay:var(--d)}
.fnov .fnfan::before{content:'';position:absolute;left:50%;top:0;width:3.6vh;height:3.6vh;margin-left:-1.8vh;border-radius:50%;background:#0c0618}
.fnov .fnfan::after{content:'';position:absolute;left:0;right:0;top:3vh;bottom:-1vh;border-radius:3vh 3vh 0 0;background:#0c0618}
.fnov .fnfan.r0{bottom:7vh;filter:brightness(1.6) saturate(.6);opacity:.75;transform:scale(.8)}
.fnov .fnfan.r1{bottom:3.5vh;filter:brightness(1.3)}
.fnov .fnflag{position:absolute;left:70%;bottom:calc(9vh * var(--h) - 2vh);width:2px;height:7vh;background:#ccc;transform-origin:50% 100%;animation:grwave 1s ease-in-out infinite alternate;animation-delay:var(--d);z-index:1}
.fnov .fnflag img{position:absolute;left:2px;top:0;width:4.6vh;height:auto;border-radius:2px}
.fnov .fnphone{position:absolute;left:65%;bottom:calc(9vh * var(--h) - 1vh);width:1.2vh;height:2vh;border-radius:3px;background:#dff;box-shadow:0 0 12px 4px rgba(200,255,255,.6);animation:fnjump .9s ease-in-out infinite alternate}
@keyframes fnjump{from{transform:translateY(0)}to{transform:translateY(-1.2vh)}}
/* confetti */
.fnov .fnconf{position:absolute;inset:0;pointer-events:none;z-index:8}
.fnov .fnconf i{position:absolute;top:-4vh;width:1vh;height:1.6vh;background:var(--c);border-radius:2px;animation:fnfall var(--t) linear infinite;animation-delay:var(--d)}
@keyframes fnfall{from{transform:translateY(0) rotate(0)}to{transform:translateY(110vh) rotate(720deg)}}
@media (prefers-reduced-motion:reduce){.fnov *{animation:none!important}}

/* the finale: full bodies (the lobby figure), a flag in every hand; the winner holds up the trophy and waves the flag */
.fnov .fnp .lbod{position:absolute;left:50%;top:6.6vh;width:5.6vh;height:8.6vh;margin-left:-2.8vh;z-index:1}
.fnov .fnp .lbod .ca .hflag{left:.1vh;top:-1.6vh;width:3.8vh;height:5.4vh}
.fnov .fnp>b{bottom:-.6vh}
.fnov .fnp.big{height:32vh}
.fnov .fnp.big .lbod{top:12.6vh;width:11vh;height:17vh;margin-left:-5.5vh}
.fnov .fnp.big .lbod .ca{width:20%;height:46%}
.fnov .fnp.big .lbod .ca:nth-of-type(3){left:-6%;rotate:148deg;z-index:3;transition:rotate .9s cubic-bezier(.3,1.4,.5,1)}
.fnov .fnp.big .lbod .ca:nth-of-type(4){right:-6%;rotate:-150deg;z-index:3;animation:fnwave .7s ease-in-out infinite alternate}
.fnov .fnp.big .lbod .ca .hflag{left:50%;top:auto;bottom:-1.2vh;width:9vh;height:12vh;transform-origin:0 100%;animation:fnwaveflag .7s ease-in-out infinite alternate}
.fnov .fnp.big .lbod .ca .hflag img{animation-duration:.45s}
.fnov .fntro{position:absolute;left:50%;top:100%;font-size:8vh;line-height:1;transform:translate(-50%,-25%) rotate(-148deg);filter:drop-shadow(0 0 18px rgba(255,210,63,.9));z-index:4;pointer-events:none}
.fnov:not(.raise) .fnp.big .lbod .ca:nth-of-type(3){rotate:40deg}
.fnov:not(.raise) .fntro{transform:translate(-50%,-25%) rotate(-40deg)}
.fnov .fntro{transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes fnwave{from{rotate:-135deg}to{rotate:-170deg}}
@keyframes fnwaveflag{from{rotate:125deg}to{rotate:185deg}}
/* (sizes: the winner a little smaller, the others in the back smaller) */
.fnov .fnp{width:7vh;height:14vh}
.fnov .fnp .char{width:6vh;height:6vh;margin-left:-3vh}
.fnov .fnp .lbod{top:4.9vh;width:4.2vh;height:6.6vh;margin-left:-2.1vh}
.fnov .fnp .lbod .ca .hflag{top:-1.2vh;width:2.9vh;height:4.1vh}
.fnov .fnp.big{width:14vh;height:27vh}
.fnov .fnp.big .char{width:12vh;height:12vh;margin-left:-6vh}
.fnov .fnp.big .lbod{top:10vh;width:9vh;height:14vh;margin-left:-4.5vh}
.fnov .fnp.big .lbod .ca .hflag{top:auto;bottom:-1vh;width:7.5vh;height:10vh}
.fnov .fntro{font-size:6.5vh}
.fnov .fnp.big .lbod .ca:nth-of-type(3){rotate:162deg}
.fnov.raise .fntro{transform:translate(-50%,-25%) rotate(-162deg)}
.fnov .fnback{bottom:41vh}
.fnov .fnp.big{width:15vh;height:27vh}
.fnov .fnp.big .char{width:13.5vh;height:13.5vh;margin-left:-6.75vh}
.fnov .fnp.big .lbod{top:11.3vh;width:10vh;height:15.5vh;margin-left:-5vh}
.fnov .fnp.big .lbod .ca .hflag{width:8vh;height:10.8vh}
.fnov .fntro{font-size:7vh}
.fnov .fngap{flex:0 0 14vh}
.fnov .fnback{left:10%;right:10%}
/* the others: at the left and right side of the stage, out of the way */
.fnov .fnback{left:auto;right:auto;bottom:31vh;width:15%;gap:0;justify-content:center}
.fnov .fnback.l{left:1.5%}
.fnov .fnback.r{right:1.5%}
.fnov .fnback .fnp{margin:0 -.6vh}
.fnov .fnback .fnp{margin:0 .5vh}
.fnov .fnback .fnp>b{max-width:9vh;overflow:hidden;text-overflow:ellipsis}
.fnov .fnwin{bottom:19vh}
/* (the finale: no flag on the avatar, it's in the hand; the arms in front of the face, the body behind it) */
.fnov .fnp .chflag{display:none}
.fnov .fnp .lbod{z-index:auto}
.fnov .fnp .lbod .ct{z-index:1}
.fnov .fnp .lbod .cl{z-index:1}
.fnov .fnp .lbod .ca{z-index:3}
.fnov .fnp .char{z-index:2}
/* Verona: the walking (legs, arms, bobbing) at half the speed */
.jmt.run .char,.jmt.home .char,.jmt.falling .char,.jmt.run .hflag,.jmt.home .hflag,.jmt.falling .hflag{animation-duration:.36s}
.jmt.run .jmlegs i,.jmt.home .jmlegs i,.jmt.falling .jmlegs i,.jmt.run .jmbody i,.jmt.falling .jmbody i,.jmt.home .jmbody i{animation-duration:.44s}
.jmt.falling.hop .hflag,.jmt.falling.hop .char{animation-duration:.75s}
/* the finale: the winner's victory song list on the phone, and the song on the big screen */
.finui{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:12px;max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px}
.finopt{border:0;border-radius:14px;padding:12px 14px;font:800 1rem/1.25 inherit;font-family:inherit;color:#fff;text-align:left;cursor:pointer;background:linear-gradient(135deg,#7b3fe4,#e8457c);box-shadow:0 3px 10px rgba(0,0,0,.3)}
.finopt:active{transform:scale(.98)}
.fnov .fntitle .fnpick{font-size:clamp(1.6rem,5vh,3.4rem)}
.fnov.song .fntitle{opacity:1;transform:none;position:static}
.fnov .fntitle .fnart{display:block;margin-top:1vh;font-size:clamp(1rem,3.4vh,2.2rem);font-weight:800;opacity:.9}
.fnov.song .fntitle em{font-size:clamp(2rem,7vh,5rem)}
.fnov .fnend{position:absolute;right:2vw;bottom:2vh;z-index:20;border:0;border-radius:99px;padding:.6em 1.2em;font:800 1rem inherit;font-family:inherit;color:#fff;background:rgba(0,0,0,.55);cursor:pointer;opacity:.75}
.fnov .fnend:hover{opacity:1}
/* (the presenters' slide-in plays once: it used to inherit "infinite alternate" from their bobbing, so they slid in, out and in again) */
.game.enter .shosts .ehost{animation-iteration-count:1;animation-direction:normal}
/* the finale: the Grand Final's own trophy in the winner's hand (held at the stem) */
.fnov .fntro{font-size:0;line-height:0;height:12vh;width:auto;transform-origin:50% 60%;transform:translate(-50%,-60%) rotate(-40deg)}
.fnov.raise .fntro{transform:translate(-50%,-60%) rotate(-162deg)}
.fnov .fntro svg{height:100%;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(159,217,255,.9))}
.fnov .fntro .fnrays{display:none}
/* the victory song on the LED wall: the video, with the wall's pixel grid over it */
.fnov .fnscreen{border-radius:12px}
.fnov .fnvid{position:absolute;inset:0;border-radius:12px;overflow:hidden;z-index:0;opacity:0;transition:opacity 1.2s;background:#000}
.fnov .fnvid.on{opacity:1}
.fnov .fnvid iframe{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1.04);border:0;pointer-events:none}
.fnov .fnvidgrid{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.38) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.35));mix-blend-mode:multiply}
.fnov.song .fntitle{position:absolute;left:3%;bottom:5%;z-index:2;text-align:left;background:linear-gradient(90deg,rgba(10,4,30,.85),rgba(10,4,30,.4));padding:1vh 2.4vh 1.2vh;border-radius:10px;border-left:4px solid #ffd23f}
.fnov.song .fntitle span{display:none}
.fnov.song .fntitle b{font-size:clamp(.7rem,1.8vh,1.1rem);letter-spacing:.2em}
.fnov.song .fntitle em{font-size:clamp(1.2rem,4vh,2.6rem);text-shadow:none}
.fnov.song .fntitle .fnart{font-size:clamp(.8rem,2.2vh,1.4rem);margin-top:.3vh}
.fnov .fntro{height:19vh}
.fnov.song .fntitle{bottom:auto;top:6%}
/* Key Change: the microphone of who is still singing sits under the avatar (not on the flag) */
.answered .pen.mic{right:auto;left:50%;top:44px;translate:-50% 0;z-index:2}
/* the finale: during the victory song the spotlights go out, only the LED wall shines */
.fnov .fnstudio .stbeam,.fnov .fnstudio .sthaze{transition:opacity 1.2s}
.fnov.song .fnstudio .stbeam,.fnov.song .fnstudio .sthaze{opacity:0}
.finconf{display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:center}
.finconf b{font-size:1.2rem}
.finconf span{font-weight:800;font-size:1.1rem;padding:12px;border-radius:14px;background:rgba(255,255,255,.1)}
.finyes,.finback{border:0;border-radius:14px;padding:14px;font:900 1.1rem inherit;font-family:inherit;color:#fff;cursor:pointer}
.finyes{background:linear-gradient(135deg,#2fd27a,#139a50)}
.finback{background:rgba(255,255,255,.14)}
.fnov .fnbub.her{top:35vh;right:1.5vw;max-width:22vw}
.fnov .fntimer{position:absolute;right:11vw;top:9vh;z-index:7;font-weight:900;font-size:clamp(1.2rem,3.4vh,2.2rem);color:#fff;background:rgba(10,4,30,.75);border:3px solid #ffd23f;border-radius:99px;padding:.2em .8em;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.fnov .fntimer b{font-variant-numeric:tabular-nums}
.fnov .fntimer.hurry{border-color:#ff4d6a;color:#ff4d6a;animation:fsshake .12s linear infinite alternate}
.fnov .fntimer{right:auto;left:10vw;top:8.5vh}
/* the Grand Final's monster at the side of the stage, as big as the players (next to the right-hand group) */
.fnov .fnmon{position:absolute;right:17.5%;bottom:31vh;z-index:2;display:flex;flex-direction:column;align-items:center;animation:grbob 2.6s ease-in-out infinite alternate}
.fnov .fnmonfig{height:14vh;display:flex;align-items:flex-end}
.fnov .fnmonfig svg{height:100%;width:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.fnov .fnmon b{margin-top:.3vh;font-size:clamp(.55rem,1.3vh,.8rem);white-space:nowrap;background:rgba(0,0,0,.45);padding:.05em .45em;border-radius:6px}
.fnov .fntimer{left:1vw;top:7vh}
.fnov .fnback.r{right:7%}
.fnov .fnmon{right:.6%}
/* Edgar: Teya & Salena at the reception hand the fastest detective extra clues */
.edlobroom .edrecbub{position:absolute;left:50%;bottom:27%;transform:translate(-50%,10px) scale(.8);z-index:3;background:#fff;color:#2b1830;font-weight:900;font-size:clamp(.55rem,.95vw,.95rem);padding:.4em .8em;border-radius:12px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.5);opacity:0;transition:opacity .4s,transform .4s}
.edlobroom .edrecbub.on{opacity:1;transform:translate(-50%,0) scale(1)}
.edtok.fast .char{box-shadow:0 0 0 3px #ffd23f,0 0 18px #ffd23f}
.edlobroom .edrecbub{white-space:normal;width:88%;text-align:center;bottom:31%;font-size:clamp(.55rem,.85vw,.9rem)}
/* the boutique covers everything at once (it used to be see-through for a moment while sliding in: the studio flashed by) */
.shopov{background:#0b0520;backdrop-filter:none}
/* Postcard Picasso: who scored for this postcard, under it (the artist first, with a 🎨) */
.pcpts{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:1vh 1.4vw;max-width:80vw;z-index:6;opacity:0;transition:opacity .4s}
.pcpts.on{opacity:1}
.pcpt{display:flex;align-items:center;gap:.6vh;background:rgba(10,4,30,.82);border:2px solid #7dffb0;border-radius:99px;padding:.4vh 1.2vh .4vh .4vh;font-weight:800;font-size:clamp(.8rem,1.9vh,1.2rem);color:#fff;animation:inUp .5s calc(var(--i) * .12s) both}
.pcpt.art{border-color:#ffd23f}
.pcpt .char{width:4.2vh;height:4.2vh}
.pcpt em{font-style:normal;color:#7dffb0;font-weight:900}
.pcpt.art em{color:#ffd23f}
.pcnone{font-weight:900;font-size:clamp(1rem,2.4vh,1.5rem);background:rgba(10,4,30,.82);padding:.6vh 1.6vh;border-radius:12px}

/* Zero Gravity: asteroids flying across space on the big screen, and the flash when one hits a player */
.zgsky{position:absolute;inset:0;z-index:2;pointer-events:none}
.zgsky i{position:absolute;display:none;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 34% 30%,#c9a27a,#8a6440 45%,#4a3020 80%);box-shadow:inset -1.2vh -1.5vh 0 rgba(0,0,0,.3),0 0 4vh rgba(255,140,60,.45);opacity:.9}
.zgboom{position:absolute;left:0;bottom:calc(var(--h) - 2vh);translate:-50% 0;font-size:9vh;z-index:9;animation:zgboom 1.6s ease-out forwards;pointer-events:none}
@keyframes zgboom{0%{scale:.2;opacity:1}30%{scale:1.3;opacity:1}100%{scale:1.6;opacity:0}}

/* Rule the World: the count. Rows that stop drop down and shake; the last two glow; the title pops; confetti at the end */
.ruov .rulist{display:flex;flex-direction:column}
.ruov .rulist .rult{order:-1}
.ruov .rulist .rult.pop{animation:rupop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes rupop{from{scale:.6}to{scale:1}}
.ruov .rulist .rurow.stop{opacity:.5;filter:grayscale(.7);animation:rushake .35s}
@keyframes rushake{25%{translate:-6px 0}50%{translate:6px 0}75%{translate:-3px 0}}
.ruov .rulist.duel .rurow:not(.stop){box-shadow:inset 4px 0 0 var(--c),0 0 0 2px var(--c),0 0 18px var(--c);animation:ruduel .5s ease-in-out infinite alternate}
@keyframes ruduel{to{scale:1.04}}
.ruov .rulist .rurow.tick .rucn{animation:rupop .25s cubic-bezier(.2,1.6,.4,1)}
.ruov .rulist .rurow.win{scale:1.03;z-index:2}
.ruconf{position:absolute;inset:0;pointer-events:none;z-index:9}
.ruconf i{position:absolute;top:-4vh;width:1vh;height:1.6vh;background:var(--c);border-radius:2px;animation:fnfall var(--t) linear infinite;animation-delay:var(--d)}
/* the party game vote: once the game is chosen, the other three go dark */
#slotov .slcell.hi.out{filter:grayscale(1) brightness(.4)!important;opacity:.6;box-shadow:none!important;animation:none!important;transition:filter .5s,opacity .5s}
/* the finale winner holds the flag pole IN the hand: the pole runs through the fist (a quarter of it below), and turns around the grip */
.fnov .fnp.big .lbod .ca .hflag{left:calc(50% - .5vh);bottom:-1.6vh;transform-origin:.5vh 75%}
.fnov .fnp.big .lbod .ca .hflag::after{content:'';position:absolute;left:.5vh;top:75%;width:2.5vh;height:2.5vh;translate:-50% -50%;border-radius:50%;background:#e8b48c;box-shadow:inset -.25vh -.3vh 0 rgba(0,0,0,.15);z-index:2}
/* Zero Gravity on the phone: a crosshair through your dot, so you can see what you line up with */
.zgxh,.zgxv{position:absolute;z-index:3;pointer-events:none;background:rgba(255,255,255,.55);box-shadow:0 0 6px rgba(255,255,255,.6)}
.zgxh{left:0;right:0;top:50%;height:2px;margin-top:-1px}
.zgxv{top:0;bottom:0;left:50%;width:2px;margin-left:-1px}
/* Zero Gravity on the phone: clearer safe and danger areas. Everything outside the zone gets a red tint (stripes),
   the zone itself is brighter, with a thicker glowing edge */
.zgtrack{background:#150e34}
.zgzone{background:rgba(63,240,255,.42);box-shadow:0 0 0 999px rgba(255,45,70,.2),0 0 26px #3ff0ff,inset 0 0 0 4px #3ff0ff;z-index:1}
.zgzone::before{content:'SAFE';position:absolute;left:50%;top:8px;translate:-50% 0;font-weight:900;font-size:.7rem;letter-spacing:.12em;color:#dffcff;opacity:.8}
.zgtrack::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,60,80,.18) 0 10px,transparent 10px 22px);pointer-events:none}
.zgtrack[data-l="1"] .zgzone{box-shadow:0 0 0 999px rgba(255,170,40,.24),0 0 26px #ffd23f,inset 0 0 0 4px #ffd23f}
.zgtrack[data-l="2"] .zgzone{box-shadow:0 0 0 999px rgba(255,45,70,.38),0 0 26px #ff4d4d,inset 0 0 0 4px #ff4d4d}
/* Rule the World: the vote between the two acts (big screen), and the yellow floor of the second act */
.ruvote{position:absolute;left:50%;top:13vh;translate:-50% 0;z-index:12;display:flex;flex-direction:column;align-items:center;gap:1.6vh;animation:rupop .5s cubic-bezier(.2,1.6,.4,1)}
.ruvt{font-weight:900;font-size:clamp(1.3rem,3vw,2.6rem);color:#fff;text-shadow:0 0 18px #ff3fd0,0 3px 10px #000;background:rgba(20,6,40,.75);padding:.4vh 2vw;border-radius:16px;border:3px solid #ff3fd0}
.ruvcards{display:flex;gap:3vw}
.ruvc{width:22vw;max-width:300px;padding:1.6vh 1vw 1.2vh;border-radius:22px;background:rgba(20,8,40,.86);display:flex;flex-direction:column;align-items:center;gap:.8vh;transition:filter .5s,opacity .5s,scale .5s}
.ruvc.c0{border:4px solid #c8c8e0;box-shadow:0 0 30px rgba(200,200,255,.5)}
.ruvc.c1{border:4px solid #ffd23f;box-shadow:0 0 30px rgba(255,210,63,.55)}
.ruvart{height:26vh}.ruvart svg{height:100%;width:auto}
.ruvc b{font-weight:900;font-size:clamp(.9rem,1.8vw,1.6rem);color:#fff;text-align:center}
.ruvv{display:flex;flex-wrap:wrap;justify-content:center;gap:.5vh;min-height:5vh}
.ruvv i{animation:rupop .4s cubic-bezier(.2,1.6,.4,1)}.ruvv .char{width:4.6vh;height:4.6vh}
.ruvc.won{scale:1.08;box-shadow:0 0 0 4px #fff,0 0 60px #fff}
.ruvc.lost{filter:grayscale(1) brightness(.45);opacity:.7;scale:.92}
.ruvs{font-weight:900;font-size:clamp(1rem,2vw,1.7rem);color:#fff;text-shadow:0 2px 10px #000}
.ruov.act1 .rugrid > i:not(.own){background:rgba(255,210,40,.22)}
/* the phone */
.ruvote2{display:grid;gap:12px;width:100%}
.ruvb{border:0;border-radius:20px;padding:18px 14px;font:inherit;font-weight:900;font-size:1.25rem;color:#1a0b33;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.ruvb b{font-size:2rem}.ruvb small{font-weight:700;font-size:.85rem;opacity:.75}
.ruvb.a0{background:linear-gradient(160deg,#ffffff,#c8c8e0)}
.ruvb.a1{background:linear-gradient(160deg,#fff3a0,#f5cf1c)}
.ruvb.on{outline:5px solid #ff3fd0;scale:1.03}
.ruov.voting .ruhosts .him{left:1vw}.ruov.voting .ruhosts .her{left:77vw}
.ruov .ruhosts .ehost{transition:left 1s cubic-bezier(.3,.8,.3,1),translate 1.2s cubic-bezier(.3,.8,.3,1),opacity 1s}
.ruvc{background:#160830}
.ruov.voting .rubub.her{right:1vw;top:30vh;max-width:21vw}.ruov.voting .rubub.him{left:1vw;top:30vh;max-width:21vw}
/* Zero Gravity on the phone: everything fits on one screen, no scrolling to reach the play field */
#v-wait:has(#zgui:not(.hidden)){gap:6px;justify-content:flex-start}
#v-wait:has(#zgui:not(.hidden)) #waitlabel,#v-wait:has(#zgui:not(.hidden)) #profile{display:none}
#v-wait:has(#zgui:not(.hidden)) #waittitle{font-size:1.15rem;margin:0}
#v-wait:has(#zgui:not(.hidden)) #waitsub{font-size:.85rem;margin:0}
#zgui{gap:8px;margin-top:2px}
.zgtrack{width:min(88vw,360px,calc(100svh - 270px))}
.zghint{font-size:.75rem;line-height:1.2}
/* Edgar's reveal on the phone: the right card glows green, a wrong pick gets a red cross */
.clbtn.ok{border-color:#3ddc84;background:rgba(61,220,132,.35);opacity:1;text-decoration:none;box-shadow:0 0 12px rgba(61,220,132,.6);animation:rupop .4s cubic-bezier(.2,1.6,.4,1)}
.clbtn.ok::after{content:'✔';margin-left:auto;color:#3ddc84;font-weight:900}
.clbtn.bad{border-color:#ff4d4d;background:rgba(255,77,77,.22);position:relative}
.clbtn.bad::after{content:'✖';margin-left:auto;color:#ff4d4d;font-weight:900;font-size:1.1em}
/* Green Room: the flagpole sits in the raised hand (the flag is part of the arm, and the arm waves it) */
.grov .grarm{animation:grarmwave 1.1s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes grarmwave{from{rotate:10deg}to{rotate:38deg}}
.grov .grarm .grflag{left:50%;margin-left:-1px;bottom:3.4vh;height:10vh;width:2px;rotate:-24deg;transform-origin:50% 75%;animation:none;z-index:2}
/* Rule the World: frozen players turn icy blue, players with speed shoes leave a green glow */
.rut.frz .jmt,.rutok.frz{filter:hue-rotate(180deg) saturate(.4) brightness(1.3) drop-shadow(0 0 8px #7fe0ff)}
.rut.frz .rustar,.rutok.frz .rustar{font-size:0}.rut.frz .rustar::after,.rutok.frz .rustar::after{content:'❄️';font-size:2.4vh}
.rut.fast .jmt,.rutok.fast{filter:drop-shadow(0 0 10px #3ddc84) drop-shadow(0 0 4px #3ddc84)}
/* The Grand Final: the presenters on the stage, beside the trophy, with their speech balloons */
.chhosts{position:absolute;inset:0;pointer-events:none;z-index:30}
.chhosts .ehost{position:absolute;bottom:2vh;height:30vh;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));animation:ehbob 3.2s ease-in-out infinite alternate}
.chhosts .him{right:15vw}.chhosts .her{right:4vw;animation-delay:-1.6s}
.chbub{position:absolute;bottom:31vh;max-width:24vw;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(.9rem,1.5vw,1.3rem);line-height:1.25;padding:.6em .9em;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transform:translateY(8px) scale(.95);transition:opacity .3s,transform .3s}
.chbub.him{right:16vw;border-bottom-right-radius:4px}.chbub.her{right:2vw;border-bottom-right-radius:4px}
.chbub.on{opacity:1;transform:none}
.chbub .unsaid{opacity:0}
#chready.wait{opacity:.5;filter:grayscale(.6);cursor:default}
/* the Grand Final: the monster's own words first, alone, big and creepy */
.chcry.chcryonly{font-size:1.25em;color:#ff3a3a;text-shadow:0 0 22px rgba(255,0,0,.85),0 0 4px #000;font-style:italic;letter-spacing:.04em;margin:0;animation:chcryshake .12s steps(2) infinite,chcryin 1.2s ease-out}
@keyframes chcryshake{50%{translate:1px -1px}}
@keyframes chcryin{from{opacity:0;filter:blur(8px);scale:1.3}to{opacity:1;filter:none;scale:1}}

/* The danger zone and the spaces about to break take the colours of the monster's own glow */
.chtiles{--mg:#ff1744;--md:#3a0010;--ma:rgba(255,40,80,.45);--mb:rgba(255,200,0,.28)}
.chtiles[data-mon="goblin"]{--mg:#39ff14;--md:#062400;--ma:rgba(57,255,20,.4);--mb:rgba(10,60,0,.5)}
.chtiles[data-mon="phoenix"]{--mg:#ff7a00;--md:#3a1200;--ma:rgba(255,122,0,.45);--mb:rgba(255,210,60,.28)}
.chtiles[data-mon="fiddler"]{--mg:#b14dff;--md:#1c0033;--ma:rgba(177,77,255,.45);--mb:rgba(40,0,70,.5)}
.chtiles i.warn{background:repeating-linear-gradient(45deg,var(--ma) 0 8px,var(--mb) 8px 16px)}
.chtiles i.doom{background:repeating-linear-gradient(45deg,var(--mg) 0 8px,var(--md) 8px 16px);box-shadow:inset 0 0 0 3px var(--mg),0 0 22px var(--mg)}
.chtiles i.nsfglow{background:repeating-linear-gradient(45deg,var(--mg) 0 8px,var(--md) 8px 16px)!important;box-shadow:inset 0 0 0 3px var(--mg),0 0 26px var(--mg)!important}
.chtiles i.crumble{box-shadow:inset 0 0 0 2px var(--mg)!important}
.chtiles i.deny{box-shadow:inset 0 0 0 3px var(--mg),0 0 24px var(--mg)!important}

/* The monster won: it stands in the middle of the stage with the trophy, the light turns dark */
.fnov .fnmonwin{bottom:15vh}
.fnov .fnmonbig{position:relative;height:42vh;display:flex;align-items:flex-end;justify-content:center;animation:grbob 2.2s ease-in-out infinite alternate}
.fnov .fnmonbig>svg{height:100%;width:auto;display:block;filter:drop-shadow(0 0 30px var(--mglow,#ff1744)) drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.fnov .fnmonbig .fntro{left:72%;top:22%}
.fnov.monwin{--mglow:#ff1744}
.fnov.monwin[data-mon="goblin"]{--mglow:#39ff14}
.fnov.monwin[data-mon="phoenix"]{--mglow:#ff7a00}
.fnov.monwin[data-mon="fiddler"]{--mglow:#b14dff}
.fnov.monwin .fnname{background:linear-gradient(90deg,var(--mglow),#2a0010);color:#fff}
.fnov.monwin .fnconf{display:none}
.fnov.monwin .fnstudio{filter:hue-rotate(-30deg) saturate(.7) brightness(.55)}
.fnov.monwin .fnback .fnp{filter:saturate(.6) brightness(.8)}

/* Rules the World: the bump (a quick red flash), the stun (stars circling the head, wobbling) and the star power (a golden shine) */
.rut.hit .jmt{animation:ruhitflash .6s ease-out}
@keyframes ruhitflash{0%{filter:sepia(1) saturate(8) hue-rotate(-50deg) brightness(1.1) drop-shadow(0 0 12px #ff1744)}35%{filter:sepia(1) saturate(8) hue-rotate(-50deg) brightness(.9) drop-shadow(0 0 8px #ff1744)}100%{filter:none}}
.rut .rustar{position:absolute;left:50%;top:-14.5vh;width:0;height:0;display:none;font-size:2.2vh;animation:none}
.rut.stun .rustar{display:block}
.rut .rustar i{position:absolute;left:0;top:0;font-style:normal;line-height:1;transform:translate(-50%,-50%);animation:ruorbit 1s linear infinite}
.rut .rustar i:nth-child(2){animation-delay:-.333s}.rut .rustar i:nth-child(3){animation-delay:-.666s}
@keyframes ruorbit{0%{transform:translate(calc(-50% + 3.2vh),-50%) scale(1);opacity:1;z-index:2}25%{transform:translate(-50%,calc(-50% + 1vh)) scale(1.25);opacity:1;z-index:2}50%{transform:translate(calc(-50% - 3.2vh),-50%) scale(1);opacity:1}75%{transform:translate(-50%,calc(-50% - 1vh)) scale(.7);opacity:.55;z-index:0}100%{transform:translate(calc(-50% + 3.2vh),-50%) scale(1);opacity:1}}
.rut.stun .jmt{filter:grayscale(.55) brightness(.85);animation:rudizzy .5s ease-in-out infinite alternate;transform-origin:50% 100%}
.rut.stun.hit .jmt{animation:ruhitflash .6s ease-out,rudizzy .5s ease-in-out infinite alternate}
@keyframes rudizzy{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.rut .rustarglow{display:none}
.rut.fast .jmt{filter:brightness(1.25) saturate(1.3) drop-shadow(0 0 6px #fff6b0) drop-shadow(0 0 16px #ffd23f) drop-shadow(0 0 28px #ffb300);animation:rushine .25s ease-in-out infinite alternate}
@keyframes rushine{from{filter:brightness(1.15) saturate(1.2) drop-shadow(0 0 5px #fff6b0) drop-shadow(0 0 12px #ffd23f)}to{filter:brightness(1.45) saturate(1.5) drop-shadow(0 0 9px #fff) drop-shadow(0 0 26px #ffd23f) drop-shadow(0 0 40px #ffb300)}}
.rut.fast .rustarglow{display:block;position:absolute;left:50%;top:-7vh;width:12vh;height:12vh;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 8%,rgba(255,240,150,.85) 10%,transparent 12% 33%,rgba(255,240,150,.85) 35%,transparent 37% 58%,rgba(255,240,150,.85) 60%,transparent 62% 83%,rgba(255,240,150,.85) 85%,transparent 87%);-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%);animation:ruspin 1.2s linear infinite;mix-blend-mode:screen}
.rugrid > i.ruitem::after{content:'⭐';filter:drop-shadow(0 0 6px #ffd23f) drop-shadow(0 0 12px #ffb300)}

/* Rules the World: frozen solid by the snowflake: icy blue, in a block of ice, no wobble */
.rut.frz .jmt{filter:grayscale(.4) sepia(.3) hue-rotate(160deg) saturate(2.2) brightness(1.35) drop-shadow(0 0 6px #bfefff) drop-shadow(0 0 14px #5cc8ff)!important;animation:none!important}
.rut.frz .rustar i{display:none}
.rut.frz::after{content:'';position:absolute;left:50%;top:-6.5vh;width:7.5vh;height:12.5vh;transform:translate(-50%,-50%);border-radius:1.2vh;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(160,225,255,.25) 40%,rgba(120,200,255,.35));border:2px solid rgba(220,245,255,.85);box-shadow:inset 0 0 12px rgba(255,255,255,.7),0 0 18px rgba(120,210,255,.6);pointer-events:none;animation:ruice .35s cubic-bezier(.3,1.5,.5,1) both}
@keyframes ruice{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%)}}
.rut.frz .rustar{display:block}.rut.frz .rustar::after{content:'❄️';position:absolute;left:0;top:-1vh;transform:translate(-50%,-50%);font-size:2.4vh}
.rugrid > i.ruitem[data-it="freeze"]::after{content:'❄️';filter:drop-shadow(0 0 6px #7fd8ff) drop-shadow(0 0 12px #5cc8ff)}

/* Edgar: Teya & Salena only come to the reception once the first detective is done: they pop up from behind the desk */
.edlobart .edrecduo{transform:translateY(125px);transition:transform .55s cubic-bezier(.3,1.6,.5,1)}
.edlobroom.duo .edlobart .edrecduo{transform:translateY(0)}

/* Edgar's lobby: the reception desk on the north side (top), Teya & Salena behind it; the players with bodies, starting on the south side */
.edlobart{top:4.5vh;bottom:auto}
.edlobroom .edrecbub{bottom:auto;top:calc(4.5vh + 24% + 10.5vh)}
.edtok .edbody{display:none}
.edtok.lob .edbody{display:block;position:relative;width:3vh;height:4.2vh;margin-top:-.4vh}
.edtok.lob .edbody b{position:absolute;left:0;top:0;width:3vh;height:2.6vh;border-radius:40% 40% 18% 18%;background:var(--o1);box-shadow:inset 0 -.5vh 0 var(--o2),0 2px 5px rgba(0,0,0,.45)}
.edtok.lob .edbody i{position:absolute;top:2.3vh;width:1vh;height:1.9vh;border-radius:.5vh;background:var(--ol)}
.edtok.lob .edbody i:nth-of-type(1){left:.4vh}.edtok.lob .edbody i:nth-of-type(2){right:.4vh}
.edtok.lob em{margin-top:-.2vh}
.edlobart{overflow:hidden}

/* Rules the World: the star much clearer: bigger, a golden ring on the floor, a spinning star above the head */
.rut.fast .jmt{scale:1.18}
.rut.fast::before{content:'';position:absolute;left:0;top:0;width:9vh;height:3.6vh;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,240,150,.95),rgba(255,200,40,.6) 45%,rgba(255,180,0,0) 72%);box-shadow:0 0 22px #ffd23f;animation:rustarfloor .35s ease-in-out infinite alternate;pointer-events:none}
@keyframes rustarfloor{from{opacity:.7;scale:.9}to{opacity:1;scale:1.12}}
.rut.fast::after{content:'⭐';position:absolute;left:0;top:-15.5vh;transform:translate(-50%,-50%);font-size:3.4vh;filter:drop-shadow(0 0 8px #ffd23f) drop-shadow(0 0 16px #ffb300);animation:rustartop .8s linear infinite;pointer-events:none}
@keyframes rustartop{from{rotate:0deg;scale:1}50%{scale:1.25}to{rotate:360deg;scale:1}}
.rut.fast .rustarglow{width:16vh;height:16vh}

/* Edgar: the lobby lights */
.edlobroom{transition:filter .8s}
.edov2 .edlobroom.dark{filter:brightness(.32) saturate(.55)}

/* Rules the World: the little countdowns above the heads */
.rut .rutime{position:absolute;left:0;top:-18vh;transform:translate(-50%,-50%);min-width:3.4vh;padding:.15vh .8vh;border-radius:1.2vh;font:900 2.6vh/1.25 system-ui,sans-serif;text-align:center;color:#fff;background:rgba(10,6,24,.82);box-shadow:0 2px 6px rgba(0,0,0,.5);display:none;pointer-events:none}
.rut .rutime[data-k="stn"]{display:block;background:#ff1744}
.rut .rutime[data-k="frz"]{display:block;background:#2f9bff;box-shadow:0 0 10px #7fd8ff}
.rut .rutime[data-k="str"]{display:block;background:linear-gradient(#ffe066,#ffb300);color:#3a2400;box-shadow:0 0 12px #ffd23f}
.rut.fast .rutime{top:-19.5vh}
/* the phone when frozen: everything turns to ice, a big countdown over the arrows */
#ruui .rufrz{display:none}
#ruui.frz{position:relative}
#ruui.frz .rufrz{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:-1vh;z-index:5;pointer-events:none;border-radius:24px;background:linear-gradient(160deg,rgba(225,247,255,.55),rgba(140,210,255,.45) 55%,rgba(90,170,240,.5));border:3px solid #e8f8ff;box-shadow:inset 0 0 30px rgba(255,255,255,.9),0 0 30px rgba(120,210,255,.8);color:#0b3a66;font-size:4.5rem;animation:rufrzin .35s cubic-bezier(.3,1.5,.5,1)}
#ruui.frz .rufrz b{font-size:2.2rem;letter-spacing:.12em;margin-top:.2em}
#ruui.frz .rufrz span{font-size:3.4rem;font-weight:900;line-height:1}
@keyframes rufrzin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
body.rufrozen{background:linear-gradient(#bfe9ff,#6fb8ef)!important}
body.rufrozen #waittitle{color:#0b3a66}
.ruov.wait3d .ruboard,.ruov.wait3d .rutoks{visibility:hidden}

/* frozen or stunned, you can still pick a direction: you set off as soon as it wears off */
#ruui.frz .rupad .rub{filter:hue-rotate(160deg) saturate(.5) brightness(1.2)}

.edtok.walkin{transition:top 1.6s cubic-bezier(.3,.7,.4,1),opacity .25s!important}
.edtok.walkin .edbody i:nth-of-type(1){animation:edwalk .25s ease-in-out infinite alternate}.edtok.walkin .edbody i:nth-of-type(2){animation:edwalk .25s ease-in-out infinite alternate-reverse}
@keyframes edwalk{from{transform:translateY(-.3vh)}to{transform:translateY(.2vh)}}

/* Edgar's intro: the old hotel lobby behind the poster */
.clueov .clhotel{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;filter:brightness(.85)}
.clueov .clhotel .hlamp{animation:hflicker 4s steps(1) infinite}
@keyframes hflicker{0%,100%{opacity:1}7%{opacity:.55}8%{opacity:1}52%{opacity:.8}53%{opacity:.35}55%{opacity:1}78%{opacity:.9}}
.clueov .clhotel .hpeyes{animation:hpeyes 6s ease-in-out infinite}
@keyframes hpeyes{0%,40%,100%{opacity:.15}48%,70%{opacity:1}}
.clueov .clhotel .hpend{transform-origin:50% 0;transform-box:fill-box;animation:hpend 2s ease-in-out infinite alternate}
@keyframes hpend{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
.clueov .clhotel .hchand{transform-origin:800px 0;transform-box:view-box;animation:hchand 5s ease-in-out infinite alternate}
@keyframes hchand{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
/* Grand Final: the tiles that break take a dark shade of the monster's own glow (not always dark red) */
.chtiles{--mk1:#5a1022;--mk2:#2a0610}
.chtiles[data-mon="goblin"]{--mk1:#1f6a10;--mk2:#082a04}
.chtiles[data-mon="phoenix"]{--mk1:#7a3a06;--mk2:#2e1402}
.chtiles[data-mon="fiddler"]{--mk1:#4a1a7a;--mk2:#1c0a32}
.chtiles i.crumble{background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.25) 0 2px,transparent 3px),linear-gradient(135deg,var(--mk1),var(--mk2))!important}
.chtiles i.nsfsmash{background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.25) 0 2px,transparent 3px),linear-gradient(135deg,var(--mk1),var(--mk2))!important;box-shadow:inset 0 0 0 2px var(--mg)!important}

/* Edgar's intro: the photo of Teya & Salena as a real framed picture on the hotel wall (gilded frame, a mat, a brass plaque, hanging on a wire) */
.clueov .clframe{left:25vw;right:auto;top:17vh;width:15vh;padding:1.1vh;border-radius:3px;background:#f1e6cf;border:1.3vh solid #8a6420;border-image:linear-gradient(135deg,#f3d47a,#a5761f 30%,#5a3a0c 55%,#c99a3a 80%,#6a4610) 1;box-shadow:inset 0 0 0 2px rgba(90,58,12,.6),inset 0 0 14px rgba(60,40,10,.35),0 14px 26px rgba(0,0,0,.75),0 0 0 2px #2a1a06;transform:rotate(-2.5deg);filter:brightness(.82) sepia(.15)}
.clueov .clframe img{border:2px solid #5a3a0c;box-shadow:inset 0 0 18px rgba(0,0,0,.5)}
.clueov .clframe small{position:absolute;left:50%;bottom:-4.6vh;transform:translateX(-50%);width:110%;margin:0;padding:.35vh .4vh;font-size:.95vh;color:#2a1a06;background:linear-gradient(#e8c66a,#a5761f);border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.clueov .clframe::before{content:'';position:absolute;left:50%;top:-6vh;width:9vh;height:5vh;transform:translateX(-50%);background:linear-gradient(to bottom right,transparent calc(50% - 1px),#2a1a10 calc(50% - 1px),#2a1a10 calc(50% + 1px),transparent calc(50% + 1px)) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent calc(50% - 1px),#2a1a10 calc(50% - 1px),#2a1a10 calc(50% + 1px),transparent calc(50% + 1px)) right/50% 100% no-repeat;pointer-events:none}
.clueov .clframe::after{content:'';position:absolute;left:50%;top:-6.6vh;width:1.2vh;height:1.2vh;margin-left:-.6vh;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8b060,#5a3a0c);box-shadow:0 2px 3px rgba(0,0,0,.6)}
.clueov.noframe .clframe{opacity:0;transform:rotate(-2.5deg) scale(.6)}

/* Zero Gravity: the space crooner on his meteor */
.zgrider{position:absolute;left:0;top:var(--y,20vh);pointer-events:none;z-index:5;animation:zgride 7s linear forwards}
.zgrider .zgrsvg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 2vh rgba(255,170,60,.45));animation:zgridebob 1.4s ease-in-out infinite alternate}
.zgrider.intro{width:58vh}
.zgrider.pass{width:24vh;z-index:2;animation-duration:11s;opacity:.92}
@keyframes zgride{from{transform:translate(-50vh,6vh) rotate(-6deg)}to{transform:translate(calc(100vw + 10vh),-4vh) rotate(4deg)}}
@keyframes zgridebob{from{translate:0 -.8vh;rotate:-2deg}to{translate:0 .8vh;rotate:2deg}}

/* Zero Gravity: the asteroids turn, have craters and a colour of their own, and a fiery trail behind them */
.zgsky i{background:none!important;box-shadow:none!important;overflow:visible}
.zgsky i b{position:absolute;inset:0;border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;background:radial-gradient(circle at 28% 34%,rgba(0,0,0,.35) 0 9%,rgba(255,255,255,.12) 10% 12%,transparent 13%),radial-gradient(circle at 64% 60%,rgba(0,0,0,.32) 0 13%,rgba(255,255,255,.1) 14% 16%,transparent 17%),radial-gradient(circle at 44% 76%,rgba(0,0,0,.3) 0 6%,transparent 7%),radial-gradient(circle at 70% 28%,rgba(0,0,0,.28) 0 5%,transparent 6%),radial-gradient(circle at 34% 30%,var(--r1),var(--r2) 45%,var(--r3) 82%);box-shadow:inset -1.2vh -1.5vh 0 rgba(0,0,0,.3),0 0 4vh rgba(255,140,60,.45);z-index:1}
.zgsky i[data-v="0"]{--r1:#c9a27a;--r2:#8a6440;--r3:#4a3020}
.zgsky i[data-v="1"]{--r1:#b8b4ae;--r2:#77736e;--r3:#3a3836}
.zgsky i[data-v="2"]{--r1:#c98a6a;--r2:#8a4a34;--r3:#4a2418}
.zgsky i[data-v="3"]{--r1:#a6a8b8;--r2:#5e6274;--r3:#2c2e3c}
.zgsky i[data-v="4"]{--r1:#d4bc8a;--r2:#9a7e4a;--r3:#54401e}
.zgsky i::before{content:'';position:absolute;top:18%;height:64%;width:240%;border-radius:50%;filter:blur(.4vh);z-index:0;pointer-events:none}
.zgsky i[data-d="r"]::before{right:45%;background:linear-gradient(to left,rgba(255,246,190,.95),rgba(255,180,70,.6) 30%,rgba(255,110,30,.25) 65%,transparent)}
.zgsky i[data-d="l"]::before{left:45%;background:linear-gradient(to right,rgba(255,246,190,.95),rgba(255,180,70,.6) 30%,rgba(255,110,30,.25) 65%,transparent)}

/* Edgar: the dancers in the Euroclub dance: arms down, one arm up, the other arm up */
.edmoves>g{opacity:0;animation:edmove var(--mt,1.8s) steps(1) infinite;animation-delay:var(--md,0s)}
.edmoves>.edm0{animation-name:edmove0}.edmoves>.edm1{animation-name:edmove1}.edmoves>.edm2{animation-name:edmove2}
@keyframes edmove0{0%,100%{opacity:1}33.3%,66.6%{opacity:0}}
@keyframes edmove1{0%,66.6%,100%{opacity:0}33.3%{opacity:1}}
@keyframes edmove2{0%,33.3%,100%{opacity:0}66.6%{opacity:1}}
/* Zero Gravity: once a player is out, their pole slides down out of view, behind the Earth */
.zgov .zgp.out{translate:0 80vh;transition:translate 2.6s cubic-bezier(.5,0,.8,.6) 4.6s}
.zgov .zgp.out.hit{transition-delay:1.9s}

/* Zero Gravity: Sam riding one of the real asteroids (without his own meteor: he sits on the rock) */
.zgsky i .zgsam{position:absolute;left:-96%;top:-92%;width:220%;z-index:2;pointer-events:none}
.zgsky i .zgsam .zgrsvg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 1vh rgba(255,170,60,.35))}
.zgsky i .zgsam .zgrmet{display:none}
.zgsky i[data-d="l"] .zgsam{left:-24%;transform:scaleX(-1)}

/* Turquoise Carpet: flat (2D) contestants walking over the 3D square (TC_FIG2D) */
.tcov.is3d.fig2d .tcwalk{display:block;z-index:3;bottom:22vh;height:37vh;filter:drop-shadow(0 1.2vh 1vh rgba(0,0,0,.45)) drop-shadow(0 0 2vh rgba(255,255,255,.25))}

/* Turquoise Carpet (2D): the side view while walking, the front view while posing; groups in their rows */
.tcg{display:block}
.tcg .tcgrow{position:absolute;left:50%;bottom:0;height:100%;display:flex;align-items:flex-end;transform:translateX(-50%)}
.tcg .tcgrow.back{height:84%;bottom:9%;filter:brightness(.92)}
.tcg.grp .tcgrow.front{height:92%}
.tcone{position:relative;height:100%;display:block;margin:0 -1.2vh;flex:none}
.tcone>.tcgirl{height:100%;width:auto;display:block}
.tcone>.tcfront{position:absolute;left:0;top:0;opacity:0;overflow:visible}
.tcone>.tcgirl{transition:opacity .18s}
.tcg.posing .tcone>.tcfront{opacity:1}
.tcg.posing .tcone>.tcgirl:not(.tcfront){opacity:0}
.tcg .tcone>.tcgirl{filter:none}
.tcov.is3d.fig2d .tcwalk{filter:none}
.tcone{filter:drop-shadow(0 1vh 1vh rgba(0,0,0,.45))}

/* We Will Rule the World: the 2D singer (RU_SING2D) */
.rus2d{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:none;z-index:2}
.rus2d .rs2svg{height:100%;width:auto;display:block;filter:drop-shadow(0 0 1.6vh rgba(255,240,255,.45))}
.rus2d .rspose{opacity:0}
.rus2d .rspose.p0{opacity:1}
.rus2d.dance .rspose{animation:rspose 2s steps(1) infinite}
.rus2d.dance .rspose.p0{animation-name:rsp0}.rus2d.dance .rspose.p1{animation-name:rsp1}.rus2d.dance .rspose.p2{animation-name:rsp2}.rus2d.dance .rspose.p3{animation-name:rsp3}
@keyframes rsp0{0%{opacity:1}25%,100%{opacity:0}}
@keyframes rsp1{0%,25%{opacity:0}25.01%{opacity:1}50%,100%{opacity:0}}
@keyframes rsp2{0%,50%{opacity:0}50.01%{opacity:1}75%,100%{opacity:0}}
@keyframes rsp3{0%,75%{opacity:0}75.01%{opacity:1}100%{opacity:1}}
.rus2d .rsbody{transform-box:view-box;transform-origin:120px 434px}
.rus2d.dance .rsbody{animation:rssway 1s ease-in-out infinite alternate}
@keyframes rssway{from{transform:rotate(-3deg) translateX(-3px)}to{transform:rotate(3deg) translateX(3px)}}
.rus2d .rshead{transform-box:view-box;transform-origin:120px 140px}
.rus2d.dance .rshead{animation:rshead .5s ease-in-out infinite alternate}
@keyframes rshead{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.rus2d .rsfr{transform-box:fill-box;transform-origin:50% 0}
.rus2d.dance .rsfr{animation:rsfr .25s ease-in-out infinite alternate}
@keyframes rsfr{from{transform:skewX(-10deg)}to{transform:skewX(10deg)}}
.rus2d .rsspk{transform-box:fill-box;transform-origin:center;animation:rsspk 1.1s ease-in-out infinite}
@keyframes rsspk{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.1)}}
/* Turquoise Carpet: the question card a bit smaller and lower, so the act on the roof sign stays readable */
.tcov.is3d .tcq{top:28vh;left:6vw;right:33vw;padding:1.6vh 1.6vw}
.tcov.is3d .tcqt{font-size:clamp(1.2rem,2.5vw,2.2rem);margin-bottom:1.8vh}
.tcov.is3d .tcopts{gap:1.2vh 1.1vw}
.tcov.is3d .tcopt{padding:1.3vh 1.1vw;font-size:clamp(1rem,1.8vw,1.65rem)}
/* the group: the back row a little higher, and shifted half a figure when both rows are the same size, so nobody hides behind someone */
.tcg .tcgrow.back{bottom:14%}
.tcg.even .tcgrow.front{transform:translateX(calc(-50% + 4.5vh))}
.tcg.even .tcgrow.back{transform:translateX(calc(-50% - 4.5vh))}
/* Zero Gravity: a knocked-off player's pole really slides away behind the Earth (this beats the rise-up rule, which stays on) */
.zgov.intro.rise2 .zgp.out,.zgov.rise2 .zgp.out{translate:0 80vh;transition:translate 2.6s cubic-bezier(.5,0,.8,.6) 4.6s}
.zgov.intro.rise2 .zgp.out.hit,.zgov.rise2 .zgp.out.hit{transition-delay:1.9s}
/* the yellow act in 2D: six moves, snapped to the beat */
.rus2d.yel .rs2svg{filter:drop-shadow(0 0 1.6vh rgba(255,240,120,.4))}
.rus2d.yel.dance .rspose{animation-duration:2.86s}
.rus2d.yel.dance .rspose.p0{animation-name:ry0}.rus2d.yel.dance .rspose.p1{animation-name:ry1}.rus2d.yel.dance .rspose.p2{animation-name:ry2}.rus2d.yel.dance .rspose.p3{animation-name:ry3}.rus2d.yel.dance .rspose.p4{animation-name:ry4}.rus2d.yel.dance .rspose.p5{animation-name:ry5}
.rus2d.yel .rspose.p4,.rus2d.yel .rspose.p5{opacity:0}
@keyframes ry0{0%{opacity:1}16.66%,100%{opacity:0}}
@keyframes ry1{0%,16.66%{opacity:0}16.67%{opacity:1}33.33%,100%{opacity:0}}
@keyframes ry2{0%,33.33%{opacity:0}33.34%{opacity:1}50%,100%{opacity:0}}
@keyframes ry3{0%,50%{opacity:0}50.01%{opacity:1}66.66%,100%{opacity:0}}
@keyframes ry4{0%,66.66%{opacity:0}66.67%{opacity:1}83.33%,100%{opacity:0}}
@keyframes ry5{0%,83.33%{opacity:0}83.34%{opacity:1}100%{opacity:1}}
.rus2d.yel.dance .rsbody{animation-duration:.48s}
/* the finale: Sofia's "pick your victory song" balloon shows, also while the final scores are still up */
.fnov.scores.picking .fnbub.on{opacity:1;transform:none;z-index:12}
/* the act vote: the two acts as their 2D drawings, dancing */
.ruvart.rus2d{position:relative;left:auto;top:auto;transform:none;z-index:auto;height:26vh}
.ruvart.rus2d .rs2svg{height:100%;width:auto}
/* the singers on the stage: their mouths open and close while they perform */
.rus2d .rsmouth{transform-box:fill-box;transform-origin:50% 15%}
.rus2d.dance .rsmouth{animation:rsmouth .3s ease-in-out infinite alternate}
.rus2d.yel.dance .rsmouth{animation-duration:.24s}
@keyframes rsmouth{0%{transform:scaleY(.35)}60%{transform:scaleY(1)}100%{transform:scaleY(1.15)}}
/* Turquoise Carpet (2D figures): walking at half the speed, posing 2 seconds longer, a little more room between them */
.tcov.fig2d .tcg{animation:tcpass2 15.3s linear both}
@keyframes tcpass2{0%{translate:-78vw 0;animation-timing-function:cubic-bezier(.2,.6,.4,1)}28.76%{translate:0 0}69.93%{translate:0 0;animation-timing-function:cubic-bezier(.6,0,.8,.5)}100%{translate:80vw 0}}
.tcov.fig2d .tcg.walking .tcleg.f,.tcov.fig2d .tcg.walking .tcarm.b{animation-duration:.6s}
.tcov.fig2d .tcg.walking .tcleg.b,.tcov.fig2d .tcg.walking .tcarm.f{animation-duration:.6s}
.tcov.fig2d .tcg.walking .tcgirl{animation-duration:.6s}
.tcov.fig2d .tcone{margin:0 .8vh}
/* Say Na Na Na: real gooseneck microphones */
.jcmic,.jcdmic{background:none!important;border-radius:0;width:2.4vh!important}
.jcmic::before,.jcmic::after,.jcdmic::before,.jcdmic::after{display:none!important}
.jcmic{height:6.4vh!important;bottom:8.6vh!important;margin-left:-1.2vh}
.jcmic.m1,.jcmic.m2,.jcmic.m3,.jcmic.m4{transform:none!important}
.jcdmic{height:5.8vh!important;top:-5.2vh!important;transform:none!important}
.jcmic svg,.jcdmic svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
/* the press wall: a step-and-repeat banner full of made-up logos */
.jcwall{background:linear-gradient(180deg,#241a6a,#2c1670 60%,#3a1a78)!important}
.jcwall::before{opacity:.35}
.jcpress{position:absolute;inset:-1vh -4vw 5vh;display:flex;flex-direction:column;justify-content:space-around;transform:rotate(-1.2deg);opacity:.92}
.plrow{display:flex;gap:2.6vw;white-space:nowrap;transform:translateX(var(--o))}
.pl{flex:none;font-weight:900;font-size:clamp(.55rem,1.05vw,1rem);letter-spacing:.02em;line-height:1;display:inline-flex;align-items:center;gap:.25em;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.pl.a{color:#fff}.pl.a i{font-style:normal;color:#ff4fa8}
.pl.b{color:#ffd23f;letter-spacing:.12em}.pl.b span{font-size:.7em;background:#ffd23f;color:#2c1670;padding:.1em .3em;border-radius:3px}
.pl.c{color:#7ee6ff;font-style:italic}
.pl.d{color:#fff;letter-spacing:.18em}.pl.d span{color:#ff8a3d}
.pl.e{color:#c3ff5a}
.pl.f{color:#fff;font-size:clamp(.7rem,1.3vw,1.25rem);letter-spacing:.06em;border:2px solid #fff;padding:.05em .3em;border-radius:3px}
.pl.g{color:#ff7ad9;font-family:Georgia,serif;font-style:italic;font-weight:700}
.pl.h{color:#ffb547}
.jcban,.jclogo,.jcflags{z-index:2}
.jcban{background:rgba(12,10,40,.75);padding:.4vh .8vw;border-radius:4px}
.jclogo{background:rgba(12,10,40,.7);padding:.3vh 1vw;border-radius:8px}
/* the vote cards: standing still, mouths closed (they only start once they're on the stage) */
.ruvart .rsmouth{transform:scaleY(.22)!important;animation:none!important}
.ruvart .rsspk{animation:none;opacity:0}
/* the singing mouths: a calmer pace */
.rus2d.dance .rsmouth{animation-duration:.75s}
.rus2d.yel.dance .rsmouth{animation-duration:.65s}
/* Turquoise Carpet: the presenters walk in at half the speed (walking off stays as it was) */
.tcov[data-st="intro"] .tchosts .ehost{transition:translate 2.4s cubic-bezier(.25,.6,.4,1),opacity 1.6s}
/* Rule the World: the 3-second count-in sits right below the singer on the stage */
.rus2d:not(.ruvart)::after{content:attr(data-cd);position:absolute;left:50%;top:100%;transform:translate(-50%,1.2vh);font-weight:900;font-size:7vh;line-height:1;color:#fff;text-shadow:0 0 2vh #ff3fd0,0 0 4vh #b04dff,0 .4vh 0 rgba(0,0,0,.5);pointer-events:none}
.rus2d:not(.ruvart)[data-cd=""]::after{display:none}
.rus2d.cdpop::after{animation:rucdpop .9s cubic-bezier(.2,1.4,.4,1) both}
@keyframes rucdpop{0%{transform:translate(-50%,1.2vh) scale(.3);opacity:0}25%{transform:translate(-50%,1.2vh) scale(1.25);opacity:1}100%{transform:translate(-50%,1.2vh) scale(1);opacity:.9}}
/* Verona: Juliet's mouth opens and closes with her voice */
.jmjul .jmo{transform-box:fill-box;transform-origin:50% 0%;transform:scaleY(var(--mo,0));transition:transform .07s ease-out}
/* Verona: the tower's own green shutters swing open (to where they always were) before Juliet pops out */
.jwl,.jwr{transform-box:view-box;transition:transform .9s cubic-bezier(.3,.7,.3,1)}
.jwl{transform-origin:36.5px 0}.jwr{transform-origin:63.5px 0}
.dooropen .jwl,.dooropen .jwr{transform:scaleX(-.62)}
.jmjul{z-index:1}
.jmjul.talk .jarm{animation:jwave2 .38s ease-in-out infinite alternate}
@keyframes jwave2{from{transform:rotate(10deg)}to{transform:rotate(-34deg)}}
/* Rule the World: the singers rise (and stand) with their mouths closed until they start singing */
.rus2d:not(.dance) .rsmouth{transform:scaleY(.22)}
/* ---------- Serving! (skippy-ball test game) ---------- */
.svov{position:fixed;inset:0;z-index:55;overflow:hidden;background:linear-gradient(180deg,#3a0f4a 0%,#7a1a6a 38%,#e0428a 70%,#ffb347 100%)}
.svov.enter{animation:inBottom .9s cubic-bezier(.2,.9,.3,1.08) both}
.svsky{position:absolute;inset:0;background-image:radial-gradient(circle at 15% 20%,rgba(255,255,255,.5) 0 2px,transparent 3px),radial-gradient(circle at 70% 12%,rgba(255,255,255,.45) 0 2px,transparent 3px),radial-gradient(circle at 40% 8%,rgba(255,220,120,.6) 0 3px,transparent 4px),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 40px,transparent 40px 90px);pointer-events:none}
.svsign{position:absolute;left:50%;top:2vh;transform:translateX(-50%);padding:.6vh 2vw;border-radius:16px;background:rgba(40,8,50,.75);box-shadow:0 0 0 3px #ffd23f,0 0 30px #ff5fa8;color:#fff;font-weight:900;font-size:clamp(1.2rem,2.6vw,2.4rem);white-space:nowrap;z-index:3}
.svsign small{font-size:.45em;opacity:.7;margin-left:.6em}
.svbeat{position:absolute;left:50%;top:11vh;width:10vh;height:10vh;margin-left:-5vh;z-index:3}
.svbeat i{position:absolute;inset:0;border-radius:50%;border:.7vh solid #fff;box-shadow:0 0 2vh #ff5fa8;opacity:.85}
.svbeat b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:4.4vh;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.svbeat.pulse i{animation:svpulse .45s ease-out}
.svbeat.gold i{border-color:#ffd23f;box-shadow:0 0 4vh #ffd23f}
@keyframes svpulse{0%{transform:scale(1.35);opacity:1}100%{transform:scale(1);opacity:.85}}
.svlanes{position:absolute;left:4vw;right:4vw;top:24vh;bottom:6vh;display:flex;flex-direction:column;justify-content:space-around}
.svlane{position:relative;flex:1;max-height:16vh}
.svtrack{position:absolute;left:0;right:0;bottom:8%;height:18%;border-radius:999px;background:linear-gradient(#ffe7f2,#ffb3d4);box-shadow:inset 0 -.4vh 0 rgba(0,0,0,.12),0 .4vh 1vh rgba(0,0,0,.25)}
.svtrack::after{content:'';position:absolute;right:2%;top:-60%;bottom:-60%;width:.5vh;background:repeating-linear-gradient(#111 0 6px,#fff 6px 12px);border-radius:2px}
.svp{position:absolute;bottom:4%;left:calc(var(--x,0) * 1%);width:9vh;height:9vh;transition:left .35s cubic-bezier(.3,1.4,.5,1)}
.svp .svball{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s}
.svp.big .svball{transform:scale(1.35);transform-origin:50% 100%}
.svp .svhead{position:absolute;left:50%;top:-4.6vh;width:5.4vh;height:5.4vh;margin-left:-2.7vh}
.svp .svhead .char{width:100%;height:100%}
.svp.hop{animation:svhop .42s cubic-bezier(.3,.6,.4,1)}
.svp.hop.gold{animation:svhop2 .5s cubic-bezier(.3,.6,.4,1)}
.svp.wob{animation:svwob .5s ease-in-out}
@keyframes svhop{0%,100%{translate:0 0}45%{translate:0 -5vh}}
@keyframes svhop2{0%,100%{translate:0 0;filter:none}45%{translate:0 -9vh;filter:drop-shadow(0 0 2vh #ffd23f)}}
@keyframes svwob{0%,100%{rotate:0deg}25%{rotate:-14deg}75%{rotate:12deg}}
.svq{position:absolute;left:100%;top:-3vh;font-style:normal;font-weight:900;font-size:1.8vh;white-space:nowrap;opacity:0;padding:.2vh .6vh;border-radius:6px;background:rgba(0,0,0,.45)}
.svp.hop .svq,.svp.wob .svq{animation:svqf 1s ease-out}
.svq.q2{color:#ffd23f}.svq.q1{color:#9fe7ff}.svq.q0{color:#ff8a8a}
@keyframes svqf{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-2vh)}}
.svnm{position:absolute;left:0;bottom:-1.2vh;color:#fff;font-weight:900;font-size:1.6vh;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.svd{position:absolute;right:0;bottom:-1.2vh;color:#fff;font-style:normal;font-weight:900;font-size:1.8vh;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.svmsg{position:absolute;left:50%;bottom:1vh;transform:translateX(-50%);color:#fff;font-weight:900;font-size:clamp(1rem,2vw,1.8rem);text-shadow:0 2px 8px rgba(0,0,0,.6);white-space:nowrap}
.svhosts{position:absolute;inset:0;pointer-events:none;z-index:4}
.svhosts .ehost{position:absolute;bottom:4vh;height:46vh;width:auto;transition:translate 1s,opacity 1s;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.svhosts .him{left:18vw}.svhosts .her{right:18vw}
.svov:not([data-st="intro"]) .svhosts .him,.svov[data-hout] .svhosts .him{translate:-60vw 0;opacity:0}.svov:not([data-st="intro"]) .svhosts .her,.svov[data-hout] .svhosts .her{translate:60vw 0;opacity:0}
.svbub{position:absolute;top:26vh;max-width:30vw;z-index:5;background:#fff;color:#1a1147;font-weight:900;font-size:clamp(1rem,1.9vw,1.5rem);padding:.65em 1em;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.svbub.on{opacity:1}.svbub.him{left:4vw}.svbub.her{right:4vw}
/* the phone */
.svui{margin:1.5vh auto 0;text-align:center}
.svpad{position:relative;width:62vw;max-width:300px;aspect-ratio:1;margin:0 auto}
.svring{position:absolute;inset:0;border-radius:50%;border:6px solid #fff;box-shadow:0 0 18px #ff5fa8;pointer-events:none}
.svring.gold{border-color:#ffd23f;box-shadow:0 0 26px #ffd23f}
.svbtn{position:absolute;inset:8%;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ffb3d4,#e0428a 60%,#9a1a5a);color:#fff;font-size:15vw;font-weight:900;box-shadow:0 10px 0 #6a0a3a,0 14px 24px rgba(0,0,0,.4);touch-action:manipulation;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.svbtn b{font-size:5vw}
.svbtn:active{transform:translateY(6px);box-shadow:0 4px 0 #6a0a3a}
.svfb{height:5vh;margin-top:2vh;font-weight:900;font-size:6vw}
.svfb.q2{color:#ffd23f}.svfb.q1{color:#9fe7ff}.svfb.q0{color:#ff8a8a}
.svme{font-weight:800;opacity:.85}
.pl.i{color:#d9e4ff;font-family:Georgia,serif;font-style:italic;font-weight:700;text-shadow:0 0 8px rgba(190,210,255,.8)}
.pl.j{color:#f4e2b0;font-family:Georgia,serif;font-weight:700;letter-spacing:.22em;font-size:clamp(.5rem,.95vw,.9rem)}
/* Serving!: a DDR-style chart. Arrows: left (pink), down (cyan), up (lime), right (orange); gold = SERVE */
.svrec,.svn,.svpadb{--c:#ff5fa8}
.c1.svrec,.c1.svn,.c1.svpadb{--c:#3fd8ff}.c2.svrec,.c2.svn,.c2.svpadb{--c:#a6ff4d}.c3.svrec,.c3.svn,.c3.svpadb{--c:#ffa23f}
.svrec svg,.svn svg,.svpadb svg{width:100%;height:100%;display:block}
:is(.svrec,.svn,.svpadb).c0 svg{rotate:-90deg}:is(.svrec,.svn,.svpadb).c1 svg{rotate:180deg}:is(.svrec,.svn,.svpadb).c3 svg{rotate:90deg}
.svrec svg path{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.75)}
.svn svg path{fill:var(--c);stroke:#fff;filter:drop-shadow(0 0 6px var(--c))}
.svn.gold svg path{fill:#ffd23f;stroke:#fff8d0;filter:drop-shadow(0 0 10px #ffd23f)}
.svchart{position:absolute;left:3vw;top:24vh;width:24vw;bottom:4vh;z-index:2;background:rgba(30,6,40,.45);border-radius:18px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);overflow:hidden}
.svchart .svrec,.svchart .svn{position:absolute;top:1.5vh;width:9vh;height:9vh;margin-left:-4.5vh}
.svchart .c0{left:14%}.svchart .c1{left:38%}.svchart .c2{left:62%}.svchart .c3{left:86%}
.svchart .svn{opacity:0;will-change:transform}
.svov .svlanes{left:30vw}
.svov .svbeat{left:15vw;top:12vh}
/* the phone */
.svfield{position:relative;height:50vh;max-width:420px;margin:0 auto;border-radius:18px;background:linear-gradient(#2a0838,#4a1050);overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.svfield .svrec,.svfield .svn{position:absolute;top:1.2vh;width:11vh;height:11vh;margin-left:-5.5vh}
.svfield .c0{left:13%}.svfield .c1{left:38%}.svfield .c2{left:62%}.svfield .c3{left:87%}
.svfield .svn{opacity:0;will-change:transform}
.svrec.flash.f2 svg path{fill:#ffd23f}.svrec.flash.f1 svg path{fill:#9fe7ff}.svrec.flash.f0 svg path{fill:#ff4d4d}
.svrec.flash{animation:svrecf .3s ease-out}
@keyframes svrecf{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.svfield .svfb{position:absolute;left:0;right:0;top:15vh;height:auto;margin:0;text-align:center;pointer-events:none}
.svpads{display:grid;grid-template-columns:repeat(4,1fr);gap:2vw;max-width:420px;margin:1.6vh auto 0}
.svpadb{aspect-ratio:1;border:0;border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 3px var(--c),0 6px 0 rgba(0,0,0,.3);padding:12%;touch-action:manipulation}
.svpadb svg path{fill:var(--c);stroke:#fff}
.svpadb.hit{animation:svpadh .18s ease-out}
@keyframes svpadh{0%{transform:translateY(4px) scale(.94);filter:brightness(1.6)}100%{transform:none}}
/* Hold That Note: a prediction the note has outlasted is out */
.ntpin.out{opacity:.38;filter:grayscale(1);transition:opacity .4s,filter .4s}
.ntpin.out b{text-decoration:line-through}
/* the flag picker: the flags in their own scrolling box, your choice on top, the confirm button always visible */
.ccsel{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 12px;margin:0 0 10px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px var(--yellow)}
.ccsel img{width:64px;height:43px;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.ccsel span{display:flex;flex-direction:column;line-height:1.15}.ccsel small{font-size:.72rem;opacity:.7}.ccsel b{font-size:1.15rem}
.ccsel .ccnone{opacity:.8;font-weight:700}
.ccbox{max-height:min(52vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px;border-radius:14px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
#v-pick.flagmode #pickdone{position:sticky;bottom:10px;z-index:5;box-shadow:0 8px 24px rgba(0,0,0,.45)}
#pickdone.dim{opacity:.55}
/* Edgar's reveal on the phone: your three accusation cards stay, turning green (right) or red (wrong) one by one */
.clsentc{position:relative;transition:background .4s,box-shadow .4s}
.clsentc.ok{background:linear-gradient(135deg,rgba(61,220,132,.45),rgba(61,220,132,.18));box-shadow:0 0 0 3px #3ddc84,0 0 16px rgba(61,220,132,.5);animation:rupop .4s cubic-bezier(.2,1.6,.4,1)}
.clsentc.ok::after{content:'✔';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.6rem;font-weight:900;color:#3ddc84}
.clsentc.bad{background:linear-gradient(135deg,rgba(255,77,77,.35),rgba(255,77,77,.12));box-shadow:0 0 0 3px #ff4d4d}
.clsentc.bad::after{content:'✖';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.6rem;font-weight:900;color:#ff4d4d}
/* Serving: three stages (dance floor, double trouble, skippy balls) */
.svfloor{position:absolute;left:0;right:0;bottom:0;height:62vh;opacity:0;transition:opacity 1s;pointer-events:none;background:repeating-conic-gradient(from 45deg at 50% 50%,rgba(255,95,168,.35) 0 25%,rgba(63,216,255,.28) 0 50%) 0 0/12vh 12vh;transform:perspective(60vh) rotateX(38deg);transform-origin:50% 100%}
.svov[data-stage="1"] .svfloor,.svov[data-stage="2"] .svfloor{opacity:1}
.svov[data-stage="2"] .svfloor{background:repeating-conic-gradient(from 45deg at 50% 50%,rgba(166,255,77,.32) 0 25%,rgba(255,162,63,.32) 0 50%) 0 0/12vh 12vh;animation:svfl 1s steps(2) infinite}
@keyframes svfl{50%{filter:hue-rotate(90deg)}}
.svov[data-stage="3"]{background:linear-gradient(180deg,#0f3a6a 0%,#1a7a8a 40%,#42e0a0 72%,#ffe047 100%)}
.svov{transition:background 1s}
.svp .svdancer{position:absolute;inset:0;width:100%;height:100%;display:none}
.svov:not([data-stage="3"]) .svp .svball{display:none}
.svov:not([data-stage="3"]) .svp .svdancer{display:block}
.svov:not([data-stage="3"]) .svp .svhead{top:-3.4vh}
.svov:not([data-stage="3"]) .svtrack{opacity:.25}
.svov:not([data-stage="3"]) .svp{left:40%}
.svdancer .al,.svdancer .ar{transform-box:fill-box;transition:transform .15s}
.svdancer .al{transform-origin:100% 100%}.svdancer .ar{transform-origin:0 100%}
.svp.p0 .svdancer .al{transform:rotate(-70deg)}.svp.p1 .svdancer .ar{transform:rotate(70deg)}
.svp.p2 .svdancer .al{transform:rotate(60deg)}.svp.p2 .svdancer .ar{transform:rotate(-60deg)}
.svov:not([data-stage="3"]) .svp.hop{animation:svdh .3s ease-out}
@keyframes svdh{40%{transform:translateY(-1.4vh) rotate(-6deg)}}
.svstage{position:absolute;left:50%;top:9.5vh;transform:translateX(-50%);color:#fff;font-weight:900;font-size:clamp(.9rem,1.6vw,1.4rem);padding:.3vh 1.4vw;border-radius:999px;background:rgba(0,0,0,.35);white-space:nowrap;z-index:3}
.svstage:empty{display:none}
.svbanner{position:absolute;left:50%;top:40vh;z-index:6;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;text-align:center;color:#fff;font-weight:900;font-size:clamp(2rem,6vw,5.5rem);text-shadow:0 0 30px #ff5fa8,0 6px 0 #6a0a3a;white-space:nowrap}
.svbanner small{display:block;font-size:.35em;letter-spacing:.3em;text-transform:uppercase;color:#ffd23f}
.svbanner em{display:block;font-style:normal;font-size:.32em;margin-top:.4em}
.svbanner.on{animation:svbn 2.6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes svbn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}28%,82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
/* Serving: the 3D stage behind everything */
.sv3d{position:absolute;inset:0;z-index:0}
.sv3d canvas{display:block;width:100%!important;height:100%!important}
.svov.is3d{background:#07020f}
.svov.is3d .svsky,.svov.is3d .svfloor{display:none}
.svov.is3d .svtrack{opacity:.55}
.svov.is3d:not([data-stage="3"]) .svtrack{opacity:.12}
/* Serving stages 1–2: the aerobics class on the stage (a step per arrow, back on your own spot after every phrase) */
.svclass{position:absolute;left:30vw;right:2vw;top:24vh;bottom:4vh;z-index:2}
.svov[data-stage="3"] .svclass{display:none}
.svov:not([data-stage="3"]) .svlanes{display:none}
.svaf{position:absolute;left:calc(var(--hx) * 1% + var(--dx,0) * 3.6vw);top:calc(38% + var(--dy,0) * 8vh);width:11vh;height:13vh;margin-left:-5.5vh;scale:calc(1 + var(--dy,0) * .09);transition:left .22s cubic-bezier(.3,1.5,.5,1),top .22s cubic-bezier(.3,1.5,.5,1),scale .22s;z-index:calc(5 + var(--dy,0))}
.svaf .svtile{position:absolute;left:50%;bottom:-1.2vh;width:12vh;height:3.6vh;margin-left:-6vh;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:0 0 0 2px rgba(255,255,255,.4),0 0 18px rgba(255,95,168,.5)}
.svaf .svfb2{position:absolute;left:0;right:0;bottom:0;height:9vh;animation:svbob .98s ease-in-out infinite}
@keyframes svbob{50%{transform:translateY(-.8vh) rotate(3deg)}}
.svaf .svdancer{position:absolute;inset:0;width:100%;height:100%}
.svaf .svhead{position:absolute;left:50%;top:-4vh;width:5.4vh;height:5.4vh;margin-left:-2.7vh}
.svaf .svhead .char{width:100%;height:100%}
.svaf .svdancer .al,.svaf .svdancer .ar{transform-box:fill-box;transition:transform .15s}
.svaf .svdancer .al{transform-origin:100% 100%}.svaf .svdancer .ar{transform-origin:0 100%}
.svaf.ok.p0 .svdancer .al{transform:rotate(-70deg)}.svaf.ok.p1 .svdancer .ar{transform:rotate(70deg)}.svaf.ok.p2 .svdancer .al{transform:rotate(-70deg)}.svaf.ok.p2 .svdancer .ar{transform:rotate(70deg)}
.svaf.ok .svfb2{animation:svstep .25s ease-out}
@keyframes svstep{40%{transform:translateY(-1.6vh)}}
.svaf.oops .svfb2{animation:svwob .5s ease-in-out}
.svaf .svq{position:absolute;left:70%;top:-6vh;font-style:normal;font-weight:900;font-size:1.7vh;white-space:nowrap;opacity:0;padding:.2vh .6vh;border-radius:6px;background:rgba(0,0,0,.45)}
.svaf.ok .svq,.svaf.oops .svq{animation:svqf 1s ease-out}
.svaf .svnm{position:absolute;left:50%;bottom:-3.6vh;transform:translateX(-50%);white-space:nowrap;color:#fff;font-weight:900;font-size:1.5vh;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.svaf .svpt{position:absolute;left:50%;bottom:-5.6vh;transform:translateX(-50%);white-space:nowrap;color:#ffd23f;font-style:normal;font-weight:900;font-size:1.4vh;text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* Serving: two teams taking turns, the instructor in front of the team whose turn it is */
.svov .svlanes{display:none!important}
.svov .svclass{display:block!important;top:22vh}
.svgl{position:absolute;bottom:4%;width:44%;text-align:center;color:#fff;font-weight:900;font-size:1.8vh;letter-spacing:.1em;text-transform:uppercase;opacity:.5;transition:opacity .3s}
.svgl b{padding:.3vh 1.2vh;border-radius:99px}
.svgl.a{left:3%}.svgl.a b{background:#ff3fa4}.svgl.b{right:3%}.svgl.b b{background:#2f8cff}
.svclass[data-act="A"] .svgl.a,.svclass[data-act="B"] .svgl.b,.svclass[data-act="*"] .svgl{opacity:1}
.svclass.solo .svgl{display:none}
.svaf{top:calc(52% + var(--dy,0) * 7vh)}
.svaf.gA .svtile{box-shadow:0 0 0 2px #ff3fa4,0 0 18px #ff3fa4}.svaf.gB .svtile{box-shadow:0 0 0 2px #2f8cff,0 0 18px #2f8cff}
.svclass[data-act="A"] .svaf.gB,.svclass[data-act="B"] .svaf.gA{opacity:.55;filter:saturate(.6)}
.svaf{transition:left .22s cubic-bezier(.3,1.5,.5,1),top .22s cubic-bezier(.3,1.5,.5,1),scale .22s,opacity .4s,filter .4s}
.svins{position:absolute;left:calc(var(--hx) * 1% + var(--dx,0) * 3.6vw);top:calc(2% + var(--dy,0) * 4vh);width:calc(24vh * 320 / 540);height:24vh;margin-left:calc(-12vh * 320 / 540);transition:left 1.1s cubic-bezier(.4,0,.2,1),top .22s;z-index:4;filter:drop-shadow(0 0 2vh rgba(255,40,60,.5))}
.svins .svleadsvg{position:absolute;inset:0;width:100%;height:100%}
.svins.ok .svleadsvg{animation:svstep .25s ease-out}
.svins.jmp .svleadsvg{animation:svjmp .4s ease-out}
@keyframes svjmp{40%{transform:translateY(-3vh)}}
.svinsball,.svaf .svball{display:none}
.svov[data-stage="3"] .svinsball{display:block;position:absolute;left:8%;right:8%;bottom:-14%;aspect-ratio:1}
.svov[data-stage="3"] .svins .svleadsvg{top:-30%;bottom:auto}
.svov[data-stage="3"] .svaf .svball{display:block;position:absolute;left:0;right:0;bottom:-12%;width:100%;height:auto}
.svov[data-stage="3"] .svaf .svdancer{transform:translateY(-55%)}
.svov[data-stage="3"] .svaf .svhead{translate:0 -5vh}
.svwt{position:absolute;left:0;right:0;top:40%;text-align:center;color:#fff;font-weight:900;font-size:5.5vw;padding:0 6vw;pointer-events:none}
/* Serving: two arrow charts (pink team left, blue team right); dancers stand on the 3D tiles */
.svov .svchart{top:20vh;bottom:3vh;width:19vw;left:1.5vw}
.svov .svchart.r{left:auto;right:1.5vw}
.svov .svchart .svrec,.svov .svchart .svn{width:7.4vh;height:7.4vh;margin-left:-3.7vh;top:5vh}
.svteam{position:absolute;left:0;right:0;top:.8vh;text-align:center;color:#fff;font-weight:900;font-size:1.7vh;letter-spacing:.12em;text-transform:uppercase}
.svchart.l .svteam{color:#ff7cc4}.svchart.r .svteam{color:#7cc0ff}
.svchart.l{box-shadow:inset 0 0 0 2px rgba(255,63,164,.6)}.svchart.r{box-shadow:inset 0 0 0 2px rgba(47,140,255,.7)}
.svov[data-act="B"] .svchart.l,.svov[data-act="A"] .svchart.r{opacity:.4}
.svchart{transition:opacity .4s}
.svov .svbeat{left:50%;top:10.5vh;width:6vh;height:6vh;margin-left:-3vh}
.svov .svstage{top:6.4vh;font-size:clamp(.8rem,1.3vw,1.2rem)}
.svov .svsign{top:.8vh;font-size:clamp(1rem,2vw,1.8rem)}
.svov .svclass{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none}
.svov .svaf{position:absolute;left:0;top:0;scale:1;width:calc(var(--s) * 1.25);height:calc(var(--s) * 1.5);margin:calc(var(--s) * -1.42) 0 0 calc(var(--s) * -.625);transition:transform .22s cubic-bezier(.3,1.5,.5,1),opacity .4s,filter .4s}
.svov .svaf .svfb2{height:calc(var(--s) * 1.05)}
.svov .svaf .svhead{top:calc(var(--s) * -.08);width:calc(var(--s) * .6);height:calc(var(--s) * .6);margin-left:calc(var(--s) * -.3)}
.svov .svaf .svnm{bottom:calc(var(--s) * -.32);font-size:calc(var(--s) * .2)}
.svov .svaf .svpt{bottom:calc(var(--s) * -.55);font-size:calc(var(--s) * .19)}
.svov .svaf .svq{top:calc(var(--s) * -.45);font-size:calc(var(--s) * .2)}
.svov[data-act="A"] .svaf.gB,.svov[data-act="B"] .svaf.gA{opacity:.6;filter:saturate(.6)}
.svov[data-stage="3"] .svaf .svhead{translate:0 calc(var(--s) * -.5)}
.svov .svins{position:absolute;left:0;top:0;width:calc(var(--s) * 2.5 * 320 / 540);height:calc(var(--s) * 2.5);margin:calc(var(--s) * -2.45) 0 0 calc(var(--s) * -1.25 * 320 / 540);transition:transform .9s cubic-bezier(.4,0,.2,1)}
.svov .svins.ok,.svov .svins.jmp{transition:transform .22s cubic-bezier(.3,1.5,.5,1)}
.svov .svgl{display:none}
.svov .svaf{width:calc(var(--s) * 1.7);height:calc(var(--s) * 2);margin:calc(var(--s) * -1.9) 0 0 calc(var(--s) * -.85)}
.svov .svaf .svfb2{height:calc(var(--s) * 1.45)}
.svov .svaf .svhead{top:calc(var(--s) * -.12);width:calc(var(--s) * .85);height:calc(var(--s) * .85);margin-left:calc(var(--s) * -.425)}
.svov .svaf .svnm{bottom:calc(var(--s) * -.3);font-size:calc(var(--s) * .24)}
.svov .svaf .svpt{bottom:calc(var(--s) * -.58);font-size:calc(var(--s) * .22)}
.svov .svins{width:calc(var(--s) * 3.3 * 320 / 540);height:calc(var(--s) * 3.3);margin:calc(var(--s) * -3.2) 0 0 calc(var(--s) * -1.65 * 320 / 540)}
/* Serving: the singer on her ball (stage 3); falling through a tile, bumping back */
.svov[data-stage="3"] .svins .svleadsvg{top:auto;bottom:calc(var(--s) * 1.2)}
.svov[data-stage="3"] .svinsball{left:50%;right:auto;bottom:calc(var(--s) * -.12);width:calc(var(--s) * 1.45);margin-left:calc(var(--s) * -.725)}
.svov .svaf.fall .svfb2{animation:svfall .7s ease-in forwards}
.svov .svaf.fall.bump .svfb2{animation:svbump .3s ease-out,svfall .7s .3s ease-in forwards}
@keyframes svfall{0%{transform:none;opacity:1}100%{transform:translateY(calc(var(--s) * .9)) scale(.45);opacity:.12}}
@keyframes svbump{50%{translate:var(--bx,0) var(--by,0)}}
.svov .svaf.fall .svnm,.svov .svaf.fall .svpt{opacity:.5}
.svov .svins{width:calc(var(--s) * 2.8 * 320 / 540);height:calc(var(--s) * 2.8);margin:calc(var(--s) * -2.72) 0 0 calc(var(--s) * -1.4 * 320 / 540)}
.svov .svins.walk.walk{transition:transform 7s ease-in-out}
/* Serving: the skippy balls come up out of the floor, everyone hops on and back */
.svnb{position:absolute;left:0;top:0;width:calc(var(--s) * 1.25);height:calc(var(--s) * 1.25);margin:calc(var(--s) * -1.1) 0 0 calc(var(--s) * -.625);pointer-events:none;visibility:hidden;z-index:9}
.svnb i{display:block;width:100%;height:100%}
.svnb .svball{width:100%;height:100%}
.svnb.ins{width:calc(var(--s) * 1.45);height:calc(var(--s) * 1.45);margin:calc(var(--s) * -1.3) 0 0 calc(var(--s) * -.725)}
.svov[data-bph="rise"] .svnb{visibility:visible}
.svov[data-bph="rise"] .svnb i{animation:svrise 7.6s cubic-bezier(.2,.8,.3,1) both}
@keyframes svrise{0%{transform:translateY(55%) scale(.2);opacity:0;filter:brightness(2)}20%{opacity:1}70%{transform:translateY(0) scale(1.08)}85%{transform:scale(.96)}100%{transform:none;filter:none}}
.svov[data-stage="3"]:not([data-bph="hop"]):not([data-bph="on"]) .svaf .svball,.svov[data-stage="3"]:not([data-bph="hop"]):not([data-bph="on"]) .svinsball{display:none}
.svov[data-stage="3"]:not([data-bph="hop"]):not([data-bph="on"]) .svaf .svdancer{transform:none}
.svov[data-stage="3"]:not([data-bph="hop"]):not([data-bph="on"]) .svaf .svhead{translate:none}
.svov[data-stage="3"]:not([data-bph="hop"]):not([data-bph="on"]) .svins .svleadsvg{top:0;bottom:0}
.svov[data-bph="hop"] .svaf .svfb2,.svov[data-bph="hop"] .svins .svleadsvg{animation:svhopon .5s ease-out}
@keyframes svhopon{40%{transform:translateY(calc(var(--s) * -.8))}}
/* Serving: she stamps across her stage on her heels, leaning the way she goes */
.svov .svins.walk.walk{transition:transform var(--wd,6s) linear}
.svins.walk .svleadsvg{animation:svstomp .34s ease-in-out infinite;transform-origin:50% 100%}
.svins.walk.wl .svleadsvg{--lean:-7deg}.svins.walk.wr .svleadsvg{--lean:7deg}
@keyframes svstomp{0%,100%{transform:rotate(var(--lean)) translateY(0)}35%{transform:rotate(calc(var(--lean) * 1.4)) translateY(-5%)}60%{transform:rotate(var(--lean)) translateY(0) scaleY(.97)}}
.svins.walk::after{content:'';position:absolute;left:15%;right:15%;bottom:-3%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,220,120,.9),rgba(255,80,60,0));animation:svstompfx .34s ease-out infinite}
@keyframes svstompfx{0%,50%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
.svins.walk .svlbody{animation:none}
/* Serving: crossing her stage, she's seen from the side, stamping on her heels */
.svins .svleadside{position:absolute;inset:0;width:100%;height:100%;display:none;overflow:visible}
.svins.walk .svleadside{display:block}
.svins.walk .svleadsvg{display:none}
.svins.walk.wl .svleadside{transform:scaleX(-1)}
.svsleg{transform-box:view-box;transform-origin:166px 300px;animation:svsstep .68s ease-in-out infinite}
.svsleg.b{animation-delay:-.34s}
@keyframes svsstep{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(22deg)}}
.svsbody{transform-box:view-box;transform-origin:166px 520px;animation:svsbob .34s ease-in-out infinite}
@keyframes svsbob{0%,100%{transform:translateY(0)}45%{transform:translateY(-10px)}}
.svsarm.b{transform-box:view-box;transform-origin:160px 176px;animation:svsarm .68s ease-in-out infinite}
@keyframes svsarm{0%,100%{transform:rotate(26deg)}50%{transform:rotate(-24deg)}}
.svscape{transform-box:view-box;transform-origin:140px 180px;animation:svscape .5s ease-in-out infinite alternate}
@keyframes svscape{to{transform:skewX(-8deg) rotate(4deg)}}
.svsmouth{transform-box:fill-box;transform-origin:0 50%;animation:svlsing .5s ease-in-out infinite alternate}
.svins.walk .svleadside{animation:none}
.svins.walk::after{left:30%;right:30%}
/* Serving: her pop-up when the tempo doubles */
.svkant{position:absolute;left:50%;bottom:calc(100% + var(--s) * .15);z-index:5;transform:translateX(-50%) scale(0);transform-origin:50% 100%;white-space:nowrap;padding:.35em .8em;border-radius:16px;background:#fff;color:#c8102e;font-weight:900;font-size:calc(var(--s) * .42);box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.svkant::after{content:'';position:absolute;left:50%;top:100%;margin-left:-8px;border:8px solid transparent;border-top-color:#fff}
.svkant.on{transform:translateX(-50%) scale(1)}
/* Serving: red team (left) and blue team (right); 'Get ready!' in the middle 5 seconds before a team's turn */
.svchart.l .svteam{color:#ff6b7a}.svchart.l{box-shadow:inset 0 0 0 2px rgba(255,45,74,.7)}
.svaf.gA .svtile{box-shadow:0 0 0 2px #ff2d4a,0 0 18px #ff2d4a}
.svready{position:absolute;left:50%;top:42vh;z-index:7;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;text-align:center;padding:2vh 4vw;border-radius:24px;background:rgba(20,4,30,.72);box-shadow:0 0 0 4px #fff,0 0 50px rgba(255,255,255,.4);transition:transform .35s cubic-bezier(.2,1.5,.4,1),opacity .3s}
.svready.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.svready b{display:block;font-size:clamp(2.2rem,6vw,5.5rem);font-weight:900;line-height:1;color:#fff}
.svready em{display:block;font-style:normal;font-weight:900;font-size:clamp(1.2rem,2.6vw,2.4rem);color:#ffd23f;margin-top:.4em}
.svready.a b{color:#ff4d63;text-shadow:0 0 30px #ff2d4a}.svready.b b{color:#4da3ff;text-shadow:0 0 30px #2f8cff}.svready.all b{color:#ffd23f}
.svready.a{box-shadow:0 0 0 4px #ff2d4a,0 0 50px rgba(255,45,74,.6)}.svready.b{box-shadow:0 0 0 4px #2f8cff,0 0 50px rgba(47,140,255,.6)}
.svkant{font-size:calc(var(--s) * .95);padding:.25em .6em;border-radius:22px;border:4px solid #ff2d4a;box-shadow:0 0 30px rgba(255,45,74,.8),0 8px 24px rgba(0,0,0,.5)}
.svkant.on{animation:svkantp .5s ease-in-out infinite alternate}
@keyframes svkantp{to{transform:translateX(-50%) scale(1.08) rotate(-2deg)}}
/* Serving: everyone walks slowly onto their spot from the side during the song's intro */
.svov .svaf.walkin.walkin{transition:transform 6s linear}
.svaf.walkin .svfb2{animation:svwalkin .34s ease-in-out infinite}
@keyframes svwalkin{50%{transform:translateY(calc(var(--s) * -.12)) rotate(4deg)}}
.svaf.offst{opacity:0}
/* Serving: her backup dancers (same moves); while walking they keep their front view and stamp along */
.svov .svdan{width:calc(var(--s) * 2.6 * 320 / 540);height:calc(var(--s) * 2.6);margin:calc(var(--s) * -2.52) 0 0 calc(var(--s) * -1.3 * 320 / 540)}
.svdan .svkant{display:none}
.svins.svdan.walk .svleadsvg{display:block}
.svins.svdan.walk.wl .svleadsvg{--lean:-7deg}.svins.svdan.walk.wr .svleadsvg{--lean:7deg}
/* Serving: the black team (right half) */
.svchart.r .svteam{color:#e8e4ee}.svchart.r{box-shadow:inset 0 0 0 2px rgba(230,226,240,.6);background:rgba(8,6,10,.6)}
.svaf.gB .svtile{box-shadow:0 0 0 2px #e8e4ee,0 0 18px rgba(255,255,255,.5)}
.svready.b b{color:#fff;text-shadow:0 0 30px #000}.svready.b{background:rgba(6,4,8,.9);box-shadow:0 0 0 4px #e8e4ee,0 0 50px rgba(255,255,255,.35)}
/* Serving: she sings (not while she walks across), and she and her dancers dance to the beat (122 BPM: .98s = two beats) */
.svins .svlmouth{transform-box:fill-box;transform-origin:50% 15%;animation:svlsing .49s ease-in-out infinite alternate}
@keyframes svlsing{0%{transform:scaleY(1)}100%{transform:scaleY(.45)}}
.svins.svdan .svlmouth{animation:none}
.svins.walk .svlmouth,.svins.walk .svsmouth{animation:none;transform:scaleY(.45)}
.svins .svlbody{transform-box:view-box;transform-origin:160px 520px;animation:svgroove .98s ease-in-out infinite}
@keyframes svgroove{0%,100%{transform:rotate(-3deg) translateY(0)}25%{transform:rotate(0) translateY(-8px)}50%{transform:rotate(3deg) translateY(0)}75%{transform:rotate(0) translateY(-8px)}}
.svins .svlhead{transform-box:view-box;transform-origin:160px 130px;animation:svnod .49s ease-in-out infinite alternate}
@keyframes svnod{to{transform:rotate(4deg)}}
.svins .svlarm.r{transform-box:view-box;transform-origin:212px 172px;animation:svarmpump .98s ease-in-out infinite}
@keyframes svarmpump{0%,100%{transform:rotate(0)}50%{transform:rotate(-38deg)}}
.svins.svdan .svlarm.r{transform-origin:230px 244px;animation:svfan .49s ease-in-out infinite alternate}
@keyframes svfan{0%{transform:rotate(10deg)}100%{transform:rotate(-55deg) translateY(-30px)}}
.svins.svdan.d1 .svlbody{animation-delay:-.49s}
.svins.walk .svlbody,.svins.walk .svlhead,.svins.walk .svlarm{animation:none}
.svov .svchart{width:15vw;background:rgba(30,6,40,.28)}
.svov .svchart .svrec,.svov .svchart .svn{width:6.2vh;height:6.2vh;margin-left:-3.1vh}
/* Serving: her steps land right on the tile (a quick hop, no slide); only walking across is slow */
.svov .svins,.svov .svins.ok,.svov .svins.jmp{transition:transform .18s ease-out}
.svov .svins.walk.walk{transition:transform var(--wd,6s) linear}
.svins.ok .svleadsvg{animation:svhop1 .22s ease-out}
@keyframes svhop1{45%{transform:translateY(-6%)}}
/* Serving: everyone SITS on their skippy ball (the ball in front of their legs, feet on the floor beside it), and bounces */
.svov[data-bph="hop"] .svaf .svdancer,.svov[data-bph="on"] .svaf .svdancer{transform:translateY(-6%) scaleY(.82);transform-origin:50% 100%}
.svov[data-bph="hop"] .svaf .svhead,.svov[data-bph="on"] .svaf .svhead{translate:0 calc(var(--s) * .05)}
.svov[data-stage="3"] .svaf .svball{z-index:2;bottom:-14%;left:4%;right:4%;width:92%}
.svov[data-stage="3"] .svaf .svdancer .al{transform:rotate(-115deg)}.svov[data-stage="3"] .svaf .svdancer .ar{transform:rotate(115deg)}
.svov[data-bph="hop"] .svins .svleadsvg,.svov[data-bph="on"] .svins .svleadsvg{top:auto;bottom:calc(var(--s) * -.04);transform:scaleY(.8);transform-origin:50% 100%}
.svov[data-stage="3"] .svinsball{z-index:3}
.svov[data-bph="on"] .svaf .svfb2,.svov[data-bph="on"] .svins{animation:svbounce .49s ease-in-out infinite alternate}
@keyframes svbounce{0%{translate:0 0}100%{translate:0 calc(var(--s) * -.18)}}
/* Serving: the results at the end */
.svres{position:absolute;left:50%;top:50%;z-index:60;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;min-width:44vw;max-height:84vh;overflow:hidden;padding:2.2vh 2.4vw;border-radius:22px;background:rgba(18,4,20,.94);box-shadow:0 0 0 4px #ff2d4a,0 20px 60px rgba(0,0,0,.6);color:#fff;transition:transform .4s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.svres.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.svres h3{margin:0 0 1.2vh;text-align:center;font-size:clamp(1.4rem,3vw,2.6rem)}
.svres table{width:100%;border-collapse:collapse;font-weight:800;font-size:clamp(.8rem,1.6vw,1.4rem)}
.svres th{opacity:.7;font-size:.75em;text-transform:uppercase;letter-spacing:.08em;padding:.3em .6em}
.svres td{padding:.32em .6em;text-align:center;border-top:1px solid rgba(255,255,255,.12)}
.svres td:first-child{text-align:left}
.svres tr.a td:first-child{border-left:5px solid #ff2d4a}.svres tr.b td:first-child{border-left:5px solid #e8e4ee}
.svres tr.w td{color:#ffd23f}
.svres td:nth-child(2){color:#ffd23f}.svres td:nth-child(3){color:#9fe7ff}.svres td:nth-child(4){color:#ff8a8a}
/* Serving on the phone: four pads that always fit; perfect / good / miss */
.svui .svpads{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5vw;max-width:420px;padding:0 3vw;box-sizing:border-box}
.svui .svpadb{min-width:0;width:100%;padding:14%}
.svui .svpadb svg{width:100%;height:auto}
.svui .svme{display:block;position:static;text-align:center;margin:1.4vh auto 0;font-weight:800;opacity:.85}
.svui .svfield{height:46vh}
.svfield .svfb{font-size:9vw;font-weight:900;text-shadow:0 3px 10px rgba(0,0,0,.5)}
.svfb.pop{animation:svfbpop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes svfbpop{0%{transform:scale(.5)}100%{transform:scale(1)}}
/* Serving: the arrow panels only appear when the presenters are done */
.svov .svchart{transition:opacity .6s}
.svov[data-st="intro"] .svchart{opacity:0!important}
/* Serving: an arrow reaching its shape on the big screen: the shape lights up and a ring bursts out */
.svchart .svrec{transition:none}
.svchart .svrec.bhit{animation:svbhit .45s ease-out}
.svchart .svrec.bhit svg path{animation:svbhitf .45s ease-out}
.svchart .svrec::after{content:'';position:absolute;inset:-10%;border-radius:50%;border:4px solid var(--c);opacity:0;pointer-events:none}
.svchart .svrec.bhit::after{animation:svbring .5s ease-out}
@keyframes svbhit{0%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes svbhitf{0%{fill:var(--c);stroke:#fff;filter:drop-shadow(0 0 14px var(--c))}100%{fill:rgba(255,255,255,.08)}}
@keyframes svbring{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
/* Serving: bigger hit animations on the big screen */
@keyframes svbhit{0%{transform:scale(1.75)}60%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes svbhitf{0%{fill:#fff;stroke:#fff;filter:drop-shadow(0 0 26px var(--c)) drop-shadow(0 0 12px #fff)}40%{fill:var(--c);filter:drop-shadow(0 0 20px var(--c))}100%{fill:rgba(255,255,255,.08)}}
@keyframes svbring{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.svchart .svrec::after{border-width:6px;box-shadow:0 0 18px var(--c)}
.svchart .svrec.bhit,.svchart .svrec.bhit svg path{animation-duration:.6s}
.svchart .svrec.bhit::after{animation-duration:.65s}
/* Serving: sitting on the skippy balls (a drawing of their own: legs over the ball, hands on the handles) */
.svrider{display:none}
.svov[data-bph="hop"] .svrider,.svov[data-bph="on"] .svrider{display:block}
.svov[data-bph="hop"] .svaf .svball,.svov[data-bph="on"] .svaf .svball,.svov[data-bph="hop"] .svaf .svdancer,.svov[data-bph="on"] .svaf .svdancer{display:none}
.svov .svaf .svrider{position:absolute;left:0;width:100%;height:auto;bottom:calc(var(--s) * -.25)}
.svov[data-bph="hop"] .svaf .svhead,.svov[data-bph="on"] .svaf .svhead{top:calc(var(--s) * -.45);width:calc(var(--s) * .62);height:calc(var(--s) * .62);margin-left:calc(var(--s) * -.31);translate:none}
.svov[data-bph="hop"] .svins .svinsball,.svov[data-bph="on"] .svins .svinsball,.svov[data-bph="hop"] .svins .svleadsvg,.svov[data-bph="on"] .svins .svleadsvg,.svov[data-bph="hop"] .svins .svleadside,.svov[data-bph="on"] .svins .svleadside{display:none!important}
.svov .svins .svrider{position:absolute;inset:0;width:100%;height:100%}
.svov[data-bph="on"] .svrider .svrm{transform-box:fill-box;transform-origin:50% 0;animation:svlsing .49s ease-in-out infinite alternate}
.svov[data-bph="hop"] .svnb{visibility:hidden}
/* Serving: on the skippy balls every step is a bounce from tile centre to tile centre (no sliding) */
.svov[data-bph="on"] .svaf,.svov[data-bph="on"] .svins{transition:transform .37s cubic-bezier(.4,0,.5,1)!important}
.svov[data-bph="on"] .svaf .svfb2,.svov[data-bph="on"] .svins{animation:none}
.svov .svaf .svrider{bottom:0}
.svov[data-bph="on"] .svaf.ok .svfb2,.svov[data-bph="on"] .svins.ok .svrider,.svov[data-bph="on"] .svins.jmp .svrider{animation:svballhop .44s cubic-bezier(.3,0,.7,1)}
@keyframes svballhop{0%{transform:translateY(0) scaleY(.9)}12%{transform:translateY(0) scaleY(1.04)}50%{transform:translateY(calc(var(--s) * -.45))}88%{transform:translateY(0) scaleY(1)}100%{transform:translateY(0) scaleY(.92)}}
.svov[data-bph="on"] .svrider{transform-origin:50% 100%}
/* Serving: the flag in the hand, not on the avatar */
.svov .svaf .chflag{display:none}
.svov .svaf .svdancer{overflow:visible}
/* Serving: the avatar head on the shoulders (above the body, not over it), the arms free in front */
.svov .svaf .svhead{top:calc(var(--s) * -.12);width:calc(var(--s) * .62);height:calc(var(--s) * .62);margin-left:calc(var(--s) * -.31)}
.svov:not([data-bph="hop"]):not([data-bph="on"]) .svaf .svhead{top:calc(var(--s) * -.14)}
.svov .svaf .svdancer{z-index:2}
.svov .svaf .svdancer > path,.svov .svaf .svdancer .svlegs{visibility:visible}
.svkant{font-size:calc(var(--s) * .66)}
/* Serving on the phone: everything higher (no big gap), the feedback without a box */
#v-wait:has(#svui:not(.hidden)){justify-content:flex-start;padding-top:1vh}
#v-wait:has(#svui:not(.hidden)) #waittitle{margin:0 0 .4vh;font-size:5.6vw}
#v-wait:has(#svui:not(.hidden)) #waitsub{margin:0 0 1vh;font-size:3.6vw;line-height:1.3}
#v-wait:has(#svui:not(.hidden)) .avatarrow{margin-bottom:.6vh}
.svui{margin-top:.5vh}
.svui .svfield{height:40vh}
.svfield .svfb,.svfield .svfb.q0,.svfield .svfb.q1,.svfield .svfb.q2{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;width:auto!important;text-align:center!important}
.svui .svpads{margin-top:1.2vh}
#v-wait:has(#svui:not(.hidden)){gap:6px;justify-content:flex-start;padding-top:0;margin-top:0}
#v-wait:has(#svui:not(.hidden)) #waitlabel,#v-wait:has(#svui:not(.hidden)) #profile{display:none}
#v-wait:has(#svui:not(.hidden)) #waittitle{font-size:1.15rem;margin:0;min-height:0}
#v-wait:has(#svui:not(.hidden)) #waitsub{font-size:.85rem;margin:0}
/* Serving on the phone: no explanation line above the arrows; a taller arrow field */
#v-wait:has(#svui:not(.hidden)) #waitsub{display:none}
.svui .svfield{height:52vh}
/* the pump (while the other team dances) */
.svpump{display:none;position:absolute;inset:0;z-index:3;touch-action:none;background:linear-gradient(#2a0838,#4a1050);border-radius:18px;--p:0;--f:0}
.svui.pumping .svpump{display:block}
.svui.pumping .svn,.svui.pumping .svrec{visibility:hidden}
.svpball{position:absolute;left:8%;bottom:10%;width:46%;aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center}
.svpball i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a96,#e0102a 55%,#7a0614);box-shadow:inset 0 -6px 14px rgba(0,0,0,.35);transform-origin:50% 100%;transform:scale(calc(.35 + var(--f) * .65),calc(.12 + var(--f) * .88));transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.svpball i::before,.svpball i::after{content:'';position:absolute;top:-9%;width:12%;height:22%;border:4px solid #7a0614;border-bottom:0;border-radius:50% 50% 0 0}
.svpball i::before{left:28%}.svpball i::after{right:28%}
.svpump2{position:absolute;right:12%;top:8%;bottom:10%;width:22%}
.svpcyl{position:absolute;left:25%;right:25%;top:30%;bottom:0;border-radius:8px;background:linear-gradient(90deg,#9aa0b0,#e8ebf2,#9aa0b0);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.svph{position:absolute;left:0;right:0;top:calc(var(--p) * 30%);height:62%;z-index:2}
.svph::before{content:'';position:absolute;left:0;right:0;top:0;height:12%;border-radius:8px;background:#ffd23f;box-shadow:0 3px 0 #b8902a}
.svph::after{content:'';position:absolute;left:44%;width:12%;top:10%;bottom:0;background:#555}
.svpn{position:absolute;left:0;right:0;top:4%;text-align:center;font-size:7vw;font-weight:900;color:#fff}
.svpump em{position:absolute;left:4%;right:4%;top:16%;text-align:center;font-style:normal;font-weight:800;font-size:4.2vw;color:#ffd23f}
.svpump.full .svpball i{animation:svpfull .5s ease-out}
@keyframes svpfull{0%{filter:brightness(1.8)}100%{filter:none}}
.svfield .svfb{display:block;left:0!important;right:0!important;margin:0 auto!important}
.svui .svrec.flash.f2 svg path,.svui .svrec.flash.f1 svg path,.svui .svrec.flash.f0 svg path{fill:rgba(255,255,255,.08)}
.svui .svrec.flash.f2 svg path{animation:svrf2 .35s ease-out}.svui .svrec.flash.f1 svg path{animation:svrf1 .35s ease-out}.svui .svrec.flash.f0 svg path{animation:svrf0 .35s ease-out}
@keyframes svrf2{0%{fill:#ffd23f}}@keyframes svrf1{0%{fill:#9fe7ff}}@keyframes svrf0{0%{fill:#ff4d4d}}
.svins.svdan.d1 .svlbody,.svins.svdan.d3 .svlbody{animation-delay:-.49s}
.svpump.done em{visibility:hidden}.svpump.done .svpn{color:#ffd23f}
.svph{top:calc(var(--p) * 38%)}.svpcyl{top:24%}
/* Serving: no arrow buttons while it's the other team's turn (the pump gets the room) */
.svui.pumping .svpads{display:none}
.svui.pumping .svfield{height:64vh}
/* Serving: blue team (left) and yellow team (right) */
.svchart.l .svteam{color:#6aa8ff}.svchart.l{box-shadow:inset 0 0 0 2px rgba(47,120,255,.75)}
.svchart.r .svteam{color:#ffd23f}.svchart.r{box-shadow:inset 0 0 0 2px rgba(255,210,63,.75);background:rgba(30,6,40,.28)}
.svready.a b{color:#4d9bff;text-shadow:0 0 30px #1f5fd8}.svready.a{box-shadow:0 0 0 4px #1f5fd8,0 0 50px rgba(31,95,216,.6)}
.svready.b b{color:#ffd23f;text-shadow:0 0 30px #c89a10}.svready.b{background:rgba(20,4,30,.72);box-shadow:0 0 0 4px #ffd23f,0 0 50px rgba(255,210,63,.5)}
.svres tr.a td:first-child{border-left-color:#1f5fd8}.svres tr.b td:first-child{border-left-color:#ffd23f}
.svpball i{background:radial-gradient(circle at 35% 30%,#8ab8ff,#1f6fe8 55%,#0a2a6a)}
.svpball i::before,.svpball i::after{border-color:#0a2a6a}
.svui.tB .svpball i{background:radial-gradient(circle at 35% 30%,#fff0a0,#ffc61a 55%,#8a6400)}
.svui.tB .svpball i::before,.svui.tB .svpball i::after{border-color:#8a6400}
/* Serving phone: pick a colour, then pump */
.svpick{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;padding:4vw;text-align:center;background:linear-gradient(#2a0838,#4a1050);border-radius:18px}
.svpick b{color:#fff;font-size:5.4vw;font-weight:900}
.svpick div{display:grid;grid-template-columns:repeat(4,1fr);gap:4vw}
.svpick button{width:15vw;height:15vw;border-radius:50%;border:3px solid rgba(255,255,255,.7);background:radial-gradient(circle at 35% 30%,#fff8,var(--bc) 55%);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.svpump.picked .svpick{display:none}
.svpump.picked .svpball i,.svui.tB .svpump.picked .svpball i{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.65),var(--bc) 55%,rgba(0,0,0,.55))}
.svpump.picked .svpball i::before,.svpump.picked .svpball i::after{border-color:var(--bc);filter:brightness(.55)}
/* Serving phone: pick a colour, then pump */
.svpick{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;padding:4vw;text-align:center;background:linear-gradient(#2a0838,#4a1050);border-radius:18px}
.svpick b{color:#fff;font-size:5.4vw;font-weight:900}
.svpick div{display:grid;grid-template-columns:repeat(4,1fr);gap:4vw}
.svpick button{width:15vw;height:15vw;border-radius:50%;border:3px solid rgba(255,255,255,.7);background:radial-gradient(circle at 35% 30%,#fff8,var(--bc) 55%);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.svpump.picked .svpick{display:none}
.svpump.picked .svpball i,.svui.tB .svpump.picked .svpball i{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.65),var(--bc) 55%,rgba(0,0,0,.55))}
.svpump.picked .svpball i::before,.svpump.picked .svpball i::after{border-color:var(--bc);filter:brightness(.55)}
/* Serving: the results at the top of the screen */
.svres{top:2vh;transform:translate(-50%,0) scale(.6);transform-origin:50% 0}
.svres.on{transform:translate(-50%,0) scale(1)}
/* join: in the room or online */
.wherebox{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wherebox label{display:block;cursor:pointer;margin:0}
.wherebox input{position:absolute;opacity:0;pointer-events:none}
.wherebox span{display:block;text-align:center;padding:10px 6px;border-radius:12px;border:2px solid var(--line,rgba(255,255,255,.2));font-weight:800;font-size:.95rem}
.wherebox input:checked+span{border-color:#ff3fa4;background:rgba(255,63,164,.15)}
/* syncing online players */
#calov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(10,4,20,.88)}
#calov .calbox{text-align:center;color:#fff}
#calov h2{margin:0 0 1vh;font-size:clamp(1.6rem,4vw,3.4rem)}
#calov p{margin:0 0 4vh;font-size:clamp(1rem,2vw,1.8rem);opacity:.85}
#calov .calfl{width:30vh;height:30vh;margin:0 auto;border-radius:50%;border:8px solid #ff3fa4;display:flex;align-items:center;justify-content:center;font-size:12vh;font-weight:900}
#calov .calfl.on{animation:calfl .5s ease-out}
@keyframes calfl{0%{background:#fff;color:#ff3fa4;transform:scale(1.15)}100%{background:transparent;transform:scale(1)}}
#calov .calres{margin-top:4vh;display:flex;flex-wrap:wrap;gap:1vh 2vw;justify-content:center;font-weight:800;font-size:clamp(.9rem,1.8vw,1.5rem)}
#calui{position:fixed;inset:0;z-index:300;background:linear-gradient(#2a0838,#120420);display:flex;align-items:center;justify-content:center;touch-action:none}
#calui .calp{text-align:center;color:#fff;padding:6vw}
#calui b{font-size:8vw}
#calui p{font-size:4.6vw;opacity:.85}
#calui .calpad{display:flex;align-items:center;justify-content:center;width:56vw;height:56vw;margin:4vh auto;border-radius:50%;border:6px solid #ff3fa4;font-style:normal;font-weight:900;font-size:9vw}
#calui .calpad.hit{animation:calfl .3s ease-out}
#calui em{display:block;font-style:normal;font-weight:900;font-size:5.6vw;color:#ffd23f;min-height:1.4em}
.svpick{display:none!important}
/* Serving: green team (left) and purple team (right) */
.svchart.l .svteam{color:#4fe07a}.svchart.l{box-shadow:inset 0 0 0 2px rgba(31,179,74,.8)}
.svchart.r .svteam{color:#c08cff}.svchart.r{box-shadow:inset 0 0 0 2px rgba(138,60,224,.85);background:rgba(30,6,40,.28)}
.svready.a b{color:#4fe07a;text-shadow:0 0 30px #17a843}.svready.a{box-shadow:0 0 0 4px #1fb34a,0 0 50px rgba(31,179,74,.6)}
.svready.b b{color:#c08cff;text-shadow:0 0 30px #7a2fd6}.svready.b{background:rgba(20,4,30,.72);box-shadow:0 0 0 4px #8a3ce0,0 0 50px rgba(138,60,224,.6)}
.svres tr.a td:first-child{border-left-color:#1fb34a}.svres tr.b td:first-child{border-left-color:#8a3ce0}
.svaf.gA .svtile{box-shadow:0 0 0 2px #1fb34a,0 0 18px #1fb34a}.svaf.gB .svtile{box-shadow:0 0 0 2px #8a3ce0,0 0 18px #8a3ce0}
.svpball i{background:radial-gradient(circle at 35% 30%,#9cf5b4,#1fb34a 55%,#0a4a1c)}
.svpball i::before,.svpball i::after{border-color:#0a4a1c}
.svui.tB .svpball i{background:radial-gradient(circle at 35% 30%,#dcc0ff,#8a3ce0 55%,#38106e)}
.svui.tB .svpball i::before,.svui.tB .svpball i::after{border-color:#38106e}
/* the sync button: a checkmark at the end, lit when every player is synced */
#calbtn{position:relative;padding-right:2.6em}
#calbtn .calok{position:absolute;right:.7em;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;line-height:1.5em;border-radius:50%;text-align:center;font-weight:900;color:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.3);transition:all .3s}
#calbtn.synced .calok{color:#fff;background:#3ddc84;border-color:#3ddc84;box-shadow:0 0 12px rgba(61,220,132,.7)}
/* lobby: a sync box under every player */
.psync{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:3px;font-size:.68rem;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.psync i{display:inline-block;width:13px;height:13px;line-height:11px;border-radius:3px;border:1.5px solid rgba(255,255,255,.45);font-style:normal;font-size:10px;text-align:center;color:#fff}
.psync.ok{color:#8ff0b6}.psync.ok i{background:#3ddc84;border-color:#3ddc84}
/* the sync results: everyone's delay, OK or try again */
#calov .caltab{margin:3vh auto 0;border-collapse:collapse;font-size:clamp(1rem,2.2vw,1.9rem);font-weight:800;min-width:min(90vw,700px)}
#calov .caltab td{padding:.8vh 1.2vw;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}
#calov .caltab td:first-child{width:5vh}
#calov .caltab .char{width:5vh;height:5vh;display:block}
#calov .caltab td:last-child{text-align:right}
#calov .caltab tr.ok td:last-child{color:#8ff0b6}#calov .caltab tr.no td:last-child{color:#ff8a8a}
#calov .calbtns{display:flex;gap:2vw;justify-content:center;margin-top:4vh}
#calov .calbtns .btn{min-width:12em;font-size:clamp(1rem,1.8vw,1.5rem)}
#lobbystart.sync:not(:disabled){background:linear-gradient(135deg,#2de2e6,#3a7bff);color:#06122a}
/* Serving: on the balls, every landing squashes the ball and sends a ring across the tile */
@keyframes svballhop{0%{transform:translateY(0) scale(1.1,.86)}14%{transform:translateY(0) scale(.95,1.06)}50%{transform:translateY(calc(var(--s) * -.45)) scale(.97,1.04)}84%{transform:translateY(0) scale(1,1)}92%{transform:translateY(0) scale(1.16,.8)}100%{transform:translateY(0) scale(1.04,.94)}}
.svov[data-bph="on"] .svaf::after,.svov[data-bph="on"] .svins::after{content:'';position:absolute;left:50%;bottom:calc(var(--s) * -.08);width:calc(var(--s) * 1.1);height:calc(var(--s) * .38);margin-left:calc(var(--s) * -.55);border-radius:50%;border:3px solid rgba(255,255,255,.9);box-shadow:0 0 12px rgba(255,255,255,.7),inset 0 0 8px rgba(255,255,255,.5);opacity:0;pointer-events:none;z-index:-1}
.svov[data-bph="on"] .svins::after{bottom:0}
.svov[data-bph="on"] .svaf.ok::after,.svov[data-bph="on"] .svins.ok::after,.svov[data-bph="on"] .svins.jmp::after{animation:svland .5s ease-out .37s both}
@keyframes svland{0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(1.5)}}
/* Serving: the backup dancers walk in profile (legs and arms swinging, fan in front) */
.svov .svins.svdan.walk .svleadsvg{display:none}
.svov .svins.svdan.walk .svleadside{display:block}
.svins.svdan .svsarm.f{transform-box:view-box;transform-origin:168px 178px;animation:svsarm .68s ease-in-out infinite;animation-delay:-.34s}
/* their fan routine: a new move with every step (fan high, across the chest, arms wide, fan over the head), the fan snapping open */
.svins.svdan .svdarm{transform-box:view-box;transition:transform .16s cubic-bezier(.3,1.4,.5,1)}
.svins.svdan .svdarm.r{transform-origin:203px 169px}.svins.svdan .svdarm.l{transform-origin:117px 169px}
.svins.svdan.fp0 .svdarm.r{transform:rotate(-125deg)}.svins.svdan.fp0 .svdarm.l{transform:rotate(-20deg)}
.svins.svdan.fp1 .svdarm.r{transform:rotate(62deg)}.svins.svdan.fp1 .svdarm.l{transform:rotate(105deg)}
.svins.svdan.fp2 .svdarm.r{transform:rotate(-62deg)}.svins.svdan.fp2 .svdarm.l{transform:rotate(62deg)}
.svins.svdan.fp3 .svdarm.r{transform:rotate(-150deg)}.svins.svdan.fp3 .svdarm.l{transform:rotate(25deg)}
.svins.svdan .svfanf{transform-box:view-box;transform-origin:231px 244px}
.svins.svdan.ok .svfanf,.svins.svdan.jmp .svfanf{animation:svfano .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes svfano{0%{transform:rotate(-50deg) scale(.35)}100%{transform:none}}
/* Serving: the presenters walk in once everything has loaded, and stand together at the front of the stage, in the middle */
.svhosts .ehost{bottom:0;height:42vh;transition:translate 1.3s cubic-bezier(.3,.9,.4,1),opacity 1s}
.svhosts .him{left:auto;right:calc(50% + .6vw)}.svhosts .her{right:auto;left:calc(50% + .6vw)}
.svov:not([data-hin]) .svhosts .him{translate:-60vw 0;opacity:0}.svov:not([data-hin]) .svhosts .her{translate:60vw 0;opacity:0}
/* picking an avatar: the selfie and upload options are hidden, with a small way back */
.mypicrow.avmode{padding:6px 10px}
.mypicrow.avmode > :not(#backpic){display:none!important}
#backpic{background:none;border:0;color:var(--mute);font-weight:700;font-size:.9rem;text-decoration:underline;cursor:pointer;padding:4px;width:100%}
/* lobby: 'everyone ready' with a checkmark, under the sync button */
.rdyrow{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;padding:.55em 2.6em .55em 1em;border-radius:14px;border:2px solid var(--line,rgba(255,255,255,.16));font-weight:800;color:var(--mute)}
.rdyrow .calok{position:absolute;right:.7em;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em;line-height:1.5em;border-radius:50%;text-align:center;font-weight:900;color:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.3);transition:all .3s}
.rdyrow.synced{color:#fff}.rdyrow.synced .calok{color:#fff;background:#3ddc84;border-color:#3ddc84;box-shadow:0 0 12px rgba(61,220,132,.7)}
/* the sync circle after the last flash: 'Calculating…' and a ring going round once */
#calov .calfl{position:relative}
#calov .calfl.calc b{font-size:clamp(1.1rem,3.4vh,2rem);letter-spacing:.02em}
#calov .calring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg);pointer-events:none}
#calov .calring circle{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:289.03;filter:drop-shadow(0 0 6px #fff);animation:calring var(--dur,8s) linear forwards}
@keyframes calring{to{stroke-dashoffset:0}}
/* the sync screen: first a big 'Sync' button filling the circle; the countdown starts when it is pressed */
#calov button.calfl{background:rgba(255,63,164,.12);color:#fff;font:inherit;padding:0;cursor:default}
#calov button.calfl b{font-size:12vh;font-weight:900}
#calov .calfl.calgo{cursor:pointer;background:radial-gradient(circle at 50% 40%,#ff5fb5,#d0186e);box-shadow:0 0 0 0 rgba(255,63,164,.6);animation:calpulse 1.6s ease-in-out infinite}
#calov .calfl.calgo:hover{filter:brightness(1.1)}
#calov .calfl.calgo b{font-size:8vh}
@keyframes calpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,63,164,.55)}50%{box-shadow:0 0 0 18px rgba(255,63,164,0)}}
#calov .calcancel{display:block;margin:2.4vh auto 0;background:none;border:0;color:var(--mute);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* lobby: streaming or local play, as two cards like the game types (local hides the stream delay sync) */
.presets.playmode{grid-template-columns:repeat(2,1fr);margin:4px 0 14px}
/* Serving: the presenters on the stage (placed by the 3D view), in front of the players */
.svov .svhosts{z-index:30}
.svov .svhosts .ehost{right:auto!important;bottom:auto!important;width:auto;transform:translate(-50%,-97%)}
#calov .calring.beat circle{stroke:rgba(255,255,255,.85);stroke-width:5}
/* Serving: on the balls the players sit up straight, the upper body showing under the avatar head (like the dancers) */
.svov[data-bph="hop"] .svaf .svhead,.svov[data-bph="on"] .svaf .svhead{top:calc(var(--s) * -.66);width:calc(var(--s) * .52);height:calc(var(--s) * .52);margin-left:calc(var(--s) * -.26)}
/* Serving: the song is over: the singer closes her mouth */
.svov[data-st="end"] .svins:not(.svdan) .svlmouth,.svov[data-st="end"] .svins .svsmouth,.svov[data-st="end"] .svins .svrm{transform-box:fill-box;transform-origin:50% 30%;transform:scaleY(.16)!important;animation:none!important}
/* Serving phone: no more pumping while the other team dances (just a message to watch) */
.svui .svpump{display:none!important}
.svui.pumping .svwt{display:block;font-size:5vw;margin-top:4vh}
/* Serving: the balls inflate quicker (everyone hops on as soon as they're up); speech balloons next to the presenters */
.svov[data-bph="rise"] .svnb i{animation:svrise 3.6s cubic-bezier(.2,.8,.3,1) both}
.svov .svbub{max-width:26vw}
.svov .svbub.her{transform-origin:0 50%}.svov .svbub.him{transform-origin:100% 50%}
/* Serving: the ring at the top doesn't pulse */
.svbeat.pulse i{animation:none}
/* Serving: a team's scores so far, in their arrow panel after their round */
.svscore{position:absolute;left:6%;right:6%;top:14vh;z-index:3;padding:1.4vh 1vw;border-radius:14px;background:rgba(10,4,18,.82);color:#fff;opacity:0;transform:translateY(1vh);transition:opacity .4s,transform .4s;pointer-events:none}
.svscore.on{opacity:1;transform:none}
.svscore .svsct{display:block;text-align:center;font-size:1.8vh;letter-spacing:.12em;text-transform:uppercase;color:#ffd23f;margin-bottom:.8vh}
.svsrow{display:grid;grid-template-columns:1fr auto auto;gap:.6vw;align-items:center;padding:.5vh 0;border-top:1px solid rgba(255,255,255,.1);font-weight:800;font-size:1.9vh}
.svsrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svsrow em{font-style:normal;color:var(--mute);font-size:1.5vh}
.svsrow i{font-style:normal;color:#ffd23f;font-size:2.2vh;min-width:2.4em;text-align:right}
.svscore small{display:block;text-align:center;color:var(--mute);font-size:1.3vh;margin-top:.6vh}
.svsrow{grid-template-columns:1fr auto;row-gap:0}
.svsrow span{grid-column:1;grid-row:1;font-size:1.8vh}
.svsrow em{grid-column:1;grid-row:2;font-size:1.35vh}
.svsrow i{grid-column:2;grid-row:1 / 3}
.svmp3row{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.svmp3row small{color:var(--mute);font-size:.8rem}
.svmp3row .linkbtn{background:none;border:0;color:var(--mute);text-decoration:underline;cursor:pointer;font:inherit;font-size:.8rem}
/* The presenters walking: the side view (legs and arms swinging, a little bob), facing the way they go */
.ehost .ehside{display:none}
.ehost.walk .ehfront{display:none}.ehost.walk .ehside{display:inline}
.ehost .ehside{transform-box:view-box;transform-origin:102px 0}
.ehost.walk.wl .ehside{transform:scaleX(-1)}
.ehost .ehleg,.ehost .eharm{transform-box:view-box}
.ehost .ehleg{transform-origin:100px 298px;animation:ehstep .9s ease-in-out infinite}
.ehost .ehleg.b{animation-delay:-.45s}
.ehost .eharm{transform-origin:102px 160px;animation:ehswing .9s ease-in-out infinite}
.ehost .eharm.f{animation-delay:-.45s}
.ehost.her .ehleg{transform-origin:110px 404px;animation-name:ehstep2}
.ehost.her .ehgown{transform-box:view-box;transform-origin:104px 150px;animation:ehgown .9s ease-in-out infinite}
.ehost.walk .ehside{animation:ehwbob .45s ease-in-out infinite alternate}
@keyframes ehstep{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes ehstep2{0%,100%{transform:translateX(12px)}50%{transform:translateX(-12px)}}
@keyframes ehswing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes ehgown{0%,100%{transform:skewX(2.5deg)}50%{transform:skewX(-2.5deg)}}
@keyframes ehwbob{from{translate:0 0}to{translate:0 -5px}}
/* Serving: the presenters take their time walking in */
.svov .svhosts .ehost{transition:translate 4.6s cubic-bezier(.35,.1,.4,1),opacity .8s}
/* Serving phone: the vote for extra arrows (while your team isn't dancing) */
.svvote{margin:1.6vh auto 0;padding:1.6vh 4vw;max-width:92vw;border-radius:16px;background:rgba(255,210,63,.1);border:2px solid rgba(255,210,63,.45);text-align:center}
.svvote b{display:block;color:#ffd23f;font-size:4.4vw;margin-bottom:1.2vh}
.svvote div{display:flex;flex-wrap:wrap;gap:2vw;justify-content:center}
.svvote button{flex:1 1 40%;padding:1.4vh 2vw;border-radius:12px;border:2px solid var(--line,rgba(255,255,255,.2));background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:800;font-size:4vw}
.svvote button.on{border-color:#ffd23f;background:rgba(255,210,63,.25)}
.svvote button i{font-style:normal;background:#ffd23f;color:#221a00;border-radius:99px;padding:0 .5em;margin-left:.3em;font-size:.85em}
.svvote small{display:block;color:var(--mute);margin-top:1vh;font-size:3.2vw}
/* the big screen: who got the extra arrows, in their team's panel */
.svxtra{position:absolute;left:4%;right:4%;bottom:2vh;z-index:3;text-align:center;padding:.8vh .6vw;border-radius:10px;background:rgba(255,210,63,.18);border:1.5px solid rgba(255,210,63,.6);color:#ffd23f;font-weight:900;font-size:1.7vh;opacity:0;transition:opacity .4s}
.svxtra.on{opacity:1}

/* Verona: her hand stays on her arm while she waves (both turn round the shoulder) */
.jmjul .jarm{transform-box:view-box!important;transform-origin:134px 122px!important}

/* The presenters from the back (Verona: they turn round, then walk off into the distance) */
.ehost .ehback{display:none}
.hoststurn .grhosts .ehost .ehfront,.hoststurn .grhosts .ehost .ehside{display:none!important}
.hoststurn .grhosts .ehost .ehback{display:inline;transform-box:view-box;transform-origin:100px 0;animation:ehturn .5s ease-in-out}
@keyframes ehturn{0%{transform:scaleX(.12)}100%{transform:none}}
.ehback .ehbl{transform-box:view-box}
.hostsgone .grhosts .ehost .ehback .ehbl{animation:ehbstep .42s ease-in-out infinite alternate}
.hostsgone .grhosts .ehost .ehback .ehbl.r{animation-delay:-.42s}
@keyframes ehbstep{from{transform:translateY(0)}to{transform:translateY(-14px)}}
/* Serving on the phone: everything fits on the screen and nothing scrolls while you dance */
body.svplay{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body.svplay .svui{touch-action:none}
body.svplay .svui .svfield{height:min(52vh,calc(100dvh - 300px))}
body.svplay .svui.pumping .svfield{height:min(64vh,calc(100dvh - 240px))}
body.svplay #svvote:not(.hidden) + .svui .svfield{height:calc(100dvh - 470px);min-height:120px}
/* ===== Woodruff's Boutique: a real luxury shop ===== */
.shopov.boutique{background:#2a0e3c}
.boutique .bqwall{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='110' viewBox='0 0 80 110'%3E%3Cg fill='none' stroke='%23d9a83a' stroke-opacity='.16' stroke-width='1.6'%3E%3Cpath d='M40 8 C52 22 60 30 60 44 C60 58 48 64 40 76 C32 64 20 58 20 44 C20 30 28 22 40 8 Z'/%3E%3Cpath d='M40 22 C46 30 50 36 50 44 C50 52 44 56 40 62 C36 56 30 52 30 44 C30 36 34 30 40 22 Z'/%3E%3Cpath d='M40 76 V102 M30 92 Q40 84 50 92 M0 55 Q10 45 20 55 Q10 65 0 55 M80 55 Q70 45 60 55 Q70 65 80 55'/%3E%3C/g%3E%3C/svg%3E") 0 0/80px 110px,linear-gradient(90deg,rgba(0,0,0,.35),transparent 18%,transparent 82%,rgba(0,0,0,.35)),linear-gradient(#3a1452,#2a0e3c 60%,#1c0828)}
.bqroom{position:absolute;inset:0;pointer-events:none}
.bqroom .bqpanel{position:absolute;left:0;right:0;bottom:6vh;height:20vh;background:repeating-linear-gradient(90deg,transparent 0 1.2vw,rgba(0,0,0,.25) 1.2vw 1.35vw,transparent 1.35vw 13vw,rgba(255,214,120,.12) 13vw 13.15vw),linear-gradient(#4a2414,#2e140a);border-top:.9vh solid #c9962a;box-shadow:0 -.4vh 0 #7a5214,inset 0 2vh 3vh rgba(0,0,0,.35)}
.bqroom .bqmarble{position:absolute;left:0;right:0;bottom:0;height:6vh;background:conic-gradient(from 45deg,#e9e4ee 25%,#2a2236 0 50%,#e9e4ee 0 75%,#2a2236 0) 0 0/6vh 6vh;box-shadow:inset 0 1.5vh 2vh rgba(0,0,0,.45)}
.bqroom .bqcurt{position:absolute;top:0;bottom:6vh;width:5.5vw;background:repeating-linear-gradient(90deg,#7a0a2a 0 .6vw,#a8123c .6vw 1.3vw,#5a0620 1.3vw 1.8vw);box-shadow:0 0 30px rgba(0,0,0,.6)}
.bqroom .bqcurt.l{left:0;border-radius:0 0 60% 0/0 0 12% 0}.bqroom .bqcurt.r{right:0;border-radius:0 0 0 60%/0 0 0 12%}
.bqroom .bqcurt::before{content:'';position:absolute;left:0;right:0;top:0;height:6vh;background:linear-gradient(#c9962a,#8a5a14);border-bottom:.4vh solid #ffd36a}
.bqroom .bqcurt b{position:absolute;top:46%;width:1.8vw;height:6vh;border-radius:50% 50% 30% 30%;background:linear-gradient(#ffd36a,#c9962a);box-shadow:0 .6vh 0 -.2vh #8a5a14}
.bqroom .bqcurt.l b{right:-.6vw}.bqroom .bqcurt.r b{left:-.6vw}
.bqroom .bqsconce{position:absolute;top:22vh;width:2vw;height:5vh;border-radius:40% 40% 10% 10%;background:linear-gradient(#ffe9a8,#c9962a);box-shadow:0 0 60px 30px rgba(255,200,110,.22),0 0 18px rgba(255,220,140,.9)}
.bqroom .bqsconce.l{left:6.5vw}.bqroom .bqsconce.r{right:6.5vw}
.bqroom .bqchand{position:absolute;left:6.5vw;top:-1vh;width:11vw;height:auto;filter:drop-shadow(0 0 18px rgba(255,214,120,.45));animation:bqsway 4s ease-in-out infinite alternate;transform-origin:50% 0}
/* the cabinet: polished wood with a gold edge, a velvet back, glass shelves under little spotlights */
.shopov.boutique .bqcase{background:radial-gradient(ellipse 20% 70% at 10% 0,rgba(255,236,190,.16),transparent),radial-gradient(ellipse 20% 70% at 30% 0,rgba(255,236,190,.16),transparent),radial-gradient(ellipse 20% 70% at 50% 0,rgba(255,236,190,.16),transparent),radial-gradient(ellipse 20% 70% at 70% 0,rgba(255,236,190,.16),transparent),radial-gradient(ellipse 20% 70% at 90% 0,rgba(255,236,190,.16),transparent),linear-gradient(#4a0c30,#2a0620);border:.35vh solid #e8c060;border-radius:14px;box-shadow:0 0 0 1.1vh #5a2e14,0 0 0 1.35vh #c9962a,0 2vh 4vh rgba(0,0,0,.6),inset 0 0 3vh rgba(0,0,0,.5)}
.shopov.boutique .bqshelf{border-bottom:.7vh solid rgba(210,235,255,.42);box-shadow:0 .7vh 0 -.2vh rgba(255,255,255,.2),0 1.6vh 1.6vh -1vh rgba(0,0,0,.6)!important;background:radial-gradient(ellipse 9% 80% at 10% 0,rgba(255,240,200,.14),transparent),radial-gradient(ellipse 9% 80% at 30% 0,rgba(255,240,200,.14),transparent),radial-gradient(ellipse 9% 80% at 50% 0,rgba(255,240,200,.14),transparent),radial-gradient(ellipse 9% 80% at 70% 0,rgba(255,240,200,.14),transparent),radial-gradient(ellipse 9% 80% at 90% 0,rgba(255,240,200,.14),transparent)}
.shopov.boutique .bqtier{background:linear-gradient(#ffe38a,#c9962a);color:#3a1a00!important;padding:.15vh .6vw;border-radius:6px;box-shadow:0 .3vh 0 #7a5214;opacity:1!important}
.shopov.boutique .bqtier em{color:#7a0a2a!important}
.shopov.boutique .bqi .si{position:relative;display:inline-block}
.shopov.boutique .bqi .si::after{content:'';position:absolute;left:8%;right:8%;bottom:-.18em;height:.2em;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#ffe9a8,#a8741a 70%);box-shadow:0 .1em .15em rgba(0,0,0,.5);z-index:-1}
/* Serving: when the dancing is about to start the presenters walk off the stage (him left, her right) as the music comes up, fading only at the edge */
.svov:not([data-st="intro"]) .svhosts .ehost,.svov[data-hout] .svhosts .ehost{transition:translate 4.4s cubic-bezier(.4,0,.6,1),opacity .5s 3.9s}
/* the boutique's cabinet stays clear of the right-hand curtain (items a little closer together), and the names sit clear of the little gold stands */
.shopov.boutique .bqcase{left:30.5vw;right:7.5vw}
.shopov.boutique .bqshelf{padding-left:.3vw;padding-right:.3vw}
.shopov.boutique .bqi{width:auto;flex:1 1 0;min-width:0}
.shopov.boutique .bqi .si{margin-bottom:.4em}
.shopov.boutique .bqsale{right:5vw}
/* no title signs at the top of the party games (the hosts' introduction still names the game; the final scores and the item alert keep theirs) */
.grsign:not(.hssign),.pcov .hssign,.bqsign,.orsign,.rusign,.tcsign,.zgsign{display:none!important}
.fksign{padding:.25em .9em}.fksign small{font-size:clamp(.8rem,1.2vw,1.2rem);margin:0}
.fksign:has(small:empty){display:none}
.svov .svstage{top:1.8vh}
/* Lynda's speech bubble sits just above her head, and the timer halfway between her head and the cabinet */
.shopov.boutique .bqbubble{top:auto;bottom:52vh}
.shopov.boutique .bqtimer{left:22.7vw;transform:translateX(-50%)}
/* on the balls the move across takes as long as the hop (.37 s), and it starts that much before the beat: they land on the new tile exactly on the beat */

/* the break after the purple part, until they hop on the skippy balls: every player grooves on the beat (the whole figure, head included) */
.svov[data-brk] .svaf .svfb2,.svov[data-brk] .svaf.ok .svfb2{animation:svpgroove .4918s ease-in-out infinite alternate;transform-origin:50% 100%}
.svov[data-brk] .svaf:nth-child(even) .svfb2{animation-delay:-.4918s}
.svov[data-brk] .svaf .svdancer .al{animation:svpgrooveal .4918s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:100% 100%}
.svov[data-brk] .svaf .svdancer .ar{animation:svpgroovear .4918s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:0 100%}
@keyframes svpgroove{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-6%) rotate(4deg)}}
@keyframes svpgrooveal{from{transform:rotate(-10deg)}to{transform:rotate(-60deg)}}
@keyframes svpgroovear{from{transform:rotate(60deg)}to{transform:rotate(10deg)}}
/* while the song plays, no idle floating up and down: they only move on their steps */
.svov[data-st="play"]:not([data-brk]) .svaf:not(.ok):not(.oops):not(.walkin):not(.fall) .svfb2,.svov[data-st="ready"] .svaf:not(.walkin) .svfb2{animation:none}
/* the shoppers' names: centred under the cabinet, halfway between its bottom and the chequered floor */
.shopov.boutique .shoppers{left:30.5vw;right:7.5vw;bottom:10.2vh;justify-content:center}
.rdyrow.empty .calok{display:none}.rdyrow.empty{padding-right:1em}
/* the final scores: on the same stage as the winner's screen; the scores on its LED wall, everyone standing on the stage */
.fsov .grwall,.fsov .grfloor,.fsov .hsspot{display:none}
.fsov .fsstudio{position:absolute;inset:0;overflow:hidden;display:block;z-index:0}
.fsov .fsstudio .stwall{left:9%;right:9%;top:7%;bottom:44%;opacity:1;border-radius:12px;box-shadow:0 0 120px 20px rgba(255,46,136,.5),inset 0 0 60px rgba(0,0,0,.4)}
.fsov .fsstudio .stfloor{height:46%}
.fsov .fsstudio .stbeam{opacity:.55}
.fsov .fsboard{left:9%;right:9%;top:7%;bottom:auto;height:49vh;border-radius:12px;overflow:hidden;align-items:stretch}
.fsov .fsboard ol{border:0;border-radius:12px;box-shadow:none;height:100%;justify-content:center;background:radial-gradient(ellipse at 50% 0%,rgba(120,60,220,.35),transparent 70%),linear-gradient(rgba(14,8,40,.84),rgba(8,4,24,.9))}
.fsov .fsboard::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:12px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.3) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.3));z-index:3}
.fsov .fsboard li{position:relative;z-index:2}
.fsov .grhosts .ehost{height:50vh;bottom:5vh}
.fsov .grhosts .him{left:14vw}.fsov .grhosts .her{right:14vw}
.fsov .hssign{display:none}
/* the courier: on the stage too, the envelope in his hand (it moves with him), and his mouth moves when he talks */
.fscour{bottom:5vh;transition:left 2.5s cubic-bezier(.3,.3,.55,1)}
.fsov.cin .fscour{left:25vw}
.fsenv{left:calc(104vw - 4.5vh);bottom:21vh;transition:left 2.5s cubic-bezier(.3,.3,.55,1),bottom .9s cubic-bezier(.3,1.2,.5,1),width .9s cubic-bezier(.3,1.2,.5,1),height .9s cubic-bezier(.3,1.2,.5,1),transform .9s,opacity .4s}
.fsov.cin .fsenv{left:calc(25vw - 4.5vh)}
.fsov.cgive .fsenv{left:15vw;bottom:27vh}
.fscour .cmouth{opacity:0;transform-box:fill-box;transform-origin:50% 30%}
.fsov.ctalk .fscour .cmouth{opacity:1;animation:ctalk .16s ease-in-out infinite alternate}
.fsov.ctalk .fscour .csmile{opacity:0}
@keyframes ctalk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.fsov .fsboard{align-items:center}.fsov .fsboard ol{height:auto;max-height:100%}
.fsov .grbub{top:auto;bottom:57vh;max-width:24vw;font-size:clamp(1rem,1.7vw,1.5rem)}
.fsov .grbub.him{left:2vw}.fsov .grbub.her{right:2vw}
.fsov .fsboard{left:22vw;right:22vw}

.fsov .fsstudio .stwall::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px)}
.fsov .grbub{max-width:19vw;bottom:58vh}
/* the team panels: glowing in the team colour on their turn, and easier to see when it isn't */
.svov[data-act="B"] .svchart.l,.svov[data-act="A"] .svchart.r{opacity:.62}
.svov[data-act="A"] .svchart.l,.svov[data-act="*"] .svchart.l{box-shadow:inset 0 0 0 3px #3dff7a,inset 0 0 26px rgba(61,255,122,.35),0 0 26px rgba(61,255,122,.55)}
.svov[data-act="B"] .svchart.r,.svov[data-act="*"] .svchart.r{box-shadow:inset 0 0 0 3px #b06bff,inset 0 0 26px rgba(176,107,255,.35),0 0 26px rgba(176,107,255,.6)}
/* the singer keeps singing while she walks across her stage (side view): her mouth moves */
.svov:not([data-st="end"]) .svins.walk:not(.svdan) .svsmouth{transform-box:fill-box;transform-origin:20% 30%;animation:svlsing .49s ease-in-out infinite alternate}
/* "not your turn": the same box as the one the arrows come in (same size, same place; the pads keep their space) */
.svui.pumping .svpads{display:grid;visibility:hidden}
.svui.pumping .svfield,body.svplay .svui.pumping .svfield{height:min(52vh,calc(100dvh - 300px))}
.svui.pumping .svwt{top:50%;transform:translateY(-50%);margin-top:0}
/* the phone that asked for the sync: a big Sync button in place of the TAP pad, until the countdown starts */
#calui.mygo .calpad{display:none}
#calui .calgo{display:block;width:70vw;height:70vw;max-width:340px;max-height:340px;margin:2vh auto;border-radius:50%;border:4px solid #fff;background:radial-gradient(circle at 50% 35%,#ff6fc1,#c2126e);color:#fff;font:inherit;font-weight:900;font-size:7vw;box-shadow:0 0 40px rgba(255,63,164,.6);cursor:pointer}
#calui .calgo:disabled{opacity:.7}
/* the party game fortune wheel (the votes were split): slices sized by the votes, a weighted spin */
.whov{position:fixed;inset:0;z-index:58;display:grid;grid-template-columns:minmax(300px,34vw) 1fr;gap:3vw;padding:4vh 4vw;align-items:center;background:radial-gradient(ellipse at 60% 40%,#3a1670,#120724 70%);transition:transform .8s cubic-bezier(.2,.9,.3,1.05),opacity .5s}
.whov.enter{transform:translateX(100vw)}
.whov.leaving{transform:translateX(-100vw);transition:transform .6s ease-in}
.whov h2{margin:0;font-size:clamp(1.6rem,3vw,3rem)}
.whov p{margin:.4vh 0 2.4vh;color:var(--mute);font-weight:700;font-size:clamp(.9rem,1.4vw,1.3rem)}
.whcards{display:flex;flex-direction:column;gap:1.4vh}
.whcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8em;padding:1.1vh 1vw;border-radius:16px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.16);transition:opacity .4s,transform .4s,box-shadow .4s,border-color .4s}
.whcard .ic{font-size:clamp(1.6rem,2.6vw,2.4rem);width:1.5em;height:1.5em;display:grid;place-items:center;border-radius:12px;background:var(--c)}
.whcard b{display:block;font-size:clamp(.95rem,1.4vw,1.3rem)}
.whcard .who{display:flex;flex-wrap:wrap;gap:4px;margin-top:.4vh}
.whcard .who i{width:2.4vw;height:2.4vw;min-width:24px;min-height:24px}
.whcard .who .char{width:100%;height:100%}
.whcard .pct{font-weight:800;font-size:clamp(1rem,1.8vw,1.7rem);color:var(--c);min-width:3.2em;text-align:right}
.whcard.out{opacity:.35;transform:scale(.97)}
.whcard.won{border-color:var(--c);box-shadow:0 0 0 2px var(--c),0 0 30px var(--c)}
.whstage{display:grid;place-items:center}
.whbox{position:relative;width:min(78vh,54vw);aspect-ratio:1}
.whsvg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.whptr{position:absolute;left:50%;top:-3.2%;width:7%;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.whptr.tick{animation:whtk .12s ease-out}
@keyframes whtk{30%{transform:translateX(-50%) rotate(-14deg)}}
.whhub{position:absolute;left:50%;top:50%;width:17%;height:17%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6c8,#ffd60a 45%,#b8860b);box-shadow:0 0 0 6px #1a0f5c,0 0 30px rgba(255,214,10,.6);display:grid;place-items:center;font-size:clamp(1.2rem,3vw,2.6rem);z-index:2}
.whov.spinning .whbulbs circle{animation:whbl .3s steps(2) infinite}
.whov.spinning .whbulbs circle:nth-child(odd){animation-delay:-.15s}
@keyframes whbl{50%{opacity:.25}}
.whban{position:absolute;left:50%;bottom:-1vh;transform:translate(-50%,40%) scale(.6);opacity:0;padding:.5em 1.2em;border-radius:20px;background:rgba(10,4,30,.92);border:3px solid #ffd60a;font-weight:900;font-size:clamp(1.2rem,2.6vw,2.4rem);white-space:nowrap;transition:all .5s cubic-bezier(.3,1.5,.5,1);z-index:4}
.whban.on{opacity:1;transform:translate(-50%,40%) scale(1)}
/* split votes: the slot machine stays (moved up, a little smaller) and the wheel appears below it */
.slotov.withwheel{justify-content:flex-start;padding-top:1vh;gap:1vh}
.slotov.withwheel>*:not(.whov){transform:scale(.62);transform-origin:50% 0;margin-bottom:-14vh;transition:transform .7s cubic-bezier(.2,.9,.3,1.05),margin .7s}
.whov.under{position:absolute;inset:auto 0 0 0;height:56vh;display:block;padding:0;background:none;transition:transform .8s cubic-bezier(.2,.9,.3,1.05),opacity .5s}
.whov.under.enter{transform:translateY(60vh);opacity:0}
.whov.under .whcol{display:none}
.whov.under .whstage{height:100%}
.whov.under .whbox{width:min(50vh,46vw)}
.whov.under .whban{bottom:auto;top:50%;transform:translate(-50%,-50%) scale(.6)}
.whov.under .whban.on{transform:translate(-50%,-50%) scale(1)}
.slotov.withwheel .slbtn,.slotov.withwheel .slsign{display:none}
.slotov.withwheel{padding-top:4vh}
/* ---- the wheel, in detail ---- */
.whbox{position:relative}
.whsvg{position:relative;z-index:1;filter:drop-shadow(0 22px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,210,63,.35))}
.whrays{position:absolute;inset:-22%;z-index:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.16) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);animation:whrays 24s linear infinite}
.whov.spinning .whrays{animation-duration:4s}
.whov.done .whrays{background:repeating-conic-gradient(from 0deg,rgba(255,240,180,.3) 0 6deg,transparent 6deg 18deg)}
@keyframes whrays{to{transform:rotate(360deg)}}
.whbulbs circle{fill:#fff6c8;filter:drop-shadow(0 0 2px #ffd23f)}
.whbulbs .b1{fill:#ff9ad0}
.whbulbs circle{animation:whbulb 1.2s steps(2) infinite}.whbulbs .b1{animation-delay:-.6s}
.whov.spinning .whbulbs circle{animation-duration:.24s}.whov.spinning .whbulbs .b1{animation-delay:-.12s}
.whov.done .whbulbs circle{animation-duration:.5s}
@keyframes whbulb{50%{opacity:.25}}
.whptr{position:absolute;left:50%;top:-6%;width:9%;height:auto;transform:translateX(-50%);z-index:3;transform-origin:50% 25%;filter:drop-shadow(0 5px 6px rgba(0,0,0,.55))}
.whptr.tick{animation:whtk2 .14s ease-out}
@keyframes whtk2{35%{transform:translateX(-50%) rotate(-16deg)}}
.whwin{animation:none}
.whov.done .whwin{animation:whwin .5s ease-in-out 5 alternate}
@keyframes whwin{from{opacity:0}to{opacity:.38}}
.whhub{display:none}
.whconf{position:absolute;left:50%;top:50%;width:0;height:0;z-index:4;pointer-events:none}
.whconf i{position:absolute;width:1.1vh;height:1.6vh;border-radius:2px;animation:whconf 1.6s cubic-bezier(.2,.7,.4,1) var(--d) both}
@keyframes whconf{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(calc(var(--x) * 32vh),calc(var(--y) * 34vh + 26vh)) rotate(var(--r));opacity:0}}
.whban{background:linear-gradient(180deg,rgba(40,14,80,.95),rgba(10,4,30,.95));box-shadow:0 0 0 3px #7a5206,0 0 40px rgba(255,210,63,.6);text-shadow:0 2px 0 rgba(0,0,0,.4)}
/* "the votes are split" first, over the slot machine */
.slsplit{position:absolute;left:50%;top:44%;z-index:5;transform:translate(-50%,-50%) scale(.4);opacity:0;text-align:center;padding:2.2vh 4vw;border-radius:28px;background:linear-gradient(180deg,#3a1670,#1a0838);border:4px solid #ffd23f;box-shadow:0 0 0 6px rgba(122,82,6,.6),0 0 60px rgba(255,210,63,.6);animation:slsplit .55s cubic-bezier(.2,1.5,.4,1) forwards}
.slsplit b{display:block;font-size:clamp(1.8rem,4.4vw,4rem);font-weight:900;color:#fff;text-shadow:0 0 18px #ff4fd8}
.slsplit span{display:block;margin-top:.6vh;font-size:clamp(1.1rem,2.4vw,2.2rem);font-weight:900;color:#ffd23f}
.slsplit.gone{animation:slsplitout .45s ease-in forwards}
@keyframes slsplit{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes slsplitout{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(.6);opacity:0}}
/* ---- the slot machine, in detail: chrome frame, marquee bulbs, rivets, glossy glass ---- */
.slmachine{background:linear-gradient(#ffe27a,#ffcf4a 18%,#e0a41c 55%,#b8780a);box-shadow:0 0 0 4px #fff3b0,0 0 0 9px #7a4a06,0 0 0 12px #3a2202,0 0 70px rgba(255,190,60,.6),inset 0 6px 0 rgba(255,255,255,.55),inset 0 -8px 0 rgba(0,0,0,.25)}
.slmachine::before{content:'';position:absolute;inset:-22px;border-radius:52px;padding:9px;pointer-events:none;background:radial-gradient(circle,#fff6c8 0 3.5px,rgba(255,214,120,.5) 4.5px,transparent 6px) 0 0/24px 24px;-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);animation:slbulbs .5s steps(2) infinite;filter:drop-shadow(0 0 4px #ffd23f)}
@keyframes slbulbs{to{background-position:12px 0}}
.slmachine::after{content:'';position:absolute;inset:10px;border-radius:32px;pointer-events:none;background:radial-gradient(circle at 14px 14px,#fff3b0 0 3px,#7a4a06 4px,transparent 5px),radial-gradient(circle at calc(100% - 14px) 14px,#fff3b0 0 3px,#7a4a06 4px,transparent 5px),radial-gradient(circle at 14px calc(100% - 14px),#fff3b0 0 3px,#7a4a06 4px,transparent 5px),radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#fff3b0 0 3px,#7a4a06 4px,transparent 5px)}
.slrow.main::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.35)),linear-gradient(90deg,rgba(0,0,0,.55),transparent 12%,transparent 88%,rgba(0,0,0,.55));z-index:2}
.slrow.deco{box-shadow:inset 0 0 16px rgba(0,0,0,.7)}
.slotov.withwheel>*:not(.whov){transform:scale(.56);margin-bottom:-16vh}
.whov.under{height:66vh}
.whov.under .whbox{width:min(60vh,52vw)}
/* the wheel: the turning part is its own layer (GPU), the rest sits on top, still */
.whbox .whsvg{position:absolute;inset:0;width:100%;height:100%;filter:none}
.whbase{position:absolute;inset:2%;border-radius:50%;box-shadow:0 22px 40px rgba(0,0,0,.6),0 0 30px rgba(255,210,63,.35)}
.whspinw{position:absolute;inset:0;z-index:1;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.whbox .whfix{z-index:2;pointer-events:none}
.whbox .whptr{z-index:3}
.whbox .whconf,.whbox .whban{z-index:4}
/* the sync buttons on the phone: blue, also their shadow */
#lobbystart.sync:not(:disabled){box-shadow:0 6px 0 #1f4fb8}
#calui .calgo{background:radial-gradient(circle at 50% 35%,#6fd8ff,#2a5fe0);box-shadow:0 0 40px rgba(60,140,255,.6),0 8px 0 #1f3f9a}
/* the bunting (with its country flags) a little higher, and the cabinet just above the wood panelling */
.shopov.boutique .bqbunting{top:10.6vh}
.shopov.boutique .bqcase{top:20.3vh}
.shopov.boutique .bqsale{top:17.8vh}
.shopov.boutique .shoppers{bottom:13.6vh}
/* the arrow box on the phone in your team's colour */
.svui.tA .svfield{background:linear-gradient(#063a1c,#0e5a2e);box-shadow:inset 0 0 0 2px rgba(61,255,122,.55),0 0 18px rgba(61,255,122,.25)}
.svui.tB .svfield{background:linear-gradient(#2a0848,#4a1478);box-shadow:inset 0 0 0 2px rgba(176,107,255,.6),0 0 18px rgba(176,107,255,.25)}
/* the final scores: no screen of their own: the rows are drawn straight onto the LED wall, across its width */
.fsov .fsboard{left:9%;right:9%;top:7%;bottom:44%;height:auto;border-radius:12px;overflow:hidden;align-items:center;padding:0 17%}   /* (clear of the speech bubbles at the sides) */
.fsov .fsboard::after{display:none}
.fsov .fsboard ol{background:none;border:0;box-shadow:none;padding:0;max-height:100%}
.fsov .fsboard li{background:rgba(10,4,30,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);text-shadow:0 0 12px rgba(255,255,255,.55),0 2px 4px rgba(0,0,0,.6)}
.fsov .fsboard li .rk{text-shadow:0 0 14px rgba(255,209,102,.8)}
.fsov .fsboard li.top{background:rgba(255,209,102,.24);box-shadow:inset 0 0 0 2px #ffd166,0 0 26px rgba(255,209,102,.45)}
/* the lobby: the first player who joined is the host (starts the sync and the game) */
.lobbyplayers .chip{position:relative}
.lobbyplayers .chip .leadtag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;padding:.15em .6em;border-radius:999px;background:linear-gradient(#ffe08a,#f5b301);color:#3a2300;font-size:.72rem;font-weight:900;letter-spacing:.02em;box-shadow:0 2px 8px rgba(245,179,1,.45);white-space:nowrap}
/* the Grand Final on the phone: "None of these" is an answer too */
.chnone{width:100%;padding:.75em 1em;border-radius:14px;border:2px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.05);color:var(--ink,#fff);font:inherit;font-weight:800;font-size:1rem;cursor:pointer}
.chnone.on{border-style:solid;border-color:#16a34a;background:rgba(22,163,74,.35)}
/* the scoreboard during the game: press and hold a row to remove that player (quietly) */
#board li{position:relative}
#board li .rmbtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:5;background:#ff4d6a;color:#fff;border:0;border-radius:999px;padding:4px 10px;font-weight:900;font-size:.8rem;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* the monsters' own moves (test mode): the Firewall row, the cracked runway of the High Note, a frozen player */
.chtiles .chfire{background:linear-gradient(0deg,#ff3d00,#ffb300)!important;box-shadow:0 0 18px 4px rgba(255,120,0,.85),inset 0 0 12px rgba(255,255,180,.8)!important;animation:chfire .5s ease-in-out infinite alternate!important}
@keyframes chfire{from{filter:brightness(1)}to{filter:brightness(1.35) saturate(1.3)}}
.chtiles .chcrack:not(.gone):not(.crumble){background-image:linear-gradient(115deg,transparent 46%,rgba(255,255,255,.7) 47%,transparent 49%),linear-gradient(60deg,transparent 60%,rgba(255,255,255,.5) 61%,transparent 63%)!important}
.chtok.frozen{filter:saturate(.25) brightness(1.25) drop-shadow(0 0 10px #8fe9ff) drop-shadow(0 0 4px #c9f6ff)}
.chtok.frozen::before{content:"❄️";position:absolute;left:50%;top:-14px;transform:translateX(-50%);font-size:calc(var(--tok,56px) * .4);z-index:4}

.ehost.aut.walk .ehfront{display:inline}.ehost.aut.walk .ehside{display:none}   /* (in their autumn coats they just glide, front on) */
.lbod .ct::before,.chtok .chbod .ct::before{content:'';position:absolute;left:34%;right:34%;top:-2%;height:14%;border-radius:0 0 50% 50%;border:2px solid rgba(0,0,0,.18);border-top:0}
.lbod .ca,.chtok .chbod .ca{background:linear-gradient(var(--o2,#4a2f85) 0 36%,rgba(0,0,0,.15) 36% 40%,#e8b48c 40%)}
.lbod .cl,.chtok .chbod .cl{border-radius:28% 28% 18% 18%/14% 14% 8% 8%;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 45%,rgba(255,255,255,.08)),var(--ol,#2a1a4a)}
.lbod .cl::after,.chtok .chbod .cl::after{content:'';position:absolute;bottom:-7%;left:-22%;width:150%;height:20%;border-radius:55% 65% 30% 30%;background:#1c1c24;box-shadow:inset 0 2px 0 rgba(255,255,255,.2)}
.lbod .cl:nth-of-type(1)::after,.chtok .chbod .cl:nth-of-type(1)::after{left:-28%}

.xegrp{margin:6px 0 12px}
.xegrp>summary{cursor:pointer;font-weight:800;font-size:1rem;padding:6px 2px;list-style:none;display:flex;align-items:center;gap:8px}
.xegrp>summary::-webkit-details-marker{display:none}
.xegrp>summary::before{content:'▸';display:inline-block;transition:transform .15s;opacity:.7}
.xegrp[open]>summary::before{transform:rotate(90deg)}
.xegrp .xecnt{font-size:.8rem;padding:1px 9px;border-radius:999px;background:rgba(255,255,255,.12)}
.xegrp-you .xecnt{background:#ffd23f;color:#1a1040}
.xegrpl{display:flex;flex-direction:column;gap:10px}
.xereq .xeblk{margin:8px 0 0;padding:8px 10px;border-radius:8px}
.xereq .xelbl{font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.85;margin-bottom:3px}
.xereq .xelbl small{font-weight:600;text-transform:none;letter-spacing:0;opacity:.8}
.xereq .xewho{background:rgba(255,255,255,.05);border-left:3px solid rgba(255,255,255,.35)}
.xereq .xewho .xebody2{margin:0}
.xereq .xenote{margin:8px 0 0;background:rgba(124,92,255,.16);border-left:3px solid #9b86ff}
.xereq.st-needs_ok .xenote,.xereq.st-question .xenote{background:rgba(255,210,63,.12);border-left-color:#ffd23f}
.xereq.st-done .xenote{background:rgba(47,191,113,.12);border-left-color:#2fbf71}
.xereq .xenone{font-size:.85rem;color:var(--mute);border:1px dashed rgba(255,255,255,.2)}
.xereq .xeacts{justify-content:flex-end;margin-top:8px}
.xegrp-closed .xereq,.xegrp-done .xereq{opacity:.85}

/* ---------- the televote reveal on the finale stage: everyone in a row at the front ---------- */
.fnov.tvmode .fnbub.on{opacity:1;transform:none}
.fnov.tvmode .fnbub{max-width:18.5vw;font-size:clamp(.9rem,1.6vw,1.3rem)}
.fnov.tvmode .fnbub.him{left:2vw}.fnov.tvmode .fnbub.her{right:2vw}
.fnov.tvfront .fnwin,.fnov.tvfront .fnback .fnp{opacity:0}
.fnov .fnwin,.fnov .fnback .fnp{transition:opacity .5s}
.fnov .fnconf{transition:opacity 1s}
.fnov.tvfront .fnconf{opacity:0}
.fnov .fnfront{position:absolute;left:50%;bottom:19.5vh;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center;gap:calc(1.5vh * var(--fs,1));z-index:3;transition:opacity .6s}
.fnov .fnfront.gone{opacity:0}
.fnov .fnslot{position:relative;width:calc(17vh * var(--fs,1));height:calc(38vh * var(--fs,1))}
.fnov .fnslot .fnin{position:absolute;left:50%;bottom:0;width:17vh;height:38vh;margin-left:-8.5vh;transform-origin:50% 100%;scale:var(--fs,1);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:translate .5s cubic-bezier(.3,1.5,.5,1),filter .4s}
.fnov .fnslot .fnp.big{margin:0}
.fnov .fnslot .fnname{font-size:clamp(.9rem,2.4vh,1.4rem);padding:.1em .6em;background:rgba(10,4,40,.8);color:#fff;transition:background .3s,color .3s}
.fnov .fnslot.tvon .fnin{translate:0 -2vh;filter:drop-shadow(0 0 2.2vh rgba(255,210,63,.95))}
.fnov .fnslot.tvon .fnname,.fnov .fnslot.champ .fnname{background:linear-gradient(90deg,#ffd23f,#ffb200);color:#2a1700}
.fnov .fnslot.tvon::before{content:'';position:absolute;left:50%;bottom:-2vh;width:26vh;height:7vh;margin-left:-13vh;border-radius:50%;background:radial-gradient(closest-side,rgba(255,230,150,.55),transparent);pointer-events:none}
.fnov .fntv{min-height:5vh;margin-bottom:1.2vh;font-size:clamp(1.6rem,5vh,3.4rem);font-weight:900;color:#ff2e88;text-shadow:0 0 14px rgba(255,255,255,.7),0 3px 0 rgba(0,0,0,.4);opacity:0}
.fnov .fntv.on{opacity:1;animation:fntvpop .6s cubic-bezier(.3,1.8,.5,1) both}
.fnov .fnslot.done:not(.tvon) .fntv{font-size:clamp(1.1rem,3.2vh,2.2rem);transition:font-size .4s}
.fnov .fnslot.back .fntv,.fnov .fnslot.back .fnname,.fnov .fnslot:not(.back) .fntv{transition:opacity .6s}
.fnov .fnslot.back .fntv,.fnov .fnslot.back .fnname{opacity:0}
.fnov .fnboard.tvb .fnrow{grid-template-columns:3em 1fr 5.5em 7em 5.5em}
.fnov .fnboard.tvb .fnrow span:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
.fnov .fnboard.tvb.still .fnrow{animation:none;opacity:1}
.fnov .fnboard.tvb .tvt{color:#ff6fb5;font-weight:900}
.fnov .fnboard.tvb .fnrow.cnt{background:linear-gradient(90deg,#3a22b0,#5a36e0);box-shadow:0 0 0 3px #ffd23f}
.fnov .fnboard.tvb .fnrow.w .tvt{color:#2a1700}
@keyframes fntvpop{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:none}}
.chaseov .tc{color:#fff;font-weight:900}
.chaseov .ovrow.win .tc{color:#221a00}
.chaseov .ovrow.win .pc{color:#221a00}
/* the last televotes decide: live pictures of the contenders on the LED wall (picture in picture, as on TV) */
.fnov .fnboard{transition:opacity .5s}
.fnov.pip .fnboard{opacity:0}
.fnov .fnpip{position:absolute;left:3%;right:3%;top:4%;bottom:30%;display:flex;flex-direction:column;gap:1.2vh;z-index:2;opacity:0;transform:scale(.95);transition:opacity .6s,transform .6s cubic-bezier(.3,1.4,.5,1)}
.fnov .fnpip.on{opacity:1;transform:none}
.fnov .piphd{display:flex;align-items:center;justify-content:center;gap:.6em;font-weight:900;font-size:clamp(.9rem,2.3vh,1.5rem);letter-spacing:.12em;color:#fff}
.fnov .piphd span{letter-spacing:.04em;color:#ffd23f}
.fnov .pipdot{width:1.3vh;height:1.3vh;border-radius:50%;background:#ff2e4a;box-shadow:0 0 1.2vh #ff2e4a;animation:pipdot 1s steps(2) infinite}
.fnov .pipfeeds{flex:1;min-height:0;display:flex;justify-content:center;gap:1.8vw}
.fnov .pipf{flex:0 1 25vw;min-width:0;display:flex;flex-direction:column;border-radius:1.2vh;overflow:hidden;background:#0a0420;border:.35vh solid rgba(255,255,255,.4);box-shadow:0 1vh 3vh rgba(0,0,0,.5);transition:filter .5s,border-color .4s,box-shadow .4s,transform .4s}
.fnov .pipcam{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 50% 25%,#6a48c8,#24105a 60%,#0d0526)}
.fnov .pipcam .char{height:76%;width:auto;max-width:76%;position:relative;z-index:1;box-shadow:0 1vh 2.4vh rgba(0,0,0,.45);animation:pipbob 2.6s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.fnov .piplight{position:absolute;left:50%;top:-30%;width:70%;height:130%;margin-left:-35%;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.28),transparent 70%);pointer-events:none}
.fnov .pipscan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);animation:pipflick 3s linear infinite}
.fnov .pipbar{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.5vh .9vw;background:linear-gradient(90deg,#ff2e88,#7a1bd6);font-weight:900;font-size:clamp(.85rem,2.3vh,1.5rem);transition:background .4s,color .4s}
.fnov .pipbar b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnov .piptot{flex:none;font-variant-numeric:tabular-nums;font-size:clamp(1rem,3vh,1.9rem);background:rgba(0,0,0,.35);padding:0 .5em;border-radius:.8vh}
.fnov .pipf.me{border-color:#ffd23f;box-shadow:0 0 2.4vh rgba(255,210,63,.6)}
.fnov .pipf.ahead{transform:scale(1.03)}
.fnov .pipf.passed{filter:saturate(.45) brightness(.65)}
.fnov .pipf.won{filter:none;border-color:#ffd23f;box-shadow:0 0 5vh rgba(255,210,63,.95);animation:pipwin .55s ease-in-out infinite alternate}
.fnov .pipf.won .pipbar{background:linear-gradient(90deg,#ffd23f,#ffb200);color:#2a1700}
.fnov .pipf.lost{filter:grayscale(.85) brightness(.5);transform:scale(.97)}
@keyframes pipdot{50%{opacity:.2}}
@keyframes pipbob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-.8vh) rotate(1.2deg)}}
@keyframes pipflick{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes pipwin{from{transform:scale(1.02)}to{transform:scale(1.07)}}
.fnov .pipcam .chflag{display:none}
.fnov .pipf{transition:filter .5s,border-color .4s,box-shadow .4s,transform .4s,flex-basis .8s ease,opacity .6s,margin .8s}
.fnov .pipf.out{flex-basis:0;opacity:0;margin:0 -.9vw;border-width:0}
/* the players' bodies, more human: a neck under the head, shoulders that narrow to the waist, arms from the shoulders, and their outfit (jacket and tie, T-shirt or jumper, see bodyOutfit in host.js) */
.lbod::before,.chtok .chbod::before{content:'';position:absolute;left:39%;width:22%;top:0;height:15%;border-radius:0 0 35% 35%;background:linear-gradient(rgba(0,0,0,.22) 0 35%,transparent 35%),#e2a882;z-index:0}
.lbod .ct,.chtok .chbod .ct{top:10%;height:50%;border-radius:30% 30% 10% 10%/24% 24% 8% 8%;clip-path:polygon(0 20%,5% 7%,16% 0,84% 0,95% 7%,100% 20%,91% 100%,9% 100%);background:var(--deco,linear-gradient(transparent,transparent)),linear-gradient(var(--o1,#5a3a9a),var(--o2,#3a2470))}
.lbod .ca,.chtok .chbod .ca{top:15%}
.lbod .ct,.chtok .chbod .ct{height:var(--cth,50%);clip-path:var(--ctclip,polygon(0 20%,5% 7%,16% 0,84% 0,95% 7%,100% 20%,91% 100%,9% 100%))}
/* your whole character at the bottom of your phone in the lobby, with a button to change your outfit */
.fullfig{position:relative;display:inline-block;width:64px;height:140px;vertical-align:bottom}
.fullfig .char{position:absolute;left:50%;top:6px;width:40px;height:40px;margin-left:-20px;z-index:2}
.fullfig .lbod{position:absolute;left:50%;top:46px;width:56px;height:90px;margin-left:-28px;z-index:1}
.myfig{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:6px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(10,6,40,.92) 35%);pointer-events:none}
.myfig>*{pointer-events:auto}
.myfig #changeout{margin-bottom:22px}
body.hasfig main{padding-bottom:170px}
.outpick{position:fixed;inset:0;z-index:90;background:rgba(6,4,24,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.outpick .opbox{background:#1d1350;border-radius:20px;padding:16px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.outpick h3{margin:0 0 12px;text-align:center}
.opgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.opopt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border-radius:14px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:inherit;font:inherit;cursor:pointer}
.opopt.on{border-color:var(--yellow,#ffd400);background:rgba(255,212,0,.12)}
.opopt b{font-size:.9rem}
.fullfig .chflag{display:none}
.lobbyplayers .chip.lobfig .char{width:50px;height:50px;margin:4px auto 14px}   /* (a smaller head, so it sits on the neck like a head) */
.shosts.ollyonly .ehost.her,.shosts.ollyonly .hbub.her{display:none}   /* (Efendi's Vault: only Oliver on the stage, Sofia is missing) */
.shosts.ollyonly .ehost.him{left:40%}
.shosts.ollyonly .hbub.him{left:12%;max-width:30%}
/* Lost in Verona: players seen from behind (walking north) or from the side (walking east or west) */
.jmt .chin{position:relative;transition:transform .28s ease}
.jmt .chback{display:none;position:absolute;inset:0;border-radius:50%;z-index:2;background:radial-gradient(circle at 38% 28%,rgba(255,255,255,.24),transparent 42%),radial-gradient(circle at 50% 24%,rgba(0,0,0,.35) 0 5%,transparent 6%),repeating-linear-gradient(97deg,rgba(0,0,0,.2) 0 1.5px,transparent 1.5px 6px),var(--hair,#3a2a1e);box-shadow:inset 0 -.6vh 1vh rgba(0,0,0,.35)}
.jmt.fb .chback,.jmt.fl .chback,.jmt.fr .chback{display:block}
.jmt.fl .chback{clip-path:inset(0 0 0 64%)}
.jmt.fr .chback{clip-path:inset(0 64% 0 0)}
.jmt.fl .chin{transform:perspective(14vh) rotateY(34deg)}
.jmt.fr .chin{transform:perspective(14vh) rotateY(-34deg)}
.jmt .jmbody{transition:width .28s}
.jmt.fl .jmbody,.jmt.fr .jmbody{width:2.2vh}   /* (from the side: a narrow torso, one arm in front, legs one behind the other) */
.jmt.fl .jmbody i,.jmt.fr .jmbody i{left:50%!important;right:auto!important;margin-left:-.55vh;rotate:0deg}
.jmt.fl .jmbody i:first-child,.jmt.fr .jmbody i:first-child{filter:brightness(.75);z-index:-1}
.jmt.fl .jmlegs i,.jmt.fr .jmlegs i{left:50%!important;right:auto!important;margin-left:-.55vh}
.jmt.fl .jmlegs i:first-child,.jmt.fr .jmlegs i:first-child{filter:brightness(.75)}
.jmt.fb .hflag{z-index:3}
/* The Tower: the old music box Sofia finds on the stage; she winds it up and the camera dives into it */
.mbox{position:absolute;left:50%;bottom:6%;height:46%;aspect-ratio:200/320;translate:-50% 0;z-index:7;opacity:0;scale:.6;transition:opacity .6s,scale .6s cubic-bezier(.3,1.4,.5,1);pointer-events:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.mbox svg{width:100%;height:100%;display:block;overflow:visible}
.mbox.on{opacity:1;scale:1}
.mbox .mbfig{transform-box:fill-box;transform-origin:50% 100%}
.mbox .mbkey{transform-box:fill-box;transform-origin:0 50%}
.mbox.play .mbfig{animation:mbspin 1.1s linear infinite}
.mbox.play .mbkey{animation:mbkey .5s linear infinite}
.mbox.play .mbst{animation:mbst 1.1s linear infinite}
@keyframes mbspin{0%{transform:scaleX(1)}25%{transform:scaleX(.15)}50%{transform:scaleX(-1)}75%{transform:scaleX(-.15)}100%{transform:scaleX(1)}}
@keyframes mbkey{to{transform:rotate(360deg)}}
@keyframes mbst{to{transform:translateX(14px)}}
.mbox.dive{transition:scale 1.1s cubic-bezier(.6,0,.9,.6),translate 1.1s cubic-bezier(.6,0,.9,.6),opacity .5s .7s,filter .8s;scale:9;translate:-50% 120%;opacity:0;filter:brightness(2.2) saturate(1.4)}
/* Juliet's tower: the wall lanterns flicker, a soft warm glow around the tower in the night air */
.jmtower .jlan{animation:jlan 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.jmtower .jlan:nth-of-type(2n){animation-duration:3.3s;animation-delay:-1.1s}
@keyframes jlan{0%,100%{opacity:.85;transform:scale(1)}18%{opacity:1;transform:scale(1.06)}36%{opacity:.7;transform:scale(.96)}52%{opacity:.95}70%{opacity:.78;transform:scale(1.03)}}
.jmov .jmtower svg{filter:drop-shadow(0 0 1.4vh rgba(255,180,110,.22)) drop-shadow(.6vh .4vh 1vh rgba(10,6,30,.35))}
/* the tagline behind the title */
.logo .tagline{margin-left:.45em;font-size:.5em;font-weight:800;font-style:italic;letter-spacing:.04em;text-transform:uppercase;color:var(--yellow);white-space:nowrap;vertical-align:.35em;opacity:.95}
.host.ingame>header .logo .tagline{display:none}
/* the admin: who may host */
.xehosts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.xehost{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06);border-left:3px solid rgba(255,255,255,.2)}
.xehost .xehwho{flex:1;min-width:180px}
.xehost .xest{font-size:.85rem;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.xehost.st-waiting{border-left-color:#ffd23f}.xehost.st-waiting .xest{background:#ffd23f;color:#1a1040}
.xehost.st-allowed{border-left-color:#2fbf71}.xehost.st-allowed .xest{background:#2fbf71;color:#fff}
.xehost.st-denied{border-left-color:#ff6b6b;opacity:.75}
.xehost .xehbtns{display:flex;gap:6px;align-items:center}
.xehost .linkbtn{background:none;border:0;padding:4px 6px;color:var(--mute);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}