/* Телефон жюри: устройство как в iOS, цвета и заголовки как на сайте ТШБ. */
:root {
  --bg: #07070f;
  --panel: #14141f;
  --raise: #232334;
  --accent: #ff2d95;
  --accent-fill: #e0157d; /* розовый для кнопок с белым текстом: контраст не ниже 4.5:1 */
  --accent2: #00dcff;
  --text: #ffffff;
  --label2: rgba(235, 235, 245, 0.64);
  --label3: rgba(235, 235, 245, 0.56); /* не тусклее 4.5:1 на тёмном */
  --sep: #2e2e44;
  --seg: #232334;
  --green: #00dcff;
  --red: #ff2d95;
  --display: 'Oswald', 'Inter', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(520px 420px at 100% -6%, rgba(255, 45, 149, 0.2), transparent 70%), var(--bg); /* taste-skill-ignore: фирменное свечение ТШБ */
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: 17px; line-height: 1.35; letter-spacing: -0.02em;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
::selection { background: var(--accent); color: #fff; }
/* заголовки и имя участника: узкий жирный шрифт заглавными, как на сайте ТШБ */
.hero h1, .large-title, .participant, .ok-title, .card h2, .crit-title span {
  font-family: var(--display); text-transform: uppercase; font-weight: 700; letter-spacing: 0;
}
.pink { color: var(--accent); }
input { caret-color: var(--accent); }

#app {
  max-width: 520px; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom));
}
.view.center { min-height: 70vh; display: grid; place-items: center; }
.spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--raise); border-top-color: var(--label2);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.conn {
  position: fixed; color: #fff; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 50; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px; white-space: nowrap;
  background: var(--accent-fill); font-size: 15px; font-weight: 600;
}

/* заголовки */
.brand-mini { font-size: 15px; font-weight: 600; color: var(--label2); }
.hero { margin: 28px 4px 26px; }
.hero h1, .large-title { font-size: 44px; line-height: 1; }
.hero h1 { margin-top: 6px; }
.large-title { margin: 6px 4px 18px; }
.sub { margin-top: 10px; color: var(--label2); font-size: 17px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 4px 14px; min-height: 22px; }
.who { font-size: 15px; font-weight: 600; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muted { color: var(--label2); }
.footnote { margin: 14px 8px 0; font-size: 13px; color: var(--label3); line-height: 1.38; letter-spacing: -0.01em; }

/* сгруппированный список iOS */
.group { background: var(--panel); border-radius: 14px; overflow: hidden; }
.field { display: block; padding: 11px 16px 12px; position: relative; }
.field + .field::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--sep); } /* taste-skill-ignore: разделитель полей формы, как в iOS */
.field span { display: block; font-size: 13px; font-weight: 600; color: var(--label2); }
.field input {
  display: block; width: 100%; margin-top: 3px; padding: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 17px; font-weight: 500; color: var(--text); letter-spacing: -0.02em;
}
.field input::placeholder { color: var(--label3); }
.field:focus-within span { color: var(--accent); }

