/* Кухня: уровни, блюда и пошаговое приготовление. Крупные цели нажатия для 3 лет. */
.kd-shell { position: absolute; inset: 102px 0 0; background: #f6f1e6; color: #3d4a43; overflow: hidden; }
.kd-title { position: absolute; top: 18px; left: 0; right: 0; margin: 0; text-align: center; font-size: 40px; font-weight: 700; }
.kd-levels { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); display: flex; gap: 16px; }
.kd-level { min-width: 190px; height: 70px; border-radius: 22px; background: #fff; border: 2px solid #e6ddcb; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: 20px; color: #5b6b61; }
.kd-level b { width: 42px; height: 42px; border-radius: 50%; background: #efe6d4; display: grid; place-items: center; font-size: 24px; }
.kd-level i { margin-left: auto; font-style: normal; font-size: 16px; opacity: .7; }
.kd-level.is-now { border-color: #6ea487; background: #eef6f0; color: #2f5d47; }
.kd-level.is-now b { background: #6ea487; color: #fff; }
.kd-dishes { position: absolute; top: 172px; left: 70px; right: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kd-dish { position: relative; height: 222px; border-radius: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 10px 24px rgba(80, 60, 30, .12); border: 1px solid #ecdcc2; }
.kd-dish strong { font-size: 24px; font-weight: 700; }
.kd-dish-art { display: grid; place-items: center; height: 160px; }
.kd-stamp { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; }
.kd-stamp svg { width: 44px; height: 44px; }
.kd-old { position: absolute; right: 30px; bottom: 16px; min-height: 52px; padding: 8px 20px; border-radius: 18px; background: #fff; border: 1px solid #e3dccd; color: #5b6f62; font-size: 19px; }

.kd-back, .kd-replay, .kd-again { position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 22px; z-index: 5; }
.kd-back { left: 24px; top: 14px; height: 70px; padding: 0 22px 0 14px; background: #5f8f76; color: #fff; font-size: 22px; font-weight: 600; }
.kd-back svg { width: 36px; height: 36px; transform: rotate(180deg); }
.kd-replay { right: 24px; top: 14px; width: 76px; height: 70px; background: #e9b949; }
.kd-replay svg { width: 44px; height: 44px; }

.kd-steps { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.kd-step { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; opacity: .4; border: 3px solid transparent; transition: opacity .3s, border-color .3s; overflow: hidden; }
.kd-step svg { width: 46px !important; height: 46px !important; overflow: visible; }
.kd-step-star, .kd-step-star svg { display: block; width: 44px; height: 44px; }
.kd-step.is-done { opacity: .8; }
.kd-step.is-now { opacity: 1; border-color: #6ea487; box-shadow: 0 6px 16px rgba(60, 110, 85, .2); }

.kd-work { position: absolute; width: 420px; height: 420px; top: 96px; left: 430px; display: grid; place-items: center; border-radius: 50%; transition: left .8s ease, top .8s ease, transform .8s ease, opacity .5s ease; z-index: 2; touch-action: none; }
.kd-work svg { width: 100%; height: 100%; }
.kd-shell[data-step^="cook"] .kd-work, .kd-shell[data-step="move"] .kd-work { left: 170px; }
.kd-work.is-hint { animation: kd-pulse 1.3s ease-in-out infinite; }
.kd-work.is-moving { transform: translateX(560px) scale(.55); opacity: .2; }
.kd-work.is-to-oven { left: 430px !important; top: 150px; transform: scale(.45); }
.kd-work.is-inside { opacity: 0; pointer-events: none; }
.kd-work.is-ready-dish { animation: kd-glow 2s ease-in-out 2; }
.kd-work.is-cracking { animation: kd-shake .35s ease-in-out 2; }
.kd-work.is-flipping svg { animation: kd-flip .7s ease-in-out; }
.kd-work.is-blending svg { animation: kd-shake .18s linear infinite; }
.kd-work.is-on-fire::after { content: ""; position: absolute; left: 90px; right: 90px; bottom: -8px; height: 46px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 150, 40, .95) 0%, rgba(255, 190, 70, .7) 45%, rgba(255, 190, 70, 0) 75%); animation: kd-heat .6s ease-in-out infinite alternate; z-index: -1; }
.kd-steam { animation: kd-heat 1s ease-in-out infinite alternate; }

.kd-side { position: absolute; right: 80px; top: 110px; width: 330px; height: 330px; display: grid; place-items: center; border-radius: 40px; transition: transform .8s ease, right .8s ease; z-index: 1; }
.kd-side.is-ready { animation: kd-pulse 1.3s ease-in-out infinite; }
.kd-side.is-on svg { filter: drop-shadow(0 0 26px rgba(255, 170, 60, .7)); }
.kd-side.is-baking { right: 475px; transform: scale(1.2); z-index: 4; }
.kd-side.is-baking.is-ready { animation: kd-pulse-big 1.3s ease-in-out infinite; }
.kd-heat { animation: kd-heat 1s ease-in-out infinite alternate; }

.kd-prog { position: absolute; left: 0; right: 0; bottom: 70px; display: flex; justify-content: center; gap: 18px; }
.kd-prog i { width: 34px; height: 34px; border-radius: 50%; background: #e6ddcb; transition: background .2s, transform .2s; }
.kd-prog i.on { background: #6ea487; transform: scale(1.15); }

.kd-tray { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 18px; z-index: 3; }
.kd-ing { position: relative; width: 146px; height: 146px; border-radius: 30px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px rgba(80, 60, 30, .12); border: 4px solid #fff; touch-action: none; transition: transform .15s, border-color .2s, opacity .2s; }
.kd-ing svg { pointer-events: none; }
.kd-ing.is-pressed { transform: scale(.93); }
.kd-ing.is-used { border-color: #9cc8ab; opacity: .75; }
.kd-ing.is-next { border-color: #e9b949; animation: kd-pulse 1.3s ease-in-out infinite; }
.kd-ing.kd-wiggle, .kd-side.kd-wiggle { animation: kd-wiggle .6s ease-in-out 2; }
.kd-check { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: #6ea487; color: #fff; font-style: normal; font-size: 20px; font-weight: 700; display: none; place-items: center; }
.kd-ing.is-used .kd-check { display: grid; }
.kd-halal { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 10px; background: #2f7d57; color: #fff; font-style: normal; font-size: 18px; font-family: "Amiri", "Noto Naskh Arabic", "DejaVu Sans", serif; }
.kd-ghost { position: absolute; width: 120px; height: 120px; pointer-events: none; z-index: 60; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .18)); }

.kd-word { position: absolute; right: 36px; top: 460px; max-width: 440px; min-height: 76px; padding: 8px 26px; border-radius: 26px; background: #fff; box-shadow: 0 10px 24px rgba(80, 60, 30, .16); display: flex; align-items: center; gap: 12px; z-index: 6; font-size: 28px; color: #4c5d52; }
.kd-word b { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 46px; font-weight: 400; color: #2f6b52; line-height: 1.3; }
.kd-word.hidden, .kd-side.hidden, .kd-tray.hidden, .kd-prog.hidden { display: none; }

.kd-recap { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; gap: 12px; z-index: 3; }
.kd-recap-item { width: 120px; height: 132px; border-radius: 24px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 8px 18px rgba(80, 60, 30, .1); }
.kd-recap-item b { font-family: "Amiri", "Noto Naskh Arabic", "Noto Sans Arabic", "DejaVu Sans", serif; font-size: 28px; font-weight: 400; color: #2f6b52; line-height: 1.2; }
.kd-again { right: 36px; top: 250px; height: 90px; padding: 0 28px 0 20px; background: #5f8f76; color: #fff; font-size: 26px; font-weight: 600; box-shadow: 0 10px 20px rgba(60, 110, 85, .25); }
.kd-again svg { width: 44px; height: 44px; }

@keyframes kd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes kd-pulse-big { 0%, 100% { transform: scale(1.2); } 50% { transform: scale(1.26); } }
@keyframes kd-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 30px rgba(255, 200, 90, .9)); } }
@keyframes kd-heat { from { transform: translateY(0); opacity: .6; } to { transform: translateY(-8px); opacity: 1; } }
@keyframes kd-shake { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-6px) rotate(-2deg); } 75% { transform: translateX(6px) rotate(2deg); } }
@keyframes kd-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.06); } 75% { transform: rotate(6deg) scale(1.06); } }
@keyframes kd-flip { 0% { transform: scaleY(1); } 50% { transform: scaleY(-1) translateY(-40px); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .kd-work, .kd-step, .kd-ing, .kd-side { transition: none; }
  .kd-work.is-hint, .kd-side.is-ready, .kd-heat, .kd-steam, .kd-work.is-ready-dish, .kd-ing.is-next, .kd-work.is-blending svg, .kd-work.is-on-fire::after { animation: none; }
}