:root { font-family: "Noto Sans TC", system-ui, sans-serif; color: #fffdf5; background: #123b39; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(circle at top, #2d746e, #102d2b 68%); }
button, select { font: inherit; }
.cafe-app { width: min(100%, 820px); min-height: 100svh; margin: auto; padding: max(12px, env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)); }
.topbar { display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(116px, 170px); gap: 10px; align-items: center; margin-bottom: 12px; }
.home-link { width: 58px; min-height: 44px; display: grid; grid-template-columns: 16px 28px; place-content: center; gap: 4px; overflow: hidden; border-radius: 12px; background: #fff9e9; color: #235a55; text-decoration: none; font-size: 1.35rem; font-weight: 900; }
.home-link img { width: 28px; height: 28px; object-fit: contain; }.brand span,.locale span,.profile-grid span,.play-hud span { display:block; color:#a8e4d7; font-size:12px; font-weight:800; }.brand h1 { margin:2px 0 0; font-size:clamp(20px,5vw,32px); line-height:1.05; }.locale { display:grid; gap:4px; }.locale select { min-height:38px; border:1px solid #69b5aa; border-radius:10px; color:#fff; background:#123b39; padding:0 8px; }
.menu-panel { display:grid; grid-template-columns:minmax(220px,.82fr) minmax(0,1fr); gap:18px; padding:16px; border:2px solid #7bc9ba; border-radius:18px; background:#164b46; box-shadow:0 16px 40px #061d1b88; }.cover { width:100%; aspect-ratio:1; object-fit:cover; border-radius:13px; }.menu-copy { display:grid; align-content:start; gap:13px; }.eyebrow { width:max-content; padding:5px 9px; border-radius:99px; background:#f7cd63; color:#583d12; font-size:12px; font-weight:900; }.menu-copy h2,.menu-copy p { margin:0; }.menu-copy p { color:#d3eee8; line-height:1.5; }.profile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.profile-grid>div,.upgrade-panel { padding:10px; border:1px solid #5fa899; border-radius:12px; background:#0f3936; }.profile-grid b { font-size:20px; color:#ffe293; }
.upgrade-panel { display:grid; gap:10px; }.upgrade-panel small { display:block; color:#b8dcd4; margin-top:3px; }.upgrade-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.upgrade-card { min-height:82px; border:1px solid #75b8ad; border-radius:10px; background:#194b46; color:#fff; padding:7px; text-align:left; }.upgrade-card:disabled { opacity:.55; }.upgrade-card b,.upgrade-card span { display:block; }.upgrade-card span { color:#fee08a; font-size:11px; margin-top:4px; }
.primary-btn,.secondary-btn { min-height:48px; border:0; border-radius:12px; font-weight:900; cursor:pointer; }.primary-btn { color:#173532; background:linear-gradient(#ffe68d,#f6aa3c); box-shadow:0 5px 0 #9c5a22; }.secondary-btn { color:#17443e; background:#e6faf4; }.is-hidden { display:none !important; }
.play-panel { position:relative; display:grid; grid-template-rows:44px 44px minmax(0,1fr) 132px 30px; gap:8px; min-height:calc(var(--wp-mobile-vh, 100svh) - 80px); max-height:calc(var(--wp-mobile-vh, 100svh) - 80px); overflow:hidden; padding:8px; border:2px solid #83d8c5; border-radius:16px; background:#0e332f; }.play-return { position:absolute; z-index:3; top:8px; left:8px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:10px; color:#21443f; background:#fff3c3; font-size:24px; font-weight:900; }.play-hud { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding-left:48px; }.play-hud>div { padding:5px 8px; border-radius:9px; background:#164943; text-align:center; }.play-hud b { display:block; color:#ffe490; }.objective-row { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 10px; border-radius:10px; background:#fff8de; color:#34524a; font-weight:900; text-align:center; }.objective-row .food-icon { width:28px; height:28px; }.cafe-scene { position:relative; min-height:0; overflow:hidden; border-radius:13px; border:2px solid #6bb7a8; background:#143f3b; }.cafe-bg { width:100%; height:100%; object-fit:cover; }.customer-row { position:absolute; inset:0; display:flex; align-items:end; justify-content:space-evenly; gap:6px; padding:8px; }.customer { width:30%; max-width:150px; border:2px solid transparent; border-radius:12px; background:#0d342fcc; color:#fff; padding:3px; cursor:pointer; }.customer.is-selected { border-color:#ffe17c; box-shadow:0 0 0 3px #e9a73d88; }.customer img { display:block; width:100%; height:clamp(82px,20vw,120px); object-fit:contain; }.patience { height:7px; overflow:hidden; border-radius:99px; background:#371e1e; }.patience i { display:block; height:100%; background:linear-gradient(90deg,#ff6f70,#f6d365,#64d99b); }.customer small { display:block; min-height:17px; overflow:hidden; text-align:center; white-space:nowrap; text-overflow:ellipsis; font-size:10px; }
.prep-row { display:grid; grid-template-columns:1fr 130px; gap:8px; min-height:0; }.station-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.station { min-width:0; border:2px solid #63b6a7; border-radius:10px; overflow:hidden; background:#174641; color:#fff; cursor:pointer; padding:0; }.station img { display:block; width:100%; height:76px; object-fit:cover; }.station span { display:block; padding:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10px; font-weight:900; }.tray { display:grid; place-items:center; border:2px dashed #e8c264; border-radius:11px; background:#123b37; padding:6px; text-align:center; cursor:pointer; }.tray .food-icon { width:58px; height:58px; }.tray b { font-size:11px; }.food-icon { display:inline-block; flex:0 0 auto; background-image:url('../../assets/animal-cafe-rush-order-icons.webp'); background-size:400% 200%; border-radius:14%; }.food-smoothie { background-position:0 0; }.food-sandwich { background-position:33.333% 0; }.food-fruit { background-position:66.666% 0; }.food-cookie { background-position:100% 0; }.food-cake { background-position:0 100%; }.food-juice { background-position:33.333% 100%; }.food-salad { background-position:66.666% 100%; }.food-bread { background-position:100% 100%; }.play-message { display:grid; place-items:center; min-height:0; color:#d8f5ee; font-size:12px; font-weight:800; text-align:center; }.ad-reserve { height:56px; }
.result-panel { position:fixed; z-index:9; inset:0; display:grid; place-items:center; padding:16px; background:#061815bb; }.result-card { width:min(100%,420px); display:grid; gap:11px; padding:18px; border:2px solid #8ad7c7; border-radius:18px; background:#174943; text-align:center; }.result-card img { width:110px; height:110px; object-fit:contain; margin:auto; }.result-card h2,.result-card p { margin:0; }.result-card p { color:#d1eee7; }.result-card>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
body.is-cafe-playing { overflow:hidden; } body.is-cafe-playing .cafe-app { position:fixed; top:0; bottom:0; left:50%; width:min(100vw,820px); height:var(--wp-mobile-vh,100svh); min-height:var(--wp-mobile-vh,100svh); max-height:var(--wp-mobile-vh,100svh); padding:8px; overflow:hidden; transform:translateX(-50%); } body.is-cafe-playing .topbar,body.is-cafe-playing .menu-panel,body.is-cafe-playing .game-page-info { display:none !important; }
@media (max-width:620px) { .menu-panel { grid-template-columns:1fr; }.cover { max-height:220px; object-position:center 30%; }.play-panel { grid-template-rows:42px 42px minmax(0,1fr) 124px 28px; }.station img { height:66px; }.prep-row { grid-template-columns:1fr 104px; } }

/* First-day guidance uses the same visual language as the playable controls. */
.step-number { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:#f4b845; color:#244640; }
.customer-select { color:#d7f4ed; font-size:9px; }
.station { transition:border-color .16s ease, box-shadow .16s ease, opacity .16s ease; }
.station.is-awaiting { opacity:.52; }
.station.is-needed { border-color:#ffe17c; box-shadow:0 0 0 3px #e9a73d88; }
.tray { transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.tray.is-ready { border-style:solid; border-color:#9bea82; background:#215d46; box-shadow:0 0 0 3px #8fe07466; }
.station img { object-fit:contain; padding:5px; background:#0e342f; }
.queue-customer { position:relative; overflow:visible; padding-top:12px; animation:queue-arrive .22s ease-out; }
.queue-customer img { margin-top:8px; }
.order-cloud { position:absolute; z-index:2; top:-22px; left:50%; display:grid; place-items:center; width:48px; height:38px; border:2px solid #f2c765; border-radius:18px; background:#fff8de; box-shadow:0 4px 0 #9d6b2d; transform:translateX(-50%); }
.order-cloud::after { position:absolute; bottom:-7px; left:12px; width:11px; height:11px; border-right:2px solid #f2c765; border-bottom:2px solid #f2c765; background:#fff8de; content:""; transform:rotate(45deg); }
.order-cloud .food-icon { position:relative; z-index:1; width:27px; height:27px; }
.queue-customer small { color:#c5e9e0; font-size:9px; }
@keyframes queue-arrive { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

/* Speed-service board: food tiles replace the old cropped station artwork. */
.customer-row { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); align-content:end; gap:18px 5px; padding:28px 6px 8px; }
.queue-customer { width:100%; max-width:none; min-width:0; padding:10px 2px 2px; animation:queue-arrive .22s ease-out; }
.queue-customer img { height:clamp(54px, 10vw, 86px); margin-top:2px; }
.queue-customer small { min-height:0; padding:2px; font-size:8px; }
.queue-customer.is-leaving { pointer-events:none; animation:customer-leave .45s ease-in forwards; }
.order-cloud { top:-24px; display:flex; width:max-content; min-width:38px; max-width:none; height:34px; gap:3px; padding:3px 6px; white-space:nowrap; }
.order-item { position:relative; z-index:1; display:grid; place-items:center; flex:0 0 auto; width:22px; height:22px; }
.order-cloud .food-icon { width:21px; height:21px; }
.order-count { position:absolute; right:-5px; bottom:-5px; z-index:2; display:grid; place-items:center; min-width:16px; height:16px; padding:0 3px; border-radius:8px; background:#e9564f; color:#fff; box-shadow:0 1px 0 #802b28; font-size:10px; line-height:1; }
.order-cloud::after { left:calc(50% - 5px); }
.prep-row { grid-template-columns:minmax(0, 1fr) 104px; }
.station-row { grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); gap:6px; }
.station.food-tile { display:grid; place-items:center; min-height:0; border-color:#80cbbd; background:#1c554d; }
.station.food-tile .food-icon { width:min(44px, 72%); aspect-ratio:1; height:auto; }
.station.food-tile.is-new { animation:tile-drop .22s ease-out; }
.station img { display:none; }
.tray { overflow:hidden; }
.tray > div { display:flex; flex-wrap:wrap; justify-content:center; gap:3px; }
.tray .food-icon { width:34px; height:34px; }
@keyframes customer-leave { to { opacity:0; transform:translateY(-28px) scale(.82); } }
@keyframes tile-drop { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:620px) { .play-panel { grid-template-rows:42px 42px minmax(0,1fr) 142px 28px; }.prep-row { grid-template-columns:minmax(0, 1fr) 96px; }.customer-row { gap:16px 4px; padding-top:26px; }.queue-customer img { height:58px; }.station-row { gap:5px; }.station.food-tile .food-icon { width:min(40px, 76%); } }