:root{
  --bg:#F5EDE1; --card:#FFFBF5; --ink:#2C221C; --ink-2:#6B5A4E; --line:#E3D6C6;
  --accent:#B8756D; --accent-soft:#F3DCD8; --sage:#6F7D55; --sage-soft:#E4E9D6;
  --cocoa:#6F4E37; --butter:#F2DFA6; --shadow:0 10px 30px rgba(60,40,25,.10);
  --display:"Unbounded",system-ui,sans-serif; --body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#241B16; --card:#2E2420; --ink:#F3E9DC; --ink-2:#B9A797; --line:#46382F;
  --accent:#E0A69E; --accent-soft:#4A3330; --sage:#A7B58C; --sage-soft:#33392A;
  --cocoa:#D9B79C; --butter:#D9C48A; --shadow:0 10px 30px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --bg:#241B16; --card:#2E2420; --ink:#F3E9DC; --ink-2:#B9A797; --line:#46382F;
  --accent:#E0A69E; --accent-soft:#4A3330; --sage:#A7B58C; --sage-soft:#33392A;
  --cocoa:#D9B79C; --butter:#D9C48A; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
p{margin:0}
[hidden]{display:none!important}
.eyebrow{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,7vw,44px);line-height:1.08;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,5.4vw,28px);line-height:1.2;margin:0;text-wrap:balance}
.muted{color:var(--ink-2)}
.tiny{font-size:14px;color:var(--ink-2)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;
  background:var(--cocoa);color:var(--bg);font-weight:600;font-size:18px;min-height:56px;transition:transform .08s ease,opacity .15s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45}
.btn.ghost{background:transparent;color:var(--ink-2);border:1.5px solid var(--line);min-height:48px;padding:10px 20px;font-size:16px}
.btn.accent{background:var(--accent);color:#fff}
input[type=text]{width:100%;padding:16px 18px;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:18px}

/* ---------- телефон гостя ---------- */
.guest .app{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom))}
.guest .wrap{width:100%;max-width:520px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.guest .wrap.top{justify-content:flex-start}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;width:100%;min-height:56px;overflow-wrap:anywhere;
  padding:16px 18px;border-radius:14px;border:2px solid var(--line);background:var(--card);
  font-size:18px;font-weight:500;line-height:1.3;transition:transform .08s ease,border-color .12s ease,opacity .15s}
