@import url('assets/fonts/fonts.css');

/* ═══════════════════════════════════════════════════════════════
   Георгий & Алина — Свадебное Колесо Фортуны
   ТЕМА: «CHAMPAGNE & BOTANICAL ROMANCE»
   Тёплый шампань/blush люкс · античное золото · ботанические веточки
   Всё крупное — читается с проектора.
═══════════════════════════════════════════════════════════════ */

/* ─── Базовый сброс ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Шампань / blush палитра ── */
  --champagne-100: #fdf8f1;   /* самый светлый крем */
  --champagne-200: #f8eede;   /* тёплый шампань */
  --champagne-300: #f1e0c9;   /* песочно-шампанский */
  --blush-200:     #f4dcd4;   /* пудровая роза */
  --blush-400:     #e3a79a;   /* терракота-роз */
  --blush-500:     #cf8676;   /* насыщенный blush */
  --wine:          #6e2b3c;   /* глубокий винный/бордо */
  --wine-deep:     #4e1d2a;   /* тёмный бордо для контраста */
  --olive:         #7d8557;   /* ботаническая олива */

  /* ── Золото / бронза ── */
  --gold:          #c19a5b;   /* античное золото */
  --gold-light:    #e2c583;   /* светлое золото (блик) */
  --gold-deep:     #a67c3d;   /* бронза */
  --gold-shine:    #f0dcae;   /* золотой хайлайт */

  /* ── Текст ── */
  --ink:           #4a2f28;   /* тёплый шоколад — основной текст */
  --ink-soft:      #7c5a4e;   /* приглушённый вторичный */
  --ink-gold:      #a07636;   /* золотистый акцент текста */

  /* ── Совместимость со старыми именами переменных ── */
  --coral:      var(--gold);
  --coral-dark: var(--gold-deep);
  --peach:      var(--champagne-300);
  --cream:      var(--champagne-100);
  --white:      #fffdf9;
  --text-dark:  var(--ink);
  --text-mid:   var(--ink-soft);

  --shadow:      rgba(110, 43, 60, 0.16);
  --shadow-soft: rgba(166, 124, 61, 0.20);
  --glow-gold:   rgba(226, 197, 131, 0.55);

  --radius-lg:  22px;
  --radius-md:  14px;
  --radius-sm:  9px;

  --font-serif:   'Cormorant Garamond', 'Georgia', serif;
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-marcellus: 'Marcellus', 'Georgia', serif;
  --font-script:  'Great Vibes', cursive;
  --font-main:    var(--font-serif);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  background: var(--champagne-100);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Общий тёплый ботанический фон для «сценических» экранов */
.warm-bg {
  background:
    radial-gradient(1100px 640px at 78% -12%, rgba(226,197,131,0.42), transparent 62%),
    radial-gradient(900px 560px at 8% 108%, rgba(244,220,212,0.55), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(207,134,118,0.20), transparent 55%),
    linear-gradient(160deg, #fdf8f1 0%, #f8eede 46%, #f1e0c9 100%);
}

/* ─── Экраны ─── */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
  overflow: hidden;
}
.screen.active { opacity: 1; pointer-events: all; }

/* Тонкая золотая ботаническая веточка — переиспользуемый SVG в data-uri */
/* лист оливы */

/* ═══════════════════════════════════════════
   ЭКРАН ЗАГРУЗКИ
═══════════════════════════════════════════ */
#screen-loading {
  background:
    radial-gradient(1100px 700px at 70% -12%, rgba(226,197,131,0.45), transparent 60%),
    radial-gradient(900px 600px at 12% 110%, rgba(244,220,212,0.60), transparent 60%),
    linear-gradient(160deg, #fdf8f1 0%, #f6e8d6 55%, #f0dcc4 100%);
  align-items: center; justify-content: center;
  position: relative;
}
/* ботанические веточки по углам загрузки */
#screen-loading::before,
#screen-loading::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23c19a5b' stroke-width='2.2' stroke-linecap='round'><path d='M40 170 C70 130 110 90 165 45'/><g fill='%23c19a5b' stroke='none'><ellipse cx='70' cy='128' rx='15' ry='7' transform='rotate(-40 70 128)'/><ellipse cx='95' cy='104' rx='16' ry='7.5' transform='rotate(-40 95 104)'/><ellipse cx='120' cy='80' rx='15' ry='7' transform='rotate(-40 120 80)'/><ellipse cx='145' cy='58' rx='13' ry='6' transform='rotate(-40 145 58)'/><ellipse cx='58' cy='146' rx='13' ry='6' transform='rotate(-40 58 146)'/></g></g></svg>");
}
#screen-loading::before { top: 24px; left: 24px; transform: scaleX(1); }
#screen-loading::after  { bottom: 24px; right: 24px; transform: rotate(180deg); }

