/* =========================================================
   ГЛАВНАЯ СЦЕНА «ДЕРЕВО» — Чашки к Плюшкам (СМАРТФОН)
   ОДИН image-locked холст .m-stage (вертикальный фон fonmobile.webp).
   Все объекты позиционированы в % от холста → масштабируются как
   единое целое; холст выше экрана → прокрутка вниз.
   Дверь и фонарь привязаны к дому (в % от дома), портал — к дереву.
   ========================================================= */

:root {
  --tree-w: 127.5%;
  --grass-h: 9%;
}

.scene {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 80px rgba(0,0,0,.6);
  overflow: hidden;
}

/* ---------- ХОЛСТ (фон задаёт систему координат) ---------- */
.m-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 822 / 1913;     /* высокий → ниже сгиба продолжается, скролл */
  overflow: hidden;
  background: #cfe0c0;
  line-height: 0;
  --lbl-top: 89%;               /* уровень подписей маскотов (одна линия) — крути это число */
}
.m-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill; display: block;
  z-index: 0; pointer-events: none;
}

/* облачное название — мягко плывёт (верхний слой неба) */
.m-title {
  position: absolute; left: 2.5%; top: 6.3%; width: 92%;
  z-index: 7; pointer-events: none;
  animation: cloudDrift 9s ease-in-out infinite;
}
.m-title img { width: 100%; display: block; opacity: .5;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,.5)); }
@keyframes cloudDrift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ---------- ДЕРЕВО + дупло-вихрь в стволе ---------- */
.m-tree {
  position: absolute; left: -17.3%; top: 44.6%; width: 136.9%;
  z-index: 3; pointer-events: none;
  transform-origin: 50% 100%;
  animation: treeSway 10s ease-in-out infinite;
}
.m-tree__img { width: 100%; display: block; position: relative; z-index: 2; }  /* дерево ВЫШЕ портала → портал виден только через дупло */
@keyframes treeSway { 0%,100%{transform:rotate(-0.6deg)} 50%{transform:rotate(0.7deg)} }

/* портал-вихрь ЗА деревом, виден через нарисованное дупло в стволе (центр дупла ~48.2%/79.3% дерева) */
.m-portal {
  position: absolute; left: 43.7%; top: 74.5%; width: 9%;
  aspect-ratio: 1/1; z-index: 1;                 /* ниже дерева (z2) */
  pointer-events: auto; cursor: pointer;
  transition: transform .5s ease;
}
.m-portal.warp { transform: scale(1.12); }
.m-portal .pdeco { display: none; }              /* нефритовое кольцо не нужно — рама = дупло */
.m-portal .pcore { position:absolute; inset:0; overflow:hidden; background:#315e16; z-index:1 }
.m-portal canvas { position:absolute; inset:0; width:100%; height:100%; display:block }
/* слой искр, летящих в портал — растягиваем через inset:0 (без % высоты — она не резолвится в aspect-ratio контейнере) */
.m-spark { position:absolute; inset:0; z-index:5; pointer-events:none; }

/* ---------- ЧАЙНЫЙ ДОМ (с дверью и фонарём) ---------- */
.m-house {
  position: absolute; left: 28.5%; top: 13.2%; width: 93.6%;   /* сдвинут правее, слева — место под табло */
  z-index: 2; container-type: inline-size;       /* для cqw у вывески-указателя */
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.28));
}
.m-house__img { width: 100%; display: block; pointer-events: none; filter: saturate(.82); }
/* дверь в проёме (в % от дома, значения с десктопа); петля слева — распахивается */
.m-door {
  position: absolute; left: 37.8%; top: 51.5%; width: 13.5%;
  border: 0; padding: 0; background: none; cursor: pointer; z-index: 2;
  transform-origin: left center; transition: transform .6s cubic-bezier(.45,.05,.4,1);
}
.m-door img { width: 100%; height: auto; display: block; }
.m-door.open { transform: scaleX(-1); }     /* то же полотно зеркалится — открыта настежь */

