/* =========================================================
   ДЕСКТОП-РЕЖИМ (≥1000px): сцена-фон + «О нас» справа +
   выезжающий шкаф (iframe каталога). Мобайл не затрагивает.
   ========================================================= */
.desk{display:none}

@media (orientation:landscape){
  .scene{display:none !important}
  .desk{display:flex;align-items:center;justify-content:center;
    position:relative;width:100vw;height:100vh;overflow:hidden;background:#e7ddc3}
}
/* ХОЛСТ 16:9 — фон-картинка задаёт систему координат; ВСЕ объекты привязаны к нему
   в %, поэтому при любом размере экрана фон и объекты масштабируются как единое целое */
.desk__stage{position:relative;z-index:1;aspect-ratio:1672/941;width:min(100vw,calc(100vh * 1672 / 941));
  --lbl-top:81%}   /* уровень подписей маскотов (одна линия) — крути это число */
.desk__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;z-index:0;pointer-events:none;
  /* край сцены растворяется во второй экземпляр той же картинки — это ШОВ, а не украшение.
     Ночью он не должен светиться: подложка темнеет тем же фильтром, что и сцена. */
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* бледная копия фона заполняет поля (поверх светлой подложки) — край сцены тает в неё, не в пустой цвет */
.desk__backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7;z-index:0;pointer-events:none}
/* слой ветра: листья летят к порталу — самый верхний слой */
.desk__wind{position:absolute;inset:0;z-index:8;pointer-events:none}

/* трава снизу, верхним слоем во всю ширину */
/* ТЕЛЕВИЗОР — вход в ленту чайных людей. Место выбрал Норман.
   Слой 3: ниже травы (4), выше дерева (2) — стоит в траве у ствола. */
.desk__tv{position:absolute;left:34.8%;top:81.9%;width:11.8%;z-index:3;cursor:pointer;
  transform-origin:50% 100%;animation:tvSwayD 9s ease-in-out infinite}
@keyframes tvSwayD{0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(.4deg)}}
.desk__tv .chp-tv{position:relative;display:block;width:100%}
.desk__tv .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 6px 14px rgba(0,0,0,.45))}
.desk__tv .chp-tv__scr{position:absolute;z-index:1;display:block;width:0;height:0;transition:opacity .12s}

.desk__grass{position:absolute;left:0;right:0;bottom:-3%;height:13.5%;z-index:4;pointer-events:none;
  /* тафты травы снизу + градиент-«земля» под ними: всё, что ниже линии травы (низ дома, столбы доски, ноги маскотов), растворяется в землю */
  background:
    url("../assets/grass_strip.webp?v=11") repeat-x bottom center,
    linear-gradient(to bottom, rgba(208,212,204,0) 0%, rgba(208,212,204,.38) 34%, rgba(205,210,202,.82) 70%, rgba(201,206,198,.95) 100%);
  background-size:auto 62%, 100% 100%;
  background-repeat:repeat-x, no-repeat;
  background-position:bottom center, center;
  /* краевого растворения больше нет (27.07): трава идёт до самого края, как и фон */
}

