@charset "UTF-8";
:root { --paper:#fbf7e9; --cream:#fffdf3; --ink:#4e5140; --muted:#7a7d67; --green:#5e7350; --sage:#a9b880; --yellow:#f0dfa1; --line:#d6d4bc; --coral:#cd8c70; --blue:#b9c9ca; --serif:"KaiTi","STKaiti","FangSong",serif; }
* { box-sizing:border-box; }
.demo-button[hidden], [data-time-machine][hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.65 "Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.5; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #a9bc86; outline-offset:4px; }
button { touch-action:manipulation; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:var(--serif); font-weight:700; }
h1 { font-size:30px; line-height:1.4; letter-spacing:1px; }
h2 { font-size:22px; line-height:1.5; }
h3 { font-size:15px; font-weight:600; line-height:1.55; }
small { font-size:12px; }
strong { font-weight:600; }
.icon { width:22px; height:22px; flex:none; vertical-align:middle; }
.brand-mark .icon { fill:currentColor; width:34px; height:34px; stroke-width:.8; }
.app-shell { min-height:100dvh; }
.sidebar { position:fixed; left:0; top:0; bottom:0; width:194px; padding:35px 18px 22px; background:#eeeccb; border-right:1px solid #d3d3b3; display:flex; flex-direction:column; z-index:20; }
.brand { display:flex; gap:9px; align-items:center; margin:0 5px 48px; font:700 23px/1.5 var(--serif); color:var(--green); white-space:nowrap; }
.brand small { display:block; font:10px/1.8 "Microsoft YaHei",sans-serif; color:#798064; letter-spacing:1px; }
.sidebar nav { display:grid; gap:14px; }
.nav-item { display:flex; align-items:center; gap:14px; min-height:52px; padding:11px 16px; border:1.5px solid transparent; border-radius:13px 17px 12px 16px; font-weight:600; color:#74775e; position:relative; }
.nav-item:hover { background:#e5e6bf; }
.nav-item.active { border-color:#7f8c64; background:#d7dfb5; color:#46593a; box-shadow:0 2px 0 #bdc69b; }
.nav-dot { background:#c58269; color:#fffdf3; border-radius:50%; font-size:10px; width:18px; height:18px; display:grid; place-items:center; margin-left:auto; }
.sidebar-bottom { margin-top:auto; text-align:center; padding-top:35px; }
.sidebar-pet .pet-art { width:95px; }
.sidebar-bottom p { color:#86876e; font-size:12px; line-height:1.9; margin:5px 0 15px; }
.workspace { margin-left:194px; max-width:1530px; }
.topbar { height:84px; display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 38px; border-bottom:1px dashed #d4d2bc; }
.date-label { display:flex; align-items:center; gap:10px; color:#74795e; }
.date-label small { color:#969780; margin-left:4px; }
.wallet { display:flex; gap:9px; align-items:center; color:#847445; background:#f1e5b9; border:1.5px solid #b9a367; padding:5px 15px; border-radius:15px 12px 13px 11px; }
.wallet strong { font-size:22px; font-variant-numeric:tabular-nums; color:#69603e; }
.wallet>span:last-child { font-size:11px; }
.wallet .icon { color:#a8883e; width:21px; }
.mobile-brand,.mobile-settings { display:none !important; }
main { padding:29px 38px 22px; min-height:calc(100dvh - 150px); }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }
.page-heading p { margin-top:7px; color:var(--muted); font-size:13px; }
.open-tag { color:#74805b; font-size:12px; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.open-tag i { width:7px; height:7px; border-radius:50%; background:#96a76a; }
.open-tag.paused { color:#a68b54; }
.open-tag.paused i { background:#c8a768; }
.till-panel { background:#f4ebc9; border:1.5px solid #c8b881; border-radius:12px 17px 11px 15px; padding:17px 18px 13px; margin:18px 0 26px; }
.till-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.till-heading .eyebrow { color:#a18e59; margin-bottom:2px; }
.till-heading strong { font-size:27px; color:#827043; }
.till-heading strong small { font-size:11px; font-weight:400; color:#a18e59; }
.till-heading .button { font-size:12px; }
.till-progress { height:6px; margin:14px 0 8px; background:#e6d9ad; border-color:#ccb87e; }
.till-progress>span { background:#b49b5f; }
.till-panel>p { color:#a08d5d; font-size:11px; }
.orders-section { margin:0 0 26px; }
.order-capacity { font-size:11px; color:#909879; background:#edf0d9; border:1px solid #ccd3ae; border-radius:8px; padding:4px 9px; white-space:nowrap; }
.orders-list { display:grid; gap:10px; }
.order-ticket { width:100%; display:flex; align-items:center; gap:13px; text-align:left; background:#fcf9e9; border:1px dashed #bfc5a0; border-radius:10px 14px 9px 12px; padding:14px 15px; }
.order-ticket:hover { background:#f0f2dc; }
.guest-mark { width:42px; height:42px; flex:none; display:grid; place-items:center; font:700 22px/1 var(--serif); background:#e7eacb; border:1px solid #bfc6a0; color:#7d8a5e; border-radius:50%; }
.order-ticket-body { flex:1; min-width:0; }
.order-ticket-body strong { display:block; font-size:13px; }
.order-ticket-body small { display:block; font-size:11px; color:#a09a7b; margin:4px 0; line-height:1.8; }
.order-ticket-body>span { font-size:10px; color:#9a8957; }
.order-ticket>.icon { width:17px; color:#9ba57b; }
.orders-empty { padding:20px 17px; display:flex; gap:15px; align-items:center; border:1px dashed #d1cfb5; border-radius:12px 16px 11px 14px; color:#a5a38a; }
.orders-empty>.icon { width:30px; height:30px; color:#b9bea0; }
.orders-empty p { font-size:12px; }
.orders-empty small { font-size:10px; margin-top:4px; display:block; }
.pet-observe-note { font-size:11px; color:#a9a489; margin:-8px 0 23px; }
.customer-request { display:flex; align-items:center; gap:13px; background:#eef0d8; border:1px solid #ccd1ac; border-radius:11px 16px 10px 14px; padding:15px; margin:20px 0; }
.customer-request strong { font-size:12px; color:#7c8861; }
.customer-request p { font-size:12px; line-height:1.9; color:#919278; margin-top:5px; }
.preparation-steps { display:flex; align-items:center; justify-content:center; gap:24px; margin:0 0 23px; }
.preparation-steps>span { display:flex; align-items:center; gap:7px; font-size:11px; color:#aeaa90; }
.preparation-steps b { width:23px; height:23px; display:grid; place-items:center; font-weight:400; border:1px solid #d1cdb3; border-radius:50%; }
.preparation-steps>.current { color:#7e8d60; }
.preparation-steps>.current b,.preparation-steps>.done b { background:#e1e8c2; border-color:#aebd8d; color:#78915b; }
.manual-drinks .drink-option { justify-content:flex-start; gap:8px; }
.preparation-preview { display:flex; gap:15px; align-items:center; justify-content:center; background:#f3eed7; border-radius:12px; padding:10px; margin-bottom:20px; }
.preparation-preview .drink-art { width:90px; height:90px; margin:0; }
.preparation-preview strong { display:block; font:700 22px/1.6 var(--serif); }
.preparation-preview span { color:#a29a7e; font-size:11px; display:block; margin-top:5px; }
.preparation-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.preparation-choice { background:#fffbed; border:1.5px solid #c4c7a3; border-radius:13px 18px 11px 16px; display:flex; flex-direction:column; align-items:center; padding:22px 10px; gap:10px; }
.preparation-choice:hover { background:#e9edcf; border-color:#9eaf7f; }
.preparation-choice>.icon { width:31px; height:31px; color:#a2a875; }
.preparation-choice strong { font:700 22px/1.5 var(--serif); }
.preparation-choice small { font-size:10px; color:#aaa183; }
.sugar-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sugar-doodle { font-size:23px; color:#b0a478; height:32px; }
.serve-note { text-align:center; font-size:12px; color:#9c967a; margin:25px 0; }
.served-cup>.icon { width:75px; height:75px; color:#9da875; stroke-width:1.3; margin:15px auto 25px; }
.manual-reward { background:#e7edcb; border:1px solid #bfcba0; border-radius:12px 17px 10px 15px; padding:17px; margin-bottom:20px; }
.manual-reward small { display:block; color:#8c9a6b; font-size:11px; }
.manual-reward strong { display:block; font-size:33px; color:#738653; }
.manual-reward strong span { font-size:12px; font-weight:400; }
.cafe-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:25px; }
.cafe-main,.cafe-aside { min-width:0; }
.cafe-scene { width:100%; aspect-ratio:1.58; position:relative; border:2px solid #77785a; overflow:hidden; border-radius:22px 15px 19px 16px; background:#e9d9b3; }
.cafe-background { width:100%; height:100%; object-fit:cover; display:block; }
.scene-sign { position:absolute; left:18px; top:16px; background:#fffae8ed; border:1.5px solid #8e8c69; box-shadow:2px 3px 0 #7b785b24; border-radius:5px 8px 4px 6px; padding:7px 15px; text-align:center; font:700 22px/1.35 var(--serif); transform:rotate(-3deg); }
.scene-sign small { display:block; font:10px/1.8 "Microsoft YaHei",sans-serif; letter-spacing:1px; color:#88866a; }
.scene-weather { position:absolute; right:14px; top:14px; display:flex; gap:7px; align-items:center; padding:3px 9px; border-radius:12px; background:#fff9e8db; color:#777353; font-size:11px; }
.scene-weather .icon { width:17px; height:17px; }
.scene-pet { position:absolute; bottom:11%; left:51%; transform:translateX(-50%); border:0; background:none; padding:0; width:21%; transition:transform .2s; }
.scene-pet:hover { transform:translateX(-50%) rotate(-3deg); }
.scene-pet .pet-art { width:100%; }
.scene-caption { position:absolute; left:0; right:0; bottom:0; text-align:center; padding:7px; background:#fcf8e5e8; color:#70735b; font-size:11px; border-top:1px solid #999b7370; }
.scene-caption .icon { width:14px; height:14px; margin-right:5px; }
.away-note { position:absolute; bottom:19%; left:40%; background:#fff8de; border:1px solid #9c9676; padding:8px 12px; transform:rotate(-4deg); font-family:var(--serif); font-size:15px; }
.away-note small { color:var(--muted); }
.wall-postcard { width:16%; position:absolute; right:10%; top:28%; padding:4px 4px 2px; background:#fffcf1; border:1px solid #a39273; transform:rotate(8deg); box-shadow:2px 3px 0 #71684d20; }
.wall-postcard span { font-size:7px; white-space:nowrap; display:block; }
.souvenir-shelf { position:absolute; right:4%; bottom:14%; display:flex; gap:5px; }
.souvenir-shelf>span { display:flex; flex-direction:column; align-items:center; padding:4px 5px; border:1px solid #8a8f6d; border-radius:5px 7px 4px 6px; background:#f6f1cfe8; color:#7c8961; transform:rotate(3deg); }
.souvenir-shelf .icon { width:22px; height:25px; }
.souvenir-shelf small { font-size:7px; }
.pet-art { display:inline-block; background-image:url('./assets/pets-v2.png'); background-size:200% 100%; background-repeat:no-repeat; width:120px; aspect-ratio:1; vertical-align:middle; }
.pet-cat { background-position:0% 50%; }
.pet-dog { background-position:100% 50%; }
.pet-activity { position:relative; background-image:url('./assets/pet-activities.png'); background-size:300% 200%; background-position:var(--pose-x) var(--pose-y); transform-origin:50% 90%; }
.activity-read { animation:pet-read 6s ease-in-out infinite; }
.activity-play { animation:pet-play 2.5s ease-in-out infinite; }
.activity-write { animation:pet-write 3.8s ease-in-out infinite; }
.activity-marks { position:absolute; width:7px; height:7px; border:1.5px solid #9eac78; border-left:0; border-bottom:0; right:13%; top:23%; transform:rotate(-15deg); animation:pet-thought 4s ease-in-out infinite; }
.activity-options { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:20px 0 7px; }
.activity-options .button { font-size:12px; padding:9px 12px; }
.activity-options .chosen { background:#dfe8bd; border-color:#879c63; }
@keyframes pet-read { 0%,100% { transform:rotate(-.7deg); } 48% { transform:rotate(.7deg) translateY(1px); } 52% { transform:rotate(.7deg) translateY(1px); } }
@keyframes pet-play { 0%,65%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(-2px) rotate(-1deg); } 45% { transform:translateY(-1px) rotate(1deg); } }
@keyframes pet-write { 0%,100% { transform:rotate(-.5deg); } 30%,70% { transform:rotate(1deg) translateY(1px); } 50% { transform:rotate(0); } }
@keyframes pet-thought { 0%,70%,100% { opacity:0; } 20%,45% { opacity:.7; } }
.scene-tile { background-image:url('./assets/postcards-v2.png'); background-size:400% 400%; background-position:var(--tile-x) var(--tile-y); background-repeat:no-repeat; aspect-ratio:1.5; }
.business-strip { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 2px 20px; border-bottom:1px dashed #cccbb3; }
.business-strip>div { display:flex; gap:12px; align-items:center; color:#85866b; font-size:11px; }
.business-strip>div>.icon { color:#86936d; width:25px; height:25px; }
.business-strip strong { display:block; color:var(--ink); font-size:17px; line-height:1.6; }
.business-strip strong small { font-size:10px; color:#8c8e79; font-weight:400; }
.business-strip strong>span { font-variant-numeric:tabular-nums; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 19px; border:1.5px solid #718159; border-radius:12px 15px 11px 14px; background:var(--cream); line-height:1.5; font-weight:600; font-size:13px; }
.button .icon { width:18px; height:18px; }
.primary { background:#a9bc84; color:#3f5134; border-color:#66784f; box-shadow:0 3px 0 #74885a; }
.primary:hover:not(:disabled) { background:#b8c995; }
.primary:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #74885a; }
.secondary { background:#f6f5dc; border-color:#b3b995; color:#61724e; }
.secondary:hover:not(:disabled) { background:#e9edce; }
.full { width:100%; }
.small { padding:7px 13px; font-size:12px; }
.icon-button { border:0; background:transparent; border-radius:50%; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:8px; }
.icon-button:hover { background:#dfe3bf80; }
.text-button { border:0; background:transparent; color:#6f805b; padding:10px 0; min-height:44px; font-size:12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.text-button .icon { width:16px; height:16px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }
.section-title h2 { display:flex; align-items:center; gap:8px; font-size:21px; }
.section-title p { color:#93917b; font-size:11px; margin-top:3px; }
.menu-section { margin-top:23px; }
.menu-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:#f1efd8; border:1.5px solid #b1b294; border-radius:14px 20px 13px 17px; overflow:hidden; }
.drink-card { text-align:center; padding:12px 10px 15px; position:relative; }
.drink-card+.drink-card { border-left:1px dashed #c1c2a6; }
.drink-art { width:90px; height:90px; display:block; margin:0 auto; flex:none; }
.drink-card h3 { font:700 17px/1.5 var(--serif); margin:0 0 5px; }
.drink-tags { font-size:10px; color:#939078; display:block; margin-bottom:4px; }
.drink-card strong { font-size:14px; color:#6c7755; }
.drink-card strong small { font-weight:400; font-size:10px; color:#939078; }
.drink-popular { position:absolute; right:5px; top:7px; background:#dee4bf; border-radius:5px; color:#708353; padding:1px 5px; font-size:9px; }
.cafe-bottom { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:18px; }
.upgrade-note,.feedback-note { text-align:left; padding:13px 12px; min-width:0; background:#f3ead1; border:1px solid #d6c9a6; border-radius:9px 14px 10px 12px; }
.upgrade-note { display:flex; align-items:center; gap:9px; }
.upgrade-note>span:nth-child(2) { min-width:0; }
.upgrade-note strong { font-size:12px; display:block; }
.upgrade-note small { font-size:10px; color:#999075; display:block; margin-top:4px; }
.upgrade-note>.icon { width:16px; margin-left:auto; }
.upgrade-doodle { padding:7px; border:1px solid #b9ad83; border-radius:8px; color:#92865e; }
.feedback-note { background:#f9f2df; border-style:dashed; }
.feedback-note>span { font-size:10px; color:#999078; }
.feedback-note p { font:15px/1.6 var(--serif); margin-top:3px; }
.note-paper { border:1.5px solid #c7c6a5; border-radius:14px 19px 13px 17px; background:#f6f2da; padding:22px; }
.pet-panel { text-align:center; padding:15px 20px 13px; position:relative; }
.pet-panel:before,.mail-panel:before { content:""; position:absolute; width:53px; height:15px; background:#d5dcb4bf; top:-8px; left:calc(50% - 26px); transform:rotate(-5deg); }
.pet-panel>.pet-art { width:115px; margin-bottom:4px; }
.eyebrow { display:block; color:#939175; font-size:11px; letter-spacing:1px; margin-bottom:5px; }
.pet-panel h2 { font-size:22px; }
.pet-panel p { color:#95917c; font-size:11px; line-height:1.9; margin:9px 0 15px; }
.pet-panel>.text-button { margin-top:2px; font-size:10px; }
.trip-track { font-size:10px; display:flex; justify-content:space-between; gap:5px; margin:16px 0 5px; color:#7e8866; }
.trip-track .icon { width:14px; height:14px; }
.trip-track b { font-weight:400; }
.progress { height:7px; border:1px solid #c4c8a6; background:#e5e7cb; border-radius:5px; overflow:hidden; margin-bottom:15px; }
.progress>span { height:100%; width:0; background:#99ad6e; display:block; }
.mail-panel { margin-top:25px; position:relative; background:#fcf7e8; padding:18px; }
.mail-panel:before { background:#e8cf9ac4; transform:rotate(4deg); }
.mail-panel h2 { font-size:20px; }
.mail-panel .section-title { gap:5px; }
.mail-panel .section-title .icon { width:18px; height:18px; }
.pill { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; border-radius:8px; padding:4px 8px; font-size:11px; }
.pill .icon { width:15px; height:15px; }
.pill.coral { background:#f0daca; color:#a16c50; font-size:9px; }
.pill.green { background:#e1e8c7; color:#73845a; }
.pill.paper { background:#eeedda; color:#81866a; }
.empty-mail { color:#9c9a85; text-align:center; padding:12px 0; }
.empty-mail>.icon { width:39px; height:39px; stroke-width:1; margin-bottom:12px; }
.empty-mail p { font-size:11px; margin-bottom:5px; }
.empty-mail small { font-size:10px; }
.mini-postcard { display:flex; align-items:center; gap:10px; }
.mini-postcard>.scene-tile { width:90px; border:3px solid #fffdf2; transform:rotate(-4deg); box-shadow:0 1px 2px #77743f30; }
.mini-postcard>div:last-child { flex:1; }
.mini-postcard h3 { font-size:12px; }
.mini-postcard small { font-size:10px; color:#aaa28a; }
.little-goal { padding:23px 13px; }
.little-goal>span:first-child { display:flex; gap:8px; align-items:center; font-size:12px; color:#8c8d6b; }
.little-goal p { font-size:12px; color:#98957c; line-height:1.9; margin:10px 0 15px; }
.handwritten { font-family:var(--serif); }
.little-goal>.handwritten { display:block; text-align:right; font-size:19px; color:#9b9b7e; transform:rotate(-4deg); }
.game-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 38px 22px; color:#a2a08a; font-size:10px; gap:10px; }
.demo-button { background:transparent; border:1px dashed #c5c4a9; border-radius:8px; padding:7px 10px; color:#8f9375; font-size:11px; min-height:36px; }
.demo-button span { color:#6c7d55; margin-left:8px; }
.toast { position:fixed; z-index:150; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#505d43; border:1.5px solid #3e4c33; color:#fffbed; border-radius:12px 17px 12px 16px; padding:12px 22px; font-size:13px; max-width:min(92vw,600px); width:max-content; box-shadow:0 4px 0 #3e4c3320; transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.save-warning { background:#f1d8ab; color:#795c36; padding:8px 20px; position:sticky; top:0; z-index:180; font-size:12px; }
/* The travel spread. */
.destination-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.destination { position:relative; padding:0; overflow:hidden; border:2px solid #b8b99c; border-radius:17px 22px 15px 19px; text-align:left; background:#e4e6c8; }
.destination>.scene-tile { aspect-ratio:1.85; }
.destination-label { padding-top:30px; }
.destination-label { display:block; padding:16px 20px 20px; background:#f4f2dc; position:relative; }
.destination-label small { display:block; font-size:10px; color:#90927b; letter-spacing:2px; }
.destination-label strong { display:block; font:700 30px/1.6 var(--serif); }
.destination-label>span { font-size:12px; color:#8e9076; }
.destination-check { position:absolute; right:20px; bottom:29px; width:32px; height:32px; display:grid; place-items:center; border:1px solid #b0b891; border-radius:50%; color:#7e8c60; }
.destination.selected { border-color:#7a8d5e; box-shadow:0 3px 0 #a9b388; }
.destination.selected .destination-label { background:#e6ebcf; }
.destination.selected .destination-check { background:#a9bc84; border-color:#7b8e5f; color:#f8f8e9; }
.city-progress { position:absolute; top:12px; right:12px; padding:4px 9px; background:#fdf9e6ed; border-radius:8px; color:#6f7957; font-size:10px; }
.route-section { margin-top:32px; }
.subtle { color:#9b9984; font-size:12px; }
.route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.route-card { text-align:left; position:relative; background:#f7f3e1; border:1.5px solid #c7c8aa; border-radius:15px 20px 13px 17px; padding:21px 20px 18px; }
.route-card.selected { background:#eaf0d7; border-color:#879b68; box-shadow:0 3px 0 #b1c393; }
.route-icon { display:grid; place-items:center; width:40px; height:40px; background:#e7e8cb; border:1px solid #bdc4a1; border-radius:12px 15px 10px 14px; color:#7e9162; margin-bottom:15px; }
.route-card h3 { font:700 23px/1.5 var(--serif); }
.route-card p { font-size:11px; color:#99967f; margin:8px 0 18px; min-height:36px; }
.route-metrics { display:flex; gap:10px; justify-content:space-between; align-items:center; }
.route-metrics strong { color:#6c7e53; font-size:15px; }
.route-metrics>span { color:#a08c54; font-size:12px; }
.route-odds { display:block; font-size:10px; color:#92977c; margin-top:7px; }
.route-lock { display:flex; gap:4px; align-items:center; margin-top:13px; color:#a2a18e; font-size:10px; }
.route-lock .icon { width:13px; height:13px; }
.route-choice { position:absolute; right:17px; top:22px; color:#829567; }
.route-choice .icon { width:18px; height:18px; }
.route-card.locked { background:#f0efdf; border-style:dashed; }
.departure-note { margin-top:29px; padding:17px 20px; border-top:1px dashed #c9cab2; border-bottom:1px dashed #c9cab2; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.departure-note>div { display:flex; align-items:center; gap:16px; }
.departure-note .pet-art { width:80px; flex:none; }
.departure-note p { font-size:11px; color:#989680; margin-top:4px; }
.departure-note .text-button { padding:5px 0; min-height:30px; font-size:10px; }
.travel-footnote { font-size:11px; color:#a4a18b; margin-top:15px; text-align:center; }
.active-trip { border:1.5px solid #9ca77f; background:#f5f1dd; overflow:hidden; border-radius:18px 25px 16px 21px; }
.travel-hero { position:relative; height:320px; overflow:hidden; }
.travel-hero>.scene-tile { height:100%; aspect-ratio:auto; }
.travel-hero-caption { position:absolute; left:26px; top:24px; background:#fcf8e7e8; padding:15px 22px; border:1.5px solid #959875; border-radius:10px 14px 8px 13px; transform:rotate(-2deg); }
.travel-hero-caption>span { font-size:11px; color:#8b9074; }
.travel-hero-caption h2 { font-size:27px; margin-top:3px; }
.travel-pet { position:absolute; bottom:4%; right:15%; width:135px; }
.trip-summary { padding:24px 28px 18px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.trip-summary h2 { margin-top:8px; font-size:24px; }
.trip-summary p { color:#97957f; margin-top:8px; font-size:12px; }
.progress.wide { margin:4px 28px 10px; }
.travel-stops { display:flex; justify-content:space-between; padding:0 28px 22px; font-size:10px; color:#96977f; }
.travel-bottom { margin-top:25px; text-align:center; padding:25px; border-style:dashed; }
.travel-bottom p { margin:10px 0 18px; font-size:12px; color:#96947c; }
/* Collected postcard album and neighborhood journal. */
.album-tabs { display:flex; align-items:center; gap:8px; padding:0 0 17px; border-bottom:1px dashed #d2d0ba; margin-bottom:27px; }
.album-tabs button { border:1px solid transparent; background:none; padding:8px 15px; min-height:44px; border-radius:10px 14px 9px 12px; font-size:12px; color:#92917a; }
.album-tabs button.selected { background:#e3e9c9; border-color:#b2bd94; color:#6d8052; }
.album-count { margin-left:auto; color:#aaa78e; font-size:12px; }
.postcard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:27px 23px; padding:3px 4px 15px; }
.album-blank { min-height:230px; border:1.5px dashed #cecbb1; background:#fcf9ed; padding:30px 22px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; border-radius:5px 9px 6px 8px; }
.album-blank:only-child { grid-column:1/-1; min-height:320px; }
.blank-postcard { display:grid; place-items:center; width:75px; height:52px; border:1px solid #d7d2b9; background:#fffcf1; transform:rotate(-6deg); color:#c4c8ae; }
.blank-postcard .icon { width:30px; height:30px; stroke-width:1; }
.album-blank h2 { font-size:21px; color:#92977b; }
.album-blank p { font-size:12px; color:#a5a38b; max-width:260px; }
.album-blank .button { font-size:11px; margin-top:6px; }
.postcard { text-align:left; padding:8px; border:1px solid #c9c8ad; background:#fffdf3; border-radius:3px 5px 3px 4px; transform:rotate(var(--tilt)); box-shadow:2px 3px 0 #dfdcc6; transition:transform .2s; position:relative; }
.postcard:hover { transform:rotate(0deg) translateY(-3px); }
.postcard-image { position:relative; overflow:hidden; }
.postcard-image>.scene-tile { width:100%; }
.postcard.undiscovered .scene-tile { filter:saturate(.25); opacity:.33; }
.uncollected-mark { position:absolute; inset:0; display:flex; gap:6px; align-items:center; justify-content:center; font-size:10px; color:#797e65; }
.uncollected-mark .icon { width:14px; height:14px; }
.postcard-info { padding:9px 5px 6px; position:relative; }
.postcard-info h3 { font:700 20px/1.5 var(--serif); margin:3px 0; }
.postcard-info>small { color:#a3a089; font-size:10px; }
.rarity { font-size:9px; display:inline-block; border-radius:5px; padding:1px 6px; border:1px solid; line-height:1.6; }
.ordinary { color:#8b9472; border-color:#cbd1b7; background:#eef1e2; }
.uncommon { color:#8b8f9c; border-color:#c9cfd9; background:#eef0f5; }
.rare { color:#a68b47; border-color:#dbca97; background:#f7edcf; }
.card-count { position:absolute; right:7px; top:10px; color:#a5a188; font-size:11px; }
.display-mark { position:absolute; right:3px; bottom:7px; color:#8c9a6f; font-size:9px; }
.postcard-pet { position:absolute; width:23%; left:7%; bottom:5%; }
.postmark { position:absolute; top:9px; right:10px; width:52px; height:52px; border:1.5px solid #71826c; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#64755c; font:700 14px/1.5 var(--serif); transform:rotate(15deg); background:#fbf6e375; }
.postmark small { font:8px/1.5 "Microsoft YaHei",sans-serif; }
.journal-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:27px; align-items:start; }
.city-journal { border:1px solid #d1cdb3; background:#fffbee; border-radius:7px 12px 6px 9px; margin-bottom:24px; padding:24px; }
.journal-city-heading { display:flex; gap:17px; align-items:center; border-bottom:1px dashed #d3cdb3; padding-bottom:18px; }
.journal-city-heading>.scene-tile { width:100px; border:4px solid #fffdf2; transform:rotate(-4deg); box-shadow:0 0 0 1px #c5bfa5; }
.journal-city-heading small { font-size:10px; color:#939478; }
.city-name-stamp { width:58px; height:58px; flex:none; display:grid; place-items:center; border:2px solid #b9c19c; border-radius:14px 19px 12px 18px; background:#edf0db; font:700 30px/1 var(--serif); color:#8c9a73; transform:rotate(-4deg); }
.journal-unwritten { padding:15px 0 5px; border-top:1px dashed #d7d1b9; color:#a6a38a; font-size:12px; margin-top:12px; }
.journal-city-heading h2 { font-size:25px; }
.journal-city-heading span { font-size:10px; color:#a09d83; }
.story-timeline { margin:25px 0 0 10px; }
.story-entry { position:relative; display:flex; gap:16px; padding-bottom:25px; }
.story-entry:not(:last-child):before { content:""; position:absolute; left:12px; top:24px; bottom:0; border-left:1px dashed #c7c7ae; }
.story-entry:last-child { padding-bottom:0; }
.story-dot { flex:none; width:26px; height:26px; border:1px solid #c5c8ab; background:#f0f0df; border-radius:50%; display:grid; place-items:center; color:#a4a58b; }
.story-dot .icon { width:13px; height:13px; }
.story-entry.discovered .story-dot { background:#e0e7c7; color:#7b8e5b; border-color:#a8b68a; }
.story-entry small { font-size:10px; color:#a7a38a; }
.story-entry h3 { font:700 20px/1.7 var(--serif); color:#999b81; }
.story-entry.discovered h3 { color:#65734e; }
.story-entry p { color:#aaa68e; font-size:12px; line-height:1.9; margin-top:7px; }
.story-entry.discovered p { color:#85856d; }
.journal-aside h2 { font-size:20px; }
.journal-aside>p { font-size:12px; color:#a09a80; margin-top:15px; }
.souvenir { display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 0; }
.souvenir>.icon { width:39px; height:39px; color:#8e9b70; margin-bottom:10px; }
.souvenir small { font-size:10px; color:#a59f84; margin-top:5px; }
.journal-recipes { border-top:1px dashed #ccc7ab; padding-top:18px; margin-top:15px; }
.journal-recipes h3 { font:700 18px/1.6 var(--serif); margin-bottom:12px; }
.recipe-note { display:flex; align-items:center; gap:10px; margin-bottom:15px; color:#b0ac95; }
.recipe-note>.icon { width:17px; height:17px; }
.recipe-note strong { display:block; font-size:12px; }
.recipe-note small { display:block; font-size:10px; margin-top:3px; }
.recipe-note.unlocked { color:#7d905e; }
.tiny-note { font-size:11px !important; color:#a5a087 !important; line-height:1.9; margin-top:18px; }
/* Game panels, drawn with simple ink outlines. */
dialog { color:var(--ink); background:#fcf7dc; border:2px solid #7e8261; border-radius:20px 25px 17px 23px; box-shadow:0 5px 0 #575f3b33; width:min(640px,calc(100vw - 30px)); max-height:calc(100dvh - 42px); padding:30px; overflow-y:auto; overscroll-behavior:contain; }
dialog::backdrop { background:#3e493d70; }
body:has(dialog[open]) { overflow:hidden; }
.dialog-close { position:absolute; top:11px; right:11px; z-index:5; background:#fcf8e8; border:1px solid #b3b595; border-radius:10px; min-width:35px; min-height:35px; padding:7px; }
dialog>h2 { padding-right:25px; font-size:27px; }
.dialog-intro { color:#8e8d72; font-size:13px; line-height:1.9; margin:12px 0 22px; }
.dialog-actions { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-top:22px; padding-top:18px; border-top:1px dashed #ccc8a5; }
.dialog-actions>span,.dialog-actions>small { color:#a09b7f; font-size:11px; }
.drink-options { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.drink-option { display:flex; align-items:center; gap:5px; text-align:left; padding:7px 9px 7px 3px; border:1px solid #c9c7a4; background:#fffbee; border-radius:10px 14px 9px 12px; min-width:0; }
.drink-option .drink-art { width:59px; height:62px; margin:0; }
.drink-option>span:nth-child(2) { flex:1; min-width:0; }
.drink-option strong { font-size:12px; display:block; }
.drink-option small { color:#a4a087; font-size:9px; display:block; margin-top:4px; }
.select-check .icon { width:16px; height:16px; color:#b2b49a; }
.drink-option.chosen { background:#e6edcc; border-color:#90a46c; }
.drink-option.chosen .select-check .icon { color:#7c9561; }
.report-total { padding:18px; border:1px solid #c1c9a4; background:#e9edcf; text-align:center; border-radius:12px 16px 9px 15px; }
.report-total>small { display:block; color:#8b9770; }
.report-total>strong { display:block; font-size:32px; color:#697b4e; margin-top:3px; }
.report-total>strong>span { font-size:12px; font-weight:400; }
.report-rows>div { display:flex; gap:12px; align-items:center; border-bottom:1px dashed #d2cdb1; padding:12px 0; }
.report-rows .drink-art { width:55px; height:65px; margin:0; }
.report-rows>div>span { flex:1; }
.report-rows strong { display:block; font-size:13px; }
.report-rows small { display:block; font-size:10px; color:#a19c82; margin-top:5px; }
.report-rows b { font-size:11px; color:#859064; white-space:nowrap; }
.compact-dialog { width:min(460px,calc(100vw - 30px)); text-align:center; padding:35px 30px 28px; }
.compact-dialog>h2 { padding-right:0; }
.dialog-illustration>.icon { width:75px; height:75px; color:#9c9a6b; stroke-width:1.2; margin:10px auto 18px; }
.upgrade-preview { display:flex; align-items:center; justify-content:center; gap:30px; margin:25px 0 30px; }
.upgrade-preview>span { font-size:12px; color:#a19a7a; }
.upgrade-preview strong { display:block; font-size:25px; color:#7e8d5d; }
.upgrade-preview small { font-size:10px; font-weight:400; }
.pet-closeup { width:185px; margin:5px auto 18px; }
.inbox-list { display:grid; gap:12px; }
.inbox-item { display:flex; align-items:center; gap:15px; text-align:left; padding:12px; border:1px solid #d0c8a7; background:#fffbee; border-radius:10px 15px 9px 12px; }
.inbox-item.unread { border-color:#a6b77e; background:#eff1d9; }
.inbox-item>.scene-tile { width:100px; flex:none; border:3px solid #fffdf4; }
.inbox-item>span { flex:1; }
.inbox-item small { color:#a09c80; font-size:10px; display:block; }
.inbox-item strong { display:block; font:700 20px/1.6 var(--serif); margin:3px 0; }
.inbox-item>span>span { font-size:10px; color:#9a9d79; }
.inbox-item>.icon { width:17px; color:#8e9b73; }
.letter-dialog { padding:12px; width:min(590px,calc(100vw - 24px)); background:#fffbed; border-radius:8px 12px 7px 11px; }
.letter-front { position:relative; overflow:hidden; }
.letter-front>.scene-tile { width:100%; }
.letter-pet { position:absolute; bottom:12%; left:12%; width:23%; }
.letter-front>.postmark { right:25px; top:20px; width:74px; height:74px; font-size:20px; }
.letter-front>.postmark small { font-size:10px; }
.letter-front-title { position:absolute; left:0; right:0; bottom:0; padding:9px 12px; font:700 25px/1.5 var(--serif); color:#5e6b4d; background:#fffae8e6; text-align:center; }
.letter-back { padding:22px 18px 10px; }
.letter-top { display:flex; justify-content:space-between; gap:10px; margin-bottom:20px; align-items:center; }
.letter-top>small { font-size:10px; color:#99987c; }
.letter-back>h2 { font-size:23px; }
.letter-message { font-size:22px; line-height:2; margin:10px 0; background:repeating-linear-gradient(transparent 0 42px,#d7cfb0 43px,transparent 44px); }
.letter-sign { display:flex; gap:10px; align-items:center; justify-content:flex-end; font:21px/1.7 var(--serif); color:#8b9570; margin:6px 0 22px; }
.letter-sign .icon { width:22px; height:22px; fill:#c3caa5; stroke-width:1; transform:rotate(15deg); }
.letter-fact { background:#f0f0db; padding:12px; color:#96947b; font-size:10px; border-radius:7px; }
.letter-fact .icon { width:15px; height:15px; margin-right:5px; }
.welcome-dialog { padding:0; display:grid; grid-template-columns:.9fr 1.1fr; width:min(850px,calc(100vw - 30px)); border-radius:22px 27px 18px 24px; }
.welcome-dialog:not([open]) { display:none; }
.welcome-scene { min-height:550px; position:relative; overflow:hidden; background:#e2d9af; }
.welcome-scene>img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.welcome-brand { position:absolute; top:35px; left:0; right:0; margin:auto; width:max-content; padding:13px 26px; background:#fff9dfec; border:2px solid #8a8d68; border-radius:11px 17px 10px 15px; font:700 36px/1.5 var(--serif); text-align:center; color:#5b6a46; transform:rotate(-3deg); }
.welcome-brand small { display:block; font:12px/1.8 "Microsoft YaHei",sans-serif; color:#999274; letter-spacing:2px; }
.welcome-content { padding:34px 30px 25px; }
.welcome-content>h2 { font-size:25px; }
.welcome-content>p { color:#999178; margin:10px 0 16px; font-size:12px; }
.pet-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:15px 0 20px; }
.pet-option { border:1.5px solid #d1c9a2; background:#fffbed; border-radius:15px 19px 13px 17px; padding:10px 5px 12px; }
.pet-option>.pet-art { display:block; width:100px; margin:0 auto; }
.pet-option strong { display:block; font:700 20px/1.6 var(--serif); }
.pet-option small { display:block; color:#a49e81; font-size:10px; }
.pet-option.chosen { background:#e9edcb; border-color:#8e9f6b; box-shadow:0 2px 0 #bac69a; }
.name-label { display:block; font-size:12px; color:#8f8d70; margin-bottom:7px; }
input { width:100%; border:1.5px solid #bebf9a; background:#fffdf3; border-radius:9px 12px 8px 11px; padding:10px 13px; color:#666e4e; min-height:44px; }
.welcome-note { display:block; text-align:center; margin-top:14px; color:#ada58b; font-size:10px; }
.welcome-content>.form-error { margin:7px 0; color:#a8674e; font-size:11px; min-height:15px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:19px 0; border-bottom:1px dashed #d1c9a5; }
.settings-row>span { flex:1; }
.settings-row strong { display:block; font-size:13px; }
.settings-row small { display:block; font-size:10px; color:#a19b80; margin-top:5px; }
.settings-row>button { flex:none; }
.save-buttons { display:flex !important; flex:none !important; gap:6px; }
.danger { color:#af7863; }
.danger-button { background:#e8c3a6; border-color:#b78d6e; }
.source-list { display:grid; gap:12px; text-align:left; }
.source-list a { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; font-size:12px; color:#7a8c5d; border-bottom:1px dashed #d0cbaa; padding:8px; }
.source-list .icon { width:16px; }
.odds-table { overflow:auto; }
.odds-table table { width:100%; border-collapse:collapse; font-size:12px; }
.odds-table th,.odds-table td { padding:12px 4px; border-bottom:1px dashed #d1cbaa; font-weight:400; }
.odds-table thead { color:#92977b; background:#e9edcf; }
@media(min-width:1600px) { .workspace { margin-left:max(194px,calc((100vw - 1350px)/2)); } .sidebar { width:max(194px,calc((100vw - 1350px)/2)); align-items:center; } .sidebar nav { width:158px; } }
@media(max-width:1200px) and (min-width:801px) { .sidebar { width:164px; padding:30px 12px 18px; } .brand { font-size:20px; gap:6px; margin-left:0; } .brand-mark .icon { width:28px; } .brand small { font-size:8px; } .workspace { margin-left:164px; } .topbar { margin:0 25px; } main { padding:25px; } .cafe-layout,.journal-layout { grid-template-columns:minmax(0,1fr) 245px; gap:20px; } .note-paper { padding:17px; } .pet-panel h2 { font-size:20px; } .cafe-bottom { grid-template-columns:1fr; } .business-strip { gap:8px; } .business-strip>div { gap:7px; } .business-strip strong { font-size:14px; } .business-strip strong small { display:block; font-size:9px; } .game-footer { padding-left:25px; padding-right:25px; } .route-card { padding:16px; } .postcard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1000px) and (min-width:801px) { .cafe-layout,.journal-layout { grid-template-columns:minmax(0,1fr); } .cafe-aside { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:10px; } .mail-panel { margin-top:0; } .little-goal { display:none; } .pet-panel>.pet-art { width:90px; } .cafe-bottom { grid-template-columns:1fr 1fr; } .journal-aside { display:none; } .route-grid { gap:10px; } .route-card { padding:14px; } .route-metrics { flex-direction:column; align-items:flex-start; gap:3px; } }
@media(max-width:800px) {
  .till-panel { padding:15px 14px 12px; margin:18px 0 25px; }
  .till-heading { gap:9px; }
  .till-heading strong { font-size:24px; }
  .till-heading strong small { font-size:10px; }
  .till-heading .button { font-size:11px; padding:8px 11px; min-height:44px; }
  .till-panel>p { font-size:10px; line-height:1.9; }
  .order-ticket { padding:12px; gap:11px; }
  .order-ticket-body small { font-size:11px; }
  .order-ticket-body>span { font-size:10px; }
  .orders-empty { padding:18px 14px; }
  .orders-empty small { font-size:10px; }
  .customer-request { padding:12px; gap:11px; }
  .customer-request p { font-size:11px; }
  .customer-request .guest-mark { width:33px; height:33px; font-size:19px; }
  .preparation-steps { gap:15px; }
  .preparation-steps>span { gap:5px; font-size:10px; }
  .preparation-steps b { width:22px; height:22px; }
  .preparation-choice { padding:20px 5px; }
  .preparation-choice strong { font-size:21px; }
  .preparation-choice small { font-size:9px; }
  .sugar-choices { gap:9px; }
  .preparation-choices { gap:10px; }
  .order-dialog .dialog-actions>span { font-size:9px; }
  .sidebar { width:100%; height:auto; top:auto; bottom:0; padding:7px 8px calc(8px + env(safe-area-inset-bottom)); background:#f5f2dcf5; border-right:0; border-top:1.5px solid #c2c4a1; backdrop-filter:blur(10px); }
  .sidebar>.brand,.sidebar-bottom { display:none; }
  .sidebar nav { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
  .nav-item { min-height:53px; flex-direction:column; gap:3px; padding:5px 2px; font-size:10px; border-radius:9px 13px 8px 12px; }
  .nav-item .icon { width:21px; height:21px; }
  .nav-dot { position:absolute; top:2px; left:calc(50% + 9px); width:15px; height:15px; font-size:9px; }
  .workspace { margin-left:0; padding-bottom:calc(75px + env(safe-area-inset-bottom)); }
  .topbar { height:74px; margin:0 20px; gap:11px; }
  .date-label { display:none; }
  .mobile-brand { display:block !important; font:700 25px/1.3 var(--serif); color:#61714d; margin-right:auto; }
  .mobile-brand span { display:block; font:9px/1.8 "Microsoft YaHei",sans-serif; color:#a1a086; letter-spacing:1px; margin-top:2px; }
  .mobile-settings { display:flex !important; min-width:36px; min-height:36px; padding:6px; color:#8b9271; }
  .mobile-settings .icon { width:20px; }
  .wallet { gap:5px; padding:4px 8px; border-radius:11px 13px 10px 12px; }
  .wallet strong { font-size:18px; }
  .wallet>span:last-child { display:none; }
  .wallet .icon { width:18px; }
  main { padding:22px 20px 10px; min-height:calc(100dvh - 220px); }
  h1 { font-size:25px; letter-spacing:0; }
  .page-heading { margin-bottom:20px; gap:10px; align-items:flex-start; }
  .page-heading p { font-size:11px; margin-top:6px; }
  .page-heading>.open-tag { font-size:9px; padding-top:8px; }
  .page-heading>.pill { display:none; }
  .page-heading>.button { padding:8px; font-size:10px; min-width:65px; flex:none; }
  .cafe-layout { grid-template-columns:minmax(0,1fr); gap:27px; }
  .cafe-scene { aspect-ratio:1.2; border-radius:17px 22px 14px 19px; }
  .scene-sign { font-size:20px; left:12px; top:12px; padding:6px 12px; }
  .scene-sign small { font-size:9px; }
  .scene-caption { font-size:10px; }
  .scene-pet { width:26%; bottom:12%; }
  .business-strip { padding:17px 1px; gap:8px; }
  .business-strip>div { gap:7px; font-size:9px; }
  .business-strip>div>.icon { width:21px; height:21px; }
  .business-strip strong { font-size:15px; }
  .business-strip strong small { font-size:8px; }
  .business-strip>div:nth-child(2) strong { font-size:12px; }
  .business-strip>div:nth-child(2) strong small { display:block; }
  .business-strip>.icon-button { min-width:30px; padding:0; }
  .business-strip>.icon-button .icon { width:18px; }
  .menu-section { margin-top:22px; }
  .section-title { gap:8px; }
  .section-title h2 { font-size:22px; }
  .section-title p { font-size:10px; max-width:240px; line-height:1.7; }
  .section-title>.button { flex:none; font-size:10px; padding:6px 10px; min-height:40px; }
  .menu-board { border-radius:12px 16px 11px 14px; }
  .drink-card { padding:14px 4px 13px; }
  .drink-art { width:76px; height:80px; }
  .drink-card h3 { font-size:17px; }
  .drink-popular { top:5px; right:5px; font-size:8px; padding:0 4px; }
  .drink-tags { font-size:9px; }
  .drink-card strong { font-size:13px; }
  .drink-card strong small { font-size:8px; }
  .cafe-bottom { gap:12px; margin-top:15px; }
  .upgrade-note { gap:7px; padding:10px 8px; }
  .upgrade-doodle { padding:5px; }
  .upgrade-doodle .icon { width:18px; height:18px; }
  .upgrade-note strong { font-size:10px; }
  .upgrade-note small { font-size:8px; line-height:1.8; }
  .upgrade-note>.icon { display:none; }
  .feedback-note { padding:10px; }
  .feedback-note>span { font-size:9px; }
  .feedback-note p { font-size:13px; }
  .cafe-aside { display:grid; grid-template-columns:minmax(0,1fr); gap:23px; }
  .pet-panel { padding:18px; display:grid; grid-template-columns:95px minmax(0,1fr); column-gap:15px; align-items:center; text-align:left; }
  .pet-panel>.pet-art { width:100%; grid-row:1/6; margin:0; }
  .pet-panel>.eyebrow { font-size:10px; margin:0; }
  .pet-panel h2 { font-size:23px; }
  .pet-panel>p { font-size:10px; margin:5px 0 10px; }
  .pet-panel>.button { grid-column:2; min-height:40px; font-size:11px; }
  .pet-panel>.text-button { grid-column:1/-1; font-size:10px; min-height:35px; }
  .pet-panel>.trip-track { grid-column:2; margin-top:5px; }
  .pet-panel>.progress { grid-column:2; margin-bottom:8px; }
  .mail-panel { margin-top:0; padding:19px; }
  .empty-mail { padding:0 0 4px; }
  .empty-mail>.icon { width:30px; height:30px; margin-bottom:5px; }
  .little-goal { display:none; }
  .game-footer { padding:10px 20px 22px; font-size:9px; }
  .demo-button { font-size:10px; min-height:44px; padding:5px 8px; }
  .demo-button span { margin-left:3px; }
  .toast { bottom:calc(90px + env(safe-area-inset-bottom)); font-size:12px; padding:11px 16px; }
  .destination-grid { gap:14px; }
  .destination { border-radius:12px 17px 10px 14px; }
  .destination>.scene-tile { aspect-ratio:1.4; }
  .destination-label { padding:30px 12px 14px; }
  .destination-label small { font-size:8px; letter-spacing:1px; }
  .destination-label strong { font-size:28px; }
  .destination-label>span { font-size:9px; display:block; max-width:100px; min-height:31px; }
  .destination-check { width:24px; height:24px; right:10px; bottom:43px; }
  .destination-check .icon { width:15px; }
  .city-progress { top:7px; right:6px; font-size:8px; padding:3px 6px; }
  .route-section { margin-top:27px; }
  .route-section .subtle { display:none; }
  .route-grid { grid-template-columns:minmax(0,1fr); gap:13px; }
  .route-card { padding:16px 16px 14px 74px; min-height:136px; }
  .route-icon { position:absolute; left:16px; top:19px; width:40px; height:42px; }
  .route-card h3 { font-size:24px; }
  .route-card p { font-size:10px; margin:4px 0 10px; min-height:0; }
  .route-metrics { justify-content:flex-start; gap:20px; }
  .route-metrics strong { font-size:14px; }
  .route-metrics>span { font-size:11px; }
  .route-odds { font-size:9px; }
  .route-choice { top:17px; right:15px; }
  .route-lock { font-size:9px; margin-top:7px; }
  .departure-note { flex-direction:column; align-items:stretch; padding:17px 0; gap:15px; margin-top:22px; }
  .departure-note>div { gap:11px; }
  .departure-note .pet-art { width:65px; }
  .departure-note h3 { font-size:13px; }
  .departure-note p { font-size:10px; }
  .departure-note>.button { width:100%; min-height:46px; }
  .travel-footnote { font-size:10px; line-height:1.9; }
  .travel-hero { height:250px; }
  .travel-hero-caption { top:18px; left:17px; right:17px; padding:12px 16px; }
  .travel-hero-caption>span { font-size:10px; }
  .travel-hero-caption h2 { font-size:25px; }
  .travel-pet { width:110px; bottom:4%; right:13%; }
  .trip-summary { display:block; padding:19px 18px 12px; }
  .trip-summary h2 { font-size:23px; }
  .trip-summary p { font-size:11px; line-height:1.9; margin:8px 0 14px; }
  .trip-summary>.button { width:100%; min-height:42px; font-size:12px; }
  .progress.wide { margin:8px 18px; }
  .travel-stops { padding:0 18px 19px; font-size:9px; }
  .travel-bottom { padding:20px 18px; }
  .travel-bottom h2 { font-size:21px; }
  .album-tabs { gap:2px; margin-bottom:21px; padding-bottom:13px; }
  .album-tabs button { padding:8px 10px; font-size:11px; }
  .album-count { font-size:10px; }
  .postcard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; padding:0 2px 15px; }
  .postcard { padding:5px; }
  .postcard-info { padding:6px 3px 4px; }
  .postcard-info h3 { font-size:18px; line-height:1.4; margin-top:4px; }
  .postcard-info>small { font-size:8px; }
  .rarity { font-size:8px; padding:0 4px; }
  .postmark { width:38px; height:38px; font-size:12px; top:6px; right:7px; }
  .postmark small { font-size:6px; }
  .uncollected-mark { font-size:8px; gap:4px; }
  .uncollected-mark .icon { width:11px; }
  .card-count { top:7px; right:3px; font-size:9px; }
  .display-mark { display:none; }
  .journal-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .city-journal { padding:20px 17px; margin-bottom:22px; }
  .journal-city-heading { gap:14px; }
  .journal-city-heading>.scene-tile { width:80px; }
  .journal-city-heading h2 { font-size:23px; }
  .journal-city-heading small { font-size:8px; }
  .journal-city-heading span { font-size:9px; }
  .story-timeline { margin-left:3px; }
  .story-entry { gap:12px; }
  .story-entry h3 { font-size:22px; }
  .story-entry p { font-size:11px; }
  .story-entry small { font-size:9px; }
  .journal-aside { margin-bottom:15px; padding:23px; }
  .journal-aside>.souvenir { padding:18px 0; }
  dialog { padding:26px 20px 22px; max-height:calc(100dvh - 32px); border-radius:15px 20px 13px 18px; }
  dialog>h2 { font-size:26px; }
  .dialog-intro { font-size:12px; margin:12px 0 20px; }
  .dialog-close { top:8px; right:8px; min-height:36px; min-width:36px; }
  .dialog-close>.icon { width:19px; }
  .dialog-actions { gap:12px; }
  .dialog-actions>.button { font-size:11px; padding:9px 12px; }
  .drink-options { gap:9px; }
  .drink-option { display:grid; grid-template-columns:1fr; text-align:center; gap:0; padding:6px 3px 10px; position:relative; }
  .drink-option .drink-art { width:65px; height:68px; margin:0 auto; }
  .drink-option strong { font-size:11px; }
  .drink-option small { font-size:8px; }
  .select-check { position:absolute; top:7px; right:7px; }
  .select-check .icon { width:13px; }
  .report-rows>div { gap:8px; }
  .report-rows .drink-art { width:43px; }
  .report-rows strong { font-size:12px; }
  .report-rows small { font-size:9px; }
  .report-rows b { font-size:9px; }
  .compact-dialog { padding:34px 23px 24px; }
  .inbox-item { padding:9px; gap:10px; }
  .inbox-item>.scene-tile { width:75px; }
  .inbox-item strong { font-size:19px; }
  .inbox-item small { font-size:9px; }
  .inbox-item>span>span { font-size:9px; }
  .inbox-item>.icon { width:14px; }
  .letter-dialog { padding:8px; }
  .letter-front-title { font-size:24px; padding:7px; }
  .letter-front>.postmark { width:57px; height:57px; top:13px; right:15px; font-size:17px; }
  .letter-front>.postmark small { font-size:8px; }
  .letter-back { padding:18px 12px 8px; }
  .letter-back>h2 { font-size:23px; }
  .letter-top { margin-bottom:16px; }
  .letter-message { font-size:22px; }
  .letter-sign { font-size:20px; }
  .letter-fact { font-size:9px; padding:10px; }
  .letter-fact { font-size:11px; line-height:1.9; }
  .destination-label>span { font-size:10px; }
  .route-card p { font-size:11px; }
  .pet-panel>p,.trip-summary p { font-size:12px; }
  .section-title p { font-size:11px; }
  .letter-back .dialog-actions { gap:10px; }
  .letter-back .dialog-actions>small { font-size:9px; }
  .letter-back .dialog-actions>.button { font-size:10px; padding:9px 10px; }
  .welcome-dialog { display:block; width:min(430px,calc(100vw - 24px)); padding:0; }
  .welcome-scene { height:160px; min-height:0; }
  .welcome-scene>img { object-position:50% 45%; }
  .welcome-brand { top:28px; padding:10px 23px; font-size:31px; }
  .welcome-brand small { font-size:10px; }
  .welcome-content { padding:20px 23px 22px; }
  .welcome-content>.eyebrow { font-size:9px; }
  .welcome-content>h2 { font-size:25px; }
  .welcome-content>p { margin:8px 0 13px; font-size:11px; }
  .pet-options { margin:12px 0 16px; gap:13px; }
  .pet-option { padding:7px 3px 10px; }
  .pet-option>.pet-art { width:85px; }
  .pet-option strong { font-size:22px; }
  .pet-option small { font-size:9px; }
  .welcome-content>.form-error { min-height:8px; margin:4px 0; }
  .welcome-note { margin-top:12px; font-size:9px; }
  .settings-row { gap:12px; padding:16px 0; }
  .settings-row strong { font-size:12px; }
  .settings-row small { font-size:9px; }
  .settings-row .small { font-size:10px; padding:8px; }
  .tiny-note { font-size:10px !important; }
}
@media(max-width:360px) { main { padding:20px 15px 10px; } .topbar { margin:0 15px; gap:7px; } .mobile-brand { font-size:23px; } h1 { font-size:23px; } .page-heading .open-tag { display:none; } .drink-card h3 { font-size:16px; } .album-tabs button { padding:7px 8px; font-size:10px; } .album-count { font-size:9px; } .postcard-info h3 { font-size:16px; } .business-strip>div { gap:5px; } .business-strip>div>.icon { width:17px; } .welcome-content { padding:18px; } .pet-option>.pet-art { width:73px; } .welcome-scene { height:120px; } .welcome-brand { top:15px; font-size:28px; } }
@media(max-width:800px) {
  .mobile-settings,.business-strip>.icon-button,.dialog-close { min-width:44px; min-height:44px; }
  .section-title>.button,.pet-panel>.button,.departure-note .text-button { min-height:44px; }
  .wall-postcard { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.early-return-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 28px 22px; padding-top:18px; border-top:1px dashed var(--line); }
.early-return-row p { color:var(--ink); font-size:13px; }
.early-return-row small { display:block; margin-top:4px; color:var(--muted); }
.early-return-row .button { flex:none; min-height:44px; }
.report-total strong>[data-return-refund] { font:inherit; color:inherit; }
@media(max-width:800px) { .early-return-row { flex-direction:column; align-items:stretch; gap:12px; margin:0 18px 18px; } .early-return-row small { font-size:11px; } }
.scene-tile.everest-tile { background-image:url('./assets/everest-postcards.png'); background-size:200% 200%; }
.mail-dot { display:inline-block; width:8px; height:8px; flex:none; border-radius:50%; background:#bc7059; vertical-align:middle; }
.nav-item>.mail-dot { margin-left:auto; }
.button>.mail-dot { margin-left:5px; }
.destination-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.destination-label { min-width:0; }
.destination-label strong { overflow-wrap:anywhere; }
.route-grid.route-count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.route-grid.route-count-1 { grid-template-columns:minmax(0,1fr); }
.backpack-section { margin:30px 0; padding:25px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.backpack-section h2 .icon { margin-right:5px; }
.backpack-section .section-title>.text-button { min-height:44px; }
.pack-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px; }
.pack-item { display:flex; flex-direction:column; min-width:0; min-height:168px; padding:15px; text-align:left; border:1px solid #d0d0b4; border-radius:12px 16px 10px 14px; background:#f9f6e6; transition:background .18s ease,border-color .18s ease; }
.pack-item:hover:not(:disabled) { background:#f1f0d9; }
.pack-item.selected { background:#e6eccd; border:1.5px solid #93a073; box-shadow:0 2px 0 #ccd6ae; }
.pack-item-top { display:grid; grid-template-columns:22px minmax(0,1fr); gap:3px 8px; align-items:center; }
.pack-item-top>.icon { grid-row:span 2; color:var(--green); }
.pack-item-top strong { font-size:14px; }
.pack-item-top b { grid-column:2; font-size:14px; color:#847143; }
.pack-item-top b small { font-size:10px; font-weight:400; }
.pack-hint { display:block; margin:12px 0; font-size:12px; line-height:1.8; color:#77755e; }
.pack-item-bottom { display:flex; gap:5px; align-items:center; justify-content:space-between; margin-top:auto; color:#65784d; font-size:11px; }
.pack-item-bottom small { font-size:10px; color:#8c8c71; }
.pack-item-bottom .icon { width:15px; height:15px; margin-left:auto; }
.pack-summary { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; margin-top:18px; color:#69734f; font-size:13px; }
.pack-summary small { color:#89866d; font-size:11px; }
.departure-cost { color:#75805b !important; margin-top:6px; }
.guest-life { margin:0 0 22px; padding:0 4px 16px; border-bottom:1px dashed var(--line); }
.guest-life>span { display:block; margin-bottom:7px; font-size:11px; color:#8a886a; }
.guest-life p { font-size:13px; line-height:1.9; color:#62694f; }
.guest-life .guest-last-drink { margin-top:10px; color:#8b7652; }
.regulars-notebook { margin-top:18px; border-top:1px dashed var(--line); }
.regulars-notebook summary { min-height:44px; padding:12px 0; cursor:pointer; color:#727d56; font-size:13px; }
.regulars-notebook summary span { margin-left:10px; color:#8e8c73; font-size:11px; }
.regulars-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.regular-note { padding:15px; background:#f4f1df; border:1px solid #d8d6bd; border-radius:10px 15px 11px 13px; }
.regular-note strong { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#68794f; font-size:13px; }
.regular-note strong small { font-weight:400; font-size:10px; color:#939077; }
.regular-note p { margin:8px 0; font-size:12px; line-height:1.9; color:#77735e; }
.regular-note>span { font-size:11px; color:#8c794e; }
.trip-promises p { font-size:13px; line-height:1.9; margin-top:15px; }
.album-tabs { flex-wrap:wrap; }
@media(max-width:1100px) { .pack-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) {
  .destination-grid { grid-template-columns:1fr; }
  .route-grid.route-count-2 { grid-template-columns:minmax(0,1fr); }
  .backpack-section { margin:22px 0; padding:20px 0; }
  .pack-grid { gap:10px; }
  .pack-item { padding:12px; min-height:180px; }
  .pack-item-top strong { font-size:13px; }
  .pack-hint { font-size:12px; }
  .pack-item-bottom { flex-wrap:wrap; font-size:10px; }
  .pack-summary { font-size:12px; }
  .regulars-grid { grid-template-columns:1fr; }
  .guest-life p { font-size:12px; }
}
.account-entry { display:block; width:100%; min-height:44px; margin:4px 0 7px; font-size:12px; }
.game-footer { flex-wrap:wrap; gap:10px 18px; }
.footer-account { min-height:44px; font-size:11px; margin-left:auto; }
.account-dialog { width:min(490px,calc(100vw - 30px)); padding:32px 28px 24px; }
.account-dialog>h2 { padding-right:20px; margin:7px 0 12px; font-size:25px; }
.account-intro { color:#77765e; line-height:1.9; font-size:13px; margin:12px 0 20px; }
.account-dialog .dialog-close { min-width:44px; min-height:44px; font-size:23px; }
.account-dialog form>label { display:block; font-size:13px; margin:15px 0 6px; color:#6a7354; }
.account-dialog form>input { display:block; width:100%; min-height:46px; padding:10px 12px; color:var(--ink); border:1px solid #bfc4a2; background:#fffbee; border-radius:9px 12px 8px 11px; }
.account-dialog form>.button { margin-top:20px; min-height:46px; }
.account-password-note { display:block; margin-top:6px; color:#8b896e; font-size:11px; }
.account-dialog #account-code { font-size:22px; letter-spacing:.3em; font-variant-numeric:tabular-nums; }
.account-dialog .account-remember { display:flex; gap:9px; align-items:center; min-height:44px; font-size:12px; }
.account-remember input { width:18px; height:18px; accent-color:var(--green); }
.account-mode-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:14px; }
.account-mode-links>.text-button { min-height:44px; font-size:12px; }
.account-email { color:#738455; overflow-wrap:anywhere; margin:10px 0; font-size:14px; }
.account-actions { display:grid; gap:12px; }
.account-actions>button { min-height:44px; }
.account-notice { padding:12px; background:#f5e7cb; border:1px solid #d6bc86; border-radius:10px; color:#8f704b; font-size:12px; }
.account-save-choice { display:grid; gap:14px; }
.account-save-choice article { padding:17px; background:#f6f1da; border:1px solid #c7ccaa; border-radius:12px 17px 11px 14px; }
.account-save-choice article>span { color:#7c855e; font-size:12px; }
.account-save-choice article p { margin:10px 0 14px; font-size:14px; line-height:1.9; overflow-wrap:anywhere; }
.account-save-choice .button { min-height:44px; }
.account-dialog [data-account-message] { line-height:1.8; overflow-wrap:anywhere; }
@media(max-width:800px) {
  .game-footer>#save-status { flex-basis:100%; }
  .footer-account { margin-left:0; }
  .account-dialog { padding:29px 20px 20px; }
  .account-dialog>h2 { font-size:23px; }
}