.loading-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 18px;
  text-align: center;
  position: relative; z-index: 2;
}

.logo-wrap img {
  width: 124px; height: 124px;
  object-fit: contain;
  border-radius: 50%;
  padding: 6px; background: var(--white);
  box-shadow:
    0 0 0 2px var(--gold-light),
    0 0 0 8px rgba(255,253,249,0.9),
    0 14px 44px var(--shadow-soft),
    0 0 60px var(--glow-gold);
}

.clinic-name {
  font-family: var(--font-script);
  font-size: 4.6rem; font-weight: 400;
  color: var(--wine);
  letter-spacing: 1px; line-height: 1;
  text-shadow: 0 2px 10px rgba(193,154,91,0.35);
}

.badge-10 {
  font-family: var(--font-marcellus);
  font-size: 1.35rem; font-weight: 400;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #f0dcae 0%, #c19a5b 48%, #a67c3d 100%);
  color: var(--wine-deep);
  padding: 8px 30px;
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(193,154,91,0.40), inset 0 1px 0 rgba(255,255,255,0.5);
}

.loading-spinner {
  width: 46px; height: 46px;
  border: 5px solid var(--champagne-300);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  box-shadow: 0 0 22px var(--glow-gold);
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
  font-family: var(--font-marcellus);
  font-size: 1.2rem; letter-spacing: 1px;
  color: var(--ink-soft);
}

/* ═══════════════════════════════════════════
   ЭКРАН КОЛЕСА
═══════════════════════════════════════════ */
#screen-wheel {
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(226,197,131,0.40), transparent 60%),
    radial-gradient(900px 560px at -8% 112%, rgba(244,220,212,0.55), transparent 60%),
    radial-gradient(680px 480px at 100% 105%, rgba(207,134,118,0.16), transparent 55%),
    linear-gradient(160deg, #fdf8f1 0%, #f8eede 48%, #f1e0c9 100%);
}

/* Шапка */
.wheel-header {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 40px;
  background: linear-gradient(180deg, #fffdf9 0%, #fbf3e6 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent) 1;
  box-shadow: 0 4px 22px var(--shadow-soft);
  flex-shrink: 0; z-index: 10;
  position: relative;
}

.wheel-header img {
  height: 90px; width: 90px;
  object-fit: contain; border-radius: 50%;
  padding: 4px; background: var(--white);
  box-shadow: 0 0 0 2px var(--gold-light), 0 6px 20px var(--shadow-soft);
}

.wheel-header-title {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; align-items: flex-start;
}

.title-main {
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 400;
  color: var(--wine);
  line-height: 1; letter-spacing: 0.5px;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(193,154,91,0.25);
}
.title-sub {
  font-family: var(--font-marcellus);
  font-size: clamp(0.9rem, 1.25vw, 1.15rem); font-weight: 400;
  color: var(--ink-gold); letter-spacing: 4px; text-transform: uppercase;
  margin-top: 2px;
}

.badge-10-small {
  display: inline-block;
  font-family: var(--font-marcellus);
  font-size: 0.85rem; letter-spacing: 1px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: var(--wine-deep);
  padding: 3px 14px; border-radius: 999px;
  width: fit-content;
}

.wheel-counter {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 700; color: var(--gold-deep);
  text-align: center;
  padding: 6px 20px;
  background: rgba(255,253,249,0.7);
  border: 1.5px solid rgba(193,154,91,0.35);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 14px var(--shadow-soft);
}
.wheel-counter #counter-played { color: var(--wine); }
.wheel-counter .counter-sep    { color: var(--blush-400); font-weight: 400; }
.wheel-counter #counter-total  { color: var(--ink-soft); font-size: 1.5rem; }
.wheel-counter .counter-label  {
  font-family: var(--font-marcellus);
  font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-soft); margin-left: 6px;
}

