/* Экран загрузки: полутёмная лаборатория, светится только стеклянная камера с жидкостью, в центре — герой.
   Сцена нарисована в координатах 1200×844 и масштабируется переменной --ls (её ставит скрипт в index.html). */
#loading {
  position: fixed; inset: 0; z-index: 20; overflow: hidden;
  background: #0f161e;
  transition: opacity 0.6s ease;
}
#loading.hide { opacity: 0; pointer-events: none; }
/* после загрузки сцена живёт внутри экрана «Тапай» как фон */
#loading.as-tap { position: absolute; z-index: 0; transition: none; pointer-events: none; }
#screen-tap .topbar { position: relative; z-index: 1; }

.lab { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lab-fg { pointer-events: none; }

.lab-stage {
  position: absolute; left: 50%; top: 50%;
  width: 1200px; height: 844px;
  transform: translate(-50%, -50%) scale(var(--ls, 1));
  transform-origin: center;
}

/* герой в жидкости */
.lab-hero {
  position: absolute; left: 600px; top: 424px; width: 310px; height: 310px;
  margin: -155px 0 0 -155px;
  animation: lab-float 5.5s ease-in-out infinite;
}
.lab-hero svg { display: block; }
@keyframes lab-float {
  0%, 100% { transform: translateY(-7px) rotate(-2deg); }
  50% { transform: translateY(9px) rotate(2.5deg); }
}

/* название с «дышащими» точками */
.lab-title {
  position: absolute; left: 0; right: 0; top: 742px;
  text-align: center;
  font: 700 30px/1 ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.04em; color: #e6fffb;
  text-shadow: 0 0 16px rgba(130, 255, 240, 0.6), 0 0 44px rgba(130, 255, 240, 0.3);
}
.lab-title span { position: relative; display: inline-block; }
/* точки сдвинуты к слову и друг к другу: шаг 0.64 от обычного шага моноширинного шрифта (дважды по −20%) */
.lab-title .dots { position: absolute; left: 100%; top: 0; white-space: nowrap; margin-left: -0.108em; letter-spacing: -0.19em; }
.lab-title .dots i { font-style: normal; opacity: 0; animation: lab-dot 1.8s infinite; }
.lab-title .dots i:nth-child(2) { animation-delay: 0.3s; }
.lab-title .dots i:nth-child(3) { animation-delay: 0.6s; }
@keyframes lab-dot {
  0%, 12% { opacity: 0; }
  22%, 72% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

/* пузырьки */
.lab .bub { animation: lab-rise 5s linear infinite; }
@keyframes lab-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 0.9; }
  50% { transform: translate(5px, -165px); }
  88% { opacity: 0.9; }
  100% { transform: translate(-3px, -330px); opacity: 0; }
}

/* подсветка, лампочки, кардиограмма */
.lab .glow { animation: lab-pulse 3s ease-in-out infinite; }
@keyframes lab-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.lab .led { animation: lab-blink 1.6s steps(1) infinite; }
.lab .led.b { animation-delay: 0.8s; }
@keyframes lab-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
.lab .ecg { stroke-dasharray: 46 200; animation: lab-ecg 2.2s linear infinite; }
@keyframes lab-ecg { from { stroke-dashoffset: 246; } to { stroke-dashoffset: 0; } }
.lab .ray { animation: lab-ray 6s ease-in-out infinite; }
.lab .ray.b { animation-delay: -3s; }
/* косые блики на стекле медленно «дышат» */
.lab .glare { animation: lab-glare 7s ease-in-out infinite; }
.lab .glare.b { animation-delay: -3.5s; }
@keyframes lab-glare { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes lab-ray { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.22; } }

@media (prefers-reduced-motion: reduce) {
  .lab-hero, .lab .bub, .lab .glow, .lab .led, .lab .ecg, .lab .ray, .lab .glare { animation: none; }
  .lab .bub { opacity: 0.7; }
}

