:root {
  --scene-scale: 1;
  --label-dim: rgba(190, 159, 110, 0.24);
  --label-active: rgba(228, 197, 145, 0.97);
}
* { box-sizing: border-box; }
html, body, body * { cursor: none !important; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #04070c;
  color: #dbc59c;
  font-family: Georgia, "Times New Roman", serif;
}
.page-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.backdrop-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(126vw, calc(126vh * (1672 / 941)));
  transform: translate(-50%, -50%);
  filter: blur(18px) brightness(.28) saturate(.72);
  opacity: .94;
  user-select: none;
}
.backdrop-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(4,7,12,0) 34%, rgba(4,7,12,.14) 54%, rgba(4,7,12,.38) 72%, rgba(4,7,12,.80) 100%),
    linear-gradient(to right, rgba(4,7,12,.58), rgba(4,7,12,.14) 18%, rgba(4,7,12,.06) 30%, rgba(4,7,12,.06) 70%, rgba(4,7,12,.14) 82%, rgba(4,7,12,.58) 100%),
    linear-gradient(to bottom, rgba(4,7,12,.48), rgba(4,7,12,.06) 18%, rgba(4,7,12,.06) 82%, rgba(4,7,12,.52) 100%);
}
.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.scene-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1672px;
  height: 941px;
  transform: translate(-50%, -50%) scale(var(--scene-scale));
  transform-origin: center center;
}
.scene {
  position: relative;
  width: 1672px;
  height: 941px;
}
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0) 72%, rgba(4,7,12,.12) 88%, rgba(4,7,12,.28) 100%);
  pointer-events: none;
}
.scene-bg {
  position: absolute;
  inset: 0;
  width: 1672px;
  height: 941px;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.scene-character-stack {
  position: absolute;
  left: 100px;
  top: 397px;
  width: 430px;
  height: 544px;
  pointer-events: none;
  z-index: 6;
}
.scene-character {
  position: absolute;
  inset: 0;
  width: 430px;
  height: 544px;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  z-index: 1;
  transition: opacity .42s linear;
  filter: brightness(.78) saturate(.78) contrast(1.06) drop-shadow(0 10px 15px rgba(0,0,0,.48));
}
.scene-character.active {
  opacity: 1;
  z-index: 2;
}
.scene-character.incoming {
  opacity: 1;
  z-index: 3;
}
.lanterns {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}
.lantern {
  position: absolute;
  pointer-events: none;
}
.lantern img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(230,182,94,.14));
}
.lantern::before {
  content: "";
  position: absolute;
  left: 55%;
  top: 24%;
  width: 12%;
  height: 30%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,162,.50) 0%, rgba(255,187,90,.22) 45%, rgba(255,179,78,0) 100%);
  filter: blur(3px);
  opacity: .55;
  animation: lanternInnerGlow 2.8s ease-in-out infinite;
}
.lantern::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 24%;
  width: 80%;
  height: 34%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,209,133,.16) 0%, rgba(255,179,78,.08) 38%, rgba(255,179,78,0) 100%);
  filter: blur(10px);
  opacity: .55;
  animation: lanternAura 4.6s ease-in-out infinite;
}
.lantern.sm {
  width: 40px;
  height: 122px;
  opacity: .64;
  transform-origin: 50% 8%;
  animation:
    lanternPulse 3.9s ease-in-out infinite,
    lanternSwing 6.6s ease-in-out infinite;
}
.lantern.fg {
  width: 170px;
  height: 516px;
  opacity: .96;
  z-index: 5;
  overflow: visible;
}
.lantern.fg::before,
.lantern.fg::after {
  display: none;
}
.hero-lantern-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(230,182,94,.10));
}
.hero-lantern-hanging {
  position: absolute;
  left: 72px;
  top: 100px;
  width: 64px;
  height: 205px;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.34)) drop-shadow(0 0 14px rgba(230,182,94,.14));
}
.hero-lantern-light {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(18px);
  opacity: .42;
  z-index: 0;
}
.glow-near {
  left: 72px;
  top: 120px;
  width: 150px;
  height: 190px;
  background: radial-gradient(ellipse at center, rgba(255,214,150,.50) 0%, rgba(255,179,78,.18) 42%, rgba(255,179,78,0) 100%);
}
.glow-ground {
  left: 60px;
  top: 292px;
  width: 330px;
  height: 170px;
  background: radial-gradient(ellipse at 18% 38%, rgba(255,201,122,.28) 0%, rgba(255,179,78,.12) 34%, rgba(255,179,78,0) 74%);
  transform: rotate(-10deg);
  opacity: .32;
}
.glow-character {
  left: 106px;
  top: 136px;
  width: 250px;
  height: 265px;
  background: radial-gradient(ellipse at 0% 52%, rgba(255,206,130,.22) 0%, rgba(255,179,78,.08) 36%, rgba(255,179,78,0) 78%);
  opacity: .26;
}
.fg-left-hero {
  left: 24px;
  top: 322px;
}
.win-poetry {
  left: 1028px;
  top: 164px;
  animation-delay: -0.2s, -1.4s;
}
.win-audio {
  left: 1124px;
  top: 380px;
  animation-delay: -1.0s, -2.1s;
}
.win-video {
  left: 686px;
  top: 491px;
  animation-delay: -2.0s, -0.8s;
}
.win-prose {
  left: 991px;
  top: 618px;
  animation-delay: -2.8s, -1.7s;
}
.win-closed {
  left: 1338px;
  top: 673px;
  animation-delay: -1.6s, -2.7s;
}
@keyframes lanternPulse {
  0%, 100% { opacity: .56; }
  50% { opacity: .88; }
}
@keyframes lanternSwing {
  0%, 100% { transform: rotate(-2.2deg) translateY(0); }
  50% { transform: rotate(2.2deg) translateY(1px); }
}
@keyframes lanternInnerGlow {
  0%, 100% { opacity: .42; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: .84; transform: translate(-50%, -50%) scale(1.10); }
}
@keyframes lanternAura {
  0%, 100% { opacity: .28; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: .64; transform: translate(-50%, -50%) scale(1.12); }
}
.portal {
  position: absolute;
  display: block;
  text-decoration: none;
  outline: none;
  pointer-events: auto;
  z-index: 210;
}