.opt:not(:disabled):active{transform:scale(.99)}
.opt.picked{border-color:var(--accent);background:var(--accent-soft)}
.opt.right{border-color:var(--sage);background:var(--sage-soft)}
.opt.dim{opacity:.5}
.opt .mark{font-family:var(--display);font-size:13px;color:var(--ink-2);white-space:nowrap}
.opt.right .mark{color:var(--sage)}
.status{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2);min-height:24px}
.status.ok{color:var(--sage)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.verdict{font-family:var(--display);font-weight:800;font-size:clamp(30px,9vw,44px);line-height:1}
.verdict.ok{color:var(--sage)} .verdict.no{color:var(--accent)}
.after{font-size:16px;line-height:1.55;color:var(--ink-2)}
.score{font-family:var(--display);font-weight:800;font-size:clamp(64px,20vw,110px);line-height:1;color:var(--accent)}
.score small{font-size:.3em;color:var(--ink-2);font-weight:600}
.place{font-family:var(--display);font-weight:600;font-size:22px}
.faces{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.face{display:grid;justify-items:center;gap:8px;padding:12px 6px;border-radius:18px;border:2px solid transparent;transition:opacity .15s,border-color .12s}
.face .ph{width:min(36vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--sage-soft);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:44px;color:var(--sage);border:3px solid var(--line)}
.face .ph img{width:100%;height:100%;object-fit:cover;display:block}
.face b{font-size:18px}
.face .arrow{font-size:13px;color:var(--ink-2)}
.face.picked{border-color:var(--accent);background:var(--accent-soft)}
.face.right{border-color:var(--sage);background:var(--sage-soft)}
.face.dim{opacity:.4}
.swipe{touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .18s ease}
.swipe.dragging{transition:none}
.swipe.lean-l .face[data-k="0"],.swipe.lean-r .face[data-k="1"]{border-color:var(--accent);background:var(--accent-soft)}
.net{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px;box-shadow:var(--shadow);white-space:nowrap}
.toast{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);z-index:21;
  background:var(--accent);color:#fff;padding:10px 16px;border-radius:14px;font-size:15px;box-shadow:var(--shadow);max-width:calc(100% - 32px)}

/* маленькие телефоны и горизонтальная ориентация */
@media (max-width:360px),(max-height:620px){
  .guest .app{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .guest .wrap{gap:12px}
  .guest h2{font-size:19px}
  .guest h1{font-size:26px}
  .opt{padding:11px 14px;min-height:48px;font-size:17px}
  .opts{gap:8px}
  .status{font-size:14px}
}
@media (orientation:landscape) and (max-height:500px){
  .guest .wrap{max-width:760px;gap:10px}
  .guest .opts{grid-template-columns:1fr 1fr}
  .guest h2{font-size:19px}
  .opt{min-height:48px}
  .face .ph{width:min(24vh,110px);font-size:34px}
  .score{font-size:64px}
}

/* ---------- экран ведущего ---------- */
body.host{font-size:clamp(15px,1.25vw,40px)}
.stage{min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto}
.bar,.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(8px,1.4vh,14px) clamp(16px,2.6vw,48px)}
.bar{border-bottom:1px solid var(--line)}
.controls{border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--bg)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:15px;color:var(--ink-2);line-height:1.2}
.tab.on{background:var(--cocoa);color:var(--bg);border-color:var(--cocoa)}
.tab small{opacity:.7;margin-left:6px}
.bartitle{font-family:var(--display);font-weight:600;font-size:clamp(14px,1vw,26px);color:var(--ink-2)}
.bartitle small{font-family:var(--body);font-weight:400;opacity:.7;margin-left:10px}
.barside{display:flex;gap:8px;align-items:center;color:var(--ink-2);font-size:15px}
.icon{min-width:40px;height:40px;border-radius:999px;border:1.5px solid var(--line);display:inline-grid;place-items:center;padding:0 12px;font-size:15px;color:var(--ink-2)}
.menu{position:absolute;right:clamp(16px,2.6vw,48px);top:62px;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:grid;min-width:260px;overflow:hidden}
.menu a,.menu button{padding:14px 18px;text-align:left;font-size:16px;color:var(--ink);text-decoration:none}
.menu a:hover,.menu button:hover{background:var(--accent-soft)}
.menu .danger{color:var(--accent)}
.main{width:100%;max-width:2600px;margin:0 auto;padding:clamp(12px,2.6vh,44px) clamp(16px,3vw,56px);
  display:flex;flex-direction:column;justify-content:center;gap:calc(clamp(10px,2.2vh,32px) * var(--k,1))}
.host .eyebrow{font-size:clamp(12px,1vw,28px)}
.host h1{font-size:calc(clamp(30px,min(4.6vw,8.6vh),150px) * var(--k,1))}
.qtitle{font-family:var(--display);font-weight:600;font-size:calc(clamp(24px,min(3.3vw,6.2vh),116px) * var(--k,1));line-height:1.14;margin:0;text-wrap:balance}
.qhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.timer{font-family:var(--display);font-weight:800;font-size:calc(clamp(32px,min(5vw,8vh),170px) * var(--k,1));line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer.done{color:var(--ink-2);opacity:.55}
.prog{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left center;transform:scaleX(1)}
.hopts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,24px)}
.hopt{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(clamp(10px,2.2vh,52px) * var(--k,1)) clamp(18px,1.8vw,56px);
  border-radius:clamp(14px,1.4vw,24px);border:2px solid var(--line);background:var(--card);font-size:calc(clamp(18px,min(2vw,3.8vh),68px) * var(--k,1));font-weight:500;line-height:1.25;transition:opacity .2s,border-color .2s,background .2s}
