/* Оформление «Телестудия». Подключается после app.css и перекрашивает его. */

@property --sway { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

:root {
  --gold: #ffd678;
  --gold-2: #e0a420;
  --gold-line: rgba(255, 214, 120, 0.45);
  --panel: rgba(0, 0, 0, 0.35);
  --panel-2: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 214, 120, 0.25);
  --muted: #d6cdb4;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* цвет студии: первый раунд — синий */
  --g1: #13296e;
  --g2: #040a22;
  --beam: 255, 236, 190;
}
body.round-2 { --g1: #0b5a43; --g2: #01140f; --beam: 220, 255, 235; }
body.round-3 { --g1: #8a0f2a; --g2: #1c0207; --beam: 255, 220, 190; }
body.round-super { --g1: #4a1670; --g2: #0d0318; --beam: 255, 230, 170; }

body {
  font-family: var(--font-body);
  background-color: var(--g2);
  background-image: radial-gradient(ellipse 120% 80% at 50% 0%, var(--g1), var(--g2) 75%);
  background-attachment: fixed;
}
.wrap, .screen { position: relative; z-index: 1; }

/* ---------- сцена ---------- */
.stage-fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.stage-fx > div { position: absolute; inset: 0; }

/* Прожекторы из двух верхних углов, зеркально, перекрещиваются в центре и плавно качаются */
.stage-beams {
  background:
    conic-gradient(from calc(140deg + var(--sway)) at 0% 0%, transparent 0deg, rgba(var(--beam), .18) 4deg, rgba(var(--beam), .18) 11deg, transparent 15deg),
    conic-gradient(from calc(205deg - var(--sway)) at 100% 0%, transparent 0deg, rgba(var(--beam), .18) 4deg, rgba(var(--beam), .18) 11deg, transparent 15deg),
    conic-gradient(from calc(160deg + var(--sway)) at 0% 0%, transparent 0deg, rgba(var(--beam), .08) 3deg, rgba(var(--beam), .08) 7deg, transparent 10deg),
    conic-gradient(from calc(190deg - var(--sway)) at 100% 0%, transparent 0deg, rgba(var(--beam), .08) 3deg, rgba(var(--beam), .08) 7deg, transparent 10deg);
  -webkit-mask: linear-gradient(#000 40%, transparent 95%);
  mask: linear-gradient(#000 40%, transparent 95%);
  animation: sway 4s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes sway { from { --sway: -6deg; } to { --sway: 6deg; } }

.stage-floor { background: radial-gradient(ellipse 70% 16% at 50% 100%, rgba(255, 214, 120, .30), transparent 70%); }

.star {
  position: absolute; width: var(--size); height: var(--size); opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C11 7 13 9 20 10 C13 11 11 13 10 20 C9 13 7 11 0 10 C7 9 9 7 10 0Z' fill='%23fff3cf'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 220, 140, .9));
  animation: shimmer var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes shimmer {
  0% { opacity: 0; transform: scale(.4) rotate(0deg); }
  12% { opacity: 1; transform: scale(1) rotate(20deg); }
  24% { opacity: 0; transform: scale(.5) rotate(40deg); }
  100% { opacity: 0; transform: scale(.4) rotate(40deg); }
}

.stage-bulbs { animation: blink 1.6s steps(2, jump-none) infinite; }
.stage-bulbs svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(255, 214, 120, .8)); }
.stage-bulbs rect { fill: none; stroke: #fff1c2; stroke-width: 5; stroke-linecap: round; }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .stage-beams, .stage-bulbs, .star { animation: none; }
  .star { opacity: .5; }
}

/* ---------- заголовки и тексты ---------- */
h1, h2, .logo, .round-title {
  font-family: var(--font-display);
  font-weight: 900;
}
.logo, .round-title, h1 {
  background: linear-gradient(180deg, #fff6d8, var(--gold) 55%, var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo { font-size: 40px; }
.logo span { color: inherit; }
.round-title { text-align: center; font-size: 28px; }
.subtitle { color: var(--muted); }
.q-meta { color: var(--gold); letter-spacing: 1px; }
.code-big { font-family: var(--font-display); color: var(--gold); }
.timer, .timer-inline { font-family: var(--font-display); color: var(--gold); }
.timer.urgent { color: #ff7a6a; }

/* ---------- панели ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--gold-line);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.admin-panel { border-color: var(--gold-line); }
.answer-box { background: rgba(11, 93, 52, .55); border: 1px solid var(--gold-line); }
.chip { background: rgba(0, 0, 0, .3); border: 1px solid var(--gold-line); }
.chip-done { background: rgba(11, 93, 52, .7); }
.qr { border: 3px solid var(--gold); }
#toast { background: rgba(10, 6, 2, .9); border: 1px solid var(--gold-line); }

/* ---------- кнопки и поля ---------- */
button, .btn { background: rgba(255, 255, 255, .08); border: 1px solid var(--gold-line); }
.btn-gold { background: linear-gradient(180deg, #ffe6a3, var(--gold-2)); color: #2a1a00; border: 0; }
.btn-ghost { background: transparent; }
.btn-danger { background: rgba(120, 20, 40, .7); }
input[type=text], input[type=number], input:not([type]), textarea, select {
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--gold-line);
}
input:focus, textarea:focus { outline: 2px solid var(--gold); }
.theme-option { background: rgba(0, 0, 0, .3); }
.theme-option input { accent-color: var(--gold-2); }

/* ---------- табло вопросов ---------- */
.board-theme { background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .15); }
.board-cell {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .25));
  border: 1px solid rgba(255, 214, 120, .7);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
}
.board-cell.used { background: transparent; border-color: rgba(255, 214, 120, .15); box-shadow: none; color: transparent; }
.board-cell:not(:disabled):hover { background: linear-gradient(180deg, rgba(255, 214, 120, .25), rgba(0, 0, 0, .2)); }

/* ---------- счёт ---------- */
.score-row { background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 214, 120, .3); }
.score-row .pts { font-family: var(--font-display); color: var(--gold); }
.score-row.me { outline: none; border-color: var(--gold); }
.podium .score-row:first-child { background: linear-gradient(180deg, #ffe6a3, var(--gold-2)); color: #2a1a00; border: 0; }
.podium .score-row:first-child .pts { color: #2a1a00; }

/* ---------- круглая золотая кнопка «Ответить» ---------- */
.buzz {
  width: min(68vw, 280px);
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 1;
  margin: 22px auto 14px;
  border-radius: 50%;
  border: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #2a1a00;
  background: radial-gradient(circle at 50% 35%, #fff0bf, var(--gold) 45%, var(--gold-2));
  box-shadow: 0 0 0 8px rgba(0, 0, 0, .35), 0 0 0 10px rgba(255, 214, 120, .6), 0 10px 40px rgba(255, 200, 80, .35);
}
.buzz:not(:disabled):active { transform: scale(.96); box-shadow: 0 0 0 8px rgba(0, 0, 0, .35), 0 0 0 10px rgba(255, 214, 120, .9), 0 4px 20px rgba(255, 200, 80, .5); }
.buzz.locked, .buzz:disabled {
  color: var(--text);
  font-size: 18px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 8px rgba(0, 0, 0, .35), 0 0 0 10px rgba(255, 214, 120, .25);
}
.buzz .buzz-fill { background: rgba(255, 214, 120, .28); }
.card:has(.media) ~ .buzz { width: min(42vw, 170px); height: auto; min-height: 0; margin-top: 16px; font-size: 18px; }

.read-bar { background: rgba(0, 0, 0, .35); border: 1px solid var(--gold-line); }
.read-bar i { background: rgba(255, 214, 120, .28); }

/* ---------- суперигра ---------- */
.super-theme { background: rgba(0, 0, 0, .35); border: 1px solid var(--gold-line); }
.super-theme:not(:disabled) { outline: none; border: 2px solid var(--gold); }
.super-theme.removed { background: transparent; border: 1px dashed rgba(255, 214, 120, .25); }

/* Выбранная клетка мигает золотом: три раза по полсекунды */
.board-cell.flash, .board-cell.flash:disabled {
  opacity: 1;
  animation: cell-flash .5s steps(1, end) infinite;
}
@keyframes cell-flash {
  0% { background: linear-gradient(180deg, #fff0bf, var(--gold-2)); color: #2a1a00; box-shadow: 0 0 18px rgba(255, 214, 120, .9); }
  50% { background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .25)); color: var(--gold); box-shadow: none; }
}
.board-theme.flash { border-color: var(--gold); color: var(--gold); }
.picked-theme { color: var(--gold); }

/* Приглашение по ссылке */
.share-box { margin-top: 12px; }
.share-url { text-align: center; font-size: 15px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.share-buttons > * { flex: 1 1 120px; }