/* ==========================================================
   Бачу так — стилі сайту-візитки
   Розмір базової сцени: 1672 × 941 px (співвідношення ≈ 16:9)
   ========================================================== */

:root {
  --scene-w: 1672;
  --scene-h: 941;

  --paper: #f4ecd8;       /* тло за межами картинки */
  --ink: #4a3423;         /* основний колір тексту — теплий коричневий */
  --accent: #b9532c;      /* теракота, як черепиця на будиночку */
  --card-bg: rgba(255, 250, 238, 0.86);

  --font-hand: "Caveat", "Comic Sans MS", cursive;
  --font-text: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
}

/* ---------- Вікно перегляду ---------- */
.viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Розмите продовження картинки по краях на дуже широких / високих екранах */
.viewport::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: url("../assets/scene/base.webp") center / cover no-repeat;
  filter: blur(28px) saturate(1.05) brightness(1.03);
  z-index: 0;
}

/* ---------- Сцена ---------- */
.stage {
  position: relative;
  z-index: 1;
  /* вписуємо картинку цілком: або на всю ширину, або на всю висоту */
  width: min(100vw, calc(100svh * var(--scene-w) / var(--scene-h)));
  aspect-ratio: 1672 / 941;
  container-type: inline-size; /* щоб розміри всередині рахувались від ширини сцени (cqw) */
}

.scene {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* Латки сцени v2 (прибрані зірочки) — нерухомі, лежать одразу на базовій картинці */
.scene-fix {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.layers-top { position: absolute; inset: 0; pointer-events: none; }

.layers,
.hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --px: calc(100cqw / 1672);           /* 1 піксель оригіналу сцени */
}

/* Шар на сцені (місце й розмір ставить js/main.js у відсотках) */
.layer {
  position: absolute;
  display: block;
}
img.layer { user-select: none; -webkit-user-drag: none; }

/* Дрібний ефект у точці (--x, --y) сцени */
.fx {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top: calc(var(--y) * var(--px));
  pointer-events: none;
}

/* Невидимі кнопки на персонажах */
.hotspot {
  position: absolute;
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 40%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hotspot:focus-visible { outline: 2px dashed rgba(255, 255, 255, 0.9); outline-offset: 2px; }

/* Латка «заплющені очі»: зазвичай невидима, на мить проявляється (кліпання) */
.blink { opacity: 0; transition: opacity 0.05s linear; }
.blink.is-on { opacity: 1; }
.blink--slow { transition-duration: 0.18s; }

/* ==========================================================
   ОТОЧЕННЯ
   ========================================================== */

/* --- Світло: ліхтарики мерехтять, віконця «дихають» --- */
.glow {
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: var(--anim, glow-breathe) var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.glow--lantern { --anim: glow-flicker; }
@keyframes glow-flicker {
  0%, 100% { opacity: 0.55; }
  12%      { opacity: 0.75; }
  20%      { opacity: 0.5; }
  33%      { opacity: 0.85; }
  47%      { opacity: 0.6; }
  60%      { opacity: 0.9; }
  72%      { opacity: 0.55; }
  86%      { opacity: 0.78; }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.7; }
}

/* --- Дим з комина: пухкі клубочки піднімаються вправо-вгору й тануть --- */
.smoke {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  margin: calc(-10 * var(--px)) 0 0 calc(-10 * var(--px));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 203, 197, 0.95) 0%, rgba(214, 203, 197, 0.6) 45%, rgba(214, 203, 197, 0) 70%);
  opacity: 0;
  animation: smoke-rise 7.6s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes smoke-rise {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  12%  { opacity: 0.85; }
  60%  { opacity: 0.55; }
  100% { transform: translate(calc(80 * var(--px)), calc(-75 * var(--px))) scale(2.8); opacity: 0; }
}

/* --- Пара з чайника й чашки --- */
.steam {
  width: calc(10 * var(--px));
  height: calc(20 * var(--px));
  margin: calc(-20 * var(--px)) 0 0 calc(-5 * var(--px));
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, rgba(240, 244, 250, 0.7) 40%, rgba(225, 232, 242, 0) 72%);
  opacity: 0;
  animation: steam-rise 3.3s ease-out infinite;
  animation-delay: var(--d, 0s);
}
.steam--burst { animation: steam-rise 2.4s ease-out 1 forwards; }
@keyframes steam-rise {
  0%   { transform: translate(0, 0) scale(0.6, 0.6); opacity: 0; }
  20%  { opacity: 0.95; }
  55%  { transform: translate(calc(var(--sx, 0) * var(--px)), calc(-18 * var(--px))) scale(1.1, 1.5); opacity: 0.7; }
  100% { transform: translate(calc(var(--sx, 0) * -0.5 * var(--px)), calc(-36 * var(--px))) scale(1.5, 2.1); opacity: 0; }
}