.hopt.right{border-color:var(--sage);background:var(--sage-soft);font-weight:600}
.hopt.dim{opacity:.4}
.hopt .cnt{font-family:var(--display);font-weight:600;font-size:.62em;color:var(--ink-2);white-space:nowrap}
.hopt.right .cnt{color:var(--sage)}
.hfaces{display:flex;justify-content:center;gap:clamp(24px,6vw,120px)}
.hfaces .face{padding:clamp(6px,1vh,14px)}
.hfaces .face .ph{width:calc(clamp(100px,min(18vw,28vh),560px) * var(--k,1));font-size:calc(clamp(44px,min(6vw,10vh),200px) * var(--k,1))}
.hfaces .face b{font-size:calc(clamp(20px,min(2.2vw,4vh),64px) * var(--k,1));font-family:var(--display);font-weight:600}
.hfaces .face .cnt{font-family:var(--display);font-size:clamp(16px,1.4vw,26px);color:var(--ink-2)}
.hfaces .face.right .cnt{color:var(--sage)}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.answered{font-family:var(--display);font-weight:600;font-size:calc(clamp(17px,min(1.6vw,3vh),52px) * var(--k,1))}
.answered b{color:var(--accent)}
.waiting{color:var(--ink-2);font-size:clamp(14px,1.1vw,32px);max-width:70ch}
.qrbox{background:#fff;border-radius:clamp(12px,1.2vw,22px);padding:clamp(10px,1vw,20px);display:inline-block;line-height:0}
.qrbox img{display:block;width:100%;height:auto;image-rendering:pixelated}
.qrmini{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:clamp(13px,1vw,28px);text-align:right}
.qrmini .qrbox{width:calc(clamp(76px,min(7vw,13vh),230px) * var(--k,1));padding:6px}
.lobby{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,80px);align-items:center}
.lobby .qrbox{width:calc(min(100%,52vh,900px) * var(--k,1))}
.joinurl{font-family:var(--display);font-weight:600;font-size:clamp(16px,1.6vw,48px);word-break:break-all;margin-top:12px}
.lead{font-size:calc(clamp(17px,min(1.6vw,3vh),52px) * var(--k,1));color:var(--ink-2);max-width:40ch}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 8px 8px 16px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);font-size:calc(clamp(15px,min(1.5vw,2.8vh),46px) * var(--k,1));line-height:1.2}
.chip .st{font-family:var(--display);font-weight:600;font-size:.72em;color:var(--ink-2);margin-left:4px}
.chip.ok{border-color:var(--sage)} .chip.ok .st{color:var(--sage)}
.chip.no{border-style:dashed} .chip.no .st{color:var(--accent)}
.chip .x{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;color:var(--ink-2);opacity:.45;font-size:18px;line-height:1}
.chip .x:hover{opacity:1;background:var(--accent-soft)}
.chip.plain{padding-right:16px}
/* длинный список гостей не должен сжимать QR и вопрос: он прокручивается внутри своего блока */
.lobby .chips{max-height:34vh;overflow-y:auto;align-content:flex-start;scrollbar-width:thin}
.closed-list{max-height:48vh;overflow-y:auto;align-content:flex-start;scrollbar-width:thin}
.reveal-box{display:grid;gap:6px;padding-top:calc(clamp(8px,1.6vh,24px) * var(--k,1));border-top:1.5px dashed var(--line)}
.reveal-box .after{font-size:calc(clamp(16px,min(1.6vw,3.1vh),56px) * var(--k,1));line-height:1.45;color:var(--ink);max-width:72ch}
.reveal-box .guessed{font-family:var(--display);font-weight:600;font-size:calc(clamp(15px,min(1.3vw,2.6vh),42px) * var(--k,1));color:var(--sage)}
.results{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);align-items:start}
.board{display:grid;gap:clamp(6px,.8vh,12px);grid-auto-flow:row}
.board.cols{grid-template-columns:1fr 1fr;column-gap:32px}
.brow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:clamp(4px,1vh,14px) 0;border-bottom:1px solid var(--line);font-size:calc(clamp(17px,min(1.8vw,3.4vh),58px) * var(--k,1))}
.results>div,.lobby>div,.board>*{min-width:0}
.brow .nm{overflow-wrap:anywhere}
.brow .sc,.brow .pl{white-space:nowrap}
.brow .pl{font-family:var(--display);font-weight:800;color:var(--ink-2);min-width:2ch;text-align:right}
.brow .sc{font-family:var(--display);font-weight:600}
.brow.win .pl,.brow.win .sc{color:var(--accent)}
.brow.win .nm{font-weight:700}
.hist{display:flex;align-items:flex-end;gap:clamp(4px,.6vw,12px);height:calc(clamp(160px,40vh,820px) * var(--k,1));padding-top:28px}
.hist .col{flex:1 1 0;min-width:0;height:100%;display:grid;grid-template-rows:1fr auto;gap:8px;text-align:center}
.hist .barw{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:6px}
.hist .hbar{background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:8px 8px 3px 3px;min-height:6px}
.hist .hbar.zero{height:3px;min-height:3px;border:0;border-radius:2px;background:var(--line)}
.hist .c{font-family:var(--display);font-weight:600;font-size:clamp(14px,1.2vw,38px)}
.hist .s{font-family:var(--display);font-weight:600;font-size:clamp(13px,1vw,32px);color:var(--ink-2)}
.hist-cap{color:var(--ink-2);font-size:clamp(14px,1.1vw,32px)}
.home{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,40px)}
.gcard{display:grid;gap:10px;text-align:left;padding:clamp(22px,2.6vw,48px);border-radius:24px;border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.gcard:hover{border-color:var(--accent)}
.gcard b{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.2vw,64px);line-height:1.15}
.gcard span{color:var(--ink-2)}
.ctl{display:flex;gap:12px;align-items:center}
.keys{color:var(--ink-2);font-size:14px;opacity:.7}
.controls .btn{font-size:clamp(16px,1.2vw,34px);min-height:clamp(48px,5vh,96px)}
.gate{min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center}
@media (max-width:900px){
  .lobby,.results,.home{grid-template-columns:1fr}
  .hopts{grid-template-columns:1fr}
  .board.cols{grid-template-columns:1fr}
  .keys{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}