/* Срез v0 — на токенах каркаса brief/style.html и утверждённом макете
   gates/004-v0-verticalnyj-srez/design-gate/mockup.css (канон раскладки).
   Все значения — только из закрытых наборов (правило 4); две высоты 44/52. */
:root{
  --bg-0:#1a0620; --bg-1:#2a0a33; --bg-2:#3a1044;
  --bg-glass:rgba(58,16,68,.55);
  --stroke:rgba(255,255,255,.10); --stroke-bright:rgba(255,255,255,.22);
  --crystal-raspberry:#E91E63; --crystal-orange:#EC610A; --crystal-violet:#8E24FF;
  --crystal-yellow:#FFC300; --crystal-teal:#12D6C6; --crystal-green:#3FD152;
  --ink:#FFF3F8; --ink-dim:#D3A9C4; --ink-faint:#9A7690;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --r-2:8px; --r-3:12px; --r-4:18px; --r-pill:999px;
  --glow-raspberry:0 0 18px rgba(233,30,99,.65);
  --shadow-card:0 10px 30px rgba(0,0,0,.45);
  --font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --h-row:44px;   /* строчные контролы */
  --h-cta:52px;   /* транспорт/CTA */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:radial-gradient(1200px 800px at 50% -10%,var(--bg-1) 0%,transparent 60%),var(--bg-0);
  height:100vh; display:flex; flex-direction:column; overflow:hidden;
}
.version{position:fixed; top:var(--sp-2); left:var(--sp-3); z-index:20;
  font-size:12px; letter-spacing:.4px; color:var(--ink-faint)}

/* ——— экраны: ровно один виден ——— */
.screen{display:none; flex:1; min-height:0; flex-direction:column}
.screen.on{display:flex}
.screen.center{align-items:center; justify-content:center; gap:var(--sp-6);
  padding:var(--sp-6); text-align:center}
.center h1{margin:0; font-size:34px; letter-spacing:.5px}
.center .sub{margin:0; color:var(--ink-dim); max-width:36ch; line-height:1.5}

/* ——— шапка цели ——— */
.goalbar{display:flex; align-items:center; gap:var(--sp-3); height:var(--h-row);
  margin:var(--sp-6) var(--sp-3) 0; padding:0 var(--sp-4); flex-shrink:0;
  background:var(--bg-1); border:1px solid var(--stroke); border-radius:var(--r-4)}
.goalbar .goal{display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; min-width:max-content}
.goalbar .goal .dot{width:16px; height:16px; border-radius:4px; flex-shrink:0}
.goalbar .goal b{color:var(--ink)}
.goalbar .track{flex:1; height:8px; border-radius:var(--r-pill);
  background:var(--bg-2); overflow:hidden; min-width:40px}
.goalbar .track > i{display:block; height:100%; width:0; border-radius:var(--r-pill)}
.goalbar .limit{display:flex; align-items:center; gap:var(--sp-1); flex-shrink:0;
  min-width:max-content; color:var(--ink-dim); font-size:14px}

/* ——— присутствие + суперудары напарника ——— */
.partner{display:flex; align-items:center; gap:var(--sp-2); height:var(--h-row);
  margin:var(--sp-2) var(--sp-3) 0; padding:0 var(--sp-3); flex-shrink:0;
  background:var(--bg-glass); border:1px solid var(--stroke); border-radius:var(--r-4)}
.partner .who{display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; min-width:max-content}
.partner .ava{width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--crystal-violet); border:1px solid var(--stroke-bright); flex-shrink:0}
.partner .name{font-size:14px; color:var(--ink)}
.partner .mini{display:flex; gap:var(--sp-1); flex-shrink:0}
/* Каждая мини-шкала — стабильный класс .pip (структурная группа для аудита);
   «горячее» состояние ДОБАВЛЯЕТ .hot, а не подменяет базовый класс (правило 7 по
   духу: активность — свечением, набор классов не «дробит» ряд). */
.partner .mini .pip{width:16px; height:16px; border-radius:4px; opacity:.35}
.partner .mini .pip.hot{opacity:1; box-shadow:0 0 8px currentColor}

/* ——— поле (canvas; размер считает JS под доступную высоту) ——— */
.boardwrap{flex:1; display:flex; align-items:center; justify-content:center;
  min-height:0; padding:var(--sp-3)}