/* облачное название — мягко плывёт */
.desk__title{position:absolute;top:2.4%;left:46%;width:54%;z-index:1;animation:cloudDriftD 14s ease-in-out infinite}
.desk__title img{width:100%;opacity:.45}
@keyframes cloudDriftD{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* дерево (контейнер: картинка + фоторамка на ветке качаются вместе) */
.desk__tree{position:absolute;top:-6.2%;left:-4.7%;width:64.7%;z-index:2;pointer-events:none;
  transform-origin:50% 100%;animation:treeSway 10s ease-in-out infinite}
.desk__tree-img{width:100%;display:block;position:relative;z-index:2}  /* дерево ВЫШЕ портала → портал виден только через дупло */
@keyframes treeSway{0%,100%{transform:rotate(-0.6deg)}50%{transform:rotate(0.7deg)}}
/* фотоальбом — в % от дерева (та же ветка, что на мобиле), едет с деревом */
.desk__photo{position:absolute;left:22.1%;top:29.8%;width:14.6%;z-index:2;display:block;
  pointer-events:auto;text-decoration:none;transform-origin:top center;transition:transform .4s ease}
.desk__photo:hover{transform:rotate(-2.5deg) translateY(3px)}
.desk__photo img{width:100%;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.desk__photo-label{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--hand);color:#4a3f2a;font-size:1.05rem;line-height:1.1;text-align:center}
/* КАРТИНКА В РАМКЕ вместо надписи: лежит ПОД рамой и смотрит в её окошко.
   Числа окошка обводятся в ramka.html — пока прикидка. */
.desk__photo > img:not(.desk__photo-pic){position:relative;z-index:2}
.desk__photo img.desk__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}   /* окошко обведено Норманом 27.07 в ramka.html */

/* маскоты-кнопки (под травой по слою — ступни прячутся в траве) */
.desk__mascot{position:absolute;z-index:2;cursor:pointer;text-decoration:none;transition:transform .25s}
.desk__mascot:hover{transform:translateY(-6px)}
.desk__mascot img{width:100%;display:block;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.desk__mascot.m-left{left:7.6%;width:11.3%;top:65.5%}
.desk__mascot.m-right{left:35.2%;width:11.4%;top:63.9%}
/* подписи маскотов — самостоятельные ссылки на стейдже, на ОДНОЙ линии (top: --lbl-top),
   каждая отцентрована над своим маскотом. Непрозрачная плашка. */
/* облачка — чисто декоративные: клик проходит сквозь них на маскота, без hover */
.desk__lbl{position:absolute;top:var(--lbl-top);transform:translate(-50%,-50%);z-index:5;
  display:block;pointer-events:none}   /* top = ЦЕНТР облака → оба на одной линии при разном размере */
.desk__lbl img{display:block;width:100%;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.desk__lbl--left{left:13.25%;width:4.6%}     /* облачко «о нас» (+15%) */
.desk__lbl--right{left:40.9%;width:7.76%}    /* облачко «что такое чай?» (+15%) */
/* левый «о нас» — парит вверх-вниз (двигается только фигурка, не надпись) */
.desk__mascot.m-left img{animation:floatY 4.6s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* правый «что такое чай» — еле заметно качается вбок, пятки на земле */
.desk__mascot.m-right 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)}}

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

/* чайный дом справа — стоит на террасах, основание уходит в траву */
.desk__house{position:absolute;left:61.7%;top:20.3%;width:56.6%;z-index:3;
  container-type:inline-size;                 /* для cqw у вывески-указателя */
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.30))}
.desk__house-img{display:block;width:100%;height:auto;pointer-events:none}
/* дверь в проёме (позиция в % от картинки дома; петля слева — будет распахиваться) */
.desk__door{position:absolute;left:37.8%;top:51.5%;width:13.5%;border:0;padding:0;background:none;
  cursor:pointer;transform-origin:left center;transition:transform .6s cubic-bezier(.45,.05,.4,1)}
.desk__door img{display:block;width:100%;height:auto}
/* распах: то же полотно зеркалится вокруг левой петли (1 → −1) — «открыта настежь влево» */
.desk__door.open{transform:scaleX(-1)}
/* фонарь — висит на углу кровли, покачивается как на ветру (петля сверху) */
.desk__lantern{position:absolute;left:7%;top:37%;width:6.3%;height:auto;z-index:4;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)}}


/* облако «О нас» — всплывает у медитирующего маскота */
.desk__aboutbubble{position:absolute;left:9%;bottom:24%;width:27%;max-width:400px;z-index:7;
  background:#fbf3e2;color:#3a2e1c;border-radius:20px;padding:1.2rem 1.4rem 1.3rem;
  box-shadow:0 18px 42px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transform-origin:30% 100%;
  transition:opacity .3s ease,transform .3s ease,visibility .3s}
