/* «Мир Сафии» — детский слой дизайна: крупные тактильные кнопки, мягкая глубина, минимум текста.
   Подключается последним и переопределяет прежние стили, не меняя разметку экранов. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/nunito-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #2f3b4c;
  --ink-soft: #5d6b7c;
  --paper: #fff9ef;
  --card: #ffffff;
  --edge: rgba(47, 59, 76, .14);
  --press: 0 8px 0 rgba(47, 59, 76, .13), 0 14px 28px rgba(47, 59, 76, .08);
  --press-sm: 0 5px 0 rgba(47, 59, 76, .13), 0 8px 16px rgba(47, 59, 76, .07);
  --go: #37b37e; --go-dark: #238a5d;
  --sun: #ffc94a; --sun-dark: #e0a21e;
  --berry: #ff6f91; --berry-dark: #d9486c;
  --sky: #5aa9f0; --sky-dark: #3d82c4;
  --shadow: var(--press-sm);
  --kids-font: "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
html, body { background: #f3e6d2; font-family: var(--kids-font); }
#stage { background: var(--paper); font-family: var(--kids-font); }
.arabic, [lang="ar"] { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; }

/* ---------- Верхняя панель: «Назад» всегда слева на одном месте ---------- */
#topbar { top: 18px; left: 22px; right: 22px; height: 96px; gap: 14px; }
.tb-gap { flex: 1; }
.tb-btn { width: 92px; height: 92px; border-radius: 30px; background: var(--card); border: 0; box-shadow: var(--press-sm); transition: transform .12s, box-shadow .12s; }
.tb-btn svg { width: 50px; height: 50px; }
.tb-btn:hover { transform: translateY(-2px); }
.tb-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(47, 59, 76, .15); }
#btn-home { margin-right: 0; }
#btn-back { width: 116px; height: 100px; border-radius: 32px; background: var(--sky); box-shadow: 0 8px 0 var(--sky-dark), 0 14px 26px rgba(61, 130, 196, .25); }
#btn-back svg { width: 62px; height: 62px; }
#btn-back:active { box-shadow: 0 2px 0 var(--sky-dark); }
#btn-back.hidden, #btn-home.hidden { display: none; }
.tb-stars { height: 70px; border-radius: 26px; padding: 0 20px; font-size: 32px; font-weight: 900; border: 0; box-shadow: var(--press-sm); }
.tb-stars svg { width: 40px; height: 40px; }
/* Space for the back button: titles start after it. */
.banner { left: 250px; right: 330px; top: 30px; font-size: 32px; font-weight: 900; color: var(--ink); }

