/* ВВВВ · экран ведущего. Проекционная поверхность, не страница витрины:
   тёмное поле, крупная типографика, всё читается с последнего ряда.
   Правило страничное — на остальной портал не влияет.

   Гарнитура одна, Inter: демо-эталон просил Unbounded и Golos Text, но канон 02
   держит одно семейство, а строгий CSP не пустил бы внешние шрифты вовсе.
   Вес и разрядка добирают то, что в демо давал дисплейный шрифт. */

#app.vvvv{
  --ground:#0B1430;
  --panel:#16244C;
  --line:rgba(242,244,250,.14);
  --paper-ink:#F2F4FA;
  --dim:#8A90A6;
  --hot:var(--color-cta, #e67b19);
  --rail-h:clamp(2.4rem, 4.5vh, 3.6rem);

  position:relative; z-index:1;
  min-height:100dvh;
  display:grid; grid-template-rows:var(--rail-h) 1fr auto;
  background:var(--ground); color:var(--paper-ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
#app.vvvv *{ box-sizing:border-box }
#app.vvvv button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
#app.vvvv :focus-visible{ outline:2px solid var(--hot); outline-offset:3px }

/* ---------- верхняя рейка ---------- */
#app.vvvv .rail{
  display:flex; align-items:center; gap:1.25rem;
  padding:0 clamp(1rem,3vw,2.5rem); border-bottom:1px solid var(--line);
  font-size:clamp(.7rem,1.15vh,.86rem); letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); font-weight:500;
}
#app.vvvv .rail .mark{ font-weight:800; letter-spacing:.28em; color:var(--paper-ink) }
#app.vvvv .rail .sep{ flex:1 }
#app.vvvv .rail .topic{ color:var(--hot); letter-spacing:.14em }
#app.vvvv .rail .back{ color:var(--dim); text-decoration:none; letter-spacing:.12em }
#app.vvvv .rail .back:hover{ color:var(--paper-ink) }

/* ---------- сцена ---------- */
#app.vvvv .stage{
  position:relative; display:grid; place-items:center; min-height:0;
  padding:clamp(1rem,4vh,3rem) clamp(1.25rem,5vw,4rem);
}
#app.vvvv .scr{
  display:none; width:100%; max-width:min(1500px,92vw); text-align:center;
  animation:vvvv-in .28s ease both;
}
#app.vvvv .scr.on{ display:block }
@keyframes vvvv-in{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ #app.vvvv .scr{ animation:none } }

#app.vvvv .eyebrow{
  font-size:clamp(.66rem,1.2vh,.8rem); letter-spacing:.3em; text-transform:uppercase;
  color:var(--dim); margin:0 0 clamp(1rem,3vh,2rem); font-weight:600;
}
#app.vvvv .title{
  font-size:clamp(2.6rem,7vw,5.4rem); font-weight:800; letter-spacing:.22em;
  line-height:1; margin:0 0 clamp(.6rem,2vh,1.2rem);
}
#app.vvvv .lead{ font-size:clamp(1rem,2.2vh,1.5rem); color:var(--hot); margin:0 0 1rem; font-weight:600 }
#app.vvvv .intro{
  max-width:64ch; margin:0 auto clamp(1.4rem,4vh,2.4rem);
  color:var(--dim); line-height:1.6; font-size:clamp(.92rem,1.8vh,1.1rem);
}
#app.vvvv .q{
  font-size:clamp(1.9rem,5.4vw,4.6rem); line-height:1.12; font-weight:700;
  letter-spacing:-.015em; text-wrap:balance; max-width:20ch; margin:0 auto;
}
#app.vvvv .q.sm{ font-size:clamp(1.1rem,2.6vw,1.9rem); max-width:34ch }
#app.vvvv .hint{
  margin-top:clamp(1.2rem,3.5vh,2.6rem); color:var(--dim);
  font-size:clamp(.95rem,1.9vh,1.35rem); line-height:1.5;
}

/* ---------- таймер ---------- */
#app.vvvv .tw{ margin-top:clamp(2rem,6vh,4rem) }
#app.vvvv .timer{ display:flex; align-items:center; justify-content:center; gap:1rem }
#app.vvvv .timer .num{
  font-weight:800; font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,5vh,3.4rem); line-height:1; color:var(--dim); transition:color .3s;
}
#app.vvvv .timer.low .num{ color:var(--hot) }
#app.vvvv .bar{ height:3px; background:var(--line); margin:1rem auto 0; max-width:min(720px,70vw) }
#app.vvvv .bar i{ display:block; height:100%; background:var(--hot); transform-origin:left; transition:transform 1s linear }

