/* Сила крика — экран для телевизора Full HD (1920×1080, горизонтальный).
   Все размеры в vh/vmin, чтобы картинка одинаково собиралась на любом экране. */

:root{
  --bg:#070b18;
  --accent:#3b82f6;
  --ink:#eef2ff;
  font-size:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;cursor:none}
body.cursor{cursor:default}

.stage{position:relative;width:100vw;height:100vh;overflow:hidden;
  background:radial-gradient(120vh 90vh at 50% 42%, #16203c 0%, #070b18 70%)}

/* «Жидкость», которая заливает экран снизу по силе крика */
.fill{position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 0%, transparent) 0%,
                                    color-mix(in srgb, var(--accent) 45%, transparent) 55%,
                                    color-mix(in srgb, var(--accent) 75%, transparent) 100%);
  box-shadow:0 -2vh 12vh color-mix(in srgb, var(--accent) 55%, transparent);
  transition:background .35s ease, box-shadow .35s ease;
  will-change:height}
.fill::before{content:'';position:absolute;left:0;right:0;top:-1.2vh;height:1.2vh;
  background:var(--accent);filter:blur(.4vh);opacity:.9}

.fx{position:absolute;inset:0;pointer-events:none}

/* Шапка */
.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding:3.2vh 4vh;z-index:5;letter-spacing:.28vh}
.brand{display:flex;align-items:center;gap:1.4vh;font-weight:800;font-size:2.4vh;opacity:.85}
.brand .dot{width:1.3vh;height:1.3vh;border-radius:50%;background:var(--accent);
  box-shadow:0 0 2vh var(--accent);animation:pulse 2s infinite}
.record{font-size:2.2vh;opacity:.7;font-weight:600}
.record b{font-size:3vh;color:var(--accent);margin-left:.8vh}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Экраны-состояния */
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;z-index:4;text-align:center}
.state-idle .screen-idle,
.state-count .screen-count,
.state-live .screen-live,
.state-result .screen-result{display:flex;animation:in .45s ease both}
@keyframes in{from{opacity:0;transform:translateY(2vh) scale(.98)}to{opacity:1;transform:none}}

.huge{font-size:20vh;font-weight:900;line-height:.95;letter-spacing:-.6vh;
  text-shadow:0 0 8vh rgba(59,130,246,.55)}
.huge .excl{color:var(--accent);display:inline-block;animation:tilt 1.6s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg) scale(1.12)}}
.sub{margin-top:2.4vh;font-size:3vh;font-weight:600;opacity:.62;letter-spacing:.2vh}
.sub.small{font-size:2.2vh;margin-top:4vh;opacity:.45}
.sub.shout{margin-top:3.5vh;font-size:4.4vh;font-weight:900;color:#fff;opacity:.9;
  animation:shout .5s ease-in-out infinite alternate}
@keyframes shout{from{transform:scale(1)}to{transform:scale(1.06)}}

.mini-meter{margin-top:4.5vh;width:44vh;height:1.4vh;border-radius:1vh;
  background:rgba(255,255,255,.09);overflow:hidden}
.mini-meter i{display:block;height:100%;width:0;background:var(--accent);
  border-radius:1vh;transition:width .08s linear}

.cta{margin-top:5vh;padding:2.2vh 6vh;font:800 3vh/1 inherit;letter-spacing:.4vh;
  color:#04102a;background:var(--accent);border:0;border-radius:99vh;cursor:pointer;
  box-shadow:0 1.5vh 5vh rgba(59,130,246,.45)}
.cta:active{transform:translateY(.4vh)}

.count{font-size:38vh;font-weight:900;line-height:1;color:var(--accent);
  text-shadow:0 0 12vh rgba(59,130,246,.6);animation:cnt .9s ease-out}
@keyframes cnt{from{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}

/* Замер */
.live-wrap{display:flex;align-items:center;gap:7vh}
.score-box{text-align:center;min-width:34vh}
.score{font-size:26vh;font-weight:900;line-height:.9;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:0 0 9vh rgba(255,255,255,.25)}
.score-cap{font-size:2.4vh;letter-spacing:1.2vh;opacity:.5;font-weight:700;margin-top:1vh}

.bar{position:relative;width:11vh;height:56vh;border-radius:6vh;
  background:rgba(0,0,0,.42);border:.4vh solid rgba(255,255,255,.18);overflow:hidden;
  box-shadow:inset 0 0 4vh rgba(0,0,0,.5)}
.bar-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--accent);
  border-radius:6vh;box-shadow:0 0 6vh var(--accent);transition:background .3s}
.bar-peak{position:absolute;left:0;right:0;bottom:0;height:.7vh;background:#fff;opacity:.85;
  box-shadow:0 0 2vh #fff}
.bar-marks{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-evenly}
.bar-marks i{display:block;height:.25vh;background:rgba(255,255,255,.22)}

.timer{margin-top:6vh;width:60vh;height:.9vh;border-radius:1vh;background:rgba(255,255,255,.1);overflow:hidden}
.timer-fill{height:100%;width:100%;background:#fff;opacity:.55}

/* Результат */
.res-emoji{font-size:16vh;line-height:1;animation:pop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pop{from{transform:scale(0) rotate(-25deg)}to{transform:none}}
.res-score{font-size:15vh;font-weight:900;line-height:1;margin-top:1vh;
  font-variant-numeric:tabular-nums;color:var(--accent);text-shadow:0 0 9vh currentColor}
.res-score small{font-size:5vh;opacity:.45;color:var(--ink)}
.res-name{margin-top:1.5vh;font-size:9vh;font-weight:900;letter-spacing:-.2vh;line-height:1}
.res-note{margin-top:2vh;font-size:3.4vh;font-weight:600;opacity:.7}
.res-best{margin-top:2.4vh;font-size:2.6vh;font-weight:800;color:var(--accent);min-height:3vh;
  letter-spacing:.2vh}

/* Лесенка из пяти делений справа */
.ladder{position:absolute;right:4vh;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column-reverse;gap:1.4vh}
.rung{display:flex;align-items:center;justify-content:flex-end;gap:1.6vh;opacity:.28;
  transition:opacity .25s, transform .25s}
.rung .cap{font-size:2vh;font-weight:800;letter-spacing:.15vh;white-space:nowrap}
.rung .box{width:5.5vh;height:3.6vh;border-radius:1vh;background:currentColor;opacity:.35}
.rung.on{opacity:1;transform:translateX(-.8vh)}
.rung.on .box{opacity:1;box-shadow:0 0 3vh currentColor}

.hint{position:absolute;left:0;right:0;bottom:3vh;text-align:center;font-size:2vh;
  opacity:.35;z-index:6}
.debug{position:absolute;left:2vh;bottom:2vh;font:600 1.7vh/1.5 ui-monospace,monospace;
  opacity:.5;z-index:7;display:none;text-align:left}
.debug.on{display:block}

/* Тряска экрана на сильном крике */
.shake{animation:shake .12s linear infinite}
@keyframes shake{
  0%{transform:translate(0,0)} 25%{transform:translate(-.5vh,.3vh)}
  50%{transform:translate(.4vh,-.4vh)} 75%{transform:translate(-.3vh,-.2vh)}
  100%{transform:translate(0,0)}}

/* Ошибка доступа к микрофону */
.state-boot .screen{display:none}
.err{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:2vh;z-index:20;background:rgba(7,11,24,.94);text-align:center;padding:6vh}
.err.on{display:flex}
.err h3{font-size:5vh;font-weight:900}
.err p{font-size:2.6vh;opacity:.7;max-width:110vh}