/* Экран загрузки — на экране планшета экспедиции, как меню после загрузки (editor/tablet.js).
   Рамка — картинка той же модели (img/menu/tablet-frame.webp), экран — вёрстка фиксированной ширины
   (860 px, на телефоне 620 px, класс .pl-compact), уменьшенная до стекла: место и масштаб считает
   editor/loading-screen.js той же камерой, что и у 3D-планшета, — по готовности он встаёт ровно на это место.
   Декор — CSS/SVG, без WebGL. */
#preloader {
  --pl-ink: #f7efd9;
  --pl-muted: #c8cabb;
  --pl-accent: #ffc36b;
  --pl-ground: #101e1b;
  --pl-panorama: url('../img/menu/loading.webp');
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  color: var(--pl-ink); font-family: 'Play', sans-serif;
  /* вокруг планшета — как за меню: тёмная сцена под затемнением планшета */
  background: radial-gradient(circle at 50% 45%, #16221c, #060a08 78%);
  transition: opacity 240ms ease-out;
}
#preloader *, #preloader *::before, #preloader *::after { box-sizing: border-box; }
#preloader[data-level='namibia'] {
  --pl-ground: #291e16; --pl-muted: #d7c7b2;
  --pl-panorama: url('../img/menu/Namibia.webp');
}
#preloader.done { opacity: 0; pointer-events: none; }

/* рамка и экран — место задаёт loading-screen.js (left/top/width, transform) */
#preloader .pl-frame { position: absolute; left: 0; top: 0; height: auto; pointer-events: none; user-select: none; }
#preloader .pl-screen {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; flex-direction: column; overflow: hidden;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  background: radial-gradient(circle at 30% 20%, #17331f, #08130c 75%);
  box-shadow: inset 0 0 0 2px rgba(110,220,120,.25);
}
/* шапка — как у экрана планшета (.tablet-screen .tb-bar) */
#preloader .pl-bar {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 18px;
  background: rgba(0,0,0,.35); border-bottom: 1px solid rgba(110,220,120,.25);
  font: 700 13px/1 'Tektur', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #cfd8c8;
}
#preloader .pl-bar-title i { margin-right: 10px; font-style: normal; color: #ffb020; }
#preloader .pl-bar-status { display: flex; align-items: center; gap: 12px; }
#preloader .pl-bar-signal { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
#preloader .pl-bar-signal b { width: 3px; background: #ffb020; }
#preloader .pl-bar-signal b:nth-child(1) { height: 25%; } #preloader .pl-bar-signal b:nth-child(2) { height: 50%; }
#preloader .pl-bar-signal b:nth-child(3) { height: 75%; } #preloader .pl-bar-signal b:nth-child(4) { height: 100%; }
#preloader .pl-bar-battery { width: 24px; height: 12px; border: 2px solid #ffb020; border-radius: 3px; padding: 1px;
  background: linear-gradient(90deg, #ffb020 75%, transparent 75%) content-box; }

/* содержимое экрана: пейзаж, название уровня, дорога загрузки */
#preloader .pl-view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; background: var(--pl-ground); }
#preloader .pl-view::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,18,17,.55), transparent 30%),
    linear-gradient(90deg, rgba(9,23,22,.62), transparent 75%),
    linear-gradient(0deg, #101e1b 0%, rgba(12,26,23,.95) 12%, rgba(12,26,23,.8) 30%, transparent 70%);
}
#preloader[data-level='namibia'] .pl-view::before {
  background: linear-gradient(180deg, rgba(36,23,14,.5), transparent 30%),
    linear-gradient(90deg, rgba(38,23,13,.58), transparent 75%),
    linear-gradient(0deg, #291e16, rgba(41,30,22,.95) 12%, rgba(41,30,22,.8) 30%, transparent 70%);
}
#preloader .pl-panorama {
  position: absolute; z-index: -3; inset: -2%;
  background: var(--pl-panorama) center 52% / cover no-repeat;
  animation: pl-landscape 32s ease-in-out infinite alternate;
}
#preloader .pl-clouds {
  position: absolute; z-index: -2; top: 4%; left: -5%; width: 110%; height: 32%;
  color: #fff5dc; opacity: .13; animation: pl-clouds 42s linear infinite alternate;
}
#preloader .pl-water { position: absolute; z-index: -2; left: 44%; top: 58%; width: 36%; height: 9%; }
#preloader .pl-water i {
  position: absolute; width: 30px; height: 2px; background: #ffebbe; opacity: 0;
  animation: pl-glimmer 7s ease-in-out infinite;
}
#preloader .pl-water i:nth-child(2) { left: 33%; top: 28%; width: 22px; animation-delay: -3s; }
#preloader .pl-water i:nth-child(3) { left: 64%; top: 58%; width: 36px; animation-delay: -5s; }
#preloader .pl-dust { display: none; position: absolute; z-index: -2; inset: 35% 0 20%; pointer-events: none; }
#preloader[data-level='namibia'] .pl-water { display: none; }
#preloader[data-level='namibia'] .pl-dust { display: block; }
#preloader .pl-dust i {
  position: absolute; left: 10%; top: 50%; width: 3px; height: 3px;
  background: #ffe1a3; opacity: 0; transform: rotate(45deg); animation: pl-sand 12s linear infinite;
}
#preloader .pl-dust i:nth-child(2) { left: 24%; top: 78%; animation-delay: -4s; }
#preloader .pl-dust i:nth-child(3) { left: 58%; top: 23%; animation-delay: -8s; }
#preloader .pl-dust i:nth-child(4) { left: 74%; top: 63%; animation-delay: -2s; }

  padding-left: 16px; border-left: 1px solid #f7efd944;
  font-size: 8px; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; color: #e9e7d6;
}
#preloader button:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 4px; }
#preloader .pl-hero { flex: 1; min-height: 0; display: flex; align-items: center; padding: 18px 28px 8px; }
#preloader .pl-heading { max-width: 520px; }
#preloader h1 { margin: 0; font: 700 58px/1.02 'Tektur', 'Play', sans-serif; letter-spacing: -.035em; text-shadow: 0 2px 18px #07151044; }