/* ВЫВЕСКА-УКАЗАТЕЛЬ НАД ДВЕРЬЮ (ободок как у маскотов + прыгающая стрелка вниз).
   Общая для десктопа и мобайла: дверь в обоих домах на одних % → координаты совпадают.
   Размер в cqw — относительно ширины дома (он container-type:inline-size). */
.doorsign {
  position: absolute; left: 44.55%; top: 51.5%; transform: translate(-50%,-100%);
  z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
}
.doorsign__board {
  display: block; width: 23cqw; height: auto;     /* деревянная табличка (tablo.png 280×74) */
  position: relative; left: -3cqw;                /* только табличка сдвинута влево на 3% (стрелка остаётся по центру двери) */
  filter: drop-shadow(0 .5cqw 1cqw rgba(0,0,0,.3));
}
.doorsign__arrow {
  width: 0; height: 0; margin-top: .7cqw; font-size: 2.4cqw;  /* база для em — cqw в @keyframes не анимируется */
  position: relative; top: -1cqw;              /* приподнята на 1% (к табличке) */
  border-left: .8em solid transparent; border-right: .8em solid transparent;
  border-top: 1em solid #7fb04a;               /* зелёная стрелка вниз — на дверь */
  filter: drop-shadow(0 .12em .16em rgba(0,0,0,.3));
  animation: doorPoint 1.1s ease-in-out infinite;
}
@keyframes doorPoint { 0%,100% { transform: translateY(0); } 50% { transform: translateY(.65em); } }
/* фонарь на углу кровли (в % от дома) — покачивается */
.m-lantern {
  position: absolute; left: 7%; top: 37%; width: 6.3%; height: auto; z-index: 3;
  pointer-events: none; transform-origin: 50% 7%;
  animation: lanternSway 4.5s ease-in-out infinite;
}
@keyframes lanternSway { 0%,100%{transform:rotate(-3.5deg)} 50%{transform:rotate(3.5deg)} }


/* трава у подножия дома — z-index как у дома, но печатается после него → лежит ПОВЕРХ дома,
   при этом за деревом (z3). Позиция-плейсхолдер, координаты подгоним. */
.m-trava {
  position: absolute; left: 27%; top: 40%; width: 100%; height: auto;   /* едет с домом */
  z-index: 2; pointer-events: none;
}

/* ---------- ФОТОАЛЬБОМ (вложен в дерево → % от дерева, качается с ним) ---------- */
.m-photo {
  position: absolute; left: 22.1%; top: 29.8%; width: 14.6%;
  z-index: 2; display: block; text-decoration: none; pointer-events: auto;
  transform-origin: top center; transition: transform .4s ease;
}
.m-photo img { width: 100%; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.m-photo:hover { transform: rotate(-2.5deg) translateY(3px); }
.m-photo > img:not(.m-photo__pic) { position: relative; z-index: 2; }
.m-photo img.m-photo__pic {   /* окошко рамы — числа Нормана */
  position: absolute; z-index: 3; left: 30.29%; top: 36.13%; width: 39.71%; height: 51.3%;
  object-fit: cover; display: block; border-radius: 1px;
}
.m-photo__label {
  position: absolute; top: 55%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--serif); color: #4a3f2a; line-height: 1.1; text-align: center;
  font-size: clamp(.6rem, 3.4vw, 1rem);
}

