/* «Ну почему?» — оформление «Остров». Одна таблица стилей на все страницы сайта (кроме листов для печати и объёмной модели).
   Порядок: переменные → основа → кнопки → шапка → главная (герой, остров, полка, взрослым) → страница ответа → Мастерская → окна → Дракоша и движение → экраны поменьше. */
:root{
  --sky-1:#9cd6fb; --sky-2:#d6effd; --sky-3:#fff3da;
  --sea-1:#86d4e2; --sea-2:#52b8cf; --sea-3:#3797b6; --shallow:#b8ecec; --foam:#f3feff;
  --sand:#fbe7bd; --sand-2:#f0d193; --sand-3:#dcb46c;
  --grass:#a5d978; --grass-2:#84c55e; --grass-3:#5ea647;
  --ink:#3a3557; --ink-2:#5f5a7c;
  --paper:#fffaf0; --paper-2:#fff1d2;
  --sun:#ffd04a; --coral:#ff8164;
  --lilac-soft:#e9e3ff; --violet-soft:#f1ecff;
  --wood:#d69c66; --wood-2:#b97a47;
  --deep:#2c7896;
  --focus:#1c5fd4;
  --r-lg:32px; --r-md:24px;
  --lift:0 5px 0 rgba(58,53,87,.2);
  --press:0 1px 0 rgba(58,53,87,.2);
  --soft:0 18px 36px -18px rgba(32,58,112,.45);
  --font-head:'Rubik','Nunito','Trebuchet MS',Arial,sans-serif;
  --font-body:'Nunito','Segoe UI',Arial,sans-serif;
  --gl:max(16px, env(safe-area-inset-left, 0px));
  --gr:max(16px, env(safe-area-inset-right, 0px));
  --jump:-24px;
}
html.calm{--jump:-8px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--font-body);font-size:20px;line-height:1.42;font-weight:600;overflow-x:hidden}
body.modal-open{overflow:hidden}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--font-head);font-weight:800;line-height:1.12;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:4px solid var(--focus);outline-offset:4px;border-radius:14px}
.wrap{max-width:1192px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:10px 16px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sprite *{animation:none!important}
.art .o{stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.art .t{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.art .h{stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ico{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:72px;padding:12px 30px;border-radius:999px;border:3px solid var(--ink);background:var(--sun);font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.1;box-shadow:var(--lift);text-decoration:none;text-align:center;transition:transform .15s ease,box-shadow .15s ease,background .2s}
.btn svg{width:30px;height:30px;flex:none}
.btn:active{transform:translateY(4px);box-shadow:var(--press)}
.btn--paper{background:var(--paper)}
.btn--coral{background:var(--coral)}
.btn--big{min-height:88px;font-size:26px;padding:16px 38px}
.btn--small{min-height:64px;font-size:19px;padding:10px 22px}
.btn--adult{min-height:52px;font-size:18px;padding:8px 20px;box-shadow:none}
.btn--adult svg{width:24px;height:24px}
.ibtn{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);background:var(--paper);display:grid;place-items:center;box-shadow:var(--lift);flex:none;padding:0;transition:transform .15s ease,box-shadow .15s ease,background .2s}
.ibtn svg{width:32px;height:32px}
.ibtn:active{transform:translateY(4px);box-shadow:var(--press)}
.ibtn[aria-pressed="true"]{background:var(--sun)}
.read.speaking svg{animation:pulse 1s ease-in-out infinite}
.boing{animation:boing .32s ease-out}
html.calm .boing{animation:boingSoft .25s ease-out}
.reading{background:linear-gradient(transparent 62%,rgba(255,208,74,.75) 62%) no-repeat;background-size:0 100%;animation:readsweep 1.8s ease forwards}
html.calm .reading{animation:none;background-size:100% 100%}

/* ---------- шапка ---------- */
.top{background:var(--sky-1);position:relative;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:6px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:64px;border-radius:18px}
.logo-badge{width:64px;height:64px;flex:none}
.logo-name{font-family:var(--font-head);font-weight:800;font-size:30px;line-height:1}
.logo-name span{white-space:nowrap}
.tools{display:flex;gap:16px;align-items:flex-start}
.tool{display:flex;flex-direction:column;align-items:center;gap:5px}
.tool small{font-size:14px;font-weight:800;color:var(--ink);line-height:1}

/* ---------- главная: герой и «Новый вопрос» ---------- */
.hero{position:relative;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 52%,var(--sky-3) 100%);overflow:hidden;padding:0 0 58px}
.adult-line{position:relative;z-index:2;font-size:16px;font-weight:700;color:var(--ink);padding:2px 0 0;max-width:820px}
.adult-line b{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:1px 9px;margin-right:6px;vertical-align:1px}
.sky-deco{position:absolute;inset:0;pointer-events:none}
.sun{position:absolute;right:3%;top:-34px;width:190px}
/* в покое «живёт» только герой: облака и море почти неподвижны (циклы 40–60 с, малая амплитуда) */
.cloud{position:absolute;width:150px;animation:drift 52s ease-in-out infinite}
.cloud.c1{left:2%;top:40px}
.cloud.c2{left:24%;top:48px;width:110px;animation-duration:58s;animation-delay:-20s}
.cloud.c3{left:46%;bottom:120px;width:130px;animation-duration:46s;animation-delay:-12s}
.gulls{position:absolute;left:22%;top:120px;width:70px}
.horizon{position:absolute;left:0;bottom:0;width:100%;height:96px}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:380px minmax(0,1fr);gap:36px;align-items:end;padding-top:28px}
.drako-stage{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;margin-bottom:-54px}
.bubble{position:relative;max-width:340px;background:#fff;border:3px solid var(--ink);border-radius:26px;padding:16px 20px;font-weight:800;font-size:21px;line-height:1.3;box-shadow:var(--soft);transform-origin:30% 100%}
.bubble::after{content:"";position:absolute;left:34%;bottom:-17px;width:28px;height:28px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) skew(8deg,8deg);border-bottom-right-radius:6px}
.bubble.pop{animation:pop .25s ease-out}
.drako-spot{position:relative;width:320px;display:flex;flex-direction:column;align-items:center}
.drako-btn{position:relative;z-index:2;background:none;border:0;padding:0;width:280px;border-radius:40px}
.drako-btn .drako{width:100%;height:auto;overflow:visible}
.islet{width:340px;margin-top:-46px;position:relative;z-index:1}
.tap-hint{position:absolute;right:8px;top:46%;z-index:3;width:46px;height:46px;pointer-events:none}
.qday{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:0 8px 0 rgba(58,53,87,.16),var(--soft);padding:34px 34px 30px;margin-top:24px}
.tag{display:inline-flex;align-items:center;gap:8px;background:var(--sun);border:3px solid var(--ink);border-radius:999px;padding:5px 18px 6px 10px;font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.1;text-decoration:none}
.tag svg{width:26px;height:26px;flex:none}
.qday .tag{position:absolute;top:-24px;left:26px;transform:rotate(-3deg)}
.qday-head{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:center}
.qday-pic{position:relative;display:block;border:3px solid var(--ink);border-radius:24px;overflow:hidden;aspect-ratio:240/150;background:var(--sky-2)}
.qday-pic img{width:100%;height:100%;object-fit:cover;display:block}
.qday-chip{display:none;position:absolute;left:8px;bottom:8px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:2px 10px;font-size:14px;font-weight:800;line-height:1.3}
.qday-qrow{display:flex;align-items:center;gap:10px}
.qday-qrow .ibtn{display:none}
.qday-q{font-size:40px;margin-bottom:10px}
.qday-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:18px;font-size:16px;font-weight:800;color:var(--ink-2)}
.qday-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.qday-btns .btn{white-space:nowrap}
.age{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:34px;padding:0 12px;border-radius:999px;background:var(--coral);border:3px solid var(--ink);font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);flex:none;white-space:nowrap}
.age-pill{display:inline-flex;align-items:center;min-height:30px;padding:2px 12px;border-radius:999px;background:var(--lilac-soft);border:2px solid var(--ink);font-size:15px;font-weight:800;line-height:1}
html[data-age="3-4"] [data-age="5-7"]{display:none!important}