/* Арена */
.wheel-arena {
  flex: 1; display: flex;
  align-items: center; justify-content: center;
  position: relative;
  padding: 14px;
}
/* ботанический декор по бокам арены */
.wheel-arena::before,
.wheel-arena::after {
  content: "";
  position: absolute; top: 50%;
  width: 150px; height: 300px;
  transform: translateY(-50%);
  background-repeat: no-repeat; background-size: contain; background-position: center;
  opacity: 0.35; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'><g stroke='%23c19a5b' stroke-width='2' fill='none' stroke-linecap='round'><path d='M60 20 C55 90 55 210 60 280'/><g fill='%23bfa05f' stroke='none'><ellipse cx='42' cy='70' rx='18' ry='8' transform='rotate(30 42 70)'/><ellipse cx='78' cy='100' rx='18' ry='8' transform='rotate(-30 78 100)'/><ellipse cx='42' cy='135' rx='18' ry='8' transform='rotate(30 42 135)'/><ellipse cx='78' cy='170' rx='18' ry='8' transform='rotate(-30 78 170)'/><ellipse cx='42' cy='205' rx='18' ry='8' transform='rotate(30 42 205)'/><ellipse cx='78' cy='238' rx='16' ry='7' transform='rotate(-30 78 238)'/></g></g></svg>");
}
.wheel-arena::before { left: 10px; transform: translateY(-50%) scaleX(-1); }
.wheel-arena::after  { right: 10px; }

.wheel-pointer {
  position: absolute; top: 2px; left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  color: var(--wine);
  filter: drop-shadow(0 3px 6px rgba(110,43,60,0.4)) drop-shadow(0 0 10px var(--glow-gold));
  z-index: 6; line-height: 1;
  pointer-events: none; user-select: none;
  text-shadow: 0 0 2px var(--gold-light);
}

#wheel-canvas {
  border-radius: 50%;
  box-shadow:
    0 0 0 8px #fffdf9,
    0 0 0 12px var(--gold-light),
    0 0 0 20px var(--gold-deep),
    0 0 0 22px var(--gold-light),
    0 18px 60px var(--shadow),
    0 0 90px var(--glow-gold);
  display: block;
  background: #fffdf9;
}

/* Кнопки управления */
.wheel-controls {
  display: flex; align-items: center;
  justify-content: center; gap: 22px;
  padding: 18px 28px 26px;
  flex-shrink: 0;
}

.btn-spin {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 18px 60px;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 42%, var(--gold-deep) 100%);
  color: var(--wine-deep);
  border: none; border-radius: var(--radius-lg);
  cursor: pointer;
  box-shadow:
    0 8px 26px rgba(166,124,61,0.45),
    0 0 40px var(--glow-gold),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transition: transform 0.14s, box-shadow 0.14s, opacity 0.2s;
  user-select: none;
}
.btn-spin:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(166,124,61,0.55), 0 0 56px var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-spin:active:not(:disabled) { transform: translateY(0); }
.btn-spin:disabled { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.3); }

.btn-spin-label  { font-size: 2rem; font-weight: 800; letter-spacing: 3px; }
.btn-spin-hint   {
  font-family: var(--font-marcellus);
  font-size: 0.82rem; letter-spacing: 1px; opacity: 0.78;
}

.btn-reset {
  padding: 11px 26px;
  font-family: var(--font-marcellus);
  background: transparent;
  border: 1.8px solid var(--blush-400);
  color: var(--wine);
  border-radius: var(--radius-md);
  font-size: 0.98rem; letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.btn-reset:hover {
  background: linear-gradient(135deg, var(--blush-400), var(--blush-500));
  color: #fffdf9; border-color: var(--blush-500);
}

/* ═══════════════════════════════════════════
   ЭКРАН РУБРИКИ
═══════════════════════════════════════════ */
#screen-rubric {
  background:
    radial-gradient(900px 500px at 90% -10%, rgba(226,197,131,0.28), transparent 60%),
    radial-gradient(800px 480px at 0% 110%, rgba(244,220,212,0.42), transparent 60%),
    linear-gradient(160deg, #fdf8f1 0%, #f8eede 100%);
}

.rubric-header {
  display: flex; align-items: center; gap: 18px;
  padding: 15px 28px;
  background: linear-gradient(180deg, #fffdf9 0%, #fbf3e6 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent) 1;
  box-shadow: 0 4px 20px var(--shadow-soft);
  flex-shrink: 0; z-index: 10;
}

.btn-back {
  padding: 11px 22px;
  font-family: var(--font-marcellus);
  background: var(--champagne-200);
  border: 1.5px solid rgba(193,154,91,0.30);
  border-radius: var(--radius-md);
  font-size: 1.05rem; letter-spacing: 0.5px;
  color: var(--wine);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.btn-back:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--wine-deep); border-color: var(--gold);
}

.rubric-title-wrap {
  display: flex; align-items: center; gap: 12px;
  flex: 1;
}

.rubric-emoji {
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 4px rgba(193,154,91,0.3));
}

