/* ============================================================
   StepQuiz — Дизайн-система «Тёплый игровой»
   Шрифты: Unbounded (заголовки) + Nunito (текст). Кириллица ✓
   ============================================================ */

/* ===== Переменные тем ===== */
:root {
  /* --- Базовые токены интерфейса (используются по всему проекту) --- */
  --bg-color: #fff6ec;
  --text-color: #2c2433;
  --card-bg: #ffffff;
  --card-border: #ffe2cb;
  --card-header-bg: #fff1e3;
  --input-bg: #ffffff;
  --input-text: #2c2433;
  --input-border: #ffd5b0;
  --muted-color: #9a8a7d;
  --list-item-bg: #ffffff;
  --list-item-border: #ffe2cb;
  --navbar-text: rgba(255,255,255,.75);

  /* --- Палитра «тёплый игровой» --- */
  --c-orange: #ff7a18;
  --c-coral:  #ff4d6d;
  --c-yellow: #ffb703;
  --c-mint:   #1fb89b;
  --c-sky:    #3a86ff;
  --c-grape:  #8b5cf6;
  --c-pink:   #ff5da2;

  /* --- Фирменные градиенты --- */
  --grad-brand:  linear-gradient(135deg, #ff8a00 0%, #ff3d77 55%, #ff5da2 100%);
  --grad-warm:   linear-gradient(135deg, #ffb703 0%, #ff7a18 100%);
  --grad-cool:   linear-gradient(135deg, #3a86ff 0%, #8b5cf6 100%);
  --grad-mint:   linear-gradient(135deg, #2ec4b6 0%, #1fb89b 100%);
  --grad-bg:     radial-gradient(1200px 600px at 12% -8%, #ffe7c2 0%, rgba(255,231,194,0) 60%),
                 radial-gradient(1000px 500px at 100% 0%, #ffd0dd 0%, rgba(255,208,221,0) 55%),
                 linear-gradient(180deg, #fff6ec 0%, #fff0f3 100%);

  /* --- Радиусы, тени, шрифты --- */
  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 26px;
  --shadow-sm: 0 4px 14px rgba(255,122,24,.10);
  --shadow:    0 10px 30px rgba(255,77,109,.14);
  --shadow-lg: 0 18px 48px rgba(124,58,90,.22);
  --font-display: 'Unbounded', 'Montserrat', system-ui, sans-serif;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* --- Цвета вариантов ответа (Kahoot-style) --- */
  --opt1: #ff4d6d; --opt1d: #e63957;
  --opt2: #3a86ff; --opt2d: #2f6fe0;
  --opt3: #ffb703; --opt3d: #f0a500;
  --opt4: #1fb89b; --opt4d: #169a82;
}

[data-theme="dark"] {
  --bg-color: #14122b;
  --text-color: #f2ecff;
  --card-bg: #211c41;
  --card-border: #352c63;
  --card-header-bg: #2a2350;
  --input-bg: #1b1838;
  --input-text: #f2ecff;
  --input-border: #3a3170;
  --muted-color: #b3a6d6;
  --list-item-bg: #211c41;
  --list-item-border: #352c63;

  --grad-bg: radial-gradient(1200px 600px at 12% -8%, #3a1f5e 0%, rgba(58,31,94,0) 60%),
             radial-gradient(1000px 500px at 100% 0%, #4a1d4f 0%, rgba(74,29,79,0) 55%),
             linear-gradient(180deg, #14122b 0%, #1a0f2e 100%);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.35);
  --shadow:    0 10px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.55);
}

/* Применяем переменные к элементам */
body {
  background-color: var(--bg-color) !important;
  background-image: var(--grad-bg) !important;
  background-attachment: fixed !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .card {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .card-header {
  background-color: var(--card-header-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .card-body {
  color: var(--text-color) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--muted-color) !important;
}

[data-theme="dark"] .list-group-item {
  background-color: var(--list-item-bg) !important;
  border-color: var(--list-item-border) !important;
  color: var(--text-color) !important;
}

[data-theme="dark"] .text-muted {
  color: var(--muted-color) !important;
}

[data-theme="dark"] .alert-info {
  background-color: #1e3a5f;
  border-color: #2a5a8f;
  color: #9aafcc;
}

[data-theme="dark"] .alert-success {
  background-color: #1a3a2a;
  border-color: #1e5a3a;
  color: #6ecf8a;
}

[data-theme="dark"] .alert-danger {
  background-color: #3a1a1a;
  border-color: #5a1e1e;
  color: #e88a8a;
}

[data-theme="dark"] .alert-warning {
  background-color: #3a2e10;
  border-color: #5a4820;
  color: #f0c060;
}

[data-theme="dark"] .bg-light {
  background-color: var(--bg-color) !important;
}

[data-theme="dark"] .btn-outline-primary {
  color: #6fa8dc;
  border-color: #6fa8dc;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary.selected {
  background-color: #1a4a8a;
  color: #e0e0e0;
  border-color: #6fa8dc;
}

[data-theme="dark"] #countdownNumber {
  color: #6fa8dc;
}

[data-theme="dark"] .collapse.show,
[data-theme="dark"] .collapsing {
  background-color: var(--card-bg);
}

/* ===== Кнопка переключения темы ===== */
#themeToggleBtn {
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.85);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}
#themeToggleBtn:hover {
  background: rgba(255,255,255,0.15);
}

body {
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  padding-bottom: 80px;
  box-sizing: border-box;
  min-height: 100vh;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

footer a:link {
  color: rgb(131, 131, 173);
}

.table-primary {
  font-weight: bold;
}

.table-warning {
  background-color: #fff3cd !important;
}

.table-secondary {
  background-color: #e2e3e5 !important;
}

.table-danger {
  background-color: #f8d7da !important;
}

.option-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.option-btn.selected:disabled {
  border-width: 3px;
}

#timer {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.option-btn {
  transition: all 0.3s;
}

.option-btn.selected {
  background-color: #0d6efd;
  color: white;
}

.option-btn.correct {
  background-color: #198754;
  color: white;
}

.option-btn.incorrect {
  background-color: #dc3545;
  color: white;
}

.option-btn .option-explanation {
  white-space: normal;
  line-height: 1.35;
}

#quizContainer,
#waitingContainer,
#resultsContainer {
  max-width: 800px;
  margin: 0 auto;
}

.question-block {
  border: 1px solid var(--card-border, #ddd);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: var(--card-bg, #f9f9f9);
  color: var(--text-color, inherit);
}
.question-block * { color: inherit; }
.question-block .text-muted { color: var(--muted-color, #6c757d) !important; }

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.option-text {
  flex: 1;
  margin-left: 10px;
}

.question-image-preview {
  max-width: 200px;
  max-height: 150px;
  margin-top: 10px;
}

.table-primary {
  font-weight: bold;
}

.table-warning {
  background-color: #fff3cd !important;
}

.table-secondary {
  background-color: #e2e3e5 !important;
}

.table-danger {
  background-color: #f8d7da !important;
}

#studentsList {
  max-height: 300px;
  overflow-y: auto;
}

.student-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}

.student-item:last-child {
  border-bottom: none;
}

.hero-section {
  position: relative;
  background-image: linear-gradient(135deg, #29074d50 0%, #11387c50 100%),
    url('../img/hero.webp');
  background-size: cover;
  background-position: center center;
  color: white;
  text-align: center;
  overflow: hidden;
}

.hero-section .hero-container {
  padding: 100px 0;
  backdrop-filter: blur(1px);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.question-mark {
  position: absolute;
  font-size: 70px;
  /* 70% от высоты блока */
  color: rgba(255, 255, 255, 0.557);
  /* полупрозрачный белый */
  font-family: Arial, sans-serif;
  font-weight: bold;
  pointer-events: none;
  z-index: 1;
  bottom: -20%;
  /* начальная позиция снизу */
  opacity: 0;
  /* animation: floatUp 15s linear infinite; */
}

.nav-bar {
  z-index: 5;
}

/* Анимация движения снизу вверх */
@keyframes floatUp1 {
  0% {
    transform: translateY(100%) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translateY(-120vh) rotate(360deg);
    opacity: 0;
  }
}

@keyframes floatUp2 {
  0% {
    transform: translateY(100%) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translateY(-120vh) rotate(-360deg);
    opacity: 0;
  }
}

@keyframes floatUp3 {
  0% {
    transform: translateY(100%) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translateY(-180vh) rotate(240deg);
    opacity: 0;
  }
}


/* Вариации анимации для разных знаков вопроса */
.question-mark:nth-child(odd) {
  animation-duration: 20s;
  animation-delay: -5s;
}

.question-mark:nth-child(even) {
  animation-duration: 25s;
  animation-delay: -10s;
}

.hero-section h1 {
  font-family: "Preahvihear", "Montserrat", "Arial Narrow", "Arial", sans-serif;
  ;
  font-size: 64px;
}

h1, h2, h3, h4, h5, .navbar-brand, #quizTitle, #questionText {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.5px;
}
.btn {
  font-family: var(--font-body);
  font-weight: 800;
}

@media (min-width: 900px) {
  .hero-section .hero-container {
    padding: 200px 0;
    width: 100% !important;
  }

  .hero-section h1 {
    font-size: 100px !important;
  }
}

.feature-card {
  transition: transform 0.3s;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-10px);
}

#quizTitle {
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  transition: .5s;
}

@media (max-width: 600px) {
  #quizTitle {
  font-size: 20px;
  }
}

.bg-dark {
  background-color: royalblue !important;
}

#quizTitle:hover {
  transform: scale(1.1);
}

#questionText {
  position: relative;
  text-align: center;
  font-size: 28px;
  font-family: 'Rubik', 'Montserrat', sans-serif;
  font-weight: 500;
}

#questionText::before {
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  content: 'вопрос';
  position: absolute;
  display: inline-block;
  padding: 6px 12px;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #198754;
  color: white;
  border-radius: 10px;
}

.mt-6 {
  margin-top: 30px;
}

/* ===== Тёмная тема: модальные окна (общие) ===== */
[data-theme="dark"] .modal-content {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--card-border);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--card-border);
}
[data-theme="dark"] .btn-close {
  filter: invert(1);
}

/* ===== Редактор: кнопка вставки вопроса между существующими ===== */
.insert-question-btn { position: relative; }
.insert-here-btn {
  opacity: 0.35;
  transition: opacity 0.2s;
  border-radius: 25% !important;
  width: 28px;
  height: 18px;
  padding: 0;
  line-height: 0.5;
  font-size: 0.5rem;
}
.insert-here-btn:hover { opacity: 1; }

/* ===== Студент: вертикальное центрирование экрана квиза ===== */
body.quiz-active {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0 !important;
}
body.quiz-active footer { display: none !important; }
body.quiz-active .quiz-main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  margin-top: 0 !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
body.quiz-active #quizContainer { width: 100%; }

@media (max-width: 767px) {
  body.quiz-active .quiz-main-container {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }
  #questionText { font-size: 1.05rem !important; }
  #questionText::before { font-size: 0.75rem !important; top: -22px; }
  #timer { font-size: 1.4rem !important; margin: 4px 0 !important; }
  #quizContainer .card-header { padding: 0.5rem 0.75rem !important; }
  #quizContainer .card-body  { padding: 0.6rem 0.75rem !important; }
  .option-btn { padding: 0.35rem 0.75rem !important; font-size: 0.9rem !important; }
  #answerFeedback { padding: 0.4rem 0.75rem !important; margin-bottom: 0 !important; }
  #countdownNumber { font-size: 72px !important; }
  #questionImage img { max-height: 120px !important; }
}

/* ===== Церемония награждения: пьедестал ===== */
.podium-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.5rem;
  padding-bottom: 0;
}
.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(-80px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.podium-place.revealed { opacity: 1; transform: translateY(0); }
.podium-name { font-weight: 700; text-align: center; max-width: 130px; word-break: break-word; font-size: 1rem; }
.podium-block {
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.podium-block.p1 { width: 130px; height: 185px; background: linear-gradient(160deg,#ffd700,#ff9500); }
.podium-block.p2 { width: 115px; height: 135px; background: linear-gradient(160deg,#d0d0d0,#8a8a8a); }
.podium-block.p3 { width: 105px; height:  95px; background: linear-gradient(160deg,#d4915a,#9a5030); }
[data-theme="dark"] .podium-name { color: #e0e0e0; }
[data-theme="dark"] .podium-place .text-muted { color: #9aafcc !important; }

/* ===== Модалка: QR во весь экран ===== */
#qrFullscreenModal .modal-dialog { max-width: 80vw; width: 80vw; }
#qrFullscreenModal .modal-content { max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
#qrFullscreenModal .modal-body { overflow: hidden; flex: 1; }
#qrFullscreenModal .modal-body > .d-flex { height: 100%; max-height: calc(80vh - 70px); }
#qrcodeLarge img, #qrcodeLarge canvas { display: block; }
#qrFullscreenModal .modal-title { font-size: 2.5rem !important; }
#qrModalShortUrl { font-size: 2rem !important; letter-spacing: 4px; }
#qrFullscreenModal .qr-label { font-size: 1.4rem; }
#qrFullscreenModal .modal-participants-header { font-size: 1.4rem; }
#qrModalParticipants .participant-row { font-size: 1.3rem; padding: 10px 16px; }
[data-theme="dark"] #qrFullscreenModal .modal-content { background-color: #16213e !important; border-color: #0f3460 !important; color: #e0e0e0 !important; }
[data-theme="dark"] #qrFullscreenModal .modal-header { background-color: #0f3460 !important; border-color: #0f3460 !important; color: #e0e0e0 !important; }
[data-theme="dark"] #qrFullscreenModal .modal-title { color: #e0e0e0 !important; }
[data-theme="dark"] #qrFullscreenModal .btn-close { filter: invert(1); }
[data-theme="dark"] #qrFullscreenModal .border-start { border-color: #0f3460 !important; }
[data-theme="dark"] #qrFullscreenModal .border-bottom { border-color: #0f3460 !important; }
[data-theme="dark"] #qrFullscreenModal .text-muted { color: #9aafcc !important; }
[data-theme="dark"] #qrFullscreenModal .participant-row { border-color: #0f3460 !important; color: #e0e0e0 !important; }
[data-theme="dark"] #qrFullscreenModal strong,
[data-theme="dark"] #qrModalShortUrl { color: #e0e0e0 !important; }
[data-theme="dark"] #qrFullscreenModal .btn-outline-secondary { color: #9aafcc; border-color: #0f3460; }

/* ===== Модалка: детальная статистика ===== */
#detailedStatsModal .modal-dialog { max-width: min(90vw, 1440px); width: 90vw; margin: 5vh auto; }
#detailedStatsModal .modal-content { height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
#detailedStatsModal .modal-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
#detailedChartWrapper { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] #detailedStatsModal .modal-content { background-color: #16213e; border-color: #0f3460; color: #e0e0e0; }
[data-theme="dark"] #detailedStatsModal .modal-header { background-color: #0f3460; border-color: #0f3460; }
[data-theme="dark"] #detailedStatsModal .card { background-color: #1a2a4a; border-color: #0f3460; color: #e0e0e0; }
[data-theme="dark"] #detailedStatsModal .card.border-success { border-color: #198754 !important; }
[data-theme="dark"] #detailedStatsModal .card.border-danger { border-color: #dc3545 !important; }
[data-theme="dark"] #detailedStatsModal .text-muted { color: #9aafcc !important; }
[data-theme="dark"] #detailedStatsModal .btn-close { filter: invert(1); }
[data-theme="dark"] #detailedStatsModal .modal-footer { background-color: #2a2350; border-color: #352c63; }

/* ============================================================
   ★ ДИЗАЙН-СИСТЕМА «ТЁПЛЫЙ ИГРОВОЙ» — компоненты
   ============================================================ */

/* --- Навбар --- */
.navbar.bg-dark,
.navbar.navbar-dark.bg-dark {
  background: var(--grad-brand) !important;
  box-shadow: 0 6px 20px rgba(255,77,109,.25);
  border: none;
}
.navbar .navbar-brand,
.navbar #quizTitle {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.navbar .nav-link { color: rgba(255,255,255,.9) !important; font-weight: 700; }
.navbar .nav-link:hover { color: #fff !important; }
.navbar .navbar-text { color: rgba(255,255,255,.92) !important; }

/* --- Кнопка темы / звука --- */
#themeToggleBtn, #muteBtn {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  color: #fff !important;
  border-radius: 999px !important;
  transition: transform .2s ease, background .2s ease;
}
#themeToggleBtn:hover, #muteBtn:hover { background: rgba(255,255,255,.32) !important; transform: scale(1.1) rotate(-6deg); }

/* --- Кнопки --- */
.btn {
  border-radius: 999px;
  padding: .6rem 1.4rem;
  border: none;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.btn-primary { background: var(--grad-cool); }
.btn-success { background: var(--grad-mint); }
.btn-warning { background: var(--grad-warm); color: #4a2c00; }
.btn-danger  { background: linear-gradient(135deg,#ff4d6d,#e63957); }
.btn-light   { background: #fff; color: var(--c-coral); box-shadow: 0 6px 0 rgba(255,77,109,.25); }
.btn-light:hover { color: var(--c-orange); }
.btn-lg { padding: .85rem 2rem; font-size: 1.15rem; }
.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--c-sky);
  color: var(--c-sky);
  box-shadow: none;
}
.btn-outline-primary:hover { background: var(--c-sky); color: #fff; }
.btn-outline-success { background: transparent; border: 2px solid var(--c-mint); color: var(--c-mint); box-shadow: none; }
.btn-outline-success:hover { background: var(--c-mint); color: #fff; }
.btn-outline-secondary { box-shadow: none; border: 2px solid var(--card-border); color: var(--muted-color); background: transparent; }

/* --- Карточки --- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: var(--text-color);
}
.card-header {
  background: var(--card-header-bg);
  border-bottom: 1px solid var(--card-border);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-color);
}
[data-theme="dark"] .card { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
[data-theme="dark"] .card-header { background: var(--card-header-bg) !important; border-color: var(--card-border) !important; }

/* --- Hero --- */
.hero-section {
  background-image: var(--grad-brand),
    url('../img/hero.webp') !important;
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.hero-section h1 {
  font-family: var(--font-display) !important;
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
  animation: pop-in .7s cubic-bezier(.34,1.56,.64,1) both;
}
.hero-section .lead { font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.3); }

/* --- Фичекарточки --- */
.feature-card { border-radius: var(--radius-lg); }
.feature-card:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: var(--shadow-lg); }
.feature-card .fa-3x { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* --- Заголовок квиза / вопроса --- */
#quizTitle { font-weight: 800; }
#questionText {
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: 22px;            /* место для плашки «вопрос», чтобы не упиралась в верх */
  color: var(--text-color);
}
[data-theme="dark"] #questionText,
[data-theme="dark"] .card-header #questionText { color: var(--text-color) !important; }
#questionText::before {
  background: var(--grad-mint);
  font-family: var(--font-body);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(31,184,155,.35);
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Заголовок-вопрос: даём карточке/шапке воздух сверху под плашку */
#quizContainer .card-header { overflow: visible; padding-top: 1rem; }

/* ============================================================
   ★ ВАРИАНТЫ ОТВЕТА — Kahoot-style цветные плитки
   ============================================================ */
#optionsContainer {
  gap: .9rem !important;
  grid-template-columns: 1fr 1fr;   /* по умолчанию — две колонки */
}
#optionsContainer.cols-1 { grid-template-columns: 1fr; }
/* Кнопка подтверждения (множественный выбор) — на всю ширину */
#optionsContainer #confirmAnswerBtn { grid-column: 1 / -1; }
/* На узких экранах две колонки тесноваты — по умолчанию одна,
   но если пользователь явно выбрал две (нет cols-1) — уважаем выбор */
@media (max-width: 420px) {
  #optionsContainer:not(.cols-1) .option-btn { font-size: .95rem; padding-left: 2.9rem !important; }
}

/* Ненавязчивый переключатель колонок */
.columns-toggle {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--muted-color);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  opacity: .65;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.columns-toggle:hover { opacity: 1; color: var(--c-sky); border-color: var(--c-sky); transform: translateY(-1px); }
.columns-toggle i { font-size: .85rem; }

#optionsContainer .option-btn {
  position: relative;
  border: none !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.1rem;
  text-align: left;
  padding: 1rem 1.1rem 1rem 3.4rem !important;
  min-height: 62px;
  box-shadow: 0 5px 0 rgba(0,0,0,.18);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, filter .15s ease;
}
#optionsContainer .option-btn::before {
  content: '';
  position: absolute;
  left: .8rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  background: rgba(255,255,255,.95);
  -webkit-mask: var(--shape) center/contain no-repeat;
  mask: var(--shape) center/contain no-repeat;
}
/* 4 цвета + 4 формы (треугольник, ромб, круг, квадрат) */
#optionsContainer .option-btn:nth-of-type(4n+1) { background: linear-gradient(135deg,var(--opt1),var(--opt1d)) !important; --shape: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,10 90,90 10,90"/></svg>'); }
#optionsContainer .option-btn:nth-of-type(4n+2) { background: linear-gradient(135deg,var(--opt2),var(--opt2d)) !important; --shape: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,5 95,50 50,95 5,50"/></svg>'); }
#optionsContainer .option-btn:nth-of-type(4n+3) { background: linear-gradient(135deg,var(--opt3),var(--opt3d)) !important; color: #5a3a00 !important; --shape: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="42"/></svg>'); }
#optionsContainer .option-btn:nth-of-type(4n+3)::before { background: rgba(90,58,0,.85); }
#optionsContainer .option-btn:nth-of-type(4n+4) { background: linear-gradient(135deg,var(--opt4),var(--opt4d)) !important; --shape: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="14" y="14" width="72" height="72" rx="14"/></svg>'); }
#optionsContainer .option-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.01); filter: brightness(1.06); }
#optionsContainer .option-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.18); }
#optionsContainer .option-btn.selected {
  outline: 4px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.5), 0 8px 22px rgba(0,0,0,.25);
  transform: translateY(-2px) scale(1.02);
}
/* Правильно / неправильно — перекрывают цвет варианта */
#optionsContainer .option-btn.correct,
.option-btn.correct { background: linear-gradient(135deg,#22c55e,#15a34a) !important; color:#fff !important; animation: correct-pulse .6s ease; }
#optionsContainer .option-btn.incorrect,
.option-btn.incorrect { background: linear-gradient(135deg,#ef4444,#c02626) !important; color:#fff !important; animation: shake .4s ease; opacity: .92; }
#optionsContainer .option-btn:disabled { opacity: .55; filter: grayscale(.2); }
#optionsContainer .option-btn.correct:disabled,
#optionsContainer .option-btn.incorrect:disabled,
#optionsContainer .option-btn.selected:disabled { opacity: 1; }
#confirmAnswerBtn { background: var(--grad-warm) !important; color:#4a2c00 !important; border-radius: 999px !important; font-weight: 800; }

/* --- Таймер --- */
#timer {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-coral) !important;
  background: var(--card-header-bg);
  display: inline-block;
  padding: .15rem 1.4rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  animation: timer-beat 1s ease-in-out infinite;
}

/* --- Обратный отсчёт --- */
#countdownNumber {
  font-family: var(--font-display) !important;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: none;
}
[data-theme="dark"] #countdownNumber { -webkit-text-fill-color: transparent; }

/* --- Обратная связь (alert) --- */
#answerFeedback { border-radius: var(--radius); border: none; font-weight: 800; box-shadow: var(--shadow-sm); }
.alert-success { background: linear-gradient(135deg,#d8fbe6,#b6f3cf); color:#0c6b3f; }
.alert-danger  { background: linear-gradient(135deg,#ffe1e6,#ffc9d2); color:#9b1c34; }
.alert-info    { background: linear-gradient(135deg,#e3efff,#cfe2ff); color:#1d4ed8; }
.alert-warning { background: linear-gradient(135deg,#fff3d6,#ffe6ad); color:#7a5200; }

/* --- Спиннер ожидания --- */
#waitingContainer .spinner-border { color: var(--c-orange) !important; width: 3rem; height: 3rem; }
#waitingContainer h4 { font-family: var(--font-display); }

/* --- Список участников --- */
.list-group-item { border-color: var(--list-item-border); }
#participantsCount, .badge.bg-secondary { background: var(--grad-warm) !important; color:#4a2c00 !important; border-radius: 999px; }

/* --- Пьедестал (улучшение) --- */
.podium-block { border-radius: 14px 14px 0 0; box-shadow: 0 -6px 20px rgba(0,0,0,.18) inset, var(--shadow); }
.podium-block.p1 { background: linear-gradient(160deg,#ffe169,#ff9500) !important; }
.podium-name { font-family: var(--font-display); }

/* --- Лидерборд --- */
#leaderboard .list-group-item, #finalScore { font-weight: 800; }
#finalScore { font-family: var(--font-display); font-size: 1.4rem; }

/* ============================================================
   ★ АНИМАЦИИ
   ============================================================ */
@keyframes pop-in { 0% { opacity:0; transform: scale(.8) translateY(20px); } 100% { opacity:1; transform: scale(1) translateY(0); } }
@keyframes correct-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
@keyframes timer-beat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes countdown-zoom { 0%{transform:scale(.7);opacity:.5} 50%{transform:scale(1.15);opacity:1} 100%{transform:scale(.7);opacity:.5} }
@keyframes float-up-card { 0% { opacity:0; transform: translateY(24px) scale(.97); } 100% { opacity:1; transform: translateY(0) scale(1); } }

#quizContainer, #waitingContainer, #resultsContainer { animation: float-up-card .45s cubic-bezier(.34,1.56,.64,1) both; }

/* Уважаем настройку «меньше анимаций» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ============================================================
   ★ МИНИ-ИГРА «ПРОКАЧКА МОЗГА» (экран ожидания)
   ============================================================ */
.clicker-card .card-header { display: flex; align-items: center; font-size: 1rem; }
.clicker-balance { font-family: var(--font-display); font-weight: 800; color: var(--c-grape); }
[data-theme="dark"] .clicker-balance { color: #c9b3ff; }

/* Кнопка-мозг */
.brain-btn {
  font-size: 96px;
  line-height: 1;
  border: none;
  background: radial-gradient(circle at 50% 35%, #ffe1ee 0%, #ffc2dd 45%, #ff9ec7 100%);
  width: 180px; height: 180px;
  border-radius: 50%;
  margin: 10px auto 6px;
  display: block;
  cursor: pointer;
  box-shadow: 0 12px 0 rgba(199,51,114,.35), var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease, filter .2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.brain-btn:hover { filter: brightness(1.04) saturate(1.1); }
.brain-btn:active { transform: translateY(8px); box-shadow: 0 4px 0 rgba(199,51,114,.35); }
.brain-btn.pop { animation: brain-pop .18s ease; }
@keyframes brain-pop { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }
[data-theme="dark"] .brain-btn { background: radial-gradient(circle at 50% 35%, #5a3a6e 0%, #7a3f86 45%, #9a4fa0 100%); }
.brain-hint { color: var(--muted-color); font-size: .85rem; font-weight: 700; }

/* Статы */
.clicker-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .9rem;
  font-weight: 800; font-size: .9rem; margin-bottom: 6px;
}
.clicker-stats span { white-space: nowrap; }
.clicker-stats i { color: var(--c-orange); margin-right: 2px; }

/* Улучшения */
.upgrades-list { display: flex; flex-direction: column; gap: .5rem; }
.upgrade-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left;
  background: var(--card-header-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: .5rem .7rem;
  cursor: pointer;
  color: var(--text-color);
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: none;
  font-family: var(--font-body);
}
.upgrade-item:hover:not(.locked) { transform: translateY(-2px); border-color: var(--c-mint); box-shadow: var(--shadow-sm); }
.upgrade-item.locked { opacity: .5; cursor: not-allowed; }
.upgrade-item .up-ic {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  background: var(--grad-mint); color: #fff; border-radius: 10px; font-size: 1rem;
}
.upgrade-item .up-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.upgrade-item .up-name { font-weight: 800; font-size: .9rem; }
.upgrade-item .up-lvl { color: var(--muted-color); font-weight: 700; font-size: .78rem; }
.upgrade-item .up-eff { color: var(--c-mint); font-weight: 700; font-size: .8rem; }
.upgrade-item .up-cost { font-family: var(--font-display); font-weight: 700; font-size: .82rem; white-space: nowrap; color: var(--c-grape); }
[data-theme="dark"] .upgrade-item .up-cost { color: #c9b3ff; }

/* Всплывающие очки при клике */
.gain-float {
  position: fixed;
  pointer-events: none;
  z-index: 2000;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--c-grape);
  text-shadow: 0 2px 6px rgba(255,255,255,.6);
  transform: translate(-50%, -50%);
  animation: gain-up .9s ease-out forwards;
}
[data-theme="dark"] .gain-float { color: #d9c6ff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
@keyframes gain-up { 0%{opacity:1; transform: translate(-50%,-50%) scale(.8)} 100%{opacity:0; transform: translate(-50%,-150%) scale(1.2)} }

/* Лидерборд игроков */
.clicker-board { max-height: 260px; overflow-y: auto; }
.clk-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--list-item-border);
  font-weight: 700;
}
.clk-row:last-child { border-bottom: none; }
.clk-row.me { background: linear-gradient(90deg, rgba(139,92,246,.14), transparent); }
.clk-rank { width: 28px; text-align: center; font-family: var(--font-display); font-weight: 700; }
.clk-emoji { font-size: 1.2rem; }
.clk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clk-you { font-size: .7rem; background: var(--grad-cool); color: #fff; padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.clk-score { font-family: var(--font-display); font-weight: 700; color: var(--c-grape); white-space: nowrap; }
[data-theme="dark"] .clk-score { color: #c9b3ff; }
.clk-empty { padding: 1.2rem; text-align: center; color: var(--muted-color); font-weight: 700; }