/* =====================================================================
   «Найди добрые дела» — интерактивный виммельбух TAWAKKUL Kids.
   Стандарт игрового интерфейса v1 «гуашевая аппликация»: детский интерфейс без слов (голос + картинка),
   задания-марки сверху, нижние 7 % экрана пустые (запястья), зона нажатия не меньше 96 px,
   отклик в момент касания, проиграть нельзя. Без SVG-фильтров; движение — только transform.
   Шрифт для ребёнка — Andika (дизайн-гайд), файлы сайта в /fonts/.
   Телефон: горизонтально и вертикально (в вертикали картинка заполняет высоту и листается пальцем).
   ===================================================================== */
@font-face{font-family:'Andika';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/andika-400-v1.woff2') format('woff2')}
@font-face{font-family:'Andika';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/andika-700-v1.woff2') format('woff2')}

/* ===== Токены стандарта TAWAKKUL Kids: гуашевая аппликация ===== */
:root{
  --ink:#3a2a40; --paper:#f3e6cc; --paper2:#e9d6b2; --ochre:#d9a441; --terra:#c8644c; --indigo:#2f3a6b;
  --sage:#7f9b6e; --sky:#8fb7c9; --rose:#e3a08c; --gold:#f2c14e; --cream:#fbf3e2;
  --band:112px; --wrist:7vh; --hit:96px; --med:80px; --stamp:88px;
  --t-press:80ms; --t-release:180ms; --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --kf:'Andika',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* вырез экрана и закруглённые углы телефона */
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--kf);font-weight:700;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;-webkit-text-size-adjust:100%}
img{-webkit-user-drag:none;user-select:none;max-width:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:4px solid var(--indigo);outline-offset:2px}
#game{position:fixed;inset:0;overflow:hidden;background:url(assets/paper.webp) var(--paper);background-size:256px}
.screen{position:absolute;inset:0;display:none;container-type:size}
.screen.on{display:block}

/* ===== Медальон: кнопка из вырезанной гуашевой бумаги ===== */
.hit{position:absolute;display:flex;align-items:center;justify-content:center;width:var(--hit);height:var(--hit);touch-action:manipulation;cursor:pointer}
.med{position:relative;width:var(--med);height:var(--med);background:url(ui/med_ochre.webp) center/contain no-repeat;display:flex;align-items:center;justify-content:center;
  transition:transform var(--t-release) var(--ease-spring)}
.med svg{width:50%;height:50%;margin-top:-6%;stroke:var(--ink);stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hit.down .med{transform:translateY(4px) scale(.93);transition-duration:var(--t-press)}
.med.cream{background-image:url(ui/med_cream.webp)} .med.sage{background-image:url(ui/med_sage.webp)} .med.terra{background-image:url(ui/med_terra.webp)}
.hit.bigh{width:150px;height:150px}
.med.big{width:136px;height:136px}
.med.small{width:56px;height:56px}
.quiet{opacity:.55}
.sheet .hit,.tapgo .hit,#splash .hit{position:relative}
/* значок звука: перечёркнут, когда звук выключен */
.snd .off-l{display:none}
.snd.off .off-l{display:inline}
.snd.off .on-l{display:none}

/* ===== Полоса HUD сверху (вне зоны запястий) ===== */
#band{position:absolute;left:0;right:0;top:0;height:calc(var(--band) + var(--st));pointer-events:none;z-index:6}
#band::before{content:"";position:absolute;left:-1%;right:-1%;top:-22px;bottom:-16px;background:url(ui/band.webp) center bottom/100% 100% no-repeat}
#band > *{pointer-events:auto}
#btn-home{left:var(--sl);top:var(--st);padding:14px 0 0 14px;align-items:flex-start;justify-content:flex-start;width:calc(var(--hit) + 14px);height:calc(var(--hit) + 14px)}
#btn-pause{right:var(--sr);top:var(--st);padding:14px 14px 0 0;align-items:flex-start;justify-content:flex-end;width:calc(var(--hit) + 14px);height:calc(var(--hit) + 14px)}
#stamps{position:absolute;top:calc(var(--st) + 10px);left:calc(var(--sl) + 236px);right:calc(var(--sr) + 200px);height:96px;display:flex;justify-content:center;align-items:center;gap:14px}
#pot{position:absolute;right:calc(var(--sr) + 112px);top:calc(var(--st) + 12px);width:84px;height:88px}

/* Марка-задание: вырезка героя на бумажной марке */
.stamp{position:relative;width:var(--stamp);height:var(--stamp);flex:0 0 auto;transition:transform 220ms var(--ease-spring);cursor:pointer}
.stamp::before{content:"";position:absolute;left:-3px;right:-3px;top:-14px;bottom:-14px} /* зона нажатия выше и ниже марки */
.stamp img{position:absolute;left:16.5%;top:17%;width:67%;height:66%;display:block;filter:grayscale(.85) sepia(.35) contrast(.9) brightness(1.05)}
.stamp::after{content:"";position:absolute;inset:0;background:url(ui/stamp_cream.webp) center/100% 100% no-repeat;pointer-events:none;z-index:1}
.stamp.cur{transform:translateY(-3px) scale(1.16) rotate(-3deg)}
.stamp.cur::after{background-image:url(ui/stamp_gold.webp)}
.stamp.cur img{filter:none}
.stamp.found img{filter:none}
.stamp.found::after{background-image:url(ui/stamp_found.webp)}
.stamp.riddle img{filter:blur(7px) grayscale(.6) brightness(1.1)}
.stamp.riddle .q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 calc(var(--stamp) * .5)/1 var(--kf);color:var(--ink);z-index:2}
.stamp.wiggle{animation:wig .5s 2}
@keyframes wig{25%{transform:translateY(-3px) scale(1.14) rotate(-7deg)}75%{transform:translateY(-3px) scale(1.14) rotate(5deg)}}
.stamp.thump,#pot.thump{animation:thump .35s var(--ease-spring)}
@keyframes thump{0%{transform:scale(1.3)}100%{transform:scale(1)}}
.queue{font:700 22px var(--kf);color:var(--ink);opacity:.6;min-width:40px;text-align:center}

/* Горшок сада: растёт с каждой находкой */
#pot .potimg{position:absolute;left:4px;bottom:0;width:78px;height:auto;z-index:2}
#pot .count{position:absolute;left:4px;bottom:12px;width:78px;text-align:center;font:700 26px var(--kf);color:var(--cream);z-index:3;text-shadow:0 1px 0 var(--ink),0 -1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink)}
#pot .fl{position:absolute;bottom:50px;z-index:1;width:22px;height:22px;transform-origin:50% 100%;animation:grow .5s var(--ease-spring) both}
#pot .fl i{position:absolute;left:10px;top:20px;width:3px;height:16px;background:var(--sage);border-radius:2px}
@keyframes grow{from{transform:scale(0)}to{transform:scale(1)}}

/* ===== Сцена ===== */
#stage{position:absolute;left:var(--sl);right:var(--sr);top:calc(var(--band) + var(--st) - 6px);bottom:calc(var(--wrist) + var(--sb));overflow:hidden;touch-action:none;cursor:grab}
#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#pic{display:block;width:2752px;height:1536px;pointer-events:none;border-radius:6px}
#fxl{position:absolute;inset:0;pointer-events:none}
.ripple{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:6px solid rgba(251,243,226,.95);animation:rip .55s ease-out forwards}
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
.petal{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:60% 40% 60% 40%;background:var(--rose);border:2px solid var(--ink);animation:pet .7s ease-out forwards}
@keyframes pet{from{transform:translate(0,0) rotate(0) scale(.6);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(160deg) scale(1);opacity:0}}
.light{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,246,205,.8),rgba(255,246,205,.35) 60%,rgba(255,246,205,0));animation:lightin .6s ease-out both}
@keyframes lightin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.sparkle{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;animation:spk 1.1s ease-in-out 4 both}
.sparkle::before{content:"";position:absolute;inset:0;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);border-radius:2px}
@keyframes spk{0%,100%{transform:scale(.3);opacity:.2}50%{transform:scale(1.1);opacity:1}}
.outline{position:absolute;border:12px solid var(--gold);border-radius:44% 56% 48% 52%;box-shadow:0 0 0 5px var(--ink),inset 0 0 0 5px var(--ink);animation:pulse 1s ease-in-out 6 both}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.8}}