.rubric-title {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 700;
  color: var(--wine);
  line-height: 1.2;
}

.slide-counter {
  font-family: var(--font-marcellus);
  font-size: 1.2rem; letter-spacing: 1px;
  color: var(--ink-gold);
  white-space: nowrap;
  min-width: 64px; text-align: right;
  padding: 4px 14px;
  border: 1.4px solid rgba(193,154,91,0.30);
  border-radius: 12px;
  background: rgba(255,253,249,0.6);
}

/* Область слайда */
.slide-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
}

/* Навигация слайдов */
.slide-nav {
  display: flex; align-items: center;
  justify-content: center; gap: 22px;
  padding: 16px 24px 22px;
  flex-shrink: 0;
  background: linear-gradient(0deg, #fffdf9 0%, #fbf3e6 100%);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent) 1;
  box-shadow: 0 -4px 18px var(--shadow-soft);
}

.btn-nav {
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, #fffdf9, #fbf1de);
  color: var(--wine);
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-nav:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--wine-deep);
  box-shadow: 0 6px 20px var(--shadow-soft), 0 0 24px var(--glow-gold);
}
.btn-nav:active { transform: scale(0.92); }
.btn-nav:disabled { opacity: 0.30; cursor: not-allowed; box-shadow: none; }

.btn-reveal {
  padding: 15px 52px;
  font-family: var(--font-display);
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  color: var(--wine-deep);
  border: none; border-radius: var(--radius-lg);
  font-size: 1.45rem; font-weight: 700; letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(166,124,61,0.42), 0 0 34px var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.14s, box-shadow 0.14s;
}
.btn-reveal:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(166,124,61,0.55), 0 0 46px var(--glow-gold); }
.btn-reveal:active { transform: translateY(0); }

/* ─── Слайд: image ─── */
.slide-image {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  max-height: 100%; width: 100%;
}
.slide-image img {
  max-width: 100%; max-height: calc(100vh - 280px);
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 5px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--gold-light), 0 14px 44px var(--shadow), 0 0 40px var(--glow-gold);
}
.slide-label {
  font-family: var(--font-serif);
  font-size: 1.7rem; font-weight: 600;
  color: var(--wine); text-align: center;
  letter-spacing: 0.3px;
}

/* ─── Слайд: pairs ─── */
.slide-pairs {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  width: 100%;
}
.pairs-images {
  display: flex; gap: 32px;
  align-items: flex-start; justify-content: center;
  flex-wrap: wrap; width: 100%;
}
.pair-box {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  flex: 1; min-width: 220px; max-width: 440px;
}
.pair-box img {
  width: 100%; max-height: calc((100vh - 320px) / 1.2);
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 5px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--gold-light), 0 10px 32px var(--shadow);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.pair-box img:hover {
  transform: scale(1.02);
  box-shadow: 0 0 0 2px var(--gold), 0 14px 40px var(--shadow), 0 0 34px var(--glow-gold);
}
.pair-caption {
  font-family: var(--font-marcellus);
  font-size: 1.15rem; letter-spacing: 1px;
  color: var(--ink-gold);
}
.pair-box.after-hidden { display: none; }
.pair-box.before-solo img { max-height: calc(100vh - 280px); }

/* ─── Слайд: quiz ─── */
.slide-quiz {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  width: 100%;
}
.quiz-image-wrap {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  width: 100%;
}
.quiz-image-wrap img {
  max-width: 100%; max-height: calc(100vh - 300px);
  object-fit: contain;
  border-radius: var(--radius-lg);
  border: 5px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--gold-light), 0 14px 44px var(--shadow), 0 0 40px var(--glow-gold);
}

/* ─── Слайд: videos ─── */
.slide-video {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  width: 100%;
}
.slide-video video {
  max-width: 100%; max-height: calc(100vh - 280px);
  border-radius: var(--radius-lg);
  border: 5px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--gold-light), 0 14px 44px var(--shadow);
  background: #2a1c1c;
}