/* ---------- море и остров ---------- */
.sea{position:relative;padding:34px 0 150px;overflow:hidden;
  background-color:var(--sea-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='96' viewBox='0 0 160 96'%3E%3Cpath d='M12 30 q10 -8 20 0 t20 0' fill='none' stroke='%23ffffff' stroke-opacity='.55' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M92 76 q10 -8 20 0 t20 0' fill='none' stroke='%23ffffff' stroke-opacity='.4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--sea-1),var(--sea-2));
  background-size:160px 96px,100% 100%}
/* фон моря стоит: сдвиг фоновой картинки заставлял телефон перерисовывать экран каждый кадр (К3 §5) */
.sec-head{text-align:center;margin-bottom:22px;position:relative;z-index:2}
.sec-head h2{font-size:clamp(30px,4vw,44px)}
.sec-head p{font-size:20px;font-weight:700;color:var(--ink-2);margin-top:6px}
.sea .sec-head p{color:var(--ink)}
.map{position:relative;max-width:1160px;margin:0 auto;aspect-ratio:1200/760}
.island-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.island-art .foam{opacity:.55}
.trail{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.trail .base{fill:none;stroke:var(--sand);stroke-width:22;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.trail .base.solid{opacity:.95}
.trail .edge{fill:none;stroke:var(--sand-2);stroke-width:28;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.trail .edge.solid{opacity:.9}
.trail use{fill:var(--wood-2);opacity:.42;transition:fill .3s,opacity .3s}
.trail use.seen{fill:#ee8530;opacity:.95}
.trail use.mist{opacity:.16}
.map-start{position:absolute;left:21%;top:91%;width:2px;height:2px}
.map-start svg{display:none}
.place{position:absolute;left:calc(var(--x) - var(--w,19%) / 2);top:var(--y);width:var(--w,19%);z-index:3;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;border-radius:24px}
.place-art{position:relative;display:block;width:100%;aspect-ratio:1;transition:transform .2s ease}
.place-art svg{width:100%;height:100%;overflow:visible}
.place:hover .place-art{transform:translateY(-4px)}
.place.boing{animation:none}
.place.boing .place-art{animation:boing .45s ease-out}
html.calm .place.boing .place-art{animation:boingSoft .3s ease-out}
.place-sign{position:relative;margin-top:-8px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:6px 16px 7px;font-family:var(--font-head);font-weight:700;font-size:clamp(17px,1.65vw,21px);line-height:1.1;box-shadow:var(--lift);white-space:nowrap;text-align:center}
.place-sign small{display:block;font-family:var(--font-body);font-size:15px;font-weight:800;color:var(--ink-2);margin-top:2px}
.place.main .place-sign,.place.open .place-sign{background:var(--sun)}
.place.open .place-sign{background:#c9f1f5}
/* места в тумане: без табличек и названий — только силуэт в облаке (ничего не обещаем) */
.place.foggy .place-art svg{filter:saturate(.35) brightness(1.1);opacity:.5}
.place.foggy .fog{inset:-14% -18% -8%}
.fog{position:absolute;inset:-8% -12% -2%;pointer-events:none;
  background:
   radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0)) 8% 30%/62% 46% no-repeat,
   radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0)) 88% 42%/66% 52% no-repeat,
   radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,0)) 42% 78%/86% 46% no-repeat,
   radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0)) 52% 6%/72% 40% no-repeat;
  animation:fogdrift 48s ease-in-out infinite}