/* Наклейка: найденный герой взлетает в свою марку */
.sticker{position:absolute;left:0;top:0;width:118px;height:118px;z-index:12;pointer-events:none;will-change:transform;filter:drop-shadow(0 8px 10px rgba(0,0,0,.22))}
.sticker img{position:absolute;left:16.5%;top:17%;width:67%;height:66%;display:block}
.sticker::after{content:"";position:absolute;inset:0;background:url(ui/stamp_found.webp) center/100% 100% no-repeat}

/* Подпись к голосу (для родителей; при выключенном звуке — всегда): бумажная лента, не окно */
#caption{position:absolute;left:50%;top:calc(var(--band) + var(--st) + 6px);transform:translate(-50%,-12px);opacity:0;width:min(760px,86vw);z-index:7;pointer-events:none;
  background:url(ui/sheet.webp) center/100% 100% no-repeat;padding:18px 28px 20px;
  font:400 19px/1.45 var(--kf);transition:opacity .25s,transform .25s}
#caption.on{opacity:1;transform:translate(-50%,0)}
#caption small{display:block;margin-top:4px;font:700 13px var(--kf);opacity:.7}

/* Заставка задания: бумажный баннер */
#intro{position:absolute;inset:0;z-index:9;display:none;align-items:center;justify-content:center;background:rgba(58,42,64,.18)}
#intro.on{display:flex}
.banner{position:relative;transition:translate .25s ease;padding:34px 56px 40px;background:url(ui/sheet.webp) center/100% 100% no-repeat;text-align:center;animation:drop .5s var(--ease-spring) both;max-width:92vw}
@keyframes drop{from{transform:translateY(-40px) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.banner h1{margin:0 0 14px;font:700 clamp(34px,5.4vw,60px)/1.05 var(--kf);letter-spacing:.2px}
.banner .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.banner .row .stamp{--stamp:70px}
.banner .tapgo{margin-top:18px;display:flex;justify-content:center}

/* ===== Карта «Город добрых дел» и сад: картинка 16:9 ===== */
.pan{position:absolute;inset:0}
.stage16{position:absolute;left:50%;top:calc((100cqh - var(--wrist) - var(--sb)) / 2);transform:translate(-50%,-50%);
  width:min(100cqw, calc((100cqh - var(--wrist) - var(--sb)) * 1.7778));aspect-ratio:16/9;border-radius:10px}
.stage16 > img{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:10px;pointer-events:none}
/* картинка ещё не назначена — не показывать значок «нет картинки» */
#mapimg:not([src]),#gbg:not([src]),#pic:not([src]){visibility:hidden}
#mapstage{background:url(ui/map-thumb.webp) center/100% 100% no-repeat}
.place{position:absolute;touch-action:manipulation;cursor:pointer}
.panhint{display:none;z-index:7;top:50%;margin-top:calc(var(--hit) / -2)}
#pan-l{left:var(--sl)} #pan-r{right:var(--sr)}
#pan-l .med{animation:nudge-l 1.4s ease-in-out 1s 3} #pan-r .med{animation:nudge-r 1.4s ease-in-out 1s 3}
@keyframes nudge-l{50%{translate:-6px 0}} @keyframes nudge-r{50%{translate:6px 0}}
.place .pin{left:50%;top:50%;transform:translate(-50%,-50%)}
.place.soon .med{opacity:.92}
.place.wig .med{animation:wig2 .5s 2}
@keyframes wig2{25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}
.bounce{animation:bnc .7s ease-in-out .6s 3}
@keyframes bnc{50%{transform:translateY(-14px)}}
.titlecard{position:absolute;left:50%;top:calc(var(--st) + 2.5%);transform:translateX(-50%);padding:14px 40px 18px;z-index:2;
  background:url(ui/sheet.webp) center/100% 100% no-repeat;font:700 clamp(26px,3.8vw,46px)/1 var(--kf);white-space:nowrap;pointer-events:none}
#lock{right:var(--sr);top:var(--st);padding:16px 16px 0 0;align-items:flex-start;justify-content:flex-end;width:110px;height:110px;z-index:8}
/* кнопка звука: на карте — слева сверху, в саду — под кнопкой «ещё раз»; в игре она в меню паузы */
#btn-sound{display:none;z-index:8;width:110px;height:110px}
#game[data-scr="start"] #btn-sound{display:flex;left:var(--sl);top:var(--st);padding:16px 0 0 16px;align-items:flex-start;justify-content:flex-start}
#game[data-scr="garden"] #btn-sound{display:flex;right:var(--sr);top:calc(var(--st) + 110px);padding:0 16px 0 0;align-items:flex-start;justify-content:flex-end}

/* ===== Сад ===== */
#bed{position:absolute;left:4%;right:4%;bottom:15.5%;height:34%;z-index:0;isolation:isolate}
.bedrow{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(12,1fr);align-items:end}
.bedrow.r1{bottom:38%;left:7%;right:7%;z-index:-1;filter:saturate(.9) brightness(.97)}
.bedrow.r2{bottom:62%;left:13%;right:13%;z-index:-2;filter:saturate(.8) brightness(.94)}
.flower{position:relative;width:120%;margin-left:-10%;aspect-ratio:224/396;animation:grow .6s var(--ease-spring) both;transform-origin:50% 100%}
.flower .fimg{position:absolute;inset:0;width:100%;height:100%;display:block}
.flower .core{position:absolute;left:29.3%;top:16.2%;width:43.5%;aspect-ratio:1;border-radius:50%;overflow:hidden}
.flower .core img{width:100%;height:100%;display:block}
.flower.bud{animation-name:growbud;opacity:.5;filter:grayscale(.9)}
@keyframes growbud{from{transform:scale(0)}to{transform:scale(.6)}}
.flower.bud .core{display:none}
#homedeed{position:absolute;left:50%;top:calc(var(--st) + 17%);transform:translateX(-50%);width:min(560px,58%);z-index:2;
  background:url(ui/sheet.webp) center/100% 100% no-repeat;padding:18px 28px 20px;font:400 clamp(13px,1.4vw,16px)/1.4 var(--kf)}
#homedeed b{font-weight:700}
#homedeed ul{margin:4px 0 0;padding-left:20px}
#btn-g-home{left:var(--sl);top:var(--st);padding:14px 0 0 14px;align-items:flex-start;justify-content:flex-start;width:124px;height:124px;z-index:3}
#btn-g-again{right:var(--sr);top:var(--st);padding:14px 14px 0 0;align-items:flex-start;justify-content:flex-end;width:124px;height:110px;z-index:3}

/* ===== Пауза, замок, родителям ===== */
.sheet{position:absolute;left:50%;top:0;z-index:20;transform:translate(-50%,calc(-100% - 60px));transition:transform .35s var(--ease-spring);
  background:url(ui/sheet.webp) center/100% 100% no-repeat;padding:calc(var(--st) + 40px) 46px 40px;display:flex;gap:26px;align-items:center}
.sheet.on{transform:translate(-50%,0)}
#veil{position:absolute;inset:0;z-index:19;background:rgba(58,42,64,.25);display:none}
#veil.on{display:block}
#gate,#parent{position:absolute;left:50%;top:50%;z-index:30;transform:translate(-50%,-50%);display:none;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:20px 24px;width:min(560px,92vw);
  max-height:calc(100% - 24px);overflow:auto;font:400 17px/1.45 var(--kf);box-shadow:0 6px 0 var(--ink);user-select:text;-webkit-user-select:text}