/* ─── Слайд: todo (заглушка) ─── */
.slide-todo {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px; text-align: center;
  width: 100%; height: 100%;
}
.todo-emoji {
  font-size: 5.2rem;
  filter: drop-shadow(0 4px 10px rgba(193,154,91,0.35));
}
.todo-title {
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 700;
  color: var(--wine);
}
.todo-sub {
  font-family: var(--font-serif);
  font-size: 1.35rem; font-weight: 500; color: var(--ink);
  max-width: 640px; line-height: 1.55;
}
.todo-badge {
  margin-top: 8px;
  font-family: var(--font-marcellus);
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(226,197,131,0.20);
  border: 1.4px solid rgba(193,154,91,0.40);
  border-radius: 999px; padding: 7px 20px;
}

/* ─── Reveal анимация ─── */
@keyframes revealFade {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.reveal-anim { animation: revealFade 0.4s ease; }

/* ─── Переход между экранами ─── */
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen.active { animation: screenIn 0.42s ease; }

/* ═══════════════════════════════════════════
   ЭКРАН КОНЦА ИГРЫ
═══════════════════════════════════════════ */
#screen-gameover {
  background:
    radial-gradient(1100px 700px at 50% -12%, rgba(226,197,131,0.48), transparent 60%),
    radial-gradient(800px 560px at 12% 112%, rgba(244,220,212,0.55), transparent 60%),
    radial-gradient(760px 520px at 90% 105%, rgba(207,134,118,0.20), transparent 55%),
    linear-gradient(160deg, #fdf8f1 0%, #f6e8d6 55%, #f0dcc4 100%);
  align-items: center; justify-content: center;
  position: relative;
}
#screen-gameover::before,
#screen-gameover::after {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  background-repeat: no-repeat; background-size: contain;
  opacity: 0.5; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23c19a5b' stroke-width='2.2' stroke-linecap='round'><path d='M40 170 C70 130 110 90 165 45'/><g fill='%23c19a5b' stroke='none'><ellipse cx='70' cy='128' rx='15' ry='7' transform='rotate(-40 70 128)'/><ellipse cx='95' cy='104' rx='16' ry='7.5' transform='rotate(-40 95 104)'/><ellipse cx='120' cy='80' rx='15' ry='7' transform='rotate(-40 120 80)'/><ellipse cx='145' cy='58' rx='13' ry='6' transform='rotate(-40 145 58)'/><ellipse cx='58' cy='146' rx='13' ry='6' transform='rotate(-40 58 146)'/></g></g></svg>");
}
#screen-gameover::before { top: 26px; left: 26px; }
#screen-gameover::after  { bottom: 26px; right: 26px; transform: rotate(180deg); }

.gameover-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 22px;
  text-align: center; padding: 44px;
  position: relative; z-index: 2;
}
.gameover-inner img {
  width: 112px; height: 112px;
  object-fit: contain; border-radius: 50%;
  padding: 5px; background: var(--white);
  box-shadow: 0 0 0 2px var(--gold-light), 0 12px 40px var(--shadow-soft), 0 0 56px var(--glow-gold);
}
.gameover-emoji {
  font-size: 5.2rem;
  filter: drop-shadow(0 4px 10px rgba(193,154,91,0.35));
}
.gameover-title {
  font-family: var(--font-script);
  font-size: 4rem; font-weight: 400;
  color: var(--wine);
  text-shadow: 0 2px 12px rgba(193,154,91,0.30);
}
.gameover-sub {
  font-family: var(--font-serif);
  font-size: 1.6rem; font-weight: 500; color: var(--ink-soft);
  max-width: 540px; line-height: 1.5;
}

/* ═══════════════════════════════════════════
   Scroll-bar внутри slide-area
═══════════════════════════════════════════ */
.slide-area::-webkit-scrollbar { width: 9px; }
.slide-area::-webkit-scrollbar-track { background: var(--champagne-200); border-radius: 5px; }
.slide-area::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius: 5px;
}

