/* На глаз: тёмная сцена с размытым фоном, полупрозрачные карточки. Одна тема (тёмная) намеренно. */
@font-face{font-family:"Dela Gothic One";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dela-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Dela Gothic One";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dela-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/golos-cyrillic-400.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/golos-cyrillic-600.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/golos-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2212}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/golos-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2212}

:root{
  color-scheme:dark;
  --bg:#0d0b14; --card:rgba(18,15,26,.74); --soft:rgba(255,255,255,.07); --line:rgba(255,255,255,.12);
  --fg:#f4eee2; --muted:#c9bfd6; --accent:#ffb238; --ink:#0d0b14; --green:#6fe3a1; --bad:#ff7a80;
  --display:"Dela Gothic One","Arial Black",Impact,sans-serif;
  --body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--body);min-height:100vh;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:max(14px,env(safe-area-inset-top,0px)) 48px}
a{color:var(--fg)}
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.bg-layer{position:absolute;inset:-60px;opacity:0;transition:opacity .9s ease}
.bg-layer.on{opacity:1}
.bg-layer svg{width:100%;height:100%;filter:blur(16px) saturate(1.15)}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,20,.25),rgba(13,11,20,.55) 60%,rgba(13,11,20,.75))}
.pass{animation:pass 14s linear infinite}@keyframes pass{to{transform:translateX(-80px)}}
.wrap{position:relative;z-index:1;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* шапка */
.top{display:flex;flex-direction:column;gap:10px;background:rgba(13,11,20,.72);padding:12px 16px;border-radius:18px;border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bar{display:flex;align-items:center;gap:12px}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font:600 15px var(--body);padding:8px 12px 8px 8px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.back[hidden]{display:none}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);margin-left:auto}
.back[hidden]+.brand{margin-left:0}
.logo{font:400 clamp(24px,6.5vw,34px)/1 var(--display);white-space:nowrap}
.logo b{font-weight:400;color:var(--accent)}
.scene{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px}
.scene-name{color:var(--accent);font-weight:600}
.ticker{overflow:hidden;white-space:nowrap;font-size:13px;font-style:italic;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker span{display:inline-block;padding-left:100%;animation:tick 60s linear infinite}
@keyframes tick{to{transform:translateX(-100%)}}
/* фокус-режим: экран вопроса принадлежит вопросу */
body.focus .scene,body.focus .ticker,body.focus footer{display:none}

main{display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:0 12px 32px rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
h1,h2{margin:0;text-wrap:balance}
h1{font:400 clamp(22px,5.6vw,30px)/1.15 var(--display)}
h2{font:400 19px/1.25 var(--display)}
.q{font:600 clamp(21px,5vw,26px)/1.25 var(--body)}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:14px} .bad{color:var(--bad)}
.label{font:600 13px/1.2 var(--body);color:var(--accent)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.grow{flex:1;min-width:120px}
.btn{display:inline-flex;align-items:center;justify-content:center;font:400 16px/1 var(--display);border:0;border-radius:14px;padding:15px 22px;cursor:pointer;background:var(--accent);color:var(--ink);text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.btn:active{transform:scale(.97)}
.btn.btn-lg{font-size:19px;padding:18px 30px}
.btn.ghost{background:var(--soft);color:var(--fg);border:1px solid var(--line);box-shadow:none;font:600 16px var(--body)}
.btn.hl{background:#5ec8ff;flex:1;min-width:130px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:6px 0;font:500 15px var(--body);cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
input{font:500 17px/1.2 var(--body);color:var(--fg);background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:14px;padding:13px 15px;width:100%}
input::placeholder{color:#9d92aa}
input.num{font:600 24px/1.1 var(--body)}
input.code{font:600 20px var(--body);letter-spacing:.2em;text-transform:uppercase}
.answer{display:flex;flex-direction:column;gap:8px}
.num-extra{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.preview{font-size:14px;color:var(--muted);min-height:1.3em}
.mag{display:flex;gap:6px;flex-wrap:wrap}
.mag button{font:600 14px var(--body);padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:var(--soft);color:var(--fg);cursor:pointer}
.err{color:var(--bad);font-size:14px;min-height:1.2em}
.qwrap{display:flex;flex-direction:column;gap:8px}
.wide{align-self:flex-start;font:600 13px/1.2 var(--body);color:var(--ink);background:var(--accent);padding:5px 10px;border-radius:99px}
.secs{font:400 26px/1 var(--display);font-variant-numeric:tabular-nums}
.secs.low{color:var(--bad)}
.tbar{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--accent);border-radius:99px;transform-origin:left}
.big{font:400 clamp(28px,7.5vw,40px)/1.1 var(--display);color:var(--accent);overflow-wrap:anywhere}
.big-sm{font:400 22px/1.1 var(--display)}
.unit{color:var(--muted);font-size:14px}
.reveal-top{align-items:flex-start}
.mine{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pts{font-weight:600;color:var(--green)}.pts.zero{color:var(--muted)}
.pts.failed{color:var(--bad)}
.miss{font-size:13.5px;color:var(--muted)}
.note{color:var(--muted);font-size:15px}
.src{font-size:13.5px;color:var(--muted)}.src a{color:var(--muted)}
.verdict{font:400 17px/1.35 var(--display);color:var(--accent)}.verdict.bad{color:var(--bad)}
.streak{font-weight:600;color:var(--accent)}
.score{display:flex;flex-direction:column;align-items:flex-end}.score b{font:400 22px var(--display);color:var(--accent)}
.react{display:flex;gap:14px;align-items:center}
.quip{font:400 17px/1.3 var(--display)}
.eye{display:inline-block;line-height:0}
.lives{display:flex;gap:6px;align-items:center}
.notice{font-size:14px;padding:10px 12px;border-radius:12px;background:var(--soft);color:var(--muted)}
.thinking{display:flex;gap:10px;align-items:center;color:var(--muted)}
.dots{display:inline-flex;gap:4px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:b 1.2s infinite;opacity:.3}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes b{50%{opacity:1}}
.rules{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:600 14px var(--body);padding:8px 13px;border-radius:99px;border:1px solid var(--line);background:var(--soft);color:var(--fg);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--ink)}
.seg button:disabled[aria-pressed="false"]{opacity:.45}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cell{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;background:var(--soft);border:1px solid transparent;min-width:0}
.cell.me{border-color:#5aa9ff}.cell.lost{border-color:var(--bad)}.cell.win{border-color:var(--green)}
.cell .who{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell .v{font:400 19px/1.2 var(--display);overflow-wrap:anywhere}
.code{letter-spacing:.12em}
.items{display:flex;flex-direction:column}
.item{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:0}
.callout{font-size:18px}
.hl-word{color:var(--accent)}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mode:hover{border-color:var(--accent)}
.hero .btn.btn-lg{align-self:flex-start}
.prose p,.prose li{max-width:62ch}
.srclist{padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.srclist a{color:var(--accent)}
/* мишень */
.board{display:flex;flex-direction:column;align-items:center;gap:6px}
.board svg{max-width:100%;height:auto;overflow:visible}
.fly{animation:fly .45s cubic-bezier(.25,.6,.35,1) both}
@keyframes fly{0%{transform:translate(70px,190px) scale(3.4);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
.wob{transform:rotate(var(--r));animation:wob .6s ease-out both}
@keyframes wob{0%{transform:rotate(calc(var(--r) + 14deg))}30%{transform:rotate(calc(var(--r) - 9deg))}60%{transform:rotate(calc(var(--r) + 4deg))}100%{transform:rotate(var(--r))}}
.hit{animation:hit .5s ease-out both}
@keyframes hit{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(6)}}
.share{display:flex;flex-direction:column;gap:12px}
.sharetext{white-space:pre-wrap;font-size:13px;background:rgba(0,0,0,.4);padding:10px;border-radius:12px;user-select:all;margin:0}
/* сойтись */
.chain{display:flex;flex-direction:column;gap:6px}
.chain-row{display:grid;grid-template-columns:1fr 34px 1fr;gap:8px;align-items:center}
.chain-row.head span{font-size:13px;color:var(--muted)}.chain-row.head span:last-child{text-align:right}
.chain-row .w{padding:9px 12px;border-radius:12px;background:var(--soft);font-weight:600;overflow-wrap:anywhere;min-width:0}
.chain-row .w.r{text-align:right}
.chain-row .step{color:var(--muted);text-align:center;font-size:13px}
.chain-row.match .w{background:var(--accent);color:var(--ink)}.chain-row.match .step{color:var(--accent);font-size:20px}
footer{position:relative;z-index:1;max-width:640px;margin:8px auto 0;display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
noscript p{position:relative;z-index:1;max-width:640px;margin:20px auto}
@media (max-width:480px){.card{padding:18px}.ticker{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--body);padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:var(--soft);color:var(--fg);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.chip .cnt{font-size:12px;opacity:.75}
.settings-link{align-self:flex-start}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.board-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--muted);justify-content:center}
.lead{display:flex;flex-direction:column;gap:6px}
.lead-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--soft)}
.lead-row.first{outline:2px solid var(--accent)}
.lead-row b{font:400 18px var(--display)}
.lead-row .n{font:400 16px var(--display);color:var(--muted)}
.guesses{display:flex;flex-direction:column;gap:4px;font-size:14px}
.guesses .g{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline}
.guesses .g .p{color:var(--muted);font-size:13px}
.step-words{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.step-words .n{color:var(--muted);font-size:13px;width:22px}
.wchip{padding:7px 11px;border-radius:12px;background:var(--soft);font-weight:600}
.step-words.match .wchip{background:var(--accent);color:var(--ink)}
/* попадания в духе сцены */
.hitview{display:flex;flex-direction:column;align-items:center;gap:6px}
.hitview svg{height:auto;overflow:visible}
.drive{animation:drive .9s cubic-bezier(.3,.7,.3,1.02) both}
@keyframes drive{from{transform:translateX(var(--from))}to{transform:none}}
.pour{transform-box:fill-box;transform-origin:bottom;animation:pour 1s ease-out both}
@keyframes pour{from{transform:scaleY(0)}to{transform:none}}
.drip{opacity:0;animation:drip .6s ease-out both}
@keyframes drip{to{opacity:1}}
.needle{animation:needle 1.1s cubic-bezier(.3,1.5,.5,1) both}
@keyframes needle{from{transform:rotate(-90deg)}to{transform:rotate(var(--deg))}}
.slide{animation:slide .9s cubic-bezier(.3,1.4,.5,1) both}
@keyframes slide{from{transform:translateX(var(--from))}to{transform:none}}
.share-row{display:flex;gap:10px;flex-wrap:wrap}
.share-preview{width:100%;max-width:360px;border-radius:14px;align-self:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
/* Illustrated scenes remain quiet behind the question. Only the active scene loads. */
.bg-layer{inset:-12px}
.bg-layer svg{position:absolute;inset:0}
.bg-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) saturate(.95)}
.bg::after{background:linear-gradient(180deg,rgba(13,11,20,.28),rgba(13,11,20,.40) 55%,rgba(13,11,20,.65))}
body.focus .bg::after{background:rgba(13,11,20,.55)}
.challenge-compare{display:flex;flex-direction:column;gap:12px}
.share-status{font-size:14px;color:var(--muted)}
.sharetext{width:100%;overflow-wrap:anywhere}
/* The game keeps one visual hierarchy; extra detail opens on demand. */
body.play-page .scene,body.play-page .ticker,body.play-page footer,body.play-page #hostEye{display:none}
body.play-page .top{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0 2px 2px;border-radius:0}
body.play-page .logo{font-size:22px}
body.play-page .logo b{color:var(--fg)}
body.play-page .back{background:rgba(18,15,26,.6);border-color:transparent;font-size:14px}
body.play-page .bg-layer img{filter:blur(4px) saturate(.95)}
body.play-page .bg::after{background:rgba(13,11,20,.34)}
body.play-page.focus .bg::after{background:rgba(13,11,20,.42)}
body.play-page .card{background:rgba(18,15,26,.91);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(255,255,255,.07)}
body.play-page .label{color:var(--muted);font-weight:400}
body.play-page .reveal-top .big{font:600 30px/1.2 var(--body);color:var(--fg)}
body.play-page .reveal-top .big-sm{font:600 20px/1.3 var(--body)}
body.play-page .verdict{font:500 15px/1.4 var(--body);color:var(--muted)}
body.play-page .verdict.bad{color:var(--bad)}
body.play-page .score b{font:600 20px var(--body);color:var(--fg)}
body.focus .players{display:none}
.result-card{gap:20px}
.result-card .q{font-size:20px;line-height:1.4}
.correct-answer{display:flex;flex-direction:column;gap:4px}
.correct-answer .big{font:600 32px/1.2 var(--body);color:var(--fg)}
.correct-answer .unit{font-size:16px}
.result-list{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.result-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:baseline;font-size:16px}
.result-row>span{overflow-wrap:anywhere}
.result-pts{font-weight:600;font-size:15px}
.result-verdict{font-size:14px;color:var(--muted)}
.answer-details{font-size:14px;color:var(--muted)}
.answer-details summary{cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:4px;padding:4px 0;display:inline-block}
.answer-details summary::-webkit-details-marker{display:none}
.answer-details[open]>:not(summary){margin-top:12px}
.result-card .btn{font:600 16px var(--body);padding:14px 20px;box-shadow:none}
.quiet-next{gap:8px 20px;border-top:1px solid var(--line);padding-top:10px}
.quiet-next .link{font-size:14px}
.streak-note{font-size:13px}

.ticker span{white-space:pre}

/* Главная: сразу игра, четыре своих значка и больше воздуха для сцены. */
body[data-page="home"] .top{background:rgba(18,15,26,.52);gap:12px}
body[data-page="home"] .brand{margin-left:0}
body[data-page="home"] .ticker{display:none}
body[data-page="home"] .scene{align-self:flex-start;background:rgba(255,255,255,.06);border-radius:10px;padding:6px 10px}
body[data-page="home"] .scene-name{color:var(--fg);font-size:13px}
.header-settings{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--soft)}
.header-settings .drawn-icon{width:34px;height:30px}
.drawn-icon{display:block;width:74px;height:56px;flex-shrink:0}
.drawn-icon svg{display:block;width:100%;height:100%}
.home-daily{background:rgba(18,15,26,.84);box-shadow:none;gap:16px}
.home-daily .q{font-size:clamp(22px,5vw,29px);line-height:1.25;text-wrap:pretty}
.home-daily .answer{margin:0}
.home-daily .btn{align-self:flex-start}
.home-daily .err:empty{display:none}
.home-daily .row>.small{font-size:13px}
.modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mode{padding:16px;background:rgba(18,15,26,.65);gap:5px;min-width:0;transition:background .15s,border-color .15s}
.mode:hover{background:rgba(18,15,26,.83)}
.mode h2{font-size:clamp(16px,4vw,21px)}
.mode p{font-size:14px;line-height:1.3;text-wrap:pretty}
.mode .drawn-icon{margin-bottom:5px}
.threshold{display:flex;flex-direction:column;gap:4px}
.threshold .small{font-size:12px}
.marathon-question-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.marathon-question-meta .threshold{display:inline}
.question-clock{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.question-clock .secs{font-size:18px}
.daily-countdown{font-variant-numeric:tabular-nums}
.result-card .daily-countdown{margin-top:-12px;font-size:13px}
@media(max-width:360px){.mode{padding:13px}.mode p{font-size:13px}.home-daily .row>.small{max-width:140px}}

/* Brief feedback after answering; no looping decorations. */
.accuracy-view{width:100%;max-width:440px;align-self:center;line-height:0}
.accuracy-view svg{width:100%;height:auto;overflow:visible;font-family:var(--body)}
.accuracy-marker{animation:accuracy-land .65s cubic-bezier(.2,.75,.25,1) both}
@keyframes accuracy-land{from{transform:translateX(var(--travel));opacity:.35}to{transform:translateX(0);opacity:1}}
.marathon-head{display:flex;flex-direction:column;gap:12px}
.marathon-progress{display:flex;flex-direction:column;gap:8px}
.progress-caption{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.multiplier{color:var(--accent);font-weight:600}
.marathon-trail{display:flex;gap:5px;list-style:none;margin:0;padding:0;height:7px}
.marathon-trail li{flex:0 0 calc((100% - 55px)/12);max-width:20px;min-width:0;border-radius:2px}
.trail-hit{background:var(--accent)}
.trail-miss{border:1px solid var(--bad);background:rgba(255,122,128,.12)}
.trail-new{transform-origin:left;animation:trail-arrive .4s ease-out both}
@keyframes trail-arrive{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.question-progress{display:flex;gap:5px;height:5px}
.question-progress span{flex:1;border-radius:2px;background:rgba(244,238,226,.12)}
.question-progress .complete{background:var(--accent)}
.question-progress .current{background:rgba(244,238,226,.5)}