/* --- Відблиски на воді --- */
.glint {
  width: calc(10 * var(--px));
  height: calc(2.4 * var(--px));
  margin: calc(-1.2 * var(--px)) 0 0 calc(-5 * var(--px));
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  animation: glint var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes glint {
  0%, 100% { opacity: 0; transform: scaleX(0.4); }
  50%      { opacity: 0.95; transform: scaleX(1); }
}

/* --- Золотий пилок / світлячки --- */
.firefly {
  width: calc(6 * var(--px));
  height: calc(6 * var(--px));
  margin: calc(-3 * var(--px)) 0 0 calc(-3 * var(--px));
  border-radius: 50%;
  background: radial-gradient(circle, #fff8cf 0%, #ffd965 35%, rgba(255, 205, 70, 0) 70%);
  animation:
    firefly-move var(--dur, 12s) ease-in-out infinite alternate,
    firefly-glow var(--g, 3s) ease-in-out infinite;
  animation-delay: var(--d, 0s), var(--d, 0s);
}
@keyframes firefly-move {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(calc(var(--ax) * var(--px)), calc(var(--ay) * var(--px))); }
  66%  { transform: translate(calc(var(--bx) * var(--px)), calc(var(--by) * var(--px))); }
  100% { transform: translate(calc(var(--cx) * var(--px)), calc(var(--cy) * var(--px))); }
}
@keyframes firefly-glow {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.85; }
}