#gate.on,#parent.on{display:block}
#gate h3,#parent h3{margin:0 0 10px;font:700 20px var(--kf)}
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.keys button{height:56px;border:2.5px solid var(--ink);border-radius:10px;font:700 24px var(--kf);background:var(--cream)}
.row2{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.chip{border:2.5px solid var(--ink);border-radius:99px;padding:8px 14px;font:700 15px var(--kf);background:var(--cream);min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.chip.on{background:var(--gold)}
.pnote{font-size:15px;opacity:.8}
.plegal{margin:4px 0 0;font:400 13px/1.4 var(--kf);opacity:.7}
.lockring{position:absolute;inset:-6px;border-radius:50%;border:5px solid var(--gold);clip-path:inset(0 100% 0 0);transition:clip-path 2s linear}
.hit.holding .lockring{clip-path:inset(0 0 0 0)}

/* Секундомер — бумажная бирка, только если включил взрослый */
#watch{position:absolute;right:calc(var(--sr) + 206px);top:calc(var(--st) + 36px);display:none;font:700 20px var(--kf);background:var(--cream);border:2.5px solid var(--ink);border-radius:8px;padding:4px 10px}
#watch.on{display:block}

/* ===== Совушка ===== */
#owl{position:absolute;left:0;top:0;width:104px;height:124px;z-index:15;touch-action:none;cursor:grab;will-change:transform}
#owl .owl-breath{width:100%;height:100%;transform-origin:50% 85%;animation:breath 4.4s ease-in-out infinite}
#owl .rig{position:absolute;left:calc(50% - 220px);top:0;width:440px;height:540px;transform-origin:50% 0}
#owl .rig-flip{position:absolute;inset:0;transform-origin:50% 62%;will-change:transform}
#owl .ow{position:absolute;display:block;will-change:transform;pointer-events:none}
#owl .body{left:54px;top:184px;width:332px;height:356px}
#owl .wing-l{left:-16px;top:206px;width:179px;height:269px}
#owl .wing-r{left:284px;top:206px;width:160px;height:272px}
#owl .head{left:76px;top:26px;width:288px;height:228px}
#owl .hx{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden}
#owl .hx.on{visibility:visible}
#owl.sleeping .owl-breath{animation-play-state:paused}
@keyframes breath{50%{transform:scale(1.012,1.024)}}
.owl-fx{position:absolute;inset:0;pointer-events:none}
.ofx{position:absolute;left:62%;top:-6%;font:700 24px var(--kf);color:var(--ink);animation:ofx 1.6s ease-out forwards}
.ofx.spark{color:var(--gold);-webkit-text-stroke:1px var(--ink)} .ofx.s1{left:10%}.ofx.s2{left:45%;top:-16%;animation-delay:.12s}.ofx.s3{left:80%;animation-delay:.24s}
.ofx.z{color:var(--indigo);font-size:20px;animation:zz 2.7s ease-out infinite} .ofx.d1{animation-delay:.9s}.ofx.d2{animation-delay:1.8s}
.ofx.bang{color:var(--terra);font-size:30px}
@keyframes ofx{from{transform:translateY(0);opacity:1}to{transform:translate(8px,-34px);opacity:0}}
@keyframes zz{from{transform:translate(0,0);opacity:0}20%{opacity:1}to{transform:translate(18px,-40px);opacity:0}}
#bubble{position:absolute;left:0;top:0;z-index:16;max-width:min(360px,60vw);background:url(assets/paper.webp) #fff;background-size:256px;border:2.5px solid var(--ink);border-radius:16px 18px 18px 4px;
  padding:9px 14px;font:700 19px/1.3 var(--kf);box-shadow:0 3px 0 var(--ink);display:none;pointer-events:none}
#bubble.on{display:block}

/* ===== Заставка: первое касание включает звук и открывает карту ===== */
#splash{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:rgba(243,230,204,.55);
  padding:calc(var(--st) + 64px) calc(var(--sr) + 16px) calc(var(--sb) + 24px) calc(var(--sl) + 16px)}
