/* ============================================================
   css/screens.css — стартовый экран, карта, финал/диплом
   ------------------------------------------------------------ */

/* ================= СТАРТ ================= */
#screen-start {
  display: none;
  /* Task 27: flex-start + margin:auto у карточки = «безопасное центрирование»:
     карточка в центре, когда помещается; когда не помещается — прижата к верху
     и экран скроллится нативно (раньше карточка скроллилась внутри себя
     невидимым скроллбаром, и «НАЧАТЬ УРОК» пропадала за кадром). */
  align-items: flex-start; justify-content: center;
  padding: 24px 16px calc(28px + env(safe-area-inset-bottom));
  /* Task 32: ОДИН фон на старте. Раньше здесь лежал слой main-bg.jpg, но его
     целиком перекрывал непрозрачный .sp-hero-bg (bg-miles-neon.jpg) — при
     медленной сети картинка «мигала дважды». Оставили только тёмный градиент:
     он работает как подложка, пока неон Майлса грузится. */
  background-image:
    linear-gradient(to bottom, rgba(10, 14, 34, 0.55) 0%, rgba(10, 14, 34, 0.35) 45%, rgba(8, 10, 26, 0.72) 100%),
    linear-gradient(170deg, #1a2140 0%, #0d1230 100%);
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
#screen-start.active { display: flex; }

.web-decor {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
  background-image:
    radial-gradient(circle at 85% 12%, transparent 90px, rgba(255,255,255,0.6) 90.5px, transparent 91.5px),
    radial-gradient(circle at 85% 12%, transparent 150px, rgba(255,255,255,0.5) 150.5px, transparent 151.5px),
    radial-gradient(circle at 85% 12%, transparent 210px, rgba(255,255,255,0.4) 210.5px, transparent 211.5px),
    radial-gradient(circle at 10% 88%, transparent 110px, rgba(255,255,255,0.5) 110.5px, transparent 111.5px),
    radial-gradient(circle at 10% 88%, transparent 170px, rgba(255,255,255,0.4) 170.5px, transparent 171.5px);
}

.start-card {
  position: relative;
  width: min(560px, 94vw);
  /* Task 27: без max-height/вложенного скролла — карточка растёт естественно,
     скроллит экран (#screen-start); margin:auto центрирует, когда есть место */
  margin: auto;
  background: linear-gradient(165deg, rgba(29, 39, 80, 0.92) 0%, rgba(14, 20, 40, 0.95) 100%);
  border: 2px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 30px 28px;
  text-align: center;
}

.logo-block { margin-bottom: 22px; }
.logo-spider {
  width: 84px; height: 84px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  background: radial-gradient(circle at 30% 25%, var(--sp-red) 0%, var(--sp-red-dark) 75%);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(226, 54, 54, 0.25), 0 12px 30px rgba(226, 54, 54, 0.4);
  animation: spiderBob 2.6s ease-in-out infinite;
}
@keyframes spiderBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.game-logo {
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  letter-spacing: 0.08em; font-weight: 900;
  background: linear-gradient(180deg, #fff 20%, var(--sp-yellow) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 18px rgba(255, 197, 49, 0.25);
}
.game-sub { color: rgba(255, 255, 255, 0.75); margin-top: 6px; font-weight: 600; }

.start-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.field-label { font-weight: 700; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }

/* ---------- Выбор аватара (§3.7-1): 8 эмодзи-кружков ---------- */
.avatar-row { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.07);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.avatar-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.16); }
.avatar-btn:active { transform: scale(0.94); }
.avatar-btn.sel {
  background: linear-gradient(180deg, rgba(255, 197, 49, 0.3), rgba(255, 179, 0, 0.16));
  border-color: var(--sp-yellow);
  box-shadow: 0 0 14px rgba(255, 197, 49, 0.45);
  transform: scale(1.12);
}

.grade-row { display: flex; gap: 8px; flex-wrap: wrap; }
.grade-row.shake { animation: shake 0.45s ease; }
.grade-btn {
  flex: 1; min-width: 44px; min-height: 48px;
  border-radius: 12px; border: 2px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.07);
  color: #fff; font-size: 1.15rem; font-weight: 800;
  transition: all 0.15s;
}
.grade-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.grade-btn.sel {
  background: linear-gradient(180deg, var(--sp-red), var(--sp-red-dark));
  border-color: #ff8a8a;
  box-shadow: 0 4px 18px rgba(226, 54, 54, 0.5);
  transform: translateY(-2px);
}
.grade-btn.soon { opacity: 0.35; }

.btn-big { width: 100%; font-size: 1.2rem; padding: 16px; }

.continue-box {
  background: rgba(255, 197, 49, 0.1);
  border: 1.5px solid rgba(255, 197, 49, 0.4);
  border-radius: 14px; padding: 14px; text-align: center;
}
.continue-actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

.start-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.start-links .btn-ghost { min-height: 44px; }