/* ═══════════════════════════════════════════
   Адаптивность
═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .title-main    { font-size: 2rem; }
  .rubric-title  { font-size: 1.4rem; }
  .btn-spin-label{ font-size: 1.5rem; }
  .wheel-counter { font-size: 1.5rem; }
  .clinic-name   { font-size: 3.2rem; }
  .gameover-title{ font-size: 2.8rem; }
  .wheel-arena::before, .wheel-arena::after { display: none; }
}

/* ─── Викторина с вариантами (type: choice) ─── */
.slide-choice {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; width: 100%; max-width: 780px; margin: 0 auto;
}
.choice-photo img {
  width: auto; max-width: min(90vw, 460px); max-height: 300px; object-fit: contain;
  border-radius: 20px;
  border: 5px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--gold-light), 0 10px 30px var(--shadow), 0 0 32px var(--glow-gold);
}
.choice-question {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.5vw, 32px); font-weight: 700;
  color: var(--wine); text-align: center; line-height: 1.25;
}
.choice-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%;
}
.choice-opt {
  padding: 19px 22px;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.7vw, 21px); font-weight: 600;
  background: linear-gradient(180deg, #fffdf9, #fbf1de);
  color: var(--ink);
  border: 1.8px solid rgba(193,154,91,0.35);
  border-radius: 15px; cursor: pointer;
  transition: all .16s; text-align: left;
  box-shadow: 0 3px 12px var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.6);
}
.choice-opt:hover:not(:disabled) {
  background: linear-gradient(135deg, #fdf3e0, #f6e6cb);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-soft), 0 0 22px var(--glow-gold);
}
.choice-opt:disabled { cursor: default; opacity: .96; }
.choice-opt.correct {
  background: linear-gradient(135deg, #e5f0dd, #d4e6c4);
  border-color: #6f8f4e; color: #3a5222; font-weight: 700;
  box-shadow: 0 4px 16px rgba(111,143,78,0.3);
}
.choice-opt.wrong {
  background: linear-gradient(135deg, #f4dcd9, #ecc4c0);
  border-color: var(--wine); color: var(--wine-deep);
  text-decoration: line-through;
  box-shadow: 0 4px 16px rgba(110,43,60,0.22);
}
.choice-result {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.7vw, 34px); font-weight: 800; min-height: 1em;
}
.choice-result.res-ok { color: #4d6a2e; }
.choice-result.res-no { color: var(--wine); }
.choice-video video, .choice-video img {
  width: 100%; max-width: 520px; border-radius: 18px;
  object-fit: contain;
  border: 5px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--gold-light), 0 10px 30px var(--shadow);
}
@media (max-width: 640px) { .choice-options { grid-template-columns: 1fr; } }

/* видео-вопрос/ответ в quiz */
.quiz-image-wrap video {
  max-width: 100%; max-height: calc(100vh - 300px);
  object-fit: contain; border-radius: var(--radius-lg);
  border: 5px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--gold-light), 0 14px 44px var(--shadow); background: #2a1c1c;
}

/* ─── Кнопка «на весь экран» ─── */
.btn-fullscreen {
  position: fixed; bottom: 18px; right: 18px; z-index: 1000;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(180deg, #fffdf9, #fbf1de);
  color: var(--gold-deep);
  border: 2px solid var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px var(--shadow-soft), 0 0 24px var(--glow-gold);
  transition: transform .16s, background .16s, color .16s;
}
.btn-fullscreen:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--wine-deep); transform: scale(1.08);
}
:fullscreen .btn-fullscreen { background: rgba(78,29,42,0.55); color: var(--gold-light); border-color: var(--gold-light); }

/* ─── Quiz revealed ─── */
.slide-quiz.quiz-revealed {
  flex-direction: row; flex-wrap: wrap;
  align-items: flex-start; justify-content: center; gap: 26px;
}
.slide-quiz.quiz-revealed .quiz-image-wrap { flex: 1; min-width: 280px; max-width: 48%; }
.slide-quiz.quiz-revealed .quiz-image-wrap img,
.slide-quiz.quiz-revealed .quiz-image-wrap video { max-height: calc(100vh - 320px); }
@media (max-width: 700px) {
  .slide-quiz.quiz-revealed .quiz-image-wrap { max-width: 100%; }
}