#splash.on{display:flex}
/* пока открыта заставка, кнопки карты не показываются (и их картинки не грузятся) */
#game.pre .place,#game.pre .titlecard,#game.pre #lock,#game.pre #btn-sound,#game.pre .sheet,#game.pre .panhint{display:none}
.sp-card{position:relative;text-align:center;padding:26px 30px 22px;background:url(assets/paper.webp) var(--cream);background-size:256px;border:3px solid var(--ink);
  border-radius:20px;box-shadow:0 6px 0 var(--ink);width:min(92vw,500px);cursor:pointer;animation:drop .5s var(--ease-spring) both}
.sp-card h1{margin:0;font:700 clamp(30px,6vw,46px)/1.05 var(--kf);text-wrap:balance}
.sp-card .sp-sub{margin:10px auto 0;max-width:30em;font:400 16px/1.4 var(--kf);opacity:.85;text-wrap:pretty}
.sp-card .hit{margin:14px auto 0}
.sp-back{position:absolute;left:calc(var(--sl) + 12px);top:calc(var(--st) + 12px);z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px 8px 12px;
  border-radius:99px;background:var(--cream);border:2.5px solid var(--ink);font:700 16px var(--kf);text-decoration:none;box-shadow:0 3px 0 var(--ink)}
.sp-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ===== Невысокий экран телефона боком: полоса заданий тоньше, картинка больше ===== */
@media (orientation:landscape) and (max-height:560px){
  :root{--band:78px;--med:60px;--stamp:60px;--wrist:5vh}
  #btn-home,#btn-pause{width:var(--hit);height:var(--hit)}
  #btn-home{padding:9px 0 0 9px} #btn-pause{padding:9px 9px 0 0}
  #stamps{top:calc(var(--st) + 8px);left:calc(var(--sl) + 186px);right:calc(var(--sr) + 172px);height:62px;gap:8px}
  #pot{right:calc(var(--sr) + 98px);top:calc(var(--st) + 4px);scale:.74;transform-origin:100% 0}
  #watch{right:calc(var(--sr) + 166px);top:calc(var(--st) + 84px)}
  #owl{width:78px;height:93px}
  .hit.bigh{width:120px;height:120px} .med.big{width:100px;height:100px} .med.small{width:48px;height:48px}
  #caption{font-size:16px;padding:12px 22px 14px;width:min(640px,80vw)}
  .banner{padding:20px 40px 24px} .banner h1{font-size:32px;margin-bottom:10px} .banner .row .stamp{--stamp:52px} .banner .tapgo{margin-top:8px}
  .titlecard{font-size:24px;padding:10px 28px 12px}
  #homedeed{top:calc(var(--st) + 19%);width:min(520px,56%);padding:12px 22px 14px;font-size:13px}
  .sheet{padding:calc(var(--st) + 26px) 30px 26px;gap:16px}
  #lock,#game[data-scr="start"] #btn-sound{width:96px;height:96px}
  #game[data-scr="start"] #btn-sound{padding:10px 0 0 10px} #lock{padding:10px 10px 0 0}
  #btn-g-home,#btn-g-again{width:100px;height:96px;padding-top:9px}
  #game[data-scr="garden"] #btn-sound{top:calc(var(--st) + 92px);width:96px;height:96px}
  .sp-card{padding:16px 24px 14px} .sp-card .sp-sub{margin-top:6px;font-size:15px}
  #splash{padding-top:calc(var(--st) + 16px)}
}