.btn-primary {
  display: block; width: 100%; height: 54px; margin-top: 16px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: var(--accent-fill); color: #fff;
  font: inherit; font-size: 17px; font-weight: 650; letter-spacing: -0.02em;
  transition: background-color 0.15s, color 0.15s, transform 0.4s var(--spring-pop);
}
.btn-primary:active:not(:disabled) { transform: scale(0.96); background: #c8106d; }
.btn-primary.hurry { background: #00dcff; color: #002a33; }
.btn-primary:disabled { background: var(--raise); color: var(--label3); }
.btn-primary:focus-visible, .score:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.error {
  margin-top: 12px; padding: 12px 16px; border-radius: 12px;
  background: #3a1513; color: #ff8a80; font-size: 15px; font-weight: 600;
}

/* карточки состояний */
.card { background: var(--panel); border-radius: 16px; padding: 28px 20px 24px; text-align: center; }
.card h2 { font-size: 26px; margin: 12px 0 6px; }
.card p { font-size: 16px; }
.icon { display: grid; place-items: center; margin: 0 auto; }
.icon svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.blue { color: var(--accent); }
.icon.red { color: var(--red); }
.icon.orange { color: var(--accent2); }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: var(--raise); font-size: 14px; font-weight: 600;
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

.participant { font-size: 34px; line-height: 1; margin: 14px 0 4px; word-break: break-word; }
.perf-timer { font-size: 76px; font-weight: 650; line-height: 1; letter-spacing: -0.04em; margin: 14px 0 16px; font-variant-numeric: tabular-nums; }
.perf-timer.over { color: var(--red); }
.perf-timer.paused { opacity: 0.5; }
.card .track { margin: 0 6px 16px; }

.track { height: 6px; border-radius: 999px; background: var(--raise); overflow: hidden; }
.track > div { height: 100%; width: 100%; border-radius: 999px; background: #fff; transform-origin: left center; transition: transform 0.25s linear, background-color 0.3s; }
.track.warn > div { background: var(--red); }

/* форма оценки */
.vote-head { padding: 8px 4px 6px; }
.vote-head-top { display: flex; justify-content: space-between; align-items: center; }
.vote-head .label { font-size: 15px; font-weight: 600; color: var(--label2); }
.vote-head .participant { margin: 6px 0 14px; font-size: 38px; }
.timer-num {
  min-width: 72px; padding: 6px 12px; border-radius: 999px; text-align: center;
  background: var(--raise);
  font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums;
  transition: background-color 0.3s;
}
.timer-num.hot { background: var(--accent-fill); color: #fff; }

.crit { background: var(--panel); border-radius: 16px; padding: 16px 14px 14px; margin-top: 12px; }
.crit-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 22px; padding: 0 4px; }
.crit-hint { font-size: 14px; color: var(--label2); margin-top: 3px; padding: 0 4px; letter-spacing: -0.01em; }
.icon.crit-check { margin: 0; color: var(--green); opacity: 0; transform: scale(0.4) rotate(-20deg); transition: opacity 0.2s, transform 0.55s var(--spring-pop); }
.icon.crit-check svg { width: 24px; height: 24px; stroke-width: 2.6; }
.crit.done .crit-check { opacity: 1; transform: none; }

/* сегментный переключатель 0–3 */
.scores {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin-top: 14px; padding: 3px; border-radius: 12px; background: var(--seg);
}
/* подсветка выбранной цифры переезжает с пружинкой, как переключатель в iOS */
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 12px) / 4);
  border-radius: 10px; background: var(--accent-fill); opacity: 0;
  transform: translateX(calc(var(--i, 0) * (100% + 2px)));
  transition: transform 0.5s var(--spring-pop), opacity 0.15s;
}
.scores.has .seg-thumb { opacity: 1; }
.crit.k-relevance .seg-thumb { background: #e0157d; }
.crit.k-applicability .seg-thumb { background: #00dcff; }
.crit.k-humor .seg-thumb { background: #8f5cff; }
/* заполненный критерий подсвечивается неоном своего цвета, как карточки на сайте ТШБ */
.crit { transition: box-shadow 0.4s var(--ease-out); }
.crit.k-relevance.done { box-shadow: 0 0 0 1.5px rgba(255, 45, 149, 0.7), 0 0 26px rgba(255, 45, 149, 0.22); } /* taste-skill-ignore: неон критерия */
.crit.k-applicability.done { box-shadow: 0 0 0 1.5px rgba(0, 220, 255, 0.7), 0 0 26px rgba(0, 220, 255, 0.2); } /* taste-skill-ignore: неон критерия */
.crit.k-humor.done { box-shadow: 0 0 0 1.5px rgba(143, 92, 255, 0.75), 0 0 26px rgba(143, 92, 255, 0.24); } /* taste-skill-ignore: неон критерия */
.score {
  position: relative; z-index: 1;
  height: 52px; border: 0; border-radius: 10px; cursor: pointer; touch-action: manipulation;
  background: transparent; color: var(--text);
  font: inherit; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums;
  transition: color 0.2s, transform 0.35s var(--spring-pop);
}
.score:active { transform: scale(0.9); }
.score.on { color: #fff; }
/* у каждого критерия свой цвет, как его кольцо на большом экране */
.crit.k-applicability .score.on { color: #002a33; }

/* единственная «плавающая» панель — с размытием, как нижняя панель в iOS */
.submit-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 20, 0.86);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); /* taste-skill-ignore: единственная липкая панель */
}
.submit-bar .btn-primary { max-width: 488px; margin: 0 auto; }

.timeup-note { display: none; }
.vote-form.timeup .timeup-note { display: block; margin-top: 16px; text-align: center; font-weight: 650; color: var(--red); }
.vote-form.timeup .score { opacity: 0.35; }

/* смена состояния: карточка мягко поднимается */
.card, .accepted { animation: riseIn 0.7s var(--spring-soft); }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } }

/* голос принят */
.accepted { text-align: center; padding-top: 22px; }
.icon.check { width: 88px; height: 88px; border-radius: 50%; background: var(--accent-fill); color: #fff; animation: arrive 0.75s var(--spring-pop); }
.icon.check svg { width: 50px; height: 50px; stroke-width: 2.6; }
@keyframes arrive { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
.ok-title { margin-top: 18px; font-size: 44px; line-height: 1; }
.ok-name { margin-top: 6px; font-size: 17px; }
.group.list { margin-top: 24px; text-align: left; }
.list-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; position: relative; }
.list-row + .list-row::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--sep); } /* taste-skill-ignore: разделитель строк списка, как в «Настройках» iOS */
.list-row b { font-weight: 650; font-variant-numeric: tabular-nums; }
.list-row.total { font-weight: 700; }
.accepted .footnote { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .icon.check { animation: fadeIn 0.2s; }
  @keyframes fadeIn { from { opacity: 0; } }
  .score, .btn-primary, .icon.crit-check { transition-property: background-color, color, opacity; }
  .seg-thumb { transition: opacity 0.15s; }
  .card, .accepted { animation: fadeIn 0.2s; }
  .spinner { animation-duration: 1.6s; }
}