.walker{position:absolute;left:0;top:0;width:74px;height:78px;margin:-74px 0 0 -37px;z-index:6;pointer-events:none;will-change:transform}
.walker-hop{width:100%;height:100%}
.walker svg{width:100%;height:100%;overflow:visible}
/* места на карте стоят спокойно: луч маяка, мельница, качели не двигаются */
.place .bashnya-beam-l,.place .bashnya-beam-r{opacity:.5}
.place .scope{transform-box:view-box;transform-origin:110px 64px;transform:rotate(-18deg)}

/* ---------- облачко Дракоши у мест и кнопок ---------- */
.fbubble{position:absolute;z-index:40;width:max-content;max-width:min(360px,calc(100vw - 24px));background:#fff;border:3px solid var(--ink);border-radius:24px;padding:14px 18px 16px;box-shadow:var(--soft);display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 12px;align-items:center}
.fbubble.pop{animation:pop .22s ease-out}
.fbubble::after{content:"";position:absolute;left:var(--tail,50%);bottom:-15px;width:24px;height:24px;margin-left:-12px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg);border-bottom-right-radius:5px}
.fbubble.below::after{bottom:auto;top:-15px;transform:rotate(-135deg)}
.fb-ava{width:52px;height:54px;grid-row:span 2}
.fb-ava svg{width:100%;height:100%;overflow:visible}
.fb-text{font-weight:800;font-size:20px;line-height:1.3}
.fb-act{justify-self:start;margin-top:8px}

/* ---------- пляж: полка ответов ---------- */
.beach{position:relative;background:var(--sand);padding:10px 0 70px}
.shore{position:absolute;left:0;bottom:-2px;width:100%;height:70px}
.shelf{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:30px;padding-top:42px;margin:8px 0 10px}
.shelf::before{content:"";position:absolute;left:8%;right:8%;top:-6px;height:44px;border-bottom:4px solid var(--wood-2);border-radius:0 0 50% 50%/0 0 100% 100%;opacity:.9}
.card{position:relative;width:min(360px,100%);background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--lift);padding:12px 12px 14px;display:flex;flex-direction:column;gap:10px;transform:rotate(var(--tilt,0deg))}
.card::before{content:"";position:absolute;top:-28px;left:50%;width:18px;height:42px;margin-left:-9px;background:var(--wood);border:3px solid var(--ink);border-radius:6px;box-shadow:inset 0 -14px 0 rgba(0,0,0,.08)}
.card-open{display:flex;flex-direction:column;gap:12px;text-decoration:none;border-radius:16px}
.card-pic{position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:3px solid var(--ink);background:var(--sky-2)}
.card-pic img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.card-q{font-family:var(--font-head);font-weight:700;font-size:22px;line-height:1.18;padding:0 4px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px}
.card-note{flex:1;font-size:15px;font-weight:800;color:var(--ink-2);line-height:1.25}

/* копилка вопросов: скромнее карточек — это вопросы без ответов */
.kopilka{max-width:640px;margin:40px auto 0;border:2px dashed rgba(58,53,87,.4);border-radius:var(--r-md);padding:14px 16px 16px}
.kop-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.kop-head svg{width:34px;height:34px;flex:none}
.kop-head h3{font-size:19px}
.kop-sub{font-size:15px;font-weight:700;color:var(--ink-2);margin-bottom:10px}
.kop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.kop-q{display:flex;align-items:center;width:100%;min-height:64px;padding:6px 14px;border-radius:18px;border:2px dashed rgba(58,53,87,.55);background:rgba(255,250,240,.55);font-weight:800;font-size:16px;line-height:1.2;text-align:left}
.kop-q:active{transform:translateY(2px)}

