/* Layout: one column studio screen; scoreboard on top, the play area in the middle, the buzzer docked at the bottom. Deliberately one dark look (a TV board).
   Палитра «Лазурит и мята»: графит с лазуритовым отливом, бирюзовые клетки, мятные цифры, шафрановые кнопки, гранатовый минус. */
:root{
  --bg:#0c161c; --panel:#14222b; --panel-2:#19303a; --cell:#173f4a; --cell-hi:#1f5462;
  --gold:#ffb43a; --gold-ink:#2a1a00; --num:#45e3a8; --fg:#eef6f8; --muted:#8fb0ba; --line:#24414b;
  --ok:#45e3a8; --bad:#e2534f; --violet:#b48cff;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--fg);margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{font-family:var(--f-body);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent}
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:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 160px;display:flex;flex-direction:column;gap:20px}
.wrap>div:empty{display:none}
/* every region stacks its children with the same rhythm */
#r-top,#r-stage,#r-main,#r-ctrl{display:flex;flex-direction:column;gap:16px;min-width:0}

#r-ctrl>button,#r-main>button{align-self:stretch}
.row>button:not(.grow){flex:0 0 auto}
#r-ctrl .row>button{flex:1 1 140px}
h1{font-size:clamp(1.6rem,6vw,2.2rem);line-height:1.1}
.card h2+.note,.card h2+p{margin-top:-4px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;text-wrap:balance;letter-spacing:.01em}
h2{font-size:1.05rem}
h3{font-size:.9rem;color:var(--muted);font-weight:500}
p{margin:0}
button{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:12px 16px;font-weight:700;background:var(--gold);color:var(--gold-ink);min-height:46px}
button.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
button.soft{background:var(--panel-2);color:var(--fg)}
button.ok{background:var(--ok);color:#062616}
button.bad{background:var(--bad);color:#2a0606}
button.small{min-height:36px;padding:6px 12px;font-size:.88rem;border-radius:10px}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;width:100%;box-sizing:border-box}
textarea{min-height:90px;resize:vertical}
input[type=checkbox]{width:22px;height:22px;min-height:0;accent-color:var(--gold);flex:none;margin:0}
label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>*{min-width:0}
.grow{flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
@media (max-width:480px){.card{padding:16px}.wrap{gap:16px}#r-top,#r-stage,#r-main,#r-ctrl{gap:12px}}
.note{color:var(--muted);font-size:.88rem}
.eyebrow{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--panel-2);color:var(--muted);vertical-align:middle}
.tag.gold{background:var(--gold);color:var(--gold-ink)}
.tag.violet{background:var(--violet);color:#1b0b3a}
.num{font-variant-numeric:tabular-nums}

/* brand */
.brand{display:flex;flex-direction:column;gap:14px;padding:12px 0 8px}
.logo{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,8.5vw,3.4rem);line-height:1.1;color:var(--fg);letter-spacing:-.01em;display:flex;flex-wrap:wrap;align-items:center;gap:.25em;margin:0}
.logo-za{color:var(--muted);font-weight:500;font-size:.7em}
.logo-cell{display:inline-block;background:var(--cell);color:var(--num);border:2px solid var(--num);border-radius:.28em;padding:.08em .32em .12em;font-variant-numeric:tabular-nums;box-shadow:0 .12em 0 color-mix(in srgb,var(--gold) 35%,transparent)}

/* scoreboard */
.top{display:flex;flex-direction:column;gap:10px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.code{font-family:var(--f-display);font-weight:800;letter-spacing:.18em;color:var(--gold)}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chips.n1{grid-template-columns:minmax(0,1fr)}.chips.n2,.chips.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.chips.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 10px 8px;display:flex;flex-direction:column;gap:2px;text-align:left;color:var(--fg);font-weight:600;min-height:0;position:relative}
.chip .nm{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .sc{font-family:var(--f-display);font-weight:700;font-size:1.25rem;font-variant-numeric:tabular-nums}
.chip .sc.neg{color:var(--bad)}
.chip .st{font-size:.7rem;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase;min-height:1em}
.chip.me{border-color:var(--muted)}
.chip.chooser{border-color:var(--gold)}
.chip.chooser .st{color:var(--gold)}
.chip.answering{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,var(--panel))}
.chip.answering .st{color:var(--ok)}
.chip.empty{opacity:.45;border-style:dashed}
.log{background:var(--panel-2);border-radius:12px;padding:10px 14px;font-weight:600;font-size:.92rem}

/* board */
.board{display:flex;flex-direction:column;gap:6px}
.brow{display:grid;grid-template-columns:minmax(82px,1.35fr) repeat(var(--n),minmax(0,1fr));gap:6px}
.bth{background:var(--panel-2);border-radius:10px;padding:6px 8px;font-size:.78rem;font-weight:700;line-height:1.2;display:flex;align-items:center;min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.bc{background:var(--cell);border-radius:10px;min-height:50px;padding:4px;font-family:var(--f-display);font-weight:700;color:var(--num);font-size:clamp(.78rem,3.2vw,1.05rem);display:flex;align-items:center;justify-content:center;position:relative;font-variant-numeric:tabular-nums}
button.bc{border:0}
button.bc:not(:disabled):hover{background:var(--cell-hi)}
.bc.used{background:transparent;border:1px solid var(--line);color:transparent}
.bc .mk{position:absolute;top:3px;right:4px;font-family:var(--f-body);font-size:.6rem;font-weight:800;color:var(--fg);background:var(--violet);color:#1b0b3a;border-radius:6px;padding:0 4px}
.bc .mk.s{background:var(--gold);color:var(--gold-ink)}
.board.pick button.bc:not(:disabled){box-shadow:0 0 0 1px color-mix(in srgb,var(--num) 35%,transparent) inset}

/* question */
.qcard{background:var(--cell);border-radius:20px;padding:22px 20px;display:flex;flex-direction:column;gap:14px;min-height:150px}
.qcard .qmeta{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.qcard .qtheme{font-weight:700;color:var(--muted);font-size:.9rem;min-width:0}
.qcard .qprice{font-family:var(--f-display);font-weight:800;color:var(--num);font-size:1.3rem;font-variant-numeric:tabular-nums}
.qcard .qtext{font-size:clamp(1.1rem,4.6vw,1.45rem);font-weight:700;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
.qcard .qans{border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent);padding-top:12px;font-weight:700;color:var(--num);overflow-wrap:anywhere}
.qcard .qans .lb{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.qcard.secret{background:linear-gradient(160deg,var(--cell),#3a1f7a)}
.big-msg{font-family:var(--f-display);font-weight:800;font-size:clamp(1.3rem,6vw,2rem);color:var(--gold);line-height:1.15}
.media{display:flex;flex-direction:column;gap:10px}
.media img,.media video{max-width:100%;max-height:48vh;border-radius:12px;display:block;margin:0 auto;background:#000}
.media audio{width:100%}
.ctrl{display:flex;flex-direction:column;gap:10px}
.ctrl .row>button{flex:1 1 140px}
.modbox{border:1px dashed var(--violet);border-radius:14px;padding:12px 14px;color:var(--fg);font-weight:600}
.modbox b{color:var(--violet)}

/* buzzer */
#buzzbar{position:fixed;left:0;right:0;bottom:0;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(to top,var(--bg) 70%,transparent);z-index:5}
.buzz{display:block;width:100%;max-width:728px;margin:0 auto;min-height:96px;border-radius:24px;font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:.04em;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .06s}
.buzz:active{transform:scale(.98)}
.buzz.open{background:var(--gold);color:var(--gold-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 35%,transparent)}
.buzz.wait{background:var(--panel-2);color:var(--muted);font-size:1.05rem}
.buzz.early{background:var(--bad);color:#2a0606;font-size:1.1rem}
.buzz.mine{background:var(--ok);color:#062616;animation:pulse 1s ease-in-out infinite}
.buzz.other,.buzz.off,.buzz.sent{background:var(--panel);color:var(--muted);font-size:1rem;border:1px solid var(--line)}
@keyframes pulse{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--ok) 25%,transparent)}}
@media (prefers-reduced-motion:reduce){.buzz.mine{animation:none}.buzz{transition:none}}

/* lists */
.list{display:flex;flex-direction:column;gap:8px}
.li{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--panel-2);border-radius:12px;padding:10px 12px;flex-wrap:wrap}
.li .t{font-weight:700;min-width:0;overflow-wrap:anywhere}
.li.sel{outline:2px solid var(--gold)}
.li.out{opacity:.4;text-decoration:line-through}
.giant{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,16vw,5rem);letter-spacing:.14em;color:var(--gold);line-height:1;text-align:center;font-variant-numeric:tabular-nums}

/* review */
.round{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.rhead{display:flex;gap:10px;align-items:center;flex-direction:row;color:var(--fg);font-weight:700;font-family:var(--f-display);font-size:.95rem}
.theme{display:flex;gap:10px;align-items:flex-start;background:var(--panel-2);border-radius:12px;padding:10px 12px}
.theme details{flex:1;min-width:0}
.theme summary{cursor:pointer;font-weight:700;display:flex;justify-content:space-between;gap:8px}
.theme summary .cnt{color:var(--muted);font-weight:600;font-size:.85rem;white-space:nowrap}
.qrow{display:grid;grid-template-columns:auto 52px minmax(0,1fr);gap:8px 10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.qrow.off .qt,.qrow.off .pr{opacity:.4}
.qrow .pr{font-family:var(--f-display);color:var(--num);font-weight:700;font-size:.85rem;padding-top:2px}
.qrow .qt{font-size:.9rem;overflow-wrap:anywhere}
.qrow .qt .a{color:var(--muted);margin-top:2px}
.qrow select{grid-column:3;min-height:36px;padding:4px 8px;font-size:.85rem}
.theme.off summary span:first-child{opacity:.4;text-decoration:line-through}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(130px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:700;z-index:20;max-width:min(90vw,520px);text-align:center}
.timer{font-family:var(--f-display);font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.res{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;background:var(--panel-2);border-radius:12px;padding:12px}
.res .who{font-weight:800}
.res .txt{grid-column:1/-1;white-space:pre-wrap;overflow-wrap:anywhere}
.res.okk{outline:2px solid var(--ok)}
.res.badd{outline:2px solid var(--bad)}
.podium .li:first-child{outline:2px solid var(--gold)}
#offline{position:fixed;left:0;right:0;top:0;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;background:var(--bad);color:#2a0606;font-weight:800;text-align:center;z-index:30}
.urls{display:flex;flex-direction:column;gap:6px;align-items:center}
.urls code{font-family:var(--f-display);font-size:1rem;color:var(--fg);background:var(--panel-2);padding:6px 10px;border-radius:8px;overflow-wrap:anywhere}
.progress{height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--gold);width:0}

/* answer options */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:8px}
.opt{display:flex;flex-direction:column;gap:6px;background:color-mix(in srgb,var(--bg) 40%,transparent);border-radius:12px;padding:10px;min-width:0}
.opt .ol{font-family:var(--f-display);font-weight:800;color:var(--num)}
.opt .ot{font-weight:700;overflow-wrap:anywhere}
.opt img{border-radius:8px;max-height:28vh;object-fit:contain;background:#000}
/* categories */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:8px}
.cat{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--panel-2);border-radius:12px;padding:10px 12px;color:var(--fg);font-size:.92rem;flex-direction:row}
.cat .t{font-weight:700;flex:1;min-width:0}
.cat.pick{cursor:pointer}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{background:var(--panel-2);color:var(--fg);border:1px solid var(--line)}
.seg button.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.theme .tbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.catsel{min-height:36px;padding:4px 8px;font-size:.85rem;max-width:260px}
.round>h2{margin-bottom:2px}

/* экран для телевизора */
html.tv{font-size:clamp(16px,1.15vw,30px)}
html.tv body{font-size:1rem}
html.tv .wrap{max-width:min(94vw,1700px);padding-block:2vh 4vh}
html.tv .chips.n4,html.tv .chips.n5,html.tv .chips.n6{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (min-aspect-ratio:4/3){html.tv .chips.n4{--cols:4}html.tv .chips.n5{--cols:5}html.tv .chips.n6{--cols:6}}
html.tv .chip{padding:.8rem 1rem}
html.tv .chip .nm{font-size:1.1rem}
html.tv .chip .sc{font-size:2rem}
html.tv .bc{min-height:9vh;font-size:clamp(1rem,2.2vw,2.6rem)}
html.tv .bth{font-size:clamp(.8rem,1.3vw,1.5rem)}
html.tv .brow{grid-template-columns:minmax(140px,1.6fr) repeat(var(--n),minmax(0,1fr))}
html.tv .qcard{padding:3vh 3vw;min-height:30vh}
html.tv .qcard .qtext{font-size:clamp(1.4rem,2.6vw,3.2rem)}
html.tv .qcard .qprice{font-size:2.2rem}
html.tv .qcard .qans{font-size:clamp(1.3rem,2.2vw,2.8rem)}
html.tv .media img,html.tv .media video{max-height:55vh}
html.tv .giant{font-size:clamp(4rem,14vw,12rem)}
html.tv .urls code{font-size:1.6rem}
.tvwho{font-family:var(--f-display);font-size:clamp(1.2rem,2vw,2.4rem);font-weight:700;background:color-mix(in srgb,var(--ok) 20%,var(--panel));border:1px solid var(--ok);border-radius:16px;padding:.6em .9em}
.tvwho b{color:var(--ok)}
.tvwho.open{background:var(--panel);border-color:var(--num);color:var(--num)}
.tvplayers{display:flex;flex-wrap:wrap;gap:10px}
.tvplayers span{background:var(--panel-2);border-radius:12px;padding:.5em .9em;font-weight:800;font-size:1.2rem}
html.tv .qcard{min-height:0}
html.tvsplit .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:2vw}
html.tvsplit #r-top,html.tvsplit #r-main,html.tvsplit #r-ctrl{grid-column:1/-1}
html.tvsplit #r-stage{grid-column:1}
html.tvsplit #r-media{grid-column:2;grid-row:2}
html.tvsplit .media img,html.tvsplit .media video{max-height:70vh;width:100%;object-fit:contain}

/* переключатель */
.switch{display:flex;flex-direction:row;align-items:center;gap:14px;cursor:pointer;color:var(--fg)}
.switch .grow{display:flex;flex-direction:column;gap:4px}
.switch b{font-size:1rem}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch i{flex:none;width:52px;height:30px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);position:relative;transition:background .15s}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.switch input:checked+i{background:var(--gold);border-color:var(--gold)}
.switch input:checked+i::after{transform:translateX(22px);background:var(--gold-ink)}
.switch input:focus-visible+i{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.switch i,.switch i::after{transition:none}}

.qcard.modcard{background:linear-gradient(160deg,var(--cell),#4a2a8a);text-align:center;align-items:center;justify-content:center}
.qcard.modcard .qmeta{width:100%}
.qcard.modcard .big-msg{font-size:clamp(2rem,9vw,3.4rem);color:var(--violet)}
.modsub{font-weight:700;font-size:1.05rem;max-width:32ch;text-wrap:balance}
html.tv .qcard.modcard{min-height:40vh}
html.tv .qcard.modcard .big-msg{font-size:clamp(3rem,7vw,8rem)}
html.tv .modsub{font-size:clamp(1.2rem,2vw,2.4rem)}

/* ---------- полноэкранная резиновая раскладка (большие экраны, телевизор) ---------- */
html.big{font-size:clamp(16px,calc(.45vw + .55vh),30px)}
html.big .wrap{max-width:min(95vw,2000px);min-height:100vh;min-height:100dvh;padding-block:2.2vh 2.6vh;gap:2vh}
html.big[data-view=player] .wrap{padding-bottom:160px}
html.big #r-top,html.big #r-stage,html.big #r-main,html.big #r-ctrl{gap:1.8vh}
html.big .chips{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
html.big .chips.n1{--cols:1}html.big .chips.n2{--cols:2}html.big .chips.n3{--cols:3}html.big .chips.n4{--cols:4}html.big .chips.n5{--cols:5}html.big .chips.n6{--cols:6}
html.big .chip .sc{font-size:clamp(1.25rem,2.4vw,3rem)}
/* табло растягивается на всю оставшуюся высоту */
html.big[data-phase=board] #r-main{flex:1;display:flex;flex-direction:column}
html.big[data-phase=board] .board{flex:1;min-height:42vh}
html.big[data-phase=board] .brow{flex:1;grid-template-columns:minmax(9rem,1.6fr) repeat(var(--n),minmax(0,1fr))}
html.big[data-phase=board] .bc{min-height:0;font-size:clamp(1rem,2.3vw,3rem)}
html.big[data-phase=board] .bth{font-size:clamp(.85rem,1.25vw,1.6rem);padding:.6em .8em}
/* вопрос по центру оставшегося места */
html.big[data-phase=q] #r-stage{flex:1;justify-content:center}
html.big[data-phase=q] .qcard{padding:3.5vh 3vw}
html.big[data-phase=q] .qcard .qtext{font-size:clamp(1.3rem,2.4vw,3.2rem)}
html.big[data-phase=q] .qcard .qans{font-size:clamp(1.1rem,2vw,2.6rem)}
html.big[data-phase=q] .qcard .qprice{font-size:clamp(1.3rem,2vw,2.6rem)}
html.big .media img,html.big .media video{max-height:50vh}
html.big[data-phase=lobby] #r-main,html.big[data-phase=over] #r-main,html.big[data-phase=final] #r-main{flex:1;justify-content:center}
html.big[data-phase=lobby] .giant{font-size:clamp(4rem,12vw,12rem)}
.chip.prio{border-color:var(--violet)}
.chip.prio .st{color:var(--violet)}
html.big{font-size:clamp(16px,calc(.6vw + .6vh),32px)}
html.tv.big{font-size:clamp(18px,calc(.75vw + .75vh),40px)}
html.big[data-phase=q] .qcard .qtheme{font-size:1.05rem}
html.big .log{font-size:1rem}
html.tvsplit .wrap{align-items:center}
html.tvsplit #r-top{align-self:start}

#j-code,#w-code{text-transform:uppercase;letter-spacing:.2em;font-weight:700}
#j-code::placeholder,#w-code::placeholder{letter-spacing:.2em}

/* ---------- мобильная вёрстка ---------- */
.check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;color:var(--fg);font-size:.95rem;line-height:1.35;cursor:pointer}
.check input{margin-top:1px}
.check span{flex:1;min-width:0}
.topline{flex-wrap:nowrap}
.topline>.row{flex-wrap:nowrap;margin-left:auto}
@media (max-width:520px){
  .stack{flex-direction:column;align-items:stretch}
  .stack>*{width:100%;flex:none!important}
  .stack>button{min-height:44px}
  .li.stack .grow{width:100%}
  .li.stack{gap:8px}
  .li.stack>button,.li.stack>span{width:auto}
  .li.stack{display:grid;grid-template-columns:1fr 1fr}
  .li.stack>.grow,.li.stack>.note{grid-column:1/-1}
  .topline .tag{display:none}
  .chip .nm{font-size:.8rem}
}

/* ---------- аватарки и профиль ---------- */
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.2rem;height:2.2rem;border-radius:50%;overflow:hidden;font-size:1.15rem;line-height:1;color:#fff;font-weight:800;background:var(--panel-2)}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.sm{width:1.7rem;height:1.7rem;font-size:.95rem}
.av.md{width:3rem;height:3rem;font-size:1.5rem}
.av.xl{width:6.5rem;height:6.5rem;font-size:3.2rem}
.chiphead{display:flex;align-items:center;gap:8px;min-width:0}
.chiphead .nm{min-width:0}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.tvplayers span{display:inline-flex;align-items:center;gap:.5em}
html.big .chip .av.sm{width:2.4rem;height:2.4rem;font-size:1.3rem}
html.tv .tvplayers .av{width:2.4rem;height:2.4rem}
.profrow{display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel-2);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-weight:600;width:100%}
.profrow .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.profrow .chev{font-size:1.6rem;color:var(--muted);line-height:1}
.profcard{align-items:center}
.profcard label{width:100%}
.profprev{display:flex;justify-content:center}
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.avpick{min-height:52px;padding:0;border-radius:50%;aspect-ratio:1;font-size:1.6rem;display:flex;align-items:center;justify-content:center;border:3px solid transparent}
.avpick.on{border-color:var(--fg)}
.colrow{display:flex;flex-wrap:wrap;gap:10px}
.colpick{width:38px;height:38px;min-height:0;padding:0;border-radius:50%;border:3px solid transparent}
.colpick.on{border-color:var(--fg)}
.upl{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:12px;padding:12px 16px;font-weight:700;background:var(--panel-2);color:var(--fg);min-height:46px;flex-direction:row}
/* ---------- лог игры ---------- */
.logcard{gap:10px}
.loglist{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:0 -6px;padding:0 6px}
.lg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:.9rem;line-height:1.35}
.lg .lt{color:var(--muted);font-size:.8rem;padding-top:1px}
.lg .lx{overflow-wrap:anywhere}
.lg.k-pick .lx{font-weight:700}
.lg.k-buzz .lx{color:var(--ok)}
.lg.k-late .lx{color:var(--muted)}
.lg.k-answer .lx{color:var(--num)}
.lg.k-host .lx{color:var(--violet)}
.dl{display:inline-block;font-weight:800;font-size:.8rem;padding:1px 6px;border-radius:6px;margin-left:2px}
.dl.up{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.dl.down{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}

/* ---------- все темы ---------- */
.thfilter{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
@media (max-width:520px){.thfilter{grid-template-columns:1fr}}
.thlist{display:flex;flex-direction:column;gap:8px}
.throw{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.throw input[type=checkbox]{margin-top:2px}
.throw.off .t{opacity:.45;text-decoration:line-through}
.thmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.thmain .t{font-weight:700;overflow-wrap:anywhere}
.thact{margin-top:4px}
.thact .catsel{flex:1 1 180px}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:.88rem;min-height:36px;padding:4px 0;align-self:center}
.linkbtn:hover{color:var(--fg)}

.fthemes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:8px}
.fthemes .li{min-height:52px}
html.big .fthemes{grid-template-columns:repeat(3,minmax(0,1fr))}

/* «Лазурит и мята»: отвечающего выделяем шафраном, чтобы не путать с мятными цифрами */
.chip.answering{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 5%,var(--panel));box-shadow:0 0 0 1px var(--gold) inset}
.chip.answering .st{color:var(--gold)}
.tvwho{background:var(--panel);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.tvwho b{color:var(--gold)}
.qcard .qans .lb{color:var(--muted)}
button.bad,.buzz.early,#offline{color:#fff}