.desk__aboutbubble.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.desk__aboutbubble::after{content:"";position:absolute;left:22%;bottom:-17px;border:11px solid transparent;border-top-color:#fbf3e2;border-bottom:0}
.desk__aboutbubble-x{position:absolute;top:.4rem;right:.6rem;border:0;background:none;font-size:1.5rem;line-height:1;color:#b39a6e;cursor:pointer}
.desk__aboutbubble h2{letter-spacing:.18em;font-size:1.05rem;margin-bottom:.15rem;color:#3a2e1c}
.desk__aboutbubble .rule{width:42%;height:1px;background:rgba(90,60,34,.4);margin:.3rem 0 .6rem}
.desk__aboutbubble p{font-size:.82rem;line-height:1.5;margin-bottom:.5rem;color:#5a4a34}
.desk__aboutbubble .q{font-style:italic;color:#b5623f;margin-bottom:0}

/* ───────── ПОЧТОВЫЙ ДОМИК (postamat): домик = кабинет, полотно «Вести» = объявления ───────── */
.desk__doska{position:absolute;left:52%;top:60%;width:12%;z-index:3;container-type:inline-size;aspect-ratio:100/178}
.desk__doska .pmt-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:88%;z-index:1;display:block;pointer-events:none}
.desk__doska .pmt-house{position:absolute;left:50%;top:0;transform:translateX(-50%);width:94%;z-index:3;display:block;cursor:pointer;transition:transform .18s ease}
.desk__doska .pmt-house img{width:100%;display:block}
.desk__doska .pmt-house:hover{transform:translateX(-50%) translateY(-3px)}
/* табличка «ОБЪЯВЛЕНИЯ» — тканевое полотно на планке (вариант 1), на палке над домиком «ПРОФИЛЬ» */
.desk__doska .pmt-vesti{position:absolute;left:50%;top:-24%;transform:translateX(-50%);width:56%;z-index:5;cursor:pointer;transition:transform .18s ease}
.desk__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)}
.desk__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)}
.desk__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)}
.desk__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}
.desk__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}
.desk__doska .pmt-vesti:hover{transform:translateX(-50%) translateY(-2px)}

/* всплывашка новостей — записки на пробке */
.dnews{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:1.5rem;
  background:rgba(12,8,5,.72);backdrop-filter:blur(3px)}
