/* Игровой режим готовки: живые сцены шагов, корзина продуктов, опыт, уровни, значки.
   Сцены — иллюстрации (цвета продуктов заданы в cookfx.js), посуда и стол — токены ниже; движение — transform и opacity. */
.fx-scene,.fx-win,.fx-prof{
  --fx-bg1:#FFF7EE; --fx-bg2:#FFE6CC; --fx-counter:#EFD3B3; --fx-counter-edge:#E0BE98; --fx-ink:#3A2410; --fx-ink2:#6B4A2C;
  --fx-metal:#3E4D5C; --fx-metal2:#5A6E82; --fx-shine:rgba(255,255,255,.2); --fx-water:#C4E5F8; --fx-inside:#2A3642; --fx-grate:#2E3338;
  --fx-steam:rgba(255,255,255,.95); --fx-pan:#2B2F33; --fx-pan-rim:#454B52; --fx-pan-in:#1F2327; --fx-oil:rgba(255,214,102,.32);
  --fx-board:#C98A4B; --fx-board-top:#E3B07A; --fx-blade:#DCE2E9; --fx-handle:#3A2A20; --fx-bowl:#F5F7F9; --fx-bowl-rim:#FFFFFF; --fx-bowl-in:#E8EDF2;
  --fx-oven:#E8ECF1; --fx-oven-panel:#D3DAE2; --fx-oven-win:#1E242B; --fx-plate:#FFFFFF; --fx-plate-in:#F1F3F6; --fx-shadow:rgba(90,55,20,.16);
  --fx-dough:#F6E1B3; --fx-pin:#D9A86A; --fx-pin-end:#B9844A; --fx-basket:#C98B4E; --fx-basket-back:#8E5A2C; --fx-weave:#A66A33;
  --fx-gold:#F2B233; --fx-gold2:#E08A00; --fx-knob:#7D8C9C;
}
[data-theme="dark"] .fx-scene,[data-theme="dark"] .fx-win,[data-theme="dark"] .fx-prof{
  --fx-bg1:#2B2219; --fx-bg2:#211A13; --fx-counter:#3A2C21; --fx-counter-edge:#4A3828; --fx-ink:#FBEBD8; --fx-ink2:#D8BFA2;
  --fx-metal:#8DA3B8; --fx-metal2:#B4C6D6; --fx-shine:rgba(255,255,255,.25); --fx-water:#3F7EA6; --fx-inside:#16212C; --fx-grate:#11161B;
  --fx-steam:rgba(255,255,255,.6); --fx-pan:#14171A; --fx-pan-rim:#2E3439; --fx-pan-in:#0E1114; --fx-oil:rgba(255,214,102,.22);
  --fx-board:#7E5229; --fx-board-top:#9C6A3A; --fx-blade:#C8D0D9; --fx-handle:#1C140F; --fx-bowl:#C9D2DB; --fx-bowl-rim:#E3E9EF; --fx-bowl-in:#AEB9C4;
  --fx-oven:#3A4048; --fx-oven-panel:#2C3238; --fx-oven-win:#0D1014; --fx-plate:#E6EAEE; --fx-plate-in:#D2D8DE; --fx-shadow:rgba(0,0,0,.35);
  --fx-dough:#E5C88E; --fx-pin:#B98A52; --fx-pin-end:#97683A; --fx-basket:#9C6A3A; --fx-basket-back:#5E3B1C; --fx-weave:#7E5229; --fx-knob:#5F6B78;
}

