:root {
  --ink:#3b271e;
  --muted:#866d5e;
  --cream:#fff7e8;
  --paper:#fffaf0;
  --panel:#fff3d6;
  --orange:#ffad43;
  --orange2:#f48638;
  --green:#77b86a;
  --red:#e46655;
  --line:rgba(90,57,35,.14);
  --shadow:0 10px 30px rgba(82,52,30,.14);
  --soft-shadow:0 5px 16px rgba(82,52,30,.11);
  --z-game:10;
  --z-game-vfx:80;
  --z-modal:1700;
  --z-tutorial-dimmer:1900;
  --z-tutorial-spotlight:1910;
  --z-tutorial-route:1920;
  --z-tutorial-pointer:1930;
  --z-tutorial-callout:1940;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#f2bd68;color:var(--ink)}
body{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;-webkit-touch-callout:none}img,svg{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
button:focus-visible{outline:3px solid rgba(61,120,213,.55);outline-offset:2px}
#app{position:fixed;inset:0;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:
  radial-gradient(circle at 12% 14%,rgba(255,255,255,.34) 0 2px,transparent 3px),
  radial-gradient(circle at 86% 24%,rgba(255,255,255,.24) 0 2px,transparent 3px),
  linear-gradient(145deg,#ffd67d 0%,#f6b45b 55%,#e99343 100%);
display:grid;grid-template-rows:58px minmax(0,1fr)}
#app:before,#app:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.13);pointer-events:none;filter:blur(1px)}
#app:before{width:42vw;height:42vw;left:-20vw;bottom:-25vw}#app:after{width:32vw;height:32vw;right:-15vw;top:12vh}
.topbar{position:relative;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 12px;border-bottom:1px solid rgba(95,56,26,.09);background:rgba(255,244,216,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:9px;min-width:0}.brand-mark{width:42px;height:42px;display:block;filter:drop-shadow(0 4px 4px rgba(81,46,22,.12))}.brand-mark svg{width:100%;height:100%}.brand-copy{display:flex;flex-direction:column;line-height:.87;letter-spacing:.04em}.brand-copy b{font-size:17px}.brand-copy span{font-size:13px;color:var(--orange2);font-weight:900;letter-spacing:.17em;margin-top:5px}
.stats{display:flex;align-items:center;justify-content:flex-start;gap:7px;min-width:0}.stat-pill{height:42px;min-width:118px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(99,64,37,.12);border-radius:14px;background:rgba(255,250,238,.78);box-shadow:0 3px 12px rgba(78,45,23,.07);padding:0 12px}.stat-pill strong{font-size:15px;white-space:nowrap}.stat-icon{width:24px;height:24px;display:block}.stat-icon svg{width:100%;height:100%}
.top-actions{display:flex;justify-content:flex-end;gap:6px}.icon-btn{position:relative;width:42px;height:42px;border:1px solid rgba(99,64,37,.12);border-radius:14px;background:rgba(255,250,238,.78);display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 12px rgba(78,45,23,.07);transition:transform .12s ease,background .12s ease}.icon-btn:active{transform:scale(.94)}.icon-btn span{width:23px;height:23px;display:block}.icon-btn svg{width:100%;height:100%}.icon-btn i{position:absolute;right:-2px;top:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#e75c4b;color:white;font:800 10px/17px system-ui;font-style:normal;border:2px solid #ffe5ac}
.play-layout{position:relative;z-index:2;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,345px);gap:12px;padding:12px;overflow:hidden}
.game-stage{min-height:0;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.cook-row{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px;min-height:94px}.chef-card,.goal-card,.board-shell,.side-panel{border:1px solid var(--line);background:rgba(255,249,235,.9);box-shadow:var(--shadow)}
.chef-card{border-radius:22px;display:flex;align-items:center;min-width:0;padding:8px 14px 8px 8px;overflow:hidden}.steamer-wrap{width:136px;height:78px;display:flex;align-items:center;justify-content:center;flex:none}.steamer-btn{position:relative;width:128px;height:72px;border:0;background:transparent;padding:0;cursor:pointer;transition:transform .14s ease}.steamer-btn:active{transform:scale(.95)}.steamer-btn>span:first-child,.steamer-btn svg{position:absolute;inset:0;width:100%;height:100%}.cook-label{position:absolute;inset:13px 0 auto 0;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none}.cook-label small{font-weight:950;font-size:11px;letter-spacing:.12em;color:#6c4327}.cook-label b{font-size:16px;background:#fff4d7;border:1px solid rgba(99,64,37,.13);padding:3px 8px;border-radius:999px;box-shadow:0 2px 4px rgba(66,35,17,.08)}.cook-label b{display:flex;align-items:center;justify-content:center;gap:4px}.steamer-wrap.cooking{animation:steamerPop .38s ease}
@keyframes steamerPop{25%{transform:translateY(4px) scale(.97)}55%{transform:translateY(-5px) scale(1.03)}100%{transform:none}}
.chef-copy{min-width:0;flex:1}.mini-label{font-size:11px;letter-spacing:.12em;font-weight:950;color:#805033;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mystery-track{height:10px;margin:7px 0 6px;border-radius:999px;overflow:hidden;background:#e9d8bb;box-shadow:inset 0 1px 2px rgba(76,43,21,.1)}.mystery-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#e6853a,#f8c148,#e96b87);transition:width .25s ease}.tiny-note{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-card{border-radius:22px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;transition:transform .12s ease,filter .12s ease}.goal-card:active{transform:scale(.97)}.goal-card>span:first-child{width:42px;height:42px;display:block}.goal-card svg{width:100%;height:100%}.goal-card>span:last-child{display:flex;flex-direction:column;text-align:left}.goal-card b{font-size:12px;letter-spacing:.06em}.goal-card small{font-size:10px;color:var(--muted);margin-top:2px}
.board-shell{border-radius:26px;min-height:0;padding:12px;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.board-topline{height:38px;display:flex;align-items:start;justify-content:space-between;gap:10px;padding:1px 3px 7px 5px;flex:none}.board-topline>div:first-child{display:flex;flex-direction:column;min-width:0}.board-topline span{font-size:12px;font-weight:950;letter-spacing:.1em}.board-topline small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.best-chip{height:30px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:#fff8e8;padding:0 9px;flex:none}.best-chip span{font-size:9px;color:var(--muted)}.best-chip b{font-size:12px}
.board-area{min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden}.board{position:relative;width:120px;height:120px;max-width:100%;max-height:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:8px;padding:9px;border-radius:24px;background:linear-gradient(145deg,#d68a41,#c97935);box-shadow:inset 0 0 0 2px rgba(98,52,22,.12),inset 0 8px 15px rgba(98,52,22,.11),0 6px 12px rgba(84,47,23,.1)}
.cell{position:relative;min-width:0;min-height:0;border-radius:18px;background:linear-gradient(145deg,#f8d590,#e9b765);box-shadow:inset 0 2px 0 rgba(255,255,255,.33),inset 0 -3px 5px rgba(111,59,25,.08);display:grid;place-items:center;overflow:hidden;touch-action:none}.cell:after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px dashed rgba(120,73,40,.13);pointer-events:none}.cell.drop-ok{box-shadow:inset 0 0 0 4px rgba(88,162,87,.52),0 0 0 3px rgba(255,255,255,.45)}.cell.drop-bad{animation:cellShake .22s linear}@keyframes cellShake{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
.dumpling-card{position:relative;z-index:2;width:86%;height:86%;display:grid;place-items:center;cursor:grab;touch-action:none;filter:drop-shadow(0 5px 3px rgba(80,44,25,.13));transform-origin:50% 78%;transition:filter .18s ease}.dumpling-card:active{cursor:grabbing}.dumpling-card svg{width:100%;height:100%;overflow:visible}.dumpling-card.rare{filter:drop-shadow(0 0 7px rgba(255,237,141,.7)) drop-shadow(0 5px 3px rgba(80,44,25,.13))}.dumpling-card.squish{animation:squish .32s cubic-bezier(.2,.9,.25,1.35)}@keyframes squish{0%{transform:scale(1)}35%{transform:scale(1.16,.73) translateY(6%)}68%{transform:scale(.92,1.12) translateY(-2%)}100%{transform:scale(1)}}.dumpling-card.merge-in{animation:mergeIn .42s cubic-bezier(.16,.9,.24,1.3)}@keyframes mergeIn{0%{transform:scale(.25) rotate(-12deg);opacity:.15}65%{transform:scale(1.18) rotate(4deg)}100%{transform:scale(1);opacity:1}}.dumpling-level{position:absolute;right:-2%;bottom:0;min-width:24px;height:20px;border-radius:999px;background:#fff9e9;border:1px solid rgba(88,54,33,.17);box-shadow:0 2px 5px rgba(72,41,22,.1);display:grid;place-items:center;padding:0 5px;font-size:10px;font-weight:950;z-index:4}.drag-ghost{position:fixed;z-index:var(--z-game-vfx);width:96px;height:96px;pointer-events:none;transform:translate(-50%,-55%) scale(1.08);filter:drop-shadow(0 14px 9px rgba(67,39,22,.24));opacity:.94}.drag-ghost svg{width:100%;height:100%}.drag-source{opacity:.18}

.box-card{position:relative;z-index:3;width:88%;height:88%;border:0;background:transparent;padding:0;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 6px 4px rgba(80,44,25,.16));transform-origin:50% 80%}
.box-card svg{width:100%;height:100%;overflow:visible}.box-card:active{transform:scale(.93)}
.box-card.box-arrive{animation:boxArrive .52s cubic-bezier(.12,.85,.18,1.3)}@keyframes boxArrive{0%{transform:translateY(-70%) scale(.35) rotate(-12deg);opacity:0}65%{transform:translateY(7%) scale(1.08) rotate(3deg);opacity:1}100%{transform:none}}
.box-card.opening{pointer-events:none;animation:boxBounce .36s ease both}.box-card.opening .box-lid{transform-box:fill-box;transform-origin:center;animation:lidPop .36s cubic-bezier(.15,.9,.3,1.3) forwards}
@keyframes boxBounce{0%{transform:scale(1)}40%{transform:scale(.9,1.08)}100%{transform:scale(1.08)}}@keyframes lidPop{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(-27px) rotate(-13deg);opacity:.05}}
.dumpling-card.reveal-in{animation:revealIn .48s cubic-bezier(.13,.88,.23,1.35)}@keyframes revealIn{0%{transform:scale(.18) translateY(30%);opacity:.1}65%{transform:scale(1.16) translateY(-4%);opacity:1}100%{transform:none}}
.income-tick{animation:incomeTick .38s ease}@keyframes incomeTick{45%{transform:translateY(-2px) scale(1.08);color:#4f9164}100%{transform:none}}
.merge-burst{position:absolute;z-index:var(--z-game-vfx);width:105%;height:105%;pointer-events:none;animation:burstFade .65s ease-out forwards}.merge-burst svg{width:100%;height:100%;overflow:visible}@keyframes burstFade{0%{transform:scale(.25) rotate(0);opacity:1}75%{opacity:1}100%{transform:scale(1.4) rotate(18deg);opacity:0}}
.side-panel{min-height:0;border-radius:26px;display:grid;grid-template-rows:48px minmax(0,1fr);overflow:hidden}.tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:7px 7px 0;gap:4px;border-bottom:1px solid var(--line)}.tab{border:0;border-radius:13px 13px 0 0;background:transparent;font-size:10px;font-weight:950;letter-spacing:.06em;color:#8b6b58;cursor:pointer}.tab.active{background:#fff9eb;color:var(--ink);box-shadow:inset 0 2px 0 rgba(240,157,62,.65)}.panel-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px;scrollbar-width:thin;scrollbar-color:#d6ad71 transparent}.panel-page{display:none}.panel-page.active{display:block}.panel-title{font-size:11px;font-weight:950;letter-spacing:.1em;color:#6f4a34;margin:3px 2px 8px}.upgrade-card,.boost-card{position:relative;border:1px solid var(--line);background:#fffaf0;border-radius:18px;padding:10px;margin-bottom:8px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:9px;align-items:center;box-shadow:var(--soft-shadow)}.upgrade-icon,.boost-icon{width:44px;height:44px;border-radius:14px;background:#f7ddb1;display:grid;place-items:center;padding:6px}.upgrade-icon svg,.boost-icon svg{width:100%;height:100%}.upgrade-copy,.boost-copy{min-width:0;display:flex;flex-direction:column}.upgrade-copy b,.boost-copy b{font-size:12px}.upgrade-copy small,.boost-copy small{font-size:10px;color:var(--muted);line-height:1.25;margin-top:3px}.buy-btn,.reward-btn{border:0;border-radius:12px;background:linear-gradient(180deg,#f6bc55,#ed9235);box-shadow:0 3px 0 #ca7227;color:#51301d;font-weight:950;font-size:11px;padding:9px 9px;min-width:64px;cursor:pointer}.buy-btn:active,.reward-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #ca7227}.buy-btn:disabled{filter:grayscale(.6);opacity:.58;cursor:default}.buy-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px}.price-coin{width:16px;height:16px;display:inline-block;flex:none;vertical-align:middle}.price-coin svg{display:block;width:100%;height:100%}.cook-label .price-coin{width:15px;height:15px}.lvl-tag{font-size:9px;font-weight:900;color:#9d714e;margin-top:2px}.boost-card{grid-template-columns:44px minmax(0,1fr)}.boost-card .reward-btn{grid-column:1/-1;width:100%;display:flex;align-items:center;justify-content:center;gap:7px}.ad-badge{font-size:9px;background:#764d31;color:#fff5dd;border-radius:999px;padding:3px 7px;letter-spacing:.08em}.boost-timer{font-size:10px;font-weight:900;color:#d45d48;margin-top:4px}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.collection-item{position:relative;aspect-ratio:1;border:1px solid var(--line);background:#fffaf0;border-radius:16px;padding:5px;display:grid;place-items:center;box-shadow:var(--soft-shadow);overflow:hidden}.collection-item.locked{filter:grayscale(.9);opacity:.48}.collection-item svg{width:78%;height:78%;filter:drop-shadow(0 3px 2px rgba(75,44,27,.12))}.collection-item span{position:absolute;left:6px;top:5px;font-size:9px;font-weight:950;background:rgba(255,250,240,.86);border-radius:999px;padding:2px 5px}.collection-item small{position:absolute;left:5px;right:5px;bottom:5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;font-weight:900;color:#65462f}
.tutorial-overlay{position:fixed;inset:0;z-index:var(--z-tutorial-dimmer);pointer-events:none;overflow:hidden}.tutorial-overlay[hidden]{display:none}.tutorial-focus{position:fixed;border:4px solid rgba(255,251,213,.95);border-radius:24px;box-shadow:0 0 0 9999px rgba(48,31,21,.47),0 0 22px rgba(255,241,159,.55);transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease,opacity .15s ease;pointer-events:none}.tutorial-finger{position:fixed;width:68px;height:84px;z-index:2;filter:drop-shadow(0 8px 5px rgba(52,34,24,.3));transform-origin:50% 20%;pointer-events:none}.tutorial-finger svg{width:100%;height:100%;overflow:visible}.tutorial-skip{position:fixed;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:3;width:42px;height:42px;border:2px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(59,39,30,.7);color:white;font-size:29px;line-height:36px;font-weight:500;pointer-events:auto;cursor:pointer}
.toast-stack{position:fixed;z-index:1200;left:50%;top:78px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;width:min(90vw,420px)}.toast{background:rgba(62,42,30,.93);color:#fff6e8;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 28px rgba(54,30,17,.2);border-radius:999px;padding:8px 13px;font-size:11px;font-weight:850;animation:toastLife 2.1s ease forwards}@keyframes toastLife{0%{opacity:0;transform:translateY(-6px) scale(.96)}12%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.offline-card{position:fixed;z-index:1100;left:50%;top:50%;transform:translate(-50%,-50%);width:min(88vw,340px);border:1px solid var(--line);background:#fff8e9;border-radius:26px;box-shadow:0 28px 80px rgba(66,37,20,.32);padding:18px;display:grid;grid-template-columns:76px minmax(0,1fr) 54px;align-items:center;gap:10px}.offline-card[hidden]{display:none}.offline-card>div:first-child{width:76px;height:70px}.offline-card svg{width:100%;height:100%}.offline-card>div:nth-child(2){display:flex;flex-direction:column}.offline-card small{font-size:9px;font-weight:950;color:var(--muted);letter-spacing:.08em}.offline-card b{font-size:22px;margin-top:3px}.offline-card button{border:0;border-radius:13px;background:#f2a741;font-weight:950;height:40px;cursor:pointer}
.sdk-chip{position:fixed;z-index:50;right:8px;bottom:7px;pointer-events:none;font-size:8px;font-weight:950;letter-spacing:.08em;color:rgba(66,42,26,.55);background:rgba(255,248,231,.52);border-radius:999px;padding:3px 6px}
@media(max-width:820px){
  #app{}.topbar{padding:5px 8px;gap:5px;}.stat-pill{height:38px;min-width:86px;padding:0 7px;}.stat-pill strong{font-size:13px;}.stat-icon{width:21px;height:21px;}.top-actions{gap:4px;}.icon-btn{width:38px;height:38px;border-radius:12px;}
  .play-layout{padding:7px;gap:7px;}.game-stage{gap:6px;}.cook-row{gap:6px;}.chef-card{border-radius:17px;padding:4px 7px;}.steamer-wrap{width:102px;height:60px;}.steamer-btn{width:100px;height:58px;}.cook-label{inset:10px 0 auto;}.cook-label small{font-size:9px;}.cook-label b{font-size:12px;padding:2px 6px;}.tiny-note{display:none;}.mini-label{font-size:9px;}.mystery-track{margin:5px 0 0;height:8px;}.goal-card{border-radius:17px;padding:0 7px;gap:5px;}.goal-card>span:first-child{}.goal-card b{font-size:9px;}.goal-card small{font-size:8px;}
  .board-shell{border-radius:20px;padding:7px;}.board-topline{height:29px;padding:0 2px 4px;}.board-topline small{display:none;}.board-topline span{font-size:10px;}.best-chip{height:23px;}.best-chip span{font-size:8px;}.best-chip b{font-size:10px;}.board{gap:5px;padding:6px;border-radius:18px;}.cell{border-radius:13px;}.dumpling-level{height:17px;min-width:20px;font-size:8px;}.side-panel{border-radius:20px;}.tabs{padding:5px 5px 0;}.tab{font-size:9px;}.panel-scroll{padding:7px;}.upgrade-card,.boost-card{padding:7px;margin-bottom:6px;border-radius:15px;grid-template-columns:38px minmax(0,1fr) auto;gap:7px;}.upgrade-icon,.boost-icon{width:38px;height:38px;}.buy-btn{padding:7px;font-size:10px;}.collection-grid{grid-template-columns:repeat(4,1fr);gap:5px;}.sdk-chip{display:none;}.toast-stack{top:61px;}
}
@media(max-height:560px) and (min-width:821px){
  #app{}.topbar{padding:3px 10px;}.stat-pill,.icon-btn{height:36px;}.icon-btn{width:36px;}.play-layout{padding:7px;gap:7px;}.game-stage{gap:6px;}.cook-row{}.chef-card,.goal-card{border-radius:17px;}.steamer-wrap{width:110px;height:58px;}.steamer-btn{width:105px;height:56px;}.cook-label{inset:9px 0 auto;}.tiny-note{display:none;}.board-shell{padding:7px;border-radius:20px;}.board-topline{height:28px;}.board{gap:5px;padding:6px;}.side-panel{border-radius:20px;}.toast-stack{top:54px;}
}
@media(max-width:430px){.stat-pill{min-width:82px;padding:0 6px;}.stat-pill strong{font-size:12px;}.stats{gap:4px;}.collection-grid{grid-template-columns:repeat(4,1fr);}}
.panel-scroll{touch-action:pan-y;-webkit-overflow-scrolling:touch}
@keyframes floatCoin{0%{opacity:0;transform:translate(-50%,5px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-24px) scale(1.08)}}

/* v7 visual polish: rounded real-dumpling silhouettes, premium sparkle finishes and stronger reveal impact */
.dumpling-card svg .dumpling-sparkle{transform-box:fill-box;transform-origin:center;animation:dumplingTwinkle 1.35s ease-in-out 2 alternate}.dumpling-card svg .dumpling-shimmer{animation:dumplingShimmer 1.8s ease-in-out 2 alternate}
@keyframes dumplingTwinkle{0%{opacity:.45;transform:scale(.94) rotate(-2deg)}100%{opacity:1;transform:scale(1.06) rotate(2deg)}}@keyframes dumplingShimmer{0%{opacity:.2;stroke-dasharray:7 24;stroke-dashoffset:0}100%{opacity:.8;stroke-dasharray:15 14;stroke-dashoffset:-24}}
.dumpling-card.rare{filter:drop-shadow(0 0 8px rgba(255,238,150,.72)) drop-shadow(0 0 3px rgba(148,219,255,.52)) drop-shadow(0 5px 3px rgba(80,44,25,.13))}
.box-card.opening{animation:boxBounce .43s cubic-bezier(.2,.8,.2,1) both}.box-card.opening .box-lid{animation:lidPop .43s cubic-bezier(.12,.88,.22,1.32) forwards}.box-card.opening .box-left{transform-box:fill-box;transform-origin:70% 55%;animation:boxLeft .43s cubic-bezier(.12,.7,.28,1) forwards}.box-card.opening .box-right{transform-box:fill-box;transform-origin:30% 55%;animation:boxRight .43s cubic-bezier(.12,.7,.28,1) forwards}.box-card.opening .box-ribbon,.box-card.opening .box-face{animation:boxFade .3s ease forwards}
@keyframes boxBounce{0%{transform:scale(1)}24%{transform:scale(1.12,.82) translateY(3%)}54%{transform:scale(.96,1.1) translateY(-3%)}100%{transform:scale(1.06)}}@keyframes lidPop{0%{transform:translateY(0) rotate(0) scale(1);opacity:1}100%{transform:translateY(-34px) translateX(8px) rotate(24deg) scale(.78);opacity:0}}@keyframes boxLeft{0%,28%{transform:none;opacity:1}100%{transform:translate(-13px,9px) rotate(-13deg) scale(.9);opacity:.2}}@keyframes boxRight{0%,28%{transform:none;opacity:1}100%{transform:translate(13px,9px) rotate(13deg) scale(.9);opacity:.2}}@keyframes boxFade{0%,25%{opacity:1}100%{opacity:0}}
.box-open-fx{position:fixed;z-index:var(--z-game-vfx);width:1px;height:1px;pointer-events:none}.box-open-fx:before{content:"";position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff9d2 0 12%,rgba(255,218,94,.82) 25%,rgba(255,157,103,.28) 52%,transparent 70%);animation:boxFlash .48s ease-out forwards}.box-open-fx:after{content:"";position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,247,185,.95);transform:translate(-50%,-50%) scale(.2);animation:boxRing .55s ease-out forwards}.box-open-fx i{position:absolute;left:0;top:0;background:var(--particle);animation:boxParticle .7s cubic-bezier(.12,.72,.26,1) var(--delay) forwards}.box-open-fx .box-shard{width:15px;height:10px;border-radius:2px;box-shadow:0 1px 0 rgba(102,58,26,.16);clip-path:polygon(0 20%,100% 0,82% 100%,16% 82%)}.box-open-fx .box-spark{width:10px;height:10px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 3px #fff7bd)}
@keyframes boxFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}24%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}@keyframes boxRing{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}@keyframes boxParticle{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}14%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(15deg)}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.62) rotate(var(--rot))}}
.dumpling-card.reveal-in{animation:revealIn .58s cubic-bezier(.13,.88,.2,1.34)}@keyframes revealIn{0%{transform:scale(.08) translateY(45%);opacity:0;filter:brightness(2)}54%{transform:scale(1.22) translateY(-8%);opacity:1;filter:brightness(1.25)}76%{transform:scale(.94,1.07) translateY(1%)}100%{transform:none;filter:none}}
.rare-celebration{position:fixed;inset:0;z-index:var(--z-modal);pointer-events:none;overflow:hidden;animation:rareScene 1.65s ease both}.rare-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(255,251,205,.78) 0 12%,rgba(255,211,84,.34) 24%,rgba(87,47,131,.12) 48%,rgba(42,25,26,.22) 100%);animation:rareFlash 1.65s ease both}.rare-rays{position:absolute;left:50%;top:48%;width:min(92vmin,720px);aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,231,116,.72) 0 8deg,transparent 8deg 19deg);mask-image:radial-gradient(circle,#000 0 8%,rgba(0,0,0,.85) 35%,transparent 70%);animation:rareRays 1.65s cubic-bezier(.16,.8,.2,1) both}.rare-halo{position:absolute;left:50%;top:48%;width:min(43vmin,330px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,229,.95) 0 24%,rgba(255,221,94,.56) 42%,rgba(255,164,215,.25) 62%,transparent 74%);filter:blur(2px);animation:rareHalo 1.25s ease-in-out both}.rare-dumpling{position:absolute;left:50%;top:48%;width:min(52vmin,270px);aspect-ratio:1.2;transform:translate(-50%,-50%);filter:drop-shadow(0 14px 14px rgba(72,39,28,.26)) drop-shadow(0 0 18px rgba(255,241,141,.9));animation:rareHero 1.65s cubic-bezier(.13,.9,.2,1.2) both}.rare-dumpling svg{width:100%;height:100%;overflow:visible}.rare-ring{position:absolute;left:50%;top:48%;width:min(25vmin,190px);aspect-ratio:1;border-radius:50%;border:4px solid rgba(255,251,194,.9);transform:translate(-50%,-50%);animation:rareRing 1s ease-out .22s both}.rare-confetti{position:absolute;left:var(--x);top:-7vh;width:8px;height:15px;border-radius:2px;background:var(--particle);transform:rotate(var(--rot));box-shadow:0 0 2px rgba(255,255,255,.5);animation:rareConfetti var(--dur) cubic-bezier(.12,.58,.28,1) var(--delay) both}.rare-star{position:absolute;left:var(--sx);top:var(--sy);width:16px;height:16px;background:#fff7a6;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 5px #ffd653);animation:rareStar .75s ease-out var(--delay) both}
.rare-celebration.legendary .rare-halo{background:radial-gradient(circle,rgba(255,255,255,.98) 0 20%,rgba(190,244,255,.62) 38%,rgba(255,170,225,.4) 54%,rgba(255,226,93,.24) 68%,transparent 76%)}.rare-celebration.legendary .rare-dumpling{filter:drop-shadow(0 16px 15px rgba(52,32,75,.3)) drop-shadow(0 0 25px rgba(201,246,255,.95)) drop-shadow(0 0 12px rgba(255,190,231,.9))}
@keyframes rareScene{0%{opacity:0}8%,78%{opacity:1}100%{opacity:0}}@keyframes rareFlash{0%{opacity:0}12%{opacity:1}62%{opacity:.78}100%{opacity:0}}@keyframes rareRays{0%{transform:translate(-50%,-50%) scale(.2) rotate(-35deg);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.28) rotate(24deg);opacity:0}}@keyframes rareHalo{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{transform:translate(-50%,-50%) scale(1.18);opacity:1}100%{transform:translate(-50%,-50%) scale(1.42);opacity:0}}@keyframes rareHero{0%{transform:translate(-50%,-34%) scale(.08) rotate(-12deg);opacity:0}24%{transform:translate(-50%,-53%) scale(1.24) rotate(4deg);opacity:1}46%{transform:translate(-50%,-50%) scale(.96) rotate(-2deg)}72%{transform:translate(-50%,-50%) scale(1.04) rotate(1deg);opacity:1}100%{transform:translate(-50%,-57%) scale(.92);opacity:0}}@keyframes rareRing{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(2.45);opacity:0}}@keyframes rareConfetti{0%{opacity:0;transform:translateY(-8vh) translateX(0) rotate(var(--rot)) scale(.5)}12%{opacity:1}100%{opacity:.15;transform:translateY(112vh) translateX(var(--dx)) rotate(calc(var(--rot) + 680deg)) scale(1)}}@keyframes rareStar{0%{transform:translate(-50%,-50%) scale(.1) rotate(0);opacity:0}35%{transform:translate(-50%,-50%) scale(1.35) rotate(45deg);opacity:1}100%{transform:translate(-50%,-50%) scale(.45) rotate(110deg);opacity:0}}
@media(max-width:600px){.rare-dumpling{width:min(56vmin,250px);}.rare-halo{width:min(72vmin,340px);}.rare-rays{width:125vmin;}.rare-confetti{width:7px;height:13px;}}
@media(prefers-reduced-motion:reduce){.dumpling-card svg .dumpling-sparkle,.dumpling-card svg .dumpling-shimmer{animation:none;}.rare-celebration,.box-open-fx{display:none;}}

/* Short landscape is a separate composition: keep the tray fully visible instead of stacking a tall panel below it. */
@media(max-height:560px) and (orientation:landscape){
  #app{}
  .topbar{padding:3px 8px;}.stat-pill,.icon-btn{height:36px;}.icon-btn{width:36px;}
  .play-layout{padding:7px;gap:7px;}
  .game-stage{gap:6px;}
  .cook-row{gap:6px;}
  .chef-card{border-radius:16px;padding:3px 7px;}.steamer-wrap{width:94px;height:54px;}.steamer-btn{width:92px;height:52px;}.cook-label{inset:7px 0 auto;}.cook-label small{font-size:8px;}.cook-label b{font-size:10px;padding:1px 5px;}.tiny-note{display:none;}.mini-label{font-size:8px;}.mystery-track{margin-top:4px;height:7px;}
  .goal-card{border-radius:16px;padding:0 6px;gap:4px;}.goal-card>span:first-child{}.goal-card b{font-size:8px;}.goal-card small{font-size:7px;}
  .board-shell{padding:6px;border-radius:18px;}.board-topline{height:25px;padding-bottom:3px;}.board-topline small{display:none;}.board-topline span{font-size:9px;}.best-chip{height:21px;}.best-chip span{font-size:7px;}.best-chip b{font-size:9px;}.board{gap:4px;padding:5px;border-radius:16px;}.cell{border-radius:11px;}.dumpling-level{height:15px;min-width:18px;font-size:7px;padding:0 4px;}
  .side-panel{border-radius:18px;}.tabs{padding:4px 4px 0;}.tab{font-size:8px;}.panel-scroll{padding:6px;}.upgrade-card,.boost-card{padding:6px;margin-bottom:5px;border-radius:13px;grid-template-columns:34px minmax(0,1fr) auto;gap:6px;}.upgrade-icon,.boost-icon{width:34px;height:34px;}.upgrade-copy b,.boost-copy b{font-size:10px;}.upgrade-copy small,.boost-copy small{font-size:8px;}.buy-btn{padding:6px 7px;font-size:9px;min-width:55px;}.lvl-tag{font-size:7px;}.collection-grid{grid-template-columns:repeat(4,1fr);gap:4px;}
  .toast-stack{top:52px;}
}

/* UX/UI reliability pass: structural cook card, readable typography and exact tutorial geometry. */
.sdk-chip{display:none!important}
.help-glyph{display:grid!important;place-items:center;width:100%!important;height:100%!important;font-size:22px;font-weight:950;line-height:1}

.chef-card{display:grid;grid-template-columns:minmax(128px,170px) minmax(105px,1fr);align-items:center;gap:10px;padding:8px 12px;overflow:hidden}
.steamer-wrap{width:auto;height:74px;min-width:0}
.steamer-btn{position:relative;width:100%;height:68px;display:grid;grid-template-columns:minmax(66px,88px) minmax(54px,1fr);align-items:center;gap:4px;border:0;background:transparent;padding:0;cursor:pointer}
.steamer-btn>span:first-child,.steamer-btn svg{position:static;inset:auto;width:100%;height:100%}
.steamer-art{display:block;height:66px;min-width:0}.steamer-art svg{display:block;width:100%;height:100%}
.cook-label{position:static;inset:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0;pointer-events:none}
.cook-label small{font-size:12px;letter-spacing:.08em;white-space:nowrap}.cook-label b{min-height:30px;font-size:15px;padding:4px 8px;max-width:100%;white-space:nowrap}
.free-price{font-size:11px;letter-spacing:.03em}
.chef-copy{min-width:0;display:grid;grid-template-rows:auto 10px auto;gap:6px;align-content:center}
.mystery-head{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0}.mini-label{font-size:12px;letter-spacing:.07em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mystery-count{font-size:12px;white-space:nowrap;color:#6a432d}
.mystery-track{height:10px;margin:0}.tiny-note{font-size:12px;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#755b4e}
.goal-card{min-height:74px}.goal-card b{font-size:13px}.goal-card small{font-size:12px;line-height:1.2;color:#705849}
.board-topline{height:44px}.board-topline span{font-size:13px}.board-topline small{font-size:12px;line-height:1.2}.best-chip span{font-size:11px}.best-chip b{font-size:13px}
.dumpling-level{min-width:26px;height:21px;font-size:11px}

.tab{font-size:12px}.panel-title{font-size:13px}.upgrade-copy b,.boost-copy b{font-size:14px}.upgrade-copy small,.boost-copy small{font-size:12px;line-height:1.35}.buy-btn,.reward-btn{font-size:13px;min-height:40px}.lvl-tag{font-size:11px;color:#77523c}.ad-badge{font-size:10px}.boost-timer{font-size:12px}.collection-item span{font-size:11px}.collection-item small{font-size:11px;color:#533928}.offline-card small{font-size:11px}.offline-card button{min-width:54px;min-height:44px}.toast{font-size:12px;line-height:1.25;text-align:center}
.upgrade-card.unavailable{background:#f7f0e4}.upgrade-card.unavailable .upgrade-icon{filter:saturate(.55)}.buy-btn:disabled,.reward-btn:disabled{filter:grayscale(.62);opacity:.55;box-shadow:none;cursor:default;transform:none}
.panel-scroll{padding-bottom:20px;scrollbar-width:auto;mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 13px),rgba(0,0,0,.35) 100%)}
.mystery-box{filter:drop-shadow(0 0 8px rgba(152,104,220,.42)) drop-shadow(0 6px 4px rgba(80,44,25,.16))}

.tutorial-overlay{position:fixed;inset:0;z-index:var(--z-tutorial-dimmer);pointer-events:auto;overflow:hidden;touch-action:none;background:transparent}
.tutorial-focus{position:fixed;border:3px solid rgba(255,251,213,.98);border-radius:18px;box-shadow:0 0 0 9999px rgba(48,31,21,.5),0 0 20px rgba(255,241,159,.62);transition:left .16s ease,top .16s ease,width .16s ease,height .16s ease,opacity .12s ease;pointer-events:none}
.tutorial-focus{z-index:1}.tutorial-focus-secondary{box-shadow:0 0 20px rgba(255,241,159,.62);z-index:2}
.tutorial-route{position:fixed;height:4px;z-index:3;transform-origin:0 50%;pointer-events:none;transition:opacity .12s ease}
.tutorial-route span{position:absolute;left:8px;right:11px;top:0;height:4px;border-radius:999px;background:rgba(255,246,179,.98);box-shadow:0 0 8px rgba(255,235,124,.7)}
.tutorial-route span:after{content:"";position:absolute;right:-8px;top:50%;width:12px;height:12px;border-top:4px solid rgba(255,246,179,.98);border-right:4px solid rgba(255,246,179,.98);transform:translateY(-50%) rotate(45deg);filter:drop-shadow(0 0 3px rgba(255,235,124,.7))}
.tutorial-finger{position:fixed;z-index:4;filter:drop-shadow(0 7px 4px rgba(52,34,24,.28));transform-origin:52% 15.5%;pointer-events:none}.tutorial-finger svg{width:100%;height:100%;overflow:visible}
.tutorial-text{position:fixed;z-index:5;min-height:40px;display:flex;align-items:center;justify-content:center;padding:10px 13px;border-radius:15px;background:rgba(255,249,226,.97);border:2px solid rgba(255,255,255,.8);box-shadow:0 7px 22px rgba(48,31,21,.24);font-size:14px;font-weight:900;line-height:1.25;text-align:center;color:#4c3124;pointer-events:none}
.tutorial-skip{right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));width:44px;height:44px;line-height:38px;pointer-events:auto}
.tutorial-mode .top-actions{visibility:hidden}

.help-overlay{position:fixed;inset:0;z-index:1850;display:grid;place-items:center;padding:16px;background:rgba(48,31,21,.48);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.help-overlay[hidden]{display:none}
.help-card{position:relative;width:min(92vw,420px);max-height:min(86vh,520px);overflow:auto;border-radius:24px;border:1px solid var(--line);background:#fff8e9;box-shadow:0 28px 80px rgba(66,37,20,.34);padding:22px}.help-card h2{margin:0 42px 9px 0;font-size:21px}.help-card p{margin:0;color:#684c3d;font-size:15px;line-height:1.45}.help-close{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:#f1dfbf;font-size:27px;cursor:pointer}.help-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.help-actions button{min-height:46px;border-radius:14px;font-weight:900;font-size:13px;cursor:pointer}.secondary-action{border:1px solid rgba(92,57,35,.18);background:#fffdf7}.primary-action{border:0;background:linear-gradient(180deg,#f6bc55,#ed9235);box-shadow:0 3px 0 #ca7227}

@media(max-width:820px){
  #app{}
  .topbar{padding:4px 7px;}.stat-pill{height:40px;min-width:84px;}.icon-btn{width:40px;height:40px;}
  .play-layout{padding:7px;gap:7px;}
  .game-stage{gap:6px;}
  .cook-row{gap:6px;}
  .chef-card{gap:5px;padding:5px 6px;border-radius:17px;}
  .steamer-wrap{height:68px;}.steamer-btn{height:64px;grid-template-columns:minmax(47px,55px) minmax(43px,1fr);gap:2px;}.steamer-art{height:58px;}.cook-label small{font-size:12px;letter-spacing:.04em;}.cook-label b{font-size:13px;padding:3px 5px;min-height:27px;}.cook-label .price-coin{width:14px;height:14px;}.free-price{font-size:10px;}
  .chef-copy{grid-template-rows:auto 8px;gap:5px;}.tiny-note{display:none;}.mini-label,.mystery-count{font-size:11px;}.mystery-track{height:8px;}
  .goal-card{border-radius:17px;padding:0 7px;gap:5px;}.goal-card>span:first-child{}.goal-card b{font-size:12px;}.goal-card small{font-size:11px;}
  .board-shell{border-radius:20px;padding:7px;}.board-topline{height:34px;padding:0 2px 5px;}.board-topline small{display:none;}.board-topline span{font-size:12px;}.best-chip{height:27px;}.best-chip span{font-size:10px;}.best-chip b{font-size:12px;}.board{gap:5px;padding:6px;}.dumpling-level{height:18px;min-width:22px;font-size:11px;}
  .side-panel{}.tabs{padding:4px 4px 0;}.tab{font-size:11px;}.panel-scroll{padding:7px 7px 20px;}.upgrade-card,.boost-card{padding:8px;margin-bottom:7px;grid-template-columns:40px minmax(0,1fr) auto;gap:7px;}.upgrade-icon,.boost-icon{width:40px;height:40px;}.upgrade-copy b,.boost-copy b{font-size:13px;}.upgrade-copy small,.boost-copy small{font-size:12px;}.buy-btn{font-size:12px;min-width:66px;}.collection-grid{grid-template-columns:repeat(4,1fr);gap:5px;}.collection-item small{font-size:11px;}.toast-stack{top:60px;}
}

/* Very short landscape uses a two-column game stage so the tray remains large and text never collapses to 7–8px. */
@media(max-height:400px) and (orientation:landscape){
  #app{}
  .topbar{padding:3px 7px;}.stat-pill{height:38px;min-width:88px;}.icon-btn{width:38px;height:38px;}
  .play-layout{padding:6px;gap:6px;}
  .game-stage{gap:6px;}
  .cook-row{gap:6px;}
  .chef-card{gap:2px;padding:4px;border-radius:16px;align-items:start;}
  .steamer-wrap{height:76px;}.steamer-btn{height:72px;grid-template-columns:56px minmax(0,1fr);gap:1px;}.steamer-art{height:62px;}.cook-label{gap:3px;}.cook-label small{font-size:12px;}.cook-label b{font-size:12px;padding:3px 4px;min-height:26px;}.cook-label .price-coin{width:13px;height:13px;}
  .chef-copy{align-self:stretch;display:grid;grid-template-rows:auto 8px;gap:5px;padding:0 3px 5px;}.tiny-note{display:none;}.mini-label{font-size:11px;white-space:normal;line-height:1.05;}.mystery-count{font-size:11px;}.mystery-track{height:8px;}
  .goal-card{padding:0 6px;gap:4px;border-radius:15px;}.goal-card>span:first-child{}.goal-card b{font-size:12px;}.goal-card small{font-size:11px;line-height:1.05;}
  .board-shell{padding:6px;border-radius:18px;}.board-topline{height:31px;padding:0 1px 4px;}.board-topline span{font-size:12px;}.board-topline small{display:none;}.best-chip{height:25px;padding:0 7px;}.best-chip span{font-size:10px;}.best-chip b{font-size:12px;}.board{gap:4px;padding:5px;border-radius:16px;}.cell{border-radius:11px;}.dumpling-level{height:18px;min-width:22px;font-size:11px;padding:0 4px;}
  .side-panel{border-radius:18px;}.tabs{padding:3px 3px 0;}.tab{font-size:11px;}.panel-scroll{padding:6px 6px 18px;}.upgrade-card,.boost-card{padding:7px;margin-bottom:6px;border-radius:13px;grid-template-columns:36px minmax(0,1fr) auto;gap:6px;}.upgrade-icon,.boost-icon{width:36px;height:36px;}.upgrade-copy b,.boost-copy b{font-size:12px;}.upgrade-copy small,.boost-copy small{font-size:11px;line-height:1.2;}.buy-btn,.reward-btn{font-size:11px;min-height:36px;padding:6px;min-width:58px;}.lvl-tag{font-size:11px;}.collection-grid{grid-template-columns:repeat(4,1fr);gap:4px;}.collection-item span,.collection-item small{font-size:11px;}.panel-title{font-size:12px;}.toast-stack{top:50px;}.tutorial-text{font-size:13px;padding:8px 10px;min-height:36px;}.tutorial-skip{width:42px;height:42px;}
}

@media(max-width:360px) and (orientation:portrait){
  .cook-row{}.chef-card{}.goal-card b{font-size:11px;}.goal-card small{font-size:10.5px;}.mini-label,.mystery-count{font-size:10.5px;}
  .help-actions{grid-template-columns:1fr;}.help-card{padding:20px;}
}

/* Final small-screen readability corrections from visual QA. */
@media(max-width:820px){.best-chip span{font-size:11px;}.free-price{font-size:11px;}}
@media(max-width:360px) and (orientation:portrait){.goal-card small{font-size:11px;}.mini-label,.mystery-count{font-size:11px;}}
@media(max-height:400px) and (orientation:landscape){
  .play-layout{}
  .chef-card{}
  .steamer-wrap{height:104px;}
  .steamer-btn{height:100px;grid-template-columns:1fr;grid-template-rows:60px 38px;gap:0;}
  .steamer-art{height:60px;width:82px;justify-self:center;}
  .cook-label{align-items:center;justify-content:start;gap:1px;text-align:center;}
  .cook-label small{font-size:11.5px;line-height:1.05;}
  .cook-label b{font-size:11px;min-height:21px;padding:2px 5px;}
  .free-price{font-size:11px;}
  .tab{font-size:11px;letter-spacing:0;}
}

/* Remaining v7 UX/UI fixes: no horizontal panel overflow, full-cell hit areas, compact box layout. */
.side-panel,.tabs,.panel-scroll,.panel-page,.collection-grid,.upgrade-card,.boost-card{min-width:0;max-width:100%}
.side-panel,.panel-scroll,.panel-page{width:100%}
.side-panel,.panel-scroll{overflow-x:hidden}
.tabs{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}
.tab{min-width:0;max-width:100%;padding-inline:3px;overflow:hidden;text-overflow:clip;white-space:nowrap}
.upgrade-card,.boost-card{width:100%}
.upgrade-copy,.boost-copy{overflow-wrap:anywhere}
.buy-btn,.reward-btn{max-width:100%;min-width:0}
.collection-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
.collection-item{min-width:0;width:100%}
.collection-item small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.05;min-height:2.1em;display:flex;align-items:flex-end;justify-content:center;bottom:4px}
.cell-interactive{cursor:pointer}
.dumpling-card{pointer-events:none}
.box-card{width:100%;height:100%;padding:6%;}
.box-card svg{width:100%;height:100%}

@media(max-width:430px) and (orientation:portrait){
  .chef-card{gap:4px;padding:5px;}
  .steamer-wrap{min-width:0;width:100%;overflow:hidden;}
  .steamer-btn{grid-template-columns:minmax(46px,52px) minmax(0,1fr);gap:1px;min-width:0;width:100%;}
  .steamer-art{min-width:0;width:100%;height:56px;}
  .cook-label{min-width:0;align-items:center;text-align:center;gap:2px;}
  .cook-label small{font-size:10px;letter-spacing:0;max-width:100%;}
  .cook-label b{font-size:11px;padding:2px 4px;min-height:24px;max-width:100%;}
  .cook-label .price-coin{width:12px;height:12px;}
  .chef-copy{min-width:0;grid-template-rows:auto 8px;gap:3px;padding:0 1px;}
  .mystery-head{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-content:center;}
  .mini-label,.mystery-count{font-size:11px;line-height:1.05;white-space:nowrap;overflow:visible;text-overflow:clip;min-width:0;}
  .mystery-count{justify-self:start;}
  .mystery-track{width:100%;min-width:0;}
}

@media(max-height:400px) and (orientation:landscape){
  .side-panel,.tabs,.panel-scroll,.panel-page,.collection-grid{}
  .panel-scroll{overflow-x:hidden;padding-left:5px;padding-right:5px;}
  .tabs{padding-left:2px;padding-right:2px;gap:2px;}
  .tab{font-size:11px;letter-spacing:0;padding:0 1px;}
  .upgrade-card,.boost-card{grid-template-columns:34px minmax(0,1fr) minmax(52px,auto);gap:5px;padding:6px;width:100%;max-width:100%;}
  .boost-card{grid-template-columns:34px minmax(0,1fr);}
  .upgrade-icon,.boost-icon{width:34px;height:34px;}
  .buy-btn,.reward-btn{font-size:11px;padding:5px 6px;min-width:0;max-width:100%;}
  .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}
  .collection-item small{font-size:11px;line-height:1.02;left:2px;right:2px;bottom:2px;}
  .tutorial-text{font-size:12px;padding:6px 8px;min-height:32px;border-radius:12px;}
}

/* Final remaining-pass corrections. Tutorial focus must match the live target immediately. */
.tutorial-focus{transition:none}
.collection-item small{overflow-wrap:anywhere;word-break:normal}

@media(max-width:340px) and (orientation:portrait){
  .play-layout{}
  .game-stage{}
  .cook-row{}
}


/* v8: manual-merge-first layout, goals, readable controls and coaching */
.chef-card,.goal-card,.board-shell,.side-panel{border:1px solid var(--line);background:rgba(255,249,235,.9);box-shadow:var(--shadow)}
.goal-card{border-radius:22px;padding:10px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kicker kicker" "title progress";align-content:center;align-items:center;gap:3px 8px;min-width:0;min-height:74px;cursor:default}
.goal-kicker{grid-area:kicker;font-size:12px!important;line-height:1.1;font-weight:950;letter-spacing:.12em;color:#9a6439;text-transform:uppercase;white-space:nowrap}
.goal-title{grid-area:title;min-width:0;font-size:14px!important;line-height:1.18;font-weight:950;letter-spacing:0!important;overflow-wrap:anywhere}
.goal-progress{grid-area:progress;justify-self:end;max-width:100%;font-size:12px!important;line-height:1.15;font-weight:950;color:#7b4c2c;text-align:right;white-space:normal}
.goal-card.order-mode{background:linear-gradient(145deg,rgba(255,249,235,.96),rgba(255,233,183,.96))}
.goal-card.order-mode .goal-kicker{color:#c16b35}

.mystery-info{appearance:none;border:0;background:transparent;padding:3px 2px;margin:0;min-width:0;min-height:44px;width:100%;display:block;text-align:left;border-radius:12px;cursor:pointer}
.mystery-info:focus-visible{outline:3px solid rgba(61,120,213,.55);outline-offset:2px}
.mystery-head{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0}
.mini-label,.mystery-count{font-size:12px!important;line-height:1.1;font-weight:950;letter-spacing:.08em;color:#805033;white-space:nowrap}
.mystery-info.ready .mystery-track{box-shadow:0 0 0 2px rgba(199,105,191,.22),inset 0 1px 2px rgba(76,43,21,.1)}
.tiny-note{font-size:12px!important;line-height:1.2;white-space:normal;overflow:visible;text-overflow:clip}

.rare-tooltip,.upgrade-coachmark{position:fixed;z-index:1650;max-width:min(290px,calc(100vw - 20px));padding:9px 11px;border:1px solid rgba(88,54,33,.18);border-radius:13px;background:#fffaf0;box-shadow:0 10px 28px rgba(64,39,22,.2);font-size:13px;line-height:1.3;font-weight:800;color:var(--ink)}
.rare-tooltip[hidden],.upgrade-coachmark[hidden]{display:none!important}
.upgrade-coachmark{z-index:1500;max-width:min(320px,calc(100vw - 20px))}
.tab.coach-pulse{animation:coachPulse 1s ease-in-out infinite alternate}
@keyframes coachPulse{from{box-shadow:inset 0 0 0 0 rgba(245,139,52,0)}to{box-shadow:inset 0 0 0 3px rgba(245,139,52,.35)}}
.training-badge{position:fixed;z-index:1602;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));padding:6px 9px;border-radius:999px;background:#68442d;color:#fffaf0;font-size:12px;font-weight:950;letter-spacing:.1em;box-shadow:0 4px 12px rgba(64,39,22,.2);pointer-events:none}
.training-badge[hidden]{display:none!important}

.icon-btn{width:44px;min-width:44px;height:44px;min-height:44px}
.tab{min-height:44px;font-size:12px!important;line-height:1.1;padding-block:6px}
.buy-btn,.reward-btn{min-height:44px}
.panel-close,.help-close,.tutorial-skip{min-width:44px;min-height:44px}
.cook-label small,.board-topline span,.best-chip span,.dumpling-level,.lvl-tag,.collection-item>span,.collection-item small,.upgrade-copy small,.boost-copy small{font-size:12px!important;line-height:1.2}
.upgrade-effect{display:block;margin-top:4px;font-size:12px;line-height:1.25;font-weight:900;color:#7d4a2c;overflow-wrap:anywhere}
.upgrade-card.just-upgraded .upgrade-effect{animation:effectPop .55s ease}
@keyframes effectPop{45%{transform:scale(1.035);color:#ce6f34}100%{transform:none}}
.collection-rule{margin:0 0 8px;padding:7px 9px;border-radius:11px;background:rgba(255,239,198,.72);font-size:12px;line-height:1.3;font-weight:800;color:#765039}
.collection-item{min-width:0}
.collection-item em{display:block;min-height:2.4em;margin-top:2px;font-size:11px;line-height:1.15;font-weight:900;font-style:normal;color:#9b633e;overflow-wrap:anywhere}
.collection-item.next-locked{box-shadow:inset 0 0 0 2px rgba(230,135,58,.22)}
.ad-badge{font-size:11px!important}

.toast-stack{pointer-events:none}
.toast-stack .toast{pointer-events:none}
.toast-out{opacity:0!important;transform:translateY(-5px)!important;transition:opacity .14s ease,transform .14s ease}

@media(max-width:760px) and (orientation:portrait){
  #app{}
  .topbar{padding:4px 7px;}
  .cook-row{gap:6px;}
  .goal-card{border-radius:17px;padding:7px 8px;gap:2px;}
  .goal-title{font-size:13px!important;}.goal-progress{justify-self:start;font-size:12px!important;text-align:left;}
  .chef-card{padding-right:8px;}
  .mystery-info{min-height:44px;padding:2px 0;}
  .mini-label,.mystery-count{font-size:11.5px!important;}.tiny-note{font-size:11.5px!important;}
  .side-panel{}
  .tabs{}
  .tab{font-size:12px!important;}
  .upgrade-copy small,.boost-copy small,.upgrade-effect{font-size:13px!important;}
  .lvl-tag{font-size:12px!important;}
  .toast-stack{top:132px;}
}
@media(max-width:360px) and (orientation:portrait){
  .cook-row{}
  .goal-card{padding:6px 7px;}
  .goal-title{font-size:12.5px!important;}
  .mini-label,.mystery-count{font-size:11px!important;letter-spacing:.05em;}
  .tiny-note{font-size:11px!important;}
}
@media(max-height:430px) and (orientation:landscape){
  #app{}
  .topbar{padding:1px 8px;}
  .play-layout{}
  .game-stage{}
  .cook-row{}
  .goal-card{border-radius:15px;padding:5px 7px;gap:1px;}
  .goal-title{font-size:12px!important;line-height:1.1;}.goal-progress{justify-self:start;text-align:left;font-size:11.5px!important;}
  .side-panel{}
  .tabs{}.tab{font-size:12px!important;padding-inline:3px;}
  .icon-btn{width:44px;height:44px;}
  .mini-label,.mystery-count,.cook-label small,.best-chip span,.dumpling-level,.lvl-tag,.collection-item>span,.collection-item small,.upgrade-copy small,.boost-copy small,.upgrade-effect{font-size:12px!important;}
  .tiny-note{display:none!important;}
  .toast-stack{top:52px;}
}


/* v8 full-cell box hit area and nearest-collection guidance */
.box-card{width:100%!important;height:100%!important}
.box-card svg{width:88%!important;height:88%!important}
.collection-item.next-locked small{bottom:27px}
.collection-item.next-locked em{position:absolute;left:3px;right:3px;bottom:4px;min-height:2.1em;margin:0;display:flex;align-items:flex-end;justify-content:center;text-align:center}

/* v8 short-landscape correction: keep the proven two-column stage geometry. */
@media(max-height:430px) and (orientation:landscape){
  .game-stage{gap:6px;}
  .cook-row{gap:6px;}
  .board-shell{}
}

@media(max-height:430px) and (orientation:landscape){
  /* Keep serialized toasts over the non-interactive tray header, away from tabs/currency/rare controls. */
  .toast-stack{left:39%;top:52px;width:min(190px,29vw);}
}

/* v9 progression/onboarding/responsive pass */
.goal-card.master-mode{background:linear-gradient(145deg,rgba(255,248,213,.98),rgba(246,218,133,.96));box-shadow:inset 0 0 0 2px rgba(226,160,48,.2),var(--shadow)}
.goal-card.master-mode .goal-kicker{color:#9a5d1d}
.boost-card.boost-locked{background:#f5efe4}
.boost-card.boost-locked .boost-icon{filter:grayscale(.55);opacity:.72}
.recovery-hint{animation:recoveryPulse .58s ease-in-out 3 alternate!important;box-shadow:inset 0 0 0 4px rgba(82,171,91,.72),0 0 0 4px rgba(255,250,205,.78),0 0 18px rgba(71,153,82,.45)!important}
@keyframes recoveryPulse{from{transform:scale(.98)}to{transform:scale(1.035)}}

.collection-item{aspect-ratio:auto;min-height:118px;grid-template-rows:minmax(58px,1fr) auto;align-content:stretch;overflow:visible;padding:5px 5px 6px}
.collection-item .collection-art{width:100%;min-height:0;display:grid;place-items:center;overflow:hidden}
.collection-item .collection-art svg{width:78%;height:78%;filter:drop-shadow(0 3px 2px rgba(75,44,27,.12))}
.collection-item>small{position:static!important;min-height:2.4em!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:12px!important;line-height:1.15!important;color:#533928;padding:1px 2px}
.collection-item.next-locked{opacity:1;filter:none;background:#fff7e4;grid-template-rows:minmax(50px,1fr) auto auto}
.collection-item.next-locked .collection-art{filter:grayscale(.92);opacity:.35}
.collection-item.next-locked>small{font-weight:950;color:#6d4a35}
.next-hint{margin:3px -1px -1px;padding:6px 5px;border-radius:10px;background:#ffe4a6;border:1px solid rgba(179,105,39,.16);display:grid;gap:2px;text-align:center;line-height:1.15}
.next-hint b{font-size:12px;letter-spacing:.06em;color:#9d5b26}
.next-hint em{position:static!important;display:block!important;min-height:0!important;margin:0!important;font-size:12px!important;line-height:1.15!important;font-style:normal;font-weight:900;color:#65442f}
.collection-rule.complete{background:linear-gradient(135deg,#fff0a7,#ffe0a0);color:#69421f}

.collection-complete-fx{position:fixed;inset:0;z-index:2200;pointer-events:none;display:grid;place-items:center;overflow:hidden;background:rgba(79,48,25,.22);animation:collectionFxIn .35s ease both}
.collection-complete-fx.leaving{animation:collectionFxOut .55s ease both}
.collection-complete-rays{position:absolute;width:80vmax;height:80vmax;background:repeating-conic-gradient(from 0deg,rgba(255,249,183,.72) 0 8deg,rgba(255,214,91,.08) 8deg 18deg);border-radius:50%;animation:collectionSpin 8s linear infinite}
.collection-complete-card{position:relative;z-index:2;width:min(88vw,430px);padding:20px 18px 22px;border-radius:28px;border:2px solid rgba(255,255,255,.72);background:linear-gradient(160deg,#fff9dd,#ffd88d);box-shadow:0 28px 80px rgba(74,43,22,.34);display:grid;place-items:center;gap:7px;text-align:center}
.collection-complete-card strong{font-size:clamp(22px,6vw,34px);line-height:1.05;color:#6e3e23;text-shadow:0 2px #fff4c4}
.collection-complete-card span{font-size:15px;font-weight:950;color:#805028}
.collection-complete-dumpling{width:112px;height:96px}.collection-complete-dumpling svg{width:100%;height:100%}
.collection-complete-fx>i{position:absolute;left:var(--x);top:-20px;width:8px;height:15px;border-radius:3px;background:#ff8f9c;animation:collectionConfetti 1.45s cubic-bezier(.2,.8,.2,1) var(--delay) both}.collection-complete-fx>i:nth-of-type(3n){background:#ffd55f}.collection-complete-fx>i:nth-of-type(3n/**/+1){background:#7bc9a8}
@keyframes collectionFxIn{from{opacity:0}to{opacity:1}}@keyframes collectionFxOut{to{opacity:0}}@keyframes collectionSpin{to{transform:rotate(360deg)}}@keyframes collectionConfetti{to{transform:translate(var(--drift),110vh) rotate(540deg)}}

.tutorial-finger{transform-origin:52% 15.5%;will-change:transform,rotate,left,top}
.upgrade-coachmark{pointer-events:none}

/* v9 mobile top-card: never shrink key labels below 12px. */
@media(max-width:760px) and (orientation:portrait){
  .game-stage{}
  .cook-row{gap:6px;}
  .chef-card{gap:4px;padding:4px 5px;}
  .steamer-wrap{height:82px;min-width:0;}.steamer-btn{height:78px;grid-template-columns:42px minmax(58px,1fr);gap:1px;}.steamer-art{height:58px;}
  .cook-label{gap:2px;align-items:center;text-align:center;}.cook-label small{font-size:12px!important;letter-spacing:.02em;white-space:normal;line-height:1.05;}.cook-label b{font-size:12px!important;line-height:1.05;min-height:27px;padding:4px 4px;white-space:normal;overflow-wrap:anywhere;max-width:100%;}.free-price{font-size:12px!important;line-height:1.05;white-space:normal;overflow-wrap:anywhere;}
  .mystery-info{display:grid;align-content:center;gap:5px;min-height:64px;}.mystery-head{display:grid;grid-template-columns:1fr;gap:2px;justify-items:start;}.mini-label,.mystery-count{font-size:12px!important;line-height:1.05;letter-spacing:.035em;}.mystery-track{height:9px;}.tiny-note{display:none!important;}
  .goal-card{}.goal-kicker,.goal-progress{font-size:12px!important;}.goal-title{font-size:13px!important;}
  .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
}
@media(max-width:340px) and (orientation:portrait){
  .play-layout{}
  .game-stage{}
  .cook-row{}
  .chef-card{}
  .steamer-btn{grid-template-columns:39px minmax(61px,1fr);}
  .goal-card{padding:6px;}.goal-title{font-size:12px!important;}
}

/* v9 short landscape: board first, while preserving readable tabs and 44px hit areas. */
@media(max-height:430px) and (orientation:landscape){
  .play-layout{gap:5px!important;padding:5px!important;}
  .game-stage{gap:5px!important;}
  .cook-row{gap:5px!important;}
  .chef-card{padding:3px!important;gap:1px!important;}
  .steamer-wrap{height:76px!important;}.steamer-btn{height:73px!important;grid-template-columns:43px minmax(55px,1fr)!important;}.steamer-art{height:58px!important;}
  .cook-label small,.cook-label b,.free-price,.mini-label,.mystery-count{font-size:12px!important;line-height:1.05!important;}.cook-label b{white-space:normal!important;overflow-wrap:anywhere;padding:3px!important;}
  .mystery-head{display:grid;grid-template-columns:1fr;gap:1px;justify-items:start;}.mystery-info{padding:1px!important;}.mystery-track{height:8px!important;}
  .goal-card{padding:4px 5px!important;}.goal-kicker,.goal-progress,.goal-title{font-size:12px!important;line-height:1.05!important;}
  .board-shell{padding:5px!important;}.board-topline{height:29px!important;}.board{gap:4px!important;padding:5px!important;}
  .side-panel{}.tabs{padding:2px 2px 0!important;gap:1px!important;}.tab{font-size:12px!important;letter-spacing:-.025em!important;padding:2px 0!important;white-space:nowrap!important;}
  .panel-scroll{padding:5px 5px 18px!important;}.upgrade-card,.boost-card{padding:6px!important;gap:5px!important;}.upgrade-copy small,.boost-copy small,.upgrade-effect,.lvl-tag,.ad-badge,.reward-label{font-size:12px!important;line-height:1.15!important;}.buy-btn,.reward-btn{min-height:44px!important;font-size:12px!important;}
  .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;}.collection-item{min-height:116px!important;}.collection-item>small,.next-hint b,.next-hint em{font-size:12px!important;}
  .tutorial-text{font-size:13px!important;line-height:1.15!important;padding:6px 8px!important;}
}
@media(min-width:630px) and (max-height:430px) and (orientation:landscape){
  .play-layout{}
  .game-stage{}
}

@media(prefers-reduced-motion:reduce){.collection-complete-rays,.collection-complete-fx>i,.recovery-hint{animation:none!important;}}
/* v9 containment: collection cards must never create panel horizontal scroll. */
.collection-item{overflow:hidden!important;max-width:100%;min-width:0}
.next-hint{max-width:100%;min-width:0;overflow:hidden}
@media(max-height:430px) and (orientation:landscape){
  .steamer-btn{grid-template-rows:1fr!important;align-items:center!important;}
  .steamer-art{width:100%!important;max-width:43px!important;justify-self:stretch!important;}
  .cook-label{align-items:flex-start!important;text-align:left!important;min-width:0!important;}
  .cook-label small{max-width:100%!important;overflow-wrap:anywhere!important;}
}

/* Keep the large tutorial hand legible while allowing the dumpling beneath the fingertip to remain visible. */
.tutorial-finger svg path:first-child{fill-opacity:.82}

/* v9 final legibility: never split key one-word labels such as БЕСПЛАТНО. */
@media(max-width:760px) and (orientation:portrait){.cook-label b,.free-price{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;}}
@media(max-height:430px) and (orientation:landscape){.game-stage{}.cook-label b,.free-price{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;}}
@media(min-width:630px) and (max-height:430px) and (orientation:landscape){.game-stage{}}

/* v10 closing pass: input-safe overlays, readable dynamic text, collection hint, safe toasts. */
.offline-card{position:fixed;inset:0;z-index:2100;width:auto;height:auto;transform:none;background:rgba(48,31,21,.48);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:0;border-radius:0;box-shadow:none;padding:16px;display:grid;place-items:center;pointer-events:auto}
.offline-card[hidden]{display:none}
.offline-dialog{width:min(92vw,360px);border:1px solid var(--line);background:#fff8e9;border-radius:26px;box-shadow:0 28px 80px rgba(66,37,20,.32);padding:18px;display:grid;grid-template-columns:76px minmax(0,1fr) max-content;align-items:center;gap:10px}
.offline-dialog>div:first-child{width:76px;height:70px}.offline-dialog svg{width:100%;height:100%}.offline-dialog>div:nth-child(2){display:flex;flex-direction:column;min-width:0}.offline-dialog small{font-size:12px!important;font-weight:950;color:var(--muted);letter-spacing:.06em;line-height:1.15}.offline-dialog b{font-size:22px;margin-top:3px}.offline-dialog button{border:0;border-radius:13px;background:#f2a741;font-weight:950;min-width:max-content;min-height:44px;padding:0 14px;white-space:nowrap;box-sizing:border-box;cursor:pointer;font-size:13px}

.collection-next{margin:0 0 8px;padding:8px 9px;border-radius:12px;background:#ffe4a6;border:1px solid rgba(179,105,39,.16);display:grid;gap:3px;line-height:1.2;color:#65442f;overflow:visible;min-width:0}
.collection-next b{font-size:12px;font-weight:950;letter-spacing:.035em;color:#9d5b26;white-space:normal}
.collection-next span{font-size:12px;font-weight:900;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
.collection-next.complete{background:linear-gradient(135deg,#fff0a7,#ffe0a0);font-weight:950}
.collection-item.next-locked{grid-template-rows:minmax(58px,1fr) auto!important}
.collection-item>small{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.next-hint{display:none!important}

.collection-complete-fx{pointer-events:auto!important;touch-action:none;cursor:pointer}
.collection-complete-card{pointer-events:none}
.collection-complete-continue{pointer-events:auto;min-width:120px;min-height:44px;margin-top:6px;border:0;border-radius:14px;background:#f2a741;color:#5f3b23;font-size:14px;font-weight:950;padding:0 18px;cursor:pointer;opacity:.82}
.collection-complete-fx:not(.armed) .collection-complete-continue{opacity:.48}
.collection-complete-fx.armed .collection-complete-continue{opacity:1}

.toast-stack{z-index:2050!important;pointer-events:none!important;transform:none!important}
.toast{max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal;font-size:12px!important;line-height:1.25;text-align:center;padding:8px 13px}

.ad-badge,.offline-card small,.mini-label,.mystery-count,.tiny-note,.goal-kicker,.goal-progress,.collection-item>span,.collection-item>small,.upgrade-copy small,.boost-copy small,.upgrade-effect,.lvl-tag{font-size:12px!important}

@media(max-width:340px) and (orientation:portrait){
  .goal-kicker{letter-spacing:.08em;}
  .offline-dialog{grid-template-columns:62px minmax(0,1fr);grid-template-areas:"art copy" "button button";gap:8px;padding:14px;}
  .offline-dialog>div:first-child{grid-area:art;width:62px;height:58px;}.offline-dialog>div:nth-child(2){grid-area:copy;}.offline-dialog button{grid-area:button;width:100%;min-width:0;}
}

@media(max-height:430px) and (orientation:landscape){
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  .collection-item{min-height:126px!important;}
  .tabs{gap:4px!important;padding-inline:2px!important;overflow:visible!important;}
  .tab{padding-inline:1px!important;letter-spacing:-.035em!important;overflow:visible!important;text-overflow:clip!important;}
  .offline-dialog{width:min(88vw,390px);grid-template-columns:62px minmax(0,1fr) max-content;padding:12px 14px;}.offline-dialog>div:first-child{width:62px;height:58px;}
}

@media(min-width:630px) and (max-height:400px) and (orientation:landscape){
  .side-panel{}
  .tabs{gap:5px!important;}
}
@media(max-height:400px) and (orientation:landscape){.tab{letter-spacing:-.065em!important;}}
@media(max-width:340px) and (orientation:portrait){.steamer-btn{grid-template-columns:36px minmax(64px,1fr)!important;}.steamer-art{max-width:36px!important;}.cook-label b{padding-inline:3px!important;}}

/* v10 short-landscape fit: preserve a >=40px board cell while keeping CTA/tabs fully readable. */
@media(max-width:600px) and (max-height:430px) and (orientation:landscape){
  .play-layout{}
  .steamer-btn{grid-template-columns:32px minmax(70px,1fr)!important;}
  .steamer-art{max-width:32px!important;}
  .cook-label b{padding-inline:2px!important;}
  .tab{letter-spacing:-.08em!important;}
}
@media(max-width:600px) and (max-height:430px) and (orientation:landscape){
  .steamer-btn{grid-template-columns:26px minmax(76px,1fr)!important;}
  .steamer-art{max-width:26px!important;}
  .cook-label b{padding-inline:1px!important;}
}
@media(max-width:600px) and (max-height:430px) and (orientation:landscape){
  .play-layout{}
  .game-stage{}
  .steamer-btn{grid-template-columns:30px minmax(76px,1fr)!important;}
  .steamer-art{max-width:30px!important;}
}
@media(max-width:600px) and (max-height:430px) and (orientation:landscape){
  .steamer-btn{grid-template-columns:28px minmax(78px,1fr)!important;}
  .steamer-art{max-width:28px!important;}
  .cook-label b{padding-inline:0!important;}
  .tab{letter-spacing:-.09em!important;}
}
@media(max-height:430px) and (orientation:landscape){
  .collection-complete-card strong{line-height:1.1!important;padding-block:2px;}
}
@media(min-width:601px) and (max-height:430px) and (orientation:landscape){
  .steamer-btn{grid-template-columns:34px minmax(72px,1fr)!important;}
  .steamer-art{max-width:34px!important;}
  .cook-label b{padding-inline:0!important;}
}
@media(min-width:601px) and (max-height:430px) and (orientation:landscape){
  .steamer-btn{grid-template-columns:30px minmax(77px,1fr)!important;}
  .steamer-art{max-width:30px!important;}
}
@media(min-width:601px) and (max-height:430px) and (orientation:landscape){
  .steamer-btn{grid-template-columns:27px minmax(80px,1fr)!important;}
  .steamer-art{max-width:27px!important;}
}
.collection-complete-card strong{line-height:1.1!important;padding-block:2px}


/* v10 final polish: reset modal residual grid, safe word wrapping, visible collection target and robust hit areas. */
.offline-card{
  grid-template-columns:1fr!important;
  grid-template-rows:1fr!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  margin:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.offline-dialog{max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);box-sizing:border-box}
.goal-title,.goal-progress{
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.collection-next{order:-1;margin:0 0 7px!important}
.collection-next b,.collection-next span{overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.collection-rule{margin-top:0}
.cell-interactive{position:relative}
.cell-interactive::before{content:"";position:absolute;inset:-1.5px;z-index:3;border-radius:inherit;pointer-events:auto}
.cell-interactive>.dumpling-card,.cell-interactive>.box-card{position:relative;z-index:4}
@media(min-width:900px) and (min-height:431px){
  .cook-row{}
  .goal-card{align-content:center;}
  .goal-progress{justify-self:start;text-align:left;}
  .goal-title{max-width:100%;}
  .free-price,.cook-label b{font-size:13px!important;}
}
@media(max-width:360px) and (orientation:portrait){
  .collection-next{padding:6px 8px!important;gap:2px!important;margin-bottom:5px!important;}
  .collection-next b,.collection-next span{font-size:12px!important;line-height:1.15!important;}
}

/* Keep toast animation inside its computed safe zone. */
@keyframes toastLife{0%{opacity:0;transform:scale(.96)}12%,80%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.toast-out{transform:none!important}
/* Expanded board hit target must remain hit-testable outside the visual 41-42px cell. */
.cell-interactive{overflow:visible!important}
/* Final desktop cook geometry: reserve enough width for functional CTA labels. */
@media(min-width:900px) and (min-height:431px){
  .chef-card{}
  .steamer-btn{grid-template-columns:minmax(62px,72px) minmax(86px,1fr);}
  .cook-label b,.free-price{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;}
}

/* v11 release: reusable long-goal layout, board-free notification rail, and GamePush chat attention. */
.goal-title{white-space:pre-line!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important}
.goal-card.long-order{align-content:center;height:auto!important;min-height:82px!important}
.goal-card.double-order{min-height:104px!important}
@media(max-width:820px) and (orientation:portrait){
  .game-stage.goal-long{}
  .game-stage.goal-double{}
  .goal-card.long-order{padding-block:6px!important;}
  .goal-card.double-order{}
  .goal-card.long-order .goal-title{line-height:1.12!important;}
}
@media(max-height:430px) and (orientation:landscape){
  .game-stage.goal-long .cook-row{}
  .game-stage.goal-double .cook-row{}
  .goal-card.long-order{padding:4px 6px!important;}
  .goal-card.double-order{}
  .goal-card.long-order .goal-title{font-size:12px!important;line-height:1.06!important;}
  .goal-card.long-order .goal-progress{font-size:12px!important;line-height:1.05!important;}
}

.toast-stack{position:fixed!important;right:auto!important;bottom:auto!important;height:auto!important;pointer-events:none!important}
.toast{max-height:none!important;overflow:visible!important}

#chatBtn.chat-unread{border-color:rgba(222,80,61,.55);background:linear-gradient(180deg,rgba(255,253,240,.98),rgba(255,226,175,.98));box-shadow:0 0 0 2px rgba(255,220,116,.45),0 4px 16px rgba(150,66,43,.18)}
#chatBtn.chat-unread #chatBadge{display:block;transform-origin:center}
#chatBtn.chat-attention{animation:chatAttention 1.02s cubic-bezier(.2,.7,.2,1) 6}
#chatBtn.chat-attention #chatBadge{animation:chatBadgeAttention .64s cubic-bezier(.18,.8,.22,1) 9}
@keyframes chatAttention{
  0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:none}
  16%{transform:translate3d(-2px,0,0) rotate(-7deg) scale(1.08);filter:drop-shadow(0 0 5px rgba(255,91,69,.55))}
  32%{transform:translate3d(3px,-1px,0) rotate(7deg) scale(1.12);filter:drop-shadow(0 0 9px rgba(255,91,69,.72))}
  48%{transform:translate3d(-3px,0,0) rotate(-6deg) scale(1.08)}
  66%{transform:translate3d(2px,-1px,0) rotate(5deg) scale(1.1);filter:drop-shadow(0 0 8px rgba(255,183,55,.72))}
  82%{transform:translate3d(0,0,0) rotate(0) scale(1.04)}
}
@keyframes chatBadgeAttention{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(231,92,75,.55)}
  45%{transform:scale(1.12);box-shadow:0 0 0 5px rgba(231,92,75,0)}
}
@media(prefers-reduced-motion:reduce){#chatBtn.chat-attention,#chatBtn.chat-attention #chatBadge{animation:none!important;}#chatBtn.chat-unread{box-shadow:0 0 0 3px rgba(231,92,75,.35),0 4px 16px rgba(150,66,43,.18);}}
@media(max-width:820px) and (orientation:portrait){
  .game-stage.goal-long .cook-row{}
  .game-stage.goal-double .cook-row{}
  .goal-card.long-order{padding-inline:6px!important;}
  .goal-card.long-order .goal-title{font-weight:900!important;letter-spacing:-.01em!important;}
}
@media(max-width:340px) and (orientation:portrait){
  .game-stage.goal-long .cook-row{}
  .game-stage.goal-double .cook-row{}
}
@media(max-width:820px) and (orientation:portrait){
  .game-stage.goal-double{}
  .goal-card.double-order{}
}
@media(max-width:820px) and (orientation:portrait){
  .goal-card.long-order .goal-title{font-size:12px!important;}
  .goal-card.long-order .goal-progress{font-size:12px!important;}
}
@media(max-height:430px) and (orientation:landscape){
  .game-stage.goal-long{gap:6px!important;}
  .game-stage.goal-long .cook-row{}
  .game-stage.goal-long .chef-card{}
  .game-stage.goal-long .goal-card{padding:4px 8px!important;gap:1px 8px!important;}
  .game-stage.goal-long .goal-title{font-size:12px!important;line-height:1.08!important;white-space:normal!important;}
  .game-stage.goal-long .goal-progress{justify-self:end!important;align-self:start!important;text-align:right!important;font-size:12px!important;}
  .game-stage.goal-long .board-shell{}
}

/* v12 closing: eliminate the 401–430px landscape tab gap without clipping. */
@media (orientation:landscape) and (max-height:430px){
  .tabs{overflow:visible!important;padding-inline:2px!important;gap:2px!important;}
  .tab{flex:1 1 0!important;padding-inline:0!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;font-size:12px!important;letter-spacing:-.1em!important;}
}
@media (orientation:landscape) and (min-width:601px) and (max-height:430px){
  .play-layout{}
  .tabs{gap:4px!important;padding-inline:3px!important;}
  .tab{letter-spacing:-.06em!important;}
}
@media (orientation:landscape) and (min-width:900px) and (max-height:430px){
  .play-layout{}
}
@media (orientation:landscape) and (min-width:1024px) and (max-height:430px){
  .play-layout{}
}

/* v12 chat attention: preserve the strong transform while reserving real animation/badge headroom. */
#chatBtn{top:3px}
#chatBtn #chatBadge{top:1px;right:1px}
#chatBtn.chat-attention{transform-origin:50% 50%}
/* v12 chat badge separation: keep the badge outside the glyph while retaining safe animation headroom. */
#chatBtn{top:5px}
#chatBtn #chatBadge{top:-2px;right:-2px}
#chatBtn.chat-unread #chatIcon{transform:translate(-2px,3px) scale(.9);transform-origin:center;transition:transform .15s ease}
/* v12 final chat geometry: reserve headroom and keep unread badge visually separate from the chat glyph. */
#chatBtn{top:7px}
#chatBtn #chatBadge{top:-4px;left:-4px;right:auto}
#chatBtn.chat-unread #chatIcon{transform:translate(5px,6px) scale(.82)}
#chatBtn{top:10px}
#chatBtn.chat-unread #chatIcon{transform:translate(5px,9px) scale(.82)}
#chatBtn.chat-unread #chatIcon{transform:translate(5px,10px) scale(.82)}

/* v12 final compact-landscape bridge: keep the entire game in one row through 560px,
   so the old 400px cutoff cannot leave a narrow broken landscape band. */
@media (orientation:landscape) and (max-height:560px){
  #app{}
  .topbar{padding:3px 7px!important;}
  .stat-pill{height:38px!important;}
  .icon-btn{width:38px;height:38px;}
  .play-layout{padding:5px!important;gap:5px!important;}
  .game-stage{gap:5px!important;}
  .cook-row{gap:5px!important;}
  .chef-card{gap:1px!important;padding:3px!important;align-items:start!important;}
  .steamer-wrap{height:76px!important;}.steamer-btn{height:73px!important;grid-template-columns:28px minmax(78px,1fr)!important;}.steamer-art{height:58px!important;max-width:28px!important;}
  .cook-label{position:static!important;inset:auto!important;align-items:flex-start!important;justify-content:center!important;text-align:left!important;gap:2px!important;}
  .cook-label small,.cook-label b,.free-price,.mini-label,.mystery-count{font-size:12px!important;line-height:1.05!important;}
  .cook-label b,.free-price{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;padding-inline:0!important;}
  .chef-copy{align-self:stretch!important;display:grid!important;grid-template-rows:auto 8px!important;gap:5px!important;padding:0 3px 5px!important;}
  .tiny-note{display:none!important;}.mystery-head{display:grid!important;grid-template-columns:1fr!important;gap:1px!important;justify-items:start!important;}.mystery-track{height:8px!important;}
  .goal-card{padding:4px 5px!important;}.goal-kicker,.goal-progress,.goal-title{font-size:12px!important;line-height:1.05!important;}
  .board-shell{padding:5px!important;}.board-topline{height:29px!important;}.board{gap:4px!important;padding:5px!important;}
  .side-panel{}
  .tabs{padding:2px 2px 0!important;gap:2px!important;overflow:visible!important;}
  .tab{padding:2px 0!important;font-size:12px!important;letter-spacing:-.1em!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;}
  .panel-scroll{padding:5px 5px 18px!important;}
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
}
@media (orientation:landscape) and (min-width:601px) and (max-height:560px){
  .play-layout{}
  .tabs{gap:4px!important;padding-inline:3px!important;}
  .tab{letter-spacing:-.06em!important;}
  .steamer-btn{grid-template-columns:30px minmax(77px,1fr)!important;}.steamer-art{max-width:30px!important;}
}
@media (orientation:landscape) and (min-width:900px) and (max-height:560px){.play-layout{}}
@media (orientation:landscape) and (min-width:1024px) and (max-height:560px){.play-layout{}}
/* v12 final unread geometry: keep the strong badge pulse visually detached from the glyph. */
#chatBtn #chatBadge{left:-9px;right:auto!important}
#chatBtn.chat-unread #chatIcon{transform:translate(8px,10px) scale(.82)}
#chatBtn #chatBadge{top:-2px}


/* v13 black-box responsive hardening. These rules close ranges discovered by
   randomized browser QA rather than targeting one named viewport. */
@media (max-width:300px) and (orientation:portrait){
  .topbar{padding-inline:4px!important;gap:4px!important;}
  .stats{gap:3px!important;}.stat-pill{min-width:76px!important;padding-inline:4px!important;}
  .top-actions{gap:3px!important;}.icon-btn{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;}
  .play-layout{padding:5px!important;gap:5px!important;}
  .game-stage{}
  .cook-row{gap:5px!important;}
  .chef-card{padding:4px!important;}
  .steamer-btn{grid-template-columns:34px minmax(60px,1fr)!important;}.steamer-art{max-width:34px!important;}
  .cook-label small,.cook-label b,.free-price,.mini-label,.mystery-count,.goal-kicker,.goal-title,.goal-progress{font-size:12px!important;}
  .side-panel{}.tabs{padding:2px 2px 0!important;gap:2px!important;}
  .tab{font-size:12px!important;letter-spacing:-.07em!important;padding-inline:0!important;}
  .panel-scroll{padding-inline:5px!important;}
}

/* Compact landscape is a single coherent mode through 560px high. Prevent
   the 431-560 band from inheriting desktop one-line goals or a stretched rail. */
@media (orientation:landscape) and (max-height:560px){
  .game-stage{}
  .cook-row{align-content:start!important;align-self:stretch!important;}
  .chef-card{align-self:start!important;}
  .goal-card:not(.long-order){padding:6px!important;align-content:center!important;gap:2px!important;}
  .goal-card:not(.long-order) .goal-title{font-size:12px!important;line-height:1.12!important;overflow-wrap:normal!important;word-break:normal!important;}
  .goal-card:not(.long-order) .goal-progress{justify-self:start!important;text-align:left!important;font-size:12px!important;line-height:1.08!important;}
  .board-topline>div:first-child{min-width:66px!important;}
  .board-topline span{letter-spacing:.035em!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;}
  .tabs{overflow:visible!important;}
  .tab{overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important;font-size:12px!important;padding-inline:0!important;}
}
@media (orientation:landscape) and (min-width:568px) and (max-width:639px) and (max-height:560px){
  .play-layout{}
  .game-stage{}
  .tabs{gap:3px!important;}.tab{letter-spacing:-.075em!important;}
}
@media (orientation:landscape) and (min-width:640px) and (max-height:560px){
  .play-layout{}
  .game-stage{}
  .tabs{gap:5px!important;padding-inline:3px!important;}.tab{letter-spacing:-.035em!important;}
}
@media (orientation:landscape) and (min-width:900px) and (max-height:560px){.play-layout{}}
@media (orientation:landscape) and (min-width:1024px) and (max-height:560px){.play-layout{}}

/* Functional text stays readable on the narrowest supported portrait. */
@media (max-width:360px) and (orientation:portrait){
  .cook-label small,.cook-label b,.free-price,.mini-label,.mystery-count,.goal-kicker,.goal-title,.goal-progress,.best-chip span,.board-topline span{font-size:12px!important;}
}

/* v13 text-fit corrections found by fixed/random black-box sweep. */
.free-price{font-size:12px!important;letter-spacing:0!important}
@media (min-width:821px) and (max-width:899px) and (min-height:561px){
  .steamer-btn{grid-template-columns:minmax(54px,64px) minmax(78px,1fr)!important;gap:2px!important;}
  .cook-label b{padding-inline:5px!important;}
}
@media (max-width:320px) and (orientation:portrait){
  .tabs{gap:1px!important;padding-inline:1px!important;}
  .tab{padding-inline:0!important;letter-spacing:-.065em!important;}
}
@media (max-width:300px) and (orientation:portrait){
  .steamer-btn{grid-template-columns:24px minmax(72px,1fr)!important;gap:1px!important;}
  .steamer-art{max-width:24px!important;}
  .cook-label small{letter-spacing:-.02em!important;}
  .cook-label b{padding-inline:1px!important;}
}
@media (orientation:landscape) and (max-height:560px){
  .steamer-btn{grid-template-columns:24px minmax(82px,1fr)!important;gap:1px!important;}
  .steamer-art{max-width:24px!important;}
  .cook-label b{padding-inline:1px!important;}
}
/* v13 final CTA width reservation: keep the full Russian free label at 12px. */
@media (max-width:320px) and (orientation:portrait){
  .steamer-btn{grid-template-columns:18px minmax(76px,1fr)!important;gap:1px!important;}
  .steamer-art{max-width:18px!important;}
}
@media (orientation:landscape) and (max-height:560px){
  .steamer-btn{grid-template-columns:20px minmax(86px,1fr)!important;gap:1px!important;}
  .steamer-art{max-width:20px!important;}
}


/* v14 settings / localization / no-ads */
.settings-glyph{font-size:22px;line-height:1}.settings-card{width:min(92vw,430px);display:grid;gap:14px}.settings-row,.settings-purchase{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border-radius:16px;background:#fff8e8;border:1px solid rgba(112,75,52,.12)}.settings-field{display:grid;gap:7px}.settings-field select{width:100%;min-height:44px;border:1px solid rgba(112,75,52,.22);border-radius:12px;background:#fff;padding:0 12px;font:inherit;font-weight:800;color:#563b2c}.settings-toggle{width:54px;height:32px;border:0;border-radius:20px;background:#c9bea9;padding:3px;cursor:pointer;transition:.18s}.settings-toggle span{display:block;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0002;transition:.18s}.settings-toggle[aria-checked="true"]{background:#68bb6a}.settings-toggle[aria-checked="true"] span{transform:translateX(22px)}.settings-purchase small{display:block;margin-top:4px;max-width:230px;color:#86654d;line-height:1.25}.settings-purchase .primary-action{flex:none}.settings-purchase.owned{background:#edf8e9}.no-ads-offer-card{position:relative;text-align:center}.no-ads-offer-card p{line-height:1.4}.settings-overlay[hidden],.no-ads-offer-overlay[hidden]{display:none!important}@media(max-width:380px){.settings-purchase{align-items:stretch;flex-direction:column;}.settings-purchase .primary-action{width:100%;}}

/* v16 tutorial/input/mobile/chat corrections */
.tutorial-drag-ghost{z-index:1950}
.tutorial-finger{transition:opacity .12s ease}

@media(max-width:820px) and (orientation:portrait){
  .play-layout{padding:6px!important;gap:6px!important;}
  .game-stage{gap:6px!important;}
  .cook-row{gap:6px!important;}
  .chef-card{gap:4px!important;padding:4px 6px!important;}
  .steamer-wrap{height:62px!important;}.steamer-btn{height:60px!important;grid-template-columns:minmax(44px,52px) minmax(42px,1fr)!important;}
  .steamer-art{height:54px!important;}.cook-label{inset:9px 0 auto!important;}.cook-label small{font-size:11px!important;}.cook-label b{font-size:13px!important;padding:2px 5px!important;min-height:25px!important;}
  .chef-copy{gap:4px!important;}.mini-label,.mystery-count{font-size:11px!important;}.mystery-track{height:7px!important;margin:5px 0 4px!important;}
  .goal-card{padding:0 6px!important;gap:4px!important;}.goal-card>span:first-child{}.goal-card b{font-size:12px!important;}.goal-card small{font-size:11px!important;}
  .board-shell{padding:6px!important;border-radius:18px!important;}
  .board-topline{height:30px!important;padding:0 2px 4px!important;}.board-topline span{font-size:11px!important;}.best-chip{height:25px!important;padding:0 7px!important;}.best-chip span{font-size:9px!important;}.best-chip b{font-size:11px!important;}
  .board{gap:5px!important;padding:6px!important;border-radius:18px!important;}
}

.top-actions{align-items:center!important}
#chatBtn{top:auto!important;align-self:center!important;transform:none}
#chatBtn #chatBadge{left:auto!important;right:-5px!important;top:2px!important}
#chatBtn.chat-unread #chatIcon{position:relative;left:-10px;transform:scale(.9)!important}
#chatBtn.chat-attention{transform-origin:50% 50%!important}
@keyframes chatAttention{
  0%,100%{transform:scale(1) rotate(0);filter:none}
  18%{transform:scale(1.04) rotate(-4deg);filter:drop-shadow(0 0 5px rgba(255,91,69,.45))}
  36%{transform:scale(1.06) rotate(4deg);filter:drop-shadow(0 0 8px rgba(255,91,69,.62))}
  54%{transform:scale(1.04) rotate(-3deg)}
  72%{transform:scale(1.05) rotate(3deg);filter:drop-shadow(0 0 7px rgba(255,183,55,.62))}
}

/* v17: reward feedback, mobile panel windows, tutorial price fit, idle box nudge */
.mobile-panel-head{display:none}

.flying-coin{position:fixed;z-index:var(--z-game-vfx);width:22px;height:22px;pointer-events:none;opacity:1;transform:translate(-50%,-50%) scale(.82);filter:drop-shadow(0 4px 4px rgba(96,54,20,.28));will-change:transform,opacity}
.flying-coin svg{width:100%;height:100%;display:block}
#coinsStat.coin-arrive{animation:coinCounterArrival .34s cubic-bezier(.18,.88,.24,1.35)}
@keyframes coinCounterArrival{0%,100%{transform:scale(1)}45%{transform:scale(1.09)}}

.steamer-wrap.idle-nudge{animation:idleBoxNudge 2.4s ease-in-out infinite}
@keyframes idleBoxNudge{0%,72%,100%{transform:translateY(0)}78%{transform:translateY(-5px)}84%{transform:translateY(0)}89%{transform:translateY(-2px)}94%{transform:translateY(0)}}
.steamer-wrap.cooking,.tutorial-mode .steamer-wrap{animation-name:steamerPop}

.cook-label b:has(.free-price){max-width:100%!important;min-width:0!important;padding-inline:4px!important;overflow:hidden!important}
.free-price{display:block!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;font-size:10px!important;line-height:1!important;letter-spacing:-.045em!important}

@media(max-width:820px) and (orientation:portrait){
  .play-layout{}
  .side-panel{z-index:35!important;border-radius:18px!important;overflow:visible!important;background:rgba(255,249,235,.94)!important;}
  .side-panel>.tabs{padding:4px!important;gap:4px!important;border:0!important;}
  .side-panel>.tabs .tab{border-radius:13px!important;background:transparent!important;box-shadow:none!important;font-size:12px!important;letter-spacing:.01em!important;}
  .side-panel>.tabs .tab.active{background:#fff9eb!important;box-shadow:inset 0 0 0 2px rgba(240,157,62,.34)!important;}
  .side-panel>.panel-scroll{}
  .mobile-panel-head{}

  .side-panel.mobile-open{z-index:1760!important;border-radius:24px!important;overflow:hidden!important;background:#fff8e9!important;box-shadow:0 0 0 9999px rgba(48,31,21,.52),0 24px 70px rgba(64,36,19,.38)!important;}
  .side-panel.mobile-open>.tabs{}
  .side-panel.mobile-open>.mobile-panel-head{align-items:center;justify-content:space-between;padding:8px 10px 7px 16px;border-bottom:1px solid var(--line);background:rgba(255,250,238,.96);}
  .mobile-panel-head b{font-size:16px;font-weight:950;letter-spacing:.04em;}
  .mobile-panel-close{width:42px;height:42px;border:0;border-radius:50%;background:#f1dfbf;font-size:28px;line-height:38px;cursor:pointer;flex:none;}
  .side-panel.mobile-open>.panel-scroll{overflow-y:auto!important;overflow-x:hidden!important;padding:10px 10px max(22px,env(safe-area-inset-bottom))!important;mask-image:none!important;-webkit-mask-image:none!important;}
  .side-panel.mobile-open .panel-page.active{}
  .side-panel.mobile-open .upgrade-card,.side-panel.mobile-open .boost-card{padding:10px!important;margin-bottom:9px!important;border-radius:16px!important;gap:9px!important;}
  .side-panel.mobile-open .boost-card{}
  .side-panel.mobile-open .upgrade-icon,.side-panel.mobile-open .boost-icon{}
  .side-panel.mobile-open .upgrade-copy b,.side-panel.mobile-open .boost-copy b{font-size:14px!important;}
  .side-panel.mobile-open .upgrade-copy small,.side-panel.mobile-open .boost-copy small,.side-panel.mobile-open .upgrade-effect,.side-panel.mobile-open .lvl-tag{font-size:12px!important;line-height:1.3!important;}
  .side-panel.mobile-open .buy-btn,.side-panel.mobile-open .reward-btn{font-size:12px!important;}
  .side-panel.mobile-open .collection-grid{gap:8px!important;}

  .cook-label b:has(.free-price){max-width:74px!important;padding-inline:3px!important;}
  .free-price{font-size:9px!important;letter-spacing:-.055em!important;}
}

@media(max-width:360px) and (orientation:portrait){
  .side-panel.mobile-open .collection-grid{}
  .cook-label b:has(.free-price){max-width:66px!important;}
  .free-price{font-size:8.5px!important;}
}

@media(prefers-reduced-motion:reduce){
  .steamer-wrap.idle-nudge{animation:none!important;}
}
@media(max-width:820px) and (orientation:portrait){
  #app.mobile-panel-active .play-layout{z-index:80!important;}
  #app.mobile-panel-active .topbar{z-index:20!important;}
}


/* v18: settings-only utility controls, discrete mobile actions, compact panels, smooth all-income coin feedback */
.tutorial-shade{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.tutorial-shade path{fill:rgba(48,31,21,.5)}
.tutorial-focus{z-index:1;box-shadow:0 0 20px rgba(255,241,159,.62)!important}
.tutorial-focus-secondary{z-index:1}
.settings-help-row small{display:block;margin-top:4px;color:#86654d;line-height:1.25}
.settings-open-help{min-width:92px;min-height:44px;border-radius:12px;font-weight:900;cursor:pointer;flex:none}
.settings-purchase[hidden]{display:none!important}
#coinIcon.coin-icon-arrive{animation:coinIconArrival .32s cubic-bezier(.16,.9,.3,1.35);transform-origin:50% 65%}
#coinsValue.coin-value-arrive{animation:coinValueArrival .3s cubic-bezier(.16,.9,.3,1.2);transform-origin:left center}
@keyframes coinIconArrival{0%,100%{transform:translateY(0) scale(1) rotate(0)}42%{transform:translateY(-4px) scale(1.22) rotate(-8deg)}68%{transform:translateY(1px) scale(.96) rotate(4deg)}}
@keyframes coinValueArrival{0%,100%{transform:translateY(0) scale(1);text-shadow:none}38%{transform:translateY(-2px) scale(1.075);text-shadow:0 2px 8px rgba(222,145,44,.32)}70%{transform:translateY(0) scale(1.02);text-shadow:0 1px 4px rgba(222,145,44,.18)}}
.mobile-panel-backdrop{display:none}
@media(max-width:820px) and (orientation:portrait){
  .play-layout{}
  .side-panel{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;}
  .side-panel>.tabs{padding:4px 2px!important;gap:8px!important;background:transparent!important;overflow:visible!important;}
  .side-panel>.tabs .tab{border:0!important;border-radius:14px!important;background:#fff7e7!important;box-shadow:0 4px 12px rgba(83,49,27,.13)!important;font-size:12px!important;letter-spacing:-.01em!important;color:#7b5b47!important;}
  .side-panel>.tabs .tab.active{background:#fff7e7!important;color:#7b5b47!important;box-shadow:0 4px 12px rgba(83,49,27,.13)!important;}
  .side-panel>.tabs .tab:active{transform:translateY(1px) scale(.985)!important;background:#ffedc7!important;}
  .mobile-panel-backdrop:not([hidden]){z-index:1745;border:0;background:rgba(48,31,21,.48);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:0;}
  .side-panel.mobile-open{z-index:1760!important;box-shadow:0 20px 55px rgba(64,36,19,.34)!important;border:1px solid var(--line)!important;border-radius:24px!important;background:#fff8e9!important;}
  .side-panel.mobile-open>.panel-scroll{overflow-y:auto!important;overscroll-behavior:contain!important;}
  .mobile-panel-close{position:relative;z-index:3;touch-action:manipulation;pointer-events:auto!important;}
  #app.mobile-panel-active .play-layout{z-index:auto!important;}
  #app.mobile-panel-active .topbar{z-index:20!important;}
}
@media(max-width:390px){.settings-help-row,.settings-purchase{align-items:stretch;flex-direction:column;}.settings-open-help,.settings-purchase .primary-action{width:100%;}}

/* v18 touch target correction */
@media(max-width:820px) and (orientation:portrait){.mobile-panel-close{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;}}


/* v26 CSP-safe hard SDK boot gate. Loading is language-neutral and uses the game's squishy characters, not food dumplings. */
body[data-boot-state="loading"] #app,body[data-boot-state="error"] #app{visibility:hidden!important;pointer-events:none!important}
.boot-gate{position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.5) 0 13%,transparent 35%),linear-gradient(150deg,#fff2bd 0%,#ffd38f 48%,#f5a766 100%);color:#3b271e;font:800 14px/1.35 Inter,ui-rounded,system-ui,sans-serif;text-align:center;padding:24px;overflow:hidden}
body[data-boot-state="ready"] .boot-gate{display:none}
.boot-squishy-scene{position:relative;width:224px;height:146px;filter:drop-shadow(0 13px 15px rgba(105,57,34,.17))}
.boot-squishy-shadow{position:absolute;left:32px;right:32px;bottom:15px;height:20px;border-radius:50%;background:rgba(94,53,37,.13);filter:blur(4px);animation:bootSquishyShadow 1.65s ease-in-out infinite}
.boot-squishy{position:absolute;bottom:27px;width:72px;height:72px;border:2px solid rgba(74,47,41,.18);border-radius:49% 51% 45% 46% / 57% 58% 42% 43%;box-shadow:inset 10px 12px 14px rgba(255,255,255,.2),inset -8px -10px 12px rgba(90,45,65,.08),0 8px 10px rgba(92,51,38,.1);transform-origin:50% 92%;will-change:transform}
.boot-squishy::before{content:"";position:absolute;left:16px;top:10px;width:25px;height:15px;border-radius:50%;background:rgba(255,255,255,.22);transform:rotate(-23deg)}
.boot-squishy-a{left:18px;width:64px;height:66px;background:linear-gradient(145deg,#fffaf0,#ead6bd);animation:bootSquishA 1.65s ease-in-out infinite}
.boot-squishy-b{left:76px;z-index:2;width:78px;height:80px;background:linear-gradient(145deg,#ffabd2,#e865a4 66%,#a47af0);animation:bootSquishB 1.65s .08s ease-in-out infinite}
.boot-squishy-c{right:17px;width:66px;height:69px;background:linear-gradient(145deg,#dff59a,#79c765 65%,#5aa9d6);animation:bootSquishC 1.65s .18s ease-in-out infinite}
.boot-squishy .eye{position:absolute;top:35px;width:7px;height:9px;border-radius:50%;background:#4b332c;box-shadow:inset 2px 1px 0 rgba(255,255,255,.8)}
.boot-squishy-b .eye{top:40px}.boot-squishy .eye-l{left:23px}.boot-squishy .eye-r{right:23px}.boot-squishy-b .eye-l{left:28px}.boot-squishy-b .eye-r{right:28px}
.boot-squishy .mouth{position:absolute;left:50%;top:49px;width:13px;height:7px;border-bottom:3px solid #4b332c;border-radius:0 0 12px 12px;transform:translateX(-50%)}
.boot-squishy-b .mouth{top:56px}
.boot-squishy .cheek{position:absolute;top:50px;width:12px;height:6px;border-radius:50%;background:rgba(239,109,137,.42)}
.boot-squishy-b .cheek{top:56px;background:rgba(255,218,229,.58)}.boot-squishy .cheek-l{left:9px}.boot-squishy .cheek-r{right:9px}
.boot-squishy .spark{position:absolute;width:12px;height:12px;opacity:.85;animation:bootSquishySpark 1.65s ease-in-out infinite}
.boot-squishy .spark::before,.boot-squishy .spark::after{content:"";position:absolute;left:5px;top:0;width:2px;height:12px;border-radius:99px;background:#fff4a2}.boot-squishy .spark::after{transform:rotate(90deg)}
.boot-squishy .spark-a{left:-7px;top:8px}.boot-squishy .spark-b{right:-9px;top:22px;transform:scale(.72);animation-delay:.35s}
.boot-gate-text{max-width:430px;font-size:15px;font-weight:850;line-height:1.45;text-wrap:balance}
.boot-retry{min-width:148px;min-height:46px;border:0;border-radius:14px;padding:11px 18px;background:#fff9e8;color:#6d3c22;font:900 14px/1 Inter,ui-rounded,system-ui,sans-serif;box-shadow:0 6px 14px rgba(96,50,26,.18);cursor:pointer;touch-action:manipulation}
.boot-retry:empty{min-width:54px;width:54px;padding:0;font-size:0}.boot-retry:empty::before{content:"↻";display:grid;place-items:center;font-size:28px;line-height:1}.boot-retry:active{transform:translateY(1px) scale(.985)}
.boot-gate.is-error .boot-squishy,.boot-gate.is-error .boot-squishy-shadow,.boot-gate.is-error .spark{animation-play-state:paused}
@keyframes bootSquishA{0%,100%{transform:translateY(1px) rotate(-5deg) scale(1.04,.96)}18%{transform:translateY(4px) rotate(-4deg) scale(1.11,.89)}46%{transform:translateY(-15px) rotate(4deg) scale(.93,1.08)}67%{transform:translateY(-3px) rotate(-2deg) scale(1.03,.97)}}
@keyframes bootSquishB{0%,100%{transform:translateY(-2px) scale(1.03,.97)}18%{transform:translateY(3px) scale(1.12,.88)}46%{transform:translateY(-20px) scale(.92,1.1)}66%{transform:translateY(-4px) scale(1.04,.96)}}
@keyframes bootSquishC{0%,100%{transform:translateY(1px) rotate(5deg) scale(1.04,.96)}18%{transform:translateY(4px) rotate(4deg) scale(1.11,.89)}46%{transform:translateY(-13px) rotate(-5deg) scale(.94,1.07)}70%{transform:translateY(-2px) rotate(2deg) scale(1.03,.97)}}
@keyframes bootSquishyShadow{0%,100%{transform:scaleX(1);opacity:.75}46%{transform:scaleX(.73);opacity:.45}}
@keyframes bootSquishySpark{0%,34%,100%{opacity:.25;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}68%{opacity:.35;transform:scale(.7) rotate(90deg)}}
@media(max-width:420px){.boot-squishy-scene{transform:scale(.92);}}
@media(prefers-reduced-motion:reduce){.boot-squishy,.boot-squishy-shadow,.boot-squishy .spark{animation-duration:3.4s!important;animation-timing-function:ease-in-out!important;}}

/* Unread badge is an overlay only. It must never move or shrink the chat glyph. */
#chatBtn #chatIcon,#chatBtn.chat-unread #chatIcon{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:23px!important;height:23px!important}
#chatBtn #chatBadge{position:absolute!important;right:-5px!important;left:auto!important;top:-5px!important;z-index:2!important}

/* v23 economy/progression redesign */
.steamer-wrap{border-radius:18px;background:linear-gradient(150deg,#fff7d9,#ffe1a6);box-shadow:0 8px 18px rgba(112,68,31,.15),inset 0 0 0 2px rgba(225,135,55,.13)}
.steamer-btn{border-radius:16px;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;cursor:pointer}
.steamer-btn:hover{filter:saturate(1.06) brightness(1.02);box-shadow:0 4px 12px rgba(180,99,38,.14)}
.steamer-btn:active{transform:scale(.975)}
.cook-label small{font-weight:1000;letter-spacing:.035em;color:#6f3f25}
.cook-label b{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:#fff4cf;border:1px solid rgba(176,104,47,.16);border-radius:999px;font-weight:1000}

.tab{position:relative;overflow:visible!important}
.tab-badge{position:absolute;right:5px;top:3px;z-index:3;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#e65b4b;color:white;border:2px solid #fffaf0;font-size:10px;line-height:14px;font-weight:1000;text-align:center;box-sizing:border-box;pointer-events:none;box-shadow:0 2px 6px rgba(92,44,27,.2)}
.tab-badge[hidden]{display:none!important}
.tab-badge.dot{min-width:12px;width:12px;height:12px;padding:0;right:8px;top:5px}
.tab.affordable-pulse{animation:v23AffordablePulse .72s ease 2}
@keyframes v23AffordablePulse{50%{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(235,133,53,.22)}}

.goal-title{display:flex;align-items:center;gap:7px;min-width:0}
.order-target-art{width:34px;height:34px;flex:0 0 34px;display:inline-grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1px rgba(115,71,43,.1)}
.order-target-art.pair{width:54px;flex-basis:54px;grid-template-columns:1fr 1fr;gap:0}
.order-target-art svg{width:34px;height:34px;display:block}
.order-target-art.pair svg{width:29px;height:29px;margin-inline:-2px}
.order-target-symbol{width:30px;height:30px;display:inline-grid;place-items:center;flex:0 0 30px;font-size:21px}
.order-target-copy{min-width:0;overflow-wrap:anywhere}
.cell.order-target-highlight{animation:v23OrderTarget 650ms ease 2;z-index:2}
@keyframes v23OrderTarget{50%{box-shadow:inset 0 0 0 4px #f2a34c,0 0 0 4px rgba(242,163,76,.25);transform:scale(.96)}}

.mystery-box{filter:drop-shadow(0 0 7px rgba(197,105,191,.5));animation:v23SpecialBreath 1.7s ease-in-out infinite}
@keyframes v23SpecialBreath{50%{filter:drop-shadow(0 0 12px rgba(197,105,191,.72));transform:scale(1.035)}}

.new-dumpling-reveal{position:fixed;inset:0;z-index:2400;display:grid;place-items:center;padding:18px;background:rgba(48,28,20,.58);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden;touch-action:none}
.new-dumpling-rays{position:absolute;width:min(82vw,460px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,236,145,.42) 0 8deg,transparent 8deg 19deg);animation:v23Rays 9s linear infinite}
@keyframes v23Rays{to{transform:rotate(360deg)}}
.new-dumpling-card{position:relative;width:min(86vw,350px);padding:20px 18px 16px;border-radius:28px;background:linear-gradient(165deg,#fffdf5,#ffe9b9);border:2px solid rgba(255,210,96,.82);box-shadow:0 25px 70px rgba(45,25,13,.32);display:grid;justify-items:center;text-align:center;gap:5px;animation:v23RevealPop .42s cubic-bezier(.2,.9,.25,1.25)}
@keyframes v23RevealPop{from{opacity:0;transform:scale(.62) translateY(28px)}to{opacity:1;transform:none}}
.new-dumpling-card strong{font-size:20px;letter-spacing:.07em;color:#a95b2e}.new-dumpling-card b{font-size:28px;line-height:1.05}.new-dumpling-card span{font-weight:950;color:#805137}.new-dumpling-card small{font-weight:850;color:#9b704f}.new-dumpling-card button{margin-top:9px;min-width:150px;min-height:44px;border:0;border-radius:15px;background:#d96c42;color:#fff;font:inherit;font-weight:1000;cursor:pointer;opacity:.55}.new-dumpling-reveal.armed button{opacity:1}
.new-dumpling-art{width:145px;height:145px;display:grid;place-items:center}.new-dumpling-art svg{width:100%;height:100%;filter:drop-shadow(0 9px 11px rgba(91,52,34,.18))}
.new-dumpling-reveal>i{position:absolute;left:50%;top:50%;width:7px;height:13px;border-radius:4px;background:hsl(calc(var(--a) * 1),80%,64%);transform:rotate(var(--a)) translateY(-175px);animation:v23Confetti 1.5s ease-out var(--d) both;pointer-events:none}
@keyframes v23Confetti{from{opacity:0;transform:rotate(var(--a)) translateY(-30px) scale(.2)}35%{opacity:1}to{opacity:0;transform:rotate(var(--a)) translateY(-250px) rotate(420deg)}}
.new-dumpling-reveal.leaving{opacity:0;transition:opacity .3s ease}.new-dumpling-reveal.leaving .new-dumpling-card{transform:scale(.92);transition:transform .3s ease}

@media(max-width:430px) and (orientation:portrait){
  .tab-badge{right:3px;top:2px;}
  .cook-label small{font-size:10.5px!important;line-height:1.05!important;white-space:normal!important;text-align:center;}
  .goal-title{gap:4px;}.order-target-art{width:29px;height:29px;flex-basis:29px;}.order-target-art svg{width:29px;height:29px;}.order-target-art.pair{width:46px;flex-basis:46px;}.order-target-art.pair svg{width:25px;height:25px;}
  .new-dumpling-card{padding:16px 14px 14px;}.new-dumpling-art{width:120px;height:120px;}.new-dumpling-card b{font-size:24px;}.new-dumpling-card strong{font-size:17px;}
}
.rare-result-label{position:absolute;left:50%;top:calc(48% + min(30vmin,175px));transform:translateX(-50%);display:grid;justify-items:center;gap:1px;padding:7px 13px;border-radius:15px;background:rgba(255,250,229,.94);box-shadow:0 8px 25px rgba(59,33,22,.2);color:#73452e;text-align:center;white-space:nowrap;animation:rareHero 1.3s ease both}.rare-result-label b{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.rare-result-label strong{font-size:20px}.rare-result-label span{font-size:12px;font-weight:900}


/* v27 reliability/performance/save UX fixes */
.steamer-wrap.not-affordable{background:linear-gradient(150deg,#f6efe1,#eadcc7)!important;box-shadow:inset 0 0 0 1px rgba(112,75,52,.12)!important;filter:saturate(.55);opacity:.72}
.steamer-wrap.not-affordable .steamer-btn{filter:none!important;box-shadow:none!important}
.steamer-wrap.not-affordable.idle-nudge{animation:none!important}
@media(max-width:820px) and (orientation:portrait){
  .cook-label{min-width:0!important;width:100%!important;align-items:center!important;text-align:center!important;overflow:visible!important;}
  .cook-label small{display:block!important;width:100%!important;max-width:100%!important;font-size:10px!important;line-height:1.02!important;letter-spacing:-.025em!important;white-space:normal!important;overflow:visible!important;overflow-wrap:normal!important;word-break:normal!important;text-wrap:balance;}
}
@media(max-width:360px) and (orientation:portrait){.cook-label small{font-size:9.5px!important;letter-spacing:-.035em!important;}}
.settings-purchase{position:relative;border:2px solid rgba(221,127,43,.52)!important;background:linear-gradient(145deg,#fff4ca,#ffe1a0)!important;box-shadow:0 8px 22px rgba(180,96,31,.16),inset 0 0 0 2px rgba(255,255,255,.42)!important}
.settings-purchase::before{content:"★";position:absolute;right:10px;top:-10px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e77c31;color:#fff8dd;font-size:13px;box-shadow:0 3px 8px rgba(117,58,24,.2)}
.settings-purchase>div>b{font-size:16px;color:#62361f}
.settings-purchase small{max-width:270px!important;color:#71492f!important;font-weight:650}
.settings-purchase .primary-action{min-height:46px;min-width:112px;font-weight:1000}
.settings-purchase.owned{background:linear-gradient(145deg,#eef9e8,#dff1d3)!important;border-color:rgba(78,143,69,.4)!important;box-shadow:0 7px 18px rgba(66,118,58,.12)!important}
.settings-purchase.owned::before{content:"✓";background:#62a958}
.settings-purchase.owned .primary-action{background:#d6e9cf!important;color:#487342!important;box-shadow:none!important;opacity:1!important}

/* v28: stable compositor drag + Auto Chef pause control */
.drag-ghost{left:0!important;top:0!important;transform:translate3d(0,0,0) translate(-50%,-55%) scale(1.08);will-change:transform;contain:layout style paint}
.upgrade-card.has-auto-toggle{grid-template-rows:auto auto}
.upgrade-card.has-auto-toggle .auto-chef-toggle{grid-column:1/-1;width:100%;min-height:34px;border:1px solid rgba(116,78,48,.2);border-radius:11px;background:#f7e2b9;color:#67442c;font-size:10px;font-weight:950;letter-spacing:.06em;cursor:pointer;box-shadow:0 2px 0 rgba(151,99,48,.2)}
.upgrade-card.has-auto-toggle .auto-chef-toggle:active{transform:translateY(1px);box-shadow:none}
.upgrade-card.has-auto-toggle .auto-chef-toggle.paused{background:#fff6e8;border-color:rgba(196,102,70,.34);color:#a04f37}
@media (max-width:700px){.upgrade-card.has-auto-toggle .auto-chef-toggle{min-height:42px;font-size:12px;}}


/* v29 release-closing: deterministic tutorial layer hierarchy and low-height CTA fit. */
.tutorial-drag-ghost{z-index:calc(var(--z-tutorial-dimmer) + 6)!important}
.tutorial-mode .flying-coin,.tutorial-mode .box-open-fx,.tutorial-mode .rare-celebration,.tutorial-mode .merge-burst{display:none!important}
@media(max-height:430px) and (orientation:landscape){
  .game-stage{}
  .cook-row{}
  .chef-card{overflow:hidden;gap:2px!important;padding:4px!important;align-items:start!important;}
  .steamer-wrap{width:100%!important;min-width:0;height:84px!important;overflow:visible;}
  .steamer-btn{width:100%!important;min-width:0;height:82px!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:52px 30px!important;gap:0!important;}
  .steamer-art{grid-column:1!important;grid-row:1!important;height:52px!important;width:74px!important;justify-self:center!important;}
  .cook-label{grid-column:1!important;grid-row:2!important;width:100%!important;min-width:0;max-width:100%;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;padding:0 1px!important;text-align:center!important;}
  .cook-label small{display:block;width:auto;max-width:100%;font-size:10px!important;letter-spacing:0!important;line-height:1!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;}
  .cook-label b{flex:0 0 auto;min-height:17px!important;font-size:9.5px!important;line-height:1!important;padding:1px 4px!important;white-space:nowrap!important;}
}


/* v30 responsive closing: preserve CTA text at 320px without changing the component. */
@media(max-width:320px) and (orientation:portrait){
  .cook-row{gap:4px!important;}
  .chef-card{gap:2px!important;padding:4px!important;}
  .steamer-wrap{width:100%!important;min-width:0!important;overflow:visible!important;}
  .steamer-btn{width:100%!important;min-width:0!important;grid-template-columns:32px minmax(0,1fr)!important;gap:1px!important;}
  .steamer-art{width:32px!important;max-width:32px!important;min-width:0!important;}
  .cook-label{min-width:0!important;width:100%!important;max-width:100%!important;overflow:visible!important;gap:2px!important;}
  .cook-label small{width:100%!important;max-width:100%!important;min-width:0!important;font-size:9.25px!important;line-height:1.02!important;letter-spacing:-.035em!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;}
  .cook-label b{max-width:100%!important;min-width:0!important;padding-inline:3px!important;overflow:visible!important;}
  .cook-label b:has(.free-price){max-width:100%!important;overflow:visible!important;}
  .chef-copy{min-width:0!important;padding-inline:0!important;}
}

/* v31 visual polish: preserve v30 geometry while restoring readable functional typography. */
@media (max-width:820px) and (orientation:portrait){
  .cook-label small{
    font-size:12px!important;
    line-height:1.02!important;
    letter-spacing:-.015em!important;
    white-space:normal!important;
    text-wrap:balance;
  }
  .cook-label b,.free-price{font-size:13px!important;}
  .mini-label,.mystery-count,.goal-kicker,.goal-progress,.board-topline span{font-size:12px!important;}
  .goal-title{font-size:12px!important;}
  .tab{font-size:12px!important;}
  .best-chip span{font-size:11px!important;}
}
@media (max-width:360px) and (orientation:portrait){
  .cook-label small{font-size:12px!important;letter-spacing:-.025em!important;}
  .mini-label,.mystery-count,.goal-kicker,.goal-title,.goal-progress,.board-topline span{font-size:12px!important;}
}
@media (max-width:320px) and (orientation:portrait){
  .steamer-btn{grid-template-columns:26px minmax(0,1fr)!important;gap:2px!important;}
  .steamer-art{max-width:26px!important;height:48px!important;}
  .cook-label{gap:2px!important;padding-inline:0!important;}
  .cook-label small{font-size:12px!important;line-height:1!important;letter-spacing:-.03em!important;}
  .cook-label b{font-size:13px!important;padding:2px 4px!important;}
  .chef-card{gap:3px!important;}
}
@media (orientation:landscape) and (max-height:430px){
  .steamer-btn{
    grid-template-columns:28px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    gap:3px!important;
    padding:2px 4px!important;
  }
  .steamer-art{grid-column:1!important;grid-row:1!important;max-width:28px!important;height:48px!important;align-self:center!important;}
  .cook-label{
    grid-column:2!important;
    grid-row:1!important;
    position:static!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:0!important;
    gap:3px!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .cook-label small{
    width:100%!important;
    max-width:100%!important;
    font-size:12px!important;
    line-height:1!important;
    letter-spacing:-.02em!important;
    white-space:normal!important;
    text-wrap:balance;
    overflow:visible!important;
  }
  .cook-label b,.free-price{font-size:12px!important;line-height:1!important;min-height:21px!important;padding:2px 4px!important;}
  .mini-label,.mystery-count,.goal-kicker,.goal-title,.goal-progress,.board-topline span{font-size:12px!important;}
  .tab{font-size:12px!important;}
}
@media (max-width:430px) and (orientation:portrait){
  .steamer-btn{grid-template-columns:34px minmax(0,1fr)!important;gap:2px!important;}
  .steamer-art{max-width:34px!important;width:34px!important;height:50px!important;}
}
@media (max-width:820px){
  #goalKicker,#boardTitle,#bestLabel,#bestValue{font-size:12px!important;}
}

/* v33 single-issue polish: RU tutorial FREE pill owns enough real glyph width. */
@media (max-width:430px) and (orientation:portrait){
  html[lang="ru"] .steamer-btn:has(.free-price){
    grid-template-columns:24px minmax(0,1fr)!important;
    gap:1px!important;
    padding-inline:1px!important;
  }
  html[lang="ru"] .steamer-btn:has(.free-price) .steamer-art{
    width:24px!important;
    max-width:24px!important;
    min-width:24px!important;
  }
  html[lang="ru"] .cook-label b:has(.free-price){
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    padding-inline:2px!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }
  html[lang="ru"] .free-price{
    display:block!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    font-size:12px!important;
    letter-spacing:0!important;
  }
}
@media (max-width:430px) and (orientation:portrait){
  html[lang="ru"] .chef-card:has(.free-price){
    
    gap:1px!important;
  }
}

/* v36 regression closing: desktop CTA, tab badge clearance, centered settings glyph. */
@media (min-width:821px) and (min-height:431px){
  .chef-card{gap:10px!important;padding:8px 12px 8px 8px!important;align-items:center!important;}
  .steamer-wrap{width:100%!important;min-width:0!important;height:78px!important;overflow:visible!important;}
  .steamer-btn{width:100%!important;min-width:0!important;height:72px!important;display:grid!important;grid-template-columns:72px minmax(0,1fr)!important;grid-template-rows:1fr!important;gap:7px!important;align-items:center!important;padding:2px 4px!important;}
  .steamer-btn>.steamer-art{position:static!important;inset:auto!important;grid-column:1!important;grid-row:1!important;width:72px!important;height:68px!important;min-width:0!important;justify-self:center!important;}
  .steamer-btn>.steamer-art svg{position:static!important;inset:auto!important;width:100%!important;height:100%!important;display:block!important;}
  .steamer-btn>.cook-label{position:static!important;inset:auto!important;grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:5px!important;text-align:left!important;padding:0!important;}
  .steamer-btn>.cook-label small{display:block!important;max-width:100%!important;font-size:12px!important;line-height:1.08!important;letter-spacing:.015em!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-wrap:balance;}
  .steamer-btn>.cook-label b{font-size:13px!important;line-height:1!important;min-height:23px!important;padding:3px 7px!important;white-space:nowrap!important;}
  .chef-copy{min-width:0!important;}
}
.tab-badge{right:5px!important;top:2px!important}
.settings-glyph{display:grid!important;place-items:center!important;width:23px!important;height:23px!important;line-height:0!important;font-size:0!important;transform:none!important}
.settings-glyph svg{display:block!important;position:static!important;inset:auto!important;width:23px!important;height:23px!important;transform:none!important}
.dumpling-card.reveal-in.squish,.dumpling-card.merge-in.squish{animation:squish .32s cubic-bezier(.2,.9,.25,1.35)!important}
/* v36 badge sits in the tab's top gutter, never on top of its label. */
.tab-badge{top:-4px!important}
.tab-badge.dot{top:-2px!important}


/* v38 final responsive/browser hardening.
   Desktop low-height is a complete layout mode and does not inherit the mobile compact rail geometry. */
@media (orientation:landscape) and (min-width:961px) and (max-height:560px), (orientation:landscape) and (min-width:800px) and (min-height:413px) and (max-height:560px){
  #app{}
  .topbar{padding:3px 10px!important;}
  .stat-pill,.icon-btn{height:36px!important;}.icon-btn{width:36px!important;}
  .play-layout{padding:7px!important;gap:7px!important;}
  .game-stage{gap:6px!important;}
  .cook-row{gap:7px!important;align-self:stretch!important;}
  .chef-card{gap:7px!important;padding:5px 8px 5px 5px!important;align-items:center!important;overflow:hidden!important;}
  .steamer-wrap{width:100%!important;min-width:0!important;height:70px!important;overflow:visible!important;}
  .steamer-btn{width:100%!important;min-width:0!important;height:68px!important;display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;grid-template-rows:1fr!important;gap:5px!important;align-items:center!important;padding:2px!important;}
  .steamer-btn>.steamer-art{position:static!important;inset:auto!important;grid-column:1!important;grid-row:1!important;width:52px!important;max-width:52px!important;height:62px!important;justify-self:center!important;}
  .steamer-btn>.steamer-art svg{position:static!important;inset:auto!important;width:100%!important;height:100%!important;display:block!important;}
  .steamer-btn>.cook-label{position:static!important;inset:auto!important;grid-column:2!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:100%!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;padding:0!important;text-align:left!important;}
  .steamer-btn>.cook-label small{display:block!important;width:100%!important;max-width:100%!important;font-size:12px!important;line-height:1.03!important;letter-spacing:-.01em!important;white-space:normal!important;text-wrap:balance!important;overflow:visible!important;text-overflow:clip!important;}
  .steamer-btn>.cook-label b,.free-price{font-size:12px!important;line-height:1!important;min-height:22px!important;padding:3px 5px!important;white-space:nowrap!important;}
  .chef-copy{display:grid!important;grid-template-rows:auto 8px auto!important;gap:3px!important;align-content:center!important;min-width:0!important;padding:0!important;}
  .mystery-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:4px!important;min-width:0!important;}.mini-label,.mystery-count{font-size:11px!important;line-height:1!important;}.mystery-track{height:8px!important;margin:0!important;}.tiny-note{display:block!important;font-size:9px!important;line-height:1.05!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
  .goal-card{align-content:center!important;justify-items:start!important;gap:2px!important;padding:5px 8px!important;overflow:hidden!important;}.goal-kicker,.goal-title,.goal-progress{font-size:11px!important;line-height:1.06!important;max-width:100%!important;}.goal-title{display:block!important;white-space:normal!important;overflow:visible!important;}.goal-progress{white-space:normal!important;overflow:visible!important;}
  .board-shell{padding:7px!important;border-radius:20px!important;}.board-topline{height:28px!important;}.board{gap:5px!important;padding:6px!important;}
  .side-panel{border-radius:20px!important;}.tabs{padding:3px 4px 0!important;gap:3px!important;overflow:visible!important;}.tab{font-size:11px!important;letter-spacing:-.035em!important;padding:0!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;}.panel-scroll{padding:6px 6px 14px!important;min-height:0!important;overflow-y:auto!important;}
  .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;}
}

/* Narrow desktop keeps a true desktop composition, but reserves enough width for the CTA. */
@media (min-width:821px) and (max-width:1023px) and (min-height:561px){
  .play-layout{gap:8px!important;padding:8px!important;}
  .cook-row{gap:8px!important;}
  .chef-card{gap:6px!important;padding:7px 8px 7px 6px!important;}
  .steamer-btn{grid-template-columns:52px minmax(0,1fr)!important;gap:4px!important;}
  .steamer-btn>.steamer-art{width:52px!important;height:64px!important;}
  .steamer-btn>.cook-label small{font-size:11px!important;line-height:1.05!important;letter-spacing:-.015em!important;text-wrap:balance!important;}
  .steamer-btn>.cook-label b,.free-price{font-size:12px!important;padding-inline:5px!important;}
  .mini-label,.mystery-count{font-size:10px!important;}.tiny-note{font-size:9px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.08!important;}
  .tabs{gap:2px!important;padding-inline:3px!important;}.tab{font-size:10px!important;letter-spacing:-.035em!important;padding-inline:0!important;white-space:nowrap!important;}
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Critical labels may wrap, but must never be repaired by clipping/ellipsis. */
.cook-label small,.goal-title,.goal-progress,.upgrade-copy b,.upgrade-copy small,.boost-copy b,.boost-copy small,.collection-item small{overflow:visible;text-overflow:clip}
.collection-item small{white-space:normal;line-height:1.02;font-size:7.5px;overflow-wrap:anywhere}

/* v39 single-issue patch: reserve a vertical badge lane inside constrained desktop tabs.
   v44 keeps that proven geometry for low-height/narrow desktop, while normal PC tabs get centered labels below. */
@media (orientation:landscape) and (min-width:800px){
  .tabs{}
  .tabs .tab{
    
    align-items:flex-end!important;
    justify-content:center!important;
    padding:0 2px 5px!important;
    line-height:1.05!important;
  }
  .tabs .tab-badge{top:2px!important;right:4px!important;}
  .tabs .tab-badge.dot{top:4px!important;right:6px!important;}
}

/* v44 normal desktop: labels are visually centered instead of sitting on the bottom edge.
   The first tab owns a wider column so its badge never overlaps long localized labels. */
@media (orientation:landscape) and (min-width:1024px) and (min-height:561px){
  .tabs{}
  .tabs .tab{align-items:center!important;padding:3px 2px 0!important;}
  .tabs .tab-badge{right:1px!important;}
  .tabs .tab-badge.dot{right:3px!important;}
}

/* v41 narrow-desktop Orders: keep every real order readable through the full 800-1023px landscape band.
   Only active order cards reserve this wider column; onboarding/non-order goals and the proven CTA layout stay unchanged. */
@media (orientation:landscape) and (min-width:800px) and (max-width:1023px) and (min-height:561px){
  .cook-row:has(.goal-card.order-mode){
    
    gap:8px!important;
  }
  .goal-card.order-mode{
    
    
    
    
    padding:8px 9px!important;
    
    
    align-content:center!important;
    align-items:center!important;
    gap:3px!important;
    overflow:visible!important;
  }
  .goal-card.order-mode.long-order{}
  .goal-card.order-mode .goal-title{
    
    
    font-size:13px!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .goal-card.order-mode .order-target-copy{
    
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .goal-card.order-mode .order-name{
    white-space:nowrap!important;
  }
  .goal-card.order-mode .goal-progress{
    justify-self:start!important;
    text-align:left!important;
    font-size:12px!important;
    line-height:1.08!important;
    white-space:normal!important;
  }
}



/* v41 order text must never split localized dumpling names inside words. */
.goal-card.order-mode .goal-title,
.goal-card.order-mode .order-target-copy{
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
/* v40 late-game Collection: low-height desktop uses a safe two-column grid.
   Existing 12px localized names stay intact instead of being clipped in ~75px three-column cards. */
@media (orientation:landscape) and (min-width:961px) and (max-height:560px), (orientation:landscape) and (min-width:800px) and (min-height:413px) and (max-height:560px){
  .collection-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .collection-item{
    min-width:0!important;
  }
  .collection-item>small{
    max-width:100%!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
}

/* v42 systematic responsive constraints.
   Critical mobile geometry is driven by the available game-stage width, not device-specific viewport patches. */
.game-stage{
  container-type:inline-size;
  container-name:dumpling-stage;
}

/* Critical UI text owns explicit wrapping semantics instead of inheriting aggressive global rules. */
.cook-label small,
.cook-label b,
.chef-copy,
.mini-label,
.mystery-count,
.goal-card.order-mode .goal-title,
.goal-card.order-mode .order-target-copy,
.goal-card.order-mode .order-name,
.goal-card.order-mode .order-level,
.goal-card.order-mode .order-count,
.goal-card.order-mode .order-plus,
.tab,
.collection-item>small{
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.goal-card.order-mode .order-name{
  display:inline-block;
  max-width:100%;
  white-space:nowrap!important;
}
.goal-card.order-mode .order-level,
.goal-card.order-mode .order-count,
.goal-card.order-mode .order-plus{
  display:inline-block;
  white-space:nowrap!important;
}
.goal-card.order-mode .order-target-copy{
  min-width:0;
  max-width:100%;
  white-space:normal!important;
}

/* Mobile portrait: the first game-stage track grows with its content.
   The actual switch from side-by-side to stacked top-block happens below via a container query. */
@media (orientation:portrait) and (max-width:820px){
  .game-stage{}
}

/* Once chef + order cannot both satisfy their minimum widths, order moves below the chef card. */
@media (orientation:portrait) and (max-width:820px){
  @container dumpling-stage (max-width:520px){
    .cook-row{
      
      
      
      gap:5px!important;
      
      
      align-items:stretch!important;
    }
    .chef-card{
      display:grid!important;
      grid-template-columns:minmax(176px,1fr) minmax(108px,.62fr)!important;
      grid-template-rows:minmax(72px,auto)!important;
      gap:6px!important;
      min-width:0!important;
      min-height:76px!important;
      height:auto!important;
      max-height:none!important;
      padding:4px 6px!important;
      align-items:center!important;
      overflow:visible!important;
    }
    .steamer-wrap{
      width:100%!important;
      min-width:0!important;
      height:68px!important;
      overflow:visible!important;
    }
    .steamer-btn{
      width:100%!important;
      min-width:0!important;
      height:66px!important;
      display:grid!important;
      grid-template-columns:42px minmax(0,1fr)!important;
      grid-template-rows:minmax(0,1fr)!important;
      gap:4px!important;
      align-items:center!important;
      padding:2px!important;
      overflow:visible!important;
    }
    .steamer-btn>.steamer-art{
      position:static!important;
      inset:auto!important;
      grid-column:1!important;
      grid-row:1!important;
      width:42px!important;
      max-width:42px!important;
      min-width:42px!important;
      height:58px!important;
      justify-self:center!important;
    }
    .steamer-btn>.steamer-art svg{
      position:static!important;
      inset:auto!important;
      width:100%!important;
      height:100%!important;
      display:block!important;
    }
    .steamer-btn>.cook-label{
      position:static!important;
      inset:auto!important;
      grid-column:2!important;
      grid-row:1!important;
      width:100%!important;
      min-width:0!important;
      max-width:100%!important;
      display:grid!important;
      grid-template-columns:minmax(0,1fr)!important;
      grid-template-rows:auto auto!important;
      align-content:center!important;
      justify-items:start!important;
      gap:3px!important;
      padding:0!important;
      text-align:left!important;
      overflow:visible!important;
    }
    .steamer-btn>.cook-label small{
      display:block!important;
      width:100%!important;
      min-width:0!important;
      max-width:100%!important;
      font-size:12px!important;
      line-height:1.04!important;
      letter-spacing:-.015em!important;
      white-space:normal!important;
      text-wrap:balance!important;
      overflow:visible!important;
      text-overflow:clip!important;
    }
    .steamer-btn>.cook-label b,
    .steamer-btn>.cook-label .free-price{
      width:max-content!important;
      min-width:0!important;
      max-width:100%!important;
      min-height:23px!important;
      font-size:12px!important;
      line-height:1!important;
      padding:3px 5px!important;
      white-space:nowrap!important;
      overflow:visible!important;
      text-overflow:clip!important;
    }
    .chef-copy{
      min-width:0!important;
      width:100%!important;
      max-width:100%!important;
      display:grid!important;
      grid-template-rows:auto 8px!important;
      gap:5px!important;
      align-content:center!important;
      padding:0 2px!important;
      overflow:visible!important;
    }
    .mystery-head{
      display:flex!important;
      align-items:center!important;
      justify-content:space-between!important;
      gap:4px!important;
      min-width:0!important;
      max-width:100%!important;
    }
    .mini-label,.mystery-count{
      min-width:0!important;
      max-width:100%!important;
      font-size:11px!important;
      line-height:1.02!important;
      white-space:nowrap!important;
      overflow:visible!important;
      text-overflow:clip!important;
    }
    .mystery-track{width:100%!important;min-width:0!important;height:8px!important;margin:0!important;}
    .tiny-note{display:none!important;}
    .goal-card{
      width:100%!important;
      min-width:0!important;
      min-height:58px!important;
      height:auto!important;
      max-height:none!important;
      padding:6px 9px!important;
      overflow:visible!important;
    }
    .goal-card.order-mode{
      grid-template-columns:minmax(0,1fr)!important;
      grid-template-areas:"kicker" "title" "progress"!important;
      gap:2px!important;
      align-content:center!important;
    }
    .goal-card.order-mode .goal-title{
      min-width:0!important;
      max-width:100%!important;
      font-size:12px!important;
      line-height:1.12!important;
      white-space:normal!important;
      overflow:visible!important;
    }
    .goal-card.order-mode .goal-progress{
      justify-self:start!important;
      max-width:100%!important;
      font-size:11px!important;
      line-height:1.08!important;
      text-align:left!important;
      white-space:normal!important;
      overflow:visible!important;
    }
  }

  /* CTA + SPECIAL have their own minimum inline sizes. If those no longer fit, SPECIAL moves below CTA. */
  @container dumpling-stage (max-width:320px){
    .chef-card{
      grid-template-columns:minmax(0,1fr)!important;
      grid-template-rows:68px auto!important;
      gap:3px!important;
      min-height:108px!important;
    }
    .chef-copy{
      min-height:34px!important;
      grid-template-rows:auto 8px!important;
      padding:0 5px 3px!important;
    }
  }
}

/* v42 supersedes the legacy portrait goal-long / goal-double width reservations.
   Those old selectors were more specific than the first container rules and would otherwise reopen a fixed-width slot. */
@media (orientation:portrait) and (max-width:820px){
  .game-stage.goal-long,
  .game-stage.goal-double{
    
  }
  @container dumpling-stage (max-width:520px){
    .game-stage .cook-row,
    .game-stage.goal-long .cook-row,
    .game-stage.goal-double .cook-row{
      
      
      
      
    }
    .steamer-btn>.cook-label small{
      padding-block:2px!important;
    }
    .steamer-btn>.cook-label b,
    .steamer-btn>.cook-label .free-price{
      padding-inline:7px!important;
    }
  }
}

/* Short landscape uses the existing rail composition, but its text boxes still obey the same glyph containment invariant. */
@media (orientation:landscape) and (max-height:430px){
  .steamer-btn>.cook-label small{padding-block:2px!important;}
  .chef-card>.chef-copy{padding-block:2px!important;}
}
@media (orientation:landscape) and (max-height:430px){
  .steamer-btn>.cook-label small{letter-spacing:-.035em!important;}
}
/* Font ink can extend a fraction beyond the line box; the order copy owns a 1px glyph-safe block inset. */
.goal-card.order-mode .order-target-copy{padding-block:1px!important}
/* In the compact landscape rail, make the order copy a real flex-item box so its glyph-safe inset participates in geometry. */
@media (orientation:landscape) and (max-height:430px){
  .goal-card.order-mode .order-target-copy{
    
    padding-block:1px!important;
  }
}
/* Short landscape order copy reserves the font's actual ink box vertically instead of relying on the tighter inherited line-height. */
@media (orientation:landscape) and (max-height:430px){
  .goal-card.order-mode .order-target-copy{
    line-height:1.28!important;
  }
}

/* v43 compact mobile vertical budget.
   Restore the pre-v42 composition: utility row height is state-independent,
   while CTA/SPECIAL and Orders own explicit internal geometry. */
@media (orientation:portrait) and (max-width:820px){
  .game-stage,
  .game-stage.goal-long,
  .game-stage.goal-double{
    
    gap:6px!important;
    
  }
  .game-stage .cook-row,
  .game-stage.goal-long .cook-row,
  .game-stage.goal-double .cook-row{
    
    
    
    gap:5px!important;
    
    
    
    align-items:stretch!important;
    overflow:visible!important;
  }
  .chef-card,
  .game-stage.goal-long .chef-card,
  .game-stage.goal-double .chef-card{
    
    
    
    
    
    
    gap:3px!important;
    padding:3px 4px!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .steamer-wrap{
    width:100%!important;
    min-width:0!important;
    height:62px!important;
    overflow:visible!important;
  }
  .steamer-btn{
    width:100%!important;
    min-width:0!important;
    height:62px!important;
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    grid-template-rows:1fr!important;
    gap:2px!important;
    align-items:center!important;
    padding:1px 2px!important;
    overflow:visible!important;
  }
  .steamer-btn>.steamer-art{
    position:static!important;
    inset:auto!important;
    grid-column:1!important;
    grid-row:1!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:52px!important;
    justify-self:center!important;
  }
  .steamer-btn>.steamer-art svg{position:static!important;inset:auto!important;width:100%!important;height:100%!important;display:block!important;}
  .steamer-btn>.cook-label{
    position:static!important;
    inset:auto!important;
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-content:center!important;
    justify-items:center!important;
    gap:2px!important;
    padding:0!important;
    text-align:center!important;
    overflow:visible!important;
  }
  .steamer-btn>.cook-label small{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:11px!important;
    line-height:1.02!important;
    letter-spacing:-.025em!important;
    white-space:normal!important;
    text-wrap:balance!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .steamer-btn>.cook-label b,
  .steamer-btn>.cook-label .free-price{
    display:inline-flex!important;
    width:max-content!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:21px!important;
    font-size:11px!important;
    line-height:1!important;
    padding:2px 4px!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .chef-copy{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:60px!important;
    display:grid!important;
    grid-template-rows:auto 8px!important;
    gap:4px!important;
    align-content:center!important;
    padding:0 1px!important;
    overflow:visible!important;
  }
  .mystery-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:1px!important;align-content:center!important;min-width:0!important;max-width:100%!important;}
  .mini-label,.mystery-count{display:block!important;min-width:0!important;max-width:100%!important;font-size:10px!important;line-height:1!important;text-align:center!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;}
  .mystery-track{width:100%!important;min-width:0!important;height:8px!important;margin:0!important;}
  .tiny-note{display:none!important;}

  .goal-card,
  .goal-card.long-order,
  .goal-card.double-order,
  .goal-card.order-mode,
  .goal-card.order-mode.long-order,
  .goal-card.order-mode.double-order{
    
    
    
    
    
    padding:4px 6px!important;
    
    
    
    
    align-content:center!important;
    align-items:center!important;
    gap:1px 4px!important;
    overflow:visible!important;
  }
  .goal-kicker{grid-area:kicker!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important;}
  .goal-progress{grid-area:progress!important;justify-self:end!important;text-align:right!important;font-size:11px!important;line-height:1!important;white-space:nowrap!important;max-width:100%!important;overflow:visible!important;}
  .goal-title{grid-area:title!important;display:block!important;min-width:0!important;max-width:100%!important;font-size:12px!important;line-height:1.06!important;letter-spacing:-.012em!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
  .goal-card.order-mode .goal-title{font-size:12px!important;line-height:1.06!important;}
  .goal-card.order-mode .order-target-art,
  .goal-card.order-mode .order-target-symbol{}
  .goal-card.order-mode .order-target-copy{
    
    
    
    
    padding-block:0!important;
    line-height:1.06!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  .goal-card.order-mode .order-name{white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important;}
  .goal-card.order-mode .order-level,
  .goal-card.order-mode .order-count,
  .goal-card.order-mode .order-plus{white-space:nowrap!important;}

  .board-shell{}
}

/* When the stage is exceptionally narrow, preserve the same 70px budget and
   trade decoration for text width instead of stacking the utility blocks. */
@media (orientation:portrait) and (max-width:820px){
  @container dumpling-stage (max-width:310px){
    .game-stage .cook-row,
    .game-stage.goal-long .cook-row,
    .game-stage.goal-double .cook-row{gap:4px!important;}
    .chef-card{grid-template-columns:minmax(0,1fr) 50px!important;gap:2px!important;padding-inline:3px!important;}
    .steamer-btn{grid-template-columns:24px minmax(0,1fr)!important;gap:1px!important;padding-inline:1px!important;}
    .steamer-btn>.steamer-art{width:24px!important;min-width:24px!important;max-width:24px!important;height:48px!important;}
    .steamer-btn>.cook-label small{font-size:11px!important;letter-spacing:-.035em!important;}
    .mini-label,.mystery-count{font-size:9.4px!important;letter-spacing:-.01em!important;}
    .goal-card{padding-inline:5px!important;}
  }
}

/* v43 short-landscape state invariants.
   Keep the pre-existing compact rail geometry identical for normal and long/two-item orders.
   Order content may wrap inside the rail, but it must never recompose .game-stage or steal board space. */
@media (orientation:landscape) and (max-width:960px) and (max-height:412px){
  .game-stage.goal-long,
  .game-stage.goal-double{
    
    
    gap:5px!important;
  }
  .game-stage.goal-long .cook-row,
  .game-stage.goal-double .cook-row{
    
    
    
    
    
    gap:5px!important;
    
    align-content:start!important;
    align-self:stretch!important;
  }
  .game-stage.goal-long .chef-card,
  .game-stage.goal-double .chef-card{
    
    
    
    
    
  }
  .game-stage.goal-long .goal-card,
  .game-stage.goal-double .goal-card{
    
    
    
    
    
    
    padding:5px 6px!important;
    
    
    gap:2px!important;
    align-content:center!important;
  }
  .game-stage.goal-long .board-shell,
  .game-stage.goal-double .board-shell{
    
    
  }
}

/* v43 short-landscape vertical budget inside the fixed utility rail.
   The rail owns the available height; long orders consume only its second row. */
@media (orientation:landscape) and (max-width:960px) and (max-height:412px){
  .game-stage .cook-row,
  .game-stage.goal-long .cook-row,
  .game-stage.goal-double .cook-row{
    
    
    
  }
  .game-stage .chef-card,
  .game-stage.goal-long .chef-card,
  .game-stage.goal-double .chef-card{
    
    
    
  }
  .game-stage .goal-card,
  .game-stage.goal-long .goal-card,
  .game-stage.goal-double .goal-card{
    
    
    
    padding:4px 5px!important;
  }
}

/* v43 short-landscape: use the same rail width for every order state and
   spend it on text, not decorative target art. This keeps board geometry state-invariant. */
@media (orientation:landscape) and (max-height:430px){
  .game-stage.goal-long,
  .game-stage.goal-double{
    
  }
  .goal-card.order-mode .goal-title{
    
    
    
    white-space:normal!important;
    overflow:visible!important;
  }
  .goal-card.order-mode .order-target-art,
  .goal-card.order-mode .order-target-symbol{
    
  }
  .goal-card.order-mode .order-target-copy{
    
    
    
    
    padding-block:1px!important;
    white-space:normal!important;
    overflow:visible!important;
  }
}


/* v44 mode isolation: the v43 fixed utility rail is mobile-landscape only.
   Wide desktop low-height is owned by the desktop-low-height mode above. */

/* v45 responsive layout state machine ownership layer.
   ViewportManager is the single owner of the four top-level compositions.
   Legacy media queries may still tune typography/details inside a mode, but they must not
   recompose the game stage into a different mode. */

@media (orientation:portrait) and (max-width:820px){
/* Mobile portrait owns one fixed 70px utility row regardless of goal/order content. */
html[data-layout-mode="mobile-portrait"] .game-stage,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double{
  
  
  gap:6px!important;
  
  
}
html[data-layout-mode="mobile-portrait"] .game-stage .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .cook-row{
  
  
  
  
  gap:5px!important;
  
  
  
  align-items:stretch!important;
}
html[data-layout-mode="mobile-portrait"] .game-stage .board-shell,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .board-shell,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .board-shell{
  
  
  
}

}

@media (orientation:landscape) and (max-width:960px) and (max-height:412px){
/* Mobile landscape owns a fixed utility rail. Long/two-item orders may wrap internally,
   but they are not allowed to switch the stage into the desktop top-row composition. */
html[data-layout-mode="mobile-landscape"] .game-stage,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double{
  
  
  gap:5px!important;
  
  
}
html[data-layout-mode="mobile-landscape"] .game-stage .cook-row,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .cook-row,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .cook-row{
  
  
  
  
  
  gap:5px!important;
  
  
  
  
  align-content:stretch!important;
  align-self:stretch!important;
}
html[data-layout-mode="mobile-landscape"] .game-stage .chef-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .chef-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .chef-card{
  
  
  
  
  
  
}
html[data-layout-mode="mobile-landscape"] .game-stage .goal-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .goal-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .goal-card{
  
  
  
  
  
  
  padding:4px 5px!important;
  
  
  
  gap:2px!important;
  align-content:center!important;
  overflow:visible!important;
}
html[data-layout-mode="mobile-landscape"] .game-stage .board-shell,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .board-shell,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .board-shell{
  
  
  
}
html[data-layout-mode="mobile-landscape"] .goal-card.order-mode .order-target-art,
html[data-layout-mode="mobile-landscape"] .goal-card.order-mode .order-target-symbol{}
html[data-layout-mode="mobile-landscape"] .goal-card.order-mode .order-target-copy{
  
  
  
  
  white-space:normal!important;
  overflow:visible!important;
}

}

@media (orientation:landscape) and (min-width:961px) and (max-height:560px), (orientation:landscape) and (min-width:800px) and (min-height:413px) and (max-height:560px){
/* Desktop low-height owns the compact desktop top row. This explicitly beats every
   historical max-height:430 mobile-rail rule at widths such as 900x420 and 1024x540. */
html[data-layout-mode="desktop-low-height"] #app{}
html[data-layout-mode="desktop-low-height"] .topbar{padding:3px 10px!important;}
html[data-layout-mode="desktop-low-height"] .stat-pill,
html[data-layout-mode="desktop-low-height"] .icon-btn{height:36px!important;}
html[data-layout-mode="desktop-low-height"] .icon-btn{width:36px!important;min-width:36px!important;}
html[data-layout-mode="desktop-low-height"] .play-layout{
  
  
  padding:7px!important;
  gap:7px!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double{
  
  
  
  gap:6px!important;
  
  
}
html[data-layout-mode="desktop-low-height"] .game-stage .cook-row,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .cook-row,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .cook-row{
  
  
  
  
  
  gap:7px!important;
  
  
  
  
  align-content:stretch!important;
  align-self:stretch!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage .chef-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .chef-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .chef-card{
  
  
  
  
  
  
  
  
  gap:7px!important;
  padding:5px 8px 5px 5px!important;
  align-items:center!important;
  overflow:hidden!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage .goal-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .goal-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .goal-card{
  
  
  
  
  
  
  
  
  
  
  align-content:center!important;
  align-items:center!important;
  justify-items:start!important;
  gap:2px!important;
  padding:5px 8px!important;
  overflow:hidden!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage .board-shell,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .board-shell,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .board-shell{
  
  
  
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .goal-title,
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-target-copy{
  
  
  
  font-size:11px!important;
  line-height:1.06!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .goal-progress{
  justify-self:start!important;
  text-align:left!important;
  font-size:11px!important;
  line-height:1.06!important;
  white-space:normal!important;
}
html[data-layout-mode="desktop-low-height"] .collection-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}

}

/* Normal desktop explicitly rejects both compact stage compositions. Narrow-desktop
   order sizing remains owned by the existing 800-1023 rules inside this desktop state. */
html[data-layout-mode="desktop"] .game-stage{
  grid-template-columns:minmax(0,1fr);
  min-width:0;
  min-height:0;
}

/* ========================================================================== */
/* v46 SINGLE-SOURCE RESPONSIVE OWNERSHIP                                     */
/* ========================================================================== */
/*
  This final layer is intentionally last.  It neutralizes every historical
  architecture-changing media query for the audited top-level geometry.
  Media queries above may still tune local typography/details, but they cannot
  own: app rows, play-layout columns, stage composition, board budget, sidebar
  width, or mobile/desktop panel composition.
*/

html[data-layout-mode]{
  --v46-sidebar:clamp(240px,calc(182px + 10vw),345px);
  --v46-play-gap:7px;
  --v46-play-pad:7px;
}

/* Mobile portrait: preserve the approved v43-v45 board-first composition. */
html[data-layout-mode="mobile-portrait"] #app{
  grid-template-rows:58px minmax(0,1fr)!important;
}
html[data-layout-mode="mobile-portrait"] .play-layout{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) 56px!important;
  gap:7px!important;
  padding:7px!important;
}
html[data-layout-mode="mobile-portrait"] .game-stage,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:70px minmax(0,1fr)!important;
  gap:6px!important;
  min-width:0!important;
  min-height:0!important;
}
html[data-layout-mode="mobile-portrait"] .game-stage .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .cook-row{
  grid-column:1!important;
  grid-row:1!important;
  grid-template-columns:minmax(0,1fr) clamp(126px,38%,150px)!important;
  grid-template-rows:70px!important;
  width:100%!important;
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  gap:5px!important;
}
html[data-layout-mode="mobile-portrait"] .game-stage .board-shell,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .board-shell,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .board-shell{
  grid-column:1!important;
  grid-row:2!important;
  min-height:0!important;
}
html[data-layout-mode="mobile-portrait"] .side-panel{
  grid-column:1!important;
  grid-row:2!important;
  width:100%!important;
  min-width:0!important;
  height:56px!important;
  min-height:56px!important;
  grid-template-rows:56px!important;
}
html[data-layout-mode="mobile-portrait"] .side-panel.mobile-open{
  width:auto!important;
  height:auto!important;
}

/* Very-short landscape keeps the proven v43 utility rail.  There is no width
   breakpoint: 960->961 and every other one-pixel width change stay in one mode. */
html[data-layout-mode="mobile-landscape"]{
  --v46-mobile-side:clamp(230px,40.5vw,278px);
  --v46-mobile-rail:clamp(138px,21vw,158px);
}
html[data-layout-mode="mobile-landscape"] #app{
  grid-template-rows:48px minmax(0,1fr)!important;
}
html[data-layout-mode="mobile-landscape"] .topbar{padding:3px 10px!important}
html[data-layout-mode="mobile-landscape"] .stat-pill,
html[data-layout-mode="mobile-landscape"] .icon-btn{height:36px!important}
html[data-layout-mode="mobile-landscape"] .icon-btn{width:36px!important;min-width:36px!important}
html[data-layout-mode="mobile-landscape"] .play-layout{
  grid-template-columns:minmax(0,1fr) var(--v46-mobile-side)!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:5px!important;
  padding:5px!important;
}
html[data-layout-mode="mobile-landscape"] .game-stage,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double{
  grid-template-columns:var(--v46-mobile-rail) minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:5px!important;
  min-width:0!important;
  min-height:0!important;
}
html[data-layout-mode="mobile-landscape"] .game-stage .cook-row,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .cook-row,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .cook-row{
  grid-column:1!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:142px minmax(0,1fr)!important;
  gap:5px!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
}
html[data-layout-mode="mobile-landscape"] .game-stage .chef-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .chef-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .chef-card{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  height:142px!important;
  min-height:142px!important;
  max-height:142px!important;
}
html[data-layout-mode="mobile-landscape"] .game-stage .goal-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .goal-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .goal-card{
  grid-column:1!important;
  grid-row:2!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  padding:4px 5px!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  grid-template-areas:"kicker" "title" "progress"!important;
  gap:2px!important;
  align-content:center!important;
  overflow:visible!important;
}
html[data-layout-mode="mobile-landscape"] .game-stage .board-shell,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .board-shell,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .board-shell{
  grid-column:2!important;
  grid-row:1!important;
  min-height:0!important;
}
html[data-layout-mode="mobile-landscape"] .board{
  max-width:min(100%,280px)!important;
  max-height:min(100%,280px)!important;
}
html[data-layout-mode="mobile-landscape"] .side-panel{
  width:auto!important;
  min-width:0!important;
}

/* Compact desktop: same top-row architecture as normal desktop.  Height only
   changes continuous budgets; no width breakpoint participates in composition. */
html[data-layout-mode="desktop-low-height"]{
  --v46-row-h:clamp(48px,calc(26.8dvh - 62.7px),82px);
  --v46-shell-top:clamp(20px,calc(6.3dvh - 6px),38px);
  --v46-shell-pad:clamp(4px,1.25dvh,7px);
  --v46-play-pad:clamp(5px,1.3dvh,7px);
  --v46-play-gap:clamp(6px,1.3dvh,7px);
  --v46-goal-w:clamp(188px,18vw,230px);
}
html[data-layout-mode="desktop-low-height"]{--v46-compact-topbar:clamp(48px,calc(17dvh - 44px),58px)}
html[data-layout-mode="desktop-low-height"] #app{
  grid-template-rows:var(--v46-compact-topbar) minmax(0,1fr)!important;
}
html[data-layout-mode="desktop-low-height"] .topbar{padding:3px 10px!important}
html[data-layout-mode="desktop-low-height"] .stat-pill,
html[data-layout-mode="desktop-low-height"] .icon-btn{height:36px!important}
html[data-layout-mode="desktop-low-height"] .icon-btn{width:36px!important;min-width:36px!important}
html[data-layout-mode="desktop-low-height"] .play-layout{
  grid-template-columns:minmax(0,1fr) var(--v46-sidebar)!important;
  grid-template-rows:minmax(0,1fr)!important;
  padding:var(--v46-play-pad)!important;
  gap:var(--v46-play-gap)!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:var(--v46-row-h) minmax(0,1fr)!important;
  gap:var(--v46-play-gap)!important;
  min-width:0!important;
  min-height:0!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage .cook-row,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .cook-row,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .cook-row{
  grid-column:1!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--v46-goal-w)!important;
  grid-template-rows:minmax(0,1fr)!important;
  width:100%!important;
  height:var(--v46-row-h)!important;
  min-height:0!important;
  max-height:var(--v46-row-h)!important;
  gap:var(--v46-play-gap)!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage .chef-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .chef-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .chef-card,
html[data-layout-mode="desktop-low-height"] .game-stage .goal-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .goal-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .goal-card{
  width:100%!important;
  height:var(--v46-row-h)!important;
  min-height:0!important;
  max-height:var(--v46-row-h)!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage .chef-card{
  grid-template-columns:minmax(0,1.45fr) minmax(96px,.72fr)!important;
  gap:5px!important;
  padding:3px 7px 3px 4px!important;
}
html[data-layout-mode="desktop-low-height"] .steamer-wrap,
html[data-layout-mode="desktop-low-height"] .steamer-btn{height:100%!important;min-height:0!important}
html[data-layout-mode="desktop-low-height"] .steamer-btn{grid-template-columns:clamp(36px,9dvh,52px) minmax(0,1fr)!important}
html[data-layout-mode="desktop-low-height"] .steamer-btn>.steamer-art{
  width:clamp(36px,9dvh,52px)!important;
  height:clamp(38px,10dvh,62px)!important;
}
html[data-layout-mode="desktop-low-height"] .steamer-btn>.cook-label small{font-size:clamp(9px,2.45dvh,12px)!important;line-height:1!important}
html[data-layout-mode="desktop-low-height"] .steamer-btn>.cook-label b,
html[data-layout-mode="desktop-low-height"] .free-price{font-size:clamp(10px,2.35dvh,12px)!important;min-height:20px!important;padding:2px 4px!important}
html[data-layout-mode="desktop-low-height"] .goal-card{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  grid-template-areas:"kicker" "title" "progress"!important;
  align-content:center!important;
  justify-items:start!important;
  gap:1px!important;
  padding:3px 6px!important;
  overflow:hidden!important;
}
html[data-layout-mode="desktop-low-height"] .goal-kicker,
html[data-layout-mode="desktop-low-height"] .goal-title,
html[data-layout-mode="desktop-low-height"] .goal-progress{font-size:clamp(9px,2.35dvh,11px)!important;line-height:1.02!important}
html[data-layout-mode="desktop-low-height"] .game-stage .board-shell,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .board-shell,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .board-shell{
  grid-column:1!important;
  grid-row:2!important;
  min-height:0!important;
  padding:var(--v46-shell-pad)!important;
}
html[data-layout-mode="desktop-low-height"] .board-topline{
  height:var(--v46-shell-top)!important;
  min-height:var(--v46-shell-top)!important;
  padding-bottom:2px!important;
}
html[data-layout-mode="desktop-low-height"] .side-panel{
  width:auto!important;
  min-width:0!important;
  grid-template-rows:44px minmax(0,1fr)!important;
}
html[data-layout-mode="desktop-low-height"] .collection-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Normal desktop enters from the exact compact-desktop budgets at 541px and
   expands continuously.  1023->1024 is therefore just a 1px formula change. */
html[data-layout-mode="desktop"]{
  --v46-desktop-topbar:clamp(48px,calc(17dvh - 44px),58px);
  --v46-row-h:clamp(82px,calc(23.7dvh - 46px),96px);
  --v46-shell-top:clamp(28px,calc(6.8dvh - 9px),38px);
  --v46-shell-pad:clamp(7px,1.55dvh,12px);
  --v46-play-pad:clamp(7px,1.7dvh,12px);
  --v46-play-gap:clamp(7px,1.65dvh,12px);
  --v46-goal-w:clamp(220px,calc(138px + 8vw),250px);
}
html[data-layout-mode="desktop"] #app{
  grid-template-rows:var(--v46-desktop-topbar) minmax(0,1fr)!important;
}
html[data-layout-mode="desktop"] .play-layout{
  grid-template-columns:minmax(0,1fr) var(--v46-sidebar)!important;
  grid-template-rows:minmax(0,1fr)!important;
  padding:var(--v46-play-pad)!important;
  gap:var(--v46-play-gap)!important;
}
html[data-layout-mode="desktop"] .game-stage,
html[data-layout-mode="desktop"] .game-stage.goal-long,
html[data-layout-mode="desktop"] .game-stage.goal-double{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:var(--v46-row-h) minmax(0,1fr)!important;
  gap:var(--v46-play-gap)!important;
  min-width:0!important;
  min-height:0!important;
}
html[data-layout-mode="desktop"] .game-stage .cook-row,
html[data-layout-mode="desktop"] .game-stage.goal-long .cook-row,
html[data-layout-mode="desktop"] .game-stage.goal-double .cook-row{
  grid-column:1!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--v46-goal-w)!important;
  grid-template-rows:minmax(0,1fr)!important;
  width:100%!important;
  height:var(--v46-row-h)!important;
  min-height:0!important;
  max-height:var(--v46-row-h)!important;
  gap:var(--v46-play-gap)!important;
}
html[data-layout-mode="desktop"] .game-stage .chef-card,
html[data-layout-mode="desktop"] .game-stage.goal-long .chef-card,
html[data-layout-mode="desktop"] .game-stage.goal-double .chef-card,
html[data-layout-mode="desktop"] .game-stage .goal-card,
html[data-layout-mode="desktop"] .game-stage.goal-long .goal-card,
html[data-layout-mode="desktop"] .game-stage.goal-double .goal-card{
  width:100%!important;
  height:var(--v46-row-h)!important;
  min-height:0!important;
  max-height:var(--v46-row-h)!important;
}
html[data-layout-mode="desktop"] .game-stage .board-shell,
html[data-layout-mode="desktop"] .game-stage.goal-long .board-shell,
html[data-layout-mode="desktop"] .game-stage.goal-double .board-shell{
  grid-column:1!important;
  grid-row:2!important;
  min-height:0!important;
  padding:var(--v46-shell-pad)!important;
}
html[data-layout-mode="desktop"] .board-topline{
  height:var(--v46-shell-top)!important;
  min-height:var(--v46-shell-top)!important;
}
html[data-layout-mode="desktop"] .side-panel{
  width:auto!important;
  min-width:0!important;
}

/* v46 invariants: no mode may accidentally collapse the two architectural roots. */
html[data-layout-mode] .play-layout,
html[data-layout-mode] .game-stage,
html[data-layout-mode] .board-shell,
html[data-layout-mode] .side-panel{min-width:0!important;min-height:0!important}

/* v46 boundary continuity calibration.  The short-landscape and compact-desktop
   sidebar use the same continuous width budget.  Compact-desktop board growth
   starts from the exact short-landscape width budget at 412/413 and then grows
   continuously with available height. */
html[data-layout-mode="mobile-landscape"]{
  --v46-mobile-side:var(--v46-sidebar);
}
html[data-layout-mode="desktop-low-height"]{
  --v46-board-cap-width:calc(45vw + 60dvh - 322.8px);
  --v46-board-cap-height-band:calc(60dvh + 32.2px);
}
html[data-layout-mode="desktop-low-height"] .board{
  max-width:min(100%,var(--v46-board-cap-width),var(--v46-board-cap-height-band))!important;
  max-height:min(100%,var(--v46-board-cap-width),var(--v46-board-cap-height-band))!important;
}
html[data-layout-mode="mobile-landscape"]{
  --v46-mobile-board-cap:clamp(170px,calc(45vw - 75px),280px);
}
html[data-layout-mode="mobile-landscape"] .board{
  max-width:min(100%,var(--v46-mobile-board-cap))!important;
  max-height:min(100%,var(--v46-mobile-board-cap))!important;
}

/* Local content adaptation only: it never changes stage/play architecture. */
html[data-layout-mode="desktop-low-height"]{--v46-goal-w:clamp(120px,18vw,230px)}
@container dumpling-stage (max-width:390px){
  html[data-layout-mode="desktop-low-height"] .chef-card{
    grid-template-columns:minmax(0,1fr)!important;
    padding-inline:5px!important;
  }
  html[data-layout-mode="desktop-low-height"] .chef-card .chef-copy{display:none!important}
  html[data-layout-mode="desktop-low-height"] .steamer-wrap{width:100%!important}
  html[data-layout-mode="desktop-low-height"] .steamer-btn{grid-template-columns:clamp(38px,11dvh,52px) minmax(0,1fr)!important}
}
html[data-layout-mode="desktop"] .goal-card.order-mode .goal-title,
html[data-layout-mode="desktop"] .goal-card.order-mode .order-target-copy{
  font-size:13px!important;
  line-height:1.1!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
html[data-layout-mode="desktop"] .goal-card.order-mode .goal-progress{
  font-size:12px!important;
  line-height:1.08!important;
}
html[data-layout-mode="desktop"] .goal-card.order-mode .order-name{white-space:nowrap!important}
html[data-layout-mode="desktop-low-height"]{--v46-goal-w:clamp(96px,18vw,230px)}

/* Compact-card internals scale continuously with the compact desktop budget. */
html[data-layout-mode="desktop-low-height"]{
  --v46-row-h:clamp(52px,calc(23.62dvh - 45.55px),96px);
  --v46-chef-copy-w:clamp(0px,calc(40vw - 224px),102px);
}
html[data-layout-mode="mobile-landscape"]{
  --v46-mobile-board-cap:clamp(170px,calc(45vw - 75px),277px);
}
html[data-layout-mode="desktop-low-height"] .chef-card{
  grid-template-columns:minmax(0,1fr) var(--v46-chef-copy-w)!important;
}
html[data-layout-mode="desktop-low-height"] .chef-copy{
  min-width:0!important;
  width:var(--v46-chef-copy-w)!important;
  overflow:hidden!important;
}
html[data-layout-mode="desktop-low-height"] .steamer-wrap,
html[data-layout-mode="desktop-low-height"] .steamer-btn{
  width:100%!important;
  height:calc(var(--v46-row-h) - 8px)!important;
  min-height:0!important;
  max-height:calc(var(--v46-row-h) - 8px)!important;
}
html[data-layout-mode="desktop-low-height"] .game-stage .chef-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .chef-card,
html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .chef-card{
  grid-template-columns:minmax(0,1fr) var(--v46-chef-copy-w)!important;
}
@container dumpling-stage (max-width:390px){
  html[data-layout-mode="desktop-low-height"] .game-stage .chef-card,
  html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .chef-card,
  html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .chef-card{
    grid-template-columns:minmax(0,1fr)!important;
  }
}
html[data-layout-mode="desktop"]{--v46-goal-w:clamp(230px,calc(148px + 8vw),260px)}

/* v46 narrow compact-desktop content adaptation: keep the Special affordance
   visible.  This is card-internal adaptation only; stage/play architecture
   remains owned by data-layout-mode. */
html[data-layout-mode="desktop-low-height"]{
  --v46-chef-copy-w:clamp(42px,calc(40vw - 224px),102px);
}
@container dumpling-stage (max-width:390px){
  html[data-layout-mode="desktop-low-height"] .game-stage .chef-card,
  html[data-layout-mode="desktop-low-height"] .game-stage.goal-long .chef-card,
  html[data-layout-mode="desktop-low-height"] .game-stage.goal-double .chef-card{
    grid-template-columns:minmax(0,1fr) var(--v46-chef-copy-w)!important;
  }
  html[data-layout-mode="desktop-low-height"] .game-stage .chef-card .chef-copy{
    display:grid!important;
    grid-template-rows:auto 4px!important;
    align-content:center!important;
    gap:2px!important;
    width:var(--v46-chef-copy-w)!important;
    min-width:0!important;
    padding:2px!important;
  }
  html[data-layout-mode="desktop-low-height"] .game-stage .chef-card .mini-label,
  html[data-layout-mode="desktop-low-height"] .game-stage .chef-card .tiny-note{display:none!important}
  html[data-layout-mode="desktop-low-height"] .game-stage .chef-card .mystery-head{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
  }
  html[data-layout-mode="desktop-low-height"] .game-stage .chef-card .mystery-count{
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  html[data-layout-mode="desktop-low-height"] .game-stage .chef-card .mystery-track{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:4px!important;
  }
}

/* v46 tablet-side continuity inside mobile-portrait. Phone geometry through
   430px stays byte-for-byte equivalent in size; above it the budgets converge
   continuously to desktop at the resolver's 820/821 boundary. */
html[data-layout-mode="mobile-portrait"]{
  --v46-mobile-row:clamp(70px,calc(41.33px + 6.667vw),96px);
  --v46-mobile-bottom-width:clamp(264px,calc(584px - 39vw),100%);
  --v46-mobile-board-cap:calc(850px - 43vw);
}
html[data-layout-mode="mobile-portrait"] .game-stage,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double{
  grid-template-rows:var(--v46-mobile-row) minmax(0,1fr)!important;
}
html[data-layout-mode="mobile-portrait"] .game-stage .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage .chef-card,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .chef-card,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .chef-card,
html[data-layout-mode="mobile-portrait"] .game-stage .goal-card,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .goal-card,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .goal-card{
  height:var(--v46-mobile-row)!important;
  min-height:var(--v46-mobile-row)!important;
  max-height:var(--v46-mobile-row)!important;
}
html[data-layout-mode="mobile-portrait"] .side-panel{
  width:var(--v46-mobile-bottom-width)!important;
  justify-self:center!important;
}
html[data-layout-mode="mobile-portrait"] .board{
  max-width:min(100%,var(--v46-mobile-board-cap))!important;
  max-height:min(100%,var(--v46-mobile-board-cap))!important;
}

/* v46 mobile-landscape card internals are mode-owned as well.  Previously the
   <=960 legacy media block supplied these dimensions, which made 960->961 a
   hidden second source of truth even after the outer geometry was fixed. */
html[data-layout-mode="mobile-landscape"] .game-stage .chef-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-long .chef-card,
html[data-layout-mode="mobile-landscape"] .game-stage.goal-double .chef-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:84px minmax(0,1fr)!important;
  gap:4px!important;
  padding:4px!important;
}
html[data-layout-mode="mobile-landscape"] .chef-card .steamer-wrap{
  width:100%!important;
  height:84px!important;
  min-height:0!important;
}
html[data-layout-mode="mobile-landscape"] .chef-card .steamer-btn{
  width:100%!important;
  height:82px!important;
  min-height:0!important;
  grid-template-columns:28px minmax(0,1fr)!important;
  gap:5px!important;
  padding:4px 5px!important;
}
html[data-layout-mode="mobile-landscape"] .chef-card .steamer-btn>.steamer-art{
  width:28px!important;
  height:48px!important;
}
html[data-layout-mode="mobile-landscape"] .chef-card .cook-label{
  min-width:0!important;
  width:100%!important;
}
html[data-layout-mode="mobile-landscape"] .chef-card .cook-label small{
  font-size:12px!important;
  line-height:1!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
html[data-layout-mode="mobile-landscape"] .chef-card .cook-label b,
html[data-layout-mode="mobile-landscape"] .chef-card .free-price{
  font-size:12px!important;
}
html[data-layout-mode="mobile-landscape"] .chef-card .chef-copy{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}

/* v46 desktop CTA content continuity.  The steamer column keeps the width its
   localized caption/price actually needs; the Special column flexes
   continuously instead of forcing CTA children outside the button at the
   narrow edge of desktop.  This is card-internal sizing, not an architecture
   breakpoint. */
html[data-layout-mode="desktop"] .game-stage .chef-card,
html[data-layout-mode="desktop"] .game-stage.goal-long .chef-card,
html[data-layout-mode="desktop"] .game-stage.goal-double .chef-card{
  grid-template-columns:minmax(0,1fr) clamp(76px,10vw,102px)!important;
  gap:5px!important;
  padding-inline:4px 6px!important;
}
html[data-layout-mode="desktop"] .steamer-btn>.cook-label b,
html[data-layout-mode="desktop"] .steamer-btn>.cook-label .free-price{
  padding-inline:4px!important;
}

/* v46 normal-desktop badge clearance.  The first tab reserves an internal
   badge lane; labels stay vertically centered and no sidebar-width breakpoint
   is needed as the sidebar now changes continuously. */
html[data-layout-mode="desktop"] .tabs .tab:first-child{
  padding-left:2px!important;
  padding-right:22px!important;
}

/* v46 tab architecture is mode-owned.  Legacy 561px / 1024px media rules may
   still exist above for historical compatibility, but cannot decide the tab
   composition after the resolver has selected a mode. */
html[data-layout-mode="desktop-low-height"] .side-panel>.tabs{
  /* Release-closure invariant: each label gets a track sized for its real
     glyph budget. Collection is the longest cross-locale label; Bonuses
     keeps its own width instead of donating space to the upgrade badge. */
  grid-template-columns:minmax(0,1.08fr) minmax(0,1.04fr) minmax(0,.9fr)!important;
  min-height:44px!important;
  padding:3px 2px 0!important;
  gap:2px!important;
  overflow:visible!important;
}
html[data-layout-mode="desktop-low-height"] .side-panel>.tabs .tab{
  display:flex!important;
  min-width:0!important;
  min-height:41px!important;
  align-items:flex-end!important;
  justify-content:center!important;
  padding:0 2px 4px!important;
  font-size:11px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
html[data-layout-mode="desktop-low-height"] .side-panel>.tabs .tab-badge{top:2px!important;right:4px!important}
html[data-layout-mode="desktop-low-height"] .side-panel>.tabs .tab-badge.dot{top:4px!important;right:6px!important}

html[data-layout-mode="desktop"] .side-panel>.tabs{
  /* Release-closure invariant: proportional tracks are driven by localized
     glyph needs, not by the badge. The badge occupies the upper strip of the
     tab while label text owns the full horizontal track. */
  grid-template-columns:minmax(0,1.08fr) minmax(0,1.04fr) minmax(0,.9fr)!important;
  min-height:48px!important;
  padding:4px 2px 0!important;
  gap:2px!important;
  overflow:visible!important;
}
html[data-layout-mode="desktop"] .side-panel>.tabs .tab{
  display:flex!important;
  min-width:0!important;
  min-height:44px!important;
  align-items:flex-end!important;
  justify-content:center!important;
  padding:0 2px 4px!important;
  font-size:clamp(11px,calc(8.8px + .3vw),12px)!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
html[data-layout-mode="desktop"] .side-panel>.tabs .tab:first-child{
  padding-left:2px!important;
  padding-right:2px!important;
}
html[data-layout-mode="desktop"] .side-panel>.tabs .tab-badge{top:2px!important;right:3px!important}
html[data-layout-mode="desktop"] .side-panel>.tabs .tab-badge.dot{top:4px!important;right:4px!important}


/* v46 desktop CTA internals are mode-owned as well.  In particular, the old
   min-height:561px rule can no longer widen the steamer art and create a new
   fit discontinuity inside the same resolver mode. */
html[data-layout-mode="desktop"] .steamer-wrap{width:100%!important;min-width:0!important;overflow:visible!important}
html[data-layout-mode="desktop"] .steamer-btn{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:clamp(38px,5vw,56px) minmax(0,1fr)!important;
  gap:3px!important;
  padding:2px!important;
}
html[data-layout-mode="desktop"] .steamer-btn>.steamer-art{
  width:clamp(38px,5vw,56px)!important;
  max-width:56px!important;
  height:clamp(52px,8dvh,64px)!important;
}
html[data-layout-mode="desktop"] .steamer-btn>.cook-label{min-width:0!important;width:100%!important}
html[data-layout-mode="desktop"] .steamer-btn>.cook-label small{font-size:12px!important;line-height:1.05!important;white-space:normal!important}
html[data-layout-mode="desktop"] .steamer-btn>.cook-label b,
html[data-layout-mode="desktop"] .steamer-btn>.cook-label .free-price{font-size:12px!important;padding-inline:1px!important}


/* v46 final ownership: mobile tab architecture is mode-owned too.  Legacy
   width/height media queries may still carry cosmetic declarations, but they
   cannot select a different tab composition inside the same resolver mode. */
html[data-layout-mode="mobile-portrait"] .side-panel>.tabs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  height:56px!important;
  min-height:56px!important;
  padding:4px 2px!important;
  gap:8px!important;
  overflow:visible!important;
}
html[data-layout-mode="mobile-portrait"] .side-panel>.tabs .tab{
  display:block!important;
  min-width:0!important;
  min-height:48px!important;
  padding:6px 3px!important;
  font-size:11px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
html[data-layout-mode="mobile-landscape"] .side-panel>.tabs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  height:46px!important;
  min-height:46px!important;
  padding:2px 3px 0!important;
  gap:5px!important;
  overflow:visible!important;
}
html[data-layout-mode="mobile-landscape"] .side-panel>.tabs .tab{
  display:block!important;
  min-width:0!important;
  min-height:44px!important;
  padding:2px 0!important;
  font-size:12px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}

/* v46 final narrow-desktop CTA fit: avoid sub-pixel scrollWidth overflow of
   localized price text at the measured desktop minimum width. Geometry and
   mode ownership stay unchanged; only the price pill's internal padding is
   normalized. */
html[data-layout-mode="desktop"] .steamer-btn>.cook-label b,
html[data-layout-mode="desktop"] .steamer-btn>.cook-label .free-price{
  padding-inline:0!important;
}
html[data-layout-mode="desktop"] .steamer-btn>.cook-label b{
  gap:3px!important;
}
html[data-layout-mode="desktop"] .steamer-btn>.cook-label b{
  gap:2px!important;
}

/* v47 release closure: mobile modal panel structure is owned by the resolver,
   not by a width/orientation media query. */
html[data-layout-mode="mobile-portrait"] .side-panel>.panel-scroll{display:none!important}
html[data-layout-mode="mobile-portrait"] .mobile-panel-head{display:none}
html[data-layout-mode="mobile-portrait"] .side-panel.mobile-open{
  position:fixed!important;
  inset:auto 8px max(10px,env(safe-area-inset-bottom)) 8px!important;
  z-index:1760!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-width:none!important;
  max-height:min(82dvh,720px)!important;
  border:1px solid var(--line)!important;
  border-radius:24px!important;
  display:grid!important;
  grid-template-rows:54px minmax(0,auto)!important;
  overflow:hidden!important;
  background:#fff8e9!important;
  box-shadow:0 20px 55px rgba(64,36,19,.34)!important;
}
html[data-layout-mode="mobile-portrait"] .side-panel.mobile-open>.tabs{display:none!important}
html[data-layout-mode="mobile-portrait"] .side-panel.mobile-open>.mobile-panel-head{
  display:flex!important;align-items:center;justify-content:space-between;
  padding:8px 10px 7px 16px;border-bottom:1px solid var(--line);background:rgba(255,250,238,.96)
}
html[data-layout-mode="mobile-portrait"] .side-panel.mobile-open>.panel-scroll{
  display:block!important;height:auto!important;max-height:calc(min(82dvh,720px) - 54px)!important;
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
  padding:10px 10px max(22px,env(safe-area-inset-bottom))!important;mask-image:none!important;-webkit-mask-image:none!important
}
html[data-layout-mode="mobile-portrait"] .side-panel.mobile-open .panel-page.active{display:block!important}
html[data-layout-mode="mobile-portrait"] .mobile-panel-backdrop:not([hidden]){
  display:block;position:fixed;inset:0;z-index:1745;border:0;background:rgba(48,31,21,.48);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:0
}
html[data-layout-mode="mobile-portrait"] #app.mobile-panel-active .play-layout{z-index:auto!important}
html[data-layout-mode="mobile-portrait"] #app.mobile-panel-active .topbar{z-index:20!important}
/* v47 release closure: short-landscape badges own the upper strip; labels sit
   at the bottom so unread/intro badges never collide with localized glyphs. */
html[data-layout-mode="mobile-landscape"] .side-panel>.tabs .tab{
  display:flex!important;align-items:flex-end!important;justify-content:center!important;
  padding:0 1px 2px!important;
}
html[data-layout-mode="mobile-landscape"] .side-panel>.tabs .tab-badge{top:2px!important;right:4px!important}
html[data-layout-mode="mobile-landscape"] .side-panel>.tabs .tab-badge.dot{top:4px!important;right:6px!important}


/* v47 release closure structural cleanup: closed mobile-panel ownership also
   belongs to resolver mode; legacy width/orientation media rules no longer
   position the sidebar or panel shell. */
html[data-layout-mode="mobile-portrait"] .side-panel{
  position:relative!important;
  overflow:visible!important;
}
html[data-layout-mode="mobile-portrait"] .mobile-panel-head{display:none!important}

/* v47 release closure: the v43 compact portrait component geometry is owned by
   the resolver mode, not by the legacy portrait media query.  Keep the v46
   continuous row budget while preserving the proven 70px-phone internals. */
html[data-layout-mode="mobile-portrait"] .game-stage,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double{
  gap:6px!important;
  min-height:0!important;
}
html[data-layout-mode="mobile-portrait"] .game-stage .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .cook-row,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .cook-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(126px,38%,150px)!important;
  grid-template-rows:var(--v46-mobile-row)!important;
  gap:5px!important;
  height:var(--v46-mobile-row)!important;
  min-height:var(--v46-mobile-row)!important;
  max-height:var(--v46-mobile-row)!important;
  align-items:stretch!important;
  overflow:visible!important;
}
html[data-layout-mode="mobile-portrait"] .game-stage .chef-card,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-long .chef-card,
html[data-layout-mode="mobile-portrait"] .game-stage.goal-double .chef-card{
  height:var(--v46-mobile-row)!important;
  min-height:var(--v46-mobile-row)!important;
  max-height:var(--v46-mobile-row)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(50px,54px)!important;
  grid-template-rows:1fr!important;
  gap:3px!important;
  padding:3px 4px!important;
  align-items:center!important;
  overflow:visible!important;
}
html[data-layout-mode="mobile-portrait"] .goal-card,
html[data-layout-mode="mobile-portrait"] .goal-card.long-order,
html[data-layout-mode="mobile-portrait"] .goal-card.double-order,
html[data-layout-mode="mobile-portrait"] .goal-card.order-mode,
html[data-layout-mode="mobile-portrait"] .goal-card.order-mode.long-order,
html[data-layout-mode="mobile-portrait"] .goal-card.order-mode.double-order{
  width:100%!important;
  min-width:0!important;
  height:var(--v46-mobile-row)!important;
  min-height:var(--v46-mobile-row)!important;
  max-height:var(--v46-mobile-row)!important;
  padding:4px 6px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  grid-template-areas:"kicker progress" "title title"!important;
  align-content:center!important;
  align-items:center!important;
  gap:1px 4px!important;
  overflow:visible!important;
}
html[data-layout-mode="mobile-portrait"] .goal-card.order-mode .order-target-art,
html[data-layout-mode="mobile-portrait"] .goal-card.order-mode .order-target-symbol{
  display:none!important;
}
html[data-layout-mode="mobile-portrait"] .goal-card.order-mode .order-target-copy{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding-block:0!important;
}
html[data-layout-mode="mobile-portrait"] .board-shell{min-height:0!important;}

/* Release-closure: order text owns the full goal-card content row.
   The legacy base card splits title/progress into two columns; that is fine for
   short goals but starves two-item late-game orders even when the card itself
   has enough space. Resolver modes keep the outer geometry; this rule only
   fixes the component's internal grid. */
html[data-layout-mode="desktop"] .goal-card.order-mode{
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  grid-template-areas:"kicker progress" "title title"!important;
  gap:2px 6px!important;
}
html[data-layout-mode="desktop"] .goal-card.order-mode .goal-title{
  width:100%!important;
  max-width:100%!important;
  align-self:center!important;
}

/* Compact desktop uses the same invariant, with a text-safe minimum goal
   budget and smaller decorative pair art. Board/stage budgets are unchanged. */
html[data-layout-mode="desktop-low-height"]{
  --v46-goal-w:clamp(150px,18vw,230px)!important;
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode{
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  grid-template-areas:"kicker progress" "title title"!important;
  gap:1px 4px!important;
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .goal-title{
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:3px!important;
  font-size:clamp(9px,2.15dvh,10px)!important;
  line-height:1!important;
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-target-art.pair{
  width:38px!important;
  flex:0 0 38px!important;
  height:28px!important;
  grid-template-columns:1fr 1fr!important;
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-target-art.pair svg{
  width:22px!important;
  height:22px!important;
  margin-inline:-2px!important;
}

/* Narrow normal-desktop CTA: constrain the localized caption to its actual
   grid track instead of letting its intrinsic glyph width escape the button. */
html[data-layout-mode="desktop"] .steamer-btn>.cook-label small{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  font-size:clamp(10px,calc(3px + 1vw),12px)!important;
  line-height:1.02!important;
  letter-spacing:-.02em!important;
  text-align:center!important;
  white-space:normal!important;
  text-wrap:balance!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

/* Release-closure low-height order glyph budget. Historical <=430 rules give
   order copy an 11px / 1.28 line box; inside a ~54px compact card that creates
   four-line overflow at mid widths. Keep names atomic, but scale only the
   order-card typography/art in this resolver mode. */
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .goal-title{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  gap:2px!important;
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-target-art.pair{
  width:34px!important;
  flex:none!important;
  height:25px!important;
  grid-template-columns:1fr 1fr!important;
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-target-art.pair svg{
  width:20px!important;
  height:20px!important;
  margin-inline:-2px!important;
}
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-target-copy,
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-name,
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-level,
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-count,
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .order-plus{
  width:auto!important;
  max-width:100%!important;
  font-size:9px!important;
  line-height:1!important;
  padding-block:0!important;
}
html[data-layout-mode="desktop-low-height"] #goalKicker,
html[data-layout-mode="desktop-low-height"] .goal-card.order-mode .goal-progress{
  font-size:9px!important;
  line-height:1!important;
}

/* Release-closure low-height CTA glyph containment. */
html[data-layout-mode="desktop-low-height"] .steamer-btn>.cook-label small{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  letter-spacing:-.02em!important;
  text-align:center!important;
  white-space:normal!important;
  text-wrap:balance!important;
  overflow:visible!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

/* Release-closure: at the exact minimum desktop width the Special column and
   localized CTA share the narrowest available chef-card budget. Keep glyph ink
   inside the button continuously; larger desktops converge back to 12px. */
html[data-layout-mode="desktop"] .steamer-btn>.cook-label small{
  font-size:clamp(9px,calc(1.8px + 1vw),12px)!important;
}

/* Release-closure: ultra-narrow desktop-low-height CTA budget.
   Keep the outer layout untouched; smoothly yield decorative steamer-art width
   to localized caption/price text near the 560px minimum stage width. */
html[data-layout-mode="desktop-low-height"] .steamer-btn{
  grid-template-columns:clamp(24px,calc(14vw - 54.4px),52px) minmax(0,1fr)!important;
}
html[data-layout-mode="desktop-low-height"] .steamer-btn>.cook-label b,
html[data-layout-mode="desktop-low-height"] .steamer-btn>.cook-label .free-price{
  font-size:clamp(9px,calc(1.5vw + 1px),12px)!important;
  line-height:1!important;
  max-width:100%!important;
  min-width:0!important;
  padding-inline:1px!important;
}

/* Release-closure: keep the desktop order title row clear of kicker/progress
   even at the 561px minimum normal-desktop height. */
html[data-layout-mode="desktop"] .goal-card.order-mode{
  row-gap:3px!important;
}

/* Release-closure: continuous short-desktop order typography budget.
   At the 561px normal-desktop entry point, a long two-item localized order
   must not touch the progress row; typography smoothly returns to full size. */
html[data-layout-mode="desktop"] .goal-card.order-mode .goal-title,
html[data-layout-mode="desktop"] .goal-card.order-mode .order-target-copy{
  font-size:clamp(12px,calc(4.9px + 1.266dvh),13px)!important;
  line-height:1.08!important;
}
html[data-layout-mode="desktop"] .goal-card.order-mode .goal-progress{
  font-size:clamp(11px,calc(3.9px + 1.266dvh),12px)!important;
  line-height:1.04!important;
}
html[data-layout-mode="desktop"] .goal-card.order-mode{row-gap:4px!important;}