/* ---------- экран «Тапай»: колба трясётся, трескается и разбивается (поведение — js/tapper.js) ---------- */
/* три слоя колбы (жидкость, герой, стекло) качаются вместе вокруг её основания */
.cap { transform-origin: 600px 620px; }
.cap-mid { position: absolute; left: 0; top: 0; width: 1200px; height: 844px; }
/* зона для тапов: колба с запасом по бокам */
.tap-zone {
  position: absolute; left: 380px; top: 170px; width: 440px; height: 540px;
  pointer-events: auto; touch-action: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#loading:not(.as-tap) .tap-zone { display: none; }
/* трещины закалённого стекла: тонкая светлая сетка, тёмная тень рядом, часть ячеек белёсая */
.crack, .crack-s { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.crack { stroke: #fff; stroke-width: 0.9; opacity: 0.9; }
.crack.bold { stroke-width: 1.7; opacity: 1; }
.crack-s { stroke: #063a42; stroke-width: 1.1; opacity: 0.35; transform: translate(1.1px, 1.1px); }
.crack-c { fill: #fff; stroke: none; }
.crack-hub { fill: #fff; fill-opacity: 0.55; stroke: none; }
#tap-cracks g.new .crack, #tap-cracks g.new .crack-s { stroke-dasharray: 1; animation: crack-draw 0.3s ease-out both; }
@keyframes crack-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes crack-fill { from { opacity: 0; } to { opacity: 1; } }
/* осколки */
.shard { fill: #d6fbf7; fill-opacity: 0.55; stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
#tap-puddle { transform-box: fill-box; transform-origin: center; }
/* колба разбита: света в комнате меньше */
#loading.tap-broken .glow { animation: none; opacity: 0.2; }
/* герой из главного меню стоит на основании колбы */
/* размер и место — как в главном меню: там блок героя 260×260 при колбе в 1.44 раза меньше этой */
.tap-adult { position: absolute; left: 413px; top: 246px; width: 374px; height: 374px; pointer-events: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4)); }
.tap-adult svg { display: block; }
/* пар после того, как колба лопнула: сероватые клубы и свечение в глубине */
#tap-steam { position: absolute; left: 0; top: 0; width: 1200px; height: 844px; pointer-events: none; }
.steam-puff, .steam-glow { position: absolute; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.steam-puff { background: radial-gradient(circle, rgba(226, 240, 240, 0.98) 0%, rgba(214, 234, 234, 0.96) 42%, rgba(205, 232, 230, 0.55) 58%, rgba(200, 235, 232, 0) 72%); }
.steam-glow { background: radial-gradient(circle, #fff 0%, rgba(255, 248, 214, 0.98) 14%, rgba(255, 230, 150, 0.85) 30%, rgba(255, 208, 96, 0.5) 48%, rgba(255, 190, 70, 0.18) 60%, rgba(255, 190, 70, 0) 70%); }
/* раскалённая сердцевина свечения */
.steam-glow.core { background: radial-gradient(circle, #fff 0%, #fffbe6 30%, rgba(255, 236, 160, 0.75) 52%, rgba(255, 220, 120, 0) 70%); }
/* пузыри на экране «Тапай» запускает js/tapper.js: редкие сами по себе и новые от тапов; постоянные пузыри заставки здесь выключены */
#loading.as-tap .bub { display: none; }
.tbub { fill: #fff; fill-opacity: 0.32; stroke: #fff; stroke-opacity: 0.85; stroke-width: 1.3; }
/* после взрыва: крышки и труб нет, вместо свечения колбы — лампа на проводе, как в главном меню */
#loading.tap-notop .tap-top { display: none; }
#tl-lamp { pointer-events: auto; cursor: pointer; }
/* тень героя: тот же кадр его анимации, залитый чёрным и «положенный» на пол от подошв (см. лампу в js/tapper.js) */
.tap-shadow {
  position: absolute; left: 413px; top: 246px; width: 374px; height: 374px; pointer-events: none;
  filter: brightness(0) blur(2.3px); transform-origin: 143.8px 348.1px; opacity: 0.5;
}
.tap-shadow svg { display: block; }
.tap-contact {
  position: absolute; left: 519px; top: 587px; width: 132px; height: 29px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0)); pointer-events: none;
}