#board{background:var(--bg-1); border:1px solid var(--stroke);
  border-radius:var(--r-3); touch-action:none; display:block}

/* ——— мои шкалы ——— */
.energy{display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center;
  padding:var(--sp-2) var(--sp-3); flex-shrink:0}
.bar{position:relative; height:var(--h-row); flex-shrink:0; min-width:max-content;
  padding:0 var(--sp-4); border-radius:var(--r-4); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--stroke); color:var(--ink);
  font-family:var(--font); display:flex; align-items:center; font-size:14px; cursor:default}
.bar > i{position:absolute; left:0; top:0; bottom:0; width:0; opacity:.55}
.bar > span{position:relative}
.bar.ready{border-color:var(--ink); box-shadow:0 0 16px currentColor; font-weight:700; cursor:pointer}
/* Всегда видимая цветная база — чтобы контрол читался как ШКАЛА-метр даже на нуле
   (О4/Р7), а не как цветной чип. currentColor задаёт JS по цвету кристалла. */
.bar::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:currentColor; opacity:.4}

.hint{flex-shrink:0; text-align:center; padding:0 var(--sp-4) var(--sp-3);
  font-size:13px; color:var(--ink-faint); min-height:calc(13px + var(--sp-3))}

/* ——— экран входа ——— */
.presence{display:flex; align-items:center; gap:var(--sp-3); height:var(--h-row);
  padding:0 var(--sp-6); background:var(--bg-1); border:1px solid var(--stroke);
  border-radius:var(--r-pill)}
.presence .ava{width:30px;height:30px;border-radius:var(--r-pill);
  background:var(--crystal-violet); border:1px solid var(--stroke-bright)}
.presence .st{width:10px;height:10px;border-radius:var(--r-pill);background:var(--crystal-green)}
.presence .st.off{background:var(--ink-faint)}
.cta{height:var(--h-cta); padding:0 var(--sp-8); border:0; border-radius:var(--r-pill);
  background:var(--crystal-raspberry); color:var(--ink); font:inherit; font-size:17px;
  font-weight:700; box-shadow:var(--glow-raspberry); cursor:pointer}
.cta.ghost{background:transparent; border:1px solid var(--stroke-bright);
  color:var(--ink); box-shadow:none; font-weight:600}
.cta:disabled{background:var(--bg-2); color:var(--ink-faint); box-shadow:none;
  cursor:default; border:1px solid var(--stroke)}

/* ——— экран приза ——— */
.prizegem{width:150px; height:150px; border-radius:40%;
  background:var(--crystal-raspberry); box-shadow:var(--glow-raspberry);
  border:2px solid var(--stroke-bright)}
/* цветная метка у имени приза — привязывает незнакомое слово к цвету (Р6) */
.pdot{display:inline-block; width:14px; height:14px; border-radius:4px;
  vertical-align:middle; margin-right:var(--sp-1)}
.pill{display:inline-flex; align-items:center; gap:var(--sp-2); height:var(--h-row);
  padding:0 var(--sp-4); border-radius:var(--r-pill); background:var(--bg-1);
  border:1px solid var(--stroke); color:var(--ink-dim); font-size:14px}
.pill .ava{width:22px; height:22px; border-radius:var(--r-pill);
  background:var(--crystal-violet); border:1px solid var(--stroke-bright)}

/* Узкий вьюпорт: цель+прогресс+лимит в один ряд не влезают (P3 — текст задаёт
   размер). Перепроектируем РЯД: цель и лимит сверху, трек — своей строкой на всю
   ширину. Не ужимаем контролы. Фикс живёт в media этого вьюпорта; десктоп
   перепроверяется аудитом отдельно. */
@media (max-width:480px){
  .goalbar{flex-wrap:wrap; height:auto; min-height:var(--h-row);
    padding-top:var(--sp-2); padding-bottom:var(--sp-2)}
  .goalbar .goal{order:1}
  .goalbar .limit{order:2; margin-left:auto}
  .goalbar .track{order:3; flex-basis:100%}
}

/* Десктоп: не растягиваем шапки на всю ширину (иначе поле болтается по центру, а
   имя напарника оторвано от его шкал — В1). Собираем игру в центрированную колонку
   по ширине поля: имя+шкалы напарника рядом, срочное (цель/время) у взгляда. */
@media (min-width:900px){
  #screen-game.on{align-self:center; width:100%; max-width:760px}
}