.start-footnote {
  margin-top: 20px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ---------- Новостной тикер старта (дизайн-критик P2): бейдж + текст ---------- */
.news-ticker {
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.news-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(180deg, var(--sp-red), var(--sp-red-dark));
  box-shadow: 0 3px 12px rgba(226, 54, 54, 0.45);
  animation: newsPulse 2.2s ease-in-out infinite;
}
@keyframes newsPulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(226, 54, 54, 0.45); }
  50% { box-shadow: 0 3px 18px rgba(255, 197, 49, 0.55); }
}
.news-text { font-size: 0.82rem; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }

/* ================= КАРТА ================= */
/* сверху запас под фиксированный HUD (пилюля top:10 + h:58) — чтобы не наезжал */
#screen-map { padding: 84px 12px 12px; }

.map-wrap {
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 100%;
}


.map-frame {
  position: relative;
  border-radius: 22px; overflow: hidden;
  border: 3px solid var(--glass-border);
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(255,255,255,0.06);
  background: #0a0f22;
  flex: 0 0 auto;
}
.map-img {
  display: block; width: 100%; height: auto;
  user-select: none;
}
.map-path {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.path-line {
  fill: none; stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 14 12;
}
.path-line-glow {
  fill: none; stroke: rgba(255, 197, 49, 0.25);
  stroke-width: 16; stroke-linecap: round;
  filter: blur(6px);
}

/* Пины локаций */
.map-pin {
  position: absolute;
  transform: translate(-50%, -88%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; padding: 4px;
  z-index: 10;
}
/* Активный пин — поверх соседних заблокированных (QA BUG-2: на 390 пины сходятся) */
.map-pin[disabled] { z-index: 5; }
.map-pin.done { z-index: 15; }
.map-pin.next { z-index: 30; }
.pin-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: rgba(14, 20, 40, 0.85);
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50% 50% 50% 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}
.map-pin:hover:not(:disabled) .pin-icon { transform: scale(1.12); }
.map-pin.next .pin-icon {
  border-color: var(--sp-yellow);
  background: rgba(226, 54, 54, 0.9);
  animation: pinPulse 1.6s ease-in-out infinite;
  cursor: pointer;
}
@keyframes pinPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 197, 49, 0.55); }
  50% { box-shadow: 0 0 0 14px rgba(255, 197, 49, 0); }
}
.map-pin.done .pin-icon {
  border-color: var(--sp-ok);
  background: rgba(22, 92, 44, 0.9);
}
.pin-label {
  max-width: 130px;
  background: rgba(14, 20, 40, 0.82);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 0.72rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Паучок на карте */
.map-spider {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 38px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  animation: spiderBob 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

.map-chips {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center;
  padding-bottom: 14px;
}
.chip-label { font-weight: 800; color: var(--sp-yellow); }
.chip-hint { color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; }
.module { font-size: 1.25rem; filter: grayscale(1) opacity(0.5); transition: filter 0.3s; }
.module.got {
  filter: none;
  animation: modulePop 0.5s ease;
}
@keyframes modulePop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ================= ФИНАЛ ================= */
/* Финал: рассвет над городом + паутина — фон-награда */
#screen-final {
  padding: 84px 14px 24px;
  background-image:
    linear-gradient(to bottom, rgba(20, 16, 40, 0.55) 0%, rgba(16, 12, 34, 0.38) 45%, rgba(10, 8, 24, 0.7) 100%),
    url('../img/final-bg.jpg');
  background-size: cover;
  background-position: center 35%;
  background-attachment: fixed;
}
.final-wrap { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; align-items: center; }

.diploma {
  width: 100%;
  background: linear-gradient(175deg, #fffdf5 0%, #fff3d6 100%);
  color: #241b0d;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  padding: 42px 34px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--sp-red);
}
.diploma-web {
  position: absolute; inset: 0; opacity: 0.1; pointer-events: none;
  background-image:
    radial-gradient(circle at 50% 0%, transparent 120px, rgba(226,54,54,0.8) 120.5px, transparent 121.5px),
    radial-gradient(circle at 50% 0%, transparent 190px, rgba(226,54,54,0.7) 190.5px, transparent 191.5px),
    radial-gradient(circle at 50% 0%, transparent 260px, rgba(226,54,54,0.6) 260.5px, transparent 261.5px);
}
.diploma-head {
  font-weight: 900; letter-spacing: 0.14em; font-size: 0.85rem;
  color: var(--sp-red-dark); margin-bottom: 14px;
}
.diploma-title {
  font-size: clamp(1.5rem, 5.4vw, 2.2rem); font-weight: 900;
  color: #1a1633; line-height: 1.2; margin-bottom: 16px;
}
.diploma-body { font-size: 1rem; color: #4d4433; margin: 6px 0; }
.diploma-name {
  font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 900;
  color: var(--sp-red-dark);
  border-bottom: 3px dotted rgba(176, 35, 35, 0.4);
  display: inline-block; padding: 4px 26px; margin: 8px 0;
}
.diploma-avatar { font-size: 0.9em; }
.diploma-stars { font-size: 2rem; margin: 10px 0; letter-spacing: 0.1em; }
.diploma-score { font-size: 1.05rem; font-weight: 700; color: #33291a; }
.diploma-date { margin-top: 16px; font-size: 0.85rem; color: #7a6a4f; }

.final-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding-bottom: 20px; }

/* Модалки: история */
.story-card { text-align: center; }
.story-spider { font-size: 44px; margin-bottom: 6px; animation: spiderBob 2s infinite; }
.story-card h3 { text-align: center; }
.story-body { text-align: left; margin: 12px 0 18px; }
.story-body p { margin-bottom: 10px; line-height: 1.55; font-size: 1.02rem; }
.story-ok { width: 100%; }

/* Модалка развилки */
.fork-card { text-align: center; }
.fork-text { line-height: 1.6; margin-bottom: 18px; font-size: 1.05rem; }
.fork-actions { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 640px) {
  .pin-icon { width: 42px; height: 42px; font-size: 22px; }
  .pin-label { font-size: 0.6rem; max-width: 90px; }
  .map-spider { font-size: 30px; }
  .diploma { padding: 30px 18px; }
}
/* 390px: соседние пины сходятся — сужаем подписи, чтобы рамки не наезжали (QA BUG-2) */
@media (max-width: 400px) {
  .pin-label { max-width: 70px; }
}

/* Кнопка финала на карте (после бонуса) */
.map-final-btn {
  margin-top: 6px;
  animation: finalGlow 1.6s ease-in-out infinite alternate;
  font-size: 1.05rem;
}
@keyframes finalGlow {
  from { box-shadow: 0 0 12px rgba(255, 209, 84, 0.35); }
  to { box-shadow: 0 0 26px rgba(255, 209, 84, 0.75); }
}

/* Пройденные классы: золотая рамка + звёздочка */
.grade-btn.grade-done {
  border-color: rgba(255, 209, 92, 0.75);
  background: linear-gradient(160deg, rgba(255, 209, 92, 0.18), rgba(255, 209, 92, 0.05));
  position: relative;
}
.grade-btn.grade-done::after {
  content: '⭐';
  position: absolute; top: -7px; right: -7px;
  font-size: 0.72rem; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  animation: gradeStar 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gradeStar { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

/* Время приключения на дипломе */
.diploma-time {
  margin-top: 6px; font-size: 0.92rem; color: #5a6b7b;
  letter-spacing: 0.02em;
}

/* Мобилка: заголовок карты не наезжает на кнопку звука */
@media (max-width: 480px) {
}

/* Кубок «Все классы пройдены» на стартовом экране */
.all-cup-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 14px; padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 209, 92, 0.18), rgba(255, 77, 79, 0.14));
  border: 1px solid rgba(255, 209, 92, 0.45);
  color: #ffe9b3; font-size: 0.95rem;
  box-shadow: 0 0 22px rgba(255, 209, 92, 0.18);
  animation: allCupIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), cupGlow 2.4s ease-in-out 0.6s infinite alternate;
  max-width: 92%;
  text-align: center;
}
@keyframes allCupIn { from { opacity: 0; transform: translateY(-10px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes cupGlow { from { box-shadow: 0 0 14px rgba(255, 209, 92, 0.15); } to { box-shadow: 0 0 30px rgba(255, 209, 92, 0.35); } }

/* ============================================================
   Старт-экран: каскадное появление кнопок классов (stagger)
   ============================================================ */
.grade-btn { animation: gradeIn 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.grade-btn:nth-child(1) { animation-delay: 0.05s; }
.grade-btn:nth-child(2) { animation-delay: 0.10s; }
.grade-btn:nth-child(3) { animation-delay: 0.15s; }
.grade-btn:nth-child(4) { animation-delay: 0.20s; }
.grade-btn:nth-child(5) { animation-delay: 0.25s; }
.grade-btn:nth-child(6) { animation-delay: 0.30s; }
.grade-btn:nth-child(7) { animation-delay: 0.35s; }
@keyframes gradeIn {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
.grade-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.05); }

/* ============================================================
   Task 27 — АДАПТИВ СТАРТА (телефон/низкое окно)
   Центрирование flex + карточка с max-height давали вложенный
   скролл внутри карточки (на тач-устройствах ненадёжен) и
   «пропадающие» нижние кнопки. На мобильных: карточка растёт
   естественной высотой, скроллит сам экран (нативно), якорь —
   верх (центрирование при переполнении делает верх недостижимым).
   ============================================================ */
@media (max-width: 640px) {
  #screen-start { padding: 16px 12px calc(30px + env(safe-area-inset-bottom)); }
  .start-card { padding: 22px 16px; }
}