/* Игровой режим готовки: сцены шагов (рисует webapp/art.js), корзина продуктов, опыт, уровни, значки. */
.fx-scene,.fx-win,.fx-prof{--fx-bg1:#FFF7EE; --fx-bg2:#FFE6CC; --fx-ink:#3A2410; --fx-ink2:#6B4A2C}
[data-theme="dark"] .fx-scene,[data-theme="dark"] .fx-win,[data-theme="dark"] .fx-prof{--fx-bg1:#2B2219; --fx-bg2:#211A13; --fx-ink:#FBEBD8; --fx-ink2:#D8BFA2}

/* ---------- сцена шага ---------- */
.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-count{fill:var(--fx-ink);font:700 15px/1 InterMM,system-ui,sans-serif}
.fx-land{transform-box:fill-box;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}

/* ---------- опыт в режиме готовки ---------- */
.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 .art-svg{position:relative}
.fx-win-pic{position:absolute;right:7%;bottom:0;height:100%;aspect-ratio:4 / 3}
.fx-win-pic .art-svg{display:block;width:100%;height:100%;overflow:visible}
.fx-dish{position:absolute;inset:0;display:flex;justify-content:center}
.fx-dish .art-svg{display:block;width:auto;height:100%;aspect-ratio:4 / 3;overflow:visible}
.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-rays{animation:none!important}
}
/* шеф-маскот на праздничном экране: стоит слева у блюда, прыгает и пробует */
.fx-win-art .fx-chef{position:absolute;left:4%;bottom:-4px;width:24%;margin:0;z-index:1}