/* Загрузочный экран «ЗИМА» (public/loader.js). Подключён в <head>, поэтому виден с первого кадра — раньше движка и стилей игры. */
#boot {
  position: fixed; inset: 0; z-index: 10000; overflow: hidden;
  display: grid; place-items: center;
  color: #e6e3ee; font-family: 'PT Sans', system-ui, sans-serif;
  background: radial-gradient(120% 85% at 50% 115%, #2b3452 0%, #161b2d 46%, #0a0b12 100%);
  transition: opacity .6s ease, visibility 0s; /* появление (при потере связи) — плавное и сразу видимое */
}
#boot[hidden] { display: none; }
#boot.out { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s ease, visibility 0s linear .9s; }
#boot.out .boot-center { transform: scale(1.04); filter: blur(4px); }

/* город на горизонте: две гряды домов, окна тёмные — электричества нет, лишь кое-где свеча */
.boot-city { position: absolute; left: 0; right: 0; bottom: 0; height: 36vh; min-height: 150px; }
.boot-city svg { display: block; width: 100%; height: 100%; }
.boot-city .far { fill: #12162a; }
.boot-city .bld { fill: #0b0d17; }
.boot-city .win { fill: #161b2c; }
.boot-city .roof { fill: #c9d4ee; opacity: .5; }
.boot-city .candle { fill: #f3b25e; filter: drop-shadow(0 0 5px rgba(243, 170, 80, .9)); animation: boot-candle 2.6s ease-in-out infinite alternate; }
.boot-snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.boot-center {
  position: relative; display: flex; flex-direction: column; align-items: center;
  margin-top: -14vh; padding: 0 16px; text-align: center;
  transition: transform .9s ease, filter .9s ease;
}

/* логотип: буквы проступают, как иней на стекле, по ним пробегает блик */
.boot-word {
  display: flex; margin: 0;
  font: 700 clamp(56px, 13vw, 136px)/1 'PT Serif', Georgia, serif;
  letter-spacing: .3em; padding-left: .3em; /* хвост последней буквы уравновешен слева */
  filter: drop-shadow(0 0 24px rgba(150, 180, 255, .22));
}
.boot-word span {
  opacity: 0;
  background:
    linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, .95) 50%, transparent 58% 100%) no-repeat,
    linear-gradient(180deg, #ffffff 0%, #dbe5fb 45%, #94a9d6 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#boot.f .boot-word span {
  animation:
    boot-frost 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .15s) both,
    boot-shine 4.4s ease-in-out calc(1.5s + var(--i) * .12s) infinite;
}
.boot-rule {
  display: flex; align-items: center; gap: 12px;
  width: min(340px, 70vw); margin: 20px 0 10px; color: #9fb4e8;
  opacity: 0; animation: boot-fade .9s ease .7s forwards;
}
.boot-rule::before, .boot-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(159, 180, 232, .6)); }
.boot-rule::after { transform: scaleX(-1); }
.boot-rule svg { width: 18px; height: 18px; flex: none; animation: boot-spin 24s linear infinite; }
.boot-sub { font: italic 15px 'PT Serif', Georgia, serif; color: #aab3cc; letter-spacing: .06em; opacity: 0; animation: boot-fade .9s ease .9s forwards; }

/* прогресс: тонкая ледяная нить, под ней — этап и проценты */
.boot-progress { width: min(340px, 72vw); margin-top: 48px; opacity: 0; animation: boot-fade .6s ease .3s forwards; }
.boot-track { position: relative; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(200, 215, 255, .12); }
.boot-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, #7f98d8, #eef3ff); box-shadow: 0 0 10px rgba(190, 210, 255, .7); }
#boot.wait .boot-fill { width: 30% !important; animation: boot-wait 1.6s ease-in-out infinite; }
.boot-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: 12px; color: #8f97b0; letter-spacing: .04em; }
.boot-pct { font-variant-numeric: tabular-nums; }
#boot.wait .boot-pct { visibility: hidden; }
.boot-hint { margin: 26px 0 0; max-width: 460px; min-height: 2.9em; font: italic 14px/1.45 'PT Serif', Georgia, serif; color: #b7bdd0; transition: opacity .5s ease; animation: boot-hint-in .9s ease 1.1s backwards; }
@keyframes boot-hint-in { from { opacity: 0; } } /* backwards: после появления смену подсказок ведёт transition */
.boot-hint.swap { opacity: 0; }
.boot-slow { margin-top: 14px; max-width: 460px; font-size: 13px; color: #f0b25c; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.boot-slow[hidden] { display: none; }
.boot-slow button { font: inherit; color: #16151f; background: #f0b25c; border: 0; border-radius: 6px; padding: 6px 16px; cursor: pointer; }

@keyframes boot-frost { from { opacity: 0; transform: translateY(.12em); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes boot-shine { 0% { background-position: 160% 0, 0 0; } 45%, 100% { background-position: -60% 0, 0 0; } }
@keyframes boot-fade { to { opacity: 1; } }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-wait { from { left: -30%; } to { left: 100%; } }
@keyframes boot-candle { 0% { opacity: .6; } 30% { opacity: 1; } 55% { opacity: .78; } 80% { opacity: .95; } 100% { opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
  #boot *, #boot *::before, #boot *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  #boot.wait .boot-fill { animation: none; left: 35%; }
}