@font-face{font-family:Rubik;font-weight:800;src:url(../fonts/rubik-cyrillic-800-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+2116}
@font-face{font-family:Rubik;font-weight:800;src:url(../fonts/rubik-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Rubik;font-weight:900;src:url(../fonts/rubik-cyrillic-900-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+2116}
@font-face{font-family:Rubik;font-weight:900;src:url(../fonts/rubik-latin-900-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Golos;font-weight:500;src:url(../fonts/golos-text-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+2116}
@font-face{font-family:Golos;font-weight:500;src:url(../fonts/golos-text-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Golos;font-weight:600;src:url(../fonts/golos-text-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0400-045F,U+2116}
@font-face{font-family:Golos;font-weight:600;src:url(../fonts/golos-text-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}

/* Стиль прототипа «варианты интерфейса»: Rubik для заголовков и кнопок, Golos для текста, тёмная обводка, светлые карточки, цвета сериала */
:root{
  --edge:#0b0810; --paper:#fff6ea; --paper2:#ffeacc; --ink:#1b1420; --muted:#6d5f73;
  --sun:#ffd23f; --leaf:#9be15d; --alisa:#ff7ab0; --dima:#5fd0ff; --alisa-ink:#c23b74; --dima-ink:#1f7fa8;
  --display:Rubik,'Arial Black',system-ui,sans-serif; --body:Golos,system-ui,-apple-system,sans-serif;
  --top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px) + env(safe-area-inset-top,0px));
  --bot:calc(var(--tg-safe-area-inset-bottom,0px) + env(safe-area-inset-bottom,0px));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#ffd9a8;font-family:var(--body);color:var(--ink);user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0;touch-action:none}
#stage canvas{display:block}
.hidden{display:none!important}

/* метки на предметах */
#leaders{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#leaders line.u{stroke:var(--edge);stroke-width:7;stroke-linecap:round}
#leaders line.o{stroke:var(--paper);stroke-width:3;stroke-linecap:round}
#tags{position:fixed;inset:0;pointer-events:none}
.tag{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;font:800 13px/1.1 var(--display);color:var(--ink);background:rgba(255,246,234,.92);border:2.5px solid var(--edge);border-radius:7px;padding:5px 8px;white-space:nowrap;box-shadow:0 4px 0 var(--edge);cursor:pointer;transition:transform .08s,box-shadow .08s,background .12s}
.tag:active{transform:translate(-50%,calc(-50% + 3px));box-shadow:0 1px 0 var(--edge)}
.tag[aria-pressed="true"]{background:var(--sun);transform:translate(-50%,calc(-50% + 2px));box-shadow:0 2px 0 var(--edge)}
.dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:4px;background:var(--sun);border:2px solid var(--edge);animation:pulse 1.4s infinite;pointer-events:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

/* верхняя полоска: прогресс и кнопки */
.hud{position:fixed;left:0;right:0;top:0;padding:calc(var(--top) + 8px) 12px 22px;display:flex;justify-content:space-between;align-items:center;gap:8px;background:linear-gradient(rgba(27,20,32,.55),rgba(27,20,32,0));pointer-events:none}
.hud > *{pointer-events:auto}
.steps{display:flex;gap:4px}
.steps span{width:16px;height:7px;border-radius:3px;background:rgba(255,255,255,.5);border:1.5px solid var(--edge)}
.steps span.on{background:var(--sun)}
.steps b{display:none;font:800 13px var(--display);color:#fff;text-shadow:0 1px 2px var(--edge)}
/* полоска Telegram во весь экран: «Закрыть» слева (~26% ширины), «⋯» справа (~21%), наш HUD посередине */
.inbar .hud{top:var(--tg-safe-area-inset-top,0px);height:var(--tg-content-safe-area-inset-top,0px);padding:0;left:26%;right:21%;justify-content:center;gap:6px;background:none}
.inbar .steps span{display:none}.inbar .steps b{display:block}
.inbar .mini{font-size:12px;padding:4px 7px;border-width:2px;box-shadow:0 2px 0 var(--edge)}
.hudbtns{display:flex;gap:6px}
.mini{font:800 13px var(--display);color:var(--ink);background:var(--paper);border:2.5px solid var(--edge);border-radius:8px;padding:6px 10px;box-shadow:0 3px 0 var(--edge);cursor:pointer}
.mini:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}

/* нижняя карточка: всё чтение и все ответы в одном месте, глаза не прыгают */
.card{position:fixed;left:10px;right:10px;bottom:calc(var(--bot) + 10px);max-height:56vh;overflow:auto;background:var(--paper);border:3px solid var(--edge);border-radius:12px;box-shadow:0 5px 0 var(--edge);padding:12px;display:flex;flex-direction:column;gap:9px}
.card .sit{font:600 16px/1.35 var(--body)}
.card .hint{font:500 13px/1.3 var(--body);color:var(--muted)}
.card h3,.card .sit,.card .say{width:100%}
.card h3{margin:0;font:900 17px/1.2 var(--display)}
.say{font:600 16px/1.35 var(--body);background:#fff;border:2.5px solid var(--edge);border-radius:10px 10px 10px 2px;padding:9px 11px}
.say b{display:block;font:800 12px var(--display);letter-spacing:.3px;margin-bottom:2px}
.say.alisa{background:#ffe3ef}.say.alisa b{color:var(--alisa-ink)}
.say.dima{background:#ddf4ff}.say.dima b{color:var(--dima-ink)}
.say.me{background:#fff3c4;border-radius:10px 10px 2px 10px}
.say.me b{color:#8a6a00}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.opt,.chip{font:600 15px/1.2 var(--body);color:var(--ink);background:var(--paper2);border:2.5px solid var(--edge);border-radius:8px;padding:9px 11px;text-align:left;box-shadow:0 3px 0 var(--edge);cursor:pointer;transition:transform .08s,box-shadow .08s,background .12s}
.opt,.chip{padding:8px 10px;font-size:14px}
.opts .opt{flex:0 1 auto;max-width:100%}
.opt:active,.chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.opt[aria-pressed="true"],.chip[aria-pressed="true"]{background:var(--sun);transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.opt.ghost,.chip.ghost{background:#fff;border-style:dashed}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.go{font:900 16px var(--display);color:var(--ink);background:var(--leaf);border:3px solid var(--edge);border-radius:8px;padding:11px 18px;box-shadow:0 4px 0 var(--edge);cursor:pointer;margin-left:auto}
.go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
.go:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:0 4px 0 var(--edge)}
.go.wide{width:100%;margin:0}
.go.alt{background:var(--paper2)}
.src{font:500 12px/1.3 var(--body);color:var(--muted)}
.link{font:600 13px var(--body);color:var(--muted);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;align-self:flex-start}
textarea{font:600 15px/1.3 var(--body);width:100%;min-height:64px;border:2.5px solid var(--edge);border-radius:8px;padding:9px;resize:none;background:#fff;color:var(--ink)}

/* экраны поверх живой сцены: старт, портрет, настройки */
.screen{position:fixed;inset:0;overflow:auto;padding:calc(var(--top) + 14px) 12px calc(var(--bot) + 14px);display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,rgba(255,214,170,.15),rgba(255,180,200,.25) 45%,rgba(27,20,32,.55))}
.screen h1{margin:0 0 2px;font:900 32px/1 var(--display);color:var(--sun);-webkit-text-stroke:2px var(--edge);paint-order:stroke fill;text-shadow:0 4px 0 var(--edge)}
.screen .lead{margin:0;font:600 15px/1.35 var(--body);color:#fff;text-shadow:0 1px 3px var(--edge)}
.panel{background:var(--paper);border:3px solid var(--edge);border-radius:12px;box-shadow:0 5px 0 var(--edge);padding:12px;display:flex;flex-direction:column;gap:8px}
.panel h2{margin:0;font:900 16px var(--display)}
.panel p{margin:0;font:600 15px/1.35 var(--body)}
.panel .muted{color:var(--muted);font-size:13px;font-weight:500}
.cards{display:flex;gap:8px}
.cards .opt{flex:1;text-align:center;font-family:var(--display);font-weight:800}
.cards .opt small{display:block;font:500 12px var(--body);color:var(--muted);margin-top:2px}
input[type=range]{width:100%;accent-color:#e0a800}
.check{display:flex;gap:10px;align-items:center;font:600 15px var(--body)}
.check input{width:22px;height:22px;accent-color:#e0a800}
.loader{margin:auto;font:900 20px var(--display);color:var(--ink);animation:pulse 1.2s infinite}
.toast{position:fixed;left:50%;top:calc(var(--top) + 54px);transform:translateX(-50%);background:var(--paper);border:3px solid var(--edge);border-radius:10px;padding:9px 13px;font:600 14px var(--body);max-width:88vw;box-shadow:0 4px 0 var(--edge);z-index:9}
.mini.off{opacity:.55;text-decoration:line-through}