.portal:hover,
.portal:focus-visible {
  outline: none;
}

.portal:hover .portal-sprite,
.portal:focus-visible .portal-sprite {
  opacity: .14;
  filter: brightness(.92) saturate(.90) drop-shadow(0 0 9px rgba(227,183,112,.12));
}

.portal:hover .portal-mask,
.portal:focus-visible .portal-mask {
  opacity: 0;
}

.portal:hover .portal-label,
.portal:focus-visible .portal-label {
  opacity: 1;
  color: var(--label-active);
  transform: translateX(-50%) translateY(-1px);
}
.portal-sprite {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: brightness(.50) saturate(.68);
  transition: opacity .18s ease, filter .18s ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.portal.active .portal-sprite {
  opacity: .14;
  filter: brightness(.92) saturate(.90) drop-shadow(0 0 9px rgba(227,183,112,.12));
}
.portal-mask {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 16, .58);
  box-shadow: inset 0 0 14px rgba(4,7,12,.38);
  transition: opacity .18s ease;
  pointer-events: none;
}
.portal.active .portal-mask {
  opacity: 0;
}
.portal-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  color: var(--label-dim);
  text-shadow: 0 0 8px rgba(0,0,0,.92), 0 0 16px rgba(0,0,0,.86);
  transition: opacity .18s ease, color .18s ease, transform .18s ease;
  pointer-events: none;
}
.portal-label.multiline {
  white-space: normal;
  text-align: center;
  line-height: .92;
}
.portal.active .portal-label {
  opacity: 1;
  color: var(--label-active);
  transform: translateX(-50%) translateY(-1px);
}
.portal.poetry { left: 1084px; top: 167px; width: 104px; height: 116px; }
.portal.audio  { left: 1180px; top: 389px; width: 96px;  height: 103px; }
.portal.video  { left: 742px;  top: 503px; width: 67px;  height: 98px; }
.portal.prose  { left: 1047px; top: 628px; width: 74px;  height: 102px; }
.portal.closed { left: 1394px; top: 664px; width: 78px;  height: 140px; }

/* V36: while the central promo is visible, hide the dark portal masks and sprites underneath it.
   The clickable geometry itself remains unchanged because only visuals are suppressed. */
.section-promo.is-visible ~ .portal .portal-mask,
.section-promo.is-visible ~ .portal .portal-sprite {
  opacity: 0 !important;
}

.section-promo.is-visible ~ .portal .portal-label {
  opacity: .88;
}

.section-promo.is-visible ~ .portal.active .portal-label,
.section-promo.is-visible ~ .portal:hover .portal-label,
.section-promo.is-visible ~ .portal:focus-visible .portal-label {
  opacity: 1;
}
.bat-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  transform: translate(-36px, -36px);
  pointer-events: none;
  z-index: 300;
  will-change: transform;
}
.bat-cursor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.40));
}