/* ---------- МАСКОТЫ-КНОПКИ ---------- */
.m-mascot {
  position: absolute; z-index: 5;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  cursor: pointer; text-decoration: none; transition: transform .3s ease;
}
.m-mascot:hover { transform: translateY(-6px); }
.m-mascot img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.m-mleft  { left: 9.7%;  top: 81%; width: 26%; }
.m-mright { left: 66.4%; top: 79%; width: 27%; }
/* левый «о нас» — левитирует (только фигурка) */
.m-mleft img { transform-origin: 50% 100%; animation: floatY 4.6s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
/* правый «что такое чай» — зеркальный, еле качается, пятки на земле */
.m-mright img { transform-origin: 50% 100%; animation: swayX 5.2s ease-in-out infinite; }
@keyframes swayX { 0%,100%{transform:scaleX(-1) rotate(-0.3deg)} 50%{transform:scaleX(-1) rotate(0.3deg)} }

/* подписи-облачка маскотов — картинки, на ОДНОЙ линии (top: --lbl-top), каждая над своим маскотом */
/* облачка — чисто декоративные: клик проходит сквозь них на маскота */
.m-lbl {
  position: absolute; top: var(--lbl-top); transform: translate(-50%,-50%); z-index: 6;
  display: block; pointer-events: none;     /* top = ЦЕНТР облака → оба на одной линии при разном размере */
}
.m-lbl img { display: block; width: 100%; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.m-lbl--left  { left: 22.7%; width: 10.2%; }    /* облачко «о нас» (+20%) */
.m-lbl--right { left: 77.9%; width: 17.1%; }    /* облачко «что такое чай?» (+20%, левее на 2%) */

/* ---------- ТЕЛЕВИЗОР (вход в ленту чайных людей) ----------
   Место выбрал Норман. Слой 5 — НИЖЕ травы (6): трава закрывает ножки,
   и телевизор стоит в ней, а не поверх. Экран живой — js/tv.js. */
.m-tv{
  position: absolute; left: 65%; top: 89.8%; width: 26%;
  z-index: 5; cursor: pointer;
  transform-origin: 50% 100%;
  animation: tvSway 9s ease-in-out infinite;
}
@keyframes tvSway { 0%,100%{transform:rotate(-.5deg)} 50%{transform:rotate(.5deg)} }
.chp-tv{ position: relative; display: block; width: 100%; }
.chp-tv__img{ width:100%; display:block; position:relative; z-index:2;  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.45)); }
.chp-tv__scr{ position:absolute; z-index:1; display:block; width:0; height:0; transition:opacity .12s; }

/* ---------- ТРАВА (в самом низу, перед стопами маскотов) ---------- */
.m-grass {
  position: absolute; left: 0; right: 0; bottom: -1%; height: 6.4%;   /* на 1% ниже фона — прячет нижний край картинки (экран срежет лишнее) */
  z-index: 6; pointer-events: none;
  background: url("../assets/grass_strip.webp?v=15") repeat-x bottom center;
  background-size: auto 100%;
}