/* ---------- настройка ---------- */
#app.vvvv .setup{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1rem,3vw,2.5rem); text-align:left; max-width:900px; margin:0 auto }
#app.vvvv .lbl{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin:0 0 .6rem; font-weight:600 }
#app.vvvv .lbl.mt{ margin-top:clamp(1.4rem,4vh,2.4rem); text-align:left; max-width:900px; margin-inline:auto }
#app.vvvv .row{ display:flex; gap:.6rem; flex-wrap:wrap }
#app.vvvv .row.center{ justify-content:center; margin-top:1.4rem }
#app.vvvv input[type=text], #app.vvvv input[type=number]{
  font:inherit; padding:.6rem .8rem; border:1px solid var(--line); border-radius:2px;
  background:var(--panel); color:var(--paper-ink); min-width:0;
}
#app.vvvv input[type=text]{ flex:1 1 12rem }
#app.vvvv input[type=number]{ width:5rem }
#app.vvvv .fld{ display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem; color:var(--dim); font-size:.95rem }
#app.vvvv .chk{ display:flex; align-items:center; gap:.6rem; color:var(--dim); font-size:.95rem; margin-bottom:1.2rem; cursor:pointer }
#app.vvvv button:not(.go):not(.chip):not(.pbtn):not(.card){
  padding:.6rem 1rem; border:1px solid var(--line); border-radius:2px; color:var(--dim);
}
#app.vvvv button:not(.go):hover{ color:var(--paper-ink); border-color:var(--paper-ink) }
#app.vvvv .go{
  padding:.75rem 1.6rem; border-radius:2px; background:var(--hot); color:#12203f;
  font-weight:700; letter-spacing:.04em;
}
#app.vvvv .go:hover{ filter:brightness(1.08) }

#app.vvvv .plist{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; justify-content:center }
#app.vvvv .pbtn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem;
  border:1px solid var(--line); border-radius:2px; color:var(--paper-ink);
}
#app.vvvv .pbtn .k{ font-size:.68rem; color:var(--dim); font-variant-numeric:tabular-nums }
#app.vvvv .pbtn.now{ border-color:var(--hot); color:var(--hot) }

#app.vvvv .groups{ display:grid; gap:1rem; max-width:900px; margin:0 auto; text-align:left }
#app.vvvv .gl{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:.4rem }
#app.vvvv .chips{ display:flex; gap:.4rem; flex-wrap:wrap }
#app.vvvv .chip{
  padding:.35rem .7rem; border:1px solid var(--line); border-radius:2px;
  font-size:.85rem; color:var(--dim);
}
#app.vvvv .chip[aria-pressed="true"]{ border-color:var(--hot); color:var(--paper-ink) }

#app.vvvv .cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
#app.vvvv .card{
  display:grid; gap:.6rem; padding:1.4rem; text-align:left;
  border:1px solid var(--line); border-radius:2px; background:var(--panel);
}
#app.vvvv .card:hover{ border-color:var(--hot) }
#app.vvvv .card .n{ font-size:.7rem; letter-spacing:.2em; color:var(--dim) }
#app.vvvv .card .t{ font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.3; font-weight:600 }
#app.vvvv .card .c{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--hot) }

#app.vvvv .keys{
  margin-top:clamp(1.4rem,4vh,2.4rem); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}

/* ---------- счёт ---------- */
#app.vvvv .board{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.7rem clamp(1rem,3vw,2.5rem); border-top:1px solid var(--line);
}
#app.vvvv .blbl{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim) }
#app.vvvv .blist{ display:flex; gap:1.2rem; flex-wrap:wrap }
#app.vvvv .sc{ display:flex; align-items:baseline; gap:.45rem; color:var(--dim) }
#app.vvvv .sc.lead{ color:var(--hot) }
#app.vvvv .sc .pt{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--paper-ink) }

@media (max-width:640px){
  #app.vvvv .rail{ gap:.7rem; font-size:.62rem }
  #app.vvvv .rail .back{ display:none }
}