/* ---------- Карточки и кнопки: тактильные, с «нажатием» ---------- */
.big-card, .choice, .game-card, .col-tab, .col-thumb, .word-card2, .bin, .tool, .thing, .world-location, .world-shelf > button, .world-age-choice, .kd-dish, .tr-card {
  border: 0; border-radius: 32px; box-shadow: var(--press); transition: transform .14s cubic-bezier(.3, 1.5, .5, 1), box-shadow .14s;
}
.big-card:active, .choice:active, .game-card:active, .col-thumb:active, .thing:active, .world-location:active, .world-shelf > button:active, .kd-dish:active, .tr-card:active, .bin:active, .tool:active {
  transform: translateY(6px) scale(.98); box-shadow: 0 2px 0 rgba(47, 59, 76, .13);
}
.game-card .label, .big-card .label { font-weight: 850; color: var(--ink); }
.choice .ctext { font-weight: 800; }
.choice.right { background: #e3f7ec; box-shadow: inset 0 0 0 5px var(--go), var(--press); }
.level-dot { box-shadow: 0 10px 0 rgba(47, 59, 76, .16); border: 6px solid #fff; }
.level-dot .lnum { font-weight: 900; }
.bounce-in { animation: kidsPop .32s cubic-bezier(.3, 1.5, .5, 1) backwards; }
@keyframes kidsPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.speaker, .speaker.small { background: var(--sun); box-shadow: 0 5px 0 var(--sun-dark); border-radius: 50%; }
.speaker.small { width: 76px; height: 76px; }
.speaker.small svg { width: 44px; height: 44px; }
.arrow-next { width: 140px; height: 140px; right: 34px; bottom: 30px; background: var(--go); box-shadow: 0 10px 0 var(--go-dark); animation: kidsPulse 1.2s ease-in-out infinite; }
.arrow-next svg { width: 84px; height: 84px; }
@keyframes kidsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.hint-glow { animation: kidsGlow 1.3s ease-in-out infinite; }
@keyframes kidsGlow { 0%, 100% { box-shadow: var(--press), 0 0 0 0 rgba(255, 201, 74, .0); } 50% { box-shadow: var(--press), 0 0 0 16px rgba(255, 201, 74, .55); } }

/* ---------- Карта мира ---------- */
.world-shell h1 { font-weight: 900; font-size: 44px; color: var(--ink); }
.world-map h1 { font-size: 58px; letter-spacing: -1px; }
.world-subtitle { font-weight: 700; color: var(--ink-soft); }
.world-location strong, .world-shelf strong { font-weight: 900; font-size: 30px; }
.world-location .world-place-art { transition: transform .3s; }
.world-location:hover .world-place-art { transform: rotate(-4deg) scale(1.06); }

/* ---------- Конец игры: награда и три ясные кнопки ---------- */
.finish-panel { position: absolute; left: 0; right: 0; bottom: 60px; display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 35; animation: kidsPop .3s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.fp-star { width: 170px; height: 170px; filter: drop-shadow(0 8px 0 rgba(224, 162, 30, .35)); animation: kidsSpin .6s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.fp-star svg { width: 100%; height: 100%; }
@keyframes kidsSpin { from { transform: scale(.2) rotate(-120deg); } to { transform: none; } }
.fp-row { display: flex; gap: 26px; align-items: center; }
.fp-btn { width: 118px; height: 118px; border-radius: 38px; display: grid; place-items: center; }
.fp-btn svg { width: 64px; height: 64px; }
.fp-back { background: #9aa7b7; box-shadow: 0 8px 0 #758396; }
.fp-replay { background: var(--sun); box-shadow: 0 8px 0 var(--sun-dark); }
.fp-next { width: 170px; height: 150px; border-radius: 46px; background: var(--go); box-shadow: 0 10px 0 var(--go-dark); animation: kidsPulse 1.2s ease-in-out infinite; }
.fp-next svg { width: 96px; height: 96px; }
.fp-btn:active { transform: translateY(6px); box-shadow: none; }
.kd-cook .finish-panel { bottom: 36px; }

/* ---------- Знакомство с новым словом ---------- */
.teach-overlay { position: absolute; inset: 0; z-index: 36; background: rgba(255, 249, 239, .94); display: flex; align-items: center; justify-content: center; gap: 40px; }
.teach-card { position: relative; width: 470px; height: 590px; border-radius: 48px; background: #fff; box-shadow: var(--press); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; animation: kidsPop .35s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.teach-card.playing .teach-pic { animation: kidsPulse .8s ease-in-out infinite; }
.teach-new { position: absolute; top: 22px; background: var(--berry); color: #fff; border-radius: 20px; padding: 6px 18px; font-weight: 900; font-size: 22px; }
.teach-card strong { font-size: 46px; font-weight: 900; color: var(--ink); }
.teach-card b { font-size: 68px; color: #3a5ea8; line-height: 1.2; font-weight: 700; }
.teach-card i { font-style: normal; color: var(--ink-soft); font-size: 26px; }
.teach-ear { position: absolute; right: 22px; bottom: 22px; width: 74px; height: 74px; border-radius: 50%; background: var(--sun); box-shadow: 0 5px 0 var(--sun-dark); display: grid; place-items: center; }
.teach-ear svg { width: 44px; height: 44px; }
.teach-next { width: 150px; height: 150px; border-radius: 50%; background: var(--go); box-shadow: 0 10px 0 var(--go-dark); display: grid; place-items: center; animation: kidsPop .3s backwards, kidsPulse 1.2s .3s ease-in-out infinite; }
.teach-next svg { width: 90px; height: 90px; }
.teach-dots { position: absolute; bottom: 40px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.teach-dots i { width: 18px; height: 18px; border-radius: 50%; background: #e3d8c6; }
.teach-dots i.now { background: var(--berry); transform: scale(1.3); }
.teach-dots i.done { background: var(--go); }
.world-touch-me { animation: kidsGlow 1.3s ease-in-out infinite; }

/* ---------- Мытьё рук ---------- */
.wash-scene { position: absolute; inset: 0; z-index: 30; touch-action: none; }
.wash-scene > svg { position: absolute; inset: 0; }
.wash-water { position: absolute; border-radius: 0 0 24px 24px; background: repeating-linear-gradient(180deg, #8fd0f5 0 22px, #b9e4fb 22px 44px); opacity: .9; animation: washFlow .35s linear infinite; pointer-events: none; }
.wash-water.hidden { display: none; }
@keyframes washFlow { from { background-position: 0 0; } to { background-position: 0 44px; } }
.wash-handle { position: absolute; border-radius: 30px; display: grid; place-items: center; }
.wash-handle span { width: 104px; height: 34px; border-radius: 17px; background: #f16f7c; box-shadow: 0 6px 0 #c24c5a; transform: rotate(0deg); transition: transform .25s; }
.wash-handle.on span { background: #5ab4ef; box-shadow: 0 6px 0 #3a8cc4; transform: rotate(-35deg); }
.wash-soap, .wash-hands { position: absolute; display: grid; place-items: center; border-radius: 40px; transition: left .3s, top .3s, transform .2s; touch-action: none; }
.wash-soap.dragging, .wash-hands.dragging { transition: none; transform: scale(1.06); z-index: 5; }
.wash-soap.hidden { display: none; }
.wash-hands.clean svg { filter: drop-shadow(0 0 18px #fff6b0); }
.wash-scene .glow { animation: washGlow 1.1s ease-in-out infinite; }
@keyframes washGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 201, 74, 0)); } 50% { filter: drop-shadow(0 0 22px rgba(255, 190, 40, .95)); } }
.wash-steps { position: absolute; left: 50%; transform: translateX(-50%); top: 128px; display: flex; gap: 14px; background: #fff; padding: 10px 16px; border-radius: 30px; box-shadow: var(--press-sm); }
.wash-steps span { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; background: #f4efe6; opacity: .55; }
.wash-steps span.now { background: #fff1c9; opacity: 1; box-shadow: inset 0 0 0 4px var(--sun); }
.wash-steps span.done { background: #dff3e8; opacity: 1; }
.wash-replay { position: absolute; right: 36px; top: 124px; }

/* ---------- Бисмиллях перед готовкой ---------- */
.bism-gate { position: absolute; inset: 0; z-index: 32; background: rgba(255, 249, 239, .95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.bism-q { font-size: 44px; font-weight: 900; color: var(--ink); }
.bism-row { display: flex; gap: 40px; }
.bism-bubble { width: 380px; height: 250px; border-radius: 60px; background: #fff; box-shadow: var(--press); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; animation: kidsPop .35s backwards; }
.bism-bubble b { font-size: 64px; color: #2f7a5a; font-weight: 700; }
.bism-bubble span { font-size: 32px; font-weight: 900; color: var(--ink); }
.bism-bubble.right { background: #e3f7ec; box-shadow: inset 0 0 0 6px var(--go), var(--press); }

/* ---------- Жесты в сценах ---------- */
.thing.big[data-gesture="stir"], .thing.big[data-gesture="cut"], .thing.big[data-gesture="swipe"] { touch-action: none; cursor: grab; }
.gesture-ring { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 30px; padding: 10px 16px; box-shadow: var(--press-sm); z-index: 20; }
.gesture-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); flex: none; }
.gesture-ring circle { fill: none; stroke: #eee3d2; stroke-width: 12; }
.gesture-ring .gr-fill { stroke: var(--go); stroke-linecap: round; transition: stroke-dasharray .12s; }
.gesture-ring span { font-weight: 850; font-size: 22px; line-height: 1.1; color: var(--ink); }

/* The kitchen used its own «Блюда» button; the common «Назад» replaces it. */
.kd-back { display: none !important; }

/* ---------- Телефон: игра рассчитана на горизонтальный экран ---------- */
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 600px) {
  #rotate { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: var(--paper); color: var(--ink); font: 900 28px var(--kids-font); text-align: center; padding: 24px; }
  #rotate svg { width: 140px; height: 140px; animation: rotateHint 2s ease-in-out infinite; }
  @keyframes rotateHint { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .fp-next, .arrow-next, .teach-next, .hint-glow, .world-touch-me, .wash-scene .glow { animation: none !important; }
}

/* ---------- Транспорт ---------- */
.tr-menu { position: absolute; left: 70px; right: 70px; top: 140px; bottom: 40px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 30px; }
.tr-card { position: relative; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.tr-card:nth-child(1) { background: #ffe9e4; } .tr-card:nth-child(2) { background: #e3f1fd; } .tr-card:nth-child(3) { background: #ffe8f0; }
.tr-card:nth-child(4) { background: #efe9fd; } .tr-card:nth-child(5) { background: #e3f6ec; } .tr-card:nth-child(6) { background: #fff4d8; }
.tr-card strong { font-size: 32px; font-weight: 900; color: var(--ink); }
.tr-card-art { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 150px; }
.tr-done { position: absolute; top: 14px; right: 16px; width: 54px; height: 54px; }
.tr-done svg { width: 100%; height: 100%; }
.tr-scene { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.tr-garage { background: linear-gradient(#eef3f7 0 68%, #d9dfe6 68%); }
.tr-wash { background: linear-gradient(#e2f2fb 0 70%, #c8d6e0 70%); }
.tr-fuel { background: linear-gradient(#e7f4ff 0 64%, #cfd6de 64%); }
.tr-road { background: #d8efc9; }
.tr-find { background: #fff6e6; }
.tr-car { position: absolute; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.tr-car svg { display: block; }
.tr-car.tr-drive-off { transition: transform .9s ease-in; transform: translateX(1100px) !important; }
.tr-car.tr-drive-off .tr-spin, .tr-car.tr-slide .tr-spin { animation: trSpin .4s linear infinite; }
@keyframes trSpin { to { transform: rotate(360deg); } }
.tr-car.tr-slide { transition: left .55s ease-out; }
.tr-shine { filter: drop-shadow(0 0 20px #fff6b0) saturate(1.15); }
.tr-steps { position: absolute; left: 50%; transform: translateX(-50%); top: 118px; display: flex; gap: 10px; background: #fff; padding: 8px 12px; border-radius: 26px; box-shadow: var(--press-sm); z-index: 4; }
.tr-steps span { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #f4efe6; opacity: .5; overflow: hidden; }
.tr-steps span svg { max-width: 56px; max-height: 56px; }
.tr-steps span.now { opacity: 1; background: #fff1c9; box-shadow: inset 0 0 0 4px var(--sun); }
.tr-steps span.done { opacity: 1; background: #dff3e8; }
.tr-replay { position: absolute; right: 30px; top: 124px; }
.tr-tray { position: absolute; background: #fff; border-radius: 36px; box-shadow: var(--press); }
.tr-tray.tr-paints { display: flex; align-items: center; justify-content: center; gap: 20px; left: 110px !important; width: 760px !important; }
.tr-part { position: absolute; display: grid; place-items: center; border-radius: 28px; background: #fff; z-index: 3; transition: transform .15s; }
.tr-part:hover { transform: translateY(-3px); }
.tr-dragging { z-index: 20 !important; transform: scale(1.1); filter: drop-shadow(0 16px 12px rgba(47, 59, 76, .25)); transition: none !important; }
.tr-return { transition: left .25s ease-out, top .25s ease-out !important; }
.tr-faded { opacity: .3; pointer-events: none; }
.tr-spot { position: absolute; border-radius: 50%; border: 8px dashed var(--sun-dark); animation: kidsPulse .7s ease-in-out infinite; pointer-events: none; z-index: 5; }
.tr-paint { width: 96px; height: 96px; border-radius: 50%; border: 8px solid #fff; box-shadow: 0 6px 0 rgba(47, 59, 76, .18); }
.tr-paint:active { transform: translateY(4px); box-shadow: none; }
.tr-go { position: absolute; right: 40px; bottom: 30px; height: 130px; padding: 0 34px 0 22px; border-radius: 44px; background: var(--go); box-shadow: 0 10px 0 var(--go-dark); display: flex; align-items: center; gap: 10px; color: #fff; font-size: 36px; font-weight: 900; z-index: 10; animation: kidsPulse 1.2s ease-in-out infinite; }
.tr-go svg { width: 80px; height: 80px; }
.tr-go.hidden { display: none; }
.tr-glow { animation: kidsGlowF 1.2s ease-in-out infinite; }
@keyframes kidsGlowF { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 190, 40, 0)); } 50% { filter: drop-shadow(0 0 20px rgba(255, 190, 40, .95)); } }
.tr-dirt { position: absolute; border-radius: 50%; pointer-events: none; transition: background .25s, box-shadow .25s, transform .25s; }
.tr-dirt[data-state="0"] { background: radial-gradient(circle at 40% 40%, #a07a52, #7d5a3a 70%); opacity: .9; }
.tr-dirt[data-state="1"] { background: radial-gradient(circle at 40% 40%, #fff, #e9f3f8 65%); box-shadow: 0 0 0 10px #ffffffcc, 22px -14px 0 -4px #fff, -20px 16px 0 -8px #fff; opacity: .95; }
.tr-dirt[data-state="2"] { background: #fff; box-shadow: 0 0 0 6px #ffffffaa; opacity: .75; transform: scale(.8); }
.tr-dirt[data-state="3"] { background: #8fd0f5; opacity: .75; transform: scale(.35); border-radius: 50% 50% 50% 0; }
.tr-dirt[data-state="4"] { opacity: 0; transform: scale(.1); }
.tr-tool { position: absolute; border-radius: 34px; background: #fff; box-shadow: var(--press); display: grid; place-items: center; }
.tr-tool.tr-held { background: #fff1c9; box-shadow: inset 0 0 0 6px var(--sun), var(--press); }
.tr-cursor { position: absolute; width: 110px; height: 110px; pointer-events: none; z-index: 15; }
.tr-cursor.hidden { display: none; }
.tr-road-strip { position: absolute; left: 0; right: 0; top: 520px; height: 150px; background: #8b95a1; border-top: 8px solid #6f7884; }
.tr-pump { position: absolute; }
.tr-pump-screen { position: absolute; left: 90px; top: 34px; width: 80px; height: 44px; color: #7cf0b0; font: 900 34px var(--kids-font); text-align: center; line-height: 44px; }
.tr-stopmark { position: absolute; background: repeating-linear-gradient(#fff 0 18px, transparent 18px 30px); border-radius: 6px; }
.tr-stopmark.hidden { display: none; }
.tr-hit { position: absolute; border-radius: 50%; z-index: 6; }
.tr-hit.tr-glow { box-shadow: 0 0 0 8px rgba(255, 201, 74, .7); animation: kidsPulse 1s ease-in-out infinite; }
.tr-hose { position: absolute; background: #2f3b4c; border-radius: 7px; transform-origin: 0 50%; pointer-events: none; z-index: 2; }
.tr-nozzle { position: absolute; z-index: 7; border-radius: 30px; }
.tr-pressed { transform: scale(.94); }
.tr-gauge { position: absolute; background: #fff; border-radius: 30px; padding: 10px; box-shadow: var(--press-sm); }
.tr-gauge.hidden { display: none; }
.tr-gauge i { display: block; height: 100%; width: 0; border-radius: 20px; background: linear-gradient(90deg, #ffd93d, #37b37e); transition: width .06s; }
.tr-jack, .tr-oldwheel { position: absolute; z-index: 6; border-radius: 30px; display: grid; place-items: center; }
.tr-oldwheel.hidden, .tr-bolts.hidden { display: none; }
.tr-bolts { position: absolute; z-index: 7; border-radius: 50%; display: grid; place-items: center; }
.tr-bolts span { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #5d6b7c; border: 4px solid #fff; transition: opacity .2s, transform .2s; }
.tr-bolts span:nth-child(1) { transform: translate(0, -34px); } .tr-bolts span:nth-child(2) { transform: translate(30px, 18px); } .tr-bolts span:nth-child(3) { transform: translate(-30px, 18px); }
.tr-bolts span.off { opacity: .15; }
.tr-bolts.tr-turn { animation: trSpin .35s ease-out; }
.tr-bolts.tr-glow { box-shadow: 0 0 0 10px rgba(255, 201, 74, .6); }
.tr-wheel-opt { background: transparent; }
.tr-road-view { position: absolute; overflow: hidden; border-radius: 0; }
.tr-world { position: absolute; left: 0; top: 0; height: 470px; will-change: transform; }
.tr-asphalt { position: absolute; left: 0; right: 0; top: 60px; height: 380px; background: #6f7884; border-top: 10px solid #fff; border-bottom: 10px solid #fff; }
.tr-dash { position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, #fff 0 70px, transparent 70px 130px); }
.tr-stopline { position: absolute; background: #fff; }
.tr-light { position: absolute; background: #2f3b4c; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 6px 0; z-index: 3; }
.tr-light i { width: 36px; height: 36px; border-radius: 50%; background: #4a5566; }
.tr-light[data-state="red"] i:nth-child(1) { background: #ff5a5f; box-shadow: 0 0 18px #ff5a5f; }
.tr-light[data-state="yellow"] i:nth-child(2) { background: #ffd93d; box-shadow: 0 0 18px #ffd93d; }
.tr-light[data-state="green"] i:nth-child(3) { background: #37b37e; box-shadow: 0 0 18px #37b37e; }
.tr-cone { position: absolute; z-index: 2; }
.tr-dest { position: absolute; background: #fff; border-radius: 40px; display: grid; place-items: center; box-shadow: var(--press-sm); }
.tr-top { transition: top .25s ease-out; z-index: 4; }
.tr-pedal { position: absolute; border-radius: 40px; background: var(--go); box-shadow: 0 12px 0 var(--go-dark); color: #fff; font-size: 42px; font-weight: 900; display: grid; place-items: center; touch-action: none; }
.tr-pedal.tr-pressed { transform: translateY(8px); box-shadow: 0 4px 0 var(--go-dark); }
.tr-lane { position: absolute; border-radius: 40px; background: var(--sky); box-shadow: 0 10px 0 var(--sky-dark); display: grid; place-items: center; }
.tr-lane:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--sky-dark); }
.tr-find-grid { position: absolute; left: 60px; right: 60px; top: 250px; bottom: 50px; display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
.tr-find-grid[data-n="4"] { grid-template-columns: repeat(4, 1fr); top: 280px; bottom: 120px; }
.tr-find-grid[data-n="6"] { grid-template-columns: repeat(3, 1fr); top: 230px; }
.tr-veh { background: #fff; border-radius: 34px; box-shadow: var(--press); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.tr-veh span { font-size: 26px; font-weight: 850; color: var(--ink-soft); }
.tr-find[data-age="3"] .tr-veh span { display: none; }
.tr-veh.tr-right { background: #e3f7ec; box-shadow: inset 0 0 0 6px var(--go), var(--press); }
.tr-veh.tr-glow { animation: kidsGlow 1.3s ease-in-out infinite; }
.tr-find-task { position: absolute; left: 50%; transform: translateX(-50%); top: 128px; height: 96px; padding: 0 30px; border-radius: 34px; background: var(--sun); box-shadow: 0 7px 0 var(--sun-dark); display: flex; align-items: center; gap: 14px; font-size: 34px; font-weight: 900; }
.tr-find-task.hidden { display: none; }
.tr-find-task svg { width: 54px; height: 54px; }
.tr-find-task b { font-size: 46px; font-weight: 700; }
.tr-find-dots { position: absolute; right: 36px; top: 150px; display: flex; gap: 10px; }
.tr-find-dots i { width: 22px; height: 22px; border-radius: 50%; background: #eadfcc; }
.tr-find-dots i.on { background: var(--go); }
.tr-road .tr-replay { right: auto; left: 400px; top: auto; bottom: 50px; }
.tr-part svg { width: 100px; height: 100px; }
.tr-find .tr-replay { display: none; }
.tr-jack { transform-origin: 50% 100%; transition: transform .2s; }

/* ---------- Сад ---------- */
.gd-scene { position: absolute; inset: 0; background: linear-gradient(#dff2ff 0 55%, #bfe3a4 55%); touch-action: none; }
.gd-plot { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border-radius: 40px; }
.gd-plot.gd-need { background: rgba(255, 220, 120, .28); box-shadow: 0 0 0 6px rgba(255, 201, 74, .45); }
.gd-plant { flex: 1; display: flex; align-items: flex-end; justify-content: center; margin-bottom: -40px; pointer-events: none; }
.gd-plot[data-stage="3"] .gd-plant { animation: kidsPop .45s cubic-bezier(.3, 1.5, .5, 1); }
.gd-soil { height: 90px; }
.gd-water { width: 170px; height: 18px; border-radius: 9px; background: #fff; margin: 8px 0 10px; overflow: hidden; opacity: 0; }
.gd-plot[data-stage="1"] .gd-water { opacity: 1; }
.gd-water i { display: block; height: 100%; width: 0; background: #5aa9f0; transition: width .1s; }
.gd-tool { position: absolute; border-radius: 34px; background: #fff; box-shadow: var(--press); display: grid; place-items: center; z-index: 8; }
.gd-basket { position: absolute; display: grid; place-items: center; }
.gd-count { position: absolute; top: 6px; right: 6px; width: 56px; height: 56px; border-radius: 50%; background: var(--go); color: #fff; font-weight: 900; font-size: 30px; display: grid; place-items: center; box-shadow: 0 5px 0 var(--go-dark); }
.gd-fruit { position: absolute; border-radius: 50%; display: grid; place-items: center; z-index: 9; }
.gd-pour { position: absolute; background: repeating-linear-gradient(180deg, #8fd0f5 0 14px, transparent 14px 24px); border-radius: 20px; opacity: .85; pointer-events: none; z-index: 7; animation: washFlow .35s linear infinite; }
.gd-pour.hidden, .gd-seed-drag.hidden { display: none; }
.gd-word { position: absolute; left: 50%; transform: translateX(-50%); top: 140px; }
.gd-word { left: 50%; right: auto; bottom: auto; top: 128px; width: auto; height: auto; min-height: 0; padding: 8px 26px; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 30px; box-shadow: var(--press-sm); z-index: 12; pointer-events: none; }
.gd-word:empty { display: none; }
.gd-word b { font-size: 44px; font-weight: 700; color: #3a5ea8; }
.gd-word span { font-size: 30px; font-weight: 900; }
.kd-replay { width: 96px !important; height: 96px !important; }

/* ---------- Главный экран: карта мира ---------- */
.world-shell { background: transparent; }
#stage[data-screen="home"] { background: radial-gradient(ellipse 60% 40% at 20% 105%, #cdeec0 0 60%, transparent 61%), radial-gradient(ellipse 70% 45% at 85% 110%, #bfe3a4 0 60%, transparent 61%), linear-gradient(#e3f3ff, #fff9ef 70%); }
.world-map { inset: 20px 0 0; padding: 0 60px; }
.world-map h1 { font-size: 64px; color: #2f3b4c; margin-top: 4px; }
.world-map .world-subtitle { text-align: center; font-size: 26px; margin: 0 0 22px; }
.world-locations { gap: 26px; }
.world-location { height: 250px; border: 0 !important; border-radius: 40px; box-shadow: 0 10px 0 rgba(47, 59, 76, .12), 0 18px 30px rgba(47, 59, 76, .08) !important; }
.world-location strong { font-size: 30px; font-weight: 900; color: var(--ink); }
.world-location .world-place-art { height: 160px; animation: kidsFloat 3.2s ease-in-out infinite; }
.world-location:nth-child(2n) .world-place-art { animation-delay: -1.1s; }
.world-location:nth-child(3n) .world-place-art { animation-delay: -2.2s; }
@keyframes kidsFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-2deg); } }
.world-location[data-place="house"] { background: #ffdccc !important; }
.world-location[data-place="kitchen"] { background: #ffe8b0 !important; }
.world-location[data-place="shop"] { background: #e0dbff !important; }
.world-location[data-place="garden"] { background: #d3f0c4 !important; }
.world-location[data-place="islam"] { background: #c9efe1 !important; }
.world-location[data-place="art"] { background: #ffd8e6 !important; }
.world-location[data-place="puzzles"] { background: #d2e8ff !important; }
.world-location[data-place="transport"] { background: #ffe0c4 !important; }
.world-parent-hint { text-align: center; color: #8a96a3; font-size: 17px; margin-top: 14px; }
.world-shelf > button { background: #fff; }
.world-shelf > button strong { font-size: 30px; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .world-location .world-place-art { animation: none; } }