:root{
  color-scheme: dark;
  --ground:#120E1C; --ground-2:#1B1529; --surface:#241C36; --line:#3A2F52;
  --text:#F6F0FA; --muted:#A99DBE; --glow:#F3D98C; --gold:#D4AF4A; --gold-dark:#8C6B1F; --cream:#F6E7C8;
  --vinyl:#8E0A1F; --vinyl-dark:#4A0410;
  --red:#EF3E5C; --blue:#3A86FF; --good:#4ADE80; --bad:#FB7185;
  --royal:"Cinzel", Georgia, "Times New Roman", serif;
  --script:var(--royal);   /* was the handwritten font; Roxain Royal uses Cinzel for names and headings */
  --body:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--ground); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.45;
  background-image:radial-gradient(800px 480px at 50% -12%, rgba(142,10,31,.30), transparent 65%),
    radial-gradient(600px 400px at 100% 110%, rgba(155,93,229,.14), transparent 60%);
  background-attachment:fixed}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--glow); outline-offset:2px}
.wrap{max-width:1320px; margin:0 auto; padding-inline:16px; padding-block:14px 48px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
h2{font-size:clamp(24px,3.2vw,34px); margin:0; line-height:1.12; text-wrap:balance; font-weight:800}
.lede{color:var(--muted); margin:0; max-width:60ch}

.btn{border:0; border-radius:14px; padding:14px 26px; font-weight:800; font-size:18px; background:var(--glow); color:#1b1206;
  box-shadow:0 6px 0 #B8923A; transition:transform .08s, box-shadow .08s}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #B8923A}
.btn[disabled]{opacity:.35; cursor:not-allowed; transform:none}
.btn.sm{padding:9px 14px; font-size:14px; border-radius:10px; box-shadow:0 4px 0 #B8923A}
.btn.red{background:var(--vinyl); color:#fff; box-shadow:0 6px 0 var(--vinyl-dark)}
.ghost{background:transparent; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:14px; color:var(--muted)}
.ghost:hover{color:var(--text); border-color:var(--muted)}
.chip{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted)}

/* vinyl */
.vwrap{position:relative; aspect-ratio:1; container-type:inline-size; max-width:100%}
.vinyl{position:absolute; inset:0; border-radius:50%;
  background:
    repeating-radial-gradient(circle, rgba(0,0,0,.20) 0 1px, transparent 1.5px 4px),
    radial-gradient(circle, #A3122A 0%, var(--vinyl) 55%, #6E0616 100%);
  box-shadow:0 0 0 2px #3E030C, 0 18px 50px rgba(0,0,0,.55)}
.vinyl::before{content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 20deg, transparent 0 25deg, rgba(255,255,255,.26) 40deg, transparent 60deg 200deg, rgba(255,255,255,.16) 220deg, transparent 240deg)}
.label{position:absolute; inset:32%; border-radius:50%; background:radial-gradient(circle, var(--cream) 0 70%, #E9D3A8 100%);
  display:grid; place-items:center; box-shadow:inset 0 0 0 2px rgba(110,6,22,.25)}
.label span{position:absolute; top:24%; left:50%; transform:translateX(-50%); font-family:var(--script); color:var(--vinyl); font-size:6.2cqw; line-height:1; white-space:nowrap}
.label::after{content:""; position:absolute; width:9%; aspect-ratio:1; border-radius:50%; background:var(--ground); top:50%; left:50%; transform:translate(-50%,-50%)}
.label::before{content:"33⅓"; position:absolute; bottom:22%; font-family:var(--mono); font-size:2.4cqw; color:#8E0A1F; letter-spacing:.1em}
.spin-slow{animation:spin 7s linear infinite}
.spin-play{animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* landing */
.landing{display:grid; justify-items:center; gap:10px; padding-block:12px 20px; text-align:center}
.arc{width:min(560px,94vw); max-width:100%; height:auto; overflow:visible; margin-bottom:-4%}
.arc text{font-family:var(--script); font-size:92px; fill:url(#logoGrad); filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.landing .vwrap{width:min(360px,76vw)}
.landing .tag{color:var(--muted); font-size:17px; margin:8px 0 6px}

/* top bar */
.top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-block:4px 18px}
.minilogo{font-family:var(--script); font-size:34px; line-height:1; color:var(--vinyl); margin:0; text-shadow:0 2px 0 rgba(0,0,0,.4)}
.top .meta{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* lobby */
.lobby{display:grid; gap:24px}
.joinbar{display:flex; gap:24px; align-items:center; flex-wrap:wrap; background:var(--ground-2); border:1px solid var(--line); border-radius:22px; padding:20px}
.qr{width:170px; max-width:100%; background:#fff; border-radius:14px; padding:6px; flex:none}
.qr svg{display:block; width:100%; height:auto}
.roomcode{font-family:var(--mono); font-weight:700; font-size:clamp(40px,6vw,64px); letter-spacing:.12em; line-height:1}
.joininfo{display:grid; gap:8px; flex:1 1 260px}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; flex-wrap:wrap}
.seg button{background:transparent; border:0; padding:8px 12px; font-size:14px; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); font-weight:700}
.teamcols{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:700px){.teamcols{grid-template-columns:1fr}}
.tcol{border-radius:20px; padding:18px; display:grid; gap:12px; align-content:start; background:var(--ground-2); border:2px solid var(--tone); min-height:260px; grid-template-columns:minmax(0,1fr)}
.tcol h3{margin:0; font-size:24px; display:flex; justify-content:space-between; align-items:baseline; color:var(--tone)}
.tcol h3 small{font-family:var(--mono); font-size:14px; color:var(--muted)}
.plist{display:flex; flex-wrap:wrap; gap:8px; min-height:44px; align-content:flex-start}
.pname{background:var(--tone); color:#fff; font-weight:700; padding:8px 14px; border-radius:999px; animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.plist .empty{color:var(--muted); font-size:14px; align-self:center}
@keyframes pop{from{transform:scale(.3); opacity:0}}
.startrow{display:grid; justify-items:center; gap:8px; text-align:center}
.note{font-size:14px; color:var(--muted); margin:0; max-width:70ch}

/* game */
.game{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,1.15fr) minmax(0,1fr); gap:28px; align-items:start}
@media (max-width:1000px){.game{grid-template-columns:1fr 1fr}.mid{grid-column:1/-1; order:-1}}
@media (max-width:620px){.game{grid-template-columns:1fr}}
.side{display:grid; gap:18px; align-content:start}
/* Solo game on the TV: use the whole screen, centre the name tiles vertically, size them by the number of players. */
.wrap.wide{max-width:none; padding-inline:clamp(16px,3vw,56px)}
.game.solo{min-height:calc(100vh - 120px); align-items:stretch; gap:clamp(28px,3vw,52px)}
.game.solo .mid{align-content:center}
.game.solo .side{align-content:center}
.game.solo .wheel-wrap{width:min(480px,44vh,82vw)}
.game.solo .stagebox{max-width:560px}
.game.solo .ptile{border-width:3px}
.game.few .side{gap:30px}
.game.few .ptile{padding:22px 26px; gap:22px; border-radius:26px}
.game.few .ptile .av{width:88px; height:88px; font-size:48px; box-shadow:0 0 0 4px var(--tone)}
.game.few .ptile .pn{font-size:36px}
.game.few .ptile .status{font-size:22px; min-height:30px}
.game.few .ptile .dots{gap:8px}.game.few .ptile .dots i{width:16px; height:16px}
.game.some .side{gap:26px}
.game.some .ptile{padding:18px 22px; gap:18px; border-radius:24px}
.game.some .ptile .av{width:72px; height:72px; font-size:40px; box-shadow:0 0 0 4px var(--tone)}
.game.some .ptile .pn{font-size:30px}
.game.some .ptile .status{font-size:19px; min-height:26px}
.game.some .ptile .dots{gap:7px}.game.some .ptile .dots i{width:14px; height:14px}
.game.full .side{gap:22px}
.game.full .ptile{padding:12px 18px; gap:14px; border-radius:20px}
.game.full .ptile .av{width:58px; height:58px; font-size:31px; box-shadow:0 0 0 3px var(--tone)}
.game.full .ptile .pn{font-size:24px}
.game.full .ptile .status{font-size:17px; min-height:22px}
.game.full .ptile .dots i{width:12px; height:12px}
@media (max-width:1000px){.game.solo{min-height:0}}
.tcard{background:var(--ground-2); border:2px solid var(--line); border-radius:20px; padding:14px; display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
.tcard.hot{border-color:var(--glow); box-shadow:0 0 0 5px rgba(255,231,163,.12)}
.tcard header{display:grid; gap:2px}
.tcard .tn{font-weight:800; font-size:20px; color:var(--tone)}
.tcard .mem{color:var(--muted); font-size:13px}
.grid{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
.cell{aspect-ratio:1; border:0; border-radius:8px; position:relative; padding:0; max-width:100%; box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); cursor:default}
.cell.mark::after{content:""; position:absolute; inset:14%; border-radius:50%; background:var(--tone); border:3px solid #fff; box-shadow:0 2px 0 rgba(0,0,0,.4)}
.cell.pick{cursor:pointer; box-shadow:0 0 0 3px var(--glow); animation:pulse 1s ease-in-out infinite}
.cell.dim{opacity:.3}
.cell.win::after{border-color:var(--glow); box-shadow:0 0 0 3px var(--glow)}
@keyframes pulse{50%{transform:scale(.88)}}
.status{font-weight:700; font-size:15px; min-height:22px}
.status.ok{color:var(--good)} .status.no{color:var(--bad)} .status.none{color:var(--muted)} .status.wait{color:var(--glow)}
.status .said{font-family:var(--mono); font-weight:500; color:var(--text); overflow-wrap:anywhere}
.linkish{background:none; border:0; padding:0; color:var(--muted); text-decoration:underline; font-size:13px}

.mid{display:grid; justify-items:center; gap:18px; text-align:center}
.wheel-wrap{position:relative; width:min(360px,82vw); aspect-ratio:1; max-width:100%; container-type:inline-size}
.pointer{position:absolute; left:50%; top:-12px; transform:translateX(-50%); z-index:4; width:0; height:0;
  border-left:15px solid transparent; border-right:15px solid transparent; border-top:26px solid var(--glow); filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
.wheel{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(#9B5DE5 0 72deg, #F28C28 72deg 144deg, #2FBF71 144deg 216deg, #F2C94C 216deg 288deg, #8B5A3C 288deg 360deg);
  box-shadow:0 0 0 6px var(--surface), 0 0 0 8px var(--line), 0 20px 60px rgba(0,0,0,.5);
  transition:transform 3.6s cubic-bezier(.15,.85,.2,1)}
.wheel .fill{position:absolute; inset:0; border-radius:50%; background:var(--cat,transparent); opacity:0; transition:opacity .6s}
.wheel.landed .fill{opacity:1}
.wheel .vwrap{position:absolute; inset:15%}
.stagebox{width:100%; display:grid; gap:14px; justify-items:center}
.prompt{width:100%; border-radius:18px; padding:16px 18px; text-align:left}
.prompt .cn{font-family:var(--script); font-size:clamp(34px,4vw,44px); line-height:1}
.prompt .cq{font-weight:700}
.hostqr{display:flex; gap:14px; align-items:center; text-align:left; background:var(--ground-2); border:1px solid var(--line); border-radius:16px; padding:12px; width:100%}
.hostqr .qr{width:112px}
.count{font-family:var(--mono); font-weight:700; font-size:clamp(64px,10vw,110px); line-height:1; color:var(--glow); font-variant-numeric:tabular-nums}
.timer{display:flex; align-items:center; gap:14px}
.ring{--p:1; width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--glow) calc(var(--p)*360deg), var(--surface) 0)}
.ring span{width:68px; height:68px; border-radius:50%; background:var(--ground); display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:28px; font-variant-numeric:tabular-nums}
.song{width:100%; background:var(--cream); color:#2a0a10; border-radius:18px; padding:16px 18px; text-align:left; display:grid; gap:4px}
.song .st{font-weight:800; font-size:20px; line-height:1.2}
.song dl{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; margin:6px 0 0}
.song dt{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8a5a4a; align-self:center}
.song dd{margin:0; font-weight:600}
.song .hl{background:var(--cat); color:var(--catink); border-radius:6px; padding:0 6px; justify-self:start}

.win{position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:rgba(10,6,18,.8); padding:16px}
.win .bingo{font-family:var(--script); font-size:clamp(64px,12vw,110px); line-height:.9; color:var(--glow)}
#confetti{position:fixed; inset:0; pointer-events:none; z-index:21}
@media (prefers-reduced-motion:reduce){.spin-slow,.spin-play,.cell.pick,.pname{animation:none}.wheel{transition:none}}

.wheel.just .fill{animation:fillin .7s ease-out}
@keyframes fillin{from{opacity:0}}
.pname{display:inline-flex; align-items:center; gap:6px}
.pname .ic{font-size:18px; line-height:1}
.seg + .seg{margin-top:8px}
.settings{display:grid; gap:10px}

/* solo tiles on TV */
.ptile{display:flex; align-items:center; gap:12px; background:var(--ground-2); border:2px solid var(--line); border-radius:18px; padding:12px 14px; transition:opacity .3s, filter .3s, border-color .3s}
.ptile .av{width:52px; height:52px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:28px; background:var(--surface); box-shadow:0 0 0 3px var(--tone)}
.ptile .pi{display:grid; gap:2px; min-width:0; flex:1}
.ptile .pn{font-weight:800; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ptile.locked{filter:grayscale(1); opacity:.55}
.ptile.ok{border-color:var(--good)} .ptile.no{border-color:var(--bad)}
.ptile.hot{border-color:var(--glow)}
.dots{display:flex; gap:4px}
.dots i{width:9px; height:9px; border-radius:50%; background:var(--line)}
.dots i.on{background:var(--glow)}
.members{display:flex; flex-wrap:wrap; gap:6px 10px; color:var(--muted); font-size:14px}
.status .diff{color:var(--muted); font-weight:500}
.status .spd{font-family:var(--mono); font-weight:500; font-size:13px; color:var(--muted)}

.screen{padding:22px 16px 20px; display:grid; gap:14px; align-content:start; min-height:100%}
.screen h3{margin:0; font-size:20px}
.screen .who{display:flex; align-items:center; gap:10px}
.screen .who .av{width:42px; height:42px; font-size:22px; border-radius:50%; display:grid; place-items:center; background:var(--surface); box-shadow:0 0 0 3px var(--tone)}
.screen input{width:100%; min-width:0; background:var(--ground); border:2px solid var(--line); border-radius:12px; padding:12px; font-size:16px}
.screen .fld{display:grid; gap:6px}
.icons{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.icons button{aspect-ratio:1; border-radius:10px; border:2px solid var(--line); background:var(--surface); font-size:20px; padding:0}
.icons button[aria-pressed="true"]{border-color:var(--glow); background:#3a2f52}
.teampick{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.teampick button{border-radius:12px; border:3px solid transparent; padding:12px 8px; font-weight:800; color:#fff}
.teampick button[aria-pressed="true"]{border-color:#fff}
.teampick button[disabled]{opacity:.35}
.err{color:var(--bad); font-weight:700; font-size:14px}
.pprompt{border-radius:14px; padding:12px 14px}
.pprompt .cn{font-family:var(--script); font-size:30px; line-height:1}
.bigt{font-family:var(--mono); font-size:56px; font-weight:700; color:var(--glow); text-align:center; line-height:1}

.win{background:rgba(10,6,18,.55); -webkit-backdrop-filter:blur(10px) saturate(.7); backdrop-filter:blur(10px) saturate(.7); overflow:auto; place-items:start center; padding-block:max(24px,4vh)}
.winbox{display:grid; justify-items:center; gap:16px; width:min(580px,100%); text-align:center}
.win .bingo{font-family:var(--body); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:clamp(60px,12vw,128px); line-height:.9;
  color:var(--glow); text-shadow:0 6px 0 var(--vinyl), 0 0 50px rgba(255,231,163,.35); animation:bingoIn .6s cubic-bezier(.2,1.6,.4,1)}
.bigav{width:clamp(130px,20vw,180px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-size:clamp(70px,11vw,104px); line-height:1;
  background:var(--surface); box-shadow:0 0 0 8px var(--tone), 0 0 70px var(--tone); animation:avIn .7s .15s both cubic-bezier(.2,1.6,.4,1)}
.bigav.team, .sav.team{background:var(--tone); display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:2px}
.bigav.team{font-size:clamp(28px,4vw,38px); padding:16%}
.winner{font-size:clamp(28px,4vw,40px)}
.rank{list-style:none; margin:0; padding:0; width:100%; display:grid; gap:8px}
.rank li{display:flex; align-items:center; gap:12px; background:var(--ground-2); border:1px solid var(--line); border-radius:14px; padding:10px 14px; text-align:left; animation:rowIn .4s both}
.rank li:nth-child(2){animation-delay:.1s}.rank li:nth-child(3){animation-delay:.2s}.rank li:nth-child(n+4){animation-delay:.3s}
.rank li.first{border-color:var(--glow); background:#2d2340}
.rank .pos{font-family:var(--mono); font-weight:700; width:24px; color:var(--muted)}
.rank li.first .pos{color:var(--glow)}
.sav{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:21px; background:var(--surface); box-shadow:0 0 0 2px var(--tone); flex:none; overflow:hidden}
.sav.team{font-size:11px; gap:0}
.rank .nm{font-weight:800; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rank .sc{color:var(--muted); font-size:14px; white-space:nowrap}
.rank li.first .sc{color:var(--glow); font-weight:800}
@media (max-width:480px){.rank .dots{display:none}}
.winbtns{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; padding-top:4px}
@keyframes bingoIn{from{transform:scale(.3); opacity:0}}
@keyframes avIn{from{transform:scale(0) rotate(-20deg)}}
@keyframes rowIn{from{transform:translateY(12px); opacity:0}}
@media (prefers-reduced-motion:reduce){.win .bingo,.bigav,.rank li{animation:none}}
.btn.alt{background:var(--surface); color:var(--text); border:1px solid var(--line); box-shadow:0 6px 0 #0B0812}
.hsong{display:grid; gap:4px; background:var(--cream); color:#2a0a10; border-radius:14px; padding:12px 14px}
.hsong span{font-size:14px}
.hsong .btn{justify-self:start; margin-top:6px; text-decoration:none}
.screen .seg{display:flex}
.screen .seg button{flex:1 1 auto}
.hostjoin{display:flex; gap:18px; align-items:center; text-align:left; background:var(--ground-2); border:1px solid var(--line); border-radius:20px; padding:16px 20px; margin-top:6px; max-width:100%; flex-wrap:wrap; justify-content:center}
.hostjoin .qr{width:124px}
.hj{display:grid; gap:4px}
.hj b{font-size:22px}
.paircode{font-family:var(--mono); font-weight:700; font-size:26px; letter-spacing:.14em; color:var(--glow)}
.hostok{display:flex; align-items:center; gap:10px; font-weight:800; font-size:clamp(24px,3vw,32px); margin-top:14px}
.hostok .crown{font-size:1.2em}
.waiting{font-weight:700; color:var(--glow); background:rgba(255,231,163,.08); border:1px dashed rgba(255,231,163,.35); border-radius:14px; padding:12px 16px}
.hmodes{display:grid; gap:8px}
.hmodes button{text-align:left; background:var(--surface); border:2px solid var(--line); border-radius:14px; padding:12px; display:grid; gap:2px}
.hmodes button span{color:var(--muted); font-size:13px}
.hmodes button[aria-pressed="true"]{border-color:var(--glow)}
.screen .btn[disabled]{opacity:.35}
.plan{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; background:rgba(255,231,163,.08); border:1px solid rgba(255,231,163,.3); border-radius:12px; padding:8px 10px; font-size:13px; color:var(--glow)}
.win.still .bingo,.win.still .bigav,.win.still .rank li{animation:none}


/* Online version additions */
body{margin:0}
body.phonepage{min-height:100%}
.phoneapp{max-width:480px; margin:0 auto; padding-inline:16px; padding-block:14px calc(28px + env(safe-area-inset-bottom,0px))}
.phonelogo{text-align:center; margin:6px 0 4px}
.phoneapp .screen{padding:10px 0 20px}
.phoneapp .btn{width:100%}
.phoneapp .btn.sm{width:auto}
.phoneapp .tcard .grid, .phoneapp .tcard{max-width:100%}
.phoneapp .plist .pname{background:var(--tone,var(--surface))}
.phoneapp .empty{color:var(--muted); font-size:14px}
.phoneapp .hsong a.btn{width:auto}
.phoneapp .cell.pick{box-shadow:0 0 0 3px var(--glow)}

/* Legal links (Impressum, privacy) */
.legalnav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:14px; font-size:13px}
.legalnav a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
.legalnav a:hover,.legalnav a:focus-visible{color:var(--text); border-bottom-color:currentColor}
.phonelegal{margin:0 auto; padding:0 16px calc(18px + env(safe-area-inset-bottom,0px))}

/* End-of-game feedback (phones) */
.fbbox{display:grid; gap:10px; background:var(--ground-2); border:1px solid var(--line); border-radius:16px; padding:14px; margin-top:14px; text-align:left}
.fbbox.done{text-align:center; gap:4px}
.fbbox.done span{color:var(--muted); font-size:14px}
.fbfaces{display:flex; justify-content:space-between; gap:6px}
.fbfaces button{flex:1; font-size:26px; line-height:1; padding:8px 0; background:var(--surface); border:1px solid var(--line); border-radius:12px; filter:grayscale(.6); opacity:.75}
.fbfaces button[aria-pressed="true"]{filter:none; opacity:1; border-color:var(--glow); box-shadow:0 0 0 2px var(--glow) inset}
.fbbox textarea{width:100%; background:var(--ground); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; font-size:15px; resize:vertical}
.fbbox .btn.sm{justify-self:start}

/* Phone: end of the game (banner, final ranking, your card, small rating) */
.ebanner{position:relative; overflow:hidden; border-radius:22px; padding:18px 18px 16px; display:grid; gap:4px; color:#fff;
  background:radial-gradient(260px 160px at 85% 0%, rgba(255,231,163,.35), transparent 70%), linear-gradient(135deg, var(--tone), var(--ground-2) 85%)}
.ebanner .k{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.ebanner .t{font-size:44px; font-weight:900; line-height:1; overflow-wrap:anywhere}
.ebanner.won .t{color:var(--glow); text-shadow:0 0 24px rgba(255,231,163,.5)}
.ebanner .row{display:flex; align-items:center; gap:12px; margin-top:6px}
.ebanner .row span{flex:none; width:58px; height:58px; border-radius:50%; background:var(--ground); display:grid; place-items:center; font-size:32px; box-shadow:0 0 0 3px #fff}
.ebanner .row b{font-size:21px; line-height:1.2}
.econf{position:absolute; inset:0; pointer-events:none}
.econf i{position:absolute; top:-12px; width:9px; height:5px; border-radius:2px; animation:efall 2.6s linear infinite}
@keyframes efall{to{transform:translateY(190px) rotate(540deg)}}
.eboard{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.eboard li{display:flex; align-items:center; gap:10px; background:var(--ground-2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; animation:rowIn .4s both}
.eboard li.me{border:2px solid var(--glow); background:#2d2340}
.eboard .n{font-family:var(--mono); font-weight:700; width:22px; color:var(--muted)}
.eboard .ic{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--surface); box-shadow:0 0 0 2px var(--tone); font-size:20px}
.eboard .nm{flex:1; min-width:0; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.eboard .sc{font-size:13px; color:var(--muted); font-weight:700; min-width:40px; text-align:right}
.eboard .first .sc{color:var(--glow)}
.emini{display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:center; background:var(--ground-2); border:1px solid var(--line); border-radius:16px; padding:10px}
.emini .grid{gap:3px}.emini .cell{border-radius:4px}.emini .cell.mark::after{border-width:2px}
.emini p{margin:0; font-size:14px; color:var(--muted)}
.grid.hl .cell:not(.wl){filter:saturate(.35) brightness(.55)}
.grid.hl .cell.wl{box-shadow:0 0 0 2px var(--glow), 0 0 12px rgba(255,231,163,.7)}
.fbmini{display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--ground-2); border:1px solid var(--line); border-radius:16px; padding:10px 12px}
.fbmini b{font-size:14px; color:var(--muted)}
.fbmini .fbfaces{gap:4px}.fbmini .fbfaces button{flex:none; width:40px; font-size:20px; padding:8px 0}
@media (prefers-reduced-motion:reduce){.econf{display:none}.eboard li{animation:none}}


/* ===================== Roxain Royal ===================== */
h2,h3,.screen h3,.winner,.tcard .tn,.tcol h3{font-family:var(--royal); font-weight:700; letter-spacing:.01em}
.btn{font-family:var(--royal); font-weight:700; letter-spacing:.04em; background:linear-gradient(180deg,#F3D98C,#D4AF4A); color:#1B1206; box-shadow:0 6px 0 var(--gold-dark)}
.btn:active{box-shadow:0 2px 0 var(--gold-dark)}
.btn.sm{box-shadow:0 4px 0 var(--gold-dark)}
.btn.red{background:linear-gradient(180deg,#A3122A,var(--vinyl)); color:#FFF6E6; box-shadow:0 6px 0 var(--vinyl-dark)}
.btn.alt{font-family:var(--royal)}
/* record label: crowned RR */
.label{inset:31%; background:radial-gradient(circle, var(--cream) 0 72%, #E9D3A8 100%); box-shadow:none}
.label::before,.label::after{content:none}
.label .rrlabel{position:absolute; inset:0; width:100%; height:100%; display:block}
/* arched gold name */
.arc text{font-family:var(--royal); font-weight:600; font-size:70px; letter-spacing:7px; fill:url(#rrGold); filter:none}
.landing .arc{width:min(600px,92vw); margin-bottom:0}
.landing .vwrap{width:min(290px,44vw); margin-top:calc(min(600px,92vw) * -.1)}
.slogan{display:flex; align-items:center; gap:14px; margin-top:18px}
.slogan i{width:56px; height:1px; background:#B8862B}
.slogan span{font-family:var(--royal); font-weight:500; font-size:18px; letter-spacing:.5em; padding-left:.5em; color:var(--glow); text-transform:uppercase}
.landing .tag{margin-top:6px}
/* small top logo: mini record + ROXAIN ROYAL */
.minilogo{display:inline-flex; align-items:center; gap:10px; font-family:var(--royal); font-weight:600; font-size:20px; letter-spacing:.2em; text-transform:uppercase; color:var(--glow); text-shadow:none}
.minilogo .mrec{width:30px; height:30px; flex:none; border-radius:50%; background:radial-gradient(circle, var(--cream) 0 22%, #6E0616 23% 25%, var(--vinyl) 26%); box-shadow:0 0 0 1px #3E030C}
.phonelogo{justify-content:center; width:100%; font-size:16px; padding-top:10px}
.phonelogo .mrec{width:24px; height:24px}
/* category name, BINGO, big numbers */
.prompt .cn,.pprompt .cn{font-family:var(--royal); font-weight:700; letter-spacing:.02em}
.win .bingo{font-family:var(--royal); font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(180deg,#FFF1C1,#E4BE63 45%,#B8862B 55%,#F3D98C); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
  filter:drop-shadow(0 6px 0 rgba(74,4,16,.9)) drop-shadow(0 0 40px rgba(243,217,140,.35))}
.rank li.first{background:#2A1F33}
.eboard li.me{background:#2A1F33}
.ebanner.won .t{font-family:var(--royal); letter-spacing:.04em}
.ebanner .t{font-family:var(--royal); font-weight:900}

/* A1 record wheel: a black record with a thin colour ring, your RR record in the middle */
.wheel{background:conic-gradient(#0B0812 0 1.2deg, #9B5DE5 1.2deg 70.8deg, #0B0812 70.8deg 73.2deg, #F28C28 73.2deg 142.8deg, #0B0812 142.8deg 145.2deg,
    #2FBF71 145.2deg 214.8deg, #0B0812 214.8deg 217.2deg, #F2C94C 217.2deg 286.8deg, #0B0812 286.8deg 289.2deg, #8B5A3C 289.2deg 358.8deg, #0B0812 358.8deg);
  box-shadow:0 0 0 2px #5A5268, 0 0 80px rgba(142,10,31,.30), 0 24px 50px rgba(0,0,0,.55)}
.wheel .fill{display:none}
.wheel .rec{position:absolute; inset:7%; border-radius:50%;
  background:conic-gradient(from 25deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.14) 28deg, rgba(255,255,255,0) 58deg, rgba(255,255,255,0) 180deg, rgba(255,255,255,.10) 208deg, rgba(255,255,255,0) 238deg),
    repeating-radial-gradient(circle, #17141D 0 1.5px, #0B0A0F 1.5px 3.5px), #0E0C12;
  box-shadow:0 0 0 2px #0B0812}
.wheel .vwrap{inset:32%}
.wheel .vinyl{box-shadow:0 0 0 1px #3E030C, 0 6px 16px rgba(0,0,0,.5)}
.pointer{border-top-color:var(--cream)}
/* after landing: the chosen colour lifts, the others fade, one pulse, a soft glow */
.wlanded{position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0}
.wheel-wrap.landed .wlanded{opacity:1}
.wlanded svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.wlanded .dim{fill:#0B0812; opacity:.62}
.wlanded .hi{fill:var(--cat); transform-origin:50% 50%; transform-box:view-box; transform:scale(1.03)}
.wlanded .burst{fill:none; stroke:var(--cat); stroke-width:1.2; opacity:0; transform-origin:50% 50%; transform-box:view-box}
.wlanded .halo{position:absolute; inset:-9%; border-radius:50%; background:radial-gradient(circle, transparent 55%, color-mix(in srgb, var(--cat) 30%, transparent) 70%, transparent 80%)}
.wheel-wrap.just .wlanded .hi{animation:wHi .7s ease-out}
.wheel-wrap.just .wlanded .burst{animation:wBurst 1s ease-out}
.wheel-wrap.just .wlanded .dim{animation:wDim .6s ease both}
.wheel-wrap.just .pointer{animation:wTick .35s ease-out}
@keyframes wHi{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1.03)}}
@keyframes wBurst{0%{opacity:.9; transform:scale(.95)}100%{opacity:0; transform:scale(1.35)}}
@keyframes wDim{from{opacity:0}}
@keyframes wTick{0%{transform:translateX(-50%)}40%{transform:translate(-50%,-10px)}100%{transform:translateX(-50%)}}
.stagebox .prompt{animation:none}
.wheel-wrap.just ~ .stagebox .prompt{animation:wChip .6s cubic-bezier(.2,.8,.2,1)}
@keyframes wChip{from{opacity:0; transform:translateX(-30px) scale(.95)}}
@media (prefers-reduced-motion:reduce){.wheel-wrap.just .wlanded *, .wheel-wrap.just .pointer, .wheel-wrap.just ~ .stagebox .prompt{animation:none}}

/* TV: keep the room info clear of the Show on TV / Fullscreen buttons */
body.tv .top .meta{margin-right:250px}
:fullscreen body.tv .top .meta{margin-right:0}
@media (max-width:700px){body.tv .top .meta{margin-right:0}}
/* bigger landing on a big TV */
.landing .arc{width:min(680px,92vw,62vh)}
.landing .vwrap{width:min(330px,44vw,30vh); margin-top:calc(min(680px,92vw,62vh) * -.1)}
.landing .tag{font-size:clamp(17px,1.4vw,22px)}
.landing .need{font-size:clamp(14px,1.1vw,17px)}
.slogan i{flex:none}
.slogan span{white-space:nowrap}
@media (max-width:420px){.slogan span{font-size:15px; letter-spacing:.4em}}

/* ----- Roxain Royal bingo squares: the category name on a dark square, a colour line matching the wheel, a gold ✕ ----- */
.grid{container-type:inline-size}
.cell{display:grid; place-items:center; overflow:hidden; background:linear-gradient(180deg,#2A2140,#1C1630);
  border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 -5px 0 var(--cat)}
.cell .cl{grid-area:1/1; font-family:var(--royal); font-weight:700; text-transform:uppercase; letter-spacing:.04em; line-height:1;
  font-size:clamp(8px, 2.9cqw, 15px); color:#F5F0FA; margin-bottom:3px}
.cell.pick, .phoneapp .cell.pick{box-shadow:inset 0 -5px 0 var(--cat), 0 0 0 3px var(--glow)}
.cell.mark{background:linear-gradient(180deg,#3A2C10,#21180A)}
.cell.mark::after{content:none}
.cell.mark .cl{opacity:0}
.cell .xm{grid-area:1/1; width:78%; height:78%; margin-bottom:3px; overflow:visible}
.cell .xm path{fill:none; stroke-linecap:round}
.cell .xo{stroke:#4A3508; stroke-width:9}
.cell .xi{stroke:#F3D98C; stroke-width:5.5}
.cell.win{box-shadow:inset 0 -5px 0 var(--cat), 0 0 0 3px var(--glow)}
.emini .cell .cl{display:none}
.emini .cell{box-shadow:inset 0 -3px 0 var(--cat)}
.grid.hl .cell.wl{box-shadow:inset 0 -3px 0 var(--cat), 0 0 0 2px var(--glow), 0 0 12px rgba(255,231,163,.7)}