/* ---------- Мы уже узнали ---------- */
.learned-sec{margin-top:56px}
.learned-box{position:relative;max-width:640px;margin:0 auto;padding:0 20px}
.learned{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:28px;min-height:200px;padding:0 120px 0 20px;position:relative}
.learned-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 0 10px;border-radius:18px;text-decoration:none}
.frame{display:block;width:150px;height:150px;border-radius:22px;overflow:hidden;background:#fff;border:8px solid #fff;box-shadow:0 0 0 3px var(--ink),0 8px 0 rgba(58,53,87,.18);transform:rotate(-3deg)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.learned-item .cap{font-family:var(--font-head);font-weight:700;font-size:19px;line-height:1.15;text-align:center;max-width:180px}
.plank{height:22px;border:3px solid var(--ink);border-radius:10px;background:var(--wood);box-shadow:0 6px 0 rgba(58,53,87,.18);position:relative;z-index:1}
.plank::before,.plank::after{content:"";position:absolute;top:19px;width:16px;height:30px;background:var(--wood-2);border:3px solid var(--ink);border-top:0;border-radius:0 0 6px 6px}
.plank::before{left:44px}.plank::after{right:44px}
.shelf-drako{position:absolute;right:30px;bottom:18px;width:118px;z-index:2}
.shelf-drako svg{width:100%;height:auto;overflow:visible}

/* ---------- Для взрослых (открыто) ---------- */
.grown{background:var(--paper-2);border-top:3px solid rgba(58,53,87,.12);padding:56px 0 60px}
.grown h2{font-size:clamp(28px,3.4vw,38px);text-align:center}
.grown-sub{text-align:center;font-size:18px;color:var(--ink-2);font-weight:700;margin-top:6px}
.grown-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:28px}
.gcard{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-md);padding:22px 22px 24px;box-shadow:var(--lift)}
.gi{width:58px;height:58px;border-radius:50%;background:var(--sky-2);border:3px solid var(--ink);display:grid;place-items:center;margin-bottom:12px}
.gi svg{width:32px;height:32px}
.gcard h3{font-size:22px;margin-bottom:8px}
.gcard p{font-size:18px;line-height:1.45}
.gcard .soon{display:inline-block;margin-top:12px;font-size:15px;font-weight:800;background:var(--lilac-soft);border:2px solid var(--ink);border-radius:999px;padding:2px 12px}
.rules{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:26px;font-size:18px;font-weight:800;list-style:none;padding:0}
.rules li{background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:6px 16px}
.grown-note{text-align:center;font-size:17px;color:var(--ink-2);margin:16px auto 0;font-weight:700;max-width:760px}

