/* Fibberish: one centred column sized for a phone held by the Narrator. Same dark "party night" look as Nearo, Sidestep and Goldbomb. */
:root{--d:Bungee,Impact,sans-serif;--b:Outfit,system-ui,sans-serif;--bg:#150d2e;--ink:#fff7e8;--mut:#b9a9e6;--paper:#fff7e8;--deep:#241447;--c0:#ff4d6d;--c1:#ffd93d;--c2:#2ee6a6;--c3:#4cc9f0;--c4:#9b6bff;--c5:#ff9f43;--c6:#ff6bd5;--c7:#b8f35a;--ok:#2ee6a6;--no:#ff3b5c;--gold:#ffc52f;color-scheme:dark}
html{scrollbar-gutter:stable}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:600 16px/1.35 var(--b);min-height:100vh;overflow-x:hidden;padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}
#bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(60vmax 50vmax at 8% -10%,#5b2bd6aa,transparent),radial-gradient(50vmax 40vmax at 100% 0,#4cc9f04d,transparent),radial-gradient(60vmax 40vmax at 50% 120%,#ff9f4338,transparent),var(--bg)}
#bg::after{content:"";position:absolute;inset:0;background:radial-gradient(#ffffff14 1px,transparent 1px) 0 0/24px 24px}
#fx{position:fixed;inset:0;z-index:70;pointer-events:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--c1);outline-offset:2px}
.wrap{max-width:640px;margin:0 auto;padding-block:20px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.center{text-align:center}

/* logo on a cream badge, googly eyes */
.badge{position:relative;aspect-ratio:1;margin:0 auto}
.badge .blob{position:absolute;inset:6%;border-radius:46% 54% 50% 50%/52% 46% 54% 48%;background:var(--paper);box-shadow:6px 7px 0 var(--c5),12px 14px 0 #0005;animation:wobble 9s ease-in-out infinite}
.badge .logo{position:absolute;inset:12%;width:76%;height:76%;animation:bob 5s ease-in-out infinite;overflow:visible}
.badge.lg{width:min(170px,42vw)}.badge.md{width:110px}.badge.sm{width:38px;margin:0}.badge.sm .blob{box-shadow:2px 3px 0 var(--c5)}.badge.sm .logo{animation:none}
.eye{transform-box:fill-box;transform-origin:center}.eye .pupil{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.eye.blink{animation:blink .18s ease-in-out}
@keyframes blink{50%{transform:scaleY(.08)}}
@keyframes bob{50%{transform:translateY(-4%) rotate(2deg)}}
@keyframes wobble{50%{border-radius:54% 46% 48% 52%/46% 54% 46% 54%;transform:rotate(-3deg)}}

/* hero */
.hero{text-align:center;margin-bottom:22px}
h1{font:400 clamp(44px,14vw,92px)/.95 var(--d);text-shadow:3px 3px 0 var(--c5),6px 6px 0 var(--c4),9px 9px 0 #0006;transform:rotate(-2deg);text-wrap:balance;margin-top:14px;overflow-wrap:anywhere}
h1 span{color:var(--c3)}
#app.pop h1{animation:drop .8s cubic-bezier(.2,1.5,.4,1)}
@keyframes drop{from{transform:translateY(-60px) rotate(-8deg);opacity:0}}
.hero .tag{font:400 17px var(--d);color:var(--c2);margin-top:18px}
.hero p{color:var(--mut);margin-top:12px;font-size:17px;max-width:30em;margin-inline:auto}

/* panels and cards */
.panel,.card{background:#ffffff0f;border:2px solid #ffffff1c;border-radius:24px;padding:18px;margin-bottom:16px;backdrop-filter:blur(8px)}
.card{padding:20px 16px}
h2{font:400 18px var(--d);margin-bottom:12px;display:flex;align-items:center;gap:8px}h2 em{font-style:normal;color:var(--c1)}
h2.q{display:block;font:800 21px/1.25 var(--b);margin:4px 0 8px}
.kick{color:var(--mut);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}.kick b{color:var(--ink);text-transform:none;letter-spacing:0;font-size:16px}
.hint{color:var(--mut);font-size:14px;margin:-2px 0 12px}
.hint.center{margin:4px 0 12px}
.err{background:#ff3b5c22;border:2px solid #ff3b5c66;color:#ffd6dd;border-radius:14px;padding:10px 14px;margin-top:12px}
.hlp{color:var(--c1)}
.hero .by{font:400 12px var(--d);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:22px}
.plaque{display:inline-block;background:var(--paper);border-radius:18px;padding:8px 18px;margin-top:8px;box-shadow:0 5px 0 #0006;transition:transform .2s}.plaque:active{transform:rotate(-2deg) scale(1.03)}.plaque img{display:block;height:44px;width:auto}
.note{text-align:center;margin:14px 0}
.lnk{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:4px;padding:6px}

/* option pills */
.lab{font-weight:800;font-size:15px;margin:4px 0 8px}
.pill{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pill button{flex:1 1 0;min-width:44px;min-height:44px;padding:8px 10px;border-radius:12px;background:#0004;color:var(--ink);border:2px solid #ffffff22;font:700 15px var(--b);transition:background .15s,transform .1s}
.pill button:active{transform:scale(.96)}
.pill button.on{background:var(--c1);color:var(--deep);border-color:var(--c1)}

/* players */
.plist{list-style:none;padding:0;display:grid;gap:8px;margin-bottom:12px}
.plist li{display:flex;align-items:center;gap:10px;background:#0003;border-radius:14px;padding:6px 6px 6px 8px;border-left:6px solid var(--tc)}
.plist b{flex:1;font-weight:800;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:28px;height:28px;border-radius:50%;background:var(--tc);color:#1a1033;display:grid;place-items:center;font:400 13px var(--d);flex:none}
.ico{width:40px;height:40px;border-radius:12px;background:#ffffff14;font-size:20px;font-weight:800}.ico:disabled{opacity:.25;cursor:default}
.add,.pform{display:flex;gap:8px}
.pform{flex-direction:column;gap:14px;margin-top:8px}
input{width:100%;min-width:0;padding:14px 16px;border-radius:14px;border:2px solid #ffffff2a;background:#0005;color:var(--ink);font:700 18px var(--b)}
.pform input{font-size:22px;padding:16px 18px}
input::placeholder{color:#b9a9e699}
.addb{padding:0 20px;border-radius:14px;background:var(--c1);color:var(--deep);font:400 17px var(--d);box-shadow:0 5px 0 #c9a514}
.addb:active{transform:translateY(3px);box-shadow:0 2px 0 #c9a514}

/* big buttons */
.big{display:block;width:100%;padding:18px;border-radius:20px;background:var(--c2);color:#10261e;font:400 22px var(--d);box-shadow:0 7px 0 #14966d;transition:.1s;margin-bottom:8px}
.big:active{transform:translateY(5px);box-shadow:0 2px 0 #14966d}
.big:disabled{background:#555;box-shadow:0 7px 0 #333;color:#999;cursor:not-allowed;transform:none}
.big.alt{background:var(--c1);color:var(--deep);box-shadow:0 7px 0 #a88a00}
.big.alt:active{box-shadow:0 2px 0 #a88a00}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ghost{padding:12px;border-radius:14px;background:#ffffff12;border:2px solid #ffffff2a;font-weight:800;font-size:15px;box-shadow:0 4px 0 #0005}
.ghost:disabled{opacity:.4;cursor:default}
.warn{background:var(--no)!important;color:#fff!important;border-color:var(--no)!important}
.dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* top bar during play */
.top{display:flex;align-items:center;justify-content:space-between;max-width:640px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-left,0px)) 0}
.mini{display:flex;align-items:center;gap:10px;font:400 15px var(--d)}
.tbtn{display:flex;gap:6px}.tbtn button{width:44px;height:44px;border-radius:14px;background:#ffffff12;font-size:20px}
.tbtn .endb{width:auto;padding:0 12px;font:800 14px var(--b);border:2px solid #ffffff2a}

/* hand-over screen */
.hand{text-align:center;padding:28px 18px;margin-top:20px}
.hand p{color:var(--mut);margin:10px auto 22px;max-width:26em}
.hand .kick{margin:16px 0 0}
.who{font-size:clamp(36px,12vw,64px);text-shadow:3px 3px 0 var(--tc),6px 6px 0 #0006;margin-top:8px}
.think{text-align:center;margin-top:18px;color:var(--mut)}.think .badge{animation:spin 1.6s cubic-bezier(.5,0,.5,1) infinite}.think p{margin-top:10px}
@keyframes spin{50%{transform:rotate(12deg) scale(1.06)}}

/* guessing header */
.gtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.gname{display:inline-block;font:400 clamp(30px,10vw,48px)/1 var(--d);text-shadow:2px 2px 0 var(--tc),4px 4px 0 #0006;margin:4px 0 6px;overflow-wrap:anywhere;transform-origin:left center}
/* a new guesser: the name bursts in, wobbles, then glows in their colour so the Narrator can't miss who to ask */
.gname.enter{animation:callout 1.1s cubic-bezier(.2,1.6,.4,1) both,glow 1.2s ease-in-out 1.1s 2}
@keyframes callout{0%{transform:scale(.2) rotate(-12deg);opacity:0}35%{transform:scale(1.35) rotate(4deg);opacity:1}55%{transform:scale(.92) rotate(-3deg)}75%{transform:scale(1.08) rotate(2deg)}100%{transform:none}}
/* the first guesser waits for the screen to settle, then gets an extra glow */
.gname.enter.first{animation:callout 1.1s cubic-bezier(.2,1.6,.4,1) .45s both,glow 1.2s ease-in-out 1.55s 3}
@keyframes glow{50%{filter:drop-shadow(0 0 14px var(--tc));transform:scale(1.06)}}
.next{flex:none;text-align:center;background:var(--c1);color:var(--deep);border-radius:18px;padding:8px 12px;transform:rotate(3deg);box-shadow:0 5px 0 #a88a00}
.next small{display:block;font:800 11px var(--b);text-transform:uppercase;letter-spacing:.06em}.next b{font:400 30px/1 var(--d)}
.sub{font:400 16px var(--d);margin:6px 0 10px}

/* scores */
.rank{list-style:none;padding:0;display:grid;gap:8px;margin:0 0 16px}
.rank li{display:flex;align-items:center;gap:10px;background:#0003;border-radius:14px;padding:10px 14px;border-left:6px solid var(--tc)}
.rank span{flex:1;font-weight:800;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank b{font:400 22px var(--d)}
.rank em{font-style:normal;font-weight:800;font-size:15px;padding:2px 8px;border-radius:8px}.rank em.up{background:#2ee6a633;color:var(--ok)}.rank em.down{background:#ff3b5c33;color:#ff8da0}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:200px;margin:10px 0 20px}
.pod{flex:1;max-width:150px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center}
.pod b{font:400 24px var(--d)}.pod small{font-weight:800;margin-bottom:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb{width:100%;height:var(--h);background:var(--tc);border-radius:16px 16px 6px 6px;display:grid;place-items:start center;padding-top:8px;font-size:28px;box-shadow:0 6px 0 #0005;animation:grow .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes grow{from{height:0}}

/* effects */
.fl{position:fixed;left:50%;top:38%;z-index:60;font:400 clamp(44px,13vw,96px) var(--d);pointer-events:none;-webkit-text-stroke:3px #1a1033;paint-order:stroke fill;animation:fl 1.1s forwards;white-space:nowrap}
.fl.ok{color:var(--ok)}.fl.no{color:var(--no)}.fl.go{color:var(--c1)}.fl.gold{color:var(--gold)}.fl.big{font-size:clamp(56px,17vw,120px)}
@keyframes fl{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{transform:translate(-50%,-60%) scale(1);opacity:1}100%{transform:translate(-50%,-90%) scale(.9);opacity:0}}
#flash{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 40%,var(--fc,#fff) 130%)}#flash.go{animation:fh .5s}@keyframes fh{from{opacity:.85}}
.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-10px) rotate(-1deg)}40%{transform:translateX(9px) rotate(1deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

/* footer and dialogs */
.foot{max-width:640px;margin:20px auto 0;padding-block:22px calc(30px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-top:2px solid #ffffff1c;text-align:center;color:var(--mut);font-size:14px}
body.playing .foot{display:none}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-bottom:14px}
.foot nav button{color:var(--ink);font:800 15px var(--b);text-decoration:underline;text-underline-offset:4px;padding:6px 2px}
.foot p{margin-bottom:6px}.small{font-size:13px;color:var(--mut);max-width:60ch;margin-left:auto;margin-right:auto}
dialog{margin:auto;position:fixed;inset:0;height:fit-content;width:min(640px,calc(100% - 28px));max-height:86vh;max-height:86dvh;padding:0;border:2px solid #ffffff2a;border-radius:24px;background:#1d1240;color:var(--ink);overflow:hidden}
dialog::backdrop{background:#0a0420cc;backdrop-filter:blur(4px)}
.dlgb{padding:22px;max-height:86vh;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;line-height:1.55}
.dlgb h2{font:400 24px var(--d);margin-bottom:6px}.dlgb h3{font:800 17px var(--b);margin:16px 0 4px}.dlgb p,.dlgb li{margin-bottom:8px;color:#e4dcf7}.dlgb .small{margin-left:0}
.dlgb ol{padding-left:22px;margin-bottom:8px}
.dlgb a{color:var(--c1)}
.dlgb .rank{margin-top:10px}
.dclose{margin-top:18px;padding:12px 28px;border-radius:14px;background:var(--c1);color:#241447;font:400 18px var(--d)}
.drow{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}.drow .dclose{margin-top:0}
.dlgb a.dclose{display:inline-block;text-decoration:none;color:#241447}
.dlgb .dred{background:var(--no);color:#fff}
.dlgb .dsec{background:#ffffff1f;color:var(--ink)}.dlgb a.dsec{color:var(--ink)}

/* the prompt card: picture with the prompt over it */
.pcard{position:relative;border-radius:26px;overflow:hidden;background:#241447;aspect-ratio:4/5;max-height:62vh;max-height:62dvh;margin:0 auto 14px;box-shadow:0 8px 0 #0006,0 0 0 3px #ffffff22;transform:rotate(-1deg)}
#app.pop .pcard{animation:deal .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes deal{from{transform:translateY(40px) rotate(-10deg) scale(.8);opacity:0}}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.pcard .cap{position:absolute;inset:auto 0 0;padding:60px 18px 18px;background:linear-gradient(transparent,#0b0620ee 55%)}
.pcard .cat{display:inline-block;font:400 12px var(--d);letter-spacing:.06em;padding:4px 10px;border-radius:10px;background:var(--c3);color:var(--deep);margin-bottom:8px}.pcard .cat.f1{background:var(--c5)}
.pcard .pr{font:800 clamp(22px,6.6vw,30px)/1.15 var(--b);text-wrap:balance;text-shadow:0 2px 8px #000a}
.pcard.sm{aspect-ratio:auto;max-height:none;display:flex;gap:12px;align-items:center;padding:10px;transform:none;box-shadow:none;background:#0003}
.pcard.sm img{position:static;width:56px;height:70px;border-radius:12px;flex:none}.pcard.sm .cap{position:static;padding:0;background:none}.pcard.sm .pr{font-size:18px;text-shadow:none}

/* countdown */
.clock{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.ring{--p:1;position:relative;width:76px;height:76px;flex:none;border-radius:50%;background:conic-gradient(var(--rc,var(--c2)) calc(var(--p)*360deg),#ffffff1a 0);display:grid;place-items:center}
.ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg)}
.ring b{position:relative;font:400 26px var(--d)}
.ring.low{--rc:var(--c0);animation:pulse 1s infinite}@keyframes pulse{50%{transform:scale(1.07)}}
.clock p{color:var(--mut);font-size:15px}.clock p b{display:block;color:var(--ink);font:400 18px var(--d)}
.ring.lg{width:104px;height:104px}.ring.lg b{font-size:36px}.ring.lg::before{inset:10px}

/* secret words */
.secrets{list-style:none;padding:0;display:grid;gap:10px;margin:12px 0 14px}
.secrets li{transform:rotate(var(--r))}#app.pop .secrets li{animation:pop .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:var(--d)}
@keyframes pop{from{transform:scale(.3) rotate(0);opacity:0}}
.sw{position:relative;width:100%;min-height:60px;padding:12px 64px 12px 18px;border-radius:20px;background:var(--paper);color:var(--deep);font:800 22px/1.15 var(--b);box-shadow:0 5px 0 #c9b9a0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;overflow-wrap:anywhere;transition:transform .1s}
.sw:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #c9b9a0}
.sw em{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(6deg);font:400 16px var(--d);font-style:normal;background:var(--c2);color:#10261e;border-radius:12px;padding:6px 9px}
.sw.wild{background:var(--c1);box-shadow:0 5px 0 #b8960f}.sw.wild em{background:var(--c5);color:#fff}
.sw small{font:400 11px var(--d);color:var(--deep);background:var(--tc);border-radius:8px;padding:2px 7px;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw small.none{background:#0002;color:inherit;opacity:.75;font:700 12px var(--b)}
.secrets .sw.got{background:#2ee6a62b;color:var(--ink);box-shadow:0 5px 0 #0005;outline:2px solid #2ee6a666;outline-offset:-2px}
.secrets.guess .sw.got span{text-decoration:line-through;text-decoration-thickness:3px}
.secrets.reveal .sw:not(.got){background:#ffffff1f;color:var(--ink);box-shadow:0 5px 0 #0005;outline:2px dashed #ffffff33;outline-offset:-2px}
.secrets .sw:disabled{cursor:default}

/* challenge */
.chal{display:flex;gap:12px;align-items:flex-start;background:#ff9f4322;border:2px dashed #ff9f4399;border-radius:18px;padding:12px 14px;margin-bottom:14px}
.chal i{font-style:normal;font-size:28px;line-height:1}.chal p{font-weight:700}.chal small{display:block;font:800 12px var(--b);text-transform:uppercase;letter-spacing:.06em;color:var(--c5);margin-bottom:2px}
.pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px}
.pick button{flex:1 1 40%;min-height:46px;padding:8px 12px;border-radius:14px;background:#0004;border:2px solid #ffffff22;font:700 15px var(--b);text-align:center}
.pick button.on{background:var(--c1);color:var(--deep);border-color:var(--c1)}
.pick button .dot{display:inline-grid;width:22px;height:22px;font-size:11px;margin-right:6px;vertical-align:-5px}
.hidebox{display:flex;align-items:center;gap:10px;background:#ffffff0d;border-radius:14px;padding:10px 12px;margin-bottom:10px;color:var(--mut);font-size:14px}.hidebox i{font-style:normal;font-size:22px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.pcard.swap{animation:swapin .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes swapin{0%{transform:rotateY(90deg) scale(.85);opacity:0}100%{transform:none;opacity:1}}
.newp{margin:12px 0 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:400 clamp(18px,6vw,26px)/1.2 var(--d);color:var(--c1);text-shadow:2px 2px 0 #0006;animation:pop .5s cubic-bezier(.2,1.6,.4,1) .2s both}
/* story screen: the picture fills the space between the timer and the button, the words sit on it */
#app.fillv{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#app.fillv>.top{width:100%}
.wrap.fill{flex:1;display:flex;flex-direction:column;width:100%;padding-bottom:10px}
.wrap.fill .clock{margin:0 0 10px}.wrap.fill .ring.lg{width:84px;height:84px}.wrap.fill .ring.lg b{font-size:30px}.wrap.fill .ring.lg::before{inset:9px}
.stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:300px;border-radius:26px;overflow:hidden;background:#241447;margin-bottom:16px;box-shadow:0 8px 0 #0006,0 0 0 3px #ffffff22}
#app.pop .stage{animation:deal .6s cubic-bezier(.2,1.4,.4,1)}
.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.stage .pr{position:relative;padding:14px 18px 40px;background:linear-gradient(#0b0620e6 40%,transparent);font:800 clamp(19px,5.4vw,24px)/1.15 var(--b);text-wrap:balance;text-shadow:0 2px 8px #000a}
.stage .over{position:relative;padding:44px 12px 2px;background:linear-gradient(transparent,#0b0620d9 38%)}
.stage .secrets{display:grid;grid-template-columns:1fr 1fr;margin:0 0 10px;gap:8px}
/* two 2-point words side by side, a little uneven, the gold wild word across the base */
.stage .secrets li:nth-child(1){transform:translateY(5px) rotate(-2.5deg)}
.stage .secrets li:nth-child(2){transform:translateY(-4px) rotate(2deg)}
.stage .secrets li:nth-child(3){grid-column:1/-1;margin:0 3%;transform:rotate(-1deg)}
.stage .secrets li .sw{height:100%}
/* the words drop in from the top of the picture, gold first, and bounce before settling */
#app.pop .stage .secrets li{animation:none}
#app.pop .stage .secrets li .sw{animation:drop-in .95s both;animation-delay:var(--dd)}
.stage .secrets li:nth-child(3) .sw{--dd:.35s}.stage .secrets li:nth-child(1) .sw{--dd:.65s}.stage .secrets li:nth-child(2) .sw{--dd:.8s}
@keyframes drop-in{0%{transform:translateY(-110vh);animation-timing-function:cubic-bezier(.55,0,1,.45)}
42%{transform:translateY(0);animation-timing-function:cubic-bezier(0,.55,.45,1)}
58%{transform:translateY(-26px) rotate(-2deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
72%{transform:translateY(0);animation-timing-function:cubic-bezier(0,.55,.45,1)}
82%{transform:translateY(-9px) rotate(1deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
92%,100%{transform:none}}
@media (prefers-reduced-motion:reduce){#app.pop .stage .secrets li .sw{animation:none}}
.stage .sw{min-height:46px;padding:8px 52px 8px 14px;font-size:19px;box-shadow:0 4px 0 #c9b9a0}.stage .sw em{right:8px;font-size:14px;padding:5px 7px}.stage .sw.wild{box-shadow:0 4px 0 #b8960f}
.stage .chal{background:#2a1508d9;margin-bottom:10px;padding:10px 12px}
.wrap.fill .big{margin-bottom:0}
/* keeps the main button pinned to the bottom of the phone on long screens */
.dock{position:sticky;bottom:0;z-index:5;margin:10px -16px 0;padding:22px 16px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(#150d2e00,#150d2ef2 30%)}.dock .big{margin-bottom:0}
/* category picker: full-width boxes in a row you swipe through, one picked at a time */
.cats{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px 6px;padding:4px 16px 14px;scrollbar-width:none;overscroll-behavior-x:contain}
.cats::-webkit-scrollbar{display:none}
.catbox{position:relative;flex:0 0 86%;max-width:420px;scroll-snap-align:center;border-radius:22px;overflow:hidden;background:#241447;border:3px solid #ffffff26;text-align:left;color:var(--ink);display:flex;flex-direction:column;min-height:300px;box-shadow:0 6px 0 #0006;transition:border-color .2s,transform .2s}
.catbox img{width:100%;height:150px;object-fit:cover;object-position:center 30%;display:block}
.catbox .cb{display:flex;flex-direction:column;gap:6px;padding:12px 16px 16px;flex:1}
.catbox b{font:400 24px/1.1 var(--d)}
.catbox .ct{font:600 16px/1.35 var(--b);color:#e9e1ff}
.catbox i{font:700 15px/1.3 var(--b);color:var(--mut)}
.catbox small{font:800 13px var(--b);color:var(--mut);margin-top:auto}
.catbox .tick{position:absolute;top:10px;right:10px;font:800 13px var(--b);background:#0b0620cc;color:var(--ink);border-radius:999px;padding:6px 11px}
.catbox.on{border-color:var(--c1);transform:translateY(-2px)}
.catbox.on .tick{background:var(--c1);color:var(--deep)}
.lab .swipe{float:right;font:700 13px var(--b);color:var(--mut);text-transform:none;letter-spacing:0}
@media (min-width:700px){.cats{margin:0 0 6px;padding-inline:0}.catbox{flex-basis:calc(50% - 6px)}.lab .swipe{display:none}}