/* === ЕДИНЫЙ СТИЛЬ САЙТА (накладывается поверх чужих стилей quiz/Sima) === */
/* Меняет ТОЛЬКО фон, шрифт, цвета, рамки. Логику/разметку не трогает. */

:root{
  --gold:#e8c07d; --rose:#e89ab0; --cream:#f7efe6; --text:#f3e9e0; --muted:#c9b3bd;
}

html, body{
  background: radial-gradient(ellipse at top,#2a1c2e 0%,#1a1320 60%,#120c16 100%) fixed !important;
  font-family:'Georgia','Times New Roman',serif !important;
  color: var(--text) !important;
}

/* заголовки — золотисто-розовый акцент как на главной */
h1, h2, h3{
  font-family:'Georgia','Times New Roman',serif !important;
  color: var(--cream) !important;
}

/* белый текст чужих тем -> кремовый */
p, span, label, li, .question, .result, div{
  font-family:'Georgia','Times New Roman',serif !important;
}

/* КНОПКИ — единый золотой стиль (КРОМЕ ответов .green/.red в квизе!) */
button:not(.green):not(.red), .btn, input[type="button"], input[type="submit"], a.button{
  background: linear-gradient(160deg,rgba(232,192,125,.16),rgba(232,154,176,.10)) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(232,192,125,.45) !important;
  border-radius: 30px !important;
  font-family:'Georgia','Times New Roman',serif !important;
  letter-spacing:.04em;
  transition: all .35s !important;
  box-shadow:none !important;
}
button:not(.green):not(.red):hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover{
  background: var(--gold) !important;
  color:#1a1320 !important;
  border-color: var(--gold) !important;
}
/* правильный ответ — зелёный, неправильный — красный.
   Форма/скругление — ТАКАЯ ЖЕ как у обычных кнопок (30px), чтобы не «прыгала» при ответе */
button.green{ background:#28a745 !important; color:#fff !important; border:1px solid #1e7e34 !important; border-radius:30px !important; }
button.red{ background:#dc3545 !important; color:#fff !important; border:1px solid #a71d2a !important; border-radius:30px !important; }

/* карточки/блоки контента — стеклянная рамка как на главной */
.card, .question-block, .quiz-container, .container > .box, .result-block{
  background: linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(232,192,125,.22) !important;
  border-radius: 20px !important;
}

/* === QUIZ: перебить синий фон и починить мобильный адаптив === */
/* их фон задан shorthand-ом 'background', перебиваем тем же свойством */
html, body{
  background: radial-gradient(ellipse at top,#2a1c2e 0%,#1a1320 60%,#120c16 100%) fixed !important;
}
.screen, .loading-content, .loading-screen, #loading-screen{
  background: transparent !important;
}
/* экраны квиза: вписать в экран, без overflow */
.screen{
  max-width: 92vw !important;
  width: 92vw !important;
  margin: 0 auto !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}
.screen img, .quiz img{ max-width:100% !important; height:auto !important; }

/* мобильная типографика — чтобы текст не вылезал.
   Причина overflow в quiz: body{font-size:26px} — огромный базовый шрифт */
@media (max-width: 600px){
  /* перебиваем ВСЕ крупные шрифты quiz (body 26px, заголовки 36/64px) */
  body, body *{ font-size: 17px !important; line-height:1.5 !important; }
  h1, .loading-content h1{ font-size: 25px !important; }
  h2{ font-size: 20px !important; }
  button, .btn{ width: 100% !important; max-width: 320px !important; font-size:17px !important; }
  /* всё содержимое строго в пределах экрана */
  body, .screen, #loading-screen, .loading-content{ max-width:100vw !important; overflow-x:hidden !important; }
  .screen > *, #loading-screen > *{ max-width:100% !important; box-sizing:border-box !important; }
  img{ max-width:100% !important; height:auto !important; }
}

/* кнопки и их контейнер не должны вылезать за экран */
.buttons{
  display:flex !important; flex-direction:column !important; align-items:center !important;
  gap:12px !important; width:100% !important; max-width:100% !important; padding:0 !important;
}
.buttons button, .screen button{
  width:100% !important; max-width:320px !important; margin:0 auto !important;
  white-space:normal !important; padding:14px 20px !important;
}