*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
/* Arcade night ground, paper ID cards, one yellow signal + one blue glow. */
:root{
--bg:#0E1030;--surface:#14173A;--sunk:#1E2250;--ink:#ECEEFF;--muted:#9CA0CC;--line:#2A2F66;
--accent:#5B7CFF;--accent-ink:#0E1030;--marker:#FFD23F;--marker-ink:#1B1A2E;
--good:#4FD18B;--bad:#FF4F5E;--them:#262B5E;--paper:#F3EFE4;--paper-ink:#1B1A2E;--paper-muted:#5A576E;
--f-display:"Unbounded","Arial Black",system-ui,sans-serif;
--f-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
--f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
--r:16px;
}
html,body{min-height:100%}
body{margin:0;background-color:var(--bg);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.45;
padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:1200px;margin:0 auto}
body.inroom .wrap{max-width:580px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.1;letter-spacing:-.02em}
h2{font-size:1.3rem;font-weight:800}
h3{font-size:.95rem;font-weight:600}
p{margin:0}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-size:.9em}
.label{font-size:.82rem;font-weight:700;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:16px 12px;margin-bottom:8px}
.top-in{display:flex;align-items:center;gap:10px}
.logo{font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.dots{display:inline-flex;gap:4px;background:var(--marker);padding:7px 9px;border-radius:12px 12px 12px 4px;box-shadow:0 0 18px rgba(255,210,63,.45)}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--marker-ink);animation:blink 1.1s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.chip{font-family:var(--f-mono);font-size:.8rem;padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);white-space:nowrap;color:var(--ink)}
.timer{font-variant-numeric:tabular-nums;font-weight:800;margin-left:auto;font-size:1.05rem;color:var(--marker)}
.timer.low{color:var(--bad)}
.peoplebtn{cursor:pointer;font-family:var(--f-body);font-weight:600;margin-left:auto}
@media (max-width:520px){body.inroom .logo .lt{display:none}}
.timer:not([hidden])+.peoplebtn{margin-left:0}
.tbar{height:3px;background:var(--line);border-radius:3px;margin-top:12px;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--marker);box-shadow:0 0 10px var(--marker);width:0;transition:width .25s linear}
/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.notice{border-radius:12px;padding:12px 14px;background:var(--sunk);font-size:.95rem}
.notice.warn{border:1px solid var(--marker)}
/* controls */
input[type=text]{width:100%;font:inherit;color:var(--ink);background:var(--sunk);border:1.5px solid transparent;border-radius:12px;padding:12px 13px;outline:none}
input[type=text]:focus{border-color:var(--accent)}
input::placeholder{color:#6F74A8}
.field{display:flex;flex-direction:column;gap:6px}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:13px 18px;font-weight:700;color:var(--ink);background:var(--sunk)}
button:focus-visible,.pick:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button.primary{background:var(--marker);color:var(--marker-ink);box-shadow:0 0 0 3px rgba(255,210,63,.16),0 8px 30px rgba(255,210,63,.28)}
button.ghost{background:transparent;border:1.5px solid var(--line)}
button.small{padding:8px 12px;font-size:.88rem;border-radius:10px}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
button.danger{background:var(--bad);color:#fff}
button.kick{padding:8px 11px;font-size:.82rem;white-space:nowrap}
button.kick[aria-pressed=true]{background:var(--bad);color:#fff}
.seg{display:flex;gap:4px;background:var(--sunk);padding:4px;border-radius:12px;flex-wrap:wrap}
.seg button{padding:8px 10px;font-size:.88rem;background:transparent;border-radius:9px;flex:1}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
/* people */
.av{border-radius:50%;object-fit:cover;flex:none;background:var(--sunk);display:block}
.plist{display:flex;flex-direction:column;gap:2px}
.prow{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.tag{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.tag.host{background:var(--marker);color:var(--marker-ink)}
.bigcode{font-family:var(--f-mono);font-size:2.4rem;letter-spacing:.3em;font-weight:500;color:var(--marker);text-shadow:0 0 18px rgba(255,210,63,.4)}
.status{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.dot.on{background:var(--good)}.dot.off{background:var(--bad)}
.status.warn{color:var(--bad)}
/* paper ID card: the disguise */
.idcard{display:flex;gap:16px;align-items:center;background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:18px;position:relative;transform:rotate(-1deg);box-shadow:0 18px 40px rgba(0,0,0,.45);margin-top:8px}
.idcard::before{content:"";position:absolute;top:-11px;left:40px;width:84px;height:22px;background:rgba(255,210,63,.82);transform:rotate(-4deg)}
.idcard .label{color:var(--paper-muted)}
.idcard .photo{flex:none}
.idcard .photo .av{border-radius:4px}
.idcard .h{font-family:var(--f-mono);font-size:1.15rem;font-weight:500;word-break:break-all}
.idcard .src{font-size:.82rem;color:var(--paper-muted);margin-top:4px}
/* pickers */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.pick{background:var(--sunk);border:2px solid transparent;border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;font-weight:700;font-size:.78rem;color:var(--ink)}
.pick[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,124,255,.25)}
.pick .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick.locked{border-color:var(--marker);box-shadow:0 0 0 3px var(--marker)}
.pick:disabled{opacity:.35}
.hchips{display:flex;flex-wrap:wrap;gap:6px}
.hchips button{font-family:var(--f-mono);font-weight:500;font-size:.88rem;padding:8px 11px;border:2px solid transparent}
.hchips button[aria-pressed=true]{border-color:var(--accent);background:var(--surface)}
.guessgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}
.guessgrid .pick{padding:14px 6px;font-size:.92rem}
/* chat */
.chathead{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.chathead .av{box-shadow:0 0 0 3px var(--marker)}
.msgs{height:min(52vh,460px);overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:12px 4px}
.msg{max-width:80%;padding:9px 13px;border-radius:18px;word-wrap:break-word;white-space:pre-wrap;font-size:.98rem;line-height:1.35}
.msg.them{background:var(--them);align-self:flex-start;border-bottom-left-radius:6px}
.msg.me{background:var(--accent);color:var(--accent-ink);font-weight:600;align-self:flex-end;border-bottom-right-radius:6px}
.typing{display:flex;align-items:center;gap:8px;min-height:20px;font-size:.88rem;color:var(--muted);margin-top:-6px}
.tdots{display:inline-flex;gap:3px}.tdots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite}.tdots i:nth-child(2){animation-delay:.2s}.tdots i:nth-child(3){animation-delay:.4s}
.empty{margin:auto;text-align:center;color:var(--muted);font-size:.92rem;max-width:30ch}
.composer{display:flex;gap:8px}
.composer input{flex:1;min-width:0;border-radius:999px;padding-inline:18px}
.composer button{border-radius:999px}
/* results */
.arrow{font-family:var(--f-mono);color:var(--muted)}
.ledger{display:flex;flex-direction:column}
.lrow{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem;flex-wrap:wrap}
.lrow:last-child{border-bottom:0}
.ok{color:var(--good);font-weight:700}.no{color:var(--bad);font-weight:700}
.score{font-family:var(--f-display);font-weight:800;margin-left:auto;white-space:nowrap}
.delta{color:var(--good);font-size:.8rem;margin-left:8px;font-family:var(--f-body)}
.rank{font-weight:800;width:1.6em;color:var(--muted)}
.stage{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;text-align:center}
.stage-head{width:100%}
.sound{padding:6px 11px;font-size:.8rem}
.reel{position:relative;overflow:hidden;margin-inline:-18px;background:var(--bg);border-block:1px solid var(--line);padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.strip{display:flex;gap:8px;will-change:transform}
.tile{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;background:var(--sunk);border:2px solid var(--line);font-weight:700;font-size:.82rem;transition:transform .3s,border-color .3s}
.tile span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile.win{border-color:var(--marker);transform:scale(1.1);box-shadow:0 0 0 4px rgba(255,210,63,.3),0 0 30px rgba(255,210,63,.4)}
.marker{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--marker);box-shadow:0 0 12px var(--marker);z-index:2}
.marker::before,.marker::after{content:"";position:absolute;left:50%;margin-left:-8px;border:8px solid transparent}
.marker::before{top:0;border-top-color:var(--marker)}
.marker::after{bottom:0;border-bottom-color:var(--marker)}
.reel.bump .marker{animation:bump .12s}
@keyframes bump{50%{transform:scaleX(2)}}
.result{min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}
.boom{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,11vw,3.4rem);line-height:1;letter-spacing:.02em;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.stage.good .boom,.stage.bad .boom{border:4px solid currentColor;border-radius:10px;padding:6px 16px 8px;transform:rotate(-6deg)}
.sub{font-weight:600;font-size:1.05rem}
.stage.good{border-color:var(--good);box-shadow:inset 0 0 0 2px var(--good),0 0 40px -6px var(--good)}
.stage.good .boom{color:var(--good)}
.stage.bad{border-color:var(--bad);box-shadow:inset 0 0 60px -10px var(--bad);animation:shake .5s}
.stage.bad .boom{color:var(--bad)}
@keyframes pop{0%{transform:rotate(-6deg) scale(1.8);opacity:0}100%{transform:rotate(-6deg) scale(1);opacity:1}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
details summary{cursor:pointer;list-style:none;font-weight:700}
details summary::after{content:" +"}
details[open] summary::after{content:" −"}
details[open] .ledger{margin-top:10px}
/* players sheet */
.sheet{position:fixed;inset:0;z-index:30;background:rgba(6,7,24,.7);display:flex;align-items:flex-end;justify-content:center;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px))}
.sheet-card{width:100%;max-width:580px;max-height:85vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px 20px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;animation:rise .2s ease-out}
@keyframes rise{from{transform:translateY(30px);opacity:0}}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--marker);color:var(--marker-ink);padding:11px 18px;border-radius:12px;font-size:.92rem;font-weight:700;max-width:calc(100% - 32px);z-index:40;box-shadow:0 8px 30px rgba(0,0,0,.5)}
/* home */
.home{display:flex;flex-direction:column;gap:64px;padding-top:12px}
.hero2{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-l{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:28px}
.hero-l h1{font-weight:800;font-size:clamp(44px,6vw,76px);line-height:1.02;letter-spacing:-.03em}
.hl{display:inline-block;background:var(--marker);color:var(--marker-ink);padding:0 14px 4px;border-radius:12px;transform:rotate(-2deg);box-shadow:0 0 40px rgba(255,210,63,.5)}
.lead{font-size:1.15rem;line-height:1.55;color:#B7B9DE;max-width:46ch}
.pcard{position:relative;background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:26px 24px 22px;transform:rotate(-1deg);box-shadow:0 22px 50px rgba(0,0,0,.5);max-width:520px;display:flex;flex-direction:column;gap:16px}
.pcard::before{content:"";position:absolute;top:-13px;left:44px;width:96px;height:26px;background:rgba(255,210,63,.82);transform:rotate(-4deg)}
.pcard::after{content:"";position:absolute;top:-10px;right:36px;width:70px;height:24px;background:rgba(91,124,255,.55);transform:rotate(5deg)}
.pc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--paper-ink);padding-bottom:10px}
.pc-head b{font-family:var(--f-display);font-size:1.05rem}
.pc-head span{font-size:.82rem;color:var(--paper-muted)}
.pc-body{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.pc-photo{width:112px;height:132px;flex:none;border:2px dashed #8F8CA6;background:#E8E3D4;border-radius:4px;color:var(--paper-muted);font-weight:600;font-size:.82rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;position:relative}
.pc-photo img{width:100%;height:100%;object-fit:cover;border-radius:0}
.pc-photo:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.pc-fields{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:14px}
.uline{display:flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:600;color:var(--paper-muted)}
.uline input[type=text]{background:transparent;border:0;border-bottom:2px solid #C9C2AE;border-radius:0;padding:6px 0;color:var(--paper-ink);font-weight:600;font-size:1.2rem}
.uline input[type=text]:focus{border-bottom-color:var(--accent)}
.uline input.mono{font-family:var(--f-mono);font-weight:500;font-size:1.1rem}
.uline input::placeholder{color:#A39E8C}
.playbox{display:flex;flex-direction:column;gap:14px;max-width:520px}
.slots{display:flex;gap:8px}
.slot{width:52px!important;height:60px;text-align:center;font-family:var(--f-mono)!important;font-size:1.6rem!important;color:var(--marker)!important;background:var(--surface)!important;border:0!important;border-bottom:3px solid var(--marker)!important;border-radius:10px 10px 4px 4px!important;padding:0!important;text-transform:uppercase}
.slot::placeholder{color:#3D4280}
.joinbtn{height:60px;border:2px solid var(--accent)!important;background:transparent!important}
.create{height:64px;font-family:var(--f-display);font-weight:800;font-size:1.15rem;border-radius:14px}
.fine{font-size:.9rem;color:#8F93C4}
.hero-r{flex:1 1 380px;min-width:0;display:flex;justify-content:center;position:relative;padding:24px 0}
.glow{position:absolute;width:420px;height:420px;max-width:100%;border-radius:50%;background:radial-gradient(closest-side,rgba(91,124,255,.45),rgba(91,124,255,0));top:50%;left:50%;transform:translate(-50%,-50%)}
.phone{position:relative;width:360px;max-width:100%;height:640px;border-radius:46px;border:10px solid #060718;background:#14173A;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line);display:flex;flex-direction:column;overflow:hidden}
.ph-top{display:flex;justify-content:space-between;padding:16px 20px 8px;font-size:.82rem;color:#8F93C4}
.ph-top b{color:var(--marker)}
.ph-head{position:relative;display:flex;align-items:center;gap:12px;padding:10px 18px 14px;border-bottom:1px solid var(--line)}
.ph-av{width:46px;height:46px;border-radius:50%;background:#FF8A5B;color:var(--paper-ink);display:flex;align-items:center;justify-content:center;font:800 18px var(--f-display);flex:none;box-shadow:0 0 0 3px var(--marker)}
.ph-head small{display:block;font-size:.75rem;color:#8F93C4}
.stamp{position:absolute;right:12px;top:8px;transform:rotate(-9deg);border:3px solid var(--bad);color:var(--bad);background:rgba(14,16,48,.92);border-radius:6px;padding:6px 10px;font:800 .8rem/1.2 var(--f-display);text-align:center;opacity:0}
.phone.unmasked .stamp{opacity:1;animation:slam .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes slam{0%{transform:rotate(-9deg) scale(1.9);opacity:0}100%{transform:rotate(-9deg) scale(1);opacity:1}}
.ph-msgs{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 14px;overflow:hidden}
.bub{align-self:flex-start;max-width:80%;background:var(--them);padding:9px 13px;border-radius:18px 18px 18px 6px;font-size:.94rem;line-height:1.35}
.bub.mine{align-self:flex-end;background:var(--accent);color:var(--accent-ink);font-weight:600;border-radius:18px 18px 6px 18px}
.ph-input{display:flex;gap:8px;padding:12px 14px 18px;border-top:1px solid var(--line)}
.ph-input div{flex:1;height:44px;border-radius:22px;background:var(--sunk);color:#6F74A8;display:flex;align-items:center;padding:0 16px;font-size:.88rem}
.how{display:flex;flex-direction:column;gap:24px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.tilex{background:var(--sunk);border:2px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.tilex i{font:800 .9rem var(--f-display);font-style:normal;color:var(--muted)}
.tilex b{font-size:1.15rem}
.tilex span{font-size:.95rem;line-height:1.45;color:#B7B9DE}
.tilex.hot{border-color:var(--marker);box-shadow:0 0 0 4px rgba(255,210,63,.15),0 0 30px rgba(255,210,63,.25)}
.tilex.hot i{color:var(--marker)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#6F74A8;font-size:.9rem;border-top:1px solid var(--line);padding-top:20px}
@media (prefers-reduced-motion:reduce){.dots i,.tdots i{animation:none;opacity:.8}.tbar i{transition:none}.boom,.stage.bad,.sheet-card,.phone.unmasked .stamp{animation:none}.reel.bump .marker{animation:none}}

/* ---- added after the original look: aliases so the Settings sheet and record use the original palette ---- */
:root{--raised:var(--sunk);--control:var(--line);--rule:var(--line);--text:var(--ink);--faint:var(--muted);--data:var(--marker);--on-data:var(--marker-ink);--fs-small:.85rem;--fs-section:1rem}
/* your record + title ladder (js/ux.js) */
.record{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--rule)}
.record .rt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.record .rt b{font-size:18px;font-weight:600}
.record .rt span{font-size:var(--fs-small);color:var(--muted)}
.bar{height:6px;border-radius:6px;background:var(--raised);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--data)}
.stats{display:flex;gap:22px;font-size:var(--fs-small);color:var(--faint)}
.stats b{display:block;font-size:18px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.titlepop{display:flex;flex-direction:column;gap:6px}
.titlepop .record{border-top:0;padding-top:0}
.pcard .record{border-top-color:rgba(27,26,46,.15)}.pcard .record .rt span,.pcard .stats{color:var(--paper-muted)}.pcard .stats b{color:var(--paper-ink)}.pcard .bar{background:rgba(27,26,46,.12)}
/* settings (js/settings.js): gear in the top bar */
.setbtn{margin-left:auto;padding:6px 9px;color:var(--text);display:inline-flex;align-items:center;justify-content:center;line-height:0}
.setbtn svg{display:block}
.setbtn+.peoplebtn,.timer:not([hidden])~.setbtn{margin-left:0}
.timer:not([hidden])+.setbtn{margin-left:0}
.setsheet .sheet-card{gap:18px}
.setsec{display:flex;flex-direction:column;gap:10px}
.setsec h3{font-size:var(--fs-section)}
.setnote{font-size:var(--fs-small)}
.setseg{border-radius:14px}
.setseg button{border-radius:11px;min-height:40px}
.setrow{display:flex;align-items:center;gap:12px;min-height:44px}
.setrow label,.setrow>span{display:flex;flex-direction:column}
.setrow small{font-size:12px}
.setrow input[type=range]{width:46%;accent-color:var(--data)}
.switch{appearance:none;-webkit-appearance:none;width:46px;height:28px;border-radius:999px;background:var(--control);position:relative;cursor:pointer;flex:none;transition:background-color .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--text);transition:transform .15s}
.switch:checked{background:var(--data)}
.switch:checked::after{transform:translateX(18px);background:var(--on-data)}
.switch:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.packs{display:flex;flex-direction:column;background:var(--raised);border-radius:16px;padding:2px 12px}
.packopt{display:flex;align-items:center;gap:10px;padding:10px 0}
.packopt+.packopt{border-top:1px solid var(--rule)}
.packopt label{display:flex;align-items:center;gap:10px;cursor:pointer}
.packopt label span{display:flex;flex-direction:column}
.packopt small{font-size:12px}
.packopt input{accent-color:var(--data);width:18px;height:18px;flex:none}
.setlinks{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-small);color:var(--muted)}
.linkbtn{background:none!important;min-height:0;padding:0;font:inherit;color:var(--text);text-decoration:underline;text-underline-offset:3px}
.demosheet{z-index:31}
.filterhint{text-align:center}
/* ---- themes (Settings): Classic = the original look above; Black and Lock screen swap the palette ---- */
:root[data-skin=black]{--bg:#000;--surface:#111;--sunk:#2a2a2a;--ink:#fff;--muted:#b4b4b4;--line:#222;--accent:#fff;--accent-ink:#000;--them:#2a2a2a;
--paper:#111;--paper-ink:#fff;--paper-muted:#b4b4b4;--f-display:"Inter",system-ui,sans-serif;--f-body:"Inter",system-ui,sans-serif;--f-mono:"Inter",system-ui,sans-serif}
:root[data-skin=black] body{background-image:none}
:root[data-skin=black] button.primary{background:#fff;color:#000;box-shadow:none}
:root[data-skin=black] .pcard{transform:none;box-shadow:none;border-radius:20px}
:root[data-skin=black] .pcard::before,:root[data-skin=black] .pcard::after{display:none}
:root[data-skin=lock]{--wp:#2A0F57;--wp-img:radial-gradient(120% 70% at 85% 0%,#FF6FA3 0%,rgba(255,111,163,0) 55%),radial-gradient(110% 80% at 0% 100%,#FF9B57 0%,rgba(255,155,87,0) 50%),radial-gradient(90% 60% at 10% 25%,#7B3BFF 0%,rgba(123,59,255,0) 70%),linear-gradient(170deg,#3B127A 0%,#2A0F57 60%,#4A1060 100%);
--bg:#2A0F57;--surface:rgba(255,255,255,.14);--sunk:rgba(10,4,30,.28);--ink:#fff;--muted:rgba(255,255,255,.76);--line:rgba(255,255,255,.18);
--accent:#fff;--accent-ink:#1B1530;--them:rgba(255,255,255,.9);--good:#3DDC84;--bad:#FF4D5E;
--paper:rgba(255,255,255,.16);--paper-ink:#fff;--paper-muted:rgba(255,255,255,.74);--r:22px;
--f-display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;--blur:saturate(170%) blur(26px)}
:root[data-skin=lock] body[data-phase=disguise]{--wp:#141B66;--wp-img:radial-gradient(110% 70% at 100% 0%,#4F7CFF 0%,rgba(79,124,255,0) 55%),radial-gradient(100% 70% at 0% 100%,#A23BFF 0%,rgba(162,59,255,0) 55%),linear-gradient(170deg,#1C2482 0%,#141B66 55%,#2A1470 100%)}
:root[data-skin=lock] body[data-phase=chat]{--wp:#052E34;--wp-img:radial-gradient(110% 60% at 100% 0%,#13A89E 0%,rgba(19,168,158,0) 55%),radial-gradient(90% 60% at 0% 100%,#2563EB 0%,rgba(37,99,235,0) 55%),linear-gradient(175deg,#0A3F47 0%,#052E34 60%,#0B2547 100%)}
:root[data-skin=lock] body[data-phase=meet]{--wp:#4A0E2B;--wp-img:radial-gradient(110% 70% at 100% 0%,#FF7A59 0%,rgba(255,122,89,0) 55%),radial-gradient(100% 70% at 0% 100%,#D63384 0%,rgba(214,51,132,0) 55%),linear-gradient(170deg,#5E1236 0%,#4A0E2B 60%,#3A0D3F 100%)}
:root[data-skin=lock] body[data-phase=guess]{--wp:#5A2200;--wp-img:radial-gradient(110% 70% at 100% 0%,#FFB627 0%,rgba(255,182,39,0) 55%),radial-gradient(100% 70% at 0% 100%,#FF5E3A 0%,rgba(255,94,58,0) 55%),linear-gradient(170deg,#7A3000 0%,#5A2200 60%,#4A1408 100%)}
:root[data-skin=lock] body[data-phase=reveal]{--wp:#07060C;--wp-img:radial-gradient(80% 50% at 50% 30%,#1F1B33 0%,rgba(31,27,51,0) 70%),linear-gradient(#07060C,#07060C)}
:root[data-skin=lock] body[data-phase=reveal]:has(.stage.good){--wp:#04281A;--wp-img:radial-gradient(100% 60% at 50% 20%,#1FA463 0%,rgba(31,164,99,0) 60%),linear-gradient(175deg,#0A3B27,#04281A)}
:root[data-skin=lock] body[data-phase=reveal]:has(.stage.bad){--wp:#2E0710;--wp-img:radial-gradient(100% 60% at 50% 20%,#D7263D 0%,rgba(215,38,61,0) 60%),linear-gradient(175deg,#45101C,#2E0710)}
:root[data-skin=lock] body[data-phase=over]{--wp:#2A0F57;--wp-img:radial-gradient(100% 60% at 50% 0%,#FFC94A 0%,rgba(255,201,74,0) 55%),radial-gradient(110% 80% at 0% 100%,#FF6FA3 0%,rgba(255,111,163,0) 50%),linear-gradient(170deg,#4A1C8C 0%,#2A0F57 70%)}
:root[data-skin=lock] body{background:transparent}
:root[data-skin=lock] body::after{content:"";position:fixed;inset:0;z-index:-1;background:var(--wp-img);background-color:var(--wp);transition:background-color .6s}
:root[data-skin=lock] .top{background:transparent;isolation:isolate}
:root[data-skin=lock] .top::after{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
:root[data-skin=lock] .card,:root[data-skin=lock] .chip,:root[data-skin=lock] .notice,:root[data-skin=lock] .pcard{-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
:root[data-skin=lock] .pcard{transform:none;border-radius:22px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18)}
:root[data-skin=lock] .pcard::before,:root[data-skin=lock] .pcard::after{display:none}
:root[data-skin=lock] .msg.them,:root[data-skin=lock] .bub:not(.mine){color:#16122A}
:root[data-skin=lock] .msg.me{background:#FFD23F;color:#1B1A2E}
:root[data-skin=lock] .sheet-card{background:#2A0F57}
/* reveal selector per theme (Classic keeps the original needle) */
/* Black: Face ID scanner selector */
:root[data-skin=black] .tile{border:0;border-radius:20px;background:var(--raised)}
:root[data-skin=black] .tile.win{background:#fff;color:#000;transform:scale(1.12);box-shadow:none}
:root[data-skin=black] .marker{top:6px;bottom:6px;width:112px;margin-left:-56px;background:linear-gradient(#fff,#fff) 0 0/22px 3px no-repeat,linear-gradient(#fff,#fff) 0 0/3px 22px no-repeat,linear-gradient(#fff,#fff) 100% 0/22px 3px no-repeat,linear-gradient(#fff,#fff) 100% 0/3px 22px no-repeat,linear-gradient(#fff,#fff) 0 100%/22px 3px no-repeat,linear-gradient(#fff,#fff) 0 100%/3px 22px no-repeat,linear-gradient(#fff,#fff) 100% 100%/22px 3px no-repeat,linear-gradient(#fff,#fff) 100% 100%/3px 22px no-repeat;box-shadow:none}
:root[data-skin=black] .marker::before{display:none}
:root[data-skin=black] .marker::after{left:8px;right:8px;margin:0;border:0;height:2px;top:0;bottom:auto;background:linear-gradient(90deg,transparent,#4FD18B,transparent);animation:scan 1.1s ease-in-out infinite alternate}
@keyframes scan{to{top:calc(100% - 2px)}}
:root[data-skin=black] .stage.good .marker::after,:root[data-skin=black] .stage.bad .marker::after{display:none}
:root[data-skin=black] .reel.bump .marker{animation:fidbump .12s}
@keyframes fidbump{50%{transform:scale(1.04)}}
/* Lock screen: spotlight + padlock that clicks open on the answer */
:root[data-skin=lock] .reel{padding:34px 0 14px;background:transparent}
:root[data-skin=lock] .tile{border:0;border-radius:22px;background:rgba(255,255,255,.14)}
:root[data-skin=lock] .tile.win{background:#fff;color:#1B1530;transform:scale(1.03);box-shadow:none}
:root[data-skin=lock] .marker{top:28px;bottom:8px;width:108px;margin-left:-54px;background:transparent;border:2px solid rgba(255,255,255,.9);border-radius:26px;box-shadow:0 0 0 999px rgba(10,4,30,.5);transition:border-color .3s,box-shadow .3s}
:root[data-skin=lock] .marker::before{top:-22px;left:50%;margin-left:-8px;width:16px;height:14px;border:3px solid #fff;border-bottom:0;border-radius:9px 9px 0 0;transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
:root[data-skin=lock] .marker::after{top:-11px;bottom:auto;left:50%;margin-left:-11px;width:22px;height:15px;border:0;border-radius:5px;background:#fff}
:root[data-skin=lock] .stage.good .marker,:root[data-skin=lock] .stage.bad .marker{border-color:#FFD23F}
:root[data-skin=lock] .stage.good .marker::before,:root[data-skin=lock] .stage.bad .marker::before{transform:translate(7px,-6px) rotate(18deg);border-color:#FFD23F}
:root[data-skin=lock] .stage.good .marker::after,:root[data-skin=lock] .stage.bad .marker::after{background:#FFD23F}
:root[data-skin=lock] .reel.bump .marker{animation:lockbump .12s}
@keyframes lockbump{50%{transform:scale(1.04)}}
:root[data-skin=lock] .stage.good .boom,:root[data-skin=lock] .stage.bad .boom{border:0;transform:none;padding:0;animation:lockpop .5s cubic-bezier(.16,1,.3,1)}
@keyframes lockpop{0%{transform:scale(1.6);opacity:0;filter:blur(8px)}100%{transform:none;opacity:1;filter:none}}
.calm *,.calm *::before,.calm *::after{animation:none!important;transition:none!important}
.calm .confetti{display:none}
:root[data-skin=lock] .bub .tdots i{background:#16122A}
/* settings tabs */
.settabs{display:flex;gap:4px;background:var(--sunk);padding:4px;border-radius:14px}
.settabs button{flex:1;padding:10px 8px;border-radius:11px;background:transparent;color:var(--muted);font-weight:700}
.settabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}
.setpane{display:flex;flex-direction:column;gap:18px;min-height:240px}
.gtag{background:var(--sunk);padding:10px 12px;border-radius:10px;user-select:all;word-break:break-all}
.setsheet .sheet-card{height:min(85vh,640px)}