/* =====================================================
   Общие стили и стили игры «Кто хочет стать миллионером»
   ===================================================== */

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* ---------- Экраны ---------- */
.screen {
  display: none;
  animation: screenIn .45s ease both;
}
.screen.active { display: flex; }

@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Карточки главного меню ---------- */
.game-card {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.game-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.18), transparent 55%);
  pointer-events: none;
}
.game-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.game-card:active { transform: translateY(-2px) scale(.99); }

/* ---------- «Миллионер»: фирменное оформление ---------- */
.wwtbam-bg {
  background:
    radial-gradient(ellipse at 50% -10%, #2a4bb5 0%, transparent 55%),
    radial-gradient(ellipse at 50% 115%, #173070 0%, transparent 60%),
    linear-gradient(160deg, #060f2e 0%, #0a1a4a 45%, #060f2e 100%);
}

.wwtbam-panel {
  background: linear-gradient(180deg, #12266b 0%, #0a1740 100%);
  border: 2px solid #3d63d8;
  box-shadow: 0 0 0 1px rgba(255,215,120,.25) inset, 0 18px 50px rgba(0,0,0,.55);
  border-radius: 9999px;
}

.wwtbam-question {
  background: linear-gradient(180deg, #12266b 0%, #0a1740 100%);
  border: 2px solid #3d63d8;
  box-shadow: 0 0 0 1px rgba(255,215,120,.25) inset, 0 14px 40px rgba(0,0,0,.5);
  border-radius: 18px;
}

.answer-btn {
  position: relative;
  width: 100%;
  text-align: left;
  color: #fff;
  background: linear-gradient(180deg, #132a72 0%, #0b1a48 100%);
  border: 2px solid #3d63d8;
  border-radius: 9999px;
  padding: .8rem 1.4rem;
  font-weight: 600;
  transition: filter .15s ease, transform .15s ease, background .3s, border-color .3s;
}
.answer-btn:hover:not(:disabled) { filter: brightness(1.35); transform: scale(1.015); }
.answer-btn:disabled { cursor: default; }
.answer-btn .letter { color: #ffd700; font-weight: 800; margin-right: .6rem; }

.answer-btn.state-thinking {
  background: linear-gradient(180deg, #ffb300 0%, #e07b00 100%);
  border-color: #ffd700; color: #1a1000;
  animation: thinkPulse 1s ease-in-out infinite;
}
.answer-btn.state-thinking .letter { color: #1a1000; }
@keyframes thinkPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
.answer-btn.state-correct {
  background: linear-gradient(180deg, #1fbf4a 0%, #0e7a2c 100%);
  border-color: #6dffa0; color: #fff;
  animation: correctFlash .45s ease 3;
}
@keyframes correctFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.6); }
}
.answer-btn.state-wrong {
  background: linear-gradient(180deg, #d61f2c 0%, #8f0f1a 100%);
  border-color: #ff8089; color: #fff;
}
.answer-btn.state-dimmed { opacity: .28; filter: grayscale(.6); }

/* ---------- Денежная лестница ---------- */
.ladder-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem;
  padding: .42rem 1rem;
  border-radius: 9999px;
  color: #f5d76e;
  font-weight: 700;
  letter-spacing: .03em;
  transition: background .3s, color .3s, transform .3s;
}
.ladder-item.passed { color: #5d6f9e; }
.ladder-item.current {
  background: linear-gradient(90deg, #ff9d00, #ffc400);
  color: #201300;
  box-shadow: 0 0 22px rgba(255, 170, 0, .55);
  transform: scale(1.05);
}
.ladder-item.safe { text-shadow: 0 0 10px rgba(255,255,255,.35); }
.ladder-item.safe::after {
  content: '★'; font-size: .7em; color: #fff; margin-left: .35rem;
}

/* ---------- Подсказки ---------- */
.lifeline-btn {
  width: 64px; height: 64px;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
  color: #ffd700;
  background: radial-gradient(circle at 35% 30%, #1d3c94, #0a1740 70%);
  border: 2px solid #ffd700;
  box-shadow: 0 0 16px rgba(255,215,0,.28);
  transition: transform .15s ease, filter .15s ease;
}
.lifeline-btn:hover:not(:disabled) { transform: scale(1.08); filter: brightness(1.3); }
.lifeline-btn:disabled {
  color: #4b5b8a; border-color: #4b5b8a;
  box-shadow: none; cursor: not-allowed;
}
.lifeline-btn.used { position: relative; }
.lifeline-btn.used::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #ff4d5e;
  text-shadow: 0 0 8px rgba(0,0,0,.8);
}

/* Модалка помощи зала / звонка другу */
.hint-modal {
  background: linear-gradient(180deg, #12266b, #0a1740);
  border: 2px solid #3d63d8;
  box-shadow: 0 0 0 1px rgba(255,215,120,.25) inset, 0 30px 80px rgba(0,0,0,.7);
}

.audience-bar-wrap { display: flex; align-items: flex-end; gap: 1rem; height: 150px; }
.audience-bar {
  flex: 1;
  background: linear-gradient(180deg, #ffd700, #c98f00);
  border-radius: 6px 6px 0 0;
  transition: height 1s cubic-bezier(.34,1.3,.64,1);
  min-height: 4px;
}

/* ---------- Игра 1: факты ---------- */
.fact-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
}

.teacher-btn {
  transition: transform .15s ease, background .3s, border-color .3s;
}
.teacher-btn:hover:not(:disabled) { transform: translateY(-3px); }
.teacher-btn.state-correct { background: #16a34a !important; border-color: #4ade80 !important; }
.teacher-btn.state-wrong { background: #dc2626 !important; border-color: #f87171 !important; }
.teacher-btn.state-dimmed { opacity: .45; }

.shift-btn {
  transition: transform .2s ease, box-shadow .2s ease;
}
.shift-btn:hover { transform: translateY(-6px) scale(1.03); }

/* Утилиты */
.text-gold {
  background: linear-gradient(180deg, #ffe89e, #ffc400);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* =====================================================
   Игра 2: «Своя игра» — интерактивное табло
   ===================================================== */
.jeopardy-bg {
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .34), transparent 35%),
    radial-gradient(circle at 15% 85%, rgba(124, 58, 237, .2), transparent 30%),
    linear-gradient(145deg, #050b20 0%, #071b48 48%, #040817 100%);
}

.jeopardy-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.jeopardy-topbar > :last-child { justify-self: end; }

.jeopardy-score-pill {
  white-space: nowrap;
  background: rgba(3, 10, 31, .7);
  border: 1px solid rgba(250, 204, 21, .5);
  border-radius: 999px;
  padding: .62rem 1rem;
  font-weight: 800;
  box-shadow: 0 0 22px rgba(250, 204, 21, .12);
}
.jeopardy-score-pill span { color: #facc15; }

#mil-board-progress {
  background: linear-gradient(90deg, #2563eb, #facc15);
}

.jeopardy-board-wrap {
  width: 100%;
  overflow-x: auto;
  padding-bottom: .65rem;
  scrollbar-color: rgba(250, 204, 21, .65) rgba(255,255,255,.08);
}

.jeopardy-board {
  min-width: 940px;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.jeopardy-row {
  display: grid;
  grid-template-columns: 245px repeat(6, minmax(90px, 1fr));
  gap: .65rem;
}

.jeopardy-category,
.jeopardy-card {
  min-height: 86px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, .35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 25px rgba(0,0,0,.2);
}

.jeopardy-category {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  background: linear-gradient(135deg, rgba(30, 64, 175, .95), rgba(30, 41, 100, .96));
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
}
.jeopardy-category-icon { font-size: 1.6rem; flex: 0 0 auto; }

.jeopardy-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #123a9a, #09256b 65%, #071b50);
  color: #facc15;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, opacity .25s ease;
}
.jeopardy-card:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.025);
  filter: brightness(1.22);
  border-color: rgba(250, 204, 21, .7);
  box-shadow: 0 12px 35px rgba(37, 99, 235, .34), inset 0 1px 0 rgba(255,255,255,.12);
}
.jeopardy-card:active:not(:disabled) { transform: scale(.98); }
.jeopardy-card.used {
  background: rgba(5, 15, 45, .55);
  color: rgba(148, 163, 184, .3);
  border-color: rgba(100, 116, 139, .16);
  box-shadow: none;
  cursor: default;
  text-shadow: none;
}

.jeopardy-question-modal {
  background: linear-gradient(160deg, rgba(15, 39, 104, .98), rgba(4, 14, 48, .99));
  border: 1px solid rgba(96, 165, 250, .45);
  box-shadow: 0 28px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
}
.jeopardy-question-text {
  background: rgba(1, 8, 30, .48);
  border: 1px solid rgba(96, 165, 250, .3);
}

.jeopardy-answer-btn {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: .9rem;
  text-align: left;
  border-radius: 18px;
  padding: .9rem 1rem;
  background: linear-gradient(145deg, rgba(30, 64, 175, .76), rgba(18, 37, 101, .9));
  border: 1px solid rgba(96, 165, 250, .4);
  color: #fff;
  font-weight: 650;
  transition: transform .15s ease, filter .15s ease, opacity .25s ease, background .25s ease;
}
.jeopardy-answer-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.2); }
.jeopardy-answer-letter {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 204, 21, .12);
  border: 1px solid rgba(250, 204, 21, .5);
  color: #facc15;
  font-weight: 900;
}
.jeopardy-answer-btn.state-correct {
  background: linear-gradient(145deg, #16a34a, #08752f);
  border-color: #86efac;
}
.jeopardy-answer-btn.state-wrong {
  background: linear-gradient(145deg, #dc2626, #991b1b);
  border-color: #fca5a5;
}
.jeopardy-answer-btn.state-dimmed { opacity: .32; }

@media (max-width: 767px) {
  .jeopardy-topbar { grid-template-columns: auto 1fr auto; gap: .45rem; }
  .jeopardy-topbar h2 { font-size: 1.1rem; }
  .jeopardy-topbar p { display: none; }
  .jeopardy-score-pill { padding: .55rem .7rem; font-size: .82rem; }
  .jeopardy-board { min-width: 835px; }
  .jeopardy-row { grid-template-columns: 205px repeat(6, minmax(92px, 1fr)); }
  .jeopardy-category, .jeopardy-card { min-height: 72px; }
  .jeopardy-category { font-size: .88rem; }
}