/* ---------- ОБЛАКО «О НАС» у маскота (всплывает) ---------- */
.mob-about {
  position: absolute; left: 4%; bottom: 22%; width: 84%; max-width: 340px; z-index: 9;
  background: #fbf6ea; color: #3a2e1c; border-radius: 18px; padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.45); text-align: left; line-height: 1.2;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transform-origin: 20% 100%;
  transition: opacity .3s, transform .3s, visibility .3s;
}
.mob-about.open { opacity: 1; visibility: visible; transform: none; }
.mob-about::after { content:""; position:absolute; left:16%; bottom:-16px;
  border:11px solid transparent; border-top-color:#fbf6ea; border-bottom:0; }
.mob-about__x { position:absolute; top:.3rem; right:.6rem; border:0; background:none;
  font-size:1.6rem; line-height:1; color:#b39a6e; cursor:pointer; }
.mob-about h2 { font-family:var(--serif); font-weight:500; letter-spacing:.14em; font-size:1.25rem; margin-bottom:.2rem; }
.mob-about__rule { width:40%; height:1px; background:rgba(90,60,34,.4); margin:.3rem 0 .6rem; }
.mob-about p { font-size:.95rem; line-height:1.55; margin-bottom:.5rem; color:#5a4a34; }
.mob-about .q { font-style:italic; color:#b5623f; margin-bottom:0; }

/* подвал */
.scene .footer {
  position: relative; z-index: 3;
  background: rgba(20,14,9,.55);
  border-top: 1px solid rgba(243,231,207,.18);
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* ───────── ТАБЛО «ВЕСТИ» слева от дома (мобильная главная) ───────── */
.m-doska{position:absolute;left:5%;top:29%;width:24%;z-index:2;container-type:inline-size;aspect-ratio:100/178}
.m-doska .pmt-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:88%;z-index:1;display:block;pointer-events:none}
.m-doska .pmt-house{position:absolute;left:50%;top:0;transform:translateX(-50%);width:94%;z-index:3;display:block;cursor:pointer}
.m-doska .pmt-house img{width:100%;display:block}
/* табличка «ОБЪЯВЛЕНИЯ» — тканевое полотно на планке (вариант 1), на палке над домиком «ПРОФИЛЬ» */
.m-doska .pmt-vesti{position:absolute;left:50%;top:-24%;transform:translateX(-50%);width:56%;z-index:5;cursor:pointer}
.m-doska .pmt-vesti .pv-stick{position:absolute;left:50%;transform:translateX(-50%);top:1cqw;width:2.6cqw;height:40cqw;z-index:0;
  border-radius:.8cqw;background:linear-gradient(90deg,#3a2613,#7a5630 45%,#3a2613)}
.m-doska .pmt-vesti .cloth{position:relative;z-index:1;display:block;padding:7cqw 5cqw 9cqw;text-align:center;
  background:linear-gradient(#f6efda,#e6d3a8);border-radius:1.5cqw 1.5cqw 7cqw 7cqw;box-shadow:0 3cqw 6cqw rgba(0,0,0,.4)}
.m-doska .pmt-vesti .cloth::before{content:"";position:absolute;top:-2.4cqw;left:-9%;right:-9%;height:3.4cqw;border-radius:2cqw;
  background:linear-gradient(#6a4424,#4a2c14);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.m-doska .pmt-vesti .t{display:block;font-family:var(--serif),'Segoe UI',sans-serif;font-weight:700;color:#a8331c;
  font-size:9cqw;line-height:1;letter-spacing:.03em}
.m-doska .pmt-vesti .s{display:inline-block;margin-top:3cqw;width:11cqw;height:11cqw;line-height:11cqw;
  border-radius:2.5cqw;background:#a8331c;color:#f6e6c8;font-family:'Songti SC','Noto Serif SC',serif;font-weight:700;font-size:6.5cqw}
.m-doska .pmt-vesti:active{transform:translateX(-50%) translateY(-2px)}

/* паутина с паучком — в пустоте между палками постамата */
.m-doska .cobweb{position:absolute;left:14%;top:47%;width:72%;height:48%;z-index:2;pointer-events:none;overflow:visible;opacity:.75;transform:scale(.93);transform-origin:50% 8%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}

/* мобильная ГЛАВНАЯ: логотип и кнопка громкости — 50% (десктоп и др. страницы не трогаем) */
@media (orientation:portrait){
  .brand-logo{opacity:.5}
  .bgm-toggle{opacity:.5}
}

/* ── висячие таблички на ветках (мобилка) — CSS-качание, как на десктопе ── */
.m-hangsigns{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible;
  transform-origin:51.15% 99.35%;animation:treeSway 10s ease-in-out infinite}
.m-hangsigns .hs-swing{animation:hsSwing 3.7s ease-in-out infinite;will-change:transform}
.m-hangsigns .hs-s0{animation-duration:3.5s}
.m-hangsigns .hs-s1{animation-duration:4.3s;animation-delay:-1.2s}

/* ── значок «сколько записей ты ещё не смотрел» на телевизоре ──
   Кружок в углу корпуса (выбор Нормана, 11 августа). Размер задан в долях
   от самого телевизора, чтобы одинаково смотрелся и на большом экране,
   и на телефоне. Больше 99 не бывает — там «99+». */
.chp-tv__znak{
  position:absolute; top:-6%; right:-5%; z-index:4; pointer-events:none;
  min-width:26%; height:26%; padding:0 5%;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:#b5623f; color:#fff6ea;
  border:2px solid #2a1c12; box-shadow:0 3px 10px rgba(0,0,0,.55);
  font-family:var(--serif,system-ui,sans-serif); font-weight:700; line-height:1;
  font-size:clamp(11px, 8cqw, 20px);
}
.chp-tv{ container-type:inline-size }
.chp-tv__znak[hidden]{display:none}