/* Tiệm Mì Cay — one responsive stylesheet.
   Layout modes:
   - portrait (default): one column. During service the kitchen fits the screen; only the pantry scrolls.
   - compact landscape: phones on their side and short windows use two columns.
   - wide (at least 900 x 560): three service columns and two management columns. */

:root{
  color-scheme:light;
  --burgundy:#5a2334;--wine:#7a3346;--coral:#ef4b3f;--coral-dark:#c23328;--gold:#f7c948;
  --green:#5f9a58;--green-dark:#3e7340;--mint:#e9f4e1;--mint-line:#b9d4a6;
  --cream:#fff3f0;--paper:#fffdfb;--tint:#fff6ee;--tint-2:#fbebe4;--tint-3:#f5ddd2;
  --line:#f0dcd3;--line-strong:#e3c2b3;--ink:#4a2a2a;--ink-2:#6f4b42;--muted:#84655d;
  --warn-bg:#fff3d6;--warn-line:#eccb85;--warn-ink:#7d5520;
  --awning:#ef4b3f;--awning-shadow:#c23328;
  --font:'Mali','Segoe UI',system-ui,sans-serif;--display:'Paytone One','Trebuchet MS',sans-serif;
  --topbar-h:56px;--tile-min:70px;--pad:10px;
}
.dark{
  color-scheme:dark;
  --cream:#2b1b22;--paper:#3a2830;--tint:#45303a;--tint-2:#513840;--tint-3:#5d434b;
  --line:#5e4450;--line-strong:#7a5a64;--ink:#f4e1d7;--ink-2:#e6cabd;--muted:#cfb2a6;
  --mint:#34483a;--mint-line:#5c7a57;--warn-bg:#5a4630;--warn-line:#8a6a3d;--warn-ink:#ffe3b0;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{min-height:100dvh;font-family:var(--font);font-size:14px;line-height:1.45;color:var(--ink);background:radial-gradient(ellipse at 15% 0%,#95485c,transparent 60%),linear-gradient(130deg,#733448,#4f2436);overscroll-behavior-y:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s,background-color .15s,box-shadow .15s,opacity .15s}
button:not(:disabled):active{transform:translateY(2px)}
button:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
img,svg{display:block;max-width:100%}
img{user-select:none;-webkit-user-drag:none}
h1,h2,h3,p{margin:0}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.15}
h3{font-size:15px;line-height:1.3}
small{font-size:12px}
[hidden]{display:none!important}
.muted{color:var(--muted);font-size:13px}
.positive{color:var(--green)}.negative{color:var(--coral-dark)}
.dark .negative{color:#ff8f80}.dark .positive{color:#9fd18e}
input{width:100%;min-height:44px;padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:11px;background:var(--paper);color:var(--ink);font-size:16px}
textarea{width:100%;min-height:96px;padding:12px;border:1.5px solid var(--line-strong);border-radius:11px;background:var(--paper);color:var(--ink);font-size:16px;resize:vertical}

#app{position:relative;max-width:1440px;min-height:100dvh;margin:0 auto;overflow-x:clip;background-color:var(--cream);background-image:var(--doodle,none),linear-gradient(#edcdc12a 1px,transparent 1px),linear-gradient(90deg,#edcdc12a 1px,transparent 1px);background-size:160px 160px,28px 22px,28px 22px;box-shadow:0 0 80px #30131e55}
.dark #app{background-image:var(--doodle,none),linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px)}

/* Buttons */
.primary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 18px;border-radius:15px;background:var(--coral);color:#fff;font-family:var(--display);font-size:18px;line-height:1.2;text-align:center;box-shadow:0 5px 0 var(--coral-dark)}
.primary:hover:not(:disabled){background:#f65b4c}
.primary:not(:disabled):active{box-shadow:0 2px 0 var(--coral-dark)}
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 16px;border-radius:12px;background:var(--tint-2);border:1px solid var(--line);font-weight:700;color:var(--ink);text-align:center}
.secondary:hover:not(:disabled){background:var(--tint-3)}
.text-button{display:inline-flex;align-items:center;min-height:40px;padding:6px 10px;font-weight:700;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.small-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:7px 12px;border-radius:10px;border:1px solid #e8c7b5;background:#fff0e5;color:#a44334;font-weight:700;font-size:13px;line-height:1.25;white-space:nowrap}
.small-button:hover:not(:disabled){background:#ffe0c9}
.dark .small-button{background:#5a3b37;border-color:#7a5449;color:#ffd8c6}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#ffffff18;color:inherit;font-size:19px;flex:none}
.icon-button:hover{background:#ffffff2a}
.eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}

/* Top bar */
.topbar{position:sticky;top:0;z-index:20;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));background:var(--burgundy);color:#fae7db;box-shadow:0 2px 10px #2a0f1a33}
.top-left,.top-right{display:flex;align-items:center;gap:8px;min-width:0}
.brand-small{font-family:var(--display);font-size:17px;white-space:nowrap}
.day-label{font-size:13px;color:#f1c3b5;white-space:nowrap}
.top-rating{color:var(--gold);font-weight:700;white-space:nowrap}
.wallet{font-family:var(--display);font-size:19px;color:var(--gold);white-space:nowrap}
.wallet b{font-weight:400}
.top-clock{padding:3px 9px;border-radius:10px;background:#ffffff17;color:#ffdb92;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.top-clock b{font-weight:700;letter-spacing:.5px}

/* Welcome */
.welcome{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:28px 22px calc(58px + env(safe-area-inset-bottom));color:#fff2e8;background:radial-gradient(ellipse at 25% 40%,#aa556c33,transparent 55%),linear-gradient(145deg,#672b3e,#7b374b 65%,#62283d);overflow:hidden;isolation:isolate}
.welcome::before{content:'';position:absolute;inset:12px;border:1px solid #f9bcaf1f;border-radius:10px;pointer-events:none}
.hero-art{position:relative;order:-1;width:min(320px,78vw)}
.shop-art{width:100%;height:auto;filter:drop-shadow(0 18px 14px #35122038);transform:rotate(-2deg)}
.shop-art>svg{display:block;width:100%;height:auto}
.hero-sticker{position:absolute;right:-6px;bottom:-4px;transform:rotate(8deg);background:#ffce65;color:#6b3c2e;border:4px solid #ffe3ac;padding:9px 14px;border-radius:50%;font-size:12px;line-height:1.3;text-align:center;box-shadow:0 8px 15px #32132922}
.hero-sticker strong{display:block;font-size:11px}
.welcome-copy{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:400px;text-align:center}
.welcome-copy .eyebrow{color:#f8c4b4}
.welcome h1{font-size:clamp(44px,12vw,74px);line-height:.98;letter-spacing:-1px;text-shadow:0 4px 0 #c44343}
.welcome h1 em{font-style:normal;color:#ffca90}
.title-chili{display:inline-block;margin-left:6px;font-size:.42em;vertical-align:middle}
.welcome-subtitle{font-size:15px;line-height:1.7;color:#ecd0cc}
.welcome-actions{display:grid;gap:12px;width:100%}
.welcome-actions .primary{font-size:17px}
.welcome-actions .primary span{margin:0}
.welcome-actions .secondary{min-height:48px;background:#ffffff14;border-color:#ffffff2a;color:#fff2e8}
.welcome-links{display:flex;justify-content:center;flex-wrap:wrap}
.welcome-links .text-button{min-height:44px;color:#f3cdc6}
.local-note{font-size:12px;color:#dcaeb5}
.welcome-footer{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));text-align:center;font-size:11px;letter-spacing:1px;color:#c99ea6}

/* Preparation */
.prep{display:flex;flex-direction:column;gap:12px;padding:12px 12px calc(104px + env(safe-area-inset-bottom))}
.shop-side{display:contents}
.shop-hero{order:1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;padding:14px 10px 22px 16px;border-radius:18px 18px 12px 12px;color:#fff;background:repeating-linear-gradient(90deg,#ffffff0e 0 22px,transparent 22px 44px),var(--awning);box-shadow:0 5px 0 var(--awning-shadow);overflow:hidden}
.shop-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;background:radial-gradient(circle at 10px 10px,var(--cream) 9px,transparent 10px) 0 0/20px 10px}
.shop-sign{min-width:0}
.sign-label{display:block;font-size:11px;font-weight:700;letter-spacing:2px;opacity:.85}
.shop-sign h1{margin:2px 0 8px;font-size:clamp(22px,6vw,30px);text-shadow:0 2px 0 #0003;overflow-wrap:anywhere}
.level-label{display:inline-block;padding:3px 10px;border-radius:20px;background:#0000002b;font-size:12px;font-weight:700}
.xp-track{max-width:260px;height:6px;margin:10px 0 4px;border-radius:4px;background:#0003;overflow:hidden}
.xp-track i{display:block;height:100%;border-radius:inherit;background:#ffe192}
.shop-sign>small{display:block;font-size:12px;opacity:.92}
.scene-wrap{width:clamp(112px,36vw,180px);height:clamp(88px,28vw,138px);container-type:size}
.prep-illustration{position:relative;width:min(100cqw,115.38cqh);aspect-ratio:600/520;margin:auto}
.prep-illustration>svg{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 8px #3a101c24)}
.prep-illustration>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 8px #3a101c24)}
.scene-decor{position:absolute;z-index:1;pointer-events:none}
.scene-decor img{width:100%;height:auto}
.scene-decor .decor-emoji{display:block;font-size:22px;line-height:1}
.prep-illustration .scene-pet{left:30%;bottom:6%;width:15%}
.prep-illustration .scene-plant{right:-1%;bottom:4%;width:12%}
.prep-illustration .scene-lamp{left:15%;top:46%;width:7.5%}
.daily-card{order:2;display:grid;gap:10px;padding:14px;border:1px dashed var(--line-strong);border-radius:16px;background:var(--tint)}
.daily-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.daily-head .eyebrow{color:var(--muted)}
.daily-head h2{font-size:22px}
.event-note{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--warn-line);border-radius:12px;background:var(--warn-bg);color:var(--warn-ink)}
.event-icon{font-size:26px;line-height:1;flex:none}
.event-note strong{display:block;font-size:14px}
.event-note small{display:block;font-size:12.5px;line-height:1.4}
.daily-cost{font-size:13px;color:var(--ink-2)}
.daily-cost small{color:var(--muted)}
.daily-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.chip-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;padding:6px 6px;border-radius:22px;border:1px solid var(--line-strong);background:var(--paper);font-weight:700;font-size:12.5px;color:var(--ink);white-space:nowrap}
.chip-button:hover:not(:disabled){background:var(--tint-2)}
.prep-dock{position:fixed;z-index:15;left:50%;bottom:0;width:min(640px,100%);transform:translateX(-50%);display:grid;gap:6px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--cream) 14px,var(--cream));}
.prep-dock>span{text-align:center;font-size:13px;color:var(--ink-2)}
.prep-dock .primary{font-size:17px}
.management{display:contents}
.tabs{order:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:50px;padding:4px 2px;border-radius:12px;border:1px solid transparent;background:var(--tint-2);color:#7d5a4c;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.tab>span{font-size:17px;line-height:1.1}
.tab:hover{background:var(--tint)}
.tab.active{background:var(--paper);color:var(--coral-dark);border-color:var(--line);box-shadow:0 3px 0 var(--coral)}
.dark .tab{color:#ecd5ca}.dark .tab.active{color:#ffa99b}
.tab-panel{order:4;padding:16px 14px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.panel-heading h2{font-size:22px}
.panel-description{margin:6px 0 14px;font-size:13px;line-height:1.6;color:var(--muted)}

/* Management panels */
.stock-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.stock-toolbar .text-button{margin-left:auto}
.stock-legend{display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--muted)}
.forecast{margin:-4px 0 10px;padding:8px 11px;border-radius:10px;background:var(--tint-2);font-size:13px;color:var(--ink-2)}
.forecast b{color:var(--coral-dark);font-size:14px}
.stock-group{margin:14px 0 2px;font-family:var(--display);font-weight:400;font-size:17px}
.stock-group::after{content:'';display:block;width:44px;height:3px;margin-top:3px;border-radius:2px;background:var(--coral);opacity:.7}
.sale-chip{display:inline-block;padding:0 6px;border-radius:8px;background:var(--green);color:#fff;font-size:11px;font-weight:700;vertical-align:1px}
.expiry-note{color:#b85a3e!important;font-weight:700}
.dark .expiry-note{color:#ffae8f!important}
.stock-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:6px 10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.stock-row:last-of-type{border-bottom:0}
.stock-row.locked{opacity:.62}
.food-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:#fff2df;flex:none}
.dark .food-icon{background:#5a3f3a}
.food-icon img{width:88%;height:88%;object-fit:contain}
.item-info{min-width:0}
.item-info strong{display:block;font-size:14px;line-height:1.3}
.item-info small{display:block;font-size:12px;line-height:1.4;color:var(--muted)}
.unlock-note{color:#b85a3e!important;font-weight:700}
.dark .unlock-note{color:#ffae8f!important}
.stock-count{min-width:30px;text-align:center;font-size:16px;font-weight:700;color:var(--ink-2)}
.quantity-control{display:grid;grid-template-columns:40px 44px 40px;align-items:center;height:44px;border:1px solid #edcbbc;border-radius:11px;overflow:hidden;background:#fff4ec}
.quantity-control button{height:100%;font-size:20px;user-select:none}
.quantity-control button:hover:not(:disabled){background:#f3d7c5}
.quantity-control input{min-height:0;height:100%;padding:0;border:0;border-radius:0;background:transparent;text-align:center;font-size:16px;appearance:textfield;-moz-appearance:textfield}
.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dark .quantity-control{background:#533a37;border-color:#775449}
.stock-row>.small-button{min-width:64px;min-height:44px}
.stock-footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
.stock-footer>span{font-size:12px;color:var(--muted)}
.price-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line)}
.price-control{display:flex;align-items:center;gap:6px}
.price-control button{width:44px;height:44px;border:1px solid #efd0ba;border-radius:10px;background:#fff0e6;font-size:20px}
.dark .price-control button{background:#533a37;border-color:#775449}
.price-control b{min-width:78px;text-align:center;font-size:14px;white-space:nowrap}
.subtabs,.review-filters{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.subtabs button,.review-filters button{min-height:40px;padding:8px 14px;border-radius:20px;background:var(--tint-2);color:var(--ink-2);font-size:13px;font-weight:700}
.subtabs button.active,.review-filters button.active{background:var(--burgundy);color:#fff}
.dark .subtabs button.active,.dark .review-filters button.active{background:#b06570}
.upgrade-card,.staff-card{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px dashed var(--line)}
.upgrade-art{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(130deg,#ffe8d6,#fff8ec);font-size:28px}
.dark .upgrade-art{background:#5a3f3a}
.upgrade-card h3,.staff-info h3{font-size:15px}
.upgrade-card p,.staff-info p{margin:3px 0;font-size:13px;line-height:1.5;color:var(--muted)}
.upgrade-card small,.staff-info>small{font-size:12px;color:var(--muted)}
.staff-info{min-width:0}
.staff-info h3 small{font-weight:400;color:var(--muted)}
.staff-avatar{width:52px;height:52px;padding:3px;border-radius:50%;background:#ffe9d7;border:1px solid #f8d7bd}
.staff-avatar svg,.staff-avatar img{display:block;width:100%;height:100%}
.review-avatar img{display:block;width:100%;height:100%}
.upgrade-card>button,.staff-card>button{min-width:92px;min-height:44px;white-space:normal}
.decor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.decor-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:var(--tint);text-align:center}
.decor-card.selected{border:2px solid var(--coral);padding:11px 7px}
.decor-icon{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#faeada;font-size:30px;overflow:hidden}
.decor-icon img{width:78%;height:78%;object-fit:contain}
.dark .decor-icon{background:#5a3f3a}
.decor-card h3{font-size:13.5px;min-height:2.6em;display:grid;place-items:center}
.decor-card .small-button{width:100%}
.review{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px dashed var(--line)}
.review-avatar{width:44px;height:44px}
.review-body strong{font-size:14px}
.review-body>small{margin-left:8px;color:var(--muted)}
.stars{color:#e9b43f;font-size:15px;letter-spacing:1px}
.review-body>p{margin:4px 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.owner-reply{padding:8px 12px;border-left:3px solid #e5b497;border-radius:4px;background:#fff2e8}
.dark .owner-reply{background:#533a37}
.guest-reply{margin-top:4px;padding:6px 12px;border-left:3px solid var(--line-strong);border-radius:4px;background:var(--tint);font-size:13px}
.review-histogram{display:grid;gap:4px;margin:2px 0 12px}
.review-histogram>div{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted)}
.review-histogram i{height:8px;border-radius:4px;background:var(--tint-3);overflow:hidden}
.review-histogram b{display:block;height:100%;border-radius:inherit;background:#e9b43f}
.review-histogram small{text-align:right;font-variant-numeric:tabular-nums}
.more-reviews{width:100%;margin-top:10px}
.price-tag{display:inline-block;margin-left:2px;padding:0 6px;border-radius:8px;font-size:11px;font-weight:800;white-space:nowrap}
.price-tag.severe{background:#ffe1d9;color:#b3261e}
.price-tag.expensive{background:var(--warn-bg);color:var(--warn-ink)}
.price-tag.cheap{background:var(--mint);color:var(--green-dark)}
.tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:var(--coral);color:#fff;font-size:11px;font-weight:800;line-height:1}
.reply-quote{padding:8px 12px;border-radius:10px;background:var(--tint);font-size:13px}
.reply-quote>p{margin:4px 0 0}
.reply-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.reply-suggestions .chip-button{max-width:100%;padding:6px 12px;border-radius:14px;font-weight:600;line-height:1.35;text-align:left;white-space:normal}
.reply-suggestions .sassy{border-style:dashed}
.order-line{display:-webkit-box;margin:0 0 5px;overflow:hidden;color:var(--ink-2);font-size:12.5px;font-style:italic;line-height:1.4;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.order-line b{font-style:normal;font-weight:700;color:#b24a2e}
.dark .order-line b{color:#ffb39c}

.review .text-button{padding-left:0}
.empty-state{padding:28px 10px;text-align:center;color:var(--muted)}
.empty-state>span{display:block;font-size:36px}
.empty-state h3{margin:8px 0 4px;color:var(--ink)}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.stat-grid>div{padding:12px;border-radius:13px;background:#fff2e7}
.dark .stat-grid>div{background:#513840}
.stat-grid span{display:block;font-size:12px;color:var(--muted)}
.stat-grid strong{display:block;margin-top:4px;font-family:var(--display);font-weight:400;font-size:clamp(17px,4.4vw,21px);color:#ab6346;overflow-wrap:anywhere}
.dark .stat-grid strong{color:#ffce9f}
.cost-breakdown{margin:10px 0;padding:4px 14px;border-radius:13px;background:#fff5eb}
.dark .cost-breakdown{background:#4d3538}
.cost-breakdown p{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px;color:var(--ink-2)}
.cost-breakdown p+p{border-top:1px dashed var(--line)}
.cost-breakdown b{white-space:nowrap;color:var(--ink)}
.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.tab-panel>h3{margin:4px 0 8px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:8px 6px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted);text-align:right}
td{padding:9px 6px;border-bottom:1px dashed var(--line);text-align:right;font-weight:600;white-space:nowrap}
th:first-child,td:first-child{text-align:left}

/* Service */
.play{display:flex;flex-direction:column;gap:6px;height:calc(100dvh - var(--topbar-h));min-height:470px;padding:7px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.front,.station{display:contents}
.street{order:1;position:relative;display:flex;flex-direction:column;flex:none;padding:12px 8px 0;border-radius:15px;overflow:hidden;color:#ffede0;background:radial-gradient(ellipse at 70% 30%,#a56569,#713547 80%);box-shadow:inset 0 0 0 1px #542c3a}
.awning{position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(90deg,var(--awning) 0 26px,#ffe9d1 26px 52px);box-shadow:0 3px 0 #542b2f44}
.street-title{display:none;justify-content:center;min-width:0;padding:0 34px}
.street-title h1{min-width:0;max-width:100%;overflow:hidden;font-size:15px;color:#fff0da;white-space:nowrap;text-overflow:ellipsis}
.customer-lane{display:grid;grid-template-columns:repeat(var(--seats,3),minmax(0,1fr));gap:6px;padding:4px 0 6px}
.customer-lane:has(>:nth-child(4)){--seats:4}
.customer{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:4px 2px 5px;border:1px solid transparent;border-radius:12px;color:#fff1df}
.customer.selected{background:#ffffff17;border-color:#f5c6a580}
.patience-ring{--ring-color:#8fc86f;display:block;width:46px;height:46px;padding:3px;border-radius:50%;background:conic-gradient(var(--ring-color) var(--patience,100%),#ffffff24 0);box-shadow:0 3px 0 #49243833}
.patience-ring svg,.patience-ring img{display:block;width:100%;height:100%;border-radius:50%;background:#ffead6}
.patience-ring{contain:layout paint}
.customer>strong{max-width:100%;margin-top:2px;overflow:hidden;font-size:12.5px;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
.customer>small{display:none}
.customer-status{margin-top:2px;padding:1px 6px;border-radius:6px;background:#ffdd9b;color:#6f4526;font-size:11.5px;font-weight:700;line-height:1.35;white-space:nowrap}
.empty-customer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:78px;border:1px dashed #e3b3af44;border-radius:12px;color:#e2aaa6aa;font-size:12px}
.empty-customer>span{font-size:20px}
.kitchen-note{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;border:1px dashed #e3b3af44;border-radius:12px;color:#e2aaa6;font-size:12px;text-align:center;padding:0 10px}
.kitchen-note>span{font-size:20px}
.chapter-label{display:block;font-size:11px;font-weight:700;opacity:.85;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapter-line{margin:6px 0 0;font-size:13px;text-align:center}
.delivery-strip{display:flex;flex-wrap:wrap;gap:6px}
.delivery-strip:not(:empty){padding-bottom:8px}
.delivery-order{display:flex;align-items:center;gap:6px;min-height:36px;padding:4px 10px;border:2px solid transparent;border-radius:10px;background:#fff0d0;color:#6b4430;font-size:12.5px;font-weight:700}
.delivery-order small{font-size:11px;font-weight:400}
.delivery-order.selected{border-color:#e88841;background:#ffe2b5}
.street-counter{display:none;justify-content:space-evenly;gap:8px;margin:0 -8px;padding:8px 12px;background:#e8b999;border-top:6px solid #f4d3b5;box-shadow:0 -3px 0 #67394733;color:#6b4430;font-size:12.5px;font-weight:700}
.day-progress{height:4px;margin:0 -8px;background:#512d3990}
.day-progress>i{display:block;height:100%;background:#f4b557}
.street .scene-pet{right:4px;top:4px;width:30px}
.street .scene-plant{left:6px;bottom:10px;width:28px}
.street .scene-lamp{right:8px;top:8px;width:20px}
.street .scene-plant,.street .scene-lamp{display:none}
.day-event{display:none;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:12.5px;color:var(--muted)}
.closing-notice{order:3;padding:8px 10px;border:1px solid var(--warn-line);border-radius:10px;background:var(--warn-bg);color:var(--warn-ink);font-size:13px;font-weight:700}
.closing-notice:empty{display:none}
.service-actions{order:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;flex:none}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;min-height:44px;padding:3px 2px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink-2);font-size:11px;font-weight:700;line-height:1.15;white-space:nowrap}
.tool>span{font-size:15px;line-height:1.15}
.tool:hover:not(:disabled){background:var(--tint-2)}
.order-ticket{order:4;position:relative;flex:none;padding:9px 12px 10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 3px 0 var(--line)}
.ticket-heading{display:none;justify-content:space-between;gap:10px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px dashed var(--line);font-size:11px;font-weight:700;letter-spacing:1px;color:var(--muted)}
.ticket-heading strong{letter-spacing:0;color:#c0763f;font-size:13px}
.ticket-main{display:flex;align-items:center;gap:10px}
.ticket-main>div{flex:1;min-width:0}
.ticket-main h2{display:flex;align-items:center;gap:6px;font-size:18px;line-height:1.2}
.ticket-main h2.done::after,.order-toppings>.done::after{content:'✓';display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--font);font-size:11px;font-weight:700;flex:none}
.ticket-main p{font-size:12.5px;color:var(--muted)}
.tea-button{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:40px;padding:4px 11px;border:1px solid #b9d4a6;border-radius:20px;background:#eaf6df;color:#3f6b35;font-size:12.5px;font-weight:700;white-space:nowrap}
.tea-button small{font-size:11px;font-weight:600;opacity:.8}
.dark .tea-button{background:#34483a;border-color:#5c7a57;color:#cfe8c0}
.spice-stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border:1.5px dashed #eab79e;border-radius:10px;background:#fff0e5;color:#ae392d;font-size:9px;font-weight:700;letter-spacing:1px;line-height:1.1;transform:rotate(5deg)}
.spice-stamp strong{font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:0;line-height:1.05}
.spice-stamp.done{border-style:solid;border-color:var(--green);background:var(--mint);color:var(--green-dark)}
.spice-stamp.over{border-style:solid;border-color:var(--coral);background:#ffe1d9}
.dark .spice-stamp{background:#5d3a36;color:#ffb3a3}
.order-toppings{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.order-toppings>span{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:2px 9px 2px 3px;border-radius:20px;background:var(--tint-2);color:var(--ink-2);font-size:12.5px;font-weight:600}
.order-toppings>span:only-child:not(:has(img)){padding-left:9px}
.order-toppings img{width:24px;height:24px}
.order-toppings>.done{background:var(--mint);color:var(--green-dark)}
.order-toppings>.done::after{width:16px;height:16px;font-size:10px}
.ticket-patience{height:5px;margin-top:8px;border-radius:4px;background:var(--tint-3);overflow:hidden}
.ticket-patience>span{display:block;width:100%;height:100%;border-radius:inherit;background:#9fb865;transform-origin:0 50%;transition:transform .2s linear}
.ticket-patience.low>span{background:#ec7a52}
.patience-copy{display:none;margin-top:4px;font-size:12px;color:var(--muted)}
.ticket-empty{display:flex;align-items:center;gap:10px;min-height:56px}
.ticket-empty>span{font-size:30px}
.ticket-empty h3{font-size:14.5px}
.ticket-empty p{font-size:12.5px;color:var(--muted)}
.kitchen-heading{display:none;align-items:center;justify-content:space-between}
.kitchen-heading h2{font-size:21px}
.station-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:11.5px;font-weight:700;letter-spacing:.6px;color:#9a7a64}
.station-title>span{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:#f0e4d9;color:#8a6a55;font-size:11px;letter-spacing:0}
.station-title>small{font-size:12px;font-weight:600;letter-spacing:0;color:var(--muted)}
.station-title #noodle-stock{margin-left:auto}
.dark .station-title{color:#e1c3ae}.dark .station-title>span{background:#5d434b;color:#f0d8c8}
.pots-title{display:none;order:5;flex:none}
.cooking-row{order:6;display:grid;grid-template-columns:repeat(var(--pot-count,1),minmax(0,1fr));gap:6px;flex:none}
.pot-button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;align-items:center;column-gap:6px;min-width:0;min-height:60px;padding:6px 7px 8px;border:1px solid #e1c5b1;border-radius:12px;background:linear-gradient(#fff8ed,#f3e2cd);text-align:left}
.dark .pot-button{background:linear-gradient(#5b4036,#4a332d);border-color:#7a5a4c}
.pot-icon{position:relative;grid-row:1/3;width:32px}
.pot-no{position:absolute;right:-5px;bottom:-3px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--burgundy);color:#fff;font-size:10.5px;font-style:normal;font-weight:700;line-height:1}
.pot-button strong{font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pot-button small{font-size:11.5px;line-height:1.2;color:#86654f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dark .pot-button small{color:#e1bfa6}
.pot-button .cook-gauge{grid-column:1/-1;margin-top:6px}
.pot-button.slow::after{content:'🔥 lửa yếu';position:absolute;top:-8px;right:6px;padding:1px 6px;border-radius:8px;background:#fff3d6;color:#9a5a20;font-size:10.5px;font-weight:800;box-shadow:0 1px 0 #0002;pointer-events:none}
.pot-button.stage-ideal{border-color:#8dbb74;box-shadow:0 0 0 2px #8dbb7455}
.pot-button.stage-soft{border-color:#e39a62}
.pot-button.stage-danger{border-color:var(--coral)}
.cook-gauge{position:relative;display:grid;grid-template-columns:50fr 28fr 22fr;width:100%;height:10px;border-radius:5px}
.cook-gauge i:nth-child(1){background:#e6c688;border-radius:5px 0 0 5px}
.cook-gauge i:nth-child(2){background:#78ae69}
.cook-gauge i:nth-child(3){background:#df7859;border-radius:0 5px 5px 0}
.cook-gauge b{position:absolute;top:-3px;width:3px;height:16px;border-radius:2px;background:#512a36;box-shadow:0 0 0 1.5px #fff8ee;transform:translateX(-1.5px)}
.pot-art .pot-water{fill:#cfe6ee}
.pot-art .pot-noodles{fill:none;stroke:transparent;stroke-width:3;stroke-linecap:round}
.pot-art .pot-flame{opacity:0;transition:opacity .2s}
.boiling .pot-art .pot-flame{opacity:1}
.pot-art .steam{fill:none;stroke:#d8c3b2;stroke-width:2.5;stroke-linecap:round;opacity:0}
.boiling .pot-art .pot-water{fill:#f4e7c8}
.boiling .pot-art .steam{opacity:.9;animation:steam .8s ease-in-out infinite alternate}
.stage-raw .pot-art .pot-noodles{stroke:#f1e6b0}
.stage-ideal .pot-art .pot-noodles{stroke:#ffcf4a}
.stage-soft .pot-art .pot-noodles,.stage-danger .pot-art .pot-noodles{stroke:#e39a3c}
.stage-danger .pot-art .steam{stroke:#8a7a70}
.bench{order:7;display:flex;align-items:stretch;gap:6px;flex:none;min-width:0}
.worktop{position:relative;display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:54px;padding:4px 10px;border:2px solid #d7ad7e;border-radius:12px;background:repeating-linear-gradient(91deg,#b2814526 0 1px,transparent 1px 34px),linear-gradient(120deg,#f5d6ad,#e8bf8e);box-shadow:0 3px 0 #c79a6b;color:#5d3b24}
.dark .worktop{background:repeating-linear-gradient(91deg,#00000022 0 1px,transparent 1px 34px),linear-gradient(120deg,#6d4a33,#5a3b28);border-color:#8a6243;color:#ffe3c8}
.assembled-bowl{position:relative;flex:none;width:72px;aspect-ratio:4/3}
.assembled-bowl>svg{width:100%;height:100%}
.ticket-bowl{flex:none;width:54px;margin:-4px 0}
.ticket-bowl>img{display:block;width:100%;height:auto}
.ticket-bowl{contain:layout paint}
.bowl-spice{position:absolute;right:-6px;bottom:0;padding:1px 6px;border-radius:10px;background:#ffdb91;color:#8a3a1c;font-size:11px;font-weight:700;line-height:1.4;white-space:nowrap}
.empty-bowl-spot{display:grid;place-items:center;flex:none;width:60px;height:46px;border:2px dashed #c79a6b;border-radius:50%;font-size:22px;opacity:.8}
.empty-bowl-spot small{display:none}
.bowl-meta{display:flex;flex-direction:column;min-width:0}
.bowl-meta strong{font-size:14px;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bowl-meta span,.bowl-meta small{font-size:12px;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bowl-meta small{opacity:.8}
.basket-button{flex:none;max-width:34%;min-height:44px;padding:6px 10px;border:1px solid var(--mint-line);border-radius:12px;background:var(--mint);color:var(--green-dark);font-size:12.5px;font-weight:700;line-height:1.25}
.dark .basket-button{color:#cfe8c0}
.pantry{order:8;display:flex;flex-direction:column;gap:7px;flex:1 1 0;min-height:112px;padding:8px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--paper) 85%,transparent);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.broth-row,.topping-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min),1fr));gap:6px}
.ingredient-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:74px;padding:5px 3px 6px;border:1px solid #f0dfd1;border-radius:12px;background:var(--paper);box-shadow:0 2px 0 #eedccd;text-align:center}
.dark .ingredient-button{border-color:#6f5046;box-shadow:0 2px 0 #24161b}
.ingredient-button:hover:not(:disabled){border-color:#e8b595;background:var(--tint)}
.ingredient-button .food-icon{width:36px;height:34px;background:transparent}
.ingredient-button .food-icon img{width:100%;height:100%}
.ingredient-button strong{display:-webkit-box;max-width:100%;overflow:hidden;font-size:12px;line-height:1.15;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ingredient-button small{font-size:11px;line-height:1.2;color:var(--muted)}
.ingredient-button:disabled{opacity:.55}
/* The selected order's missing ingredients are outlined; ones already in the bowl are ticked. */
.ingredient-button.needed{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral),0 2px 0 #eedccd}
.ingredient-button.needed:disabled{opacity:.9}
.ingredient-button.done{border-color:var(--mint-line);background:var(--mint)}
.ingredient-button.done::after{content:'✓';position:absolute;top:3px;right:4px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-weight:700}
.chili-button.over{border-color:var(--coral);background:#ffc9bd}
.new-bowl{background:#fff4e2;border-color:#efcf9c}
.dark .new-bowl{background:#5a4330}
.seasoning{display:none}
.serve-row{order:9;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:6px;flex:none}
.discard{min-height:50px;padding:6px 12px;border-radius:13px;background:var(--tint-3);color:var(--ink-2);font-size:13px;font-weight:700}
.chili-button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:50px;padding:6px 12px;border:1px solid #eda38b;border-radius:13px;background:#ffdfd1;color:#913b30;font-size:15px;font-weight:700;white-space:nowrap}
.chili-button b{padding:1px 6px;border-radius:8px;background:#ffffffa6;font-size:12px;font-weight:700}
.dark .chili-button b{background:#0003}
.dark .chili-button{background:#7a3a33;border-color:#a76c57;color:#ffe1c8}
.serve{min-height:50px;font-size:18px;background:#6e9d63;box-shadow:0 4px 0 #4e7950}
.serve:hover:not(:disabled){background:#7aa96b}
.serve:not(:disabled):active{box-shadow:0 1px 0 #4e7950}
.serve>span{margin-left:2px}
.kitchen-bottom{display:none;font-size:12px;color:var(--muted)}

/* Dialogs: fixed header and actions around a scrolling body */
dialog{flex-direction:column;width:min(480px,calc(100vw - 28px));max-width:none;max-height:min(760px,calc(100dvh - 28px));padding:0;overflow:hidden;border:1px solid var(--line);border-radius:22px;color:var(--ink);background:var(--paper);box-shadow:0 22px 80px #31101f66}
dialog[open]{display:flex}
dialog.modal-wide{width:min(640px,calc(100vw - 28px))}
dialog::backdrop{background:#34162499;backdrop-filter:blur(3px)}
.modal-header{display:flex;align-items:flex-start;gap:10px;flex:none;padding:16px 14px 6px 22px}
.modal-header h2{flex:1;min-width:0;padding-top:6px;font-size:clamp(20px,5.4vw,25px);overflow-wrap:anywhere}
.modal-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--tint-2);color:var(--muted);font-size:24px;line-height:1}
.modal-content{flex:1 1 auto;min-height:0;padding:4px 22px 14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.modal-content>p{margin:10px 0;font-size:14px;line-height:1.65;color:var(--ink-2)}
.modal-content>p.muted{font-size:13px;color:var(--muted)}
.modal-content>:first-child{margin-top:0}
.modal-actions{display:flex;flex-wrap:wrap;gap:10px;flex:none;padding:12px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
.modal-actions>*{flex:1 1 120px}
.modal-actions .primary{min-height:48px;font-size:16px}
.field-label{display:block;margin:12px 0 6px;font-size:13px;font-weight:700}
.warning{padding:10px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn-ink)!important}
.settings-list{display:grid}
.settings-list label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px dashed var(--line);font-weight:600}
.settings-list input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:48px;min-height:0;height:28px;padding:0;border:0;border-radius:20px;background:#e3d2c8;cursor:pointer;transition:background-color .15s}
.settings-list input::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:left .15s}
.settings-list input:checked{background:#8cb576}
.settings-list input:checked::after{left:23px}
.dark .settings-list input{background:#6b5058}
.menu-list{display:grid;gap:8px}
.menu-list .secondary{justify-content:flex-start;min-height:48px}
/* Image boxes centre with flex: percentage heights inside auto-sized grid rows would fall back to the SVG's natural size. */
.help-illustration{display:flex;align-items:center;justify-content:center;height:clamp(96px,22dvh,150px);margin-bottom:6px;overflow:hidden;border-radius:15px;background:#fff1dd}
.help-illustration img{width:auto;height:86%;max-width:92%;object-fit:contain}
.help-illustration>svg{width:auto;height:92%;max-width:94%}
.help-illustration>.street-backdrop{width:100%;height:100%;max-width:none}
.help-faces{display:flex;gap:12px}
.help-faces svg{width:clamp(48px,9dvh,72px);height:auto}
.help-illustration .emoji{font-size:54px}
.dark .help-illustration{background:#59403f}
.goal-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;margin:0 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--tint)}
.goal-card h3,.goal-card p,.goal-card progress{grid-column:1}
.goal-card p{font-size:13px;color:var(--muted)}
.goal-card small{grid-column:1;font-size:12px;color:var(--ink-2)}
.goal-card .small-button{grid-column:2;grid-row:1/5}
progress{-webkit-appearance:none;appearance:none;width:100%;height:10px;border:0;border-radius:6px;background:var(--tint-3);overflow:hidden}
progress::-webkit-progress-bar{background:var(--tint-3);border-radius:6px}
progress::-webkit-progress-value{background:linear-gradient(90deg,#9ccd7e,#5f9a58);border-radius:6px}
progress::-moz-progress-bar{background:#6fae62;border-radius:6px}
.summary-hero{display:grid;justify-items:center;gap:2px;margin-bottom:6px;text-align:center;font-size:36px;line-height:1.2}
.summary-hero h3{font-size:19px}
.summary-hero p{font-size:13.5px;color:var(--muted)}
.records-list{margin:8px 0;padding-left:22px}
.records-list li{padding:8px 4px;border-bottom:1px dashed var(--line)}
.records-list span{display:block;font-size:12.5px;color:var(--muted)}
.rush-list{margin-top:4px}
.incident-art{display:grid;place-items:center;height:92px;border-radius:14px;background:#fff1dc;font-size:52px}
.dark .incident-art{background:#624136}

/* Optional daily games */
.bargain-gauge{position:relative;height:36px;margin:22px 3px 20px;border-radius:10px;background:#edd8c5}
.bargain-gauge span{position:absolute;top:0;height:100%}
.bargain-yellow{background:#f3ca61}.bargain-green{background:#75aa71}
.bargain-gauge i{position:absolute;left:0;top:-7px;display:block;width:4px;height:50px;border-radius:3px;background:#582d39;box-shadow:0 0 0 2px #fff9e8;transform:translateX(-2px)}
#market-stop{width:100%}
#market-result{margin-top:10px;text-align:center;font-weight:700;color:var(--ink-2)}
.mini-result{display:grid;justify-items:center;gap:8px;padding:12px 0;font-size:50px;text-align:center}
.mini-result h3{font-size:21px}
.secret-broths{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:10px}
.secret-broths button{flex-direction:column;min-height:92px;padding:8px;font-size:13px}
.secret-broths img{height:48px;width:auto}
.secret-display{display:flex;flex-direction:column;align-items:center;justify-content:center;height:clamp(84px,18dvh,128px);border:1px solid var(--line);border-radius:14px;background:#fff4dd;font-size:54px;line-height:1.1}
.secret-display small{font-size:14px;color:#875b42}
.secret-progress{display:flex;justify-content:center;gap:8px;margin:12px}
.secret-progress i{width:14px;height:14px;border-radius:50%;background:#e8d4c7}
.secret-progress i.filled{background:#7aab68}
.spice-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.spice-choices button{flex-direction:column;gap:0;min-height:64px;padding:6px 2px;font-size:12px}
.spice-choices span{display:block;font-size:24px}
.scrub-bowl{position:relative;display:grid;place-items:center;width:clamp(120px,32dvh,180px);aspect-ratio:1;margin:12px auto;border:5px solid #bddbd9;border-radius:50%;background:#ddf1ed;font-size:clamp(56px,15dvh,90px);touch-action:none;user-select:none}
.wash-bubbles{position:absolute;right:8%;top:8%;font-size:.45em;pointer-events:none}
#wash-progress{height:14px}
#wash-status{text-align:center}
.dark .secret-display{background:#654734}.dark .secret-display small{color:#ffe1bc}.dark .bargain-gauge{background:#775044}.dark .scrub-bowl{background:#466260}

/* Toast */
/* Toasts stack (newest last) so several pieces of news can be read at once. */
#toast{position:fixed;z-index:100;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:min(480px,calc(100vw - 32px));pointer-events:none;transform:translateX(-50%)}
.toast-item{padding:10px 16px;border:1px solid #ae7f6333;border-radius:13px;background:#57382ff5;color:#fff0df;font-size:13.5px;line-height:1.4;text-align:center;box-shadow:0 8px 28px #542a3333;animation:toast-in .2s ease-out}
.toast-item.tone-good{border-color:#8fc86f66;background:#2f5a3df5}
.toast-item.tone-bad{border-color:#ef6a4f66;background:#7a2e2af5}
.toast-item.leaving{opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
/* First-bowl coach: a note in the street and a pulsing outline on the next control. */
.coach{position:absolute;z-index:3;right:6px;bottom:8px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 6px;width:min(66%,320px);padding:7px 6px 7px 11px;border-radius:12px;background:#fff7e8;color:#5b3326;box-shadow:0 4px 0 #4b243466,0 0 0 2px #ffc75a;font-size:12.5px;line-height:1.35}
.coach-badge{grid-column:1/-1;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#c0763f}
.coach p{margin:0}
.coach .text-button{min-height:36px;padding:0 6px;font-size:12px;color:#9a5a3c}
.coach-target{position:relative;z-index:2;outline:3px solid #ffc75a;outline-offset:2px;animation:coach-pulse .9s ease-in-out infinite alternate}
/* A spill makes the floor slippery until it is mopped with three taps. */
.puddle{position:relative;z-index:1;align-self:center;width:max-content;max-width:100%;min-height:36px;margin:0 0 8px;padding:4px 14px;border:2px solid #9ed3f0;border-radius:999px;background:radial-gradient(ellipse at 40% 35%,#e3f5ff,#8cc8ea);color:#1f4c66;font-size:12.5px;font-weight:800;white-space:nowrap;box-shadow:0 3px 0 #2e5e7a55;animation:float 1.6s ease-in-out infinite}
.customer-tags{position:absolute;top:0;right:2px;font-size:13px;line-height:1;letter-spacing:-1px;pointer-events:none}
.customer-tags:empty{display:none}
.speech{position:absolute;z-index:2;top:-2px;left:50%;padding:3px 8px;border-radius:10px;background:#fff;color:#5b3326;font-size:11.5px;font-weight:800;white-space:nowrap;box-shadow:0 2px 0 #0002;transform:translateX(-50%);animation:toast-in .2s ease-out}
.ticket-alert{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:4px 5px 4px 10px;border:1px solid var(--warn-line);border-radius:10px;background:var(--warn-bg);color:var(--warn-ink);font-size:12.5px;font-weight:700}
.ticket-alert .small-button{min-height:34px;padding:4px 12px}
.order-toppings>.missing{background:var(--warn-bg);color:var(--warn-ink);text-decoration:line-through}
.ingredient-button.empty{border-style:dashed;background:var(--tint)}
.ingredient-button.empty .food-icon{opacity:.45;filter:grayscale(.6)}
.ingredient-button.empty small{color:var(--coral);font-weight:700}
.top-clock.warn{background:#ef4b3f;color:#fff}
.shake{animation:shake .4s ease-in-out}
.float-text{position:fixed;z-index:120;font-size:18px;font-weight:800;color:#2f8f4e;text-shadow:0 2px 0 #fff;pointer-events:none;transform:translate(-50%,-100%);animation:float-up 1.1s ease-out forwards}
.float-text.tone-bad{color:#d8321f}
.confetti{position:fixed;inset:0;z-index:150;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-14px;left:var(--x);width:8px;height:12px;border-radius:2px;background:var(--c);transform:rotate(var(--r));animation:confetti-fall var(--d) ease-in forwards}
.insolvent-note{display:grid;gap:6px;margin-top:8px;padding:10px 12px;border:1px solid var(--warn-line);border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:13px}
.insolvent-note p{margin:0}
.insolvent-actions{display:flex;flex-wrap:wrap;gap:8px}
.summary-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:6px 0 10px}
.summary-stats>div{display:grid;justify-items:center;gap:1px;padding:8px 4px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-align:center}
.summary-stats strong{font-size:20px;line-height:1.2}
.summary-stats span{font-size:12px;color:var(--muted)}
.summary-level{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:8px;margin-bottom:10px;font-size:12.5px;font-weight:700}
.summary-level .xp-track{max-width:none;margin:0;background:var(--tint-3)}
.summary-level .xp-track i{background:var(--coral)}
.next-day,.stage-note{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--tint);font-size:13px}
.unlock-list{display:grid;gap:4px;margin:8px 0;padding-left:18px;font-size:13.5px}
.incident-art img{width:64px;height:64px}
/* Original scene art: the street behind the customers, the shop scene and the mascot */
/* The street drawing is static and sits on its own compositor layer: customer cards updating above it never
   repaint it (measured: animating inside it doubled the slowest frames on a 4x-slowed phone). Rain moves as a
   separate GPU-composited overlay instead. */
.street-art{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;will-change:transform;contain:strict}
.street-art.rain::before{content:'';position:absolute;inset:-48px -24px 0;z-index:2;background:repeating-linear-gradient(104deg,transparent 0 11px,#e8f4ff38 11px 12.5px,transparent 12.5px 26px);will-change:transform;animation:rain-fall .45s linear infinite}
@keyframes rain-fall{to{transform:translate(-11px,48px)}}
.street-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.street-layer.in{opacity:1}
.street-layer>img{display:block;width:100%;height:100%;object-fit:cover}
.street-art::after{content:'';position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(#1a0c1200,#1a0c1259 60%,#1a0c1280);pointer-events:none}
.street-title,.customer-lane,.delivery-strip,.street-counter,.day-progress{position:relative;z-index:1}
.street-title h1{text-shadow:0 2px 0 #3a1d16,0 0 10px #000a}
.customer>strong{text-shadow:0 1px 2px #000d,0 0 6px #0009}
.customer.selected{background:#2a141c99;border-color:#ffd9b0}
.empty-customer{background:#1e0f1666;border-color:#ffffff4d;color:#ffe7dad9}
.hero-mascot{width:112px;height:120px;margin:0 auto}
.hero-mascot>svg{width:100%;height:100%}
.incident-art>svg:not(.planet-art){width:auto;height:92%}
.shop-scene .steam{animation:art-steam 2.4s ease-in-out infinite}
.shop-scene .bob{animation:art-bob 1.8s ease-in-out infinite alternate}
.shop-scene .swing{transform-box:fill-box;transform-origin:50% 0;animation:art-swing 2.8s ease-in-out infinite alternate}
.shop-scene .twinkle{animation:art-twinkle .8s ease-in-out infinite alternate}
.shop-scene .marquee{animation:art-marquee 1.2s steps(4) infinite}
@keyframes art-steam{0%{opacity:0;transform:translateY(4px)}35%{opacity:.9}100%{opacity:0;transform:translateY(-12px)}}
@keyframes art-bob{to{transform:translateY(-3px)}}
@keyframes art-swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes art-twinkle{to{opacity:.35}}
@keyframes art-marquee{to{transform:translateX(-36px)}}
.market-vendor{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.market-vendor>svg{flex:none;width:64px;height:64px}
.vendor-bubble{position:relative;margin:0;padding:8px 12px;border-radius:12px;background:var(--tint-2);font-size:13px;font-weight:700}
.market-banner{display:flex;align-items:center;gap:10px;margin:2px 0 10px;padding:10px 12px;border:1px solid var(--warn-line);border-radius:14px;background:var(--warn-bg);color:var(--warn-ink)}
.market-banner>img{flex:none;width:48px;height:48px}
.market-banner>div{flex:1;min-width:0}
.market-banner strong{display:block;font-size:14px}
.market-banner small{display:block;font-size:12.5px;line-height:1.4}
.goals-board{margin-bottom:10px;padding:10px 12px;border-radius:14px;background:var(--tint-2)}
.goals-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.goals-head strong{font-family:var(--display);font-weight:400;font-size:16px}
.goals-head .text-button{min-height:32px;padding:0 4px}
.goal-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed var(--line);font-size:13px}
.goal-line span{min-width:0}
.goal-line small{display:block;color:var(--muted);font-size:11.5px}
.goal-line b{flex:none;color:var(--coral)}
.goal-line.done b{color:var(--green)}
.side-quests{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.side-quests .chip-button{flex:1 1 140px}
/* Reference mechanisms: locked previews in the kitchen, the tutorial spotlight, the chili-sauce bottle */
.ingredient-button.locked-item{border-style:dashed;background:var(--tint);color:var(--muted)}
.ingredient-button.locked-item .food-icon{opacity:.5;filter:grayscale(1)}
.ingredient-button.locked-item small{font-weight:700}
.lock-badge{position:absolute;top:3px;right:4px;font-size:11px;line-height:1;filter:grayscale(.2)}
.spotlight{position:fixed;z-index:70;border-radius:16px;box-shadow:0 0 0 3px #ffc75a,0 0 0 200vmax #1b0d1370;pointer-events:none;transition:left .2s,top .2s,width .2s,height .2s}
.coach.floating{position:fixed;z-index:71;right:auto;bottom:auto}
.chili-button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.chili-button .chili-bottle{flex:none;width:20px;height:28px;margin:-4px 0}
.chili-label{font-weight:700}
@media (max-width:379px){.chili-label{display:none}}
/* Far-delivery ride and starship flight */
.trip-dialog .modal-content{display:grid;place-items:center;padding:8px}
.trip-stage{display:grid;place-items:center;width:100%}
.trip-canvas{display:block;width:min(100%,calc((100dvh - 210px) * .75),420px);height:auto;aspect-ratio:3/4;border-radius:14px;background:#10162e;box-shadow:0 0 0 3px #4a2a22;touch-action:none;user-select:none}
.trip-dialog .modal-actions{flex-wrap:nowrap}
.trip-steer{flex:1;min-height:56px;font-size:24px}
.incident-art .planet-art{width:76px;height:76px}
.planet-card{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:10px 12px;border-radius:12px;background:#1b2a55;color:#fff3dc}
.planet-card .planet-art{flex:none;width:72px;height:72px}
.planet-card p{margin:2px 0;font-size:13px;opacity:.92}
.planet-card small{font-size:12px;opacity:.85}
.trip-stars{margin-top:6px;font-size:22px;text-align:center}
.ticket-trip{margin-top:6px;padding:4px 10px;overflow:hidden;border-radius:10px;background:#dff3fb;color:#1f5d80;font-size:12.5px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.ticket-trip.planet{background:#1b2a55;color:#ffe9b0}
.delivery-order.far{border-color:#2f8f8a;background:#dff6ee}
.delivery-order.planet{border-color:#f7c242;background:linear-gradient(135deg,#1b2a55,#3a2a6e);color:#fff3dc}
.delivery-order.planet.selected{border-color:#ffd96b;box-shadow:0 0 0 2px #ffd96b88}
.fly-coin{position:fixed;z-index:130;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid #8a5a12;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8,#f7c242 45%,#c99420);box-shadow:0 1px 0 #0003;pointer-events:none;opacity:0;animation:coin-fly .8s cubic-bezier(.5,-.3,.6,1) forwards}
.wallet.bump{animation:bump .35s ease-out}
.stamp{position:absolute;z-index:4;left:50%;top:40%;padding:4px 16px;border:4px solid currentColor;border-radius:12px;background:#fffbf3d9;color:#e8402f;font-family:var(--display);font-size:28px;letter-spacing:1px;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%) rotate(-12deg);animation:stamp-in 1.5s ease-out forwards}
.stamp.tone-neutral{color:#4a2a22}
@keyframes coin-fly{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1;transform:translate(0,-26px) scale(1)}100%{opacity:.25;transform:translate(var(--dx),var(--dy)) scale(.7)}}
@keyframes bump{40%{transform:scale(1.18)}}
@keyframes stamp-in{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.2)}15%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}}
@keyframes coach-pulse{to{outline-color:#ef4b3f;box-shadow:0 0 0 6px #ffc75a55}}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes float-up{to{opacity:0;transform:translate(-50%,-200%)}}
@keyframes confetti-fall{to{transform:translateY(105vh) rotate(calc(var(--r) + 540deg))}}

body:has(.play) #toast{bottom:calc(72px + env(safe-area-inset-bottom))}
body:has(.prep) #toast{bottom:calc(118px + env(safe-area-inset-bottom))}

@keyframes steam{from{transform:translateY(1px)}to{transform:translateY(-2px);opacity:.45}}
@keyframes float{50%{transform:translateY(-4px)}}
.reduced-motion *,.reduced-motion *::before,.reduced-motion *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Portrait fine-tuning */
@media (max-width:420px){.brand-small{display:none}.wallet{font-size:17px}.top-left:has(.top-clock) .day-label{display:none}}
@media (max-width:360px){
  .cooking-row:has(>:nth-child(3)) .pot-icon{display:none}
  .cooking-row:has(>:nth-child(3)) .pot-button{grid-template-columns:minmax(0,1fr)}
  .basket-label{display:none}
  .serve{padding:8px 10px;font-size:17px}
  .serve>span{display:none}
  .assembled-bowl,.empty-bowl-spot{width:50px}
  .bowl-meta span,.bowl-meta small{font-size:11.5px}
}
@media (max-width:350px){.topbar{gap:4px}.top-left,.top-right{gap:4px}.wallet{font-size:15px}.top-rating{font-size:12px}.day-label{font-size:12px}.topbar:has(.top-clock) .top-rating{display:none}.top-clock{padding:3px 7px}}
@media (min-width:380px){
  .tabs{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .tab{font-size:11.5px}
}
@media (max-width:379px){
  .stock-row{grid-template-columns:36px minmax(0,1fr) auto}
  .stock-row .quantity-control,.stock-row>.small-button{grid-column:2/-1;justify-self:end}
  .food-icon{width:36px;height:36px}
  .upgrade-card,.staff-card{grid-template-columns:44px minmax(0,1fr)}
  .upgrade-card>button,.staff-card>button{grid-column:2;justify-self:start}
  .upgrade-art,.staff-avatar{width:44px;height:44px}
  .price-row{grid-template-columns:36px minmax(0,1fr)}
  .price-control{grid-column:2;justify-self:end}
  .service-actions{gap:4px}
  .tool{font-size:10.5px}
}
@media (min-width:480px){
  :root{--tile-min:76px}
  .customer>small{display:block;max-width:100%;overflow:hidden;font-size:11.5px;color:#f3cfbf;white-space:nowrap;text-overflow:ellipsis}
  .street-counter{display:flex}
  .patience-copy{display:block}
  .ticket-heading{display:flex}
}
@media (min-width:600px){
  .street-title{display:flex}
  .prep{padding-left:18px;padding-right:18px}
  .decor-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .assembled-bowl{width:78px}
  .patience-ring{width:56px;height:56px}
}
/* Tall portrait screens: roomier kitchen */
@media (orientation:portrait) and (min-height:760px){
  .play{gap:9px}
  .worktop{min-height:64px}
  .assembled-bowl{width:74px}
  .pot-button{min-height:66px}
}
/* Short portrait screens: keep every control on screen */
@media (orientation:portrait) and (max-height:640px){
  .order-line{display:none}
  .play{gap:5px;padding-top:5px}
  .street{padding-top:12px}
  .customer-lane{padding:2px 0 4px}
  .customer{padding:2px 2px 3px}
  .pantry{min-height:70px;padding:5px}
  .pantry>.station-title{display:none}
  .ingredient-button{min-height:60px;padding:3px 2px 4px}
  .ingredient-button .food-icon{width:28px;height:26px}
  .ingredient-button strong{font-size:11px}
  .bowl-meta small{display:none}
  .patience-ring{width:42px;height:42px}
  .customer>strong{font-size:12px}
  .customer-status{font-size:11px}
  .empty-customer{min-height:70px}
  .order-ticket{padding:6px 10px 7px}
  .ticket-main h2{font-size:16px}
  .ticket-main p{font-size:12px;line-height:1.3}
  .spice-stamp{width:38px;height:38px}
  .spice-stamp strong{font-size:18px}
  .order-toppings{margin-top:4px}
  .order-toppings img{width:18px;height:18px}
  .order-toppings>span{min-height:22px;font-size:12px}
  .ticket-patience{height:4px;margin-top:5px}
  .pots-title{display:none}
  .pot-button{min-height:54px;padding:5px 6px 7px}
  .pot-icon{width:28px}
  .worktop{min-height:42px;padding:2px 8px}
  .assembled-bowl,.empty-bowl-spot{width:46px}
  .empty-bowl-spot{height:34px;font-size:18px}
  .serve-row .discard,.serve-row .chili-button,.serve-row .serve{min-height:46px}
}

/* Compact landscape: two columns, everything on one screen */
@media (orientation:landscape) and (max-width:899px),(orientation:landscape) and (max-height:559px){
  :root{--topbar-h:50px;--tile-min:66px}
  .welcome{flex-direction:row;gap:clamp(20px,5vw,60px);padding:18px clamp(20px,5vw,60px) 40px}
  .welcome-copy{gap:8px;max-width:380px}
  .welcome h1{font-size:clamp(38px,9vh,56px)}
  .welcome-subtitle{font-size:13px;line-height:1.5}
  .welcome-actions{gap:8px}
  .welcome-actions .primary{min-height:46px}
  .hero-art{order:1;width:min(42vw,62vh * 1.3)}
  .welcome-footer{bottom:8px}
  .prep{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr);gap:10px;height:calc(100dvh - var(--topbar-h));min-height:300px;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))}
  .shop-side{display:flex;flex-direction:column;gap:8px;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .shop-side>*,.management>*{order:0}
  .shop-hero{flex:none;padding:10px 8px 18px 12px}
  .shop-sign h1{font-size:20px;margin-bottom:4px}
  .xp-track{margin:6px 0 2px}
  .scene-wrap{width:118px;height:86px}
  .daily-card{padding:10px;gap:8px}
  .daily-head h2{font-size:18px}
  .event-note{padding:6px 10px}
  .prep-dock{position:sticky;bottom:0;width:auto;transform:none;flex:none;margin-top:auto;padding:8px 0 0;background:linear-gradient(transparent,var(--cream) 8px)}
  .prep-dock>span{display:none}
  .prep-dock .primary{min-height:46px;font-size:16px}
  .management{display:flex;flex-direction:column;gap:8px;min-height:0}
  .tabs{grid-template-columns:repeat(6,minmax(0,1fr));flex:none}
  .tab{min-height:44px;flex-direction:row;gap:5px;font-size:12px}
  .tab>span{font-size:15px}
  .tab-panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px}
  body:has(.prep) #toast{bottom:calc(16px + env(safe-area-inset-bottom))}
  .play{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:10px;row-gap:6px;min-height:300px;padding-top:6px}
  .front{grid-column:1;grid-row:1/-1;display:flex;flex-direction:column;gap:6px;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .front>*{flex:none;order:0}
  .street{padding-top:12px}
  .patience-ring{width:42px;height:42px}
  .empty-customer{min-height:68px}
  .street-counter{display:none}
  .customer>small{display:none}
  .ticket-heading,.patience-copy,.order-line{display:none}
  .order-ticket{order:2;padding:7px 10px 8px}
  .ticket-main h2{font-size:16px}
  .spice-stamp{width:46px;height:48px}
  .spice-stamp strong{font-size:21px}
  .order-toppings img{width:20px;height:20px}
  .order-toppings>span{min-height:24px}
  .service-actions{order:3}
  .closing-notice{order:1}
  .pots-title,.kitchen-heading,.seasoning,.kitchen-bottom{display:none}
  .cooking-row{grid-column:2;grid-row:1}
  .pot-button{min-height:54px;padding:5px 6px 7px}
  .pot-icon{width:28px}
  .bench{grid-column:2;grid-row:2}
  .worktop{min-height:42px;padding:2px 8px}
  .assembled-bowl,.empty-bowl-spot{width:44px}
  .empty-bowl-spot{height:34px;font-size:17px}
  .pantry{grid-column:2;grid-row:3;min-height:0;padding:6px;gap:5px}
  .ingredient-button{min-height:62px;padding:3px 2px 4px}
  .ingredient-button .food-icon{width:30px;height:27px}
  .ingredient-button strong{font-size:11.5px}
  .serve-row{grid-column:2;grid-row:4}
  .serve-row .discard,.serve-row .chili-button,.serve-row .serve{min-height:44px}
  body:has(.play) #toast{bottom:calc(60px + env(safe-area-inset-bottom))}
  dialog,dialog.modal-wide{width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 16px);border-radius:18px}
  .modal-header{padding:10px 12px 4px 18px}
  .modal-header h2{padding-top:4px;font-size:20px}
  .modal-content{padding:2px 18px 10px}
  .modal-actions{padding:8px 18px 10px}
  .modal-actions .primary{min-height:44px}
  .help-illustration{height:clamp(64px,20dvh,110px)}
  .summary-hero{font-size:28px}
  .incident-art{height:64px;font-size:40px}
}

/* Wide screens: columns, generous sizes, no page scrolling during service */
@media (min-width:900px) and (min-height:560px){
  :root{--topbar-h:60px;--tile-min:72px}
  .topbar{padding:0 18px}
  .welcome{flex-direction:row;gap:clamp(32px,5vw,90px);padding:48px clamp(40px,6vw,96px) 72px}
  .welcome-copy{max-width:440px}
  .hero-art{order:1;width:min(560px,44vw)}
  .hero-sticker{font-size:14px;padding:13px 18px}
  .hero-sticker strong{font-size:12px}
  .prep{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(440px,1.3fr);grid-template-rows:minmax(0,1fr);gap:18px;height:calc(100dvh - var(--topbar-h));min-height:500px;padding:16px 18px}
  .shop-side{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;scrollbar-width:thin}
  .shop-side>*,.management>*{order:0}
  .shop-hero{display:flex;flex-direction:column;align-items:stretch;flex:1 1 auto;gap:0;min-height:0;padding:0;background:none;box-shadow:none;overflow:visible}
  .shop-hero::after{display:none}
  .shop-sign{position:relative;flex:none;padding:16px 20px 24px;border-radius:20px 20px 13px 13px;background:repeating-linear-gradient(90deg,#ffffff0e 0 22px,transparent 22px 44px),var(--awning);box-shadow:0 5px 0 var(--awning-shadow);overflow:hidden}
  .shop-sign::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10px;background:radial-gradient(circle at 10px 10px,var(--cream) 9px,transparent 10px) 0 0/20px 10px}
  .shop-sign h1{font-size:28px}
  .scene-wrap{flex:1 1 0;width:auto;height:auto;min-height:130px;margin-top:8px}
  .daily-card{flex:none}
  .prep-dock{position:sticky;bottom:0;width:auto;transform:none;flex:none;padding:10px 0 2px;background:linear-gradient(transparent,var(--cream) 10px)}
  .management{display:flex;flex-direction:column;gap:10px;min-height:0}
  .tabs{grid-template-columns:repeat(6,minmax(0,1fr));flex:none}
  .tab{min-height:52px;flex-direction:row;gap:7px;font-size:13px}
  .tab>span{font-size:18px}
  .tab-panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .panel-heading h2{font-size:25px}
  .stock-row{grid-template-columns:44px minmax(0,1fr) auto auto;padding:11px 0}
  .stock-row .food-icon{width:44px;height:44px}
  body:has(.prep) #toast{bottom:28px}
  .play{display:grid;grid-template-columns:minmax(250px,.92fr) minmax(290px,1.06fr) minmax(300px,1.22fr);grid-template-rows:minmax(0,1fr);gap:14px;min-height:540px;padding:14px 16px}
  .front,.station{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .front>*,.station>*{flex:none;order:0}
  .station{padding:14px;border:1.5px solid #f0d5c7;border-radius:18px;background:#fff8ef;box-shadow:0 4px 0 #e7cbb9}
  .dark .station{background:#46302e;border-color:#6d4a45;box-shadow:0 4px 0 #22151b}
  .street{flex:1 1 auto;min-height:0;padding-top:22px;justify-content:flex-start}
  .awning{height:18px}
  .street-title{padding:6px 34px 0}
  .street-title h1{font-size:21px}
  #day-clock{font-size:18px}
  .customer-lane{margin:auto 0;padding:10px 0 14px}
  .patience-ring{width:60px;height:60px;padding:4px}
  .customer>strong{font-size:13.5px;margin-top:4px}
  .customer>small{display:block;max-width:100%;overflow:hidden;font-size:12px;color:#f3cfbf;white-space:nowrap;text-overflow:ellipsis}
  .empty-customer{min-height:110px}
  .street-counter{display:flex}
  .street .scene-pet{right:8px;bottom:44px;width:44px}
  .street .scene-plant{display:block;left:8px;bottom:44px;width:34px}
  .street .scene-lamp{display:block;top:20px;right:12px;width:24px}
  .day-event{display:block}
  .ticket-heading,.patience-copy{display:flex}
  .order-line{-webkit-line-clamp:3}
  .patience-copy{display:block}
  .order-ticket{padding:12px 14px}
  .ticket-main h2{font-size:21px}
  .spice-stamp{width:58px;height:62px}
  .spice-stamp strong{font-size:27px}
  .service-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tool{min-height:52px;font-size:11px}
  .tool>span{font-size:17px}
  .kitchen-heading{display:flex}
  .pots-title,.seasoning{display:flex}
  .cooking-row{gap:8px}
  .pot-button{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;justify-items:center;min-height:118px;padding:8px 8px 10px;text-align:center}
  .pot-icon{grid-row:auto;width:46px}
  .pot-button strong{font-size:13px}
  .pot-button small{font-size:12px}
  .bench{flex:1 1 auto;min-height:0;flex-direction:column}
  .worktop{flex:1 1 auto;min-height:130px;flex-direction:column;justify-content:center;gap:6px;padding:10px}
  .assembled-bowl{width:min(170px,100%);max-height:100%}
  .empty-bowl-spot{width:150px;height:96px;font-size:40px}
  .bowl-meta{align-items:center;text-align:center}
  .bowl-meta strong{font-size:15px}
  .basket-button{max-width:none}
  .seasoning{align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
  .seasoning strong{font-size:13px}
  .seasoning small{font-size:12px;color:var(--muted)}
  .serve-row .discard,.serve-row .chili-button{min-height:54px}
  .serve{min-height:54px;padding:8px 10px;font-size:18px;white-space:nowrap}
  .kitchen-bottom{display:block;text-align:right}
  .pantry{min-height:0;padding:12px;gap:9px;border-radius:18px}
  .ingredient-button{min-height:82px}
  .ingredient-button .food-icon{width:40px;height:38px}
  .ingredient-button strong{font-size:12.5px}
  body:has(.play) #toast{bottom:28px}
}
/* Narrow wide screens (tablets in landscape): smaller pantry tiles so every ingredient fits */
@media (min-width:900px) and (max-width:1199px) and (min-height:560px){
  :root{--tile-min:62px}
  .ingredient-button{min-height:74px}
  .ingredient-button .food-icon{width:34px;height:31px}
  .ingredient-button strong{font-size:11.5px}
  .serve>span{display:none}
  .pantry{padding:10px;gap:7px}
}
/* Large desktops */
@media (min-width:1280px) and (min-height:700px){
  body{font-size:15px}
  .tool{font-size:12px}
  .play{gap:16px;padding:16px 20px}
  .prep{gap:22px;padding:20px 22px}
}
@media (min-width:1280px) and (min-height:860px){
  :root{--tile-min:84px}
  .play{gap:18px;padding:18px 20px}
  .ingredient-button{min-height:92px}
  .ingredient-button .food-icon{width:46px;height:42px}
  .worktop{min-height:160px}
  .assembled-bowl{width:min(210px,100%)}
}
/* Short wide windows (e.g. 1366 x 650): tighten the kitchen */
@media (min-width:900px) and (min-height:560px) and (max-height:720px){
  :root{--tile-min:64px}
  .street{padding-top:18px}
  .customer-lane{padding:6px 0 8px}
  .patience-ring{width:52px;height:52px}
  .empty-customer{min-height:94px}
  .day-event{display:none}
  .pot-button{min-height:100px}
  .pot-icon{width:40px}
  .worktop{min-height:110px}
  .assembled-bowl{width:min(140px,100%)}
  .ingredient-button{min-height:76px}
  .tool{min-height:46px}
}

/* ---- Round 4: small living details on the interface side (the play-screen effects live in fx.css and life.css). */
/* Dialogs pop in (0.2 s, as in the reference). Opacity only on the dialog itself, so fixed confetti inside it
   keeps the viewport as its frame; its children rise into place (a slide, not a scale, so every control keeps its
   finger size from the first frame), and only when the dialog opens. */
dialog[open]{animation:dialog-in .2s ease-out}
dialog.popping>:not(.confetti){animation:dialog-pop .22s cubic-bezier(.3,1.4,.6,1)}
@keyframes dialog-in{from{opacity:0}}
@keyframes dialog-pop{from{transform:translateY(10px)}}
/* The situation lock: a chili-red bar runs out across the choices for 1.2 s. */
.modal-actions{position:relative}
#dialog.choice-lock .modal-actions::before{content:'';position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--coral);transform-origin:left;transform:scaleX(0);animation:lock-bar 1.2s linear}
@keyframes lock-bar{from{transform:scaleX(1)}}
/* Prep tabs slide in when the tab changes (not on every repaint). */
.tab-panel.tab-in{animation:tab-in .25s ease-out}
@keyframes tab-in{from{opacity:0;transform:translateY(8px)}}
/* The mascot breathes on cards. */
.hero-mascot>svg{transform-origin:50% 100%;animation:mascot-bob 2.2s ease-in-out infinite alternate}
@keyframes mascot-bob{to{transform:translateY(-3px) scaleY(1.01)}}
/* The sign: quick pills and Ớt Hiểm, who gives tips when tapped. */
/* Phones: the row runs under the sign and the picture, inside the red header. Wide screens: between the sign and the picture. */
.sign-row{grid-column:1/-1;display:flex;align-items:flex-end;gap:8px;margin-top:2px}
.sign-pills{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.sign-pill{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:4px 9px;border:0;border-radius:999px;background:#0000002e;color:#fff;font:inherit;font-size:12px;font-weight:700;line-height:1.1;cursor:pointer;transition:transform .12s}
.sign-pill:hover{background:#00000040}
.sign-pill:active{transform:scale(.94)}
.sign-pill span{color:#ffe192}
.sign-mascot{flex:none;width:46px;height:50px;margin:-8px -4px -6px 0;padding:0;border:0;border-radius:12px;background:none;cursor:pointer}
.sign-mascot-art{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 100%;animation:mascot-bob 2.6s ease-in-out infinite alternate;filter:drop-shadow(0 3px 2px #3a101c33)}
.sign-mascot:focus-visible{outline:3px solid #ffe192;outline-offset:2px}
/* Tips arrive as a speech bubble with the mascot's head. */
.toast-item.tone-tip{display:flex;align-items:center;gap:8px;padding-left:10px;border-color:#ffd38a66;background:#4b2a3cf5;text-align:left;border-bottom-left-radius:4px}
.toast-item.tone-tip::before{content:'';flex:none;width:26px;height:28px;background:var(--mascot-icon) center/contain no-repeat}
/* Guests' barks (up to 32 characters) are far wider than a seat: the outer seats' bubbles grow inwards, so the
   street's rounded edge never cuts their words, and every bubble rises in place (the translate property, which adds
   to the centring transform) instead of sliding in sideways from the seat's middle. A bubble lies over the next
   seats' faces, so it lets taps through: a tap on a face selects that guest, not the one talking. */
.speech{pointer-events:none;animation-name:speech-in}
@keyframes speech-in{from{opacity:0;translate:0 8px}}
.customer-lane>.customer:first-child .speech{left:0;transform:none}
.customer-lane>.customer:last-child .speech{left:auto;right:0;transform:none}
/* Petting the pet in the shop picture. */
/* Placed by its top-left corner: a translate() on this overlay made Chrome send real taps to the picture underneath
   when animations are off, although elementFromPoint still found the button. */
.pet-tap{position:absolute;z-index:1;min-width:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.pet-tap:focus-visible{outline:3px solid #ffe192}
.pet-tap.pet-cat{left:66%;top:73%;width:18%;height:14%}
.pet-tap.pet-dog{left:56%;top:72%;width:14%;height:16%}
.pet-tap.pet-hamster{left:8%;top:55.5%;width:10%;height:11%}
/* The pet hops and squashes about its own feet: an SVG group otherwise scales about the picture's top-left corner,
   which lifted the pet on the squash and flattened the jump. */
.prep-illustration [data-layer^="pet-"]{transform-box:fill-box;transform-origin:50% 100%}
@media (min-width:900px) and (min-height:560px){
  .shop-hero>.sign-row{order:2;align-items:center;margin:10px 4px 0}
  .shop-hero>.scene-wrap{order:3}
  .sign-pill{min-height:34px;padding:5px 13px;background:var(--awning);box-shadow:0 3px 0 var(--awning-shadow);font-size:12.5px}
  .sign-pill:hover{background:var(--awning-shadow)}
  .sign-mascot{width:62px;height:68px;margin:-12px 0 -18px}
  /* A short wide window (1366×657 under browser bars, 1024×600): the hero keeps its content height and the column
     scrolls under the pinned dock, instead of the pills and the picture spilling over the day card, its event and
     the update pill. A smaller least picture keeps that scroll short. */
  .shop-hero{min-height:auto}
  .scene-wrap{min-height:100px}
}
/* Story cards: the love story's medallion, a chili-red tag and a hint line under each choice. */
.drama-medallion{width:84px;height:84px;margin:0 auto 6px}
.drama-medallion>svg{display:block;width:100%;height:100%}
.drama-tag{display:table;margin:0 auto 4px;padding:3px 10px;border-radius:999px;background:var(--coral);color:#fff;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;text-align:center;text-wrap:balance}
.modal-actions.stacked{flex-direction:column}
.modal-actions.stacked>*{flex:none;width:100%}
.modal-actions button.with-hint{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:9px;padding-bottom:9px;line-height:1.25}
.choice-hint{display:block;font-size:12px;font-weight:600;color:var(--ink-2)}
.primary .choice-hint{color:#fff;opacity:.95}
/* Short landscape phones (844×390, 568×320): three full-width hint buttons left the love story's text no room at all
   (the body shrank to the medallion), so there the choices sit side by side and the medallion shrinks. */
@media (max-height:640px){.drama-medallion{width:48px;height:48px;margin-bottom:2px}}
@media (orientation:landscape) and (max-height:500px){
  .modal-actions.stacked{flex-direction:row;align-items:stretch}
  .modal-actions.stacked>*{flex:1 1 0;width:auto;min-width:0}
  .modal-actions button.with-hint{justify-content:flex-start;padding-left:10px;padding-right:10px}
}
@media (orientation:landscape) and (max-height:360px){.drama-medallion{display:none}}
/* Morning surprises and the neighbours' board. */
.gift-list{margin:4px 0 8px;padding:0;list-style:none}
.gift-list li{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.gift-mark{flex:none;font-size:18px;line-height:1.2}
.prank-quota{margin:6px 0 10px;font-size:14px}
.prank-quota b{font-size:17px;color:var(--coral)}
.neighbour-head{margin:12px 0 6px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--coral-dark)}
.neighbour-row{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:7px 10px;border-radius:13px;background:var(--tint)}
.neighbour-row.you{background:var(--mint);outline:1px solid var(--mint-line)}
.neighbour-row>img{flex:none;width:38px;height:38px;border-radius:50%;background:var(--tint-3);object-fit:contain}
.neighbour-row>div{flex:1;min-width:0}
.neighbour-row strong{display:block;font-size:14px;overflow-wrap:anywhere}
.neighbour-row small{display:block;font-size:11.5px;color:var(--muted)}
.board-rank{flex:none;width:20px;font-family:var(--display);font-size:15px;text-align:center;color:var(--coral-dark)}
.prank-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.prank-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;border:2px solid;border-radius:15px;font:inherit;color:var(--ink);cursor:pointer;transition:transform .12s}
.prank-tile:active{transform:scale(.95)}
.prank-tile.naughty{border-color:#f28ab2;background:#fff0f5}
.prank-tile.nice{border-color:#8fc86f;background:#f0f9ea}
.prank-tile svg{width:42px;height:42px}
.prank-tile strong{font-size:13.5px}
.prank-tile small{font-size:11px;line-height:1.3;color:var(--muted);text-align:center}
:root.dark .prank-tile.naughty{background:#4a2a36}
:root.dark .prank-tile.nice{background:#2e4232}
.wage-lines{font-size:12.5px!important;color:var(--muted)!important}
.staff-away{color:var(--coral-dark);font-weight:700}
/* --coral-dark stays dark in the dark theme (2.2:1 on its cards): these labels take a light coral there (7:1). */
:root.dark .staff-away,:root.dark .neighbour-head,:root.dark .board-rank,:root.dark .update-pill{color:#ffb3a8}
:root.dark .prank-quota b{color:#ff8f80}
/* Settings links and the update pill (offered on the prep screen only). */
.settings-links{display:grid;gap:8px;margin:12px 0 4px}
.settings-links .secondary{justify-content:flex-start;text-align:left}
.update-pill{display:block;width:100%;margin:8px 0 2px;padding:8px 12px;border:1px dashed var(--coral);border-radius:12px;background:var(--tint);color:var(--coral-dark);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
/* Meta screens (src/meta-ui.js): terms gate, what's new, install help */
.modal-content>.meta-updated{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--muted)}
.meta-terms{display:grid;gap:12px;margin:12px 0 4px;padding:0;list-style:none;counter-reset:meta-term}
.meta-terms>li{counter-increment:meta-term}
.meta-terms h3{display:flex;align-items:center;gap:8px;font-size:14.5px}
.meta-terms h3::before{content:counter(meta-term);display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--coral);color:#fff;font:13px/1 var(--display)}
.meta-terms p{margin:3px 0 0 32px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.meta-terms a{color:var(--coral-dark);font-weight:700;overflow-wrap:anywhere}
.dark .meta-terms a{color:#ffa99b}
dialog[data-locked] .modal-content:focus{outline:none}
.modal-actions>.meta-agree{flex:3 1 220px;display:flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;font-weight:700;line-height:1.35;cursor:pointer}
.meta-agree input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:none;width:26px;height:26px;min-height:0;margin:0;padding:0;border:2px solid var(--line-strong);border-radius:8px;background:var(--paper);cursor:pointer}
.meta-agree input::after{content:'';width:7px;height:13px;margin-top:-3px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .12s}
.meta-agree input:checked{border-color:var(--green-dark);background:var(--green)}
.meta-agree input:checked::after{transform:rotate(45deg) scale(1)}
.modal-actions>.meta-act{flex:1 1 auto;padding-left:12px;padding-right:12px}
.modal-actions>.meta-act.primary{flex-grow:2}
.modal-content>.meta-accepted{margin:0 0 10px;padding:8px 12px;border:1px solid var(--mint-line);border-radius:12px;background:var(--mint);color:var(--ink);font-size:13px;font-weight:700}
.modal-content>.meta-accepted.is-pending{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-ink)}
.meta-bob{animation:meta-bob 1.7s ease-in-out infinite alternate}
@keyframes meta-bob{from{transform:translateY(2px)}to{transform:translateY(-5px)}}
.meta-balance{text-wrap:balance}
.meta-news{display:grid;gap:7px;margin:10px 0 2px;padding:0;list-style:none}
.meta-news li{position:relative;padding:8px 12px 8px 30px;border-radius:12px;background:var(--tint);font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.meta-news li::before{content:'';position:absolute;left:12px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--coral)}
.meta-news strong{color:var(--ink)}
.meta-steps{display:grid;gap:10px;margin:12px 0 4px;padding:0;list-style:none}
.meta-step{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--tint)}
.meta-step.is-current{border-color:var(--warn-line);background:var(--warn-bg)}
.meta-tile{width:40px;height:40px}
.meta-step h3{font-size:14px}
.meta-step p{margin:3px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.meta-chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--coral);color:#fff;font-size:11px;font-weight:700;vertical-align:1px;white-space:nowrap}
.modal-content>.meta-note{padding:10px 12px;border:1px solid var(--mint-line);border-radius:12px;background:var(--mint);color:var(--ink)}
.meta-ios-tip svg{display:inline-block;width:16px;height:16px;margin:0 2px;vertical-align:-3px}