/* --- Кола на воді від поплавця --- */
.ring {
  width: calc(46 * var(--px));
  height: calc(13 * var(--px));
  margin: calc(-6.5 * var(--px)) 0 0 calc(-23 * var(--px));
  border: calc(1.3 * var(--px)) solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
  animation: ring 3.6s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ring {
  0%   { transform: scale(0.15); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

/* --- Вітряк --- */
.windmill-blades { animation: spin 14s linear infinite; transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Метелики (два кадри крилець) --- */
.butterfly {
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  margin: calc(-11 * var(--px)) 0 0 calc(-11 * var(--px));
  filter: hue-rotate(var(--hue, 0deg));
  animation: butterfly-path 16s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.butterfly__wing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.butterfly__wing--open   { animation: flap-a 0.34s step-end infinite; }
.butterfly__wing--closed { animation: flap-b 0.34s step-end infinite; }
@keyframes flap-a { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes flap-b { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes butterfly-path {
  0%, 100% { transform: translate(0, 0) rotate(10deg); }
  20%      { transform: translate(calc(70 * var(--px)), calc(-40 * var(--px))) rotate(25deg); }
  40%      { transform: translate(calc(150 * var(--px)), calc(-10 * var(--px))) rotate(5deg); }
  55%      { transform: translate(calc(120 * var(--px)), calc(30 * var(--px))) rotate(-20deg); }
  75%      { transform: translate(calc(40 * var(--px)), calc(10 * var(--px))) rotate(-30deg); }
}

/* --- Листочок падає, кружляючи --- */
.falling-leaf {
  width: calc(22 * var(--px));
  height: calc(22 * var(--px));
  animation: leaf-fall 8.5s ease-in 1 forwards;
}
.falling-leaf img { width: 100%; height: 100%; object-fit: contain; animation: leaf-sway 1.6s ease-in-out infinite alternate; }
@keyframes leaf-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(calc(var(--drift) * var(--px)), calc(var(--fall) * var(--px))) rotate(var(--spin)); opacity: 0; }
}
@keyframes leaf-sway {
  from { transform: translateX(calc(-10 * var(--px))) rotate(-25deg); }
  to   { transform: translateX(calc(10 * var(--px))) rotate(25deg); }
}

/* ==========================================================
   ПЕРСОНАЖІ
   .ev — обгортка для разових «подій» (натискання, випадкові моменти);
   усередині — постійний тихий рух.
   ========================================================== */

/* --- Кажан: гойдається, тримаючись лапками за гілку --- */
.bat, .bat-ev { transform-origin: 48% 3%; }
.bat { animation: bat-swing 5s ease-in-out infinite; }
@keyframes bat-swing {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
.bat-ev.is-play { animation: bat-big 2.4s ease-in-out; }
@keyframes bat-big {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(9deg); }
  45%      { transform: rotate(-7deg); }
  70%      { transform: rotate(4deg); }
  88%      { transform: rotate(-2deg); }
}

/* --- Темна сова: повертає голову --- */
.owl-dark-head, .owl-dark-ev { transform-origin: 50% 95%; }
.owl-dark-head { animation: owl-head 11s ease-in-out infinite; }
@keyframes owl-head {
  0%, 38%, 100% { transform: rotate(0); }
  48%, 62%      { transform: rotate(-5deg); }
  72%           { transform: rotate(0); }
  80%, 88%      { transform: rotate(3deg); }
}
.owl-dark-ev.is-play { animation: owl-tilt 1.6s ease-in-out; }
@keyframes owl-tilt {
  0%, 100% { transform: rotate(0); }
  30%, 70% { transform: rotate(9deg); }
}

/* --- Дихання (бузковий, кудлатик) --- */
.breath { transform-origin: 50% 100%; animation: breathe var(--dur, 4.6s) ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.022, 1.036); }
}
.breath--shaggy { --dur: 5.4s; animation-name: shaggy-sway; }
@keyframes shaggy-sway {
  0%, 100% { transform: rotate(0) scale(1, 1); }
  30%      { transform: rotate(0.7deg) scale(1.01, 1.018); }
  65%      { transform: rotate(-0.5deg) scale(1.014, 1.022); }
}
/* гусінь: тільце розтягується від хвоста до голови (голова нерухома — точка опори праворуч) */
.breath--caterpillar { --dur: 3.8s; transform-origin: 100% 85%; animation-name: caterpillar-wave; }
@keyframes caterpillar-wave {
  0%, 100% { transform: scale(1, 1); }
  35%      { transform: scale(1.035, 0.985); }
  60%      { transform: scale(1.015, 1.03); }
}
.breath--caterpillar.is-play { animation: caterpillar-wave 0.65s ease-in-out 2; }
.shaggy-ev, .lilac-ev { transform-origin: 50% 100%; }
.shaggy-ev.is-play { animation: wiggle 1.2s ease-in-out; }
.lilac-ev.is-play  { animation: wiggle 0.9s ease-in-out; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  20%      { transform: rotate(-2deg) scale(1.03, 0.97); }
  45%      { transform: rotate(2deg) scale(0.98, 1.04); }
  70%      { transform: rotate(-1deg) scale(1.01, 0.99); }
}

/* «z», що спливають над бузковим, і сердечко по натисканню */
.zzz, .heart {
  font-family: var(--font-hand);
  font-weight: 700;
  line-height: 1;
  opacity: 0;
}
.zzz {
  font-size: calc(17 * var(--px));
  color: #7b61ad;
  animation: zfloat 6s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes zfloat {
  0%   { transform: translate(0, 0) scale(0.6) rotate(-10deg); opacity: 0; }
  15%  { opacity: 0.9; }
  100% { transform: translate(calc(20 * var(--px)), calc(-48 * var(--px))) scale(1.3) rotate(10deg); opacity: 0; }
}
.heart {
  font-size: calc(22 * var(--px));
  color: #e2708f;
  margin-left: calc(-8 * var(--px));
  animation: heart-pop 2.2s ease-out 1 forwards;
}
@keyframes heart-pop {
  0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
  20%  { transform: translate(0, calc(-12 * var(--px))) scale(1.2); opacity: 1; }
  100% { transform: translate(0, calc(-55 * var(--px))) scale(1); opacity: 0; }
}

/* --- Їжачок підкидає яблуко --- */
.hedgehog-noapple { opacity: 0; }
.hedgehog-noapple.is-on { animation: show-during-toss 1.7s linear; }
@keyframes show-during-toss {         /* їжачок з порожніми лапками видно, поки яблуко не повернулось */
  0%, 90%   { opacity: 1; }
  92%, 100% { opacity: 0; }
}
.hedgehog-ev { transform-origin: 50% 100%; }
.hedgehog-ev.is-toss { animation: hog-squat 1.7s ease-in-out; }
@keyframes hog-squat {
  0%, 100% { transform: scale(1, 1); }
  8%       { transform: scale(1.03, 0.95); }     /* присів */
  16%      { transform: scale(0.98, 1.04); }     /* підкинув */
  26%      { transform: scale(1, 1); }
  84%      { transform: scale(1, 1); }
  90%      { transform: scale(1.03, 0.96); }     /* впіймав */
}
.apple { transform-origin: 50% 50%; }
.apple.is-toss { animation: apple-toss 1.7s cubic-bezier(.33, 0, .67, 1); }
@keyframes apple-toss {
  0%, 12%  { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(0, -260%) rotate(200deg); }
  88%      { transform: translate(0, 0) rotate(360deg); }
  94%      { transform: translate(0, 4%) rotate(360deg); }
  100%     { transform: translate(0, 0) rotate(360deg); }
}

/* --- Пухнастик у дверцятах ховається і визирає --- */
.door-empty { opacity: 1; }
.door-clip { overflow: hidden; }
.door-creature.is-hide { animation: peek 6.5s ease-in-out; }
@keyframes peek {
  0%, 100% { transform: translateY(0); }
  14%, 52% { transform: translateY(105%); }      /* сховався за поріг */
  64%      { transform: translateY(45%); }       /* обережно визирнув очима */
  76%      { transform: translateY(45%); }
  88%      { transform: translateY(0); }
}

/* --- Вусики гусені --- */
.antenna { animation: antenna 2.8s ease-in-out infinite; }
.antenna--left  { transform-origin: 70% 100%; }
.antenna--right { transform-origin: 30% 100%; animation-delay: -0.9s; }
@keyframes antenna {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
.antenna.is-play { animation: antenna 0.35s ease-in-out 4; }

/* --- Сонечко повзе листочком --- */
.ladybug { animation: ladybug-walk 14s ease-in-out infinite; }
@keyframes ladybug-walk {
  0%, 10%, 100% { transform: translate(0, 0) rotate(0); }
  35%, 45%      { transform: translate(28%, -10%) rotate(-12deg); }
  70%, 78%      { transform: translate(-22%, 12%) rotate(10deg); }
}

/* --- Поплавець і рибка --- */
.float { transform-origin: 50% 70%; animation: float-bob 2.6s ease-in-out infinite; }
@keyframes float-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(5%) rotate(3deg); }
}
.float.is-bite { animation: float-bite 2.6s ease-in-out; }
@keyframes float-bite {
  0%, 100% { transform: translateY(0); }
  8%       { transform: translateY(12%); }
  14%      { transform: translateY(2%); }
  22%      { transform: translateY(45%); opacity: 0.6; }   /* пірнув */
  60%      { transform: translateY(45%); opacity: 0.6; }
  75%      { transform: translateY(-6%); opacity: 1; }
}
.fish { opacity: 0; }
.fish.is-jump { animation: fish-jump 1.5s ease-out; }
/* рибка вистрибує біля поплавця і летить дугою у відерце рибалки */
@keyframes fish-jump {
  0%   { transform: translate(0, calc(8 * var(--px))) rotate(-40deg); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(calc(-70 * var(--px)), calc(-85 * var(--px))) rotate(10deg); opacity: 1; }
  92%  { transform: translate(calc(-140 * var(--px)), calc(-38 * var(--px))) rotate(70deg); opacity: 1; }
  100% { transform: translate(calc(-145 * var(--px)), calc(-30 * var(--px))) rotate(80deg); opacity: 0; }
}

/* --- Вушка білого зайчика --- */
.ear--left  { transform-origin: 60% 100%; }
.ear--right { transform-origin: 40% 100%; }
.ear.is-twitch { animation: ear-twitch 0.7s ease-in-out; }
@keyframes ear-twitch {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-9deg); }
  40%      { transform: rotate(5deg); }
  60%      { transform: rotate(-4deg); }
}
.ear--right.is-twitch { animation-direction: reverse; }

/* --- Їжачок з книжками крокує --- */
.hillhog { transform-origin: 50% 100%; animation: waddle 1.6s ease-in-out infinite; }
@keyframes waddle {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  25%      { transform: rotate(0) translateY(-3%); }
  50%      { transform: rotate(2.5deg) translateY(0); }
  75%      { transform: rotate(0) translateY(-3%); }
}

/* --- Дзвіночок жовтого зайчика --- */
.bell { transform-origin: 50% 0; animation: bell-sway 3.2s ease-in-out infinite; filter: drop-shadow(0 0 calc(3 * var(--px)) rgba(170, 215, 255, 0.9)); }
@keyframes bell-sway {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
.bell.is-ring { animation: bell-ring 0.3s ease-in-out 6; }
@keyframes bell-ring {
  0%, 100% { transform: rotate(-16deg); }
  50%      { transform: rotate(16deg); }
}

/* --- Паперовий кораблик: дрейфує і гойдається разом з відображенням --- */
.boat { animation: boat-drift 9s ease-in-out infinite; }
.boat__hull, .boat__reflection { position: absolute; display: block; }
.boat__hull       { transform-origin: 50% 100%; animation: boat-rock 2.3s ease-in-out infinite; }
.boat__reflection { transform-origin: 50% 49%;  animation: reflection-rock 2.3s ease-in-out infinite; }
/* дрейф: нерівна «вісімка» ±≈11 px по воді, з легким підйомом на хвилях */
@keyframes boat-drift {
  0%, 100% { transform: translate(-10%, 0); }
  20%      { transform: translate(-3%, 2.5%); }
  45%      { transform: translate(10%, 0.5%); }
  70%      { transform: translate(4%, 3%); }
  85%      { transform: translate(-6%, 1%); }
}
/* гойдання на хвилях: нахил ±4,5° і підстрибування */
@keyframes boat-rock {
  0%, 100% { transform: rotate(-4.5deg) translateY(0); }
  30%      { transform: rotate(1deg) translateY(-3%); }
  55%      { transform: rotate(4.5deg) translateY(2%); }
  80%      { transform: rotate(-1deg) translateY(-2%); }
}
@keyframes reflection-rock {             /* дзеркально до кораблика */
  0%, 100% { transform: rotate(4.5deg) scaleY(1); }
  30%      { transform: rotate(-1deg) scaleY(1.04); }
  55%      { transform: rotate(-4.5deg) scaleY(0.94); }
  80%      { transform: rotate(1deg) scaleY(1.02); }
}
.boat-ev { transform-origin: 50% 60%; }
.boat-ev.is-play { animation: boat-hop 1.4s ease-in-out; }
@keyframes boat-hop {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-12%) rotate(-7deg); }
  55%      { transform: translateY(4%) rotate(6deg); }
  80%      { transform: translateY(-3%) rotate(-2deg); }
}