/* ---------- подвал ---------- */
.foot{background:var(--deep);color:var(--paper);padding:30px 0 40px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.foot-nav{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 22px}
.foot-nav a{display:inline-flex;align-items:center;min-height:48px;font-family:var(--font-head);font-weight:700;font-size:18px;text-underline-offset:4px}
.foot-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.foot-chips li{border:2px solid rgba(255,250,240,.7);border-radius:999px;padding:6px 14px;font-size:17px;font-weight:800}
.foot-chips .zero{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.foot small{font-size:16px;font-weight:700}
.foot a{color:var(--paper)}

/* ---------- страница ответа ---------- */
.screen-in{animation:screenIn .5s ease-out}
html.calm .screen-in{animation:fadeIn .4s ease-out}
.otvet,.page{background:linear-gradient(180deg,var(--sky-1) 0,var(--sky-3) 380px,var(--sand) 760px);padding-bottom:70px}
.page-top{padding:10px 0 26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.steps{max-width:900px;margin:0 auto}
.step{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);padding:28px 30px 30px;box-shadow:0 6px 0 rgba(58,53,87,.14),var(--soft)}
.step-h{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.step-h h2{font-size:32px}
.stone{width:60px;height:60px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);display:grid;place-items:center;flex:none;box-shadow:var(--lift)}
.stone svg{width:32px;height:32px}
.walk{height:76px;display:flex;justify-content:center}
.walk svg{height:100%;width:60px}
.q-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.q-tags .tag{background:var(--sky-2)}
.q-tags a.tag:hover{background:#fff}
.q-tags .tag.six{background:var(--coral)}
.step-q h1{font-size:clamp(32px,4.6vw,48px);margin-bottom:20px}
.q-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:center}
.q-pic{width:100%;height:auto}
.q-pic-caps{display:flex;justify-content:space-around;font-family:var(--font-head);font-weight:700;font-size:19px;margin-top:6px}
.guesses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.guess{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:12px 10px 14px;border:3px solid var(--ink);border-radius:var(--r-md);background:#fff;box-shadow:var(--lift);min-height:150px;font-weight:800;font-size:19px;line-height:1.2;text-align:center;transition:transform .2s ease,opacity .35s ease,background .3s,box-shadow .2s}
.guess svg{width:100%;max-width:132px;height:auto}
.guess:active{transform:translateY(4px);box-shadow:var(--press)}
.guesses.picked .guess{opacity:.62}
.guesses.picked .guess.chosen{opacity:1;background:var(--paper-2);box-shadow:0 0 0 5px var(--sun),var(--lift);animation:chosen .5s ease-out}
.check{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;animation:rise .45s ease-out}
.guess-reply{flex:1 1 260px}
.player{position:relative;border-radius:24px;overflow:hidden;border:3px solid var(--ink);aspect-ratio:16/9;background:#071021}
.player video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#071021}
.play{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;background:var(--sun);border:4px solid var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.35);display:grid;place-items:center;padding:0;z-index:2}
.play svg{width:50px;height:50px;margin-left:8px}
.play:active{transform:translateY(4px)}
.adult-lines{margin-top:14px;background:var(--violet-soft);border:2px solid var(--ink);border-radius:18px;padding:10px 16px 12px}
.al-h{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:17px;margin-bottom:4px}
.al-h svg{width:24px;height:24px}
.adult-lines p{font-size:18px;font-weight:700;line-height:1.4}
.adult-lines p + p{margin-top:2px}
.video-meta{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0;padding:0;list-style:none;font-size:16px;font-weight:800;color:var(--ink)}
.video-meta li{background:var(--sky-2);border:2px solid var(--ink);border-radius:999px;padding:4px 12px}
.fact{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:center}
.fact-text{font-family:var(--font-head);font-weight:700;font-size:24px;line-height:1.32;margin-bottom:16px}
.reply{display:flex;align-items:center;gap:14px;margin-top:22px;background:var(--sky-2);border:3px solid var(--ink);border-radius:24px;padding:12px 18px 12px 12px}
.check .reply{margin-top:0}
.reply-drako{width:78px;flex:none}
.reply-drako svg{width:100%;height:auto;overflow:visible}
.reply p{font-weight:800;font-size:20px}
.model-box{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:26px;align-items:center}
/* модель не мешает листать: вертикальная прокрутка разрешена, хватать можно саму Луну (увеличенная зона) */
#model{width:100%;height:auto;touch-action:pan-y;cursor:pointer;border-radius:30px;-webkit-user-select:none;user-select:none}
#moon{outline:none;cursor:grab;touch-action:none}
#moon:active{cursor:grabbing}
.model-adult{margin-top:12px;font-size:16px;font-weight:700;color:var(--ink-2)}
.model-adult b{font-family:var(--font-head);font-weight:700;color:var(--ink)}
#moon:focus-visible .moon-ring{stroke:#ffd04a;stroke-width:5}
.model-hint{font-size:20px;font-weight:800;margin-bottom:16px}
.tide{border:3px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--paper-2);transition:background .4s}
.tide.high{background:#c9f1f5}
.tide.low{background:#fbe2b4}
.tide-label{font-family:var(--font-head);font-weight:800;font-size:28px;line-height:1.15;padding:14px 18px 10px}
.shore-pic{width:100%;height:auto;border-top:3px solid var(--ink)}
.tide-small{font-size:17px;font-weight:700;color:var(--ink-2);margin-top:12px}
.model-3d{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:16px;font-weight:700;color:var(--ink-2)}
#mHint{animation:bob 4s ease-in-out infinite}
.home-tries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.try{background:#fff;border:3px solid var(--ink);border-radius:var(--r-md);padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.try svg.pic{width:100%;height:auto;border-radius:16px}
.try p{font-size:20px;line-height:1.4}
.with-adult{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--lilac-soft);border:2px solid var(--ink);border-radius:999px;padding:4px 14px 4px 8px;font-size:16px;font-weight:800}
.with-adult svg{width:26px;height:26px}
.stick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.stick-wrap{position:relative;width:180px;height:180px;margin:14px}
.stick-disc{width:180px;height:180px;border-radius:50%;overflow:hidden;border:8px solid #fff;box-shadow:0 0 0 3px var(--ink),0 0 0 9px rgba(255,255,255,.7),0 10px 0 9px rgba(58,53,87,.12);transform:rotate(-6deg);position:relative}
.stick-disc svg{width:100%;height:100%}
.stick-cut{position:absolute;inset:-14px;border-radius:50%;border:3px dashed rgba(58,53,87,.45);pointer-events:none}
.stick-title{font-family:var(--font-head);font-weight:800;font-size:28px;line-height:1.2;margin-bottom:8px}
.stick p{font-size:19px}
.stick-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.more-card{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:var(--r-md);padding:10px 16px 10px 10px;box-shadow:var(--lift);min-height:96px;font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.2;text-decoration:none}
.more-card:active{transform:translateY(4px);box-shadow:var(--press)}
.more-card .mc-pic{width:96px;height:72px;flex:none;border-radius:14px;border:2px solid var(--ink);overflow:hidden;background:var(--sky-2);display:grid;place-items:center}
.more-card .mc-pic img{width:100%;height:100%;object-fit:cover;object-position:right center}
.more-card .mc-pic svg{width:100%;height:100%}
.more-card small{display:block;font-family:var(--font-body);font-size:15px;font-weight:800;color:var(--ink-2);margin-top:4px}
.enough{margin-top:22px;width:100%}
.adult-notes{margin-top:34px;background:var(--paper-2);border:3px solid var(--ink);border-radius:var(--r-md);overflow:hidden}
.adult-notes summary{list-style:none;cursor:pointer;min-height:68px;display:flex;align-items:center;gap:12px;padding:10px 22px;font-family:var(--font-head);font-weight:700;font-size:22px}
.adult-notes summary::-webkit-details-marker{display:none}
.adult-notes summary::after{content:"";margin-left:auto;width:14px;height:14px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg);transition:transform .3s}
.adult-notes[open] summary::after{transform:rotate(-135deg)}
.adult-notes summary svg{width:30px;height:30px}
.adult-body{padding:4px 24px 24px;display:grid;gap:16px;font-size:18px}
.adult-body h3{font-size:19px;margin-bottom:4px}
.adult-body ol{margin:6px 0 0;padding-left:28px;columns:2;column-gap:28px}
.adult-body li{padding:1px 0}
.adult-body a{font-weight:800}

/* ---------- Мастерская ---------- */
.mst-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin-bottom:30px}
.mst-hero .drako-btn{width:170px}
.mst-hero h1{font-size:clamp(34px,5vw,52px);margin-bottom:10px}
.mst-hero .bubble{max-width:560px}
.mst-hero .bubble::after{left:-16px;top:40%;bottom:auto;width:24px;height:24px;transform:rotate(135deg);border-bottom-right-radius:5px}
.prints-group{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);padding:24px 26px 28px;box-shadow:0 6px 0 rgba(58,53,87,.14),var(--soft);margin-bottom:28px}
.prints-group h2{font-size:26px;margin-bottom:6px}
.prints-sub{font-size:17px;font-weight:700;color:var(--ink-2);margin-bottom:12px}
.prints-sub a{display:inline-flex;align-items:center;min-height:48px;font-weight:800;color:var(--ink)}
.nw{white-space:nowrap}
.prints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.print-card{display:flex;flex-direction:column;gap:10px;height:100%;background:#fff;border:3px solid var(--ink);border-radius:var(--r-md);padding:12px 12px 14px;box-shadow:var(--lift)}
.print-thumb{display:block;aspect-ratio:210/297;margin:0 auto;width:100%;max-width:220px;border:2px solid rgba(58,53,87,.3);border-radius:8px;background:#fff;overflow:hidden}
.print-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.print-title{font-family:var(--font-head);font-weight:700;font-size:20px;line-height:1.2;padding:0 4px}
.print-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.print-go{display:inline-flex;align-items:center;gap:8px;background:var(--sun);border:3px solid var(--ink);border-radius:999px;min-height:52px;padding:6px 16px;font-family:var(--font-head);font-weight:700;font-size:17px;text-decoration:none;white-space:nowrap}
.print-go.pdf{background:var(--paper)}
.print-go:active{transform:translateY(3px)}
.print-go svg{width:24px;height:24px;flex:none}
.mst-note{font-size:17px;font-weight:700;color:var(--ink-2);text-align:center;max-width:720px;margin:6px auto 0}

/* ---------- 404 ---------- */
.lost{min-height:calc(100vh - 240px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding-top:30px;padding-bottom:60px}
.lost .drako-btn{width:220px}
.lost h1{font-size:clamp(30px,5vw,46px)}
.lost .bubble{max-width:420px}

/* ---------- окна ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:20px var(--gr) 20px var(--gl);background:rgba(32,58,112,.5);overflow-y:auto}
.modal-card{position:relative;width:min(620px,100%);margin:auto;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-lg);padding:30px 30px 32px;box-shadow:0 10px 0 rgba(0,0,0,.18);animation:rise .4s ease-out}
html.calm .modal-card{animation:fadeIn .25s ease-out}
.modal .x{position:absolute;top:14px;right:14px}
.gate-kid{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center;padding-right:64px}
.mini svg{width:100%;height:auto;overflow:visible}
.gate-kid .mini{width:110px}
.gate-kid h2{font-size:28px;margin-bottom:12px}
.gate-adult{margin-top:24px;padding-top:22px;border-top:3px dashed rgba(58,53,87,.2);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.gate-adult p{font-size:18px;font-weight:800}
.hold{position:relative;width:118px;height:118px;border-radius:50%;border:0;background:none;padding:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.hold svg{width:100%;height:100%}
.hold .hold-label{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:17px;padding-top:40px}
.hold-msg{min-height:26px;font-size:17px!important;color:var(--ink-2)}
.set-card{width:min(640px,100%)}
.set-card h2{font-size:30px;padding-right:70px}
.set-sub{font-size:17px;color:var(--ink-2);font-weight:700;margin-top:6px}
.set-list{display:grid;gap:14px;margin-top:22px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:3px solid var(--ink);border-radius:22px;padding:10px 12px 10px 20px;flex-wrap:wrap}
.set-row > div:first-child{flex:1 1 230px;min-width:0}
.set-row b{font-family:var(--font-head);font-weight:700;font-size:21px;display:block}
.set-row .hint{font-size:16px;color:var(--ink-2);font-weight:700}
.switch{min-width:150px;min-height:64px;border-radius:999px;border:3px solid var(--ink);background:var(--paper);font-weight:800;font-size:18px;padding:0 18px;box-shadow:var(--lift)}
.switch[aria-pressed="true"]{background:var(--sun)}
.seg{display:flex;gap:8px}
.seg button{min-width:88px;min-height:64px;border-radius:20px;border:3px solid var(--ink);background:var(--paper);font-family:var(--font-head);font-weight:700;font-size:20px;box-shadow:var(--lift)}
.seg button[aria-pressed="true"]{background:var(--sun)}
.bye-card{text-align:center;background:linear-gradient(180deg,var(--sky-2),var(--sky-3))}
.bye-card .mini{width:200px;margin:0 auto}
.bye-card h2{font-size:32px;margin:6px 0 10px}
.bye-card p{font-size:21px;font-weight:800;margin-bottom:22px}

/* ---------- Дракоша ---------- */
.drako .d-bob{animation:breathe 4.6s ease-in-out infinite}
.drako .d-eye{transform-box:fill-box;transform-origin:center;animation:blink 6s ease-in-out infinite}
.drako .d-wing{transform-box:view-box}
.drako .d-wing-l{transform-origin:86px 166px;animation:flapL 5s ease-in-out infinite}
.drako .d-wing-r{transform-origin:154px 166px;animation:flapR 5s ease-in-out infinite}
.drako .d-arm-r{transform-box:view-box;transform-origin:160px 178px}
np-drako{display:block}
.drako .d-mouth-o{display:none}
.drako.surprised .d-mouth{display:none}
.drako.surprised .d-mouth-o{display:inline}
.drako.surprised .d-brows{transform:translateY(-7px)}
/* копии героя стоят спокойно: в каждый момент «живёт» один Дракоша */
.drako.still *{animation:none!important}
/* ушло с экрана — не тратим силы телефона на анимацию */
.anim-off,.anim-off *{animation-play-state:paused!important}
.drako.hop{animation:hop .5s ease-out}
.waving .d-arm-r{animation:wave 1.6s ease-in-out 3!important}

/* ---------- анимации ---------- */
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}}
@keyframes flapL{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
@keyframes flapR{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
@keyframes hop{0%{transform:translateY(0)}32%{transform:translateY(var(--jump)) scale(.97,1.04)}64%{transform:translateY(0) scale(1.04,.96)}84%{transform:translateY(-3px)}100%{transform:none}}
@keyframes wave{0%,100%{transform:rotate(0)}22%{transform:rotate(-135deg)}38%{transform:rotate(-110deg)}54%{transform:rotate(-135deg)}70%{transform:rotate(-110deg)}86%{transform:rotate(-125deg)}}
@keyframes boing{0%{transform:scale(1)}35%{transform:scale(1.08,.93)}65%{transform:scale(.96,1.05)}100%{transform:scale(1)}}
@keyframes boingSoft{0%{transform:scale(1)}50%{transform:scale(1.03,.98)}100%{transform:scale(1)}}
@keyframes pop{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
@keyframes rise{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes screenIn{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
@keyframes chosen{0%{transform:scale(1)}40%{transform:scale(1.06) rotate(-1.5deg)}100%{transform:scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes fogdrift{0%,100%{transform:translateX(-1%)}50%{transform:translateX(1%)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes readsweep{to{background-size:100% 100%}}

/* спокойный режим: фон, украшения и дыхание героя стоят, отклик на касание остаётся */
html.calm .sea,html.calm .cloud,html.calm .island-art *,html.calm .fog,html.calm .drako *,html.calm #mHint,
html.calm .read.speaking svg,html.calm .screen-in{animation:none!important}
html.calm .waving .d-arm-r{animation:none!important;transform:rotate(-120deg)}
@media (prefers-reduced-motion: reduce){
  .sea,.cloud,.island-art *,.fog,.drako *,#mHint,.screen-in,.modal-card{animation:none!important}
  .waving .d-arm-r{transform:rotate(-120deg)}
  html{scroll-behavior:auto}
}

/* ---------- планшет и телефон ---------- */
@media (max-width:1060px){
  .hero-grid{grid-template-columns:320px minmax(0,1fr);gap:26px}
  .drako-spot{width:300px}.drako-btn{width:250px}.islet{width:300px}
  .qday-head{grid-template-columns:230px minmax(0,1fr)}
  .qday-q{font-size:32px}
  .prints{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}
@media (max-width:899px){
  .hero{padding-bottom:70px}
  .hero-grid{grid-template-columns:1fr;gap:12px;padding-top:12px}
  .drako-stage{flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:0}
  .drako-spot{width:170px;flex:none}
  .drako-btn{width:170px}
  .islet{display:none}
  .tap-hint{right:-6px;top:52%;width:38px;height:38px}
  .drako-stage .bubble{font-size:19px;padding:12px 16px;max-width:none;flex:1}
  .drako-stage .bubble::after{left:-16px;top:44%;bottom:auto;width:24px;height:24px;transform:rotate(135deg);border-bottom-right-radius:5px}
  .sun{width:140px;top:-30px}
  .cloud.c2,.cloud.c3{display:none}
  .gulls{display:none}
  .map{aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch;max-width:560px;margin:30px 15px 10px;padding:22px 12px 34px}
  .map::before{content:"";position:absolute;inset:0;background:var(--grass);border-radius:110px;box-shadow:0 0 0 13px var(--sand),0 0 0 16px var(--ink),0 0 0 30px rgba(184,236,236,.85)}
  .island-art{display:none}
  .map-start{position:relative;left:auto;top:auto;width:auto;height:auto;align-self:center;z-index:2}
  .map-start svg{display:block;width:130px;height:auto}
  .place{position:relative;left:auto;top:auto;width:178px;--w:178px}
  .place[data-side="l"]{align-self:flex-start;margin-left:6px}
  .place[data-side="r"]{align-self:flex-end;margin-right:6px}
  .place + .place{margin-top:-46px}
  .place.main{width:200px}
  .place-sign{font-size:18px}
  .place.foggy{width:120px;--w:120px}
  .place.foggy + .place.foggy{margin-top:-34px}
  .walker{width:60px;height:64px;margin:-60px 0 0 -30px}
  .grown-grid{grid-template-columns:1fr}
  .q-grid,.fact,.model-box{grid-template-columns:1fr}
  .q-pic-wrap{max-width:360px}
  .fact svg{max-width:300px}
  .model-box #model{max-width:430px;margin:0 auto}
  .prints{grid-template-columns:1fr}
  .print-card{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px 14px;align-items:start}
  .print-thumb{grid-row:span 2}
  .print-btns{margin-top:4px}
  .adult-body ol{columns:1}
}
@media (max-width:600px){
  body{font-size:18px}
  .top .wrap{padding-top:10px;gap:8px}
  .logo{gap:8px}
  .logo-badge{width:48px;height:48px}
  .logo-name{font-size:21px;line-height:1.02}
  .logo-name span{display:block}
  .tools{gap:6px}
  .tool small{font-size:12px}
  .sun{width:120px;top:150px;right:-44px}
  .cloud.c1{display:none}
  .adult-line{font-size:15px;padding-top:6px}
  /* первый экран телефона: низ «Давай посмотрим!» не ниже 650 px */
  .hero{padding-bottom:56px}
  .hero-grid{gap:8px;padding-top:8px}
  .drako-spot,.drako-btn{width:96px}
  .tap-hint{width:32px;height:32px;right:-8px}
  .drako-stage .bubble{font-size:17px;padding:10px 14px;border-radius:22px}
  .qday{padding:26px 14px 16px;margin-top:22px}
  .qday .tag{left:14px;font-size:17px;top:-22px}
  .qday-head{grid-template-columns:1fr;gap:10px}
  .qday-pic{aspect-ratio:3/1;border-radius:18px}
  .qday-pic img{object-position:right 27%}
  .qday-chip{display:block}
  .qday-qrow .ibtn{display:grid}
  .qday-q{font-size:24px;margin-bottom:0;flex:1;min-width:0}
  .qday-meta{display:none}
  .qday-btns{flex-direction:column;align-items:stretch;gap:10px;margin-top:12px}
  .qday-btns .btn{width:100%}
  .qday-btns .btn--paper{display:none}
  .qday-btns .btn--big{min-height:72px}
  .guesses{gap:8px}
  .guess{padding:6px 3px 8px;font-size:15px;min-height:96px;border-radius:18px;gap:4px}
  .guess svg{max-width:70px}
  .check{flex-direction:column;align-items:stretch;text-align:center;margin-top:14px}
  .check .btn{width:100%}
  /* страница ответа: плеер должен попасть в первые ~900 px */
  .page-top{padding:4px 0 10px}
  .walk{height:14px}
  .walk svg{display:none}
  .q-tags{margin-bottom:8px}
  .q-tags .tag{font-size:15px;padding:2px 10px 3px 8px;border-width:2px}
  .q-tags a.tag{min-height:48px;padding-left:12px;padding-right:14px}
  .q-tags .tag svg{width:20px;height:20px}
  .step-q h1{font-size:25px;margin-bottom:10px}
  .q-pic-wrap{display:none}
  .step-h{margin-bottom:12px;gap:10px}
  .play{width:88px;height:88px;margin:-44px 0 0 -44px}
  .play svg{width:40px;height:40px;margin-left:6px}
  .adult-lines p{font-size:17px}
  .video-meta{font-size:14px;gap:6px}
  .video-meta li{padding:3px 9px}
  .sea{padding-top:26px}
  .shelf{gap:40px}
  .shelf::before{display:none}
  .card{width:100%;max-width:400px}
  .card-q{font-size:20px}
  .kopilka{padding:12px 12px 14px;margin-top:30px}
  .kop-head h3{font-size:18px}
  .kop-head svg{width:30px;height:30px}
  .kop-sub{font-size:14px}
  .kop-q{font-size:15px;padding:6px 10px}
  .learned{padding:0 92px 0 0;gap:16px}
  .frame{width:128px;height:128px}
  .shelf-drako{width:92px;right:14px}
  .plank::before{left:24px}.plank::after{right:24px}
  .step{padding:14px 14px 16px;border-radius:26px}
  .step-h h2{font-size:23px}
  .stone{width:40px;height:40px;box-shadow:none;border-width:2px}
  .stone svg{width:24px;height:24px}
  .fact-text{font-size:20px}
  .reply-drako{width:58px}
  .reply p{font-size:18px}
  .tide-label{font-size:23px}
  .home-tries,.more{grid-template-columns:1fr}
  .stick{grid-template-columns:1fr;justify-items:center;text-align:center}
  .stick .btn{width:100%}
  .btn--big{font-size:22px;padding:14px 22px}
  .modal-card{padding:24px 18px 26px}
  .gate-kid{grid-template-columns:1fr;justify-items:center;text-align:center;padding-right:0;padding-top:40px}
  .gate-kid h2{font-size:24px}
  .set-card h2{font-size:25px}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-nav{flex-basis:auto}
  .mst-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px}
  .mst-hero > div{order:-1}
  .mst-hero .drako-btn{width:140px}
  .mst-hero .bubble::after{left:50%;top:auto;bottom:-17px;margin-left:-14px;width:28px;height:28px;transform:rotate(45deg)}
  .print-go{padding:6px 12px;font-size:16px;gap:6px}
  .print-go svg{width:22px;height:22px}
  .prints-group{padding:18px 14px 20px;border-radius:26px}
  .prints-group h2{font-size:22px}
  .print-card{grid-template-columns:92px minmax(0,1fr)}
  .print-title{font-size:18px}
  .lost .drako-btn{width:170px}
}
/* узкие телефоны (360–399 px): шапка помещается в экран */
@media (max-width:399px){
  .top .wrap{gap:4px}
  .logo{gap:6px;min-width:0}
  .logo-badge{width:42px;height:42px}
  .logo-name{font-size:18px}
  .tools{gap:4px}
  .tools .ibtn{width:56px;height:56px}
  .tools .ibtn svg{width:28px;height:28px}
  .tool{width:58px}
  .tool small{font-size:11px;letter-spacing:-.01em}
  .qday-q{font-size:22px}
}