:root {
      --ink: #6f3513;
      --muted: #9a6338;
      --cream: #fff6df;
      --gold: #f6a331;
      --orange: #ed6d20;
      --danger: #d94a32;
      --good: #4c9b4f;
      --blue: #4ca5d8;
      --asset: "assets/breakfast/spritegen-runs/breakfast-static-v1/run/curated-web/";
    }
    * { box-sizing: border-box; }
    html, body { min-height: 100%; }
    /* iOS：長按／滑動不准變成文字選取、放大鏡或圖片長按選單；只有輸入框（店名、好友 ID、留言）可以選字。 */
    html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
    input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
    img, canvas { -webkit-touch-callout: none; -webkit-user-drag: none; }
    body {
      margin: 0;
      /* iOS double-tap on a button zooms the page; manipulation keeps pan/pinch, drops double-tap zoom */
      touch-action: manipulation;
      color: var(--ink);
      font-family: "Trebuchet MS", "Noto Sans TC", system-ui, sans-serif;
      background: #d77d2d url("../assets/breakfast/spritegen-runs/breakfast-static-v1/run/curated-web/ui-frame-bg-breakfast-shop-day.webp") center top / cover fixed no-repeat;
    }
    body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgba(255,244,211,.08), rgba(101,43,10,.22)); }
    button { font: inherit; }
    button:focus-visible { outline: 4px solid #4ea9ef; outline-offset: 3px; }
    [hidden] { display: none !important; }
    /* 低效能模式（?fx=lite）：拿掉遊戲盤上最貴的兩個效果，給舊機型（iPhone 7 這類 2GB RAM）用。
       filter 加在每幀移動的元素上會讓 WebKit 放棄 GPU 快取、每幀重繪整個圖層；
       drop-shadow 換成等效的 box-shadow（方塊本來就是圓角矩形，視覺差異很小但便宜得多）。
       診斷用途：在 iPhone 的 Safari 開 ?fx=lite 與不加，比較拖曳是否變順。 */
    /* 2026-09-21 擴大為「省效果模式」（iOS 預設開）：原本只關四條，真正吃效能的方塊基礎濾鏡、粒子、
       消除白光的混色、煎台大圖與煙霧的濾鏡都沒關，玩家開了也沒感覺。iOS 測試者回報「越玩越卡、
       消除卡在白畫面」，盤點與 codex 複審都指向同一件事：每個方塊一層 drop-shadow 且放在 transition 裡，
       盤面越滿離屏重繪越多；消除時上百顆帶濾鏡的粒子加 mix-blend-mode 讓合成跟不上。 */
    body.fx-lite .block { filter: none; box-shadow: 0 2px 2px rgba(113,45,6,.26); transition: left .17s ease, top .17s ease, opacity .17s ease, transform .1s ease; }
    body.fx-lite .block.dragging { filter: none; box-shadow: 0 6px 4px rgba(95,37,4,.34); }
    body.fx-lite .block.clearing { filter: none; }
    body.fx-lite .machine-frame,
    body.fx-lite .machine-frame-clean { filter: none; }
    body.fx-lite .block.tool-targetable,
    body.fx-lite .block.tool-row-selected,
    body.fx-lite .tool-button.active { filter: none; animation: none; }
    body.fx-lite .fx-particle,
    body.fx-lite .fx-particle.white-spark { filter: none; }
    body.fx-lite .fx-particle.white-spark { clip-path: none; border-radius: 50%; }
    body.fx-lite .fx-clear-line { mix-blend-mode: normal; box-shadow: none; background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.72) 14%, rgba(255,240,190,.85) 50%, rgba(255,255,255,.72) 86%, transparent 100%); }
    body.fx-lite .smoke-puff,
    body.fx-lite .board-smoke.dark .smoke-puff.ambient-smoke { filter: none; }
    body.fx-lite .board-smoke.dark::before { animation: none; }
    .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

    .game-app { width: min(100%, 640px); min-height: 100svh; margin: 0 auto; padding: 10px 12px 28px; background: linear-gradient(90deg, rgba(255,246,216,.92), rgba(255,255,245,.96), rgba(255,246,216,.92)); box-shadow: 0 0 46px rgba(77,32,7,.38); }
    .splash-screen, .hub-app { width: min(100%, 540px); min-height: 100svh; margin: 0 auto; box-shadow: 0 0 46px rgba(77,32,7,.38); }
    .splash-screen { position: relative; display: block; height: 100svh; overflow: hidden; padding: 0; background: #d47d28; }
    .splash-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
    .splash-start-button,
    .splash-settings-button { position: absolute; z-index: 3; padding: 0; border: 0; color: transparent; background: transparent; box-shadow: none; font-size: 0; cursor: pointer; opacity: .01; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    /* 入口圖為 941 × 1672；用原圖座標比例對齊按鈕，並在四周保留觸控容錯。 */
    .splash-start-button { left: 16%; top: 76.2%; width: 68%; height: 15.2%; border-radius: 28px; }
    .splash-settings-button { top: max(2.4%,env(safe-area-inset-top)); right: 2.8%; width: 15.5%; aspect-ratio: 1; border-radius: 27%; }
    .splash-best-score { position: absolute; z-index: 2; left: 37.2%; top: 17%; width: 25.6%; height: 3.35%; display: flex; align-items: center; justify-content: center; gap: .3em; overflow: hidden; border-radius: 999px; color: #824016; background: linear-gradient(180deg,#f8e6bd,#f0d5a8); font-size: clamp(18px,4.65vw,25px); font-weight: 1000; line-height: 1; letter-spacing: .015em; text-shadow: 0 1px rgba(255,255,255,.7); white-space: nowrap; pointer-events: none; }
    .splash-best-score b { font: inherit; font-variant-numeric: tabular-nums; }
    .splash-best-score.long { gap: .18em; font-size: clamp(15px,3.9vw,21px); }
    .splash-best-score.empty { font-size: clamp(16px,4.15vw,22px); }
    .splash-start-button:active { transform: scale(.98); }
    .splash-settings-button:active { transform: scale(.95); }
    .splash-start-button:focus-visible,
    .splash-settings-button:focus-visible { opacity: 1; outline: 4px solid rgba(255,255,255,.9); outline-offset: 3px; }
    .audio-toggle { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 2px solid #df922d; border-radius: 14px; color: #9b4514; background: linear-gradient(145deg,#fffbea,#ffe39b); box-shadow: inset 0 2px rgba(255,255,255,.94),0 3px 0 #b85a17,0 5px 9px rgba(120,54,8,.18); cursor: pointer; transition: transform .12s ease,filter .12s ease; }
    .audio-toggle:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(255,255,255,.72),0 1px 0 #b85a17; }
    .audio-toggle .audio-speaker { position: relative; width: 84%; height: 84%; background: url("../assets/breakfast/audio-icons-v1/audio-on-v2.webp") center/contain no-repeat; filter: drop-shadow(0 1px 1px rgba(112,48,7,.2)); }
    .audio-toggle .audio-speaker::before,.audio-toggle .audio-speaker::after,.audio-toggle .audio-wave { display: none; }
    .audio-toggle.muted { color: #b7432c; background: linear-gradient(145deg,#fff5df,#ffc99d); }
    .audio-toggle.muted .audio-speaker { background-image: url("../assets/breakfast/audio-icons-v1/audio-muted-v1.webp"); }
    .splash-settings-button.audio-toggle { position: absolute; left: 2.8%; right: auto; top: max(2.4%,env(safe-area-inset-top)); opacity: 1; width: 13.5%; height: auto; padding: 0; border-width: 3px; border-radius: 27%; color: #a84a13; background: linear-gradient(145deg,rgba(255,253,235,.98),rgba(255,220,139,.98)); }
    .splash-settings-button.audio-toggle .audio-speaker { width: 76%; height: 76%; }
    .hub-app { position: relative; height: 100svh; overflow: hidden; background: linear-gradient(#fff4cf,#f7c067); }
    .hub-top { position: absolute; z-index: 30; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto auto 42px; gap: 7px; align-items: center; padding: max(8px,env(safe-area-inset-top)) 10px 8px; background: linear-gradient(rgba(255,248,219,.98),rgba(255,226,162,.96)); border-bottom: 3px solid #de8a25; box-shadow: 0 4px 12px rgba(102,44,5,.2); }
    .hub-top .audio-toggle { width: 40px; height: 40px; border-radius: 14px; }
    .profile-chip,.currency-chip { min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 5px 9px; border: 2px solid #e9a43b; border-radius: 16px; background: #fff8dc; box-shadow: inset 0 1px white,0 2px 0 #c87320; font-weight: 1000; }
    .profile-chip { min-width: 0; color: #70330f; font-family: inherit; text-align: left; cursor: pointer; }
    .profile-avatar { display: grid; place-items: center; overflow: hidden; width: 30px; height: 30px; border-radius: 50%; background: #ffbd45; }
    .profile-avatar img { width: 135%; height: 180%; object-fit: cover; object-position: center 9%; }
    .profile-copy { min-width: 0; }
    .profile-copy small,.currency-chip small { display: block; color: #ad6b2f; font-size: 8px; }
    .profile-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
    .currency-chip { min-width: 76px; justify-content: center; font-size: 13px; }
    /* 離線排隊中的領獎（38-wallet.js）：可花餘額不變，旁邊標待入帳 */
    .currency-chip b[data-pending]:not([data-pending=""])::after { content: attr(data-pending); display: block; font-size: 8px; line-height: 1; color: #b5651d; font-weight: 800; white-space: nowrap; }
    .shop-card button.is-busy { opacity: .6; pointer-events: none; }
    /* 店長頁帳號卡（39-account.js） */
    .account-panel .account-status { margin: 0; color: #87411c; font-size: 12px; line-height: 1.5; }
    .account-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .account-row > span { display: flex; flex-direction: column; gap: 2px; color: #5c2a0e; font-size: 13px; }
    .account-row small { color: #a2683a; font-size: 10px; }
    .account-panel .account-version { display: block; margin-top: 6px; color: #b07f57; font-size: 10px; letter-spacing: .02em; text-align: right; }
    .account-linked { margin-left: 6px; font-style: normal; font-size: 10px; color: #2f8a4c; font-weight: 800; }
    .account-unavailable { color: #a2683a; font-size: 11px; }
    .account-row .hub-button { min-height: 38px; padding: 6px 12px; font-size: 12px; }
    /* UGC 安全：留言卡的「⋯」與檢舉視窗（40-moderation.js） */
    .message-actions { display: grid; gap: 4px; justify-items: stretch; }
    .message-more { min-height: 26px; padding: 2px 8px; border: 2px solid #daa04b; border-radius: 10px; color: #87411c; background: #fff8da; font-weight: 900; cursor: pointer; }
    .report-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(40,18,4,.55); }
    .report-panel { display: grid; gap: 10px; width: min(92vw,360px); padding: 16px; border: 3px solid #e3a047; border-radius: 22px; background: linear-gradient(#fff9df,#ffe6ad); box-shadow: 0 10px 0 rgba(150,86,24,.35); }
    .report-panel h2 { margin: 0; color: #77340f; font-size: 17px; }
    .report-panel p { margin: 0; color: #87411c; font-size: 12px; line-height: 1.5; }
    .report-reasons { display: grid; gap: 5px; }
    .report-reason { display: flex; align-items: center; gap: 7px; color: #5c2a0e; font-size: 13px; }
    .report-note { width: 100%; padding: 7px 9px; border: 2px solid #e3a047; border-radius: 12px; background: #fffdf3; color: #5c2a0e; font: inherit; font-size: 13px; resize: none; }
    .report-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
    .currency-icon { width: 27px; height: 27px; flex: 0 0 27px; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(105,49,8,.18)); }
    .resource-inline { display: inline-flex; align-items: center; gap: 4px; }
    .resource-inline img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; }
    .pill.resource-pill { display: inline-flex; align-items: center; gap: 5px; }
    .pill.resource-pill img { width: 22px; height: 22px; object-fit: contain; }
    /* 上緣用 JS 量到的實際列高（--hub-top-h）：.hub-top 的 padding 含 env(safe-area-inset-top)，
       有瀏海的機型會長高，原本寫死 64px 會讓內容被推到金幣列底下（Pixel 7 實測差 43px，
       「關卡營業／自由營業」分頁因此被蓋住、點不到）。64px 只當 JS 還沒跑完的 fallback。 */
    /* 捲軸不畫出來：Android WebView 會在右緣留一條淺色軌道，疊在底部導覽列旁邊看起來像一塊色塊 */
    .hub-content { position: absolute; inset: var(--hub-top-h, 64px) 0 calc(66px + env(safe-area-inset-bottom)); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
    .hub-content::-webkit-scrollbar { width: 0; height: 0; }
    .hub-screen { min-height: 100%; padding: 12px 12px 24px; }
    .screen-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .screen-heading h2 { margin: 0; color: #85390f; font-size: 24px; }
    .screen-heading p { margin: 2px 0 0; color: #9b6135; font-size: 11px; }
    .upgrade-card { margin-bottom: 12px; padding: 12px; border: 3px solid #e9a84a; border-radius: 22px; background: linear-gradient(#fffaf0,#ffe9bd); box-shadow: inset 0 2px white,0 5px 10px rgba(101,41,5,.16); }
    .upgrade-card h3 { margin: 0 0 4px; color: #78340e; }
    .upgrade-compare { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 6px; align-items: center; margin: 10px 0; }
    .upgrade-compare figure { margin: 0; }
    .upgrade-compare img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border: 2px solid #e5a347; border-radius: 14px; }
    .upgrade-compare figcaption { margin-top: 3px; font-size: 9px; font-weight: 900; text-align: center; }
    .upgrade-arrow { color: #df751b; font-size: 25px; font-weight: 1000; text-align: center; }
    .requirement-list { display: grid; gap: 6px; margin: 10px 0; }
    .requirement { display: flex; justify-content: space-between; padding: 7px 9px; border: 2px solid #ecc06f; border-radius: 12px; background: #fff6d8; font-size: 11px; }
    .requirement.good { color: #36782e; border-color: #86c36e; background: #eaf6d4; }
    .requirement.bad { color: #a04b2a; border-color: #e19a75; background: #ffe4d2; }
    .unlock-copy { margin: 7px 0; color: #8f592f; font-size: 10px; line-height: 1.45; }
    .pill { padding: 6px 10px; border: 2px solid #e7a23d; border-radius: 99px; background: #fff3c7; font-size: 10px; font-weight: 1000; }
    .shop-stage { position: relative; overflow: hidden; width: 100%; aspect-ratio: 2 / 3; border: 4px solid #eda637; border-radius: 28px; background: #f8cf7c; box-shadow: inset 0 0 0 4px #fff5d2,0 8px 18px rgba(103,43,6,.25); }
    .shop-stage-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .decor-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
    .placed-decor-wrap { position: absolute; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
    .placed-decor-wrap.wall { align-items: center; filter: drop-shadow(0 4px 3px rgba(76,31,4,.30)); }
    .placed-decor { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; }
    /* 招牌素材的上方角色會超出牌面；以插槽寬度為準，讓實際牌面填滿底圖招牌框。 */
    .placed-decor-wrap.wall .placed-decor { position: absolute; left: 50%; bottom: 0; width: 100%; height: auto; max-width: none; object-fit: unset; object-position: center bottom; transform: translateX(-50%); }
    .decor-contact-shadow { position: absolute; z-index: 1; left: 15%; right: 15%; bottom: 1%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse,rgba(63,37,20,.42) 0 35%,rgba(63,37,20,.17) 58%,transparent 74%); filter: blur(2px); }
    .slot-hotspot { position: absolute; z-index: 5; display: grid; place-items: center; border: 3px dashed rgba(255,255,255,.95); border-radius: 18px; color: white; background: rgba(242,145,25,.16); box-shadow: 0 0 0 3px rgba(232,133,25,.5),0 0 18px rgba(255,246,172,.85); font-size: 10px; font-weight: 1000; text-shadow: 0 1px 3px #7b3009; cursor: pointer; }
    .slot-hotspot.active { background: rgba(255,197,54,.46); animation: target-breathe .7s ease-in-out infinite alternate; }
    .stage-overlay { position: absolute; z-index: 7; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: end; gap: 8px; }
    /*
     * 「任何螢幕都不用上下捲」的通用做法（2026-09-17）：頁面用 flex 直排、固定高度撐滿 .hub-content，
     * 主圖（店面照、關卡地圖）設 flex: 0 1 auto ＋ min-height: 0——aspect-ratio 只是「想要的高度」，
     * 空間不夠時它自己先縮，圖片與底圖都是 cover 所以只是裁切不會變形。其他元件（標題、按鈕列、道具列）
     * 維持自然高度不縮。這樣不用為每種機型寫斷點。
     */
    .hub-screen[data-screen="home"],
    .business-prep-screen { height: 100%; min-height: 0; overflow: hidden; }
    .hub-screen[data-screen="home"] { display: flex; flex-direction: column; }
    .hub-screen[data-screen="home"] .shop-stage,
    .business-mode-card,
    .business-mode-art { flex: 0 1 auto; min-height: 0; }
    .business-mode-card { display: flex; flex-direction: column; }
    /* 縮到這裡就不再縮（極端矮的螢幕寧可捲一點，也不要圖小到看不出是什麼、節點按不到） */
    .hub-screen[data-screen="home"] .shop-stage { min-height: 220px; }
    .business-mode-art { min-height: 130px; }
    .business-mode-art.campaign-map-active { min-height: 175px; }

    .hub-screen[data-screen="home"] { padding-bottom: 10px; }   /* 四顆捷徑鈕跟鐵軌之間要留一點距離，別貼著 */
    .hub-screen[data-screen="home"] .screen-heading { margin-bottom: 8px; }
    .hub-screen[data-screen="home"] .shop-stage,
    .hub-screen[data-screen="home"] .home-stage-controls,
    .hub-screen[data-screen="home"] .quick-grid { width: min(100%,430px); margin-inline: auto; }
    .home-stage-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; margin-top: 7px; padding: 4px 8px; border: 2px solid #e8a743; border-radius: 18px; background: linear-gradient(#fff9df,#ffe4aa); box-shadow: inset 0 2px white,0 3px 0 #c77a28; }
    .home-stage-controls .level-card { min-width: 0; padding: 0 3px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .home-stage-controls .level-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .home-stage-controls .resource-inline img { width: 16px; height: 16px; }
    .home-stage-controls .progress { width: min(100%,230px); }
    .home-stage-controls .hub-button { min-width: 108px; min-height: 42px; padding: 7px 13px; }
    .level-card { padding: 8px 10px; border: 2px solid #efb04a; border-radius: 15px; background: rgba(255,249,226,.94); box-shadow: 0 3px 8px rgba(94,38,4,.18); }
    .level-card strong { display: block; font-size: 14px; }
    .level-card small { color: #9c6135; font-size: 9px; }
    .progress { width: 140px; height: 8px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #efd3a4; }
    .progress i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffad27,#ef6620); }
    .hub-button { min-height: 46px; padding: 9px 15px; border: 3px solid #c95a16; border-radius: 17px; color: white; background: linear-gradient(#ffad39,#ed6b1d); box-shadow: inset 0 2px #ffd071,0 4px 0 #a94313; font-weight: 1000; cursor: pointer; }
    .hub-button.secondary { color: #87411c; border-color: #daa04b; background: linear-gradient(#fff8da,#ffe2a9); box-shadow: inset 0 2px white,0 4px 0 #bd7c2e; }
    .hub-button:active { transform: translateY(3px); box-shadow: inset 0 1px rgba(255,255,255,.6),0 1px 0 #a94313; }
    .quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
    .hub-screen[data-screen="home"] .quick-grid { margin-top: 8px; }
    .quick-card { position: relative; min-width: 0; min-height: 76px; padding: 8px 5px; border: 2px solid #e7aa4c; border-radius: 18px; color: #7a3814; background: linear-gradient(#fff9e5,#ffe5b1); box-shadow: inset 0 2px white,0 3px 0 #c67a28; cursor: pointer; font-weight: 1000; }
    .quick-card span { display: block; font-size: 27px; }
    .quick-card .quick-card-art { display: block; width: 35px; height: 35px; margin: 0 auto 1px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(103,43,5,.2)); }
    .quick-card-with-art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 5px; line-height: 1; }
    .quick-card-with-art .quick-card-art { flex: 0 0 35px; margin: 0; }
    .hub-screen[data-screen="home"] .quick-card .quick-card-label { display: block; font-size: 12px; line-height: 1.1; white-space: nowrap; }
    .daily-checkin-quick.ready { border-color: #ef8a24; background: linear-gradient(#fffce9,#ffd987); box-shadow: inset 0 2px white,0 3px 0 #bd5e18,0 0 13px rgba(255,188,54,.5); }
    .daily-checkin-badge { position: absolute; z-index: 3; top: 7px; right: 8px; width: 12px; min-width: 12px; height: 12px; padding: 0; border: 2px solid #fff8d7; border-radius: 50%; background: linear-gradient(#ff7053,#dd2830); box-shadow: 0 2px 0 #9e252c,0 3px 6px rgba(96,28,9,.25); }
    .daily-checkin-quick.ready .daily-checkin-badge:not([hidden]) { animation: daily-notification-pulse 1.45s ease-in-out infinite; }
    @keyframes daily-notification-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

    .daily-checkin-overlay { position: fixed; z-index: 135; inset: 0; display: grid; place-items: center; padding: 12px; background: rgba(70,27,4,.72); backdrop-filter: blur(5px); }
    .daily-checkin-panel { position: relative; width: min(92vw,360px); max-height: min(88svh,650px); overflow: hidden; padding: 10px 11px 11px; border: 3px solid #e99b2e; border-radius: 28px; color: #71320f; background: radial-gradient(circle at 50% 0,rgba(255,239,157,.72),transparent 34%),linear-gradient(#fffdf0,#ffe4a4); box-shadow: inset 0 3px white,0 16px 38px rgba(51,17,1,.48); scrollbar-width: none; }
    .daily-checkin-panel::-webkit-scrollbar { width: 0; height: 0; }
    .daily-checkin-close { position: absolute; z-index: 8; top: 11px; right: 11px; width: 37px; height: 37px; padding: 0; border: 2px solid #d67b25; border-radius: 50%; color: #7c3612; background: linear-gradient(#fff9dc,#ffd98b); box-shadow: inset 0 2px white,0 3px 0 #a95016; font-size: 19px; font-weight: 1000; cursor: pointer; }
    .daily-checkin-close:focus-visible,.daily-claim-button:focus-visible { outline: 3px solid rgba(238,126,25,.7); outline-offset: 2px; }
    .daily-checkin-hero { min-height: 80px; display: grid; grid-template-columns: minmax(0,1fr) 76px; align-items: center; gap: 7px; padding: 1px 39px 4px 7px; }
    .daily-checkin-title { margin: 0; color: #93400f; font-size: clamp(25px,7vw,34px); line-height: 1; text-shadow: 0 2px #fff2ae; }
    .daily-checkin-subtitle { max-width: 245px; margin: 7px 0 0; color: #92562d; font-size: 11px; font-weight: 900; line-height: 1.45; }
    .daily-mascot-frame { width: 74px; height: 74px; justify-self: end; background-image: url("../assets/breakfast/daily-checkin/animations/egg-mascot-celebrate-v1/egg-mascot-atlas.webp"); background-repeat: no-repeat; background-size: 600% 200%; background-position: 0 0; filter: drop-shadow(0 5px 4px rgba(121,58,8,.2)); }
    .daily-mascot-frame.idle { animation: daily-mascot-idle 1s steps(3,end) infinite; }
    .daily-mascot-frame.celebrate { background-position-y: 100%; animation: daily-mascot-celebrate .75s steps(5,end) 1 forwards; }
    .daily-checkin-week { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
    .daily-reward-card { position: relative; min-width: 0; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding: 9px 8% 9px; border: 0; color: #743310; background: transparent url("../assets/breakfast/daily-checkin/components-v2/card-reward-compact-v2.webp") center / 100% 100% no-repeat; text-align: center; filter: drop-shadow(0 3px 3px rgba(110,52,5,.16)); }
    .daily-reward-card.today { background-image: url("../assets/breakfast/daily-checkin/components-v2/card-reward-compact-v2.webp"); animation: daily-card-ready 1.15s ease-in-out infinite alternate; }
    .daily-reward-card.claimed { filter: saturate(.72) brightness(.98) drop-shadow(0 2px 2px rgba(92,44,5,.12)); }
    .daily-reward-card.reward-just-claimed { z-index: 2; animation: daily-card-claimed .64s cubic-bezier(.18,.8,.22,1) both; }
    .daily-reward-card.day-seven { grid-column: 1 / -1; aspect-ratio: 760 / 345; min-height: 0; flex-direction: row; align-items: flex-start; justify-content: flex-start; padding: 46px 14px 11px 43%; background-image: url("../assets/breakfast/daily-checkin/components-v1-web/card-reward-day7.webp"); text-align: left; }
    .daily-reward-day { position: absolute; z-index: 2; top: 10px; left: 17%; right: 17%; color: #8c3f13; font-size: 10px; font-weight: 1000; line-height: 1; letter-spacing: .035em; text-align: center; white-space: nowrap; }
    .daily-reward-card strong { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 0; font-size: clamp(13px,3.6vw,16px); line-height: 1.05; }
    .daily-reward-card small { position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 15px; margin: 0; color: #8f552d; font-size: 8.5px; font-weight: 1000; line-height: 1; text-align: center; }
    .daily-reward-icon { position: relative; z-index: 2; width: 38%; aspect-ratio: 1; margin-top: 24px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(106,48,4,.18)); }
    .daily-reward-card.day-seven .daily-reward-gift { position: absolute; z-index: 1; left: 4%; top: 14%; width: 38%; height: 76%; object-fit: contain; }
    .daily-day-seven-copy { position: static; width: 100%; display: grid; align-content: start; gap: 3px; }
    .daily-reward-card.day-seven .daily-reward-day { position: absolute; top: 13px; left: 35%; right: 35%; color: #fff3c4; font-size: 10px; line-height: 1; text-align: center; text-shadow: 0 1px 1px #a6410d; white-space: nowrap; }
    .daily-reward-card.day-seven strong { justify-content: flex-start; margin: 0; font-size: 16px; line-height: 1.15; }
    .daily-day-seven-kicker { color: #a05222; font-size: 9px; font-weight: 1000; line-height: 1; }
    .daily-reward-card.day-seven small { position: static; margin-top: 0; font-size: 9px; line-height: 1.2; text-align: left; }
    .daily-day-seven-rewards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; }
    .daily-day-seven-rewards span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 1000; line-height: 1; white-space: nowrap; }
    .daily-day-seven-rewards img { width: 23px; height: 23px; object-fit: contain; }
    .daily-claimed-stamp { position: absolute; z-index: 5; left: 50%; top: 47%; width: 77%; transform: translate(-50%,-50%) rotate(-7deg); filter: drop-shadow(0 2px 2px rgba(104,41,9,.22)); pointer-events: none; }
    .daily-reward-card.day-seven .daily-claimed-stamp { left: 70%; top: 52%; width: 43%; }
    .daily-claimed-stamp.stamp-in { animation: daily-stamp-in .43s cubic-bezier(.12,.78,.18,1.25) both; }
    .daily-checkin-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 2px 4px; padding: 6px 11px; border: 2px solid #e5a244; border-radius: 15px; background: rgba(255,249,222,.86); box-shadow: inset 0 1px white; font-size: 10px; font-weight: 900; }
    .daily-checkin-summary strong { color: #d45c18; font-size: 13px; }
    .daily-claim-button { position: relative; width: min(66%,225px); min-height: 0; aspect-ratio: 760 / 253; display: grid; place-items: center; margin: 3px auto 0; padding: 0 20px 3px; border: 0; color: #74300e; background: transparent url("../assets/breakfast/daily-checkin/components-v1-web/button-primary-blank.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 5px 4px rgba(100,38,4,.25)); font-size: 17px; line-height: 1; font-weight: 1000; text-shadow: 0 1px #ffe9a4; cursor: pointer; }
    .daily-claim-button:active:not(:disabled) { transform: translateY(3px) scale(.985); }
    .daily-claim-button:disabled { cursor: default; filter: grayscale(.3) opacity(.78) drop-shadow(0 3px 3px rgba(100,38,4,.16)); }
    .daily-checkin-note { margin: 2px 0 0; color: #9a653c; font-size: 8px; font-weight: 800; line-height: 1.2; text-align: center; }
    .daily-spark-layer { position: absolute; z-index: 7; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
    .daily-spark { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); opacity: 0; background: var(--color); clip-path: polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 94%,50% 72%,21% 94%,32% 56%,2% 35%,39% 34%); animation: daily-spark-pop var(--duration) var(--delay) ease-out forwards; }
    @keyframes daily-mascot-idle { from { background-position-x: 0; } to { background-position-x: 60%; } }
    @keyframes daily-mascot-celebrate { from { background-position-x: 0; } to { background-position-x: 100%; } }
    @keyframes daily-card-ready { from { filter: drop-shadow(0 3px 4px rgba(255,163,22,.22)); transform: translateY(0); } to { filter: drop-shadow(0 5px 9px rgba(255,151,20,.58)); transform: translateY(-2px); } }
    @keyframes daily-card-claimed { 0% { transform: scale(1); } 35% { transform: scale(1.065) rotate(-1deg); } 70% { transform: scale(.975) rotate(1deg); } 100% { transform: scale(1); } }
    @keyframes daily-stamp-in { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-16deg) scale(1.75); } 72% { opacity: 1; transform: translate(-50%,-50%) rotate(-5deg) scale(.92); } 100% { opacity: 1; transform: translate(-50%,-50%) rotate(-7deg) scale(1); } }
    @keyframes daily-spark-pop { 0% { opacity: 0; transform: translate(0,8px) scale(.2) rotate(0); } 24% { opacity: 1; transform: translate(var(--dx),var(--dy)) scale(1) rotate(90deg); } 100% { opacity: 0; transform: translate(var(--end-x),var(--end-y)) scale(.35) rotate(260deg); } }
    @media (max-width: 380px) {
      .daily-checkin-overlay { padding: 7px; }
      .daily-checkin-panel { padding-inline: 9px; border-radius: 25px; }
      .daily-checkin-week { gap: 3px; }
      .daily-checkin-hero { min-height: 78px; grid-template-columns: 1fr 65px; gap: 4px; }
      .daily-mascot-frame { width: 65px; height: 65px; }
      .daily-reward-card { gap: 3px; padding-inline: 6%; }
      .daily-reward-card.day-seven { min-height: 0; padding: 42px 9px 9px 42%; }
      .daily-claim-button { width: min(68%,215px); font-size: 16px; }
    }
    @media (max-height: 700px) {
      .daily-checkin-overlay { padding: 7px; }
      .daily-checkin-panel { width: min(90vw,340px); max-height: 94svh; padding: 8px 9px 9px; border-radius: 24px; }
      .daily-checkin-close { top: 8px; right: 8px; width: 32px; height: 32px; font-size: 16px; }
      .daily-checkin-hero { min-height: 62px; grid-template-columns: minmax(0,1fr) 58px; padding: 0 34px 2px 5px; }
      .daily-checkin-title { font-size: 24px; }
      .daily-checkin-subtitle { margin-top: 4px; font-size: 9px; line-height: 1.25; }
      .daily-mascot-frame { width: 58px; height: 58px; }
      .daily-checkin-week { gap: 3px; }
      .daily-reward-card { padding-top: 7px; }
      .daily-reward-icon { margin-top: 20px; }
      .daily-reward-card.day-seven { padding-top: 38px; padding-bottom: 8px; }
      .daily-checkin-summary { margin-block: 4px 3px; padding-block: 4px; }
      .daily-claim-button { width: min(61%,195px); font-size: 15px; }
      .daily-checkin-note { font-size: 7px; }
    }
    .home-avatar-figure { position: absolute; z-index: 6; left: .5%; bottom: -1%; width: 38%; height: 44%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 5px rgba(78,35,10,.32)); pointer-events: none; }
    .friend-list { display: grid; gap: 9px; }
    .friend-add-panel { display: grid; gap: 7px; margin-bottom: 10px; padding: 10px; border: 3px solid #e3a047; border-radius: 19px; background: linear-gradient(#fff9df,#ffe6ad); box-shadow: inset 0 2px white,0 4px 8px rgba(101,41,5,.14); }
    .friend-add-panel strong { color: #77340f; font-size: 13px; }
    .friend-id-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
    .friend-id-input { min-width: 0; height: 42px; padding: 7px 11px; border: 2px solid #dda04b; border-radius: 13px; outline: none; color: #71320f; background: #fffdf1; font: inherit; font-size: 16px; font-weight: 900; text-transform: uppercase; }
    .friend-id-input:focus { border-color: #e86d19; box-shadow: 0 0 0 3px rgba(255,171,43,.28); }
    .friend-add-panel small { color: #a26131; font-size: 8px; line-height: 1.4; }
    .friend-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 9px; padding: 4px; border: 2px solid #e3a047; border-radius: 16px; background: #fff1c7; }
    .friend-tab { position: relative; min-height: 37px; border: 0; border-radius: 11px; color: #84451c; background: transparent; font-size: 10px; font-weight: 1000; cursor: pointer; }
    .friend-tab.active { color: white; background: linear-gradient(#f7a33a,#df671e); box-shadow: inset 0 1px rgba(255,255,255,.5),0 2px 0 #9e4512; }
    .friend-request-count { position: absolute; top: -6px; right: -3px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff2c9; border-radius: 99px; color: white; background: #ee4d4d; font-size: 8px; }
    .friend-request-card { grid-template-columns: 58px minmax(0,1fr); }
    .friend-request-card .friend-card-actions { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
    .friend-request-card .friend-card-actions button { min-width: 0; }
    .friend-request-source { display: inline-flex !important; width: fit-content; padding: 2px 6px; border-radius: 99px; color: #854514 !important; background: #ffe09a; font-size: 7px !important; font-weight: 900; }
    .friend-heading-actions { display: flex; align-items: center; gap: 7px; }
    .friend-heading-actions .hub-button { min-height: 39px; padding: 6px 9px; border-width: 2px; border-radius: 13px; font-size: 9px; }
    .friend-card { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 2px solid #e4a248; border-radius: 18px; background: linear-gradient(#fff9df,#ffe8b7); box-shadow: 0 4px 0 #c7802e; }
    .friend-card-actions { display: grid; gap: 6px; }
    .friend-card-actions .friend-visit-button { min-width: 62px; }
    .friend-pk-button { min-height: 31px; padding: 5px 7px; border: 2px solid #608fc5; border-radius: 11px; color: white; background: linear-gradient(#70b7eb,#367dbb); box-shadow: 0 2px 0 #245f94; font-size: 9px; font-weight: 1000; cursor: pointer; }
    .friend-pk-button:disabled { opacity: .48; filter: grayscale(.55); cursor: default; box-shadow: none; }
    .presence-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border: 1px solid #fff; border-radius: 50%; background: #59b648; box-shadow: 0 0 0 1px #47883b; vertical-align: -1px; }
    .presence-dot.busy { background: #f3a22b; box-shadow: 0 0 0 1px #b76b1d; }
    .presence-dot.offline { background: #aaa; box-shadow: 0 0 0 1px #777; }
    .friend-avatar { display: block; overflow: hidden; width: 58px; height: 58px; border: 2px solid #e9a13b; border-radius: 50%; background: #ffd679; object-fit: cover; object-position: center 12%; }
    .friend-copy { min-width: 0; }
    .friend-copy strong,.friend-copy small,.friend-copy span { display: block; }
    .friend-copy small { margin-top: 3px; color: #9d6030; font-size: 9px; }
    .friend-copy span { margin-top: 2px; color: #b2713e; font-size: 8px; }
    .friend-visit-button { min-height: 36px; padding: 6px 10px; border: 2px solid #d97920; border-radius: 12px; color: white; background: linear-gradient(#ff9a30,#ef6718); box-shadow: 0 3px 0 #a9440d; font-weight: 1000; cursor: pointer; }
    .friend-shop-stage { position: relative; overflow: hidden; width: min(100%,500px); margin: 0 auto; border: 4px solid #df8d2d; border-radius: 26px; background: #f6d28e; box-shadow: inset 0 0 0 4px #fff5d2,0 7px 16px rgba(91,39,8,.24); }
    .friend-shop-caption { position: absolute; z-index: 90; left: 10px; right: 10px; bottom: 10px; padding: 9px 12px; border-radius: 15px; color: white; background: rgba(100,47,17,.82); backdrop-filter: blur(4px); font-size: 10px; pointer-events: none; }
    .friend-social-panel { position: absolute; z-index: 110; left: 12px; right: 12px; bottom: 52px; padding: 11px; border: 3px solid #e29332; border-radius: 20px; color: #71320f; background: rgba(255,248,218,.97); box-shadow: inset 0 2px white,0 8px 20px rgba(76,31,6,.3); }
    .friend-social-panel[hidden] { display: none; }
    .friend-social-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
    .friend-social-panel-head strong { font-size: 13px; }
    .friend-social-panel-head small { display: block; margin-top: 2px; color: #a46131; font-size: 8px; }
    .friend-social-close { width: 29px; height: 29px; padding: 0; border: 2px solid #d88a33; border-radius: 50%; color: #8c4216; background: #fff0bd; font-weight: 1000; cursor: pointer; }
    .friend-social-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .friend-social-option { min-height: 43px; padding: 7px 5px; border: 2px solid #e5a244; border-radius: 13px; color: #7a3814; background: linear-gradient(#fffdf0,#ffe2a4); box-shadow: 0 2px 0 #bf7228; font-size: 10px; font-weight: 1000; cursor: pointer; }
    .link-danger { border: 0; padding: 0; background: none; color: #b3402a; font-size: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
    .link-plain { border: 0; padding: 0; background: none; color: inherit; font-size: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
    .friend-social-option:active { translate: 0 2px; box-shadow: none; }
    .friend-speech-bubble { position: absolute; z-index: 8; left: 50%; bottom: 91%; width: 132px; min-height: 36px; padding: 7px 9px; border: 2px solid #d9892f; border-radius: 15px; color: #71320f; background: rgba(255,252,232,.98); box-shadow: 0 4px 9px rgba(82,35,9,.22); font-size: 9px; font-weight: 900; line-height: 1.3; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%,6px) scale(.88); transition: opacity .16s ease,transform .18s ease; }
    .friend-speech-bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 11px; height: 11px; border-right: 2px solid #d9892f; border-bottom: 2px solid #d9892f; background: #fffce8; transform: translateX(-50%) rotate(45deg); }
    .friend-speech-bubble.show { opacity: 1; transform: translate(-50%,0) scale(1); }
    .friend-host-walker { pointer-events: auto; cursor: pointer; }
    .friend-host-walker:focus-visible { outline: 3px solid #fff; border-radius: 45%; filter: drop-shadow(0 0 7px #ff9d2f); }
    .friend-host-walker .friend-speech-bubble { left: 36%; }
    .friend-host-chat-hint { position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 4px); min-width: 62px; padding: 4px 7px; border: 2px solid #fff5cf; border-radius: 99px; color: white; background: linear-gradient(#f29b32,#dc611c); box-shadow: 0 2px 0 #a14312,0 4px 9px rgba(80,34,8,.24); font-size: 8px; font-weight: 1000; line-height: 1; text-align: center; white-space: nowrap; pointer-events: none; transform: translateX(-50%); animation: friend-chat-hint 1.35s ease-in-out infinite; }
    .friend-host-walker:has(.friend-speech-bubble.show) .friend-host-chat-hint { opacity: 0; }
    @keyframes friend-chat-hint { 0%,100% { translate: 0 0; } 50% { translate: 0 -3px; } }
    .friend-talk-button { position: relative; min-height: 39px; padding: 6px 11px 6px 25px; border: 2px solid #4f9d65; border-radius: 13px; color: white; background: linear-gradient(#79c879,#3b9b5c); box-shadow: inset 0 1px rgba(255,255,255,.45),0 3px 0 #277443; font-size: 9px; font-weight: 1000; cursor: pointer; }
    .friend-talk-button::before { content: ""; position: absolute; left: 8px; top: 50%; width: 10px; height: 8px; border: 2px solid white; border-radius: 5px; transform: translateY(-58%); }
    .friend-talk-button::after { content: ""; position: absolute; left: 11px; top: calc(50% + 3px); width: 4px; height: 4px; border-left: 2px solid white; border-bottom: 2px solid white; transform: skewY(-32deg); }
    .friend-talk-button:active { translate: 0 2px; box-shadow: inset 0 1px rgba(255,255,255,.45),0 1px 0 #277443; }
    .friend-talk-button[hidden] { display: none; }
    .fixed-message-board { position: absolute; z-index: 86; left: 33%; top: 12%; width: 17%; aspect-ratio: 1.72; padding: 6px 5px 4px; border: 3px solid #a7541d; border-radius: 8px; color: #fff8cf; background: linear-gradient(145deg,#426a43,#234c32); box-shadow: inset 0 0 0 2px #d99649,0 5px 7px rgba(70,30,8,.28); transform: skewY(-19.5deg); transform-origin: center; cursor: pointer; }
    .fixed-message-board::before,.fixed-message-board::after { content: ""; position: absolute; top: -9px; width: 5px; height: 13px; border-radius: 4px; background: #8d481d; box-shadow: inset 0 2px #d69952; }
    .fixed-message-board::before { left: 21%; }
    .fixed-message-board::after { right: 21%; }
    .fixed-message-board strong { display: block; font-size: clamp(7px,1.65vw,10px); line-height: 1.1; text-shadow: 0 1px #173420; }
    .fixed-message-board small { display: block; margin-top: 3px; color: #ffe4a0; font-size: clamp(5px,1.1vw,7px); line-height: 1.1; }
    .fixed-message-board .board-paper { position: absolute; right: 7%; bottom: 8%; width: 28%; height: 36%; border-radius: 2px; background: #fff2a7; box-shadow: 0 1px 2px rgba(48,25,5,.25); transform: rotate(6deg); }
    .fixed-message-board .board-paper::before { content: ""; position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #ef6e3f; transform: translateX(-50%); }
    .message-unread-badge { position: absolute; z-index: 3; top: -11px; right: -10px; display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 6px; border: 2px solid #fff4ce; border-radius: 999px; color: white; background: linear-gradient(#ff6871,#db2e42); box-shadow: 0 2px 0 #9e2633; font-size: 10px; font-weight: 1000; transform: skewY(19.5deg); }
    .fixed-message-board.board-attention { animation: board-attention 1.3s ease-in-out infinite; }
    .quick-card { position: relative; }
    .quick-card .message-unread-badge { top: 4px; right: 5px; transform: none; }
    @keyframes board-attention { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.14) drop-shadow(0 0 5px #ffd36a); } }

    .message-board-overlay { position: fixed; z-index: 125; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(68,27,5,.7); backdrop-filter: blur(4px); }
    .message-board-panel { position: relative; width: min(100%,440px); max-height: min(78vh,650px); overflow: auto; padding: 17px; border: 4px solid #dc8e31; border-radius: 27px; color: #71320f; background: linear-gradient(#fffbed,#ffe4a9); box-shadow: inset 0 3px white,0 16px 38px rgba(49,17,2,.45); }
    .message-board-panel h2 { margin: 0 46px 2px 0; font-size: 23px; }
    .message-board-panel > p { margin: 0 46px 13px 0; color: #9c6033; font-size: 10px; }
    .message-board-close { position: absolute; top: 11px; right: 11px; width: 38px; height: 38px; padding: 0; border: 2px solid #d27a29; border-radius: 50%; color: #7b3513; background: #fff0be; box-shadow: 0 3px 0 #ac551a; font-size: 18px; font-weight: 1000; cursor: pointer; }
    .message-list { display: grid; gap: 9px; }
    .message-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 2px solid #e3a14b; border-radius: 17px; background: rgba(255,251,229,.9); box-shadow: 0 3px 0 #c47a2b; }
    .message-card.unread { border-color: #ed7823; background: #fff1c1; }
    .message-card img { width: 48px; height: 48px; border: 2px solid #df9134; border-radius: 50%; background: #ffd77e; object-fit: cover; object-position: center 12%; }
    .message-copy strong,.message-copy small,.message-copy span { display: block; }
    .message-copy span { margin-top: 3px; font-size: 10px; line-height: 1.3; }
    .message-copy small { margin-top: 3px; color: #a36b3c; font-size: 8px; }
    .message-visit-button { min-height: 34px; padding: 5px 8px; border: 2px solid #d57420; border-radius: 11px; color: white; background: linear-gradient(#ff9a31,#eb6619); box-shadow: 0 2px 0 #a7430f; font-size: 9px; font-weight: 1000; cursor: pointer; }
    .message-empty { padding: 26px 15px; border: 2px dashed #d99b4c; border-radius: 17px; color: #9b673c; background: rgba(255,249,222,.72); text-align: center; font-size: 11px; }
    .manager-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
    .manager-card { position: relative; overflow: hidden; min-height: 225px; padding: 7px; border: 3px solid #e1a04a; border-radius: 20px; color: #71300f; background: linear-gradient(#fff9dd,#ffdfa0); cursor: pointer; }
    .manager-card.selected { border-color: #ed6e17; box-shadow: 0 0 0 4px #ffd75a; }
    .manager-card img { width: 100%; height: 185px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 4px 3px rgba(88,39,11,.20)); }
    .manager-card strong { display: block; text-align: center; font-size: 11px; }
    .shop-tabs,.category-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 10px; }
    .category-tabs { grid-template-columns: repeat(4,1fr); }
    .mini-tab { min-height: 38px; border: 2px solid #e8a74a; border-radius: 14px; color: #8d4a20; background: #fff0c5; font-size: 12px; font-weight: 1000; cursor: pointer; }
    .mini-tab.active { color: white; border-color: #d76816; background: linear-gradient(#ffad31,#ec6d1e); }
    .card-list { display: grid; gap: 9px; }
    .shop-card,.business-card,.pk-card,.collection-card { border: 3px solid #e9a84a; border-radius: 22px; background: linear-gradient(#fffaf0,#ffe9bd); box-shadow: inset 0 2px white,0 5px 10px rgba(101,41,5,.16); }
    .shop-card { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; padding: 9px; }
    .shop-card img { width: 72px; height: 72px; object-fit: contain; }
    .shop-card .resource-inline img { width: 20px; height: 20px; }
    .shop-card h3,.business-card h3,.pk-card h3 { margin: 0; color: #78340e; font-size: 16px; }
    .shop-card p,.business-card p,.pk-card p { margin: 3px 0; color: #99613a; font-size: 10px; line-height: 1.35; }
    .shop-card.premium-decor-card { border-color: #65bce8; background: linear-gradient(145deg,#fffdf2,#e6f7ff 58%,#fff0bf); box-shadow: inset 0 2px white,0 5px 12px rgba(31,119,170,.2),0 0 0 1px rgba(255,214,82,.5); }
    .premium-label { display: inline-flex; align-items: center; gap: 3px; width: fit-content; margin-bottom: 2px; padding: 2px 7px; border: 1px solid #58afe0; border-radius: 99px; color: #176998; background: #e9f8ff; font-size: 8px; font-weight: 1000; }
    .premium-label img { width: 13px !important; height: 13px !important; object-fit: contain; }
    .price-button { min-width: 72px; min-height: 38px; border: 2px solid #ce651b; border-radius: 13px; color: #7c340d; background: linear-gradient(#ffd55c,#f1a31f); box-shadow: inset 0 1px #fff0a5,0 3px 0 #ad4c12; font-size: 11px; font-weight: 1000; cursor: pointer; }
    .price-button:disabled { opacity: .55; filter: grayscale(.5); cursor: default; }
    .shop-action-stack { display: grid; gap: 7px; min-width: 78px; }
    .shop-action-stack .price-button { width: 100%; }
    .business-card,.pk-card { padding: 16px; }
    .business-prep-screen { display: flex; flex-direction: column; justify-content: space-between; gap: 9px; padding: 10px 16px 14px; background-color: #f7c566; background-image: radial-gradient(circle at 50% 10%,rgba(255,253,225,.96),transparent 43%),repeating-linear-gradient(0deg,rgba(156,82,22,.025) 0 1px,transparent 1px 7px),linear-gradient(#fff3cc,#f7c367); }
    .business-title-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 5px 0; }
    .business-title-copy { position: relative; flex: 1; min-width: 0; text-align: left; }
    .business-page-title { margin: 0; color: #84390f; font-size: 23px; line-height: 1.05; text-shadow: 0 2px #fff3c5; }
    .business-page-subtitle { margin: 5px 0 0; overflow: hidden; color: #a46531; font-size: 10px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
    .business-title-art { display: none; }
    .business-mode-switch { flex: 0 0 auto; display: flex; gap: 3px; padding: 3px; border: 2px solid #d98022; border-radius: 15px; background: #ffe0a0; box-shadow: inset 0 2px white,0 3px 0 #ad5315; }
    .business-mode-option { min-width: 54px; padding: 6px 8px; border: 0; border-radius: 10px; color: #9a5a28; background: transparent; font: inherit; font-size: 9px; font-weight: 1000; white-space: nowrap; cursor: pointer; }
    .business-mode-option.active { color: white; background: linear-gradient(#ff9b2f,#e86518); box-shadow: inset 0 1px rgba(255,255,255,.65),0 2px 0 #a94b12; }
    .business-mode-card { overflow: hidden; padding: 7px 7px 0; border: 3px solid #e59b32; border-radius: 24px; background: linear-gradient(#fffdf1,#ffe7ad); box-shadow: inset 0 0 0 2px white,0 5px 11px rgba(105,44,5,.2); }
    .business-mode-art { position: relative; aspect-ratio: 1.5 / 1; min-height: 0; overflow: hidden; border: 2px solid #d78a25; border-radius: 17px; background: #f5b630 url("../assets/breakfast/business-prep-v5/business-opening-prep-scene-v2.webp") center / cover no-repeat; box-shadow: inset 0 0 0 2px rgba(255,255,255,.72); transition: aspect-ratio .24s ease; }
    .business-mode-art.campaign-map-active { aspect-ratio: 1 / 1; background-image: url("../assets/breakfast/campaign-map-v3/breakfast-street-clear-center-square-v1.webp"); background-position: center; }
    /* 自由營業本週榜（取代同一格的裝飾插圖）：整塊會跟著彈性版面縮，不佔滿就不會把開始鍵擠出畫面 */
    /* 卡片不被壓縮：頒獎台是固定比例的，卡片一縮「查看完整榜單」就會被擠出卡片邊框外 */
    .endless-board-card { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 9px 9px; border: 2px solid #d78a25; border-radius: 17px; background: linear-gradient(#fff6d8,#ffe3a6); box-shadow: inset 0 0 0 2px rgba(255,255,255,.72); }
    .endless-board-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
    .endless-board-head strong { color: #7c3a0d; font-size: 14px; font-weight: 1000; }
    .endless-board-clock { padding: 2px 9px; border-radius: 999px; color: #8b4a12; font-size: 10px; font-weight: 900; background: #ffeec0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
    /* 頒獎台保持原比例不被壓扁（壓扁會切掉皇冠與人物的頭）；空間由下面的道具列與開始鍵讓出來 */
    .endless-board-podium { flex: 0 0 auto; overflow: hidden; border-radius: 14px; }
    /* 頒獎台整景是一張圖；名字與分數疊在圖上三塊空名牌的位置（百分比對原圖 872×484 量的） */
    /* 頒獎台（創意部交付包 V1）：背景不含台座，台座／頭像／頭像框／皇冠分層疊，名字與分數畫進台座內建名牌。
       版位百分比照 RUNTIME_LAYOUT_SPEC.md：台座中心 22.6%／49.9%／77.2%，台座 340×300、畫布 1056×570。 */
    .endless-podium-scene { position: relative; width: 100%; aspect-ratio: 1056 / 570; background: #f2c377 url("../assets/breakfast/endless-board-v1/board-scene.webp") center / cover no-repeat; }
    .endless-podium-slot { position: absolute; bottom: 0; width: 32.2%; aspect-ratio: 340 / 300; }
    .endless-podium-slot.place-1 { left: 33.8%; z-index: 2; }
    .endless-podium-slot.place-2 { left: 6.5%; }
    .endless-podium-slot.place-3 { left: 61.1%; }
    .endless-podium-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    .endless-podium-avatar { position: absolute; left: 50%; width: 41%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; transform: translateX(-50%); }
    .endless-podium-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
    .endless-podium-frame { position: absolute; left: 50%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); }
    /* 金台座比較高，整組頭像要跟著往上 */
    .place-1 .endless-podium-frame { bottom: 62%; }
    .place-1 .endless-podium-avatar { bottom: 74%; }
    .place-2 .endless-podium-frame { bottom: 50%; }
    .place-2 .endless-podium-avatar { bottom: 62%; }
    .place-3 .endless-podium-frame { bottom: 52%; }
    .place-3 .endless-podium-avatar { bottom: 64%; }
    .endless-podium-crown { position: absolute; left: 50%; bottom: 124%; width: 26%; transform: translateX(-50%); }
    .endless-podium-plate { position: absolute; left: 12%; right: 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; overflow: hidden; }
    .place-1 .endless-podium-plate { top: 55.7%; height: 30.3%; }
    .place-2 .endless-podium-plate { top: 51.3%; height: 34%; }
    .place-3 .endless-podium-plate { top: 49%; height: 33.3%; }
    .endless-podium-name { max-width: 100%; overflow: hidden; color: #7c3a0d; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
    .endless-podium-score { color: #8a3f08; font-size: 13px; font-weight: 1000; }
    .place-1 .endless-podium-score { font-size: 15px; }
    .endless-board-mine { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 999px; background: #fffaea; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }
    .endless-board-mine-label { color: #8b4a12; font-size: 10px; font-weight: 900; }
    .endless-board-mine-rank { color: #b4510d; font-size: 16px; font-weight: 1000; }
    .endless-board-mine-stat { color: #8b4a12; font-size: 10px; font-weight: 800; }
    .endless-board-mine-stat b { color: #7c3a0d; font-size: 12px; font-weight: 1000; }
    .endless-board-empty { margin: 0; padding: 10px 6px; color: #96612f; font-size: 11px; font-weight: 800; text-align: center; }
    .endless-board-open { align-self: stretch; min-height: 32px; padding: 6px 12px; border: 0; border-radius: 999px; color: #7c3a0d; font-size: 12px; font-weight: 1000; background: linear-gradient(#ffe08a,#f8b53c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 3px 6px rgba(120,60,10,.2); cursor: pointer; }

    /* 完整榜單頁 */
    .endless-rank-topbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
    .endless-rank-topbar h2 { margin: 0; color: #7c3a0d; font-size: 17px; font-weight: 1000; text-align: center; }
    .endless-rank-back { min-height: 34px; padding: 4px 12px; font-size: 12px; }
    .endless-rank-rewards { padding: 6px 10px; border-radius: 999px; color: #8b4a12; font-size: 11px; font-weight: 900; background: #ffeec0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
    .endless-rank-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-bottom: 8px; padding: 4px; border-radius: 999px; background: #ffeec8; }
    .endless-rank-tab { min-height: 34px; border: 0; border-radius: 999px; color: #8b4a12; font-size: 13px; font-weight: 1000; background: transparent; cursor: pointer; }
    .endless-rank-tab.active { color: #fffbe9; background: linear-gradient(#f8a93a,#ef8410); box-shadow: 0 2px 5px rgba(120,60,10,.25); }
    .endless-rank-settle { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; padding: 7px 10px; border-radius: 16px; background: #fffaea; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }
    .endless-rank-settle strong { color: #7c3a0d; font-size: 13px; font-weight: 1000; }
    .endless-rank-settle small { color: #96612f; font-size: 10px; font-weight: 800; }
    .endless-rank-list { display: flex; flex-direction: column; gap: 5px; }
    .endless-rank-head,
    .endless-rank-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 76px 68px; gap: 6px; align-items: center; }
    .endless-rank-head { padding: 0 8px 2px; color: #96612f; font-size: 10px; font-weight: 900; text-align: center; }
    .endless-rank-head span:nth-child(2) { text-align: left; }
    .endless-rank-row { padding: 6px 8px; border-radius: 14px; background: #fffdf3; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 2px 4px rgba(120,60,10,.1); }
    .endless-rank-no { color: #b4510d; font-size: 15px; font-weight: 1000; text-align: center; }
    .endless-rank-who { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
    .endless-rank-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #ffeec8; }
    .endless-rank-who strong { overflow: hidden; color: #7c3a0d; font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
    .endless-rank-score { color: #b4510d; font-size: 14px; font-weight: 1000; text-align: center; }
    .endless-rank-stage { color: #8b4a12; font-size: 11px; font-weight: 800; text-align: center; }
    .endless-rank-mine { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 16px; background: linear-gradient(#fff6d8,#ffe3a6); box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 -3px 8px rgba(120,60,10,.14); }
    .endless-rank-mine .endless-rank-who { cursor: default; }
    .campaign-inline-map { position: absolute; inset: 0; isolation: isolate; }
    .campaign-inline-route { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    .campaign-inline-route .shadow { fill: none; stroke: rgba(166,78,25,.45); stroke-width: 38; stroke-linecap: round; stroke-linejoin: round; }
    .campaign-inline-route .road { fill: none; stroke: #fff2c2; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
    .campaign-inline-route .dash { fill: none; stroke: #ee9c34; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 14; }
    .campaign-inline-toolbar { position: relative; z-index: 8; display: grid; grid-template-columns: 26px minmax(0,1fr) 26px auto; align-items: center; gap: 4px; width: 100%; margin-bottom: 6px; padding: 4px; border: 2px solid #e29935; border-radius: 14px; color: #75320e; background: linear-gradient(#fffdf0,#ffe7ae); box-shadow: inset 0 1px white,0 2px 0 #bd681d; }
    .campaign-inline-toolbar button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 1px solid #d77a20; border-radius: 9px; color: white; background: linear-gradient(#ffac39,#e56d19); box-shadow: inset 0 1px rgba(255,255,255,.65),0 2px 0 #ad4d13; font: inherit; font-size: 15px; font-weight: 1000; cursor: pointer; }
    .campaign-inline-toolbar button:disabled { opacity: .35; cursor: default; }
    .campaign-inline-chapter { min-width: 0; text-align: left; }
    .campaign-inline-chapter strong,.campaign-inline-chapter small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .campaign-inline-chapter strong { font-size: 9px; }
    .campaign-inline-chapter small { margin-top: 1px; color: #a06432; font-size: 6px; font-weight: 900; }
    .campaign-inline-stars { display: inline-flex; align-items: center; gap: 2px; padding: 3px 5px; border-radius: 9px; color: #8a3d11; background: #ffe8a5; font-size: 8px; font-weight: 1000; white-space: nowrap; }
    .campaign-inline-stars::before { content: "★"; color: #ef9018; font-size: 11px; }
    .campaign-map-active .campaign-node { width: 10%; height: auto; aspect-ratio: 1; border-width: 2px; font-size: clamp(11px,3.2vw,15px); box-shadow: inset 0 1px rgba(255,255,255,.7),0 3px 0 #ad4811,0 4px 7px rgba(79,28,2,.25); }
    .campaign-map-active .campaign-node.current { width: 11.3%; height: auto; border-width: 3px; }
    .campaign-map-active .campaign-node.chapter-finale { width: 11.3%; height: auto; border-radius: 14px; font-size: clamp(12px,3.4vw,16px); }
    .campaign-map-active .campaign-node.current::after { top: -14px; padding: 1px 5px; font-size: 6px; }
    .campaign-map-active .campaign-node-stars { bottom: -21px; display: flex; align-items: flex-start; gap: 2px; padding: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 2px 1px rgba(106,41,4,.24)); }
    .campaign-map-active .campaign-node-stars i { width: clamp(12px,3.4vw,16px); height: clamp(12px,3.4vw,16px); display: grid; place-items: center; border: 1.5px solid #fff8e4; border-radius: 50%; color: transparent; background: linear-gradient(#fff3cd,#e5cda0); box-shadow: 0 1px 0 #a9682b; opacity: .82; }
    .campaign-map-active .campaign-node-stars i::before { content: ""; width: 63%; height: 63%; background: #c5a77a; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%); }
    .campaign-map-active .campaign-node-stars i:nth-child(2) { margin-top: 2px; transform: scale(1.08); }
    .campaign-map-active .campaign-node-stars i.lit { border-color: #fff8b7; background: linear-gradient(#fff8b6,#ffc938); box-shadow: 0 1px 0 #a84911; opacity: 1; }
    .campaign-map-active .campaign-node-stars i.lit::before { background: linear-gradient(#fff678 0 18%,#ffb71c 55%,#ed7411 100%); filter: drop-shadow(0 1px 0 #aa470e); }
    .campaign-layout .campaign-picker,.campaign-layout .business-cta-panel { display: none; }
    .business-prep-screen.campaign-layout { gap: 5px; padding-top: 5px; }
    .campaign-layout .business-title-row { min-height: 40px; }
    .campaign-layout .business-page-title { font-size: 20px; }
    .campaign-layout .business-page-subtitle { font-size: 0; }
    .campaign-layout .business-page-subtitle::after { content: "點選地圖上的關卡即可直接開始"; font-size: 10px; }
    .business-mode-top { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; justify-content: flex-end; }
    .mode-tag { display: none; }
    .best-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border: 2px solid white; border-radius: 99px; color: #7a350f; background: rgba(255,244,203,.96); box-shadow: 0 3px 8px rgba(73,25,2,.2); font-size: 10px; font-weight: 1000; }
    .best-chip::before { content: "★"; color: #f08a16; font-size: 13px; }
    .business-mode-copy { display: none; }
    .mode-kicker { display: none; }
    .business-mode-copy h3 { margin: 0; color: #fff9d8; font-size: 21px; line-height: 1.05; }
    .business-mode-copy p { margin: 3px 0 0; color: #ffe3a1; font-size: 9px; font-weight: 900; }
    .business-mode-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 7px; color: #74320f; }
    .business-mode-summary strong,.business-mode-summary small { display: block; }
    .business-mode-summary strong { font-size: 14px; }
    .business-mode-summary small { margin-top: 2px; color: #a36632; font-size: 8px; font-weight: 800; }
    .campaign-latest-button { flex: 0 0 auto; min-width: 88px; min-height: 34px; padding: 5px 9px; border: 2px solid #cf6518; border-radius: 12px; color: white; background: linear-gradient(#ffa235,#ee6b18); box-shadow: inset 0 1px rgba(255,255,255,.65),0 3px 0 #a84912; font: inherit; font-size: 10px; font-weight: 1000; white-space: nowrap; cursor: pointer; }
    .campaign-latest-button:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(255,255,255,.65),0 1px 0 #a84912; }
    .campaign-picker { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 2px solid white; border-radius: 99px; background: rgba(255,244,203,.96); box-shadow: 0 3px 8px rgba(73,25,2,.2); }
    .campaign-picker button { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: white; background: linear-gradient(#f8a22c,#d86a18); font: inherit; font-size: 13px; font-weight: 1000; cursor: pointer; }
    .campaign-picker button:disabled { opacity: .32; cursor: default; }
    .campaign-picker strong { min-width: 46px; color: #7a350f; font-size: 9px; text-align: center; white-space: nowrap; }
    .business-rule-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 0 -7px; border-top: 1px solid #e5a244; background: #e7a344; }
    .business-rule-row div { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; border-right: 1px solid #e0a03d; color: #7b3b18; background: linear-gradient(#fffdf1,#ffe4a6); text-align: left; }
    .business-rule-row div:last-child { border-right: 0; }
    .business-rule-row span { display: grid; place-items: center; width: 23px; height: 23px; margin: 0; border: 1px solid #d98b29; border-radius: 50%; color: #c76718; background: #fff3c7; box-shadow: inset 0 1px white; font-size: 13px; line-height: 1; }
    .business-rule-row strong { font-size: 8px; line-height: 1.15; }
    .loadout-panel { padding: 8px 10px 10px; border: 3px solid #e39b33; border-radius: 21px; background: linear-gradient(#fff8df,#ffe0a0); box-shadow: inset 0 2px white,0 4px 8px rgba(105,44,5,.15); }
    .loadout-heading { min-height: 24px; display: flex; justify-content: flex-start; align-items: center; margin: 0 2px 5px; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .loadout-heading::before,.loadout-heading::after { display: none; }
    .loadout-heading strong { font-size: 12px; letter-spacing: .04em; }
    .loadout-heading small { display: none; }
    .loadout { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 0; }
    .loadout-item { position: relative; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2px 4px 7px; border: 2px solid #e29a37; border-radius: 17px; background: radial-gradient(circle at 50% 28%,#fffef5 0 38%,#ffefca 78%,#ffdf9b 100%); box-shadow: inset 0 1px white,0 3px 0 #bc681f; text-align: center; font-size: 10px; font-weight: 1000; }
    .loadout-item img { display: block; width: 54px; height: 54px; margin: -1px auto -5px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(101,43,6,.18)); }
    /* 營業頁（關卡與自由都一樣）：道具列是資訊不是主角，收小一點把高度讓給主圖與「開始營業」 */
    .business-prep-screen .loadout-panel { padding: 6px 9px 7px; }
    .business-prep-screen .loadout-heading { min-height: 18px; margin-bottom: 2px; }
    .business-prep-screen .loadout { gap: 6px; }
    .business-prep-screen .loadout-item { min-height: 62px; padding: 2px 3px 5px; font-size: 9px; }
    .business-prep-screen .loadout-item img { width: 42px; height: 42px; margin: -1px auto -3px; }
    /* 自由營業那頁多了頒獎台：外層卡片也不壓縮（壓縮會把最下面那排規則切掉一半），
       需要的高度由規則列、道具列與開始鍵一起收小讓出來。 */
    /* 螢幕真的太矮時寧可讓它捲，也不要把內容切掉：自由營業這頁改成依內容長高，
       高度夠就一屏放得下（實測 393×800 不用捲），不夠才由 .hub-content 捲動。 */
    .business-prep-screen:not(.campaign-layout) { height: auto; min-height: 100%; overflow: visible; }
    .business-prep-screen:not(.campaign-layout) .business-mode-card { flex: 0 0 auto; }
    .business-prep-screen:not(.campaign-layout) .business-mode-summary { padding: 6px 8px 5px; }
    .business-prep-screen:not(.campaign-layout) .business-rule-row div { min-height: 36px; padding: 4px; }
    .business-prep-screen:not(.campaign-layout) .business-rule-row span { width: 20px; height: 20px; font-size: 11px; }
    .business-prep-screen:not(.campaign-layout) .loadout-item { min-height: 46px; }
    .business-prep-screen:not(.campaign-layout) .loadout-item img { width: 31px; height: 31px; }
    .business-prep-screen:not(.campaign-layout) .loadout-panel { padding: 4px 8px 5px; }
    .business-prep-screen:not(.campaign-layout) .loadout-heading { min-height: 15px; }
    .business-prep-screen:not(.campaign-layout) .business-cta-panel { width: 70%; margin: 2px auto 6px; }
    .business-prep-screen .loadout-count { min-width: 22px; height: 19px; font-size: 9px; }
    .loadout-count { position: absolute; z-index: 2; top: 4px; right: 4px; bottom: auto; min-width: 25px; height: 22px; display: grid; place-items: center; padding: 0 4px; border: 2px solid white; border-radius: 99px; color: white; background: linear-gradient(#ff6e38,#d94120); box-shadow: 0 2px 0 #a52d20; font-size: 10px; }
    .business-cta-panel { display: block; width: 82%; margin: 3px auto 9px; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .business-cta-copy { display: none; }
    .business-start-button { display: block; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 28px; color: transparent; background: transparent; box-shadow: none; font-size: 0; line-height: 0; filter: drop-shadow(0 7px 6px rgba(89,31,2,.24)); }
    .business-start-button img { display: block; width: 100%; height: auto; pointer-events: none; }
    .business-start-button:active { transform: translateY(3px) scale(.985); box-shadow: none; }
    @media (max-height: 760px) {
      .business-prep-screen { gap: 6px; padding-top: 5px; }
      .business-title-row { min-height: 50px; padding-top: 0; }
      .business-page-title { font-size: 20px; }
      .business-mode-option { min-width: 48px; padding: 5px 6px; font-size: 8px; }
      .business-prep-screen { justify-content: flex-start; }
      .business-mode-art { aspect-ratio: 1.72 / 1; }
      .business-mode-art.campaign-map-active { aspect-ratio: 1 / 1; }
      .business-mode-summary { padding-block: 6px; }
      .business-rule-row div { min-height: 38px; padding: 4px; }
      .business-rule-row span { width: 21px; height: 21px; font-size: 12px; }
      .loadout-panel { padding: 6px 8px 8px; }
      .loadout-heading { min-height: 21px; margin-bottom: 3px; }
      .loadout-item { min-height: 70px; padding: 2px; font-size: 9px; }
      .loadout-item img { width: 47px; height: 47px; }
      .loadout-count { min-width: 24px; height: 20px; font-size: 9px; }
      .business-cta-panel { width: 74%; margin-bottom: 5px; }
      .business-start-button { border-radius: 22px; }
    }
    .campaign-map-screen { min-height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 12px; overflow: hidden; background: radial-gradient(circle at 50% 0,rgba(255,253,226,.98),transparent 36%),linear-gradient(#fff1c5,#f6c064); }
    .campaign-map-heading { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 52px; }
    .campaign-map-back,.campaign-chapter-arrow { display: grid; place-items: center; border: 2px solid #db8427; color: #8a3d13; background: linear-gradient(#fff9df,#ffd88a); box-shadow: inset 0 1px white,0 3px 0 #b75b17; font: inherit; font-weight: 1000; cursor: pointer; }
    .campaign-map-back { width: 40px; height: 40px; padding: 0; border-radius: 14px; font-size: 19px; }
    .campaign-map-title { min-width: 0; text-align: left; }
    .campaign-map-title h2 { overflow: hidden; margin: 0; color: #81370f; font-size: 20px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
    .campaign-map-title p { overflow: hidden; margin: 4px 0 0; color: #a15f2d; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
    .campaign-total-stars { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 9px; border: 2px solid white; border-radius: 99px; color: #7c370e; background: linear-gradient(#fff9d8,#ffd880); box-shadow: 0 3px 7px rgba(91,37,4,.18); font-size: 11px; font-weight: 1000; white-space: nowrap; }
    .campaign-total-stars i,.campaign-node-stars i,.campaign-result-stars i { color: #d1a35f; font-style: normal; text-shadow: 0 1px white; }
    .campaign-total-stars i::before,.campaign-node-stars i::before,.campaign-result-stars i::before { content: "★"; }
    .campaign-total-stars i { color: #f29b1e; font-size: 17px; }
    .campaign-chapter-bar { display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; align-items: center; gap: 7px; }
    .campaign-chapter-arrow { width: 34px; height: 34px; padding: 0; border-radius: 12px; font-size: 19px; }
    .campaign-chapter-arrow:disabled { opacity: .35; cursor: default; }
    .campaign-chapter-copy { min-width: 0; padding: 7px 10px; border: 2px solid #e09a3b; border-radius: 15px; color: #7d370f; background: rgba(255,249,220,.9); box-shadow: inset 0 1px white; text-align: center; }
    .campaign-chapter-copy strong,.campaign-chapter-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .campaign-chapter-copy strong { font-size: 13px; }
    .campaign-chapter-copy small { margin-top: 2px; color: #a46a37; font-size: 8px; }
    .campaign-map-scene { position: relative; flex: 1 1 auto; min-height: 440px; overflow: hidden; border: 3px solid #e39a34; border-radius: 24px; background-image: linear-gradient(rgba(255,248,216,.18),rgba(248,192,98,.24)),url("../assets/breakfast/home-v5/storefront-open-morning-v2.webp"); background-position: center 58%; background-size: cover; box-shadow: inset 0 0 0 3px rgba(255,255,255,.75),0 5px 11px rgba(101,42,5,.18); isolation: isolate; }
    .campaign-map-scene::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(255,250,220,.2),rgba(255,224,154,.34) 52%,rgba(116,57,16,.16)); backdrop-filter: saturate(.9) blur(.6px); }
    .campaign-path-segment { position: absolute; z-index: 1; height: 9px; border: 2px solid rgba(173,92,28,.72); border-radius: 99px; background: repeating-linear-gradient(90deg,#fff1c8 0 13px,#e8b66d 13px 19px); box-shadow: 0 2px 0 rgba(113,50,12,.25); transform-origin: left center; }
    .campaign-node { position: absolute; z-index: 3; width: 49px; height: 49px; display: grid; place-items: center; padding: 0; border: 3px solid #fff7d1; border-radius: 50%; color: white; background: linear-gradient(#ffad2f,#ed721c); box-shadow: inset 0 2px rgba(255,255,255,.62),0 4px 0 #ad4811,0 6px 9px rgba(79,28,2,.28); font: inherit; font-size: 16px; font-weight: 1000; cursor: pointer; transform: translate(-50%,-50%); }
    .campaign-node.completed { border-color: #fff3a9; background: linear-gradient(#ffc943,#ed8d1e); }
    .campaign-node.current { width: 55px; height: 55px; border-width: 4px; animation: campaign-current-pulse 1.35s ease-in-out infinite alternate; }
    .campaign-node.locked { color: #8f7c65; border-color: #ece3cf; background: linear-gradient(#d9d2c3,#aaa18f); box-shadow: inset 0 2px rgba(255,255,255,.5),0 4px 0 #776e61,0 5px 8px rgba(56,38,22,.22); cursor: default; }
    .campaign-node.chapter-finale { width: 58px; height: 58px; border-radius: 20px; font-size: 17px; }
    .campaign-node.current::after { content: "目前"; position: absolute; top: -17px; left: 50%; padding: 2px 7px; border-radius: 99px; color: #85380f; background: #fff6cf; box-shadow: 0 2px 4px rgba(74,27,3,.2); font-size: 7px; white-space: nowrap; transform: translateX(-50%); }
    .campaign-node.locked::before { content: ""; width: 15px; height: 12px; border: 3px solid #7b7165; border-radius: 4px; background: transparent; box-shadow: inset 0 -8px #7b7165; }
    .campaign-node.locked::after { content: ""; position: absolute; top: 9px; width: 10px; height: 9px; border: 3px solid #7b7165; border-bottom: 0; border-radius: 9px 9px 0 0; }
    .campaign-node.locked span { display: none; }
    .campaign-node-stars { position: absolute; left: 50%; bottom: -16px; display: flex; gap: 1px; padding: 1px 4px; border-radius: 99px; background: rgba(255,250,220,.88); box-shadow: 0 1px 3px rgba(71,27,2,.18); transform: translateX(-50%); }
    .campaign-node-stars i { font-size: 10px; line-height: 1; }
    .campaign-node-stars i.lit { color: #f39a16; filter: drop-shadow(0 1px #a84a0b); }
    @keyframes campaign-current-pulse { from { filter: drop-shadow(0 0 1px #ffd54d); transform: translate(-50%,-50%) scale(.98); } to { filter: drop-shadow(0 0 8px #ffcf3e); transform: translate(-50%,-50%) scale(1.04); } }
    .campaign-map-detail { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 10px; min-height: 46px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px 9px; border: 2px solid rgba(255,255,255,.92); border-radius: 15px; color: #76320e; background: rgba(255,244,205,.94); box-shadow: 0 4px 9px rgba(72,25,2,.25); }
    .campaign-map-detail strong,.campaign-map-detail small { display: block; }
    .campaign-map-detail strong { font-size: 11px; }
    .campaign-map-detail small { margin-top: 2px; color: #9d6031; font-size: 8px; font-weight: 900; }
    .campaign-map-detail b { font-size: 10px; white-space: nowrap; }
    .chapter-reward-panel { display: grid; grid-template-columns: minmax(72px,.78fr) minmax(0,2.45fr); align-items: stretch; gap: 5px; min-height: 54px; margin: 0 0 6px; padding: 5px; border: 2px solid #df9131; border-radius: 15px; background: linear-gradient(#fff8db,#ffd98e); box-shadow: inset 0 1px white,0 2px 0 #b8611c; }
    .chapter-reward-title { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-left: 3px; color: #78330f; }
    .chapter-reward-title strong { font-size: 10px; }
    .chapter-reward-title small { margin-top: 3px; color: #a46431; font-size: 7px; font-weight: 900; }
    .chapter-reward-list { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
    .chapter-reward { position: relative; min-width: 0; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 2px; padding: 3px 4px; border: 1px solid #e2a03d; border-radius: 12px; color: #7f3b13; background: rgba(255,255,255,.56); font: inherit; text-align: left; }
    button.chapter-reward { cursor: pointer; }
    .chapter-reward img { width: 24px; height: 24px; object-fit: contain; }
    .chapter-reward span,.chapter-reward small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .chapter-reward span { font-size: 8px; font-weight: 1000; }
    .chapter-reward small { margin-top: 1px; color: #a66c3a; font-size: 6px; font-weight: 900; }
    .chapter-reward.eligible { border-color: #f1801b; background: #fff3b5; box-shadow: 0 0 0 2px rgba(255,193,55,.35); animation: reward-ready 1s ease-in-out infinite alternate; }
    .chapter-reward.eligible::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border: 1px solid white; border-radius: 50%; background: #ed3f2f; box-shadow: 0 1px 2px rgba(103,29,8,.3); }
    .chapter-reward.claimed { opacity: .66; filter: saturate(.65); }
    @keyframes reward-ready { to { transform: translateY(-2px); } }
    .chapter-reward-overlay { position: fixed; z-index: 170; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(72,27,4,.72); backdrop-filter: blur(5px); }
    .chapter-reward-dialog { position: relative; width: min(100%,410px); padding: 18px 16px 16px; border: 4px solid #eea232; border-radius: 28px; color: #77330e; background: radial-gradient(circle at 50% 0,#fffef0 0 22%,#ffedba 72%,#ffd98e 100%); box-shadow: inset 0 3px white,0 16px 38px rgba(56,18,1,.45); text-align: center; }
    .chapter-reward-close { position: absolute; top: 9px; right: 9px; width: 37px; height: 37px; display: grid; place-items: center; padding: 0; border: 2px solid #d57821; border-radius: 50%; color: #7c3511; background: #fff4ce; box-shadow: 0 3px 0 #ad5316; font: inherit; font-size: 20px; font-weight: 1000; cursor: pointer; }
    .chapter-reward-kicker { margin: 0; color: #d45e18; font-size: 10px; font-weight: 1000; letter-spacing: .1em; }
    .chapter-reward-dialog h2 { margin: 5px 38px 3px; font-size: 25px; }
    .chapter-reward-dialog > p:not(.chapter-reward-kicker) { margin: 0 0 12px; color: #9b5c2d; font-size: 10px; font-weight: 900; }
    .chapter-tool-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0; }
    .chapter-tool-choice { position: relative; min-width: 0; min-height: 112px; display: grid; place-items: center; align-content: center; gap: 1px; padding: 8px 3px 7px; border: 2px solid #e4a044; border-radius: 18px; color: #78340f; background: linear-gradient(#fffdf2,#ffe7ae); box-shadow: inset 0 2px white,0 3px 0 #bb651e; font: inherit; font-weight: 1000; cursor: pointer; }
    .chapter-tool-choice img { width: 66px; height: 60px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(91,36,5,.2)); }
    .chapter-tool-choice strong { font-size: 12px; }
    .chapter-tool-choice small { color: #9b6337; font-size: 8px; }
    .chapter-tool-choice.selected { border-color: #ef6e1a; background: linear-gradient(#fff5bb,#ffd264); box-shadow: inset 0 2px white,0 0 0 3px rgba(241,111,25,.24),0 3px 0 #ad4e13; transform: translateY(-2px); }
    .chapter-reward-confirm { width: 100%; min-height: 48px; border: 2px solid #c95d16; border-radius: 16px; color: white; background: linear-gradient(#ffa338,#ee6817); box-shadow: inset 0 2px rgba(255,255,255,.55),0 4px 0 #9f4210; font: inherit; font-size: 16px; font-weight: 1000; cursor: pointer; }
    .chapter-reward-confirm:disabled { opacity: .52; filter: grayscale(.25); cursor: default; }
    .chapter-reward-unlock-notice { margin-top: 9px; padding: 8px 9px; border: 2px solid #eea13b; border-radius: 14px; color: #7b350f; background: #fff3bf; box-shadow: inset 0 1px white; text-align: center; }
    .chapter-reward-unlock-notice strong,.chapter-reward-unlock-notice small { display: block; }
    .chapter-reward-unlock-notice strong { font-size: 12px; }
    .chapter-reward-unlock-notice small { margin-top: 2px; color: #a15d2d; font-size: 8px; }
    .chapter-reward-unlock-notice button { margin-top: 6px; min-width: 132px; min-height: 34px; border: 2px solid #ce6317; border-radius: 11px; color: white; background: linear-gradient(#ffa63b,#ef6d19); box-shadow: 0 3px 0 #a54911; font: inherit; font-size: 10px; font-weight: 1000; cursor: pointer; }
    .campaign-result-stars {
      position: relative;
      width: max-content;
      min-height: 58px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 3px;
      margin: 2px auto 2px;
      padding: 6px 16px 3px;
    }
    .campaign-result-stars::before,
    .campaign-result-stars::after {
      content: "";
      position: absolute;
      top: 17px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ffd34a;
      box-shadow: 0 0 0 3px rgba(255,215,83,.18),0 0 8px rgba(255,174,26,.7);
    }
    .campaign-result-stars::before { left: 2px; }
    .campaign-result-stars::after { right: 2px; transform: scale(.72); }
    .campaign-result-stars i {
      position: relative;
      width: 43px;
      height: 43px;
      flex: 0 0 43px;
      display: block;
      color: transparent;
      background: url("../assets/breakfast/campaign-results-v2/rating-star-empty-v1.webp") center / contain no-repeat;
      filter: drop-shadow(0 3px 3px rgba(111,57,16,.2));
      opacity: 1;
      transform: scale(.9);
    }
    .campaign-result-stars i::before,
    .campaign-result-stars i::after { display: none; }
    .campaign-result-stars i:nth-child(2) {
      width: 52px;
      height: 52px;
      flex-basis: 52px;
      margin-bottom: 5px;
    }
    .campaign-result-stars i.lit {
      background-image: url("../assets/breakfast/campaign-results-v2/rating-star-earned-v1.webp");
      filter: drop-shadow(0 3px 0 rgba(169,65,7,.62)) drop-shadow(0 5px 5px rgba(139,58,4,.26));
      animation: result-star-pop .48s cubic-bezier(.2,1.45,.42,1) both;
    }
    .campaign-result-stars i:nth-child(2) { animation-delay: .12s; }
    .campaign-result-stars i:nth-child(3) { animation-delay: .24s; }
    @keyframes result-star-pop { from { opacity: 0; transform: translateY(12px) scale(.35) rotate(-18deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
    @media (max-height: 760px) {
      .campaign-map-screen { gap: 5px; padding-top: 5px; }
      .campaign-map-heading { min-height: 43px; }
      .campaign-map-title h2 { font-size: 17px; }
      .campaign-map-scene { min-height: 370px; }
      .campaign-node { width: 43px; height: 43px; font-size: 14px; }
      .campaign-node.current { width: 48px; height: 48px; }
      .campaign-node.chapter-finale { width: 50px; height: 50px; }
      .chapter-reward-panel { min-height: 48px; margin-bottom: 4px; padding: 4px; }
    }
    .collection-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
    .collection-card { position: relative; min-height: 174px; padding: 8px; color: #743612; text-align: center; cursor: pointer; }
    button.collection-card { font: inherit; }
    .collection-card .recipe-art { display: block; width: 100%; height: 122px; padding: 3px; border: 2px solid #edb456; border-radius: 15px; background: #fff2c7; object-fit: contain; box-shadow: inset 0 2px white; }
    .collection-card.locked { filter: grayscale(1); opacity: .66; }
    .collection-card strong { display: block; margin-top: 6px; font-size: 11px; }
    .collection-card small { display: block; margin-top: 2px; color: #9d6234; font-size: 8px; }
    .recipe-detail-overlay { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(78,31,5,.66); backdrop-filter: blur(4px); }
    .recipe-detail-panel { position: relative; width: min(100%,430px); padding: 16px; border: 4px solid #efa635; border-radius: 28px; background: linear-gradient(#fffdf2,#ffe9b8); box-shadow: inset 0 3px white,0 14px 34px rgba(55,18,1,.4); text-align: center; }
    .recipe-detail-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 39px; height: 39px; border: 2px solid #d87523; border-radius: 50%; color: #7d3513; background: #fff2c8; box-shadow: 0 3px 0 #b55b18; font-weight: 1000; cursor: pointer; }
    .recipe-detail-art { display: block; width: 100%; height: 230px; padding: 4px; border: 3px solid #e6a13e; border-radius: 21px; background: #fff2c7; object-fit: contain; box-shadow: inset 0 2px white; }
    .recipe-detail-panel h2 { margin: 12px 0 2px; color: #78340e; font-size: 25px; }
    .recipe-detail-status { margin: 0 0 12px; color: #a16435; font-size: 10px; font-weight: 900; }
    .recipe-ingredient-title { display: flex; align-items: center; gap: 7px; margin: 8px 0; color: #7c3a16; font-size: 13px; text-align: left; }
    .recipe-ingredient-title::before,.recipe-ingredient-title::after { content: ""; flex: 1; height: 2px; background: #edbd6e; }
    .recipe-ingredients { display: grid; grid-template-columns: repeat(auto-fit,minmax(70px,1fr)); gap: 8px; }
    .recipe-ingredient { min-height: 91px; display: grid; place-items: center; padding: 6px 3px; border: 2px solid #edb55c; border-radius: 16px; background: #fff6d7; font-size: 10px; font-weight: 1000; }
    .recipe-ingredient img { width: 62px; height: 54px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(98,41,5,.2)); }
    .recipe-rule-note { margin: 11px 2px 0; padding: 8px 10px; border-radius: 13px; color: #8b522a; background: #f7d99c; font-size: 9px; line-height: 1.45; }
    .collection-unlock-overlay { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(78,31,5,.72); backdrop-filter: blur(5px); }
    .collection-unlock-panel { position: relative; width: min(100%,400px); overflow: hidden; padding: 20px 18px 18px; border: 4px solid #f0a532; border-radius: 29px; color: #76330f; background: radial-gradient(circle at 50% 30%,#fffef1 0 34%,#ffe7a7 100%); box-shadow: inset 0 3px white,0 16px 38px rgba(55,18,1,.45); text-align: center; }
    .collection-unlock-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 17% 19%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 84% 27%,rgba(255,199,49,.8) 0 3px,transparent 4px),radial-gradient(circle at 23% 73%,rgba(255,154,38,.55) 0 3px,transparent 4px); background-size: 53px 47px,67px 61px,59px 71px; animation: unlock-sparkle 1.2s ease-in-out infinite alternate; }
    .collection-unlock-kicker { position: relative; margin: 0; color: #d35d18; font-size: 13px; font-weight: 1000; letter-spacing: .12em; }
    .collection-unlock-panel h2 { position: relative; margin: 7px 0 9px; font-size: 26px; }
    .collection-unlock-art { position: relative; display: block; width: 100%; height: 210px; padding: 5px; border: 3px solid #e8a03b; border-radius: 21px; background: #fff4cf; object-fit: contain; box-shadow: inset 0 2px white,0 5px 10px rgba(100,43,6,.16); }
    .collection-unlock-copy { position: relative; margin: 11px 0 8px; color: #9a5d2d; font-size: 10px; font-weight: 900; }
    .collection-reward { position: relative; width: fit-content; display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 14px; padding: 7px 14px; border: 2px solid #e2a13b; border-radius: 99px; background: rgba(255,249,221,.92); box-shadow: inset 0 1px white; font-size: 15px; font-weight: 1000; }
    .collection-reward img { width: 29px; height: 29px; object-fit: contain; }
    .collection-unlock-claim { position: relative; width: 100%; }
    .collection-milestone-panel { margin: 0 0 12px; padding: 12px; border: 2px solid #e9ad53; border-radius: 20px; background: linear-gradient(145deg,#fff9e5,#ffe8aa); box-shadow: inset 0 2px white,0 5px 12px rgba(128,70,17,.13); }
    .collection-milestone-head { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: #79350f; }
    .collection-milestone-head strong { font-size: 14px; }
    .collection-milestone-head small { max-width: 68%; color: #a6662c; font-size: 9px; font-weight: 900; line-height: 1.35; text-align: right; }
    .collection-milestone-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
    .collection-milestone-card { position: relative; min-width: 0; padding: 6px 4px 7px; border: 1.5px solid #e6ad5d; border-radius: 13px; color: #7b3c14; background: rgba(255,255,255,.58); text-align: center; }
    .collection-milestone-card img { display: block; width: 100%; height: 48px; object-fit: contain; }
    .collection-milestone-card strong { display: block; overflow: hidden; margin-top: 2px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .collection-milestone-card small { display: block; color: #a56830; font-size: 7px; font-weight: 900; }
    .collection-milestone-card.locked img { filter: grayscale(1); opacity: .42; }
    .collection-milestone-card.earned { border-color: #efa522; background: linear-gradient(#fffdf2,#fff0bd); box-shadow: 0 0 0 2px rgba(255,207,71,.25); }
    .collection-milestone-card.earned::after { content: "已入庫"; position: absolute; top: 4px; right: 4px; padding: 1px 4px; border-radius: 99px; color: white; background: #ec8c22; font-size: 6px; font-weight: 1000; }
    .furniture-card.collection-reward-furniture { border-color: #efa522; background: linear-gradient(145deg,#fffdf0,#fff0bd 68%,#ffe19a); box-shadow: inset 0 2px white,0 3px 8px rgba(178,102,18,.2); }
    .collection-stock-mark { position: absolute; left: 5px; bottom: 35px; z-index: 2; padding: 2px 5px; border-radius: 99px; color: #8a450d; background: #ffd766; box-shadow: 0 1px 3px rgba(116,57,8,.25); font-size: 6px; font-weight: 1000; }
    @keyframes unlock-sparkle { from { opacity: .38; transform: translateY(2px); } to { opacity: .85; transform: translateY(-2px); } }
    .pk-hub-screen { padding: 12px 11px 18px; background: radial-gradient(circle at 50% 8%,rgba(255,253,225,.98),transparent 38%),linear-gradient(#fff0bf,#f7bd60); }
    .pk-hub-screen .screen-heading { margin-bottom: 8px; padding: 0 2px; }
    .pk-hub-screen .screen-heading h2 { font-size: 22px; }
    .pk-hub-screen .screen-heading p { max-width: 255px; }
    .pk-rank { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .opponent { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; margin: 12px 0; padding: 10px; border-radius: 17px; background: #fff3cd; }
    .opponent-avatar { display: grid; place-items: center; width: 58px; height: 58px; border: 3px solid #e79a33; border-radius: 50%; background: #ffd66b; font-size: 34px; }
    .pk-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-bottom: 10px; padding: 5px; border: 3px solid #e3a147; border-radius: 20px; background: linear-gradient(#fff7dc,#f3c96f); box-shadow: inset 0 2px white,0 4px 9px rgba(102,42,4,.14); }
    .pk-tab,.rank-filter { min-height: 38px; border: 2px solid transparent; border-radius: 13px; outline: 0; color: #85461f; background: transparent; font-weight: 1000; cursor: pointer; }
    .pk-tab.active,.rank-filter.active { color: #73310b; border-color: #e28321; background: linear-gradient(#ffd861,#f6a927); box-shadow: inset 0 2px #fff1a8,0 3px 0 #bd5b16; }
    .pk-card { padding: 10px; }
    .pk-challenge-card { overflow: hidden; border-width: 4px; border-radius: 25px; }
    .pk-hero { position: relative; overflow: hidden; aspect-ratio: 16 / 7; border: 3px solid #d78220; border-radius: 18px; background: #d98222 url("../assets/breakfast/pk-ui-v2/pk-versus-hero-v2.webp") center / cover no-repeat; box-shadow: inset 0 0 0 2px rgba(255,255,255,.75),0 3px 7px rgba(82,28,2,.25); }
    .pk-hero-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); padding: 6px 10px; border: 2px solid white; border-radius: 99px; color: #7b3410; background: rgba(255,242,190,.94); box-shadow: 0 3px 7px rgba(73,24,1,.22); font-size: 10px; font-weight: 1000; white-space: nowrap; }
    .pk-hero-caption { position: absolute; right: 8px; bottom: 7px; left: 8px; display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 2px solid rgba(255,224,130,.9); border-radius: 12px; color: white; background: rgba(105,42,10,.88); text-shadow: 0 1px 2px #491501; font-size: 9px; font-weight: 1000; }
    .pk-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 9px 0; }
    .pk-summary div { padding: 7px 4px; border: 2px solid #efbd69; border-radius: 14px; background: linear-gradient(#fffdf0,#ffe6ae); text-align: center; box-shadow: inset 0 1px white; }
    .pk-summary small { display: block; color: #a26431; font-size: 8px; font-weight: 900; }
    .pk-summary strong { display: block; margin-top: 3px; color: #7d3511; font-size: 17px; }
    .milestone-card { padding: 9px 10px; border: 3px solid #e5a044; border-radius: 18px; background: linear-gradient(#fff9e7,#ffe4a8); }
    .milestone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .milestone-head > span { display: flex; align-items: center; gap: 7px; color: #743812; font-weight: 1000; }
    .milestone-head img,.star-balance img { width: 30px; height: 30px; object-fit: contain; }
    .milestone-track { position: relative; height: 12px; margin: 9px 5px 6px; border: 2px solid #b8651f; border-radius: 99px; background: #7f3c16; overflow: hidden; }
    .milestone-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffc532,#f08a17); }
    .milestone-copy { display: flex; justify-content: space-between; color: #8c5127; font-size: 9px; font-weight: 900; }
    .pk-match-strip { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 7px; margin-top: 9px; padding: 8px 9px; border: 2px solid #e7ad55; border-radius: 15px; background: #fff5d1; }
    .pk-match-side { min-width: 0; display: flex; align-items: center; gap: 6px; color: #7c3815; font-size: 9px; font-weight: 1000; }
    .pk-match-side:last-child { justify-content: flex-end; text-align: right; }
    .pk-match-side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pk-match-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border: 2px solid #e2a13e; border-radius: 50%; background: #ffd56c; font-size: 18px; }
    .pk-match-vs { color: #d45e16; font-size: 17px; font-weight: 1000; text-shadow: 0 1px white; }
    .pk-rule-note { margin: 8px 2px 0; color: #8e542d; font-size: 9px; line-height: 1.4; text-align: center; }
    .pk-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 9px; }
    .pk-actions .hub-button { min-height: 48px; font-size: 14px; }
    .pk-actions.pk-dev-actions { grid-template-columns: repeat(2,1fr); }
    .pk-actions.pk-dev-actions .hub-button:first-child { grid-column: 1 / -1; }
    .rank-filters { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 9px; }
    .rank-filter { min-height: 33px; font-size: 10px; }
    .season-banner { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 8px 10px; border-radius: 14px; color: #74350e; background: linear-gradient(90deg,#ffd36b,#fff0bd); font-weight: 1000; }
    .leaderboard { display: grid; gap: 6px; }
    .leader-row { display: grid; grid-template-columns: 30px 42px 1fr auto; gap: 7px; align-items: center; padding: 7px; border: 2px solid #e8ae55; border-radius: 15px; background: #fff7dd; }
    .leader-row.player { border-color: #e88919; background: linear-gradient(#ffe373,#ffc64f); box-shadow: 0 3px 0 #bc5b14; }
    .leader-rank { color: #8a4619; font-size: 17px; font-weight: 1000; text-align: center; }
    .leader-avatar { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #dfa03a; border-radius: 50%; background: #ffd66f; font-size: 23px; }
    button.leader-avatar { padding: 0; cursor: pointer; }
    button.leader-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; object-position: center 12%; }
    button.leader-avatar.friend-added { border-color: #5fa95d; box-shadow: 0 0 0 3px rgba(92,173,91,.2); }
    .pk-mode-switch { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; margin: 9px 0; padding: 4px; border: 2px solid #e7ad55; border-radius: 15px; background: #fff3cc; }
    .pk-mode-button { min-height: 36px; border: 0; border-radius: 11px; color: #86471e; background: transparent; font-size: 10px; font-weight: 1000; cursor: pointer; }
    .pk-mode-button.active { color: white; background: linear-gradient(#f7a33a,#dc641d); box-shadow: inset 0 1px rgba(255,255,255,.5),0 2px 0 #9d4311; }
    .pk-friend-list { display: grid; gap: 6px; margin-top: 8px; }
    .pk-friend-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px; border: 2px solid #e8ad53; border-radius: 13px; background: #fff7db; }
    .pk-friend-row img { width: 38px; height: 38px; border: 2px solid #e5a340; border-radius: 50%; object-fit: cover; object-position: center 12%; background: #ffd779; }
    .pk-friend-row strong,.pk-friend-row small { display: block; }
    .pk-friend-row small { margin-top: 2px; color: #9d6030; font-size: 8px; }
    .pk-result-opponent-add { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 6px; width: 100%; padding: 4px; border: 0; border-radius: 10px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
    .pk-result-opponent-add:disabled { cursor: default; }
    .pk-result-opponent-add img { width: 40px; height: 40px; border: 2px solid white; border-radius: 50%; object-fit: cover; object-position: center 12%; background: #fff2bd; box-shadow: 0 2px 5px rgba(45,78,112,.22); }
    .pk-result-opponent-add span { display: block; }
    .pk-result-opponent-add small { display: block; margin-top: 1px; font-size: 7px; opacity: .78; }
    .player-profile-overlay { position: fixed; z-index: 2200; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(74,35,12,.72); backdrop-filter: blur(4px); }
    .player-profile-overlay[hidden] { display: none; }
    .player-profile-panel { position: relative; width: min(100%,410px); padding: 18px; border: 4px solid #e69a32; border-radius: 28px; color: #71320f; background: linear-gradient(#fffdf0,#ffe8b5); box-shadow: inset 0 3px white,0 13px 35px rgba(57,24,5,.42); text-align: center; }
    .player-profile-close { position: absolute; top: 9px; right: 9px; width: 34px; height: 34px; border: 2px solid #d8882d; border-radius: 50%; color: #843f15; background: #fff2bf; font-size: 18px; font-weight: 1000; cursor: pointer; }
    .player-profile-avatar { width: 92px; height: 92px; margin: 2px auto 8px; border: 4px solid #e7a13a; border-radius: 50%; object-fit: cover; object-position: center 12%; background: #ffd775; box-shadow: inset 0 2px white,0 5px 10px rgba(93,42,9,.2); }
    .player-profile-panel h2 { margin: 0; font-size: 22px; }
    .player-profile-id { margin: 3px 0 9px; color: #a15f2f; font-size: 10px; font-weight: 900; }
    .player-profile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 10px 0; }
    .player-profile-stats div { padding: 7px 3px; border: 2px solid #edb45e; border-radius: 13px; background: rgba(255,250,225,.88); }
    .player-profile-stats small,.player-profile-stats strong { display: block; }
    .player-profile-stats small { color: #a26231; font-size: 7px; }
    .player-profile-stats strong { margin-top: 2px; font-size: 13px; }
    .player-title-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 9px 0 13px; }
    .player-title-chip { padding: 5px 8px; border: 2px solid #e1a144; border-radius: 99px; color: #75330e; background: linear-gradient(#fff4b9,#ffd36e); font-size: 8px; font-weight: 1000; }
    .player-profile-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
    .player-profile-actions .hub-button:first-child:last-child { grid-column: 1 / -1; }
    .friend-status-note { margin: 9px 0 0; color: #975628; font-size: 9px; line-height: 1.4; }
    .leader-copy strong,.leader-copy small { display: block; }
    .leader-copy strong { color: #743612; font-size: 11px; }
    .leader-copy small { color: #a36534; font-size: 8px; }
    .leader-score { display: flex; align-items: center; gap: 3px; color: #7d3511; font-weight: 1000; }
    .leader-score img { width: 25px; height: 25px; object-fit: contain; }
    .record-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
    .record-card { padding: 12px; border: 2px solid #e7ad56; border-radius: 16px; background: #fff7dd; text-align: center; }
    .record-card small,.record-card strong { display: block; }
    .record-card small { color: #a26431; font-size: 9px; }
    .record-card strong { margin-top: 4px; color: #7c3410; font-size: 22px; }
    .recent-results { display: flex; gap: 7px; margin-top: 10px; }
    .result-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white; background: #79b94d; font-weight: 1000; }
    .result-dot.loss { background: #da6d55; }
    .star-balance { display: inline-flex; align-items: center; gap: 5px; }
    .decor-panel { margin-top: 10px; padding: 10px; border: 3px solid #e8a448; border-radius: 22px; background: rgba(255,248,220,.97); }
    .decor-inventory { display: grid; grid-auto-flow: column; grid-auto-columns: 86px; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; }
    .decor-item { position: relative; min-height: 98px; padding: 5px; border: 2px solid #e7ac51; border-radius: 16px; background: #fff4cf; cursor: pointer; }
    .decor-item img { width: 100%; height: 66px; object-fit: contain; }
    .decor-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 900; }
    .decor-item.equipped { border-color: #f18b17; box-shadow: 0 0 0 3px #ffe469; }
    /* 店內布置 v4：固定 2:1 正交等角鏡頭；地板與左右牆面共用同一透視契約。 */
    .furnishing-screen { padding-bottom: 18px; }
    .furnishing-screen .screen-heading { align-items: center; }
    .furnishing-room {
      --iso-tile-w: 58px;
      --iso-tile-h: 29px;
      position: relative;
      width: min(100%,500px);
      height: 500px;
      margin: 0 auto;
      overflow: hidden;
      border: 4px solid #dd8d2e;
      border-radius: 26px;
      background:
        radial-gradient(circle at 18% 19%,rgba(255,255,255,.72) 0 2px,transparent 3px),
        linear-gradient(180deg,#efd0a0 0 35%,#c98950 35% 100%);
      box-shadow: inset 0 0 0 4px #fff3c6,0 8px 18px rgba(92,39,8,.24);
      isolation: isolate;
    }
    .furnishing-room::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      /* 牆形由 JS 依房間格局動態算（--wall-*-clip，applyRoomWallpaper）——固定形只配正方形房，Lv5 起 8×10/8×12 會和地板脫節 */
      clip-path: var(--wall-left-clip, polygon(0 22%,50% 4%,50% 37%,0 60%));
      background:
        linear-gradient(180deg,transparent 0 65%,rgba(92,128,73,.13) 65% 67%,transparent 67%),
        linear-gradient(135deg,#fff9e7,#ecd3aa 72%);
      box-shadow: inset -7px -10px 0 rgba(117,65,29,.15);
    }
    .furnishing-room::after {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      clip-path: var(--wall-right-clip, polygon(50% 4%,100% 22%,100% 60%,50% 37%));
      background:
        linear-gradient(180deg,transparent 0 65%,rgba(92,128,73,.15) 65% 67%,transparent 67%),
        linear-gradient(225deg,#fff9e7,#ecd3aa 72%);
      box-shadow: inset 7px -10px 0 rgba(117,65,29,.15);
      pointer-events: none;
    }
    .furnishing-room[data-wallpaper-left="mint-stripe"]::before,.wallpaper-swatch[data-wallpaper="mint-stripe"] { background: repeating-linear-gradient(90deg,#e9f3d3 0 17px,#c9e5c5 17px 30px,#f8f1d7 30px 34px); }
    .furnishing-room[data-wallpaper-right="mint-stripe"]::after { background: repeating-linear-gradient(90deg,#e4f0cf 0 17px,#c2dfbf 17px 30px,#f8f1d7 30px 34px); }
    .furnishing-room[data-wallpaper-left="apricot-check"]::before { background-color:#fff0cf;background-image:linear-gradient(70.2deg,rgba(224,145,79,.18) 2px,transparent 2px),linear-gradient(90deg,rgba(224,145,79,.18) 2px,transparent 2px);background-size:22px 22px; }
    .furnishing-room[data-wallpaper-right="apricot-check"]::after { background-color:#fbe9ca;background-image:linear-gradient(109.8deg,rgba(210,126,64,.18) 2px,transparent 2px),linear-gradient(90deg,rgba(210,126,64,.18) 2px,transparent 2px);background-size:22px 22px; }
    .wallpaper-swatch[data-wallpaper="apricot-check"] { background-color:#fff0cf;background-image:linear-gradient(rgba(224,145,79,.18) 2px,transparent 2px),linear-gradient(90deg,rgba(224,145,79,.18) 2px,transparent 2px);background-size:22px 22px; }
    .furnishing-room[data-wallpaper-left="sky-tile"]::before { background-color:#d9eff0;background-image:linear-gradient(70.2deg,rgba(78,151,158,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(78,151,158,.18) 1px,transparent 1px);background-size:18px 18px; }
    .furnishing-room[data-wallpaper-right="sky-tile"]::after { background-color:#d3eaec;background-image:linear-gradient(109.8deg,rgba(70,139,148,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(70,139,148,.18) 1px,transparent 1px);background-size:18px 18px; }
    .wallpaper-swatch[data-wallpaper="sky-tile"] { background-color:#d9eff0;background-image:linear-gradient(rgba(78,151,158,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(78,151,158,.18) 1px,transparent 1px);background-size:18px 18px; }
    .furnishing-room[data-wallpaper-left="sage-leaf"]::before,.wallpaper-swatch[data-wallpaper="sage-leaf"] { background-color:#eef0d8;background-image:radial-gradient(ellipse at 35% 40%,rgba(94,142,89,.24) 0 4px,transparent 5px),radial-gradient(ellipse at 65% 65%,rgba(121,157,91,.20) 0 4px,transparent 5px);background-size:28px 30px; }
    .furnishing-room[data-wallpaper-right="sage-leaf"]::after { background-color:#e8ecd2;background-image:radial-gradient(ellipse at 35% 40%,rgba(83,132,80,.22) 0 4px,transparent 5px),radial-gradient(ellipse at 65% 65%,rgba(112,148,83,.18) 0 4px,transparent 5px);background-size:28px 30px; }
    .furnishing-room[data-wallpaper-left="rose-dot"]::before,.wallpaper-swatch[data-wallpaper="rose-dot"] { background-color:#fae5dc;background-image:radial-gradient(circle,rgba(205,110,105,.28) 0 3px,transparent 3.5px);background-size:22px 22px; }
    .furnishing-room[data-wallpaper-right="rose-dot"]::after { background-color:#f4ddd6;background-image:radial-gradient(circle,rgba(190,96,94,.25) 0 3px,transparent 3.5px);background-size:22px 22px; }
    .wallpaper-swatch[data-wallpaper="cream"] { background: linear-gradient(135deg,#fff9e7,#ecd3aa); }
    .furnishing-wall-slots { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
    .furnishing-wall-slot { position: absolute; inset: 0; min-width: 0; padding: 0; border: 0; color: transparent; background: rgba(255,249,226,.05); cursor: pointer; opacity: .48; pointer-events: auto; filter: drop-shadow(0 0 1px rgba(153,89,35,.48)); transition: opacity .15s ease,background .15s ease,filter .15s ease; }
    .furnishing-wall-slot::after { content: ""; position: absolute; inset: 0; background: transparent; clip-path: inherit; }
    .furnishing-wall-slot:hover,.furnishing-wall-slot:focus-visible { opacity: .62; filter: brightness(1.06); outline: 0; }
    .furnishing-wall-slot.target-valid { opacity: .92; background: rgba(148,211,93,.34); }
    .furnishing-wall-slot.target-invalid { opacity: .92; background: rgba(230,104,72,.30); }
    .furnishing-ceiling-slots { position: absolute; z-index: 8; left: 17%; right: 17%; top: 0; height: 18%; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; pointer-events: none; }
    .furnishing-ceiling-slot { position: relative; pointer-events: auto; border: 0; background: transparent; cursor: pointer; }
    .furnishing-ceiling-slot::after { content: ""; position: absolute; left: 50%; top: 8px; bottom: 7px; border-left: 2px dashed rgba(172,98,34,.25); opacity: 0; }
    .furnishing-ceiling-slot.target-valid::after { border-color: #5da34a; opacity: 1; }
    .furnishing-floor { position: absolute; z-index: 2; inset: 0; }
    /* 底座形狀由 JS 依房型設 --floor-clip（applyRoomWallpaper）——固定正方形只配正方形房 */
    .furnishing-floor::before { content: ""; position: absolute; inset: 0; clip-path: var(--floor-clip, polygon(50% 37%,95% 59.5%,50% 82%,5% 59.5%)); background: linear-gradient(155deg,#f9d89b,#dca15c); filter: drop-shadow(0 10px 0 #985321) drop-shadow(0 15px 7px rgba(74,35,12,.25)); pointer-events: none; }
    .iso-cell { position: absolute; width: var(--iso-tile-w); height: var(--iso-tile-h); padding: 0; border: 1px solid rgba(143,74,24,.48); background: linear-gradient(135deg,rgba(255,227,163,.92),rgba(225,157,78,.92)); transform: rotate(0deg); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); cursor: pointer; }
    .iso-cell:nth-child(even) { background: linear-gradient(135deg,rgba(255,237,189,.94),rgba(232,173,96,.92)); }
    .iso-cell:hover,.iso-cell:focus-visible { z-index: 4; outline: 0; filter: brightness(1.08); }
    .iso-cell.target-valid { background: #9cdb72; box-shadow: inset 0 0 0 3px #4c973d; }
    .iso-cell.target-invalid { background: #ef9578; box-shadow: inset 0 0 0 3px #c54732; }
    .furniture-layer { position: absolute; z-index: auto; inset: 0; pointer-events: none; }
    .manager-walker { position: absolute; width: 98px; height: 106px; translate: -50% -82%; pointer-events: none; transition: left .24s linear,top .24s linear; transform-origin: center bottom; }
    .manager-walker::after { content: ""; position: absolute; z-index: -1; left: 25%; right: 25%; bottom: 3px; height: 8px; border-radius: 50%; background: rgba(74,39,14,.25); filter: blur(2px); }
    .manager-sprite-frame { display: block; width: 98px; height: 106px; background-repeat: no-repeat; transform-origin: center bottom; filter: drop-shadow(0 3px 2px rgba(88,41,12,.24)); image-rendering: auto; }
    .walker-tag { position: absolute; z-index: 3; left: 50%; bottom: -10px; translate: -50% 0; min-width: 25px; padding: 2px 5px; border: 1px solid #ce7823; border-radius: 99px; color: #71320f; background: rgba(255,248,214,.95); box-shadow: 0 2px 3px rgba(83,39,12,.18); font-size: 7px; font-weight: 1000; line-height: 1; text-align: center; white-space: nowrap; }
    .friend-host-walker .walker-tag { color: white; border-color: #49896a; background: rgba(72,143,106,.94); }
    .friend-shop-stage.furnishing-room { height: 500px; }
    .friend-shop-stage .furnishing-floor { z-index: 2; }
    .friend-shop-stage .furniture-layer { z-index: auto; }
    .friend-shop-stage .iso-cell { cursor: pointer; }
    .placed-furniture { position: absolute; padding: 0; border: 0; background: transparent; pointer-events: auto; cursor: grab; transform-origin: center bottom; }
    .placed-furniture::after { content: ""; position: absolute; z-index: -1; left: 27%; right: 27%; top: var(--anchor-top,84%); height: 8%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(ellipse,rgba(73,38,13,.34),transparent 72%); filter: blur(2px); }
    .placed-furniture img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(89,42,10,.25)); }
    .placed-furniture.selected { pointer-events: none; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 7px #f68b1e); }
    .furnishing-room.is-placing .placed-furniture { pointer-events: none; }
    .placed-furniture.wall-item { transform: scaleX(var(--wall-scale,1)) skewY(var(--wall-skew,0deg)); transform-origin: center center; }
    .placed-furniture.wall-item::after,.placed-furniture.ceiling-item::after,.placed-furniture.underlay-item::after { display: none; }
    .placed-furniture.premium-placed img { filter: drop-shadow(0 3px 2px rgba(89,42,10,.22)) drop-shadow(0 0 5px rgba(91,202,255,.5)); }
    .placed-furniture.collection-exclusive-placed img { filter: drop-shadow(0 3px 2px rgba(89,42,10,.22)) drop-shadow(0 0 5px rgba(255,191,39,.48)); }
    .placed-furniture.premium-placed::before { content: ""; position: absolute; z-index: 3; right: 9%; top: 9%; width: 8px; height: 8px; pointer-events: none; background: #fffbe0; clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); filter: drop-shadow(0 0 4px #ffd34f); animation: premium-furniture-sparkle 1.8s ease-in-out infinite alternate; }
    @keyframes premium-furniture-sparkle { from { opacity: .35; transform: scale(.62) rotate(0); } to { opacity: 1; transform: scale(1.2) rotate(40deg); } }
    .furnishing-hint { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; width: min(100%,500px); margin: 8px auto 0; padding: 8px 10px; border: 2px solid #e4a244; border-radius: 15px; background: #fff4ce; font-size: 10px; font-weight: 900; }
    .furnishing-actions { display: flex; gap: 6px; }
    .furnishing-actions button { min-height: 34px; padding: 5px 9px; border: 2px solid #da8a2e; border-radius: 11px; color: #7b3b16; background: #fff9e5; font-size: 10px; font-weight: 1000; cursor: pointer; }
    .furnishing-actions button:disabled { opacity: .42; cursor: default; }
    .furnishing-categories { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(66px,1fr); gap: 5px; overflow-x: auto; margin-bottom: 8px; padding-bottom: 3px; }
    .furnishing-categories .mini-tab { min-height: 34px; padding-inline: 7px; white-space: nowrap; }
    .furniture-inventory { display: grid; grid-auto-flow: column; grid-auto-columns: 94px; gap: 8px; overflow-x: auto; padding: 3px 2px 8px; }
    .furniture-inventory .inventory-empty { grid-column: 1 / -1; width: min(360px,calc(100vw - 62px)); min-height: 76px; display: grid; place-items: center; padding: 12px 18px; border: 2px dashed #dfa14d; border-radius: 15px; color: #925222; background: rgba(255,247,216,.82); font-size: 10px; font-weight: 900; line-height: 1.5; text-align: center; }
    .furniture-card { position: relative; min-height: 116px; padding: 5px; border: 2px solid #e0a049; border-radius: 16px; color: #743811; background: linear-gradient(#fff9e8,#ffe5ad); cursor: grab; }
    .furniture-card.selected { border-color: #e76d18; box-shadow: 0 0 0 3px #ffd357; }
    .furniture-card.locked { filter: grayscale(.7); opacity: .62; cursor: not-allowed; }
    .furniture-card img { display: block; width: 100%; height: 76px; object-fit: contain; }
    .wallpaper-swatch { display: block; width: 100%; height: 76px; border: 2px solid rgba(170,98,34,.38); border-radius: 11px; box-shadow: inset 0 2px 5px rgba(255,255,255,.7); }
    .shop-card > .wallpaper-swatch { width: 72px; height: 72px; }
    .wallpaper-card { min-height: 144px; }
    .wallpaper-apply-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-top: 4px; }
    .wallpaper-apply-actions button { min-width: 0; min-height: 24px; padding: 2px; border: 1px solid #d3832e; border-radius: 7px; color: #743811; background: #fff4c9; font-size: 8px; font-weight: 1000; cursor: pointer; }
    .wallpaper-apply-actions button.active { color: white; background: #df711f; box-shadow: inset 0 1px rgba(255,255,255,.4); }
    .wallpaper-apply-actions button:disabled { opacity: .38; cursor: default; }
    .furniture-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
    .stock-badge { position: absolute; left: 5px; top: 5px; min-width: 25px; padding: 3px 5px; border-radius: 99px; color: #71300e; background: #fff4bd; border: 1px solid #dc9235; box-shadow: 0 2px 0 rgba(137,66,15,.16); font-size: 8px; font-weight: 1000; }
    .footprint-badge { position: absolute; right: 4px; top: 4px; min-width: 28px; padding: 3px 5px; border-radius: 99px; color: white; background: #df6c1f; box-shadow: 0 2px 0 #94400d; font-size: 8px; font-weight: 1000; }
    .furniture-card small { display: block; margin-top: 2px; color: #a05b2d; font-size: 8px; }
    .furniture-card.premium-furniture { border-color: #5cb9e8; background: linear-gradient(145deg,#fffbed,#e7f8ff 66%,#ffe8a5); box-shadow: inset 0 2px white,0 3px 8px rgba(34,125,175,.18); }
    .furniture-card.premium-furniture.selected { border-color: #208fc9; box-shadow: 0 0 0 3px #a9e7ff,0 0 12px rgba(32,143,201,.35); }
    .furniture-card .premium-stock-mark { position: absolute; left: 5px; bottom: 35px; z-index: 2; width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(23,84,125,.28)); }
    .furnishing-panel { width: min(100%,500px); margin: 9px auto 0; padding: 9px; border: 3px solid #e4a145; border-radius: 21px; background: rgba(255,248,221,.98); box-shadow: inset 0 2px white,0 5px 10px rgba(101,41,5,.14); }
    @media (max-width: 520px) {
      .furnishing-room { --iso-tile-w: 52px; --iso-tile-h: 26px; height: 450px; }
      .friend-shop-stage.furnishing-room { height: 450px; }
      .furniture-inventory { grid-auto-columns: 88px; }
    }
    /* 鐵軌底圖走 content-box：要對齊「按鈕所在的內容框」而不是含安全區域 padding 的外框。
   否則有手勢列的機型（Pixel 7 實測 24px）鐵軌會被推到最底部，按鈕與圖示整排凸出鐵軌上緣。
   第二層純色只鋪安全區域那條，補掉手勢列後方原本露出的頁面黃色底色。 */
    .hub-nav { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: end; height: calc(65px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); overflow: visible; border: 0; background-color: transparent; background-image: url("../assets/breakfast/nav-icons-v3/nav-rail-v3.webp"), linear-gradient(#93400c,#93400c); background-origin: content-box, border-box; background-position: center bottom, center bottom; background-size: 100% 65px, 100% env(safe-area-inset-bottom); background-repeat: no-repeat, no-repeat; filter: drop-shadow(0 -4px 5px rgba(100,41,4,.16)); }
    .hub-app.decorate-mode .hub-nav { display: none; }
    .hub-app.decorate-mode .hub-content { bottom: 0; }
    .nav-button { position: relative; z-index: 1; width: 100%; min-width: 0; height: 64px; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 6px 2px 4px; border: 0; color: #79401d; background: transparent; font-size: 9px; font-weight: 1000; cursor: pointer; }
    .nav-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px; }
    .nav-icon img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(91,35,3,.18)); pointer-events: none; }
    .nav-label { display: block; margin-top: -1px; line-height: 1; text-shadow: 0 1px #fff1c6; white-space: nowrap; }
    .nav-button.active { z-index: 2; top: -3px; width: 78px; height: auto; aspect-ratio: 256 / 200; justify-self: center; padding: 8px 10px 9px; border: 0; border-radius: 0; color: #71300c; background: transparent url("../assets/breakfast/nav-icons-v2/nav-active-frame-v2.webp") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 4px 3px rgba(91,35,3,.22)); }
    .nav-button.active .nav-icon { width: 34px; height: 34px; flex-basis: 34px; }
    .nav-button.active .nav-label { margin-top: -3px; font-size: 8px; }
    .nav-notification { position: absolute; z-index: 4; top: 5px; right: calc(50% - 24px); width: 14px; height: 14px; padding: 0; border: 2px solid white; border-radius: 50%; color: transparent; background: linear-gradient(#ff6a4d,#d92f24); box-shadow: 0 2px 0 #9f241d,0 3px 6px rgba(91,29,10,.25); overflow: hidden; }
    .nav-button.active .nav-notification { top: 5px; right: 7px; }
    .nav-button:first-child.active { transform: translateX(3px); }
    .nav-button:last-child.active { transform: translateX(-3px); }
    .nav-button:focus-visible { outline: 3px solid rgba(255,247,196,.96); outline-offset: -6px; border-radius: 20px; }
    .toast-message { position: fixed; z-index: 80; left: 50%; bottom: 92px; transform: translate(-50%,20px); max-width: calc(100% - 40px); padding: 10px 16px; border: 2px solid #f0af45; border-radius: 99px; color: #754018; background: rgba(255,249,225,.97); box-shadow: 0 7px 18px rgba(72,27,3,.28); font-size: 11px; font-weight: 1000; opacity: 0; pointer-events: none; transition: .22s ease; }
    .toast-message.show { opacity: 1; transform: translate(-50%,0); }
    @media (max-width: 520px) {
      .splash-screen,.hub-app { width: 100%; height: 100vh; min-height: 100vh; }
      .hub-content { inset-block-start: var(--hub-top-h, 62px); }   /* 同上：跟著實際列高，別寫死 */
      .hub-screen { padding-inline: 9px; }
      .shop-stage { aspect-ratio: 9 / 11.8; }
      .hub-screen[data-screen="home"] .quick-grid { margin-top: 8px; }
      .hub-screen[data-screen="home"] .quick-card { min-height: 64px; padding-block: 5px; }
      .hub-screen[data-screen="home"] .quick-card span { font-size: 23px; }
      .shop-card { grid-template-columns: 64px 1fr auto; }
      .shop-card img { width: 58px; height: 58px; }
      .shop-card > .wallpaper-swatch { width: 58px; height: 58px; }
    }
    @media (max-height: 900px) {
      .business-prep-screen { gap: 5px; padding-bottom: 4px; }
      .business-title-row { min-height: 70px; }
    }
    .topbar { position: relative; z-index: 15; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
    .brand { min-width: 0; }
    .eyebrow { margin: 0; color: #b86a24; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
    h1 { margin: -1px 0 0; color: #9d4316; font-size: clamp(21px, 5vw, 30px); line-height: 1; text-shadow: 0 2px #fff8df; }
    .seed { display: none; }
    .game-mode-badge { margin: 0; color: #9a4e18; font-size: clamp(10px,2.5vw,13px); font-weight: 900; letter-spacing: .08em; }
    .icon-button { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 16px; background: transparent center / 210% 210% no-repeat; cursor: pointer; filter: drop-shadow(0 3px 3px rgba(120,54,8,.3)); transition: transform .12s ease; }
    .icon-button:active { transform: scale(.93); }
    .pause-button {
      position: relative;
      display: grid;
      place-items: center;
      border: 3px solid #df922d;
      background: linear-gradient(145deg,#fff9df 0%,#ffe5a5 72%,#ffc965 100%);
      box-shadow: inset 0 2px rgba(255,255,255,.92), 0 3px 0 #b85a17, 0 5px 9px rgba(120,54,8,.2);
    }
    .pause-button::before {
      content: "";
      width: 18px;
      height: 23px;
      border-left: 6px solid #a94913;
      border-right: 6px solid #a94913;
      border-radius: 3px;
      box-sizing: border-box;
      filter: drop-shadow(0 1px 0 rgba(255,255,255,.7));
    }

    .stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
    .game-app[data-mode="pk"] .stats { grid-template-columns: repeat(3,1fr); }
    .game-app:not([data-mode="pk"]) .clear-stat { display: none; }
    .game-app:not([data-mode="pk"]) .stat:has(#clears) { display: none; }
    .stat { position: relative; min-height: 58px; display: grid; place-items: center; padding: 8px 4px 6px; border: 2px solid #efb14a; border-radius: 18px; background: linear-gradient(#fffdf2,#ffedc6); box-shadow: inset 0 2px #fff, 0 3px 0 #c77824, 0 5px 9px rgba(120,54,8,.18); text-align: center; }
    .stat span { display: block; color: #b66a28; font-size: 10px; font-weight: 900; }
    .stat strong { display: block; margin-top: 1px; color: #7e3514; font-size: 18px; line-height: 1; }

    .campaign-goal-banner { width: 90%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 9px auto 0; padding: 8px 11px; border: 2px solid #efa431; border-radius: 17px; color: #74310d; background: linear-gradient(135deg,#fffceb,#ffe6a4); box-shadow: inset 0 2px white,0 4px 9px rgba(117,52,8,.18); }
    .campaign-goal-level { min-width: 50px; padding: 6px 7px; border-radius: 11px; color: white; background: linear-gradient(#f8992a,#db6417); box-shadow: inset 0 1px rgba(255,255,255,.6),0 2px 0 #a94a11; font-size: 10px; font-weight: 1000; text-align: center; }
    .campaign-goal-copy { min-width: 0; }
    .campaign-goal-copy strong,.campaign-goal-copy small { display: block; }
    .campaign-goal-copy strong { font-size: 12px; line-height: 1.1; }
    .campaign-goal-copy small { margin-top: 3px; color: #a25e2a; font-size: 8px; font-weight: 900; }
    .campaign-goal-track { height: 7px; margin-top: 5px; overflow: hidden; border: 1px solid #dc8d2d; border-radius: 99px; background: #f2d6a2; box-shadow: inset 0 1px 2px rgba(110,48,5,.18); }
    .campaign-goal-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff9232,#f4c233); transition: width .35s ease; }
    .campaign-goal-count { min-width: 61px; font-size: 14px; font-weight: 1000; text-align: right; white-space: nowrap; }
    .campaign-goal-banner.multi-target { gap: 7px; }
    .campaign-goal-banner.multi-target .campaign-goal-copy strong { font-size: 10px; line-height: 1.2; }
    .campaign-goal-banner.multi-target .campaign-goal-count { min-width: 54px; font-size: 12px; }
    .campaign-goal-banner.complete { border-color: #7fbd55; background: linear-gradient(135deg,#fffde9,#ddf2ae); animation: campaign-goal-complete .62s ease both; }
    .campaign-goal-banner.complete .campaign-goal-level,.campaign-goal-banner.complete .campaign-goal-track i { background: linear-gradient(#8fd45a,#4e9f40); }
    @keyframes campaign-goal-complete { 0% { transform: scale(.97); } 55% { transform: scale(1.025); } 100% { transform: scale(1); } }
    .campaign-start-overlay { position: absolute; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; pointer-events: none; background: rgba(91,43,9,.18); backdrop-filter: blur(2px); opacity: 0; }
    .campaign-start-overlay.show { animation: campaign-start-overlay 2s ease both; }
    .campaign-start-card { min-width: min(78%,340px); padding: 21px 26px 23px; border: 4px solid #efa331; border-radius: 28px; color: #71310d; background: linear-gradient(#fffdf0,#ffe4a1); box-shadow: inset 0 3px white,0 5px 0 #b95c17,0 18px 34px rgba(74,26,3,.34); text-align: center; }
    .campaign-start-card small,.campaign-start-card strong,.campaign-start-card b { display: block; }
    .campaign-start-card small { color: #b86521; font-size: 13px; font-weight: 1000; letter-spacing: .08em; }
    .campaign-start-card strong { margin-top: 6px; font-size: 20px; }
    .campaign-start-card b { margin-top: 8px; color: #d65d14; font-size: 31px; line-height: 1; }
    .campaign-start-overlay.show .campaign-start-card { animation: campaign-start-card 2s ease both; }
    @keyframes campaign-start-overlay { 0% { opacity: 0; } 12%,72% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes campaign-start-card { 0% { opacity: 0; transform: translateY(18px) scale(.9); } 16%,72% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-8px) scale(.97); } }
    .instruction { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: 7px 5% 2px; padding: 7px 12px; border: 2px solid #efb05a; border-radius: 18px; background: rgba(255,249,226,.94); box-shadow: 0 3px 8px rgba(117,52,8,.16); }
    .instruction strong { display: block; font-size: 13px; }
    .instruction small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.25; }
    .state-badge { flex: 0 0 auto; padding: 5px 9px; border: 2px solid #f0ae40; border-radius: 99px; color: #9a4a13; background: #fff1bd; font-size: 9px; font-weight: 900; }
    .state-badge.busy { color: #8b5212; background: #ffe39d; }
    .state-badge.good { color: #267235; border-color: #75bd64; background: #ddf3ca; }
    .state-badge.bad { color: #a5231f; border-color: #e87661; background: #ffe1d7; }

    .game-layout { display: block; }
    .board-column { width: min(100%, 540px); margin: 0 auto; }
    .machine { position: relative; width: 100%; aspect-ratio: 941 / 1672; overflow: visible; }
    .machine.row-clear-shake { animation: row-clear-shake .34s ease-in-out both; }
    .machine-frame { position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; pointer-events: none; object-fit: fill; filter: drop-shadow(0 12px 12px rgba(82,34,8,.28)); }
    .machine-frame-clean { position: absolute; z-index: 11; inset: 0; width: 100%; height: 100%; pointer-events: none; object-fit: fill; clip-path: inset(0 0 22.9% 0); filter: drop-shadow(0 10px 10px rgba(82,34,8,.2)); }
    .board-stage { position: absolute; z-index: 2; top: 10.75%; left: 11.35%; width: 77.3%; height: 58.35%; }
    .col-labels, .row-labels { display: none; }
    .board-shell { display: block; width: 100%; height: 100%; }
    .board { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; border: 3px solid #a75020; border-radius: 8px; background-color: #ffd46d; background-image: linear-gradient(to right, rgba(172,82,25,.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(172,82,25,.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(205,54,36,.46) 0 10%, transparent 10%), linear-gradient(#ffbe4c,#ffe98e 45%,#ffc75a); background-size: 12.5% 100%,100% 10%,100% 100%,100% 100%; box-shadow: inset 0 0 22px rgba(135,48,4,.3); }
    .danger-band { position: absolute; z-index: 1; inset: 0 0 auto; height: 10%; border-bottom: 2px dashed rgba(255,240,189,.72); pointer-events: none; }
    .danger-band span { position: absolute; top: 4px; right: 6px; color: #fff5ca; font-size: 8px; font-weight: 900; text-shadow: 0 1px 2px #a72316; }

    .block { position: absolute; z-index: 4; height: calc(10% - 2px); overflow: hidden; contain: layout paint style; backface-visibility: hidden; border: 0; border-radius: 12px; color: transparent; font-size: 0; cursor: grab; user-select: none; touch-action: none; filter: drop-shadow(0 3px 2px rgba(113,45,6,.28)); transition: left .17s ease, top .17s ease, opacity .17s ease, transform .1s ease, filter .12s ease; }
    .block::before { content: ""; position: absolute; inset: 0; background-image: var(--food-image); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; pointer-events: none; }
    .block::after { content: ""; position: absolute; z-index: 2; inset: 1px; border-radius: 11px; opacity: 0; pointer-events: none; }
    .block.frozen::after {
      opacity: 1;
      inset: 0;
      border: 0;
      border-radius: 10px;
      background: var(--frost-image) center / 100% 100% no-repeat;
      box-shadow: 0 0 5px rgba(155,225,255,.62);
    }
    .block.frozen[data-len="1"] { --frost-image:url("../assets/breakfast/frozen-overlays-v1/frost-overlay-1-cell-v1.webp"); }
    .block.frozen[data-len="2"] { --frost-image:url("../assets/breakfast/frozen-overlays-v1/frost-overlay-2-cell-v1.webp"); }
    .block.frozen[data-len="3"] { --frost-image:url("../assets/breakfast/frozen-overlays-v1/frost-overlay-3-cell-v1.webp"); }
    .block.frozen[data-len="4"] { --frost-image:url("../assets/breakfast/frozen-overlays-v1/frost-overlay-4-cell-v1.webp"); }
    .block.frozen-cracking::after { animation: frost-crack .34s ease both; }
    .block.dragging { z-index: 11; will-change: transform; cursor: grabbing; filter: drop-shadow(0 6px 4px rgba(95,37,4,.34)) brightness(1.08); transition: none; }
    .block.dragging::after, .block.hint::after { content: ""; position: absolute; inset: 2px; border: 3px solid #54b7ef; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.8), 0 0 12px #4eb6f0; }
    .block.locked { pointer-events: none; cursor: default; }
    .block.clearing { opacity: 0; transform: scale(1.18); filter: brightness(1.7); }
    .block.tool-targetable { cursor: crosshair; filter: drop-shadow(0 0 7px #ffe36e) brightness(1.1); animation: target-breathe .85s ease-in-out infinite alternate; }
    .block.tool-targetable::after { content: ""; position: absolute; inset: 2px; border: 3px dashed #fff3a0; border-radius: 10px; box-shadow: 0 0 0 2px rgba(226,115,26,.7),0 0 14px #fff1a3; }
    .block.tool-row-selected { z-index: 12; filter: drop-shadow(0 0 9px #fff2a0) brightness(1.18); }
    .block.tool-row-selected::after { content: ""; position: absolute; inset: 1px; border: 3px solid #ff8d28; border-radius: 10px; box-shadow: 0 0 0 3px rgba(255,244,166,.86),0 0 18px #ffcf55; }
    .block.tool-slicing { animation: tool-slice-block .38s ease both; }
    .block.tool-removing { z-index: 13; animation: tool-remove-block .46s cubic-bezier(.2,.8,.2,1) both; }
    .target-ghost { position: absolute; z-index: 2; height: calc(10% - 3px); border: 3px dashed #318edf; border-radius: 12px; background: rgba(255,255,255,.3); box-shadow: 0 0 12px rgba(49,142,223,.5); pointer-events: none; }
    .drag-guide { position: absolute; z-index: 3; top: 0; bottom: 0; border-left: 2px solid rgba(255,255,255,.72); border-right: 2px solid rgba(255,255,255,.72); background: rgba(255,255,255,.28); box-shadow: inset 0 0 24px rgba(255,255,255,.34); pointer-events: none; transition: left .06s ease, width .06s ease; }
    .board.clear-flash::after { content: ""; position: absolute; z-index: 10; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,235,116,.2) 42%, transparent 66%); opacity: 0; animation: flash .35s ease-out both; pointer-events: none; }
    /* 消除白光預設就是透明（opacity 0），只靠動畫閃一下：iOS 掉幀時 Safari 偶爾不啟動 pseudo-element 的動畫，
       原本預設不透明會讓整片白霧罩在盤面上直到下一次消除（測試者回報的「消除卡白畫面」）。省效果模式直接不閃。 */
    body.fx-lite .board.clear-flash::after { display: none; }
    /* 完美出餐徽章：一般模式收回時用 brightness 提亮成一道白光；省效果模式改成只縮放＋淡出，徽章本身也不掛濾鏡 */
    body.fx-lite .combo-pop { filter: none; }
    body.fx-lite .combo-pop.convert { animation-name: serving-badge-convert-lite; }
    .combo-pop { position: absolute; z-index: 15; left: 50%; top: 46%; width: 87%; aspect-ratio: 1672 / 940; transform: translate(-50%,-50%) scale(.7); display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; padding: 27% 15% 0; color: #9b3f16; background: url("../assets/breakfast/spritegen-runs/breakfast-static-v1/run/curated-web/fx-serving-badge-simple-v3.webp") center / contain no-repeat; text-align: center; text-shadow: 0 2px #fff9dc, 0 4px 8px rgba(119,45,7,.22); filter: drop-shadow(0 9px 8px rgba(100,38,5,.28)); opacity: 0; pointer-events: none; }
    .combo-pop strong { display: block; max-width: 100%; font-size: clamp(18px,5.2vw,29px); font-weight: 1000; line-height: 1.05; white-space: nowrap; }
    .combo-pop small { display: block; max-width: 100%; margin-top: 4px; color: #d06c18; font-size: clamp(9px,2.4vw,13px); font-weight: 1000; line-height: 1.1; white-space: nowrap; }
    .combo-pop.show { animation: serving-badge-pop 1.05s cubic-bezier(.2,1.4,.4,1) both; }
    .combo-pop.convert { animation: serving-badge-convert .28s ease-in both; }
    .fx-layer { position: absolute; z-index: 14; inset: 0; overflow: hidden; pointer-events: none; }
    .fx-particle { position: absolute; width: var(--size, 34px); height: var(--size, 34px); margin: calc(var(--size, 34px) / -2); background: center / 215% 215% no-repeat; filter: drop-shadow(0 0 5px rgba(255,248,177,.95)); animation: particle var(--duration, .9s) cubic-bezier(.12,.7,.22,1) both; }
    .fx-particle.white-spark { background-image: none !important; background-color: white; clip-path: polygon(50% 0,59% 39%,100% 50%,59% 61%,50% 100%,41% 61%,0 50%,41% 39%); filter: drop-shadow(0 0 6px white) drop-shadow(0 0 10px #fff5a4); }
    .fx-clear-line { position: absolute; right: 0; left: 0; height: 10%; background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.98) 12%, #fff 50%, rgba(255,255,255,.98) 88%, transparent 100%); box-shadow: 0 0 22px white, inset 0 0 14px #fff9b5; mix-blend-mode: screen; animation: clear-line .48s ease-out both; }
    .board-smoke { position: absolute; z-index: 8; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
    .board-smoke.active { opacity: 1; }
    .smoke-puff { position: absolute; left: var(--left); top: var(--top); width: var(--size); height: var(--size); margin: calc(var(--size) / -2); border-radius: 50%; opacity: 0; transform-origin: center; animation: board-smoke-rise var(--duration) var(--delay) ease-in-out infinite; }
    .board-smoke.white .smoke-puff { background: radial-gradient(circle at 42% 40%,rgba(255,255,249,.76) 0 28%,rgba(250,244,226,.42) 50%,rgba(244,232,205,0) 74%); filter: blur(2px); }
    .board-smoke.dark::before { content: ""; position: absolute; inset: 0 0 60%; background: radial-gradient(ellipse at 50% 0,rgba(63,44,36,.32),rgba(67,47,39,.13) 46%,transparent 78%); animation: danger-smoke-haze 2.7s ease-in-out infinite alternate; }
    .board-smoke.dark .smoke-puff { background: radial-gradient(circle at 42% 40%,rgba(78,60,49,.7) 0 25%,rgba(66,47,39,.48) 48%,rgba(50,34,29,0) 74%); filter: blur(2.5px); }
    .board-smoke.dark .smoke-puff.local-source { background: radial-gradient(circle at 42% 40%,rgba(93,72,57,.56) 0 24%,rgba(72,51,42,.38) 48%,rgba(50,34,29,0) 74%); }
    .board-smoke.dark .smoke-puff.ambient-smoke { filter: blur(6px); }
    .gameover-smoke { position: absolute; z-index: 45; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; }
    .gameover-smoke::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%,rgba(75,55,44,.08),rgba(48,31,25,.72) 78%,rgba(35,21,17,.88)); opacity: 0; }
    .gameover-smoke.active { animation: gameover-smoke-layer .82s ease-out both; }
    .gameover-smoke.active::before { animation: gameover-smoke-dim .9s .2s ease-out both; }
    .gameover-smoke .smoke-puff { z-index: 1; background: radial-gradient(circle at 42% 40%,rgba(73,55,46,.9) 0 26%,rgba(51,35,30,.72) 48%,rgba(34,22,19,0) 74%); filter: blur(4px); animation-name: gameover-smoke-fill; animation-iteration-count: 1; animation-fill-mode: both; }
    .fx-tool-badge { position: absolute; z-index: 18; left: 50%; top: 42%; transform: translate(-50%,-50%); min-width: 150px; padding: 11px 18px; border: 3px solid #fff2b3; border-radius: 999px; color: #8b3914; background: linear-gradient(135deg,#fff9d8,#ffc65a); box-shadow: 0 5px 0 #c56a20,0 10px 24px rgba(105,44,4,.32); font-size: clamp(16px,5vw,25px); font-weight: 1000; text-align: center; text-shadow: 0 1px white; animation: tool-badge .75s ease both; }
    .fx-recipe-unlock { position: absolute; z-index: 19; left: 50%; top: 39%; width: min(88%,390px); min-height: 132px; display: grid; grid-template-columns: 34% 1fr; align-items: center; gap: 10px; padding: 17px 14px 13px; border: 4px solid #f3b340; border-radius: 25px; color: #75320f; background: linear-gradient(145deg,#fffdf0,#ffe7a0); box-shadow: inset 0 3px white,0 7px 0 #bd621a,0 16px 30px rgba(82,31,4,.38); transform: translate(-50%,-50%); overflow: visible; pointer-events: none; animation: recipe-unlock-card 2.1s cubic-bezier(.2,.82,.2,1) both; }
    .fx-recipe-unlock::before,.fx-recipe-unlock::after { content: ""; position: absolute; width: 18px; height: 18px; background: #fff7b8; clip-path: polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%); filter: drop-shadow(0 0 6px #fff2a2); animation: unlock-card-sparkle .72s ease-in-out infinite alternate; }
    .fx-recipe-unlock::before { left: -8px; top: 24px; }
    .fx-recipe-unlock::after { right: -7px; bottom: 20px; animation-delay: .22s; }
    .fx-recipe-ribbon { position: absolute; left: 50%; top: -16px; min-width: 148px; padding: 5px 15px; border: 3px solid #ffe7a0; border-radius: 999px; color: white; background: linear-gradient(#f57a39,#dc4d20); box-shadow: 0 3px 0 #a94418; transform: translateX(-50%); font-size: 11px; font-weight: 1000; letter-spacing: .12em; text-align: center; }
    .fx-recipe-art-wrap { position: relative; width: 100%; aspect-ratio: 1.12; display: grid; place-items: center; overflow: hidden; border: 3px solid #eeb765; border-radius: 18px; background: radial-gradient(circle,#fffdf4 0 52%,#f7d99b 53% 54%,#fff0c9 55%); box-shadow: inset 0 2px white,0 3px 6px rgba(100,42,5,.15); }
    .fx-recipe-art-wrap img { width: 94%; height: 94%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(93,39,5,.2)); }
    .fx-recipe-copy { min-width: 0; text-align: left; }
    .fx-recipe-copy small { display: block; color: #d26822; font-size: 10px; font-weight: 1000; letter-spacing: .06em; }
    .fx-recipe-copy strong { display: block; margin: 3px 0 5px; color: #76300d; font-size: clamp(18px,4.6vw,24px); font-weight: 1000; line-height: 1.08; }
    .fx-recipe-copy span { display: block; overflow: hidden; color: #9a6336; font-size: 9px; font-weight: 900; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
    .fx-recipe-reward { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px 8px; border: 1.5px solid #e5a54a; border-radius: 999px; background: rgba(255,250,222,.9); color: #a34d18; font-size: 9px; font-weight: 1000; }
    .fx-recipe-reward img { width: 18px; height: 18px; object-fit: contain; }
    .fx-tool-sweep { position: absolute; z-index: 12; left: -20%; width: 140%; height: 13%; border-top: 3px solid rgba(255,255,255,.9); border-bottom: 3px solid rgba(255,255,255,.9); background: linear-gradient(90deg,transparent,rgba(255,247,168,.88),rgba(255,255,255,.96),rgba(255,247,168,.88),transparent); box-shadow: 0 0 24px #fff2a2; transform: rotate(-7deg); mix-blend-mode: screen; animation: tool-sweep .5s ease-out both; }
    .fx-tool-ring { position: absolute; z-index: 13; border: 5px solid #fff4a5; border-radius: 20px; box-shadow: 0 0 0 5px rgba(240,139,39,.65),0 0 24px #fff3a4,inset 0 0 18px rgba(255,255,255,.8); animation: tool-ring .55s ease-out both; }
    .fx-cut-line { position: absolute; z-index: 13; width: 4px; height: 9%; margin-left: -2px; border-radius: 99px; background: white; box-shadow: 0 0 5px white,0 0 13px #ffb72f; animation: cut-line .46s ease-out both; }
    .level-banner { position: absolute; z-index: 16; left: 50%; top: 36%; width: 72%; aspect-ratio: 2.4; transform: translate(-50%,-50%) scale(.5); display: grid; place-items: center; color: #9a3f15; background: url("../assets/breakfast/spritegen-runs/breakfast-static-v1/run/curated/transitions-level-transition-badge.webp") center / 205% 205% no-repeat; font-size: 26px; font-weight: 1000; opacity: 0; pointer-events: none; }
    .level-banner.show { animation: levelup 1.05s ease both; }

    .preview-wrap { position: absolute; z-index: 10; top: 72.7%; left: 10.55%; width: 78.9%; height: 3.05%; padding: 4px 7px; border: 3px solid #f3b86a; border-radius: 999px; background: linear-gradient(#fff8df,#ffe4ad); box-shadow: inset 0 2px 4px rgba(124,55,14,.25),0 2px 0 #b86120,0 3px 7px rgba(85,34,6,.22); }
    .preview-label { display: none; }
    .preview-row { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 999px; background: rgba(255,244,214,.72); box-shadow: inset 0 1px 3px rgba(116,53,14,.18); }
    .preview-row::after { content: ""; position: absolute; inset: 0; z-index: 2; background-image: linear-gradient(to right, rgba(167,88,39,.12) 1px,transparent 1px); background-size: 12.5% 100%; pointer-events: none; }
    .preview-block { position: absolute; z-index: 1; top: 18%; height: 64%; overflow: hidden; border: 1px solid #f27f83; border-radius: 999px; color: transparent; background: linear-gradient(#ff9da0,#ef6f75); box-shadow: inset 0 1px rgba(255,255,255,.68),0 1px 2px rgba(128,45,39,.24); font-size: 0; }
    .preview-row.is-double .preview-block { height: 42%; }
    .preview-row.is-double .preview-block[data-preview-row="0"] { top: 4%; }
    .preview-row.is-double .preview-block[data-preview-row="1"] { top: 54%; }
    .preview-block.frozen-preview { border-color: #9adcf4; background: linear-gradient(#ecfbff,#9ddbef); box-shadow: inset 0 0 3px white,0 1px 2px rgba(48,125,163,.35); }
    .preview-wrap.double-warning { border-color: #ee8242; animation: preview-warning-pulse 1.15s ease-in-out infinite; }
    .preview-wrap.double-warning::before { content: "下一回合雙排"; position: absolute; z-index: 5; right: 7px; top: -20px; padding: 3px 7px; border: 2px solid #f2a24b; border-radius: 999px; color: #8b390f; background: #fff1b8; box-shadow: 0 2px 0 #bf651f; font-size: 8px; font-weight: 1000; white-space: nowrap; }
    .statusline { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: -2px 5% 8px; padding: 8px 12px; border: 2px solid #e9a54a; border-radius: 16px; color: #88502b; background: rgba(255,249,224,.94); font-size: 11px; box-shadow: 0 4px 8px rgba(105,44,7,.15); }
    #phaseText { flex: 0 0 auto; color: #bf651e; font-weight: 900; }

    .control-deck { position: absolute; z-index: 9; top: 77.1%; left: 6.2%; width: 87.6%; height: 18.1%; border: 3px solid #e6a33c; border-radius: 7% 7% 9% 9% / 14% 14% 10% 10%; background: linear-gradient(145deg,#fff9df,#ffe9b8); box-shadow: inset 0 3px 0 white,inset 0 -5px 12px rgba(190,106,30,.12),0 3px 0 #b9601a; }
    .tool-dock { position: absolute; z-index: 12; top: 79.6%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3,1fr); gap: 7%; width: 70%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .tool-button { position: relative; width: 100%; aspect-ratio: 1; padding: 0; overflow: visible; border: 3px solid #efb34f; border-radius: 24%; background: linear-gradient(145deg,#fffdf2,#ffe7b3); box-shadow: inset 0 3px 0 white,0 4px 0 #bd681d,0 7px 10px rgba(92,38,7,.18); cursor: pointer; filter: none; transition: transform .12s ease,filter .12s ease; }
    .tool-button:hover { filter: drop-shadow(0 4px 3px rgba(92,38,7,.28)) brightness(1.04); }
    .tool-button:active { transform: translateY(3px) scale(.95); }
    .tool-button:disabled { cursor: default; opacity: .58; filter: grayscale(.22); }
    .tool-button.active { opacity: 1; filter: drop-shadow(0 0 7px #fff3a2) drop-shadow(0 0 10px #f08a24) brightness(1.12); animation: target-breathe .65s ease-in-out infinite alternate; }
    .tool-button.pulse { animation: tool-pulse .38s ease; }
    .tool-icon { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; transform: none; }
    .tool-button[data-tool="tongs"] .tool-icon { transform: rotate(-8deg); }
    .tool-button[data-tool="cloche"] .tool-icon { transform: none; }
    .tool-count { position: absolute; z-index: 3; top: -5px; right: -3px; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid #fff6d5; border-radius: 50%; color: white; background: linear-gradient(#ff6472,#e9324e); box-shadow: 0 2px 0 #a42338,0 3px 6px rgba(92,22,20,.3); font-size: 13px; font-weight: 1000; text-shadow: 0 1px #8b2031; }
    .tool-name { display: none; }
    .piggy-bank { position: absolute; z-index: 18; top: 81.1%; right: 6.4%; width: 18.5%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; filter: drop-shadow(0 5px 5px rgba(98,40,8,.3)); pointer-events: none; transform-origin: 55% 74%; }
    .piggy-bank img { width: 100%; height: 100%; object-fit: contain; }
    .piggy-total { position: absolute; right: 0; bottom: -1px; min-width: 42px; padding: 3px 7px; border: 2px solid #fff4c6; border-radius: 999px; color: #7f370d; background: linear-gradient(#ffd75e,#f49a17); box-shadow: 0 2px 0 #ad5512; font-size: 11px; font-weight: 1000; text-align: center; }
    .piggy-gain { position: absolute; left: 50%; top: -5%; color: #c95a12; font-size: 16px; font-weight: 1000; text-shadow: 0 2px white,0 0 8px #fff1a2; opacity: 0; transform: translate(-50%,0); }
    .piggy-bank.collecting { animation: piggy-collect .56s cubic-bezier(.18,1.5,.4,1) both; }
    .piggy-bank.collecting .piggy-gain { animation: piggy-gain .8s ease-out both; }
    .reward-fx-layer { position: absolute; z-index: 22; inset: 0; overflow: visible; pointer-events: none; }
    .reward-coin { position: absolute; width: 8.7%; aspect-ratio: 1; margin: -4.35% 0 0 -4.35%; background: url("../assets/breakfast/spritegen-runs/breakfast-static-v1/run/curated-web/fx-reward-coin-toast-v1.webp") center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(121,54,5,.35)); animation: reward-coin-flight var(--duration,.72s) cubic-bezier(.16,.72,.2,1) both; }

    .side { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 90%; margin: 0 auto; }
    .panel { padding: 10px 12px; border: 2px solid #e9aa55; border-radius: 16px; background: rgba(255,249,228,.94); box-shadow: 0 4px 8px rgba(105,44,7,.14); }
    .panel h2 { margin: 0 0 3px; font-size: 12px; }
    .panel p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.35; }
    .turn-result { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
    .turn-result div { padding: 5px 7px; border: 1px solid #f0c27e; border-radius: 10px; background: #fff8de; }
    .turn-result span { display: block; color: var(--muted); font-size: 8px; }
    .turn-result strong { font-size: 13px; }
    .rule-panel { display: none; }
    .debug-panel { width: 42px; height: 42px; padding: 0; overflow: hidden; transition: width .2s ease,height .2s ease; }
    .debug-panel[open] { width: 240px; height: auto; padding: 10px; }
    .debug-panel summary { display: grid; place-items: center; width: 38px; height: 38px; cursor: pointer; font-size: 0; }
    .debug-panel summary::before { content: "⚙"; font-size: 19px; }
    .debug-panel[open] summary { display: block; width: auto; height: auto; font-size: 11px; font-weight: 900; }
    .debug-panel[open] summary::before { content: ""; }
    .debug-grid { display: grid; gap: 4px; margin-top: 8px; }
    .debug-row { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; line-height: 1.3; }
    .debug-row span { color: var(--muted); }
    .debug-row strong { max-width: 58%; text-align: right; overflow-wrap: anywhere; }

    .modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(76,31,6,.63); backdrop-filter: blur(5px); }
    .modal-card { position: relative; width: min(100%,430px); max-height: 92svh; overflow: auto; padding: 126px 34px 32px; border: 4px solid #f1ab35; border-radius: 40px 40px 28px 28px; background: linear-gradient(#fffdf0,#fff2cf); box-shadow: inset 0 0 0 5px #fff8db,0 20px 45px rgba(61,23,2,.45); text-align: center; }
    .modal-mascot { position: absolute; top: -14px; left: 50%; width: 170px; height: 150px; transform: translateX(-50%); object-fit: fill; clip-path: inset(16% 22% 13% 22%); }
    .modal-card h2 { margin: 0 0 7px; color: #9a4014; font-size: 27px; }
    .modal-card p { margin: 7px 0; color: #8b5a33; font-size: 13px; line-height: 1.45; }
    .modal-card ul { margin: 10px 0 15px; padding-left: 22px; color: #8b5a33; font-size: 12px; line-height: 1.5; text-align: left; }
    .modal.tutorial-open .modal-card { width: min(92%,390px); max-height: 92svh; padding: 88px 22px 20px; overflow: hidden; }
    .modal.tutorial-open .modal-mascot { top: -5px; width: 122px; height: 108px; }
    .modal.tutorial-open .modal-card h2 { font-size: 23px; }
    .tutorial-progress { display: flex; justify-content: center; gap: 7px; margin: 4px 0 11px; }
    .tutorial-progress i { width: 25px; height: 6px; border-radius: 99px; background: #efd39b; box-shadow: inset 0 1px rgba(100,45,8,.16); }
    .tutorial-progress i.active { background: linear-gradient(90deg,#ffad32,#ed691c); }
    .tutorial-panel { padding: 12px; border: 2px solid #efbd6c; border-radius: 18px; background: rgba(255,250,226,.92); }
    .tutorial-panel strong { display: block; color: #83370f; font-size: 17px; }
    .tutorial-panel p { margin: 6px auto 0; max-width: 300px; font-size: 11px; }
    .tutorial-food-demo { width: min(100%,310px); margin: 10px auto 6px; }
    .tutorial-demo-board { position: relative; width: 100%; aspect-ratio: 4 / 1; overflow: hidden; border: 3px solid #d98222; border-radius: 13px; background-color: #ffd46f; background-image: linear-gradient(rgba(202,114,28,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(202,114,28,.32) 1px,transparent 1px),linear-gradient(#ffe89b,#ffc85d); background-size: 12.5% 50%,12.5% 50%,100% 100%; box-shadow: inset 0 2px 0 rgba(255,255,255,.72),0 3px 0 #ad5215; isolation: isolate; }
    .tutorial-food { position: absolute; z-index: 3; left: calc(var(--x) * 12.5% + 2px); top: calc(var(--y) * 50% + 2px); width: calc(var(--len) * 12.5% - 4px); height: calc(50% - 4px); object-fit: fill; filter: drop-shadow(0 2px 1px rgba(97,38,4,.28)); }
    .tutorial-food.bottom { animation: tutorial-food-clear 5s ease-in-out infinite; }
    .tutorial-food.top-fall { animation: tutorial-food-fall 5s ease-in-out infinite; }
    .tutorial-food.moving { z-index: 5; animation: tutorial-food-move-fill 5s ease-in-out infinite; }
    .tutorial-demo-target { position: absolute; z-index: 2; left: calc(4 * 12.5% + 2px); bottom: 2px; width: calc(12.5% - 4px); height: calc(50% - 4px); border: 2px dashed #189d91; border-radius: 7px; background: rgba(202,255,240,.75); animation: tutorial-demo-target 5s ease-in-out infinite; }
    .tutorial-row-clear-flash { position: absolute; z-index: 4; left: 2px; right: 2px; bottom: 2px; height: calc(50% - 4px); border: 3px solid #fff6a3; border-radius: 8px; background: rgba(255,239,89,.28); box-shadow: 0 0 16px #fff061,inset 0 0 13px #fff8b1; opacity: 0; animation: tutorial-row-clear-flash 5s ease-in-out infinite; pointer-events: none; }
    .tutorial-demo-cue { position: absolute; z-index: 7; left: 69%; top: 2px; padding: 2px 6px; border: 1px solid #cf6417; border-radius: 99px; color: #8b390e; background: rgba(255,250,215,.96); box-shadow: 0 2px 3px rgba(89,32,3,.2); font-size: 7px; font-weight: 1000; white-space: nowrap; transform: translateX(-50%); animation: tutorial-demo-cue 5s ease-in-out infinite; }
    .tutorial-demo-phases { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 7px; }
    .tutorial-demo-phases span { padding: 4px 2px; border: 1px solid #e3ae5c; border-radius: 99px; color: #9a6336; background: #fff7d8; font-size: 8px; font-weight: 1000; }
    .tutorial-demo-phases span:nth-child(1) { animation: tutorial-phase-one 5s ease-in-out infinite; }
    .tutorial-demo-phases span:nth-child(2) { animation: tutorial-phase-two 5s ease-in-out infinite; }
    .tutorial-demo-phases span:nth-child(3) { animation: tutorial-phase-three 5s ease-in-out infinite; }
    .tutorial-preview-demo { position: relative; width: min(100%,300px); margin: 11px auto 5px; padding-top: 35px; }
    .tutorial-preview-arrow { position: absolute; top: 0; left: 50%; color: #e56a1b; font-size: 30px; font-weight: 1000; transform: translateX(-50%); animation: tutorial-preview-rise 1.1s ease-in-out infinite; }
    .tutorial-preview-strip { display: grid; grid-template-columns: 2fr 1fr 3fr; gap: 3px; padding: 5px; border: 2px solid #d9902a; border-radius: 99px; background: #fff4cd; }
    .tutorial-preview-strip i { height: 18px; border: 1px solid #f27f83; border-radius: 8px; background: linear-gradient(#ff9da0,#ef6f75); box-shadow: inset 0 2px rgba(255,255,255,.68),0 1px 2px rgba(128,45,39,.24); }
    .tutorial-tool-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 10px auto 4px; }
    .tutorial-tool-overview figure { margin: 0; padding: 7px 3px; border: 1px solid #edbc70; border-radius: 12px; background: #fff8dd; }
    .tutorial-tool-overview img { display: block; width: 44px; height: 44px; margin: auto; object-fit: contain; }
    .tutorial-tool-overview figcaption { margin-top: 2px; color: #7d3c17; font-size: 9px; font-weight: 1000; }
    .tutorial-center-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 10px; }
    .tutorial-center-tool { min-width: 0; padding: 7px 3px; border: 2px solid #e4a64c; border-radius: 13px; color: #7d3c17; background: #fff8dd; box-shadow: inset 0 1px white,0 2px 0 #be782c; font: inherit; font-size: 9px; font-weight: 1000; cursor: pointer; }
    .tutorial-center-tool img { display: block; width: 45px; height: 45px; margin: 0 auto 2px; object-fit: contain; }
    .tutorial-tool-card { display: grid; grid-template-columns: 86px 1fr; gap: 12px; align-items: center; text-align: left; }
    .tutorial-tool-card img { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(95,41,8,.18)); }
    .tutorial-tool-card strong { font-size: 19px; }
    .tutorial-tool-card p { margin: 5px 0 0; }
    .tool-tutorial-card { text-align: center; }
    .tool-tutorial-card > strong { display: block; font-size: 15px; line-height: 1.15; }
    .tool-tutorial-card > p { margin: 6px 0 0; }
    .tool-tutorial-demo { width: min(100%,310px); margin: 10px auto 7px; }
    .tool-demo-board { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; border: 3px solid #d98222; border-radius: 14px; background-color: #ffd46f; background-image: linear-gradient(rgba(202,114,28,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(202,114,28,.3) 1px,transparent 1px),linear-gradient(#ffe89b,#ffc85d); background-size: 12.5% 25%,12.5% 25%,100% 100%; box-shadow: inset 0 2px rgba(255,255,255,.72),0 3px 0 #ad5215; isolation: isolate; }
    .tool-demo-food { position: absolute; z-index: 2; left: calc(var(--x) * 12.5% + 2px); top: calc(var(--y) * 25% + 2px); width: calc(var(--len) * 12.5% - 4px); height: calc(25% - 4px); object-fit: fill; filter: drop-shadow(0 2px 1px rgba(97,38,4,.25)); }
    .tool-demo-actor { position: absolute; z-index: 8; width: 22%; height: 45%; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(75,27,3,.28)); pointer-events: none; }
    .tool-demo-flash { position: absolute; z-index: 6; pointer-events: none; opacity: 0; }
    .tool-demo-case-label { position: absolute; z-index: 7; top: 4px; display: grid; place-items: center; height: calc(25% - 8px); padding: 1px 4px; border: 1px solid #d47720; border-radius: 99px; color: #85370d; background: rgba(255,249,211,.95); box-shadow: 0 1px 2px rgba(92,37,5,.2); font-size: 7px; font-style: normal; font-weight: 1000; line-height: 1; white-space: nowrap; }
    .tool-demo-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 7px; }
    .tool-demo-steps span { padding: 4px 2px; border: 1px solid #e3ae5c; border-radius: 99px; color: #9a6336; background: #fff7d8; font-size: 8px; font-weight: 1000; }
    .spatula-demo .spatula-source { animation: tool-spatula-source 4.6s ease-in-out infinite; }
    .spatula-demo .spatula-piece { opacity: 0; animation: tool-spatula-piece 4.6s ease-in-out infinite; }
    .spatula-demo .tool-demo-actor { left: 70%; top: 1%; animation: tool-spatula-actor 4.6s ease-in-out infinite; }
    .spatula-demo .tool-demo-flash { left: 1%; top: 25%; width: 98%; height: 26%; border: 3px solid #fff49a; border-radius: 9px; box-shadow: 0 0 17px #fff066,inset 0 0 12px #fff5a0; animation: tool-spatula-flash 4.6s ease-in-out infinite; }
    .spatula-demo .case-four { left: 2%; width: 46%; }
    .spatula-demo .case-three { right: 2%; width: 35%; }
    .tongs-demo .tongs-target { animation: tool-tongs-target 4.6s ease-in-out infinite; }
    .tongs-demo .tongs-fall { animation: tool-tongs-fall 4.6s ease-in-out infinite; }
    .tongs-demo .tool-demo-actor { left: 66%; top: 2%; animation: tool-tongs-actor 4.6s ease-in-out infinite; }
    .tongs-demo .tool-demo-flash { inset: 48% 1% 23%; border: 3px solid #fff49a; border-radius: 9px; box-shadow: 0 0 15px #fff066,inset 0 0 11px #fff5a0; animation: tool-tongs-flash 4.6s ease-in-out infinite; }
    .cloche-demo .cloche-clear { animation: tool-cloche-clear 4.6s ease-in-out infinite; }
    .cloche-demo .cloche-fall { animation: tool-cloche-fall 4.6s ease-in-out infinite; }
    .cloche-demo .tool-demo-actor { left: 39%; top: -2%; animation: tool-cloche-actor 4.6s ease-in-out infinite; }
    .cloche-demo .tool-demo-flash { left: 1%; right: 1%; top: 49%; height: 50%; border: 3px solid #69c7ba; border-radius: 10px; background: rgba(104,220,204,.13); box-shadow: 0 0 0 3px rgba(255,255,255,.55),0 0 16px rgba(41,182,168,.7),inset 0 0 13px rgba(255,255,255,.72); animation: tool-cloche-flash 4.6s ease-in-out infinite; }
    .tool-tutorial-demo .tool-demo-steps span:nth-child(1) { animation: tool-step-one 4.6s ease-in-out infinite; }
    .tool-tutorial-demo .tool-demo-steps span:nth-child(2) { animation: tool-step-two 4.6s ease-in-out infinite; }
    .tool-tutorial-demo .tool-demo-steps span:nth-child(3) { animation: tool-step-three 4.6s ease-in-out infinite; }
    @keyframes tutorial-food-move-fill {
      0%,16% { opacity: 1; transform: translate(0,0) scale(1); filter: drop-shadow(0 2px 1px rgba(97,38,4,.28)); }
      31% { opacity: 1; transform: translateX(calc(-100% - 4px)) scale(1.03); }
      46%,54% { opacity: 1; transform: translate(calc(-100% - 4px),calc(100% + 4px)) scale(1); filter: brightness(1.16) drop-shadow(0 0 6px #fff177); }
      66%,96% { opacity: 0; transform: translate(calc(-100% - 4px),calc(100% + 4px)) scale(.78); }
      100% { opacity: 1; transform: translate(0,0) scale(1); }
    }
    @keyframes tutorial-food-clear { 0%,54% { opacity: 1; transform: scale(1); } 66%,96% { opacity: 0; transform: scale(.82); } 100% { opacity: 1; transform: scale(1); } }
    @keyframes tutorial-food-fall { 0%,68% { transform: translateY(0); } 80%,96% { transform: translateY(calc(100% + 4px)); } 100% { transform: translateY(0); } }
    @keyframes tutorial-demo-target { 0%,16% { opacity: 1; box-shadow: 0 0 0 0 rgba(35,169,156,.25); } 30% { opacity: 1; box-shadow: 0 0 0 4px rgba(35,169,156,.22); } 45%,100% { opacity: 0; } }
    @keyframes tutorial-row-clear-flash { 0%,45% { opacity: 0; transform: scaleX(.92); } 52%,58% { opacity: 1; transform: scaleX(1); } 68%,100% { opacity: 0; transform: scaleX(1.02); } }
    @keyframes tutorial-demo-cue { 0%,15% { left: 69%; opacity: 1; } 31% { left: 56.5%; opacity: 1; } 41%,100% { left: 56.5%; opacity: 0; } }
    @keyframes tutorial-phase-one { 0%,34% { color:#7c330e; border-color:#ef801e; background:#ffd36b; } 42%,100% { color:#9a6336; border-color:#e3ae5c; background:#fff7d8; } }
    @keyframes tutorial-phase-two { 0%,34%,68%,100% { color:#9a6336; border-color:#e3ae5c; background:#fff7d8; } 42%,62% { color:#7c330e; border-color:#ef801e; background:#ffd36b; } }
    @keyframes tutorial-phase-three { 0%,64%,100% { color:#9a6336; border-color:#e3ae5c; background:#fff7d8; } 72%,96% { color:#7c330e; border-color:#ef801e; background:#ffd36b; } }
    @keyframes tutorial-preview-rise { 0%,100% { transform: translate(-50%,7px); } 50% { transform: translate(-50%,-1px); } }
    @keyframes tool-spatula-source { 0%,35% { opacity:1; transform:scale(1); } 44%,95% { opacity:0; transform:scale(.93); } 100% { opacity:1; transform:scale(1); } }
    @keyframes tool-spatula-piece { 0%,38% { opacity:0; transform:translateY(0) scale(.82); } 47%,62% { opacity:1; transform:translateY(0) scale(1); } 76%,95% { opacity:1; transform:translateY(calc(200% + 8px)) scale(1); } 100% { opacity:0; transform:translateY(0) scale(.82); } }
    @keyframes tool-spatula-actor { 0%,12% { opacity:0; transform:translate(55%,-8%) rotate(-24deg) scale(.86); } 22%,37% { opacity:1; transform:translate(-120%,72%) rotate(-36deg) scale(1); } 48%,100% { opacity:0; transform:translate(-168%,98%) rotate(-42deg) scale(.92); } }
    @keyframes tool-spatula-flash { 0%,31% { opacity:0; transform:scaleX(.88); } 38%,45% { opacity:1; transform:scaleX(1); } 55%,100% { opacity:0; transform:scaleX(1.04); } }
    @keyframes tool-tongs-target { 0%,26% { opacity:1; filter:drop-shadow(0 0 7px #fff06a); transform:scale(1.06); } 50%,95% { opacity:0; transform:scale(.65); } 100% { opacity:1; transform:scale(1); } }
    @keyframes tool-tongs-fall { 0%,55% { transform:translateY(0); } 72%,95% { transform:translateY(calc(100% + 4px)); } 100% { transform:translateY(0); } }
    @keyframes tool-tongs-actor { 0%,12% { opacity:0; transform:translate(70%,-15%) rotate(-10deg); } 22% { opacity:1; transform:translate(-5%,70%) rotate(-18deg); } 42% { opacity:1; transform:translate(-190%,88%) rotate(-25deg); } 55%,100% { opacity:0; transform:translate(-270%,45%) rotate(-30deg); } }
    @keyframes tool-tongs-flash { 0%,18% { opacity:0; } 25%,44% { opacity:1; } 58%,100% { opacity:0; } }
    @keyframes tool-cloche-clear { 0%,42% { opacity:1; transform:scale(1); } 58%,95% { opacity:0; transform:scale(.78); } 100% { opacity:1; transform:scale(1); } }
    @keyframes tool-cloche-fall { 0%,60% { transform:translateY(0); } 77%,95% { transform:translateY(calc(200% + 8px)); } 100% { transform:translateY(0); } }
    @keyframes tool-cloche-actor { 0%,15% { opacity:0; transform:translateY(-45%) scale(.78); } 28%,48% { opacity:1; transform:translateY(105%) scale(1.12); } 60%,100% { opacity:0; transform:translateY(118%) scale(.96); } }
    @keyframes tool-cloche-flash { 0%,18% { opacity:0; transform:scale(.96); } 27%,50% { opacity:1; transform:scale(1); } 62%,100% { opacity:0; transform:scale(1.02); } }
    @keyframes tool-step-one { 0%,29% { color:#7c330e; border-color:#ef801e; background:#ffd36b; } 36%,100% { color:#9a6336; border-color:#e3ae5c; background:#fff7d8; } }
    @keyframes tool-step-two { 0%,29%,68%,100% { color:#9a6336; border-color:#e3ae5c; background:#fff7d8; } 36%,62% { color:#7c330e; border-color:#ef801e; background:#ffd36b; } }
    @keyframes tool-step-three { 0%,64%,100% { color:#9a6336; border-color:#e3ae5c; background:#fff7d8; } 72%,95% { color:#7c330e; border-color:#ef801e; background:#ffd36b; } }
    @media (prefers-reduced-motion: reduce) {
      .tutorial-food,.tutorial-demo-target,.tutorial-row-clear-flash,.tutorial-demo-cue,.tutorial-demo-phases span { animation: none !important; }
      .tutorial-food.moving { transform: translate(calc(-100% - 4px),calc(100% + 4px)); }
      .tutorial-demo-target,.tutorial-demo-cue { display: none; }
    }
    .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 14px 0; }
    .summary-grid div { padding: 9px; border: 2px solid #efbd6c; border-radius: 13px; background: #fff7d8; }
    .summary-grid .summary-wide { grid-column: 1 / -1; }
    .summary-grid span { display: block; color: var(--muted); font-size: 9px; }
    .summary-grid strong { font-size: 18px; }
    .satisfaction-summary { margin: 11px 0 4px; padding: 11px 12px; border: 2px solid #efad45; border-radius: 17px; background: linear-gradient(145deg,#fff4bd,#ffe096); box-shadow: inset 0 2px rgba(255,255,255,.75); }
    .satisfaction-summary small,.satisfaction-summary strong,.satisfaction-summary span { display: block; }
    .satisfaction-summary small { color: #9b642f; font-size: 10px; font-weight: 900; }
    .satisfaction-summary strong { margin: 2px 0; color: #c84e18; font-size: 30px; line-height: 1; }
    .satisfaction-summary span { color: #895027; font-size: 10px; font-weight: 900; }
    .tip-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -5px 0 12px; padding: 8px 11px; border-radius: 13px; color: #864417; background: #fff0bd; font-size: 10px; font-weight: 900; }
    .tip-summary strong { color: #d05b16; font-size: 16px; white-space: nowrap; }
    .actions { display: grid; gap: 8px; margin-top: 14px; }
    .button { min-height: 48px; padding: 9px 14px; border: 3px solid #c85917; border-radius: 16px; color: #fffaf0; background: linear-gradient(#ff9b32,#ed671d); box-shadow: inset 0 2px #ffc66a,0 4px 0 #aa4314; font-weight: 1000; cursor: pointer; }
    .button.secondary { color: #87421b; border-color: #d79c46; background: linear-gradient(#fff7da,#ffe1a4); box-shadow: inset 0 2px #fff,0 4px 0 #ba782c; }
    .button:active { transform: translateY(3px); box-shadow: inset 0 2px rgba(255,255,255,.5),0 1px 0 #a84414; }
    .stat #bestScore:not([hidden]) { display: block; margin-top: -2px; color: #a86631; font-size: 8px; font-weight: 900; }
    .modal.campaign-complete-open { padding: 12px; }
    .modal.campaign-complete-open .modal-card { width: min(92%,380px); max-height: 88svh; overflow: hidden; padding: 78px 20px 18px; border-width: 3px; border-radius: 31px 31px 24px 24px; box-shadow: inset 0 0 0 4px #fff8db,0 16px 32px rgba(61,23,2,.4); }
    .modal.campaign-complete-open .modal-mascot { top: -6px; width: 118px; height: 104px; clip-path: inset(15% 19% 11% 19%); }
    .modal.campaign-complete-open .modal-card h2 { margin-bottom: 4px; font-size: 23px; }
    .modal.campaign-complete-open .modal-card p { margin: 5px 0; font-size: 10px; line-height: 1.3; }
    .modal.campaign-complete-open .summary-grid { gap: 6px; margin: 8px 0; }
    .modal.campaign-complete-open .summary-grid div { padding: 7px 8px; border-width: 1px; border-radius: 11px; }
    .modal.campaign-complete-open .summary-grid span { font-size: 8px; }
    .modal.campaign-complete-open .summary-grid strong { font-size: 14px; line-height: 1.2; }
    .modal.campaign-complete-open .actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 9px; }
    .modal.campaign-complete-open #campaignTipAdButton { grid-column: 1 / -1; }
    .modal.campaign-complete-open.campaign-has-next #nextCampaignButton { grid-column: 1 / -1; }
    .modal.campaign-complete-open .button { min-height: 40px; padding: 7px 8px; border-width: 2px; border-radius: 13px; box-shadow: inset 0 1px #ffc66a,0 3px 0 #aa4314; font-size: 12px; }
    .modal.campaign-complete-open .button.secondary { box-shadow: inset 0 1px white,0 3px 0 #ba782c; }
    @media (max-height: 700px) {
      .modal.campaign-complete-open { padding: 8px; }
      .modal.campaign-complete-open .modal-card { width: min(90%,360px); max-height: 94svh; padding: 62px 16px 13px; }
      .modal.campaign-complete-open .modal-mascot { top: -3px; width: 96px; height: 84px; }
      .modal.campaign-complete-open .modal-card h2 { font-size: 20px; }
      .modal.campaign-complete-open .summary-grid { margin-block: 6px; }
      .modal.campaign-complete-open .summary-grid div { padding-block: 5px; }
      .modal.campaign-complete-open .actions { margin-top: 7px; }
      .modal.campaign-complete-open .button { min-height: 36px; padding-block: 5px; }
    }

    @keyframes flash { from { opacity: 1; } to { opacity: 0; } }
    @keyframes row-clear-shake { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-7px); } 38% { transform: translateX(6px); } 58% { transform: translateX(-4px); } 78% { transform: translateX(3px); } }
    @keyframes serving-badge-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(-5deg); } 22% { opacity: 1; transform: translate(-50%,-50%) scale(1.06) rotate(1.5deg); } 38%,78% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(.98); } }
    @keyframes serving-badge-convert-lite { 0% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 45% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.18) rotate(8deg); } }
    @keyframes serving-badge-convert { 0% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: brightness(1) drop-shadow(0 9px 8px rgba(100,38,5,.28)); } 45% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); filter: brightness(1.75) drop-shadow(0 0 18px #fff0a1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.18) rotate(8deg); filter: brightness(2); } }
    @keyframes reward-coin-flight { 0% { opacity: 0; transform: translate(0,0) scale(.18) rotate(0deg); } 15% { opacity: 1; transform: translate(var(--burst-x),var(--burst-y)) scale(1.08) rotate(70deg); } 52% { opacity: 1; transform: translate(var(--mid-x),var(--mid-y)) scale(.82) rotate(220deg); } 100% { opacity: 1; transform: translate(var(--end-x),var(--end-y)) scale(.25) rotate(520deg); } }
    @keyframes piggy-collect { 0%,100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.15) rotate(-5deg); filter: drop-shadow(0 0 13px #ffd74e); } 58% { transform: scale(.94) rotate(4deg); } 78% { transform: scale(1.05) rotate(-2deg); } }
    @keyframes piggy-gain { 0% { opacity: 0; transform: translate(-50%,8px) scale(.6); } 22%,60% { opacity: 1; transform: translate(-50%,-10px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%,-34px) scale(.9); } }
    @keyframes particle { 0% { opacity: 0; transform: translate(0,0) scale(.15) rotate(0); } 18% { opacity: 1; transform: translate(calc(var(--dx) * .18),calc(var(--dy) * .12)) scale(1.2) rotate(28deg); } 58% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.42) rotate(var(--spin, 150deg)); } }
    @keyframes board-smoke-rise { 0% { opacity: 0; transform: translate(-3px,8px) scale(.5); } 18% { opacity: var(--peak,.55); } 62% { opacity: calc(var(--peak,.55) * .8); } 100% { opacity: 0; transform: translate(var(--drift,10px),-58px) scale(1.65); } }
    @keyframes danger-smoke-haze { from { opacity: .55; transform: scaleX(.96); } to { opacity: 1; transform: scaleX(1.04); } }
    @keyframes gameover-smoke-layer { from { opacity: 0; } to { opacity: 1; } }
    @keyframes gameover-smoke-dim { from { opacity: 0; } to { opacity: 1; } }
    @keyframes gameover-smoke-fill { 0% { opacity: 0; transform: translate(0,80px) scale(.35); } 24% { opacity: .8; } 100% { opacity: .92; transform: translate(var(--drift,18px),var(--rise,-260px)) scale(2.15); } }
    @keyframes clear-line { 0% { opacity: 0; transform: scaleX(.1); } 28% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.08); } }
    @keyframes levelup { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 20%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-65%) scale(.9); } }
    @keyframes frost-crack { 0% { opacity: 1; filter: brightness(1); transform: scale(1); } 55% { opacity: .95; filter: brightness(1.45); transform: scale(1.04); } 100% { opacity: 0; filter: brightness(1.8); transform: scale(1.12); } }
    @keyframes preview-warning-pulse { 0%,100% { box-shadow: inset 0 2px 4px rgba(124,55,14,.25),0 2px 0 #b86120,0 3px 7px rgba(85,34,6,.22); } 50% { box-shadow: inset 0 2px 4px rgba(124,55,14,.25),0 2px 0 #b86120,0 0 10px rgba(245,121,47,.72); } }
    @keyframes tool-pulse { 0%,100% { transform: scale(1); } 45% { transform: scale(.9) rotate(-3deg); } 70% { transform: scale(1.04) rotate(2deg); } }
    @keyframes target-breathe { from { transform: scale(.97); } to { transform: scale(1.035); } }
    @keyframes tool-slice-block { 0%,100% { filter: brightness(1); } 45% { filter: brightness(1.8) drop-shadow(0 0 10px #fff09a); transform: scale(1.05); } }
    @keyframes tool-remove-block { 0% { opacity: 1; transform: translateY(0) scale(1); } 45% { opacity: 1; transform: translateY(-18%) scale(1.08) rotate(-2deg); filter: brightness(1.4) drop-shadow(0 0 12px #fff1a0); } 100% { opacity: 0; transform: translateY(-85%) scale(.45) rotate(8deg); } }
    @keyframes tool-badge { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.45) rotate(-4deg); } 22%,70% { opacity: 1; transform: translate(-50%,-50%) scale(1.04) rotate(1deg); } 100% { opacity: 0; transform: translate(-50%,-70%) scale(.88); } }
    @keyframes recipe-unlock-card { 0% { opacity: 0; transform: translate(-50%,-44%) scale(.45) rotate(-4deg); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1.06) rotate(1deg); } 26%,78% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); } 100% { opacity: 0; transform: translate(-50%,-70%) scale(.9); } }
    @keyframes unlock-card-sparkle { from { opacity: .35; transform: scale(.7) rotate(0); } to { opacity: 1; transform: scale(1.25) rotate(38deg); } }
    @keyframes tool-sweep { 0% { opacity: 0; top: 92%; } 20% { opacity: 1; } 100% { opacity: 0; top: -12%; } }
    @keyframes tool-ring { 0% { opacity: 0; transform: scale(.55); } 28%,65% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.35); } }
    @keyframes cut-line { 0% { opacity: 0; transform: translateY(-45%) scaleY(.2); } 35% { opacity: 1; transform: translateY(0) scaleY(1.15); } 100% { opacity: 0; transform: translateY(28%) scaleY(.7); } }
    @media (max-width: 520px) {
      html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
      .game-app { width: 100%; height: 100svh; min-height: 0; overflow: hidden; padding: max(4px, env(safe-area-inset-top)) 4px max(3px, env(safe-area-inset-bottom)); }
      .topbar { gap: 4px; }
      .brand { padding-left: 6px; }
      .eyebrow { font-size: 7px; letter-spacing: .08em; }
      h1 { font-size: 20px; }
      .icon-button { width: 40px; height: 40px; border-radius: 13px; }
      .stats { gap: 4px; }
      .stat { min-height: 42px; padding: 4px 2px 3px; border-width: 1px; border-radius: 13px; box-shadow: inset 0 1px #fff,0 2px 0 #c77824,0 3px 6px rgba(120,54,8,.14); }
      .stat span { font-size: 8px; }
      .stat strong { font-size: 14px; }
      .instruction { min-height: 36px; margin: 5px 4% 0; padding: 5px 9px; border-width: 1px; border-radius: 13px; }
      .instruction strong { font-size: 11px; line-height: 1.1; }
      .instruction small { display: none; }
      .state-badge { padding: 4px 7px; border-width: 1px; font-size: 8px; }
      .board-column { width: min(100%, calc((100svh - 204px) * 930 / 1429)); }
      .machine { margin-top: -2px; }
      .preview-wrap { padding: 3px 5px; border-width: 2px; }
      .tool-dock { top: 79.6%; gap: 6%; width: 72%; margin: 0; padding: 0; }
      .tool-button { border-radius: 20%; filter: drop-shadow(0 2px 1px rgba(92,38,7,.2)); }
      .tool-count { top: -3px; right: -2px; width: 21px; height: 21px; border-width: 1px; font-size: 10px; }
      .statusline, .side { display: none; }
    }
    @media (max-width: 380px) { .modal-card { padding-inline: 24px; } .modal.tutorial-open .modal-card { padding: 72px 15px 14px; } .modal.tutorial-open .modal-mascot { width: 104px; height: 92px; } .tutorial-panel { padding: 9px; } .tutorial-tool-card { grid-template-columns: 70px 1fr; gap: 8px; } .tutorial-tool-card img { width: 68px; height: 68px; } .tool-dock { width: 73%; gap: 5%; } }
    @media (min-width: 900px) { body { padding: 16px 0; } .game-app { min-height: calc(100svh - 32px); border-radius: 30px; } }
    @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

    /* Gameplay v3：以料理盤為主視覺，對齊直式手遊樣板。 */
    .game-app { position: relative; width: min(100%,540px); min-height: 100svh; padding: max(9px,env(safe-area-inset-top)) 9px max(10px,env(safe-area-inset-bottom)); background: linear-gradient(rgba(255,247,218,.9),rgba(255,236,184,.94)), url("../assets/breakfast/spritegen-runs/breakfast-static-v1/run/curated-web/ui-frame-bg-breakfast-shop-day.webp") center / cover no-repeat; }
    .game-app .topbar { grid-template-columns: minmax(0,1fr) 68px 50px; gap: 7px; align-items: stretch; padding: 0 3px; }
    .game-app .brand { display: none; }
    .game-app .stats { grid-column: 1; grid-row: 1; gap: 5px; }
    .game-app .pause-button { grid-column: 3; grid-row: 1; width: 50px; height: 50px; min-height: 0; align-self: center; border-radius: 17px; }
    .game-app .topbar .piggy-bank { position: relative; z-index: 3; grid-column: 4; grid-row: 1; top: auto; right: auto; width: 68px; height: 58px; align-self: center; aspect-ratio: auto; }
    .game-app .topbar .piggy-bank img { object-fit: contain; transform: scale(1.1); }
    .game-app .topbar .piggy-total { right: -2px; bottom: -1px; min-width: 35px; padding: 2px 5px; font-size: 9px; }
    .game-app .stat { min-height: 58px; padding: 6px 3px; border-width: 3px; border-radius: 18px; }
    .game-app .stat span { color: #8d471c; font-size: 12px; }
    .game-app .stat strong { color: #79350f; font-size: 21px; }
    .game-app .instruction { display: none; }
    .game-app.tutorial-active .instruction { position: absolute; z-index: 30; top: 64px; left: 50%; width: min(86%,420px); min-height: 36px; transform: translateX(-50%); display: flex; margin: 0; padding: 4px 10px; border-width: 1px; border-radius: 14px; box-shadow: 0 4px 12px rgba(105,43,4,.22); }
    .game-app.tutorial-active .instruction strong { font-size: 11px; line-height: 1.08; }
    .game-app.tutorial-active .instruction small { margin-top: 1px; font-size: 8px; line-height: 1.08; }
    .game-app .game-layout { margin-top: 7px; }
    .game-app .board-column { width: min(100%,520px); }
    .game-app .machine { margin: 0 auto; }
    .game-app .statusline { width: 90%; min-height: 42px; margin: -2px auto 0; border: 3px solid #9d511b; border-radius: 15px; color: #fff5d5; background: linear-gradient(#84420f,#5d2b09); box-shadow: inset 0 2px rgba(255,217,131,.25),0 4px 0 #3d1b05,0 7px 12px rgba(70,27,3,.22); font-size: 12px; text-align: center; }
    .game-app .statusline span:first-child { flex: 1; }
    .game-app #phaseText { display: none; }
    .game-app .side { display: none; }
    @media (max-width: 520px) {
      .game-app { height: 100svh; overflow: hidden; padding-inline: 4px; }
      .game-app .topbar { grid-template-columns: minmax(0,1fr) 55px 44px; gap: 4px; padding-inline: 4px; }
      .game-app .pause-button { width: 44px; height: 44px; min-height: 0; }
      .game-app .topbar .piggy-bank { width: 55px; height: 50px; }
      .game-app .stat { min-height: 50px; border-width: 2px; border-radius: 14px; }
      .game-app .stat span { font-size: 10px; }
      .game-app .stat strong { font-size: 18px; }
      .game-app .game-layout { margin-top: 4px; }
      .game-app .board-column { width: min(100%,calc((100svh - 112px) * 941 / 1672)); }
      .game-app .statusline { display: flex; min-height: 38px; margin-top: -7px; padding: 6px 10px; font-size: 10px; }
      .game-app.tutorial-active .instruction { top: 58px; width: 84%; min-height: 32px; padding: 3px 8px; }
      .combo-pop { width: 96%; }
    }

    /* PK 實戰：1 分鐘計時、最後 10 秒警示、出餐競速與簡化對手盤面。 */
    .pk-live-hud { display: none; }
    .game-app[data-mode="pk"] .topbar { display: none; }
    .game-app[data-mode="pk"] .pk-live-hud { position: relative; z-index: 25; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) 38px 44px; gap: 4px; align-items: center; padding: 3px; }
    .pk-live-hud .audio-toggle { grid-column: 4; width: 38px; height: 46px; border-radius: 14px; }
    .pk-live-hud .audio-toggle .audio-wave { left: 22px; }
    .pk-live-hud .audio-toggle.muted .audio-wave { left: 25px; }
    .pk-player-card { min-width: 0; display: grid; grid-template-columns: 34px 1fr; gap: 4px; align-items: center; min-height: 58px; padding: 5px 7px; border: 3px solid #e39a31; border-radius: 18px; color: #7b3512; background: linear-gradient(#fff5cc,#ffc94f); box-shadow: inset 0 2px white,0 3px 0 #b85a17,0 5px 9px rgba(102,42,5,.2); }
    .pk-player-card.pk-opponent-tone { grid-template-columns: 1fr 34px; border-color: #65a6dd; color: #22558a; background: linear-gradient(#effaff,#acd9fa); box-shadow: inset 0 2px white,0 3px 0 #397fb9,0 5px 9px rgba(32,78,118,.2); text-align: right; }
    .pk-player-card img,.pk-rabbit-avatar { width: 34px; height: 34px; display: grid; place-items: center; object-fit: cover; border: 2px solid white; border-radius: 50%; background: #fff3c5; }
    .pk-rabbit-avatar { object-position: 88% 30%; }
    .pk-player-card > span { min-width: 0; }
    .pk-player-card small,.pk-player-card strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .pk-player-card small { font-size: 8px; font-weight: 900; }
    .pk-player-card strong { font-size: 14px; line-height: 1.05; }
    .pk-timer { min-width: 82px; padding: 7px 8px 5px; border: 3px solid #eca942; border-radius: 17px; color: #71300f; background: linear-gradient(#fffdf1,#ffe2a0); box-shadow: inset 0 2px white,0 3px 0 #bd651d,0 5px 9px rgba(97,39,4,.2); text-align: center; }
    .pk-timer b { display: block; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
    .pk-timer small { display: block; margin-top: 2px; color: #ad6224; font-size: 7px; font-weight: 1000; }
    .pk-timer.urgent { color: white; border-color: #ffb04b; background: linear-gradient(#ff8b32,#e74220); animation: pk-urgent .8s ease-in-out infinite alternate; }
    .pk-timer.urgent small { color: #fff2c8; }
    .pk-final-countdown { position: absolute; z-index: 42; top: 64px; left: 50%; width: min(72%,310px); height: 58px; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 5px 8px rgba(102,21,4,.32)); }
    .pk-final-countdown > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
    .pk-final-countdown-copy { position: relative; z-index: 1; height: 100%; display: grid; place-content: center; padding-left: 25%; color: #fff7d6; text-align: center; text-shadow: 0 2px 0 #7d180b; }
    .pk-final-countdown strong { display: block; font-size: 18px; line-height: 1; letter-spacing: .04em; }
    .pk-final-countdown small { display: block; margin-top: 3px; font-size: 8px; font-weight: 900; }
    .pk-final-countdown.tick { animation: pk-countdown-tick .34s ease both; }
    .pk-final-countdown.critical { filter: drop-shadow(0 0 14px #ff3d1f) drop-shadow(0 5px 8px rgba(102,21,4,.4)); }
    .game-app.pk-final-ten::after { content: ""; position: fixed; z-index: 20; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px rgba(219,42,18,.42); animation: pk-vignette .72s ease-in-out infinite alternate; }
    .game-app .pk-live-hud .pk-live-pause { grid-column: 5; grid-row: 1; width: 44px; height: 58px; min-height: 0; border: 0; border-radius: 16px; background-color: transparent; }
    .game-app[data-mode="pk"] .game-layout { margin-top: 2px; }
    .game-app[data-mode="pk"] .board-column { position: relative; width: min(100%,520px); padding-right: 84px; }
    .game-app[data-mode="pk"] .machine { width: 100%; }
    .game-app[data-mode="pk"] .piggy-bank { display: none; }
    .pk-opponent-panel { display: none; }
    .game-app[data-mode="pk"] .pk-opponent-panel { position: absolute; z-index: 21; top: 9.8%; right: 0; display: block; width: 78px; padding: 5px; border: 3px solid #e6a344; border-radius: 16px; color: #71350f; background: linear-gradient(#fff9df,#ffe2a1); box-shadow: inset 0 2px white,0 4px 0 #ad5a18,0 7px 12px rgba(81,31,3,.25); text-align: center; }
    .pk-opponent-panel.danger { border-color: #ff5f3c; box-shadow: inset 0 2px #fff1d5,0 0 0 3px rgba(238,61,36,.24),0 0 15px #ff5c35; animation: pk-danger .58s ease-in-out infinite alternate; }
    .pk-opponent-panel.topout { color: white; border-color: #6c2517; background: linear-gradient(#e5532d,#812417); }
    .pk-opponent-panel h3 { margin: 0 0 4px; font-size: 9px; }
    .pk-mini-board { display: grid; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(10,1fr); aspect-ratio: 8 / 10; overflow: hidden; border: 2px solid #9a4e1a; border-radius: 5px; background: #ffd36c; }
    .pk-mini-cell { border-right: 1px solid rgba(138,65,18,.24); border-bottom: 1px solid rgba(138,65,18,.24); background: rgba(255,225,132,.75); }
    .pk-mini-cell.filled { background: linear-gradient(135deg,#f49c23,#c86416); }
    .pk-mini-cell.danger-row { background: rgba(221,57,31,.7); }
    .pk-mini-cell.clearing { background: white; box-shadow: 0 0 6px white; }
    .pk-opponent-combo { min-height: 16px; margin-top: 4px; color: #d65416; font-size: 9px; font-weight: 1000; opacity: 0; transform: scale(.75); }
    .pk-opponent-combo.show { animation: pk-combo .9s ease both; }
    .pk-opponent-status { display: block; margin-top: 2px; color: #9a5523; font-size: 7px; font-weight: 900; }
    .pk-opponent-panel.topout .pk-opponent-status { color: #fff0ca; }
    .pk-result-card { overflow: hidden; padding-top: 18px; border-color: #efac38; background: radial-gradient(circle at 50% 0,rgba(255,222,106,.58),transparent 35%),linear-gradient(#fffdf3,#ffedbd); transform-origin: 50% 55%; }
    .modal.pk-result-open { padding: clamp(7px,1.5vh,14px); animation: pk-result-backdrop .34s ease-out both; }
    .modal.pk-result-open .pk-result-card { width: min(90%,380px); max-height: 94svh; overflow: hidden; padding: 12px 18px 14px; border-width: 3px; border-radius: 30px 30px 24px 24px; box-shadow: inset 0 0 0 4px #fff8db,0 14px 32px rgba(61,23,2,.42); }
    .pk-result-card h2 { margin-bottom: 0; font-size: 23px; line-height: 1.05; }
    .pk-result-card.pk-result-animate { animation: pk-result-card-enter .62s cubic-bezier(.16,1.18,.32,1) both; }
    .pk-result-card .modal-mascot { display: none; }
    .pk-result-card.result-loss { background: radial-gradient(circle at 50% 0,rgba(244,154,98,.4),transparent 35%),linear-gradient(#fffaf0,#f4d4ad); }
    .pk-result-card.result-draw { background: radial-gradient(circle at 50% 0,rgba(143,201,229,.34),transparent 35%),linear-gradient(#fffdf3,#e8e5cf); }
    .pk-result-card.pk-result-animate h2 { animation: pk-result-title-enter .52s .13s cubic-bezier(.18,1.35,.3,1) both; }
    .pk-result-hero { position: relative; z-index: 2; width: 82px; height: 74px; display: grid; place-items: end center; margin: -2px auto 0; }
    .pk-result-card.pk-result-animate .pk-result-hero { animation: pk-result-hero-enter .58s .18s cubic-bezier(.14,1.45,.32,1) both; }
    .pk-result-hero::before { content: ""; position: absolute; inset: 4px 5px 0; border: 4px solid #ffd55e; border-radius: 50%; background: radial-gradient(circle,#fff6c4 0 28%,#ffad2b 29% 56%,#d94c1c 57% 100%); box-shadow: inset 0 2px #fff3b0,0 3px 0 #9c3a18,0 0 15px #ffc94f; }
    .result-win .pk-result-hero::before { animation: pk-result-hero-glow 1.1s .68s ease-in-out 2 alternate; }
    .result-win .pk-result-hero::after { content: ""; position: absolute; z-index: 3; top: 3px; left: 6px; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(112deg,transparent 31%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.96) 48%,rgba(255,255,255,.12) 56%,transparent 65%); mix-blend-mode: screen; opacity: 0; transform: translateX(-34px) rotate(-12deg); animation: pk-result-hero-shine 1.35s .72s ease-in-out 2; pointer-events: none; }
    .result-loss .pk-result-hero::before { border-color: #f2a36a; background: radial-gradient(circle,#fff1d3 0 28%,#da8051 29% 56%,#903425 57% 100%); box-shadow: inset 0 3px #ffe1c7,0 5px 0 #67261c,0 0 16px rgba(174,65,36,.5); }
    .result-draw .pk-result-hero::before { border-color: #8bb8d0; background: radial-gradient(circle,#f4fbff 0 28%,#8ec9e4 29% 56%,#45758f 57% 100%); box-shadow: inset 0 3px white,0 5px 0 #34576a,0 0 16px rgba(70,126,156,.42); }
    .pk-result-character { position: relative; z-index: 1; width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(93,31,5,.24)); transform-origin: 50% 86%; }
    .result-win.pk-result-animate .pk-result-character { animation: pk-result-character-cheer .75s .7s cubic-bezier(.16,1.35,.3,1) both; }
    .pk-result-reason { margin: 0 0 4px; color: #8f522e; font-size: 10px !important; font-weight: 900; line-height: 1.25 !important; }
    .pk-result-card.pk-result-animate .pk-result-reason { animation: pk-result-detail-enter .38s .32s ease-out both; }
    .pk-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px; align-items: center; margin: 5px 0; }
    .pk-score-card { position: relative; padding: 4px 4px 5px; border: 2px solid #ecae4f; border-radius: 13px; background: linear-gradient(#fff3c7,#ffd875); }
    .pk-result-card.pk-result-animate .pk-score-card:first-child { animation: pk-result-score-left .46s .4s cubic-bezier(.2,1.2,.3,1) both; }
    .pk-result-card.pk-result-animate .pk-score-card:last-child { animation: pk-result-score-right .46s .46s cubic-bezier(.2,1.2,.3,1) both; }
    .pk-result-card.pk-result-animate .pk-vs { animation: pk-result-vs-enter .36s .57s cubic-bezier(.18,1.5,.3,1) both; }
    .pk-score-card.pk-opponent-tone { border-color: #78acd5; color: #245987; background: linear-gradient(#effaff,#c7e7fb); }
    .pk-score-card small,.pk-score-card strong,.pk-score-card b { display: block; }
    .pk-score-card small { font-size: 8px; font-weight: 900; }
    .pk-score-card strong { margin: 1px 0; font-size: 18px; }
    .pk-score-card b { font-size: 8px; }
    .pk-vs { color: #d96717; font-size: 17px; font-weight: 1000; text-shadow: 0 2px white; }
    .pk-reward-panel { margin: 5px 0 7px; padding: 6px 8px 7px; border: 2px solid #edb35b; border-radius: 14px; background: linear-gradient(145deg,#fff9e4,#ffebae); }
    .pk-result-card.pk-result-animate .pk-reward-panel { animation: pk-result-detail-enter .48s .62s ease-out both; }
    .pk-reward-heading { display: flex; align-items: center; justify-content: center; gap: 6px; }
    .pk-reward-crest { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(110,42,5,.22)); transform-origin: center; }
    .result-win.pk-result-animate .pk-reward-crest { animation: pk-result-crest-shine 1.15s .85s ease-in-out 2; }
    .result-loss .pk-reward-crest,.result-draw .pk-reward-crest { filter: grayscale(.72) saturate(.55) opacity(.7); }
    .pk-reward-copy small,.pk-reward-copy strong { display: block; text-align: left; }
    .pk-reward-copy small { color: #9b642e; font-size: 8px; font-weight: 900; }
    .pk-reward-panel strong { color: #b74619; font-size: 16px; }
    .pk-reward-panel p { margin: 3px 0; font-size: 9px; line-height: 1.2; }
    .pk-reward-panel > small { display: block; font-size: 8px; line-height: 1.2; }
    .pk-streak-track { display: grid; grid-template-columns: repeat(5,38px); justify-content: center; gap: 5px; margin: 5px 0 4px; }
    .pk-streak-track i { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #b66b2c; border-radius: 50%; color: #8e5a2c; background: #e8d1a6; font-style: normal; }
    .pk-streak-track i.lit { color: white; background: linear-gradient(#ffc943,#f08b18); box-shadow: 0 0 8px #ffbd35; }
    .pk-streak-track i:not(.goal)::before { content: ""; width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
    .pk-streak-track i.goal::before { content: ""; width: 15px; aspect-ratio: 1; background: currentColor; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 56%,79% 92%,50% 70%,21% 92%,32% 56%,2% 35%,39% 35%); }
    .pk-result-card .pk-result-opponent-add { grid-template-columns: 30px minmax(0,1fr); gap: 4px; padding: 1px; }
    .pk-result-card .pk-result-opponent-add img { width: 28px; height: 28px; }
    .pk-result-card .pk-result-opponent-add small { font-size: 6px; }
    .pk-result-card .actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 7px; }
    .pk-result-card .button { min-height: 38px; padding: 6px 8px; border-width: 2px; border-radius: 13px; box-shadow: inset 0 1px #ffc66a,0 3px 0 #aa4314; font-size: 12px; }
    .pk-result-card .button.secondary { box-shadow: inset 0 1px white,0 3px 0 #ba782c; }
    .pk-result-card.pk-result-animate .actions { animation: pk-result-detail-enter .42s .82s ease-out both; }
    .pk-result-fx-layer { position: absolute; z-index: 4; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
    .pk-result-particle { position: absolute; top: 24%; left: 50%; width: var(--size,22px); height: var(--size,22px); margin: calc(var(--size,22px) / -2); background: center / 220% 220% no-repeat; opacity: 0; filter: drop-shadow(0 0 5px #fff5a6); animation: pk-result-particle-burst var(--duration,1.2s) var(--delay,0s) cubic-bezier(.13,.72,.2,1) both; }
    .pk-result-particle.star { background-image: url("../assets/breakfast/spritegen-runs/breakfast-static-v1/run/curated/particles-particle-butter-star.webp"); }
    .pk-result-particle.crumb { background-image: url("../assets/breakfast/spritegen-runs/breakfast-static-v1/run/curated/particles-particle-toast-crumb.webp"); }
    .pk-result-particle.spark { background-image: none; background-color: #fff9d4; clip-path: polygon(50% 0,59% 39%,100% 50%,59% 61%,50% 100%,41% 61%,0 50%,41% 39%); box-shadow: 0 0 8px white,0 0 13px #ffc943; }
    @keyframes pk-result-backdrop { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(5px); } }
    @keyframes pk-result-card-enter { 0% { opacity: 0; transform: translateY(42px) scale(.76) rotate(-1.8deg); } 68% { opacity: 1; transform: translateY(-5px) scale(1.025) rotate(.6deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
    @keyframes pk-result-title-enter { 0% { opacity: 0; transform: translateY(-18px) scale(.58); letter-spacing: .18em; } 75% { opacity: 1; transform: translateY(2px) scale(1.09); } 100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: normal; } }
    @keyframes pk-result-hero-enter { 0% { opacity: 0; transform: translateY(24px) scale(.35) rotate(-12deg); } 70% { opacity: 1; transform: translateY(-5px) scale(1.09) rotate(3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
    @keyframes pk-result-hero-glow { from { box-shadow: inset 0 3px #fff3b0,0 5px 0 #9c3a18,0 0 14px #ffc94f; } to { box-shadow: inset 0 3px #fffef0,0 5px 0 #9c3a18,0 0 34px 9px #ffd84e; } }
    @keyframes pk-result-hero-shine { 0%,12% { opacity: 0; transform: translateX(-48px) rotate(-12deg); } 32%,70% { opacity: .9; } 88%,100% { opacity: 0; transform: translateX(48px) rotate(-12deg); } }
    @keyframes pk-result-character-cheer { 0% { transform: translateY(8px) scale(.7); } 45% { transform: translateY(-9px) scale(1.12) rotate(-4deg); } 68% { transform: translateY(1px) scale(.98) rotate(3deg); } 100% { transform: translateY(0) scale(1) rotate(0); } }
    @keyframes pk-result-detail-enter { from { opacity: 0; transform: translateY(17px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes pk-result-score-left { from { opacity: 0; transform: translateX(-34px) rotate(-3deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
    @keyframes pk-result-score-right { from { opacity: 0; transform: translateX(34px) rotate(3deg); } to { opacity: 1; transform: translateX(0) rotate(0); } }
    @keyframes pk-result-vs-enter { from { opacity: 0; transform: scale(.2) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
    @keyframes pk-result-crest-shine { 0%,100% { transform: scale(1) rotate(0); filter: drop-shadow(0 3px 3px rgba(110,42,5,.22)) brightness(1); } 42% { transform: scale(1.16) rotate(-7deg); filter: drop-shadow(0 0 12px #ffd334) brightness(1.38); } 68% { transform: scale(1.06) rotate(6deg); filter: drop-shadow(0 0 18px #fff2a2) brightness(1.18); } }
    @keyframes pk-result-particle-burst { 0% { opacity: 0; transform: translate(0,12px) scale(.1) rotate(0deg); } 16% { opacity: 1; transform: translate(calc(var(--tx) * .14),calc(var(--ty) * .09)) scale(1.2) rotate(45deg); } 62% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--tx),var(--ty)) scale(.55) rotate(var(--rot,280deg)); } }
    @keyframes pk-urgent { from { transform: scale(1); } to { transform: scale(1.045); } }
    @keyframes pk-countdown-tick { 0% { transform: translateX(-50%) scale(.88); opacity: .5; } 55% { transform: translateX(-50%) scale(1.08); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
    @keyframes pk-vignette { from { opacity: .35; } to { opacity: 1; } }
    @keyframes pk-danger { from { transform: translateX(0); } to { transform: translateX(-2px); } }
    @keyframes pk-combo { 0% { opacity: 0; transform: scale(.55); } 25%,70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: translateY(-5px) scale(.9); } }
    @media (max-width: 520px) {
      .modal.pk-result-open { padding: 6px; }
      .modal.pk-result-open .pk-result-card { width: min(100%,360px); max-height: calc(100svh - 12px); padding: 10px 12px 12px; border-radius: 26px 26px 21px 21px; }
      .pk-result-card h2 { font-size: 21px; }
      .pk-streak-track { grid-template-columns: repeat(5,34px); gap: 4px; }
      .pk-streak-track i { width: 34px; height: 34px; }
      .game-app[data-mode="pk"] .pk-live-hud { grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr) 32px 36px; gap: 2px; padding: 0 2px; }
      .pk-live-hud .audio-toggle { width: 32px; height: 44px; border-width: 2px; border-radius: 12px; transform: scale(.9); }
      .pk-player-card { min-height: 50px; grid-template-columns: 27px 1fr; padding: 3px 4px; border-width: 2px; border-radius: 13px; }
      .pk-player-card.pk-opponent-tone { grid-template-columns: 1fr 27px; }
      .pk-player-card img,.pk-rabbit-avatar { width: 27px; height: 27px; font-size: 18px; }
      .pk-player-card strong { font-size: 11px; }
      .pk-timer { min-width: 0; padding: 6px 3px 4px; border-width: 2px; border-radius: 13px; }
      .pk-timer b { font-size: 18px; }
      .pk-final-countdown { top: 52px; width: min(76%,270px); height: 50px; }
      .pk-final-countdown strong { font-size: 15px; }
      .pk-live-pause { width: 38px; height: 50px; }
      .game-app[data-mode="pk"] .board-column { width: min(100%,calc((100svh - 58px) * 941 / 1672)); padding-right: 66px; }
      .game-app[data-mode="pk"] .pk-opponent-panel { width: 62px; right: 0; padding: 3px; border-width: 2px; border-radius: 11px; }
      .game-app[data-mode="pk"] .pk-opponent-panel h3 { font-size: 7px; }
      .pk-opponent-combo { font-size: 7px; }
    }
    @media (max-height: 700px) {
      .modal.pk-result-open .pk-result-card { padding-block: 8px 10px; }
      .pk-result-card h2 { font-size: 19px; }
      .pk-result-hero { width: 66px; height: 58px; }
      .pk-result-character { width: 54px; height: 54px; }
      .result-win .pk-result-hero::after { left: 5px; width: 56px; height: 56px; }
      .pk-score-card strong { font-size: 16px; }
      .pk-reward-crest { width: 36px; height: 36px; }
      .pk-reward-panel strong { font-size: 14px; }
      .pk-streak-track { grid-template-columns: repeat(5,30px); margin-block: 3px; }
      .pk-streak-track i { width: 30px; height: 30px; }
      .pk-result-card .button { min-height: 34px; padding-block: 4px; font-size: 11px; }
    }

    /* Desktop：保留較寬的 540 × 960 手機畫布；僅縮短內容，不改變外框比例。 */
    @media (min-width: 700px) {
      html,body { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
      html { background: radial-gradient(ellipse at center,#f3b35f 0%,#c8732d 54%,#8d421c 100%); }
      body { padding: 0 !important; background-color: transparent; }
      .splash-screen,
      .hub-app,
      .game-app {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 540px;
        height: 960px;
        min-height: 0;
        margin: 0;
        transform: translate(-50%,-50%) scale(var(--desktop-phone-scale,1));
        transform-origin: center center;
      }
      .splash-screen,.hub-app { border-radius: 0; }
      .game-app { overflow: hidden; padding: 6px 5px 5px; border-radius: 0; }
      .hub-content { inset: var(--hub-top-h, 64px) 0 88px; }
      .hub-screen { padding-inline: 12px; }
      .hub-nav { height: 80px; padding: 4px 5px 0; background-color: transparent; background-position: center bottom; background-size: 100% 65px; }
      .nav-button { height: 70px; padding: 4px 2px 5px; font-size: 10px; }
      .nav-icon { width: 38px; height: 38px; flex-basis: 38px; }
      .nav-button.active { top: -6px; width: 92px; padding: 9px 12px 10px; }
      .nav-button.active .nav-icon { width: 39px; height: 39px; flex-basis: 39px; }
      .nav-button.active .nav-label { margin-top: -2px; font-size: 9px; }
      .hub-screen[data-screen="home"] .shop-stage { width: 430px; margin-inline: auto; aspect-ratio: 9 / 11.8; }
      .hub-screen[data-screen="home"] .quick-grid { width: 430px; margin-inline: auto; }
      .hub-screen[data-screen="home"] .quick-card { min-height: 64px; padding-block: 5px; }
      .shop-card { grid-template-columns: 64px 1fr auto; }
      .shop-card img { width: 58px; height: 58px; }
      .business-prep-screen { gap: 8px; padding: 8px 26px 10px; }
      .business-title-row { min-height: 56px; padding-top: 0; }
      .business-mode-pill { padding: 7px 10px; font-size: 10px; }
      .business-mode-art { aspect-ratio: 1.5 / 1; }
      .business-mode-art.campaign-map-active { aspect-ratio: 1 / 1; }
      .business-rule-row div { min-height: 42px; padding: 5px 4px; }
      .business-rule-row span { width: 23px; height: 23px; font-size: 13px; }
      .loadout-panel { padding: 8px 10px 10px; }
      .loadout-heading { min-height: 24px; margin-bottom: 5px; padding: 0; }
      .loadout-item { min-height: 80px; padding: 2px 4px 7px; font-size: 10px; }
      .loadout-item img { width: 54px; height: 54px; }
      .loadout-count { min-width: 25px; height: 22px; font-size: 10px; }
      .business-cta-panel { width: 82%; }
      .game-app { padding-inline: 4px; }
      .game-app .topbar { grid-template-columns: minmax(0,1fr) 55px 44px; gap: 4px; padding-inline: 4px; }
      .game-app .pause-button { width: 44px; height: 44px; min-height: 0; }
      .game-app .topbar .piggy-bank { width: 55px; height: 50px; }
      .game-app .stat { min-height: 50px; border-width: 2px; border-radius: 14px; }
      .game-app .stat span { font-size: 10px; }
      .game-app .stat strong { font-size: 18px; }
      .game-app .game-layout { margin-top: 4px; }
      .game-app .board-column { width: min(100%,calc((960px - 112px) * 941 / 1672)); }
      .game-app .statusline { display: flex; min-height: 38px; margin-top: -7px; padding: 6px 10px; font-size: 10px; }
      .game-app.tutorial-active .instruction { top: 58px; width: 84%; min-height: 32px; padding: 3px 8px; }
      .combo-pop { width: 96%; }
      .game-app[data-mode="pk"] .pk-live-hud { grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr) 32px 36px; gap: 2px; padding: 0 2px; }
      .pk-player-card { min-height: 50px; grid-template-columns: 27px 1fr; padding: 3px 4px; border-width: 2px; border-radius: 13px; }
      .pk-player-card.pk-opponent-tone { grid-template-columns: 1fr 27px; }
      .pk-player-card img,.pk-rabbit-avatar { width: 27px; height: 27px; font-size: 18px; }
      .pk-player-card small { font-size: 7px; }
      .pk-player-card strong { font-size: 10px; }
      .pk-live-pause { width: 38px; height: 50px; }
      .game-app[data-mode="pk"] .board-column { width: min(100%,calc((960px - 58px) * 941 / 1672)); padding-right: 66px; }
      .game-app[data-mode="pk"] .pk-opponent-panel { width: 62px; right: 0; padding: 3px; border-width: 2px; border-radius: 11px; }
      .game-app[data-mode="pk"] .pk-opponent-panel h3 { font-size: 7px; }
      .pk-opponent-combo { font-size: 7px; }
    }

    /* Gameplay v4: compact appliance layout based on the approved mobile mockup. */
    /* 階段／分數、喇叭、暫停、撲滿四格同一排：階段與分數吃剩下的寬度，撲滿不再浮在煎台上方。 */
    .game-app:not([data-mode="pk"]) .topbar {
      grid-template-columns: minmax(0,1fr) 46px 46px 54px;
      gap: 5px;
      padding-inline: 4px;
    }
    .game-app:not([data-mode="pk"]) .topbar > .audio-toggle { grid-column: 2; width: 42px; height: 42px; align-self: center; justify-self: center; }
    .game-app:not([data-mode="pk"]) .stats {
      grid-template-columns: repeat(2,minmax(0,1fr));
      gap: 5px;
    }
    .game-app:not([data-mode="pk"]) .clear-stat,
    .game-app:not([data-mode="pk"]) .stat:has(#clears) { display: none; }
    .game-app:not([data-mode="pk"]) .clear-goal {
      font-size: .62em;
      font-weight: 900;
      white-space: nowrap;
    }
    .game-app:not([data-mode="pk"]) .topbar .piggy-bank {
      grid-column: 4;
      width: 54px;
      height: 54px;
    }
    .game-app:not([data-mode="pk"]) .pause-button {
      grid-column: 3;
      width: 46px;
      height: 46px;
      min-height: 0;
    }
    /* 撲滿搬到上面那排之後，這裡不用再替它讓出右邊那一格，拉滿版 */
    .game-app:not([data-mode="pk"]) .campaign-goal-banner {
      width: auto;
      grid-template-columns: 46px minmax(0,1fr) 40px;
      gap: 6px;
      margin: 7px 8px 0;
      padding: 6px 7px;
      border-radius: 15px;
    }
    .game-app:not([data-mode="pk"]) .campaign-goal-level {
      min-width: 0;
      padding: 5px 4px;
      font-size: 9px;
    }
    .game-app:not([data-mode="pk"]) .campaign-goal-copy strong { font-size: 11px; }
    .game-app:not([data-mode="pk"]) .campaign-goal-copy small { margin-top: 2px; font-size: 7px; }
    .game-app:not([data-mode="pk"]) .campaign-goal-track { height: 6px; margin-top: 4px; }
    .game-app:not([data-mode="pk"]) .campaign-goal-count { min-width: 0; font-size: 12px; text-align: center; }
    .game-app:not([data-mode="pk"]) .board-column { width: min(100%,500px); }
    .game-app:not([data-mode="pk"]) .machine {
      width: 100%;
      aspect-ratio: 67 / 100;
      overflow: visible;
      border: 0;
      border-radius: 6.5% / 4.3%;
      background: url("../assets/breakfast/game-ui-v1/game-appliance-background-v1-transparent.webp") center / 100% 100% no-repeat;
      box-shadow: 0 9px 18px rgba(90,37,6,.28);
    }
    .game-app:not([data-mode="pk"]) .machine::before {
      display: none;
    }
    .game-app:not([data-mode="pk"]) .machine-frame-clean { display: none; }
    .game-app:not([data-mode="pk"]) .board-stage {
      top: 5.4%;
      left: 8.4%;
      width: 83.2%;
      height: 67.7%;
    }
    .game-app:not([data-mode="pk"]) .board-shell { height: 100%; }
    .game-app:not([data-mode="pk"]) .board {
      border: 0;
      border-radius: 7px;
      background-color: transparent;
      background-image:
        linear-gradient(to right,rgba(143,74,19,.24) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(143,74,19,.24) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(213,57,30,.62) 0 10%,transparent 10%);
      background-size: 12.5% 100%,100% 10%,100% 100%;
      box-shadow: none;
    }
    .game-app:not([data-mode="pk"]) .danger-band span { display: none; }
    .game-app:not([data-mode="pk"]) .preview-wrap {
      top: 75.5%;
      left: 7.4%;
      width: 85.2%;
      height: 3.8%;
      padding: 5px 12px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .game-app:not([data-mode="pk"]) .preview-row { background: transparent; box-shadow: none; }
    .game-app:not([data-mode="pk"]) .control-deck {
      display: none;
    }
    .game-app:not([data-mode="pk"]) .tool-dock {
      top: 82.1%;
      left: 10%;
      width: 78.3%;
      transform: none;
      grid-template-columns: repeat(3,26.5%);
      gap: 10%;
    }
    .game-app:not([data-mode="pk"]) .tool-button {
      aspect-ratio: 1.12 / 1;
      border: 0;
      border-radius: 22%;
      background: transparent;
      box-shadow: none;
    }
    .game-app:not([data-mode="pk"]) .tool-button img {
      width: 78%;
      height: 78%;
      margin: 11%;
    }
    .game-app:not([data-mode="pk"]) .tool-button[data-tool="tongs"] .tool-icon {
      transform: none;
    }
    .game-app:not([data-mode="pk"]) .tool-count {
      top: auto;
      right: -3px;
      bottom: -3px;
      width: 23px;
      height: 23px;
      border: 2px solid #ffe3a0;
      color: #fff8dc;
      background: linear-gradient(#ec7b24,#bd450c);
      box-shadow: inset 0 1px rgba(255,255,255,.42),0 2px 0 #87320b,0 3px 5px rgba(92,38,7,.25);
      font-size: 11px;
    }
    .game-app:not([data-mode="pk"]) .statusline {
      display: flex;
      width: 88%;
      min-height: 36px;
      margin: 4px auto 0;
      padding: 6px 12px;
    }

    @media (max-width: 520px) {
      .game-app:not([data-mode="pk"]) .topbar { grid-template-columns: minmax(0,1fr) 42px 42px 50px; }
      .game-app:not([data-mode="pk"]) .stat { min-height: 48px; padding-inline: 2px; }
      .game-app:not([data-mode="pk"]) .stat span { font-size: 9px; }
      .game-app:not([data-mode="pk"]) .stat strong { font-size: 16px; }
      .game-app:not([data-mode="pk"]) .topbar .piggy-bank { width: 50px; height: 48px; }
      .game-app:not([data-mode="pk"]) .pause-button { width: 42px; height: 42px; min-height: 0; }
      .game-app:not([data-mode="pk"]) .campaign-goal-banner {
        width: auto;
        grid-template-columns: 46px minmax(0,1fr) 40px;
        gap: 6px;
        margin: 7px 8px 0;
        padding: 6px 7px;
        border-radius: 15px;
      }
      .game-app:not([data-mode="pk"]) .campaign-goal-level {
        min-width: 0;
        padding: 5px 4px;
        font-size: 9px;
      }
      .game-app:not([data-mode="pk"]) .campaign-goal-copy strong { font-size: 11px; }
      .game-app:not([data-mode="pk"]) .campaign-goal-copy small { margin-top: 2px; font-size: 7px; }
      .game-app:not([data-mode="pk"]) .campaign-goal-track { height: 6px; margin-top: 4px; }
      .game-app:not([data-mode="pk"]) .campaign-goal-count { min-width: 0; font-size: 12px; text-align: center; }
      .game-app:not([data-mode="pk"]) .board-column { width: min(100%,500px); }
      .game-app:not([data-mode="pk"]) .machine { border-radius: 28px; }
      .game-app:not([data-mode="pk"]) .statusline { margin-top: 4px; }
      .game-app:not([data-mode="pk"]) .tool-count { width: 20px; height: 20px; font-size: 10px; }
    }

    /* 開發期的難度調整面板（js/dev-difficulty-editor.js）。上線前連同那支檔案一起移除。 */
    .dev-tune-toggle { position: fixed; z-index: 2000; right: 8px; top: 50%; padding: 6px 8px; border: 0; border-radius: 10px 0 0 10px; color: #fff; font-size: 11px; font-weight: 900; background: rgba(120,50,5,.85); cursor: pointer; }
    .dev-tune-panel { position: fixed; z-index: 2001; right: 0; top: 0; bottom: 0; width: min(300px,86vw); overflow: auto; padding: 10px 12px 16px; color: #3c1c05; background: rgba(255,250,236,.98); box-shadow: -6px 0 18px rgba(80,35,4,.28); }
    .dev-tune-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .dev-tune-head strong { font-size: 14px; }
    .dev-tune-head span { color: #96612f; font-size: 10px; }
    .dev-tune-badge { margin: 0 0 8px; padding: 4px 8px; border-radius: 8px; color: #7a2f06; font-size: 11px; font-weight: 800; background: #ffd9a1; }
    .dev-tune-section h3 { margin: 6px 0; font-size: 12px; }
    .dev-tune-hint { color: #96612f; font-size: 11px; }
    .dev-tune-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 11px; }
    .dev-tune-row input { width: 76px; padding: 3px 5px; border: 1px solid #d7a457; border-radius: 6px; font-size: 12px; }
    .dev-tune-jump { flex-wrap: wrap; gap: 4px; margin: 6px 0; padding-top: 6px; border-top: 1px dashed #e0b478; }
    .dev-tune-jump input { width: 60px; }
    .dev-tune-jump button { min-height: 26px; padding: 0 10px; border: 0; border-radius: 6px; color: #5a2703; font-size: 11px; font-weight: 900; background: #ffc46a; cursor: pointer; }
    .dev-tune-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
    .dev-tune-actions button { min-height: 30px; border: 0; border-radius: 8px; color: #5a2703; font-size: 11px; font-weight: 900; background: #ffd489; cursor: pointer; }
    .dev-tune-note { grid-column: 1 / -1; margin: 4px 0 0; color: #7a4a1c; font-size: 10px; }