/* ---------- Плашка-візитка (у небі, праворуч угорі) ---------- */
.card {
  position: absolute;
  top: 2.2cqw;
  right: 2.2cqw;
  max-width: 24cqw;
  padding: 1cqw 1.5cqw 1.2cqw;
  background: var(--card-bg);
  border-radius: 1.2cqw;
  box-shadow: 0 0.4cqw 1.6cqw rgba(74, 52, 35, 0.18);
  text-align: center;
  backdrop-filter: blur(3px);
}

.card__title {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(28px, 3.4cqw, 64px);
  line-height: 1;
  color: var(--accent);
}

.card__text {
  margin: 0.4cqw 0 0.8cqw;
  font-size: clamp(13px, 1.05cqw, 19px);
  line-height: 1.35;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: clamp(13px, 1cqw, 18px);
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.card__link:hover { transform: translateY(-1px); background: #a2461f; }
.card__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Вертикальні екрани (телефон) ---------- */
@media (max-aspect-ratio: 1/1) {
  .viewport {
    place-items: center start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .viewport::-webkit-scrollbar { display: none; }
  .viewport::before { display: none; }

  .stage {
    height: 100svh;
    width: calc(100svh * var(--scene-w) / var(--scene-h));
  }

  /* на телефоні плашка не «їде» разом з картинкою, а стоїть внизу */
  .card {
    position: fixed;
    top: auto;
    right: 12px;
    left: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: none;
    padding: 10px 16px 14px;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(74, 52, 35, 0.2);
  }
  .card__text { margin: 4px 0 10px; }
}

/* Повага до налаштування «зменшити рух» — знадобиться, коли з'являться анімації */
@media (prefers-reduced-motion: reduce) {
  .layers *, .layers .fx { animation: none !important; }   /* шари стоять на своїх місцях — як на базовій картинці */
  .fx { display: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}