:root {
  --ink: #4d3940;
  --muted: #9b7e82;
  --pink: #f05c7a;
  --pink-deep: #dc4767;
  --peach: #ffb56c;
  --cream: #fffaf5;
  --cream-2: #fff3e8;
  --line: rgba(151, 103, 101, .14);
  --shadow: 0 22px 60px rgba(133, 72, 69, .13), 0 4px 14px rgba(133, 72, 69, .08);
  --shadow-soft: 0 10px 28px rgba(133, 72, 69, .1);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 13px;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #fff6ee;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
/* ===== 顶部导航 ===== */
.game-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px clamp(14px, 4vw, 40px);
  background: rgba(255, 250, 245, .78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(151, 103, 101, .14);
  box-shadow: 0 6px 20px rgba(133, 72, 69, .06);
}
.game-nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 17px; letter-spacing: 2px;
  color: var(--ink); text-decoration: none;
}
.game-nav-logo .game-nav-mark {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(240, 92, 122, .35);
  box-shadow: 0 0 12px rgba(240, 92, 122, .25);
}
.game-nav-logo em {
  font-style: normal; font-weight: 400; font-size: 11px;
  color: var(--muted); letter-spacing: 3px; margin-left: 3px;
}
.game-nav-links { display: flex; gap: 3px; align-items: center; }
.game-nav-links a {
  color: var(--muted); text-decoration: none;
  padding: 7px 13px; border-radius: 999px; font-size: 13px;
  letter-spacing: 1px; transition: all .25s;
}
.game-nav-links a:hover { color: var(--ink); background: rgba(240, 92, 122, .08); }
.game-nav-links a.on { color: #fff; background: linear-gradient(135deg, #ff9d76, var(--pink)); box-shadow: 0 4px 14px rgba(240, 92, 122, .3); }
@media (max-width: 520px) {
  .game-nav { padding: 8px 12px; }
  .game-nav-links a { padding: 6px 10px; font-size: 12px; }
  .game-nav-links a:nth-child(3) { display: none; }
  .game-nav-logo em { display: none; }
}

body { margin: 0; min-width: 320px; min-height: 100vh; background:
  radial-gradient(circle at 15% 6%, rgba(255, 213, 178, .48), transparent 23rem),
  radial-gradient(circle at 86% 17%, rgba(249, 196, 211, .4), transparent 25rem),
  linear-gradient(145deg, #fffaf2 0%, #fff4ec 48%, #fff7f2 100%); }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }

.ambient { position: fixed; pointer-events: none; border-radius: 999px; filter: blur(1px); opacity: .8; z-index: 0; }
.ambient-one { width: 26rem; height: 26rem; left: -13rem; bottom: -10rem; background: radial-gradient(circle, rgba(255,178,132,.34), transparent 68%); }
.ambient-two { width: 22rem; height: 22rem; right: -8rem; top: 35%; background: radial-gradient(circle, rgba(249,166,192,.24), transparent 65%); }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .18; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }

.game-shell { position: relative; z-index: 2; width: min(1500px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 18px; }
.glass-panel { background: rgba(255, 252, 248, .79); border: 1px solid rgba(255,255,255,.86); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.topbar { min-height: 82px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; padding: 17px 24px; }
.brand-wrap { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(145deg, #ffbd99, #f06a82); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 17px rgba(240,92,122,.28); transform: rotate(-5deg); }
.brand-mark span { font-size: 25px; filter: drop-shadow(0 2px 2px rgba(123,45,54,.15)); }
.eyebrow { display: block; color: #c49193; font-weight: 800; font-size: 9px; letter-spacing: .18em; line-height: 1.2; }
h1,h2,p { margin: 0; }
h1 { font-size: 22px; letter-spacing: -.03em; line-height: 1.1; }
h2 { font-size: 18px; letter-spacing: -.04em; line-height: 1.2; }
.resource-row { display: flex; align-items: center; gap: 8px; }
.resource-pill { height: 40px; padding: 0 12px 0 8px; border-radius: 999px; display: flex; align-items: center; gap: 7px; color: #6b4e54; background: rgba(255,255,255,.68); border: 1px solid rgba(229,198,184,.57); box-shadow: inset 0 1px 0 #fff; }
.resource-pill strong { font-size: 13px; }
.resource-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; background: linear-gradient(145deg,#ffd66d,#f5a433); box-shadow: 0 3px 7px rgba(245,164,51,.3); }
.energy-pill .resource-icon { background: linear-gradient(145deg,#89d9e4,#52a9db); box-shadow: 0 3px 7px rgba(82,169,219,.25); }
.resource-timer { font-size: 9px; color: #b78e87; font-weight: 800; letter-spacing: .04em; }
.icon-button { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.68); border: 1px solid rgba(229,198,184,.57); color: #a9787c; font-size: 17px; transition: .2s ease; }
.icon-button:hover { transform: translateY(-2px); color: var(--pink); box-shadow: var(--shadow-soft); }

.level-strip { margin-top: 14px; min-height: 65px; border-radius: 20px; display: flex; align-items: center; gap: 20px; padding: 13px 18px; }
.level-badge { display: flex; align-items: center; gap: 10px; min-width: 116px; color: var(--muted); font-size: 12px; }
.level-badge strong { display: flex; align-items: baseline; gap: 2px; color: var(--pink-deep); font-size: 19px; }
.level-badge b { font-size: 23px; }
.progress-wrap { flex: 1; min-width: 0; }
.progress-label { display: flex; justify-content: space-between; align-items: center; color: #af8a88; font-size: 10px; margin-bottom: 7px; }
.progress-label strong { font-size: 10px; color: #7e5d62; }
.progress-track { height: 10px; padding: 2px; border-radius: 99px; background: #f4e7df; box-shadow: inset 0 1px 3px rgba(151,103,101,.14); }
.progress-fill { width: 0; height: 100%; position: relative; border-radius: inherit; background: linear-gradient(90deg, #ffb16f, #f16b7e 65%, #d65078); transition: width .55s cubic-bezier(.23,1.35,.47,1); }
.progress-fill span { position: absolute; width: 6px; height: 6px; border-radius: 50%; top: 0; right: 4px; background: #fff6e4; box-shadow: 0 0 8px #fff; }
.streak-badge { min-width: 100px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.spark { color: #f5a743; font-size: 25px; text-shadow: 0 2px 8px rgba(245,167,67,.3); }
.streak-badge small { color: #b9928a; display: block; font-size: 9px; }
.streak-badge strong { display: block; color: #dd8067; font-size: 18px; line-height: 1; margin-top: 4px; }

.game-layout { display: grid; grid-template-columns: minmax(210px, 260px) minmax(520px, 1fr) minmax(210px, 260px); gap: 18px; margin-top: 18px; align-items: start; }
.orders-panel, .collection-panel { border-radius: var(--radius-lg); padding: 20px; min-height: 680px; }
.section-title { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 17px; }
.section-title.compact { margin-bottom: 13px; }
.section-title h2 { margin-top: 5px; }
.live-dot { color: #77aa82; font-size: 9px; font-weight: 800; display: flex; gap: 5px; align-items: center; padding-top: 5px; }
.live-dot i { width: 6px; height: 6px; border-radius: 50%; background: #79c28a; box-shadow: 0 0 0 4px rgba(121,194,138,.14); }
.orders-list { display: flex; flex-direction: column; gap: 11px; }
.order-card { padding: 13px; border-radius: 17px; background: rgba(255,255,255,.73); border: 1px solid rgba(244,222,211,.8); box-shadow: 0 5px 14px rgba(156,100,93,.05); }
.order-card.done { background: linear-gradient(145deg, #fffdf9, #f5fff5); border-color: rgba(142,197,142,.35); }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.customer { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; }
.customer-avatar { width: 27px; height: 27px; border-radius: 10px; display: grid; place-items: center; background: #fff0e8; font-size: 17px; }
.order-time { color: #c09d96; font-size: 9px; }
.order-text { color: #ad8888; font-size: 10px; margin: 10px 0 8px; }
.order-items { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.order-foods { display: flex; gap: 5px; }
.mini-food { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; font-size: 18px; background: var(--food-bg, #fff0e2); box-shadow: inset 0 -2px 0 rgba(121,71,50,.08); position: relative; }
.mini-food em { position: absolute; right: -3px; bottom: -3px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 8px; display: grid; place-items: center; background: #f39b71; color: #fff; font-size: 8px; font-style: normal; font-weight: 900; border: 1px solid #fffaf4; }
.reward { color: #d9913f; font-size: 10px; font-weight: 900; white-space: nowrap; }
.deliver-button { width: 100%; height: 30px; margin-top: 10px; border-radius: 10px; color: #fff; font-weight: 800; font-size: 10px; background: linear-gradient(135deg,#f58b84,#e8627a); box-shadow: 0 6px 12px rgba(232,98,122,.2); transition: .2s ease; }
.deliver-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(232,98,122,.28); }
.deliver-button:disabled { color: #bd9f98; background: #f5ece6; box-shadow: none; }
.chef-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 18px; padding: 12px; border-radius: 15px; background: linear-gradient(145deg, rgba(255,237,222,.86), rgba(255,248,236,.77)); }
.chef-avatar { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: #ffd7c4; font-size: 18px; }
.chef-note strong { display: block; font-size: 10px; }
.chef-note p { color: #ad8580; font-size: 9px; line-height: 1.55; margin-top: 3px; }

.board-stage { min-width: 0; position: relative; }
.board-frame { position: relative; border-radius: 31px; padding: 22px 22px 18px; overflow: hidden; background: linear-gradient(145deg, rgba(255,253,248,.96), rgba(255,246,235,.92)); border: 1px solid rgba(255,255,255,.96); box-shadow: 0 28px 70px rgba(129,76,61,.17), inset 0 0 0 1px rgba(223,180,156,.16); }
.board-frame:before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background-image: radial-gradient(circle at 20% 20%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 55%, #edc6ad 0 1px, transparent 1.5px); background-size: 37px 37px, 43px 43px; }
.board-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 4px 15px; }
.board-kicker { color: #c89985; font-size: 9px; letter-spacing: .16em; font-weight: 900; }
.board-topline h2 { margin-top: 4px; }
.board-status { display: flex; align-items: center; gap: 6px; color: #84a988; font-size: 9px; font-weight: 800; }
.board-status span { width: 8px; height: 8px; border-radius: 50%; background: #8ec895; box-shadow: 0 0 0 4px rgba(142,200,149,.13); }
.board-status.warn { color: #ce9574; }
.board-status.warn span { background: #e9a675; box-shadow: 0 0 0 4px rgba(233,166,117,.16); }
.game-board { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, minmax(40px, 1fr)); gap: 8px; padding: 9px; border-radius: 23px; background: rgba(250,230,211,.56); border: 1px solid rgba(231,190,160,.47); box-shadow: inset 0 3px 9px rgba(142,92,68,.11), 0 4px 0 rgba(255,255,255,.72); touch-action: none; }
.board-cell { aspect-ratio: 1; position: relative; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, rgba(255,250,241,.86), rgba(244,219,197,.52)); border: 1px solid rgba(255,255,255,.78); box-shadow: inset 0 1px 1px rgba(255,255,255,.86), inset 0 -3px 5px rgba(184,124,91,.08); transition: .18s ease; user-select: none; }
.board-cell:after { content: ""; position: absolute; width: 32%; height: 10%; bottom: 11%; border-radius: 50%; background: rgba(135,79,59,.11); filter: blur(2px); opacity: .7; }
.board-cell.selected { transform: translateY(-3px); border-color: #f39895; box-shadow: 0 0 0 3px rgba(242,119,135,.18), 0 8px 13px rgba(231,99,122,.17), inset 0 1px 1px #fff; }
.board-cell.target { background: rgba(255,244,192,.84); border-color: #f3c678; animation: targetPulse 1s ease-in-out infinite; }
.board-cell.shake { animation: shake .35s ease; }
.board-cell.merge-pop { animation: mergePop .42s cubic-bezier(.1,.9,.25,1.35); }
.board-cell.move-pop { animation: movePop .23s ease; }
.board-cell.empty-hover { border-color: rgba(241,145,128,.7); background: #fff5e9; }
.food-tile { --tile-bg: #fff0dd; --tile-border: #f7cfac; width: 81%; height: 81%; position: relative; z-index: 2; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(circle at 31% 20%, rgba(255,255,255,.8), transparent 22%), var(--tile-bg); border: 1px solid rgba(255,255,255,.92); box-shadow: 0 7px 10px rgba(137,83,55,.14), inset 0 -4px 0 rgba(112,60,41,.08), inset 0 1px 1px #fff; font-size: clamp(23px, 4vw, 36px); filter: saturate(1.05); transition: transform .18s ease; }
.food-tile:before { content: ""; width: 26%; height: 10%; position: absolute; top: 13%; left: 15%; border-radius: 999px; background: rgba(255,255,255,.65); transform: rotate(-22deg); }
.food-tile:after { content: ""; position: absolute; inset: 7px; border-radius: 12px; border: 1px solid rgba(255,255,255,.24); pointer-events: none; }
.board-cell:hover .food-tile { transform: translateY(-2px) rotate(-2deg); }
.level-pip { position: absolute; z-index: 3; right: -4px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: 8px; background: #fffaf2; color: #c88972; border: 1px solid #f1cbb7; box-shadow: 0 2px 5px rgba(129,75,54,.14); font-size: 9px; font-weight: 900; }
.producer-dock { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 13px; padding: 16px 4px 0; }
.producer-copy span, .next-preview > span { display: block; color: #bf958b; font-size: 9px; }
.producer-copy strong { display: block; margin-top: 4px; color: #76575a; font-size: 11px; }
.producer-button { position: relative; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 23px; background: linear-gradient(145deg,#ff9d92,#e85e79); box-shadow: 0 11px 17px rgba(223,84,108,.24), inset 0 1px 0 rgba(255,255,255,.65); transition: transform .18s ease, box-shadow .18s ease; }
.producer-button:hover:not(:disabled) { transform: translateY(-4px) rotate(2deg); box-shadow: 0 15px 24px rgba(223,84,108,.3), inset 0 1px 0 rgba(255,255,255,.65); }
.producer-button:active:not(:disabled) { transform: translateY(1px) scale(.96); }
.producer-button:disabled { filter: grayscale(.35); opacity: .6; }
.oven-icon { position: relative; z-index: 1; font-size: 30px; filter: drop-shadow(0 3px 3px rgba(126,47,56,.24)); }
.oven-glow { position: absolute; inset: 8px; border-radius: 18px; border: 1px dashed rgba(255,255,255,.52); animation: spin 12s linear infinite; }
.producer-cost { position: absolute; right: -8px; bottom: -6px; z-index: 2; padding: 4px 7px; border-radius: 9px; color: #fff; background: #6cb6cf; border: 2px solid #fff7ed; font-size: 9px; font-weight: 900; box-shadow: 0 3px 6px rgba(64,133,162,.22); }
.next-preview { justify-self: end; text-align: right; }
#next-items { display: flex; justify-content: flex-end; gap: 5px; margin-top: 5px; }
.preview-chip { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #fff4e8; font-size: 15px; box-shadow: inset 0 -2px 0 rgba(133,72,69,.08); }
.board-tip { padding: 11px 0 0; text-align: center; color: #b7958b; font-size: 10px; }
.stage-decor { position: absolute; z-index: 3; color: #e9ac9c; font-size: 27px; opacity: .7; pointer-events: none; }
.decor-left { left: -7px; top: 16%; transform: rotate(-18deg); }
.decor-right { right: -2px; bottom: 19%; color: #e8be74; font-size: 19px; }

.collection-count { color: #d49083; background: #fff0e8; padding: 5px 8px; border-radius: 9px; font-size: 9px; font-weight: 900; }
.collection-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.collection-item { min-width: 0; padding: 8px 4px 7px; text-align: center; border-radius: 13px; background: rgba(255,255,255,.58); border: 1px solid rgba(244,222,211,.7); opacity: .5; filter: grayscale(.35); transition: .2s ease; }
.collection-item.unlocked { opacity: 1; filter: none; background: linear-gradient(145deg, #fff9f1, #fff0e9); }
.collection-item.current { box-shadow: 0 0 0 2px rgba(240,92,122,.16); border-color: #f3a2a0; }
.collection-food { width: 38px; height: 38px; margin: 0 auto 5px; display: grid; place-items: center; border-radius: 12px; background: var(--food-bg, #f7eee8); font-size: 22px; }
.collection-item b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8d6b6c; font-size: 9px; }
.collection-item small { display: block; margin-top: 2px; color: #c29f97; font-size: 8px; }
.toolbox { margin-top: 19px; padding-top: 16px; border-top: 1px dashed rgba(198,151,136,.35); }
.toolbox-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.toolbox-title span { font-size: 11px; font-weight: 900; }
.toolbox-title small { color: #b99b94; font-size: 8px; }
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tool-button { min-height: 73px; display: flex; flex-direction: column; align-items: flex-start; padding: 9px; border-radius: 13px; text-align: left; background: rgba(255,255,255,.69); border: 1px solid rgba(244,222,211,.76); transition: .2s ease; }
.tool-button:hover:not(:disabled) { transform: translateY(-2px); border-color: #f0b4a9; box-shadow: var(--shadow-soft); }
.tool-button > span { font-size: 16px; line-height: 1; }
.tool-button b { margin-top: 5px; font-size: 9px; }
.tool-button small { margin-top: 2px; color: #b7958e; font-size: 8px; }
.tool-button:disabled { opacity: .42; }
.tool-button.danger:not(:disabled) { border-color: rgba(228,133,121,.45); background: #fff4ef; }
.tool-button.danger:not(:disabled) b { color: #d76f67; }

.footer-bar { display: flex; justify-content: space-between; padding: 14px 5px 0; color: #b69991; font-size: 9px; }
.footer-bar button { color: #be8d86; background: transparent; text-decoration: underline; text-underline-offset: 3px; }

.toast-container { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 11px 16px; border-radius: 999px; color: #fff; background: rgba(75,53,54,.9); box-shadow: 0 10px 25px rgba(76,48,48,.2); font-size: 11px; font-weight: 800; animation: toastIn .28s ease, toastOut .35s ease 2.2s forwards; }
.effects-layer { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.float-score { position: absolute; color: #df6f70; font-weight: 900; font-size: 17px; text-shadow: 0 2px 0 #fff; animation: floatScore .95s ease forwards; }
.sparkle { position: absolute; color: #f5a642; font-size: 18px; animation: sparkle .7s ease forwards; }

.modal-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(92,62,61,.28); backdrop-filter: blur(8px); opacity: 1; transition: opacity .2s ease; }
.modal-backdrop.hidden { display: none; opacity: 0; }
.modal-card { position: relative; width: min(440px, 100%); padding: 30px; border-radius: 28px; text-align: center; background: linear-gradient(145deg, #fffdfa, #fff2e8); border: 1px solid rgba(255,255,255,.92); box-shadow: 0 28px 80px rgba(78,45,48,.27); overflow: hidden; }
.modal-card h2 { margin-top: 8px; font-size: 27px; }
.modal-card > p { margin: 11px auto 0; max-width: 340px; color: #9e7e7d; font-size: 12px; line-height: 1.7; }
.modal-close { position: absolute; z-index: 2; right: 15px; top: 12px; width: 30px; height: 30px; border-radius: 50%; color: #b8918d; background: rgba(255,255,255,.62); font-size: 23px; line-height: 1; }
.modal-hero { width: 100%; height: 105px; margin: -30px 0 24px; display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(255,183,121,.55), transparent 43%), linear-gradient(145deg,#ffe5d3,#ffd5dd); }
.hero-plate { width: 140px; height: 74px; display: flex; align-items: center; justify-content: center; gap: 0; filter: drop-shadow(0 8px 8px rgba(159,92,66,.12)); }
.hero-plate span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,.53); font-size: 29px; transform: rotate(-8deg); }
.hero-plate span:nth-child(2) { transform: translateY(-13px) rotate(7deg); background: #fff3e4; }
.hero-plate span:nth-child(3) { width: auto; height: auto; background: transparent; font-size: 19px; transform: translate(3px,-34px); }
.tutorial-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
.tutorial-steps div { padding: 11px 7px; border-radius: 14px; background: rgba(255,255,255,.64); border: 1px solid rgba(239,209,194,.65); }
.tutorial-steps span { width: 23px; height: 23px; display: grid; place-items: center; margin: 0 auto 6px; border-radius: 50%; color: #fff; background: #f29a8d; font-size: 10px; font-weight: 900; }
.tutorial-steps strong, .tutorial-steps small { display: block; }
.tutorial-steps strong { font-size: 9px; }
.tutorial-steps small { margin-top: 4px; color: #b49891; font-size: 8px; line-height: 1.4; }
.primary-button { width: 100%; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(135deg,#f79b8a,#e95e7c); box-shadow: 0 10px 18px rgba(233,94,124,.22); font-size: 12px; font-weight: 900; transition: .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 13px 23px rgba(233,94,124,.3); }
.primary-button span { margin-left: 7px; font-size: 16px; }
.help-card { text-align: left; }
.help-card .primary-button { margin-top: 20px; }
.help-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.help-list div { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 14px; background: rgba(255,255,255,.62); }
.help-list span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; background: #fff0e4; font-size: 16px; }
.help-list p { flex: 1; color: #a48480; font-size: 10px; line-height: 1.6; }
.help-list strong { color: #6e5357; margin-right: 4px; font-size: 11px; }
.victory-card { padding-top: 46px; }
.victory-rays { position: absolute; inset: -40px; opacity: .45; background: repeating-conic-gradient(from 0deg, #ffd79a 0 8deg, transparent 8deg 20deg); mask-image: radial-gradient(circle, #000 0 33%, transparent 64%); }
.victory-crown { position: relative; font-size: 48px; animation: crownFloat 2.5s ease-in-out infinite; }
.victory-card h2 { position: relative; color: #d4676c; }
.victory-card p { position: relative; }
.victory-stats { position: relative; display: flex; justify-content: center; gap: 36px; margin: 24px 0; }
.victory-stats div { display: flex; flex-direction: column; }
.victory-stats span { color: #df7c58; font-size: 23px; font-weight: 900; }
.victory-stats small { color: #b3968e; font-size: 9px; margin-top: 3px; }
.victory-card .primary-button { position: relative; }

@keyframes targetPulse { 0%,100% { box-shadow: inset 0 1px 1px #fff, 0 0 0 0 rgba(243,198,120,.0); } 50% { box-shadow: inset 0 1px 1px #fff, 0 0 0 5px rgba(243,198,120,.16); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes mergePop { 0% { transform: scale(.72) rotate(-7deg); opacity: .35; } 64% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes movePop { 0% { transform: scale(.88); } 100% { transform: scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes floatScore { 0% { opacity: 0; transform: translate(-50%, 0) scale(.75); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -58px) scale(1.13); } }
@keyframes sparkle { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-85px) scale(1.2) rotate(70deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes crownFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }

@media (max-width: 1120px) { .game-layout { grid-template-columns: 220px minmax(480px, 1fr); } .collection-panel { grid-column: 1 / -1; min-height: unset; } .collection-list { grid-template-columns: repeat(9, 1fr); } .toolbox { display: none; } }
@media (max-width: 780px) { .game-shell { width: min(100% - 20px, 620px); padding-top: 10px; } .topbar { padding: 13px 14px; border-radius: 20px; } .brand-mark { width: 41px; height: 41px; border-radius: 14px; } .brand-mark span { font-size: 21px; } h1 { font-size: 19px; } .resource-row { gap: 5px; } .resource-pill { height: 34px; padding-right: 8px; } .resource-pill strong { font-size: 11px; } .resource-icon { width: 21px; height: 21px; font-size: 12px; } .resource-timer { display: none; } .icon-button { width: 34px; height: 34px; } .level-strip { gap: 10px; padding: 11px 13px; } .level-badge { min-width: 90px; font-size: 10px; } .level-badge strong { font-size: 15px; } .level-badge b { font-size: 19px; } .streak-badge { min-width: 70px; } .streak-badge small { font-size: 8px; } .streak-badge strong { font-size: 15px; } .game-layout { display: flex; flex-direction: column; gap: 12px; } .board-stage { order: 1; width: 100%; } .orders-panel { order: 2; width: 100%; min-height: unset; padding: 16px; } .collection-panel { order: 3; width: 100%; padding: 16px; } .orders-list { display: grid; grid-template-columns: repeat(3, 1fr); } .order-card { padding: 10px; } .customer { font-size: 9px; } .customer-avatar { width: 23px; height: 23px; font-size: 14px; } .order-time { display: none; } .order-text { font-size: 9px; margin: 7px 0; } .reward { font-size: 8px; } .board-frame { padding: 15px 12px 14px; border-radius: 24px; } .board-topline { padding-bottom: 11px; } .game-board { gap: 5px; padding: 6px; border-radius: 18px; } .board-cell { border-radius: 11px; } .food-tile { border-radius: 12px; font-size: clamp(20px, 7vw, 33px); } .producer-dock { gap: 8px; padding-top: 12px; } .producer-copy strong { font-size: 10px; } .producer-button { width: 57px; height: 57px; border-radius: 18px; } .oven-icon { font-size: 26px; } .next-preview { font-size: 8px; } .preview-chip { width: 22px; height: 22px; font-size: 13px; } .collection-list { grid-template-columns: repeat(9, 1fr); gap: 4px; } .collection-item { padding: 5px 1px; border-radius: 9px; } .collection-food { width: 28px; height: 28px; font-size: 17px; border-radius: 8px; margin-bottom: 3px; } .collection-item b { font-size: 7px; } .collection-item small { font-size: 7px; } .chef-note { display: none; } }
@media (max-width: 480px) { .game-shell { width: calc(100% - 12px); } .topbar { align-items: flex-start; } .brand-wrap { gap: 8px; } .resource-row { flex-wrap: wrap; justify-content: flex-end; max-width: 185px; } .resource-pill { height: 31px; } .icon-button { width: 31px; height: 31px; } .level-badge { min-width: 75px; } .level-strip { gap: 7px; } .progress-label { font-size: 8px; } .orders-list { grid-template-columns: 1fr; } .order-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: center; } .order-head { grid-column: 1; } .order-text { grid-column: 1; margin: 0; } .order-items { grid-column: 2; grid-row: 1 / 3; flex-direction: column; align-items: flex-end; } .order-card .deliver-button { grid-column: 1 / -1; margin-top: 2px; } .board-kicker { font-size: 8px; } .board-status { font-size: 8px; } .board-tip { font-size: 9px; } .collection-list { grid-template-columns: repeat(5, 1fr); gap: 6px; } .collection-item:nth-child(n+6) { display: none; } .toolbox { display: block; } .tool-grid { grid-template-columns: repeat(4, 1fr); } .tool-button { min-height: 63px; padding: 7px; } .tool-button > span { font-size: 14px; } .tool-button b { font-size: 8px; } .tool-button small { font-size: 7px; } .modal-card { padding: 25px 18px; } .modal-hero { margin: -25px -18px 20px; width: calc(100% + 36px); } .tutorial-steps { gap: 5px; } .tutorial-steps small { font-size: 7px; } }