/* ===== Телефон вертикально: две строки заданий, картинку листают пальцем ===== */
@media (orientation:portrait) and (max-width:900px){
  :root{--band:148px;--med:60px;--stamp:58px;--wrist:6vh}
  #btn-home,#btn-pause{width:var(--hit);height:var(--hit)}
  #btn-home{padding:10px 0 0 10px} #btn-pause{padding:10px 10px 0 0}
  #pot{right:calc(var(--sr) + 96px);top:calc(var(--st) + 6px);scale:.74;transform-origin:100% 0}
  #stamps{left:calc(var(--sl) + 6px);right:calc(var(--sr) + 6px);top:calc(var(--st) + 80px);height:62px;gap:7px}
  #watch{right:calc(var(--sr) + 8px);top:calc(var(--st) + 150px);font-size:17px}
  #owl{width:84px;height:100px}
  #caption{font-size:16px;padding:14px 20px 16px;width:94vw}
  .banner{padding:24px 18px 28px} .banner h1{font-size:34px} .banner .row{gap:8px} .banner .row .stamp{--stamp:58px}
  /* карта и сад заполняют высоту экрана и листаются вбок */
  .pan{overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pan::-webkit-scrollbar{display:none}
  .stage16{position:relative;left:0;top:0;transform:none;height:calc(100cqh - var(--wrist) - var(--sb));width:calc((100cqh - var(--wrist) - var(--sb)) * 1.7778);border-radius:0}
  .stage16 > img{border-radius:0}
  .panhint:not([hidden]){display:flex}
  .titlecard{display:none} /* в вертикальном телефоне картинка шире экрана: подпись ушла бы за край */
  #lock,#game[data-scr="start"] #btn-sound{width:96px;height:96px}
  #game[data-scr="start"] #btn-sound{padding:10px 0 0 10px} #lock{padding:10px 10px 0 0}
  #homedeed{top:calc(var(--st) + 84px);width:94vw;font-size:14px;padding:14px 20px 16px}
  #btn-g-home,#btn-g-again{width:96px;height:96px;padding-top:10px}
  #btn-g-home{padding-left:10px} #btn-g-again{padding-right:10px}
  #game[data-scr="garden"] #btn-sound{top:auto;bottom:calc(var(--wrist) + var(--sb) + 4px);width:96px;height:96px;align-items:flex-end;padding:0 10px 0 0}
  .sheet{flex-wrap:wrap;justify-content:center;width:min(94vw,380px);gap:6px 10px;padding:calc(var(--st) + 30px) 16px 34px}
  .sheet #p-go{order:-1;flex-basis:100%}
}
@media (max-width:370px){:root{--stamp:52px} #stamps{gap:5px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important}#owl .owl-breath{animation:none}}