.dnews.on{display:flex}
.dnews__box{position:relative;width:100%;max-width:440px;border-radius:14px;overflow:hidden;
  /* КОЛОНКА: шапка и кнопка сверху, лента забирает ВСЁ оставшееся и скроллится сама.
     Раньше ленте задавали высоту «86vh минус 4rem на глазок» — под шапку с кнопкой
     этого не хватало, низ вылезал за окно и обрезался наглухо (прокрутить нельзя).
     dvh вместо vh: на телефоне адресная строка делает vh больше видимого экрана. */
  display:flex;flex-direction:column;
  max-height:86vh;
  max-height:min(86dvh, calc(100dvh - 3rem));
  box-shadow:0 26px 64px rgba(0,0,0,.6);animation:dnewsPop .3s ease;
  background:#a9824e;background-image:radial-gradient(rgba(0,0,0,.14) 1px,transparent 1px);background-size:7px 7px}
@keyframes dnewsPop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.dnews__x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(0,0,0,.28);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;z-index:3}
.dnews__hd{order:1;flex:0 0 auto;font-family:var(--hand),'Caveat',cursive;color:#3a2410;font-size:2rem;text-align:center;padding:1.1rem 1rem .2rem}
/* кнопка подачи: раньше у неё НЕ БЫЛО стилей вовсе — голая кнопка болталась
   в потоке над шапкой и съедала высоту, из-за чего низ ленты и обрезался */
.dnews__add{order:2;flex:0 0 auto;align-self:center;margin:.35rem 0 .1rem;
  font-family:var(--hand),'Caveat',cursive;font-size:1.25rem;line-height:1.1;color:#3a2410;
  background:linear-gradient(#e7c886,#c79a4a);border:0;border-radius:8px;
  padding:.18em 1.1em;cursor:pointer;box-shadow:0 3px 7px rgba(0,0,0,.35);
  transition:transform .12s}
.dnews__add:active{transform:scale(.96)}
.dnews__feed{order:3;flex:1 1 auto;min-height:0;             /* min-height:0 обязателен, иначе flex-ребёнок не скроллится */
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:.6rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:1.1rem;scrollbar-width:none}
.dnews__feed::-webkit-scrollbar{display:none}
/* заголовок рубрики — деревянная табличка по центру */
.dnews__rub{align-self:center;font-family:var(--hand),'Caveat',cursive;color:#3a2410;font-size:1.4rem;line-height:1.05;
  background:linear-gradient(#e7c886,#c79a4a);padding:.14em .95em;border-radius:6px;margin:.6rem 0 .15rem;
  box-shadow:0 3px 7px rgba(0,0,0,.4)}
.dnews__rub:first-child{margin-top:0}
.dnote{position:relative;background:#fdf7e3;padding:.85rem .95rem;box-shadow:0 7px 14px rgba(0,0,0,.35);font-family:'Spectral',serif}
.dnote:nth-child(odd){transform:rotate(-1.3deg)}.dnote:nth-child(even){transform:rotate(1.1deg);background:#fbeec4}
.dnote::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e0584a,#9a2418);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.dnote b{display:block;color:#5a3a1e;font-size:1.12rem}
.dnote p{color:#6a5638;font-size:.92rem;line-height:1.45;margin-top:.25rem}
.dnote__ph{display:block;width:100%;height:120px;border-radius:3px;margin-top:.6rem;
  background:linear-gradient(135deg,#7d9a5a,#46612f)}

/* трава у подножия дома (trava2) — посчитана из дома по тем же долям, что в мобилке
   (моб: дом left1.5/top13.2/w93.6, trava left0/top40/w100 → trava = −1.6% / +77.5% / 106.8% от дома).
   Дом десктоп: left61.7 top20.3 w56.6, высота дома ≈86.4% сцены → trava: */
.desk__trava{position:absolute;left:60.8%;top:87.3%;width:60.4%;height:auto;z-index:5;pointer-events:none}

/* паутина с паучком — в пустоте между палками постамата (за палками, декор) */
.desk__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))}

/* ── столб-указатель (вместо маскотов) ── */
@font-face{font-family:'SouthPark';src:url('../assets/SouthPark.otf') format('opentype');font-display:swap}
.desk__signpost{position:absolute;left:32%;top:59%;width:16%;z-index:2;pointer-events:none}
.desk__signpost svg{width:100%;height:auto;display:block;pointer-events:none;overflow:visible}
.desk__signpost .sp-hit{position:absolute;display:block;cursor:pointer;pointer-events:auto}
.desk__signpost .sp-hit:hover{filter:brightness(1.08)}

/* ── висячие таблички на ветках (качаются в синхрон с деревом) ── */
.desk__hangsigns{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible;
  transform-origin:27.65% 100.8%;animation:treeSway 10s ease-in-out infinite}
/* лёгкий маятник каждой таблички вокруг точки подвеса (чистый CSS, без мерцания) */
@keyframes hsSwing{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.desk__hangsigns .hs-swing{animation:hsSwing 3.7s ease-in-out infinite;will-change:transform}
.desk__hangsigns .hs-s0{animation-duration:3.5s}
.desk__hangsigns .hs-s1{animation-duration:4.3s;animation-delay:-1.2s}
.desk__hangsigns a{pointer-events:auto;cursor:pointer}

/* облако «О нас» над табличкой (позиция задаётся из hangsigns.js) */
.desk__aboutbubble.above{width:22%;max-width:340px;transform-origin:50% 100%}
.desk__aboutbubble.above::after{left:50%;bottom:-16px}
.desk__aboutbubble.above .desk__aboutbubble-x{display:none}

/* лайк + просмотры на объявлении (мелко, в стиле Telegram) */
.dn-like{display:inline-flex;align-items:center;gap:3px;margin-left:.5rem;background:none;border:0;padding:2px 0;cursor:pointer;font-size:.78rem;color:#9a8058;font-family:'Spectral',serif;vertical-align:middle}
.dn-like svg{width:14px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:1.8}
.dn-like:hover{color:#c96a5a}
.dn-like.on{color:#d9534f}
.dn-like.on svg{fill:#d9534f;stroke:#d9534f}
.dn-views{display:inline-flex;align-items:center;gap:3px;margin-left:.5rem;font-size:.76rem;color:#a89575;font-family:'Spectral',serif;vertical-align:middle;opacity:.85}
.dn-views svg{width:12px;height:8px;display:block}

/* ── значок «сколько записей ты ещё не смотрел» на телевизоре ──
   Кружок в углу корпуса (выбор Нормана, 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}