/* ─── Кнопка «горячие клавиши» + памятка ─── */
.btn-hotkeys{
  position:fixed; bottom:18px; right:86px; z-index:1000;
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(180deg, #fffdf9, #fbf1de);
  color:var(--gold-deep);
  border:2px solid var(--gold); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px var(--shadow-soft), 0 0 24px var(--glow-gold);
  transition:transform .16s, background .16s, color .16s;
}
.btn-hotkeys:hover{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:var(--wine-deep); transform:scale(1.08);
}
:fullscreen .btn-hotkeys{ background:rgba(78,29,42,0.55); color:var(--gold-light); border-color:var(--gold-light); }

.hotkeys-overlay{
  display:none; position:fixed; inset:0; z-index:1100;
  background:rgba(78,29,42,0.42);
  backdrop-filter: blur(4px);
  align-items:center; justify-content:center; padding:5vh 4vw;
}
.hotkeys-overlay.active{ display:flex; }
.hotkeys-card{
  background: linear-gradient(180deg, #fffdf9 0%, #fbf3e6 100%);
  border:1.5px solid rgba(193,154,91,0.45); border-radius:24px;
  padding:30px 34px; max-width:480px; width:100%;
  box-shadow:0 22px 60px var(--shadow), 0 0 60px var(--glow-gold); text-align:left;
}
.hotkeys-title{
  font-family: var(--font-display);
  font-size:1.7rem; font-weight:800; color:var(--wine);
  margin-bottom:18px; text-align:center;
}
.hotkeys-list{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:14px; }
.hotkeys-list li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hotkeys-list kbd{
  background: linear-gradient(180deg, #fbf1de, #f1e0c9);
  border:1px solid var(--gold); border-bottom-width:2.5px; border-radius:7px;
  padding:3px 11px;
  font-family:var(--font-marcellus); font-weight:400; font-size:1rem; color:var(--gold-deep);
}
.hotkeys-list span{
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color:var(--ink-soft); margin-left:4px;
}
.hotkeys-close{
  display:block; width:100%; padding:14px; border:none; border-radius:14px; cursor:pointer;
  font-family: var(--font-display);
  background:linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-deep));
  color:var(--wine-deep); font-weight:700; font-size:1.15rem; letter-spacing:1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 14px rgba(166,124,61,0.35);
}

/* Шоу талантов: видео крупно */
.choice-media { display:flex; justify-content:center; width:100%; }
.choice-video video, .choice-video img {
  width: 100%; max-width: 680px; max-height: calc(100vh - 360px);
  object-fit: contain;
  border-radius: 18px; background:#2a1c1c;
}
.slide-choice.choice-answered .choice-video video,
.slide-choice.choice-answered .choice-video img { max-height: calc(100vh - 250px); }
.slide-choice.choice-answered .choice-question { font-size: clamp(17px,1.9vw,23px); opacity:.9; }

/* ─── «Что будет дальше» (type: next) ─── */
.slide-next { display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }
.slide-next video {
  max-width:100%; max-height: calc(100vh - 300px);
  border-radius: var(--radius-lg);
  border: 5px solid #fffdf9;
  box-shadow: 0 0 0 2px var(--gold-light), 0 14px 44px var(--shadow); background:#2a1c1c;
}
.next-hint {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.3vw, 30px); font-weight: 700; color: var(--wine);
  text-align:center; letter-spacing: 0.3px;
}

/* ═══════════════════════════════════════════
   СВАДЕБНЫЙ ФОН-КАРТИНКА НА ВЕСЬ КОНКУРС
   (фото просвечивает сквозь полупрозрачные вуали экранов)
═══════════════════════════════════════════ */
html, body { background: transparent; }
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:url('assets/bg/bg.png') center center / cover no-repeat;
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(1400px 900px at 50% 42%, rgba(253,248,241,0.08), rgba(248,236,214,0.30) 68%, rgba(238,220,192,0.50) 100%);
}
#screen-loading, #screen-gameover{
  background:
    radial-gradient(1000px 640px at 72% -10%, rgba(226,197,131,0.30), transparent 60%),
    radial-gradient(820px 560px at 12% 110%, rgba(244,220,212,0.34), transparent 60%),
    linear-gradient(160deg, rgba(253,248,241,0.62) 0%, rgba(246,232,214,0.56) 55%, rgba(240,220,196,0.64) 100%);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#screen-wheel, #screen-rubric{
  background:
    radial-gradient(1100px 640px at 78% -12%, rgba(226,197,131,0.22), transparent 62%),
    radial-gradient(900px 560px at 8% 108%, rgba(244,220,212,0.26), transparent 60%),
    linear-gradient(160deg, rgba(253,248,241,0.48) 0%, rgba(248,236,214,0.44) 46%, rgba(241,224,201,0.52) 100%);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}