.corner-controls {
  position: absolute;
  inset: 0;
  z-index: 240;
  pointer-events: none;
}
.corner-button {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(174,143,91,.42);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(12,16,24,.74), rgba(5,8,13,.86));
  color: rgba(205,175,124,.86);
  font: 600 17px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .03em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.74);
  box-shadow: inset 0 0 14px rgba(160,121,60,.06), 0 5px 16px rgba(0,0,0,.28);
  pointer-events: auto;
  transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.corner-button:hover,
.corner-button:focus-visible {
  color: #e0bd83;
  border-color: rgba(218,173,98,.72);
  background: linear-gradient(180deg, rgba(24,24,25,.84), rgba(8,10,14,.92));
  box-shadow: inset 0 0 17px rgba(196,145,68,.11), 0 0 16px rgba(174,126,52,.15), 0 6px 18px rgba(0,0,0,.34);
  transform: translateY(-1px);
  outline: none;
}
.corner-back {
  left: 24px;
  top: 22px;
}
.corner-sound {
  right: 24px;
  top: 22px;
  width: 46px;
  min-width: 46px;
  padding: 8px;
}
.corner-about {
  left: 50%;
  right: auto;
  top: 22px;
  bottom: auto;
  transform: translateX(-50%);
}
.corner-about:hover,
.corner-about:focus-visible {
  transform: translate(-50%, -1px);
}
.corner-icon {
  font-size: 22px;
  line-height: .8;
}
.sound-icon {
  position: absolute;
  font-size: 21px;
  line-height: 1;
}
.sound-off {
  opacity: 0;
  font-size: 22px;
}
.corner-sound.is-muted .sound-on { opacity: 0; }
.corner-sound.is-muted .sound-off { opacity: 1; }
/* Локальная кнопка возврата остаётся на странице; сервисные функции находятся в контекстном меню. */
.corner-controls {
  display: block !important;
}

/* V27: central section promo projection. Existing portal geometry is untouched. */
.section-promo {
  --promo-light-rgb: 224, 216, 199;
  position: absolute;
  inset: 0;
  z-index: 180;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms ease, visibility 0s linear 460ms;
}
.section-promo.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 0s linear 0s;
}
.section-promo.is-exiting {
  opacity: 0;
  visibility: visible;
  transition: opacity 380ms ease, visibility 0s linear 400ms;
}
.promo-screen {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 690px;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%) scale(.965);
  transform-origin: center;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  /* V32: no solid black plate under the projected video. */
  background: transparent;
  box-shadow: none;
  /* V36: softer projection edges so the preview dissolves into the scene without a visible rectangle. */
  -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 50%, #000 0 26%, rgba(0,0,0,.985) 40%, rgba(0,0,0,.90) 56%, rgba(0,0,0,.56) 72%, rgba(0,0,0,.18) 86%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 54% at 50% 50%, #000 0 26%, rgba(0,0,0,.985) 40%, rgba(0,0,0,.90) 56%, rgba(0,0,0,.56) 72%, rgba(0,0,0,.18) 86%, transparent 100%);
  transition: opacity 430ms ease, transform 560ms cubic-bezier(.2,.72,.22,1), background 360ms ease, box-shadow 360ms ease;
}
.section-promo.is-playing .promo-screen,
.section-promo.is-final .promo-screen {
  background: transparent;
  box-shadow: none;
}
.section-promo.is-visible .promo-screen {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.promo-screen-aura {
  position: absolute;
  z-index: 0;
  inset: -18%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(var(--promo-light-rgb), .15), rgba(var(--promo-light-rgb), .035) 43%, transparent 72%);
  filter: blur(24px);
  mix-blend-mode: screen;
}
.promo-video {
  position: absolute;
  z-index: 1;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  /* V36: unified grade for all promo videos so brightness and structure feel consistent across sections. */
  filter: brightness(.82) contrast(1.03) saturate(.84) sepia(.03);
  transition: opacity 300ms ease;
}
.promo-video.is-active {
  opacity: 1;
}
.section-promo.is-playing .promo-screen-aura,
.section-promo.is-final .promo-screen-aura {
  opacity: .42;
}
.section-promo.is-playing .promo-vignette,
.section-promo.is-final .promo-vignette {
  opacity: 0;
}
.promo-fog,
.promo-grain,
.promo-vignette {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.promo-fog {
  z-index: 2;
  opacity: .18;
  background:
    radial-gradient(ellipse at 24% 46%, rgba(var(--promo-light-rgb), .14), transparent 42%),
    radial-gradient(ellipse at 76% 52%, rgba(var(--promo-light-rgb), .09), transparent 48%),
    repeating-linear-gradient(102deg, transparent 0 9%, rgba(var(--promo-light-rgb), .028) 10% 11%, transparent 12% 20%);
  filter: blur(9px);
  animation: promoFogDrift 12s ease-in-out infinite alternate;
}
.promo-grain {
  z-index: 3;
  opacity: .10;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.33) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 72%, rgba(255,255,255,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 33%, rgba(255,255,255,.26) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 91% 82%, rgba(255,255,255,.18) 0 .9px, transparent 1.5px);
  background-size: 61px 47px, 83px 71px, 97px 59px, 113px 83px;
  animation: promoGrainDrift 10s linear infinite;
}
.promo-vignette {
  z-index: 4;
  opacity: 0 !important;
  background: none;
}