#preloader .pl-bottom {
  flex: none; padding: 0 28px 18px;
}
/* дорога во всю ширину экрана: viewBox 1120 px ужат до ~800 (на телефоне ~590) — подписи и машинка чуть крупнее */
#preloader .pl-route { display: block; width: 100%; overflow: visible; }
#preloader .pl-track-shadow { fill: none; stroke: #08120d88; stroke-width: 18; }
#preloader .pl-track { fill: none; stroke: #b3c2af77; stroke-width: 3; stroke-dasharray: 8 10; }
#preloader .pl-route-fill { fill: none; stroke: var(--pl-accent); stroke-width: 6; stroke-linecap: round; }
#preloader .pl-stop circle { r: 23px; fill: var(--pl-ground); stroke: #9eac9c; stroke-width: 2.5; }
#preloader .pl-stop use { fill: currentColor; stroke: none; color: #b6bcaa; transform: translateY(-33px) scale(1.2) translateY(33px); }
#preloader .pl-stop text { fill: #c1c7b7; text-anchor: middle; font: 400 22px 'Play', sans-serif; }
#preloader .pl-stop.passed circle { stroke: var(--pl-accent); }
#preloader .pl-stop.passed use { color: var(--pl-accent); }
#preloader .pl-stop.passed text { fill: #f7efd9; }
#preloader .pl-car { color: var(--pl-accent); }
#preloader .pl-car-art { transform: scale(1.2); }
#preloader .pl-car-body { animation: pl-engine 380ms ease-in-out infinite alternate; }
#preloader .pl-status-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 4px; }
#preloader .pl-status-caption { margin: 0 0 4px; font: 400 9px/1.3 'Play', sans-serif; text-transform: uppercase; letter-spacing: .16em; color: var(--pl-muted); }
#preloader .pl-status { margin: 0; font: 700 16px/1.3 'Play', sans-serif; }
#preloader .pl-percent { font: 600 36px/1 'Tektur', 'Play', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.04em; white-space: nowrap; }
#preloader .pl-percent small { font-size: .43em; margin-left: 4px; color: var(--pl-accent); }


/* телефон и низкое окно: экран 620 px, стекло — почти во весь экран (как у планшета, isCompact в tablet.js) */
#preloader.pl-compact .pl-bar { height: 30px; padding: 0 14px; font-size: 11px; }
#preloader.pl-compact .pl-hero { padding: 10px 18px 4px; }
#preloader.pl-compact h1 { font-size: 40px; }
#preloader.pl-compact .pl-bottom { padding: 0 18px 12px; }
#preloader.pl-compact .pl-stop text { font-size: 28px; }
#preloader.pl-compact .pl-stop circle { r: 26px; }
#preloader.pl-compact .pl-status { font-size: 13px; }
#preloader.pl-compact .pl-percent { font-size: 28px; }

@keyframes pl-landscape { from { transform: scale(1); } to { transform: scale(1.045) translate(-.4%, .4%); } }
@keyframes pl-clouds { from { transform: translateX(-2%); } to { transform: translateX(3%); } }
@keyframes pl-glimmer { 0%, 100% { opacity: 0; transform: translateX(-8px) scaleX(.7); } 55% { opacity: .35; transform: translateX(12px) scaleX(1); } }
@keyframes pl-sand { 0% { opacity: 0; transform: translate(0, 0) rotate(45deg); } 20%, 70% { opacity: .45; } 100% { opacity: 0; transform: translate(60px, -10px) rotate(45deg); } }
@keyframes pl-engine { from { transform: translateY(0); } to { transform: translateY(-.7px); } }
@keyframes pl-signal { from { opacity: .3; transform: scaleY(.7); } to { opacity: 1; transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  #preloader, #preloader *, #preloader *::before, #preloader *::after { animation: none !important; transition: none !important; }
}