/* ---------- сцена шага ---------- */
.fx-scene{position:relative;width:100%;max-width:420px;aspect-ratio:2 / 1;margin:0 auto 14px;overflow:hidden;border-radius:22px;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.55),transparent 60%),linear-gradient(180deg,var(--fx-bg1),var(--fx-bg2))}
.fx-svg{display:block;width:100%;height:100%;overflow:hidden}
.fx-svg *{transform-box:fill-box}
.fx-counter{fill:var(--fx-counter)}
.fx-counter-edge{fill:none;stroke:var(--fx-counter-edge);stroke-width:2}
.fx-shadow{fill:var(--fx-shadow)}
.fx-metal{fill:var(--fx-metal)}
.fx-metal2{fill:var(--fx-metal2)}
.fx-shine{fill:none;stroke:var(--fx-shine);stroke-width:5;stroke-linecap:round}
.fx-water{fill:var(--fx-water)}
.fx-inside{fill:var(--fx-inside)}
.fx-knob{fill:var(--fx-knob)}
.fx-grate{fill:var(--fx-grate)}
.p-rice{fill:#FFFDF6;stroke:#E2D7C1;stroke-width:.6}
.fx-flame{fill:url(#fx-g-flame);transform-origin:50% 100%;animation:fx-flame .34s ease-in-out infinite alternate;animation-delay:var(--d)}
.fx-steam{fill:none;stroke:var(--fx-steam);stroke-width:4;stroke-linecap:round;opacity:0;animation:fx-steam 2.2s ease-out infinite;animation-delay:var(--d)}
.fx-bub{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.1;transform-origin:center;opacity:0;animation:fx-bub 1.3s ease-out infinite;animation-delay:var(--d)}
.fx-bob{transform-origin:center;animation:fx-bob 1.3s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
.fx-lid{transform-origin:50% 100%;animation:fx-lid 2.4s ease-in-out infinite}

/* сковорода */
.fx-pan{fill:var(--fx-pan)}
.fx-pan-rim{fill:var(--fx-pan-rim)}
.fx-pan-in{fill:var(--fx-pan-in)}
.fx-oil{fill:var(--fx-oil);animation:fx-oil 1.2s ease-in-out infinite alternate}
.fx-handle{fill:var(--fx-handle)}
.fx-hop{transform-origin:center;animation:fx-hop .9s cubic-bezier(.3,0,.5,1) infinite;animation-delay:calc(var(--d) * -1)}
.fx-splat{fill:#FFE39A;opacity:0;animation:fx-splat 1s ease-out infinite;animation-delay:var(--d)}

/* духовка */
.fx-oven{fill:var(--fx-oven)}
.fx-oven-panel{fill:var(--fx-oven-panel)}
.fx-oven-handle{fill:var(--fx-metal2)}
.fx-oven-win{fill:var(--fx-oven-win)}
.fx-glow{fill:url(#fx-g-glow);animation:fx-glow 1.8s ease-in-out infinite alternate}
.fx-display{fill:#11161B}
.fx-temp{fill:#FF9F45;font:700 12px/1 InterMM,system-ui,sans-serif}
.fx-tray{fill:var(--fx-metal2)}
.fx-sizzle{transform-origin:center;animation:fx-sizzle .5s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1)}
.fx-heat{fill:none;stroke:rgba(242,113,28,.55);stroke-width:2.4;stroke-linecap:round;opacity:0;animation:fx-steam 1.8s ease-out infinite;animation-delay:var(--d)}

/* доска, нож, тёрка, скалка */
.fx-board{fill:var(--fx-board)}
.fx-board-top{fill:var(--fx-board-top)}
.fx-board-hole{fill:var(--fx-board)}
.fx-blade{fill:var(--fx-blade);stroke:rgba(0,0,0,.08);stroke-width:1}
.fx-knife-handle{fill:var(--fx-handle)}
.fx-rivet{fill:#C9CFD6}
.fx-knife{transform-box:view-box;transform-origin:236px 80px;animation:fx-chop .62s cubic-bezier(.5,0,.5,1) infinite}
.fx-cut{transform-origin:center;opacity:0;animation:fx-cut 3.72s ease-out infinite;animation-delay:calc(var(--d) * 3.44)}
.fx-grater{fill:var(--fx-blade);stroke:rgba(0,0,0,.1);stroke-width:1}
.fx-grater-top{stroke:var(--fx-handle);stroke-width:5;stroke-linecap:round}
.fx-grater-hole{fill:rgba(0,0,0,.28)}
.fx-fall{opacity:0;animation:fx-fall 1.3s ease-in infinite;animation-delay:var(--d)}
.fx-dough{fill:var(--fx-dough);transform-origin:center;animation:fx-dough 1.4s ease-in-out infinite alternate}
.fx-pin{animation:fx-roll 1.4s ease-in-out infinite alternate}
.fx-pin-body{fill:var(--fx-pin)}
.fx-pin-end{fill:var(--fx-pin-end)}

/* миска, венчик, вода */
.fx-bowl{fill:var(--fx-bowl)}
.fx-bowl-rim{fill:var(--fx-bowl-rim)}
.fx-bowl-in{fill:var(--fx-bowl-in)}
.fx-swirl{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.6;stroke-dasharray:24 18;animation:fx-swirl 1.6s linear infinite}
.fx-orbit{transform-box:view-box;animation:fx-orbit 1.6s ease-in-out infinite}
.fx-whisk{fill:none;stroke:var(--fx-handle);stroke-width:6;stroke-linecap:round}
.fx-whisk-wire{fill:none;stroke:var(--fx-metal2);stroke-width:1.8}
.fx-spoon{fill:none;stroke:var(--fx-board);stroke-width:5;stroke-linecap:round}
.fx-spoon-head{fill:var(--fx-board)}
.fx-faucet{fill:none;stroke:var(--fx-metal2);stroke-width:10;stroke-linecap:round}
.fx-stream{fill:none;stroke:#8CC8F5;stroke-width:6;stroke-linecap:round;stroke-dasharray:10 6;animation:fx-stream .5s linear infinite}
.fx-drip{fill:#8CC8F5;opacity:0;animation:fx-drip 1s ease-out infinite;animation-delay:var(--d)}
.fx-drop{opacity:0;animation:fx-drop 1.6s cubic-bezier(.5,0,.75,0) infinite;animation-delay:var(--d)}
.fx-ring{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.2;transform-origin:center;opacity:0;animation:fx-ring 1.6s ease-out infinite;animation-delay:var(--d)}

/* тарелка, солонка, часы, искры */
.fx-plate{fill:var(--fx-plate)}
.fx-plate-in{fill:var(--fx-plate-in)}
.fx-shaker{fill:#FFFFFF;stroke:#C3CCD6;stroke-width:1.5}
.fx-shaker-cap{fill:var(--fx-metal2)}
.fx-hole{fill:var(--fx-metal)}
.fx-shake{transform-box:view-box;transform-origin:161px 12px;animation:fx-shake .46s ease-in-out infinite alternate}
.fx-spark{fill:#FFD66B;transform-origin:center;animation:fx-spark 1.8s ease-in-out infinite;animation-delay:var(--d)}
.fx-clock-face{fill:#FFFFFF;stroke:var(--fx-metal2);stroke-width:3}
.fx-clock-h,.fx-clock-m{stroke:var(--fx-metal);stroke-width:2.6;stroke-linecap:round}
.fx-clock-m{transform-origin:50% 100%;animation:fx-rot 3s linear infinite}
.fx-clock-c{fill:var(--fx-metal)}

/* корзина шага 0 */
.fx-basket{fill:var(--fx-basket)}
.fx-basket-back{fill:var(--fx-basket-back)}
.fx-basket-handle{fill:none;stroke:var(--fx-weave);stroke-width:5;stroke-linecap:round}
.fx-weave{fill:none;stroke:var(--fx-weave);stroke-width:1.6;opacity:.75}
.fx-count{fill:var(--fx-ink);font:700 15px/1 InterMM,system-ui,sans-serif}
.fx-land{transform-origin:center}
.fx-flyer{position:fixed;z-index:95;width:36px;height:36px;pointer-events:none}
.fx-flyer svg{width:100%;height:100%;overflow:visible}

@keyframes fx-flame{from{transform:scaleY(.8)}to{transform:scaleY(1.12)}}
@keyframes fx-steam{0%{opacity:0;transform:translateY(8px)}35%{opacity:.85}100%{opacity:0;transform:translateY(-18px)}}
@keyframes fx-bub{0%{opacity:0;transform:translateY(3px) scale(.2)}25%{opacity:1}100%{opacity:0;transform:translateY(-12px) scale(1.25)}}
@keyframes fx-bob{from{transform:translateY(1.6px) rotate(-9deg)}to{transform:translateY(-1.8px) rotate(9deg)}}
@keyframes fx-lid{0%,62%,100%{transform:none}68%{transform:translateY(-8px) rotate(-3deg)}74%{transform:translateY(-2px) rotate(2deg)}80%{transform:translateY(-7px) rotate(-2deg)}88%{transform:none}}
@keyframes fx-oil{from{opacity:.55}to{opacity:1}}
@keyframes fx-hop{0%,60%,100%{transform:none}30%{transform:translateY(-8px) rotate(28deg)}}
@keyframes fx-splat{0%{opacity:0;transform:none}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
@keyframes fx-glow{from{opacity:.55}to{opacity:1}}
@keyframes fx-sizzle{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes fx-chop{0%,100%{transform:rotate(-14deg)}45%,55%{transform:rotate(0deg)}}
@keyframes fx-cut{0%{opacity:0;transform:translateX(-10px) scale(.6)}8%,86%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes fx-fall{0%{opacity:0;transform:translateY(-6px)}15%{opacity:1}100%{opacity:0;transform:translateY(48px) rotate(90deg)}}
@keyframes fx-dough{from{transform:scaleX(.94)}to{transform:scaleX(1.04)}}
@keyframes fx-roll{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@keyframes fx-swirl{to{stroke-dashoffset:-84}}
@keyframes fx-orbit{0%,100%{transform:translate(-18px,0)}25%{transform:translate(0,4px)}50%{transform:translate(18px,0)}75%{transform:translate(0,-4px)}}
@keyframes fx-stream{to{stroke-dashoffset:-16}}
@keyframes fx-drip{0%{opacity:0;transform:none}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-10px)}}
@keyframes fx-drop{0%{opacity:0;transform:translateY(-58px)}15%{opacity:1}55%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateY(2px)}}
@keyframes fx-ring{0%{opacity:0;transform:scale(.3)}10%{opacity:1}60%,100%{opacity:0;transform:scale(1.6)}}
@keyframes fx-shake{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes fx-spark{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes fx-rot{to{transform:rotate(360deg)}}

/* ---------- опыт в режиме готовки ---------- */
.fx-xp{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:32px;margin-left:auto;padding:0 10px;border-radius:999px;background:var(--fill);color:var(--label);font:700 15px/1 InterMM}
.fx-xp small{font:600 12px/1 InterMM;color:var(--label2)}
.fx-star{width:17px;height:17px;fill:#F2B233}
.fx-float{position:fixed;z-index:95;pointer-events:none;color:var(--orange-ink);font:800 20px/1 InterMM;text-shadow:0 2px 10px rgba(0,0,0,.12)}

/* ---------- блюдо готово ---------- */
.fx-win{position:fixed;inset:0;z-index:85;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim)}
.fx-win-card{width:100%;max-width:520px;max-height:calc(var(--vh) * 94);overflow-y:auto;overscroll-behavior:contain;padding:0 18px calc(18px + var(--safe-b));
  border-radius:28px 28px 0 0;background:var(--bg);color:var(--label);text-align:center}
.fx-win-art{position:relative;aspect-ratio:2 / 1;margin:0 -18px 8px;overflow:hidden;border-radius:28px 28px 0 0;background:linear-gradient(180deg,var(--fx-bg1),var(--fx-bg2))}
.fx-win-art .fx-svg{position:relative}
.fx-rays{position:absolute;inset:-60%;background:repeating-conic-gradient(rgba(255,205,90,.28) 0 8deg,transparent 8deg 22deg);animation:spin 40s linear infinite}
.fx-stamp{position:absolute;right:14px;top:14px;padding:6px 12px;border:3px solid var(--green-ink);border-radius:12px;background:var(--card);color:var(--green-ink);
  font:800 17px/1 InterMM;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-8deg)}
.fx-win-card h2{font:750 24px/1.2 InterMM;text-wrap:balance}
.fx-gain{margin-top:6px;font-size:16px;color:var(--label2)}
.fx-gain b{display:block;font:800 36px/1.1 InterMM;color:var(--orange-ink);font-variant-numeric:tabular-nums}
.fx-level{margin:14px 0 0;padding:14px;border-radius:20px;background:var(--card);text-align:left}
.fx-level-row{display:flex;align-items:center;gap:12px}
.fx-level-row b{display:block;font:700 17px/1.25 InterMM}
.fx-level-row span{font-size:15px;color:var(--label2)}
.fx-level.up .fx-level-row b{color:var(--orange-ink)}
.fx-lv-num{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(160deg,#FFD36B,#E08A00);color:#3A2200;font:800 19px/1 InterMM;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.fx-bar{height:8px;margin-top:12px;overflow:hidden;border-radius:4px;background:var(--fill)}
.fx-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#FFC34D,#F08A00);transform-origin:left center}
.fx-level small{display:block;margin-top:8px;font-size:14px;color:var(--label2)}
.fx-streak{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:15px;color:var(--label)}
.fx-streak .ti{width:22px;height:22px;color:var(--orange-ink)}
.fx-new{margin-top:16px;text-align:left}
.fx-new h3{margin:0 4px 8px;font:700 17px/1.2 InterMM}
.fx-win-card .cta{margin:18px 0 0}

/* ---------- значки ---------- */
.fx-badge{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;width:100%;min-height:60px;padding:8px 12px;
  border-radius:16px;background:var(--card);color:var(--label);text-align:left}
.fx-badge .ti{grid-row:span 2;width:44px;height:44px;padding:10px;border-radius:50%;background:var(--fill);color:var(--label2)}
.fx-badge b{align-self:end;font:650 15px/1.25 InterMM}
.fx-badge span{align-self:start;font-size:13px;line-height:1.3;color:var(--label2)}
.fx-badge.on .ti{background:linear-gradient(160deg,#FFD36B,#E08A00);color:#3A2200}
.fx-new .fx-badge+.fx-badge{margin-top:8px}

/* ---------- профиль: прогресс повара ---------- */
.fx-prof{margin:2px 0 6px;padding:16px;border-radius:24px;background:linear-gradient(160deg,var(--fx-bg1),var(--fx-bg2));color:var(--fx-ink)}
.fx-prof-top{display:flex;align-items:center;gap:12px}
.fx-prof-t{min-width:0}
.fx-prof h2{font:750 20px/1.2 InterMM}
.fx-prof-t p{margin-top:2px;font-size:15px;color:var(--fx-ink2)}
.fx-prof .fx-bar{background:rgba(0,0,0,.08)}
.fx-next{margin-top:8px;font-size:14px;color:var(--fx-ink2)}
.fx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.fx-stats div{padding:10px 6px;border-radius:16px;background:rgba(255,255,255,.55);text-align:center}
[data-theme="dark"] .fx-stats div{background:rgba(255,255,255,.07)}
.fx-stats b{display:block;font:800 22px/1.1 InterMM;font-variant-numeric:tabular-nums}
.fx-stats span{display:block;margin-top:2px;font-size:13px;line-height:1.25;color:var(--fx-ink2)}
/* значки — лента медалей: сначала полученные, потом самые близкие */
.fx-medals-h{margin:16px 0 8px;font:700 16px/1.2 InterMM}
.fx-medals{display:flex;gap:6px;margin:0 -16px;padding:0 16px 2px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none}
.fx-medals::-webkit-scrollbar{display:none}
.fx-medal{display:flex;flex:0 0 86px;flex-direction:column;align-items:center;gap:6px;min-height:var(--tap);padding:4px 2px;border-radius:16px;color:var(--fx-ink);text-align:center;scroll-snap-align:start}
.fx-medal-ic{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:conic-gradient(#F0A21C calc(var(--p) * 360deg),rgba(0,0,0,.1) 0);color:var(--fx-ink2)}
[data-theme="dark"] .fx-medal-ic{background:conic-gradient(#F0A21C calc(var(--p) * 360deg),rgba(255,255,255,.12) 0)}
.fx-medal-ic::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--fx-bg1)}
.fx-medal-ic .ti{position:relative;width:26px;height:26px}
.fx-medal.on .fx-medal-ic{background:linear-gradient(160deg,#FFD36B,#E08A00);color:#3A2200}
.fx-medal.on .fx-medal-ic::before{display:none}
.fx-medal b{font:650 13px/1.2 InterMM;overflow-wrap:anywhere;hyphens:auto}
.fx-medal small{margin-top:-2px;font-size:12px;color:var(--fx-ink2)}
.fx-how{margin-top:12px;font-size:13px;line-height:1.4;color:var(--fx-ink2)}

@media (prefers-reduced-motion:reduce){
  .fx-svg *,.fx-rays{animation:none!important}
  .fx-steam,.fx-bub,.fx-splat,.fx-fall,.fx-drop,.fx-ring,.fx-drip,.fx-cut,.fx-heat{opacity:.7}
}