/* The beams are broad volumes of light filled with dust, not decorative lines. */
.promo-beam {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 300px;
  height: 190px;
  transform-origin: 0 50%;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(0 39%, 0 61%, 100% 100%, 100% 0);
  background:
    linear-gradient(to right,
      rgba(var(--promo-light-rgb), 0) 0%,
      rgba(var(--promo-light-rgb), .035) 8%,
      rgba(var(--promo-light-rgb), .092) 48%,
      rgba(var(--promo-light-rgb), .058) 82%,
      rgba(var(--promo-light-rgb), .012) 100%);
  -webkit-mask-image: radial-gradient(ellipse 112% 96% at 70% 50%, #000 0 48%, rgba(0,0,0,.82) 66%, rgba(0,0,0,.28) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 112% 96% at 70% 50%, #000 0 48%, rgba(0,0,0,.82) 66%, rgba(0,0,0,.28) 84%, transparent 100%);
  filter: brightness(1.08);
  mix-blend-mode: screen;
  transition: opacity 360ms ease;
}
.promo-beam::before {
  content: "";
  position: absolute;
  inset: 8% 0;
  background:
    radial-gradient(ellipse at 78% 50%, rgba(var(--promo-light-rgb), .11), transparent 68%),
    linear-gradient(to right, transparent, rgba(var(--promo-light-rgb), .028) 25%, rgba(var(--promo-light-rgb), .075) 72%, transparent);
  filter: blur(18px);
}
.promo-beam::after {
  content: "";
  position: absolute;
  inset: -22%;
  opacity: .48;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(255,248,229,.78) 0 .72px, transparent 1.55px),
    radial-gradient(circle, rgba(255,239,207,.56) 0 .9px, transparent 1.8px),
    radial-gradient(circle, rgba(226,215,194,.44) 0 .62px, transparent 1.45px),
    radial-gradient(circle, rgba(255,250,236,.34) 0 .55px, transparent 1.3px),
    radial-gradient(circle, rgba(239,222,191,.27) 0 1.15px, transparent 2.3px);
  background-size: 47px 37px, 71px 53px, 93px 67px, 119px 83px, 143px 101px;
  background-position: 0 0, 23px 17px, 51px 31px, 11px 63px, 77px 9px;
  filter: blur(.22px);
  animation: promoBeamDust 8.6s linear infinite;
}
.section-promo.is-visible .promo-beam {
  opacity: .82;
}
.section-promo.is-visible .promo-beam-b {
  opacity: .66;
}
.section-promo.is-final .promo-beam {
  opacity: .68;
}
.section-promo.is-final .promo-beam-b {
  opacity: .50;
}

.site-animations-off .section-promo {
  opacity: 0 !important;
  visibility: hidden !important;
}
.site-animations-off .promo-video,
.site-animations-off .promo-beam {
  opacity: 0 !important;
}

@keyframes promoBeamDust {
  0% { transform: translate3d(-4%, -3%, 0); background-position: 0 0, 21px 13px, 47px 31px, 9px 55px; }
  50% { transform: translate3d(4%, 2%, 0); background-position: 93px -37px, -42px 71px, 126px -19px, -63px 109px; }
  100% { transform: translate3d(10%, -2%, 0); background-position: 186px -74px, -105px 129px, 205px -69px, -135px 163px; }
}
@keyframes promoFogDrift {
  from { transform: translate3d(-1.2%, .5%, 0) scale(1.01); opacity: .24; }
  to { transform: translate3d(1.4%, -.7%, 0) scale(1.045); opacity: .35; }
}
@keyframes promoGrainDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 61px -47px, -83px 71px, 97px 59px, -113px -83px; }
}