:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #eee9de;
  background: #17182a;
  font-synthesis: none;
  --muted: #9c9ba9;
  --cream: #f0e7d6;
  --mint: #b6dccb;
  --gold: #ffcc79;
  --peach: #f4be9c;
  --line: #393749;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 48% 8%, #30283c 0, #1c1c2e 44%, #161727 100%); min-height: 100vh; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
button, h1, h2, h3, p, blockquote { margin: 0; }
button { color: inherit; }
button svg { pointer-events: none; }
[hidden] { display: none !important; }
.icon { width: 24px; height: 24px; display: inline-block; flex-shrink: 0; vertical-align: middle; }
.shell { max-width: 1272px; margin: 0 auto; padding: 29px 36px 16px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--cream); text-decoration: none; }
.brand > .icon { width: 41px; height: 41px; color: var(--gold); transform: rotate(-15deg); }
.brand > span { font: 600 23px/1.1 Georgia, "Times New Roman", serif; letter-spacing: .2px; }
.brand small { display: block; font: 11px/1.6 "Segoe UI", sans-serif; color: var(--muted); letter-spacing: 1.6px; margin-top: 5px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.wallet { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin-right: 15px; }
.wallet .icon { width: 27px; height: 27px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; display: grid; place-items: center; background: #282636; color: #c4bdc7; transition: background .15s, color .15s; }
.icon-button .icon { width: 17px; height: 17px; }
.icon-button:hover:not(:disabled) { background: #393344; color: var(--cream); }
.icon-button:disabled { opacity: .35; }
.help-button { font: italic 23px Georgia, serif; }

.game-grid { display: grid; grid-template-columns: minmax(0, 1.56fr) minmax(340px, 1fr); gap: 20px; }
.scene-panel { min-width: 0; border: 1px solid #454052; border-radius: 18px; overflow: hidden; background: #202238; }
.scene { height: 475px; position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 55% 90%, #70634955 0, transparent 55%), linear-gradient(#25263f 0%, #41435a 65%, #313344 65%); }
.scene-top { position: absolute; left: 21px; right: 21px; top: 19px; display: flex; align-items: center; justify-content: space-between; z-index: 8; }
.night-label { border: 1px solid #80829050; padding: 7px 10px; border-radius: 6px; color: #e1ddd3; font-size: 10px; font-weight: 700; letter-spacing: 2px; background: #28283e75; }
.weather { font-size: 11px; color: #c4c2c6; }
.scene-moon { position: absolute; width: 47px; height: 47px; border-radius: 50%; background: #e4d6ab; top: 73px; right: 62px; box-shadow: 0 0 38px #e6cf8b22; }
.scene-moon::after { content: ''; width: 43px; height: 43px; border-radius: 50%; position: absolute; left: -8px; top: -7px; background: #2c2e46; }
.stars i { position: absolute; width: 3px; height: 3px; background: #cecac2; border-radius: 50%; top: 85px; left: 14%; }
.stars i:nth-child(2) { left: 31%; top: 57px; width: 2px; height: 2px; }
.stars i:nth-child(3) { left: 58%; top: 74px; }
.stars i:nth-child(4) { left: 73%; top: 49px; width: 2px; height: 2px; }
.stars i:nth-child(5) { left: 92%; top: 138px; }
.stars i:nth-child(6) { left: 6%; top: 150px; width: 2px; height: 2px; }
.cloud { position: absolute; height: 14px; background: #73758a25; border-radius: 100%; width: 120px; }
.cloud-one { top: 102px; left: 40px; transform: rotate(-5deg); }
.cloud-two { top: 160px; right: -20px; width: 130px; }
.skyline { position: absolute; inset: 170px 0 122px; display: flex; align-items: end; gap: 9px; opacity: .65; }
.skyline i { height: 70%; background: #282c40; flex: 1; position: relative; }
.skyline i::after { content: ''; position: absolute; inset: 12px; background: repeating-linear-gradient(transparent 0 15px, #bca67b30 15px 22px, transparent 22px 33px); }
.skyline i:nth-child(2n) { height: 100%; }
.skyline i:nth-child(3n) { height: 83%; }
.tree { position: absolute; z-index: 1; bottom: 81px; width: 5px; height: 140px; background: #222839; }
.tree::before, .tree::after { content: ''; position: absolute; width: 66px; height: 110px; background: #262e3e; border-radius: 50%; left: -30px; top: -40px; }
.tree::after { width: 45px; height: 80px; left: -50px; top: 0; }
.tree-left { left: 20px; }
.tree-right { right: 20px; transform: scale(.8); }
.kiosk { position: absolute; width: 78%; height: 351px; left: 11%; bottom: 25px; z-index: 2; border: 3px solid #222534; background: #709080; border-radius: 8px 8px 1px 1px; box-shadow: 14px 12px 0 #1e243a60; }
.roof-trim { position: absolute; height: 10px; background: #abb79a; border: 3px solid #282a34; left: -13px; right: -13px; top: -8px; border-radius: 3px; }
.kiosk-sign { position: absolute; top: 9px; height: 57px; left: 14px; right: 14px; border: 2px solid #3b4b46; background: #344e49; border-radius: 3px; display: flex; justify-content: center; align-items: center; gap: 11px; box-shadow: inset 0 0 12px #1b2a2b50; }
.kiosk-sign span { font-size: 15px; font-weight: 700; letter-spacing: 3px; color: #d2dfb7; }
.kiosk-sign strong { font: 900 29px Georgia, serif; letter-spacing: 3px; color: #ffda8d; text-shadow: 0 0 14px #ffd18475; }
.kiosk-sign b { color: #b4c6ad; font: 10px/1.4 monospace; border: 1px solid #a4b89b70; border-radius: 3px; padding: 4px; }
.awning { position: absolute; z-index: 4; left: -9px; right: -9px; top: 72px; height: 31px; display: flex; transform: perspective(130px) rotateX(14deg); filter: drop-shadow(0 6px 0 #24263660); }
.awning i { background: #f0cc91; flex: 1; border-radius: 0 0 9px 9px; border: 1px solid #8f876c; }
.awning i:nth-child(2n) { background: #bd786a; border-color: #805c55; }
.window { position: absolute; background: #4b594d; left: 22px; right: 22px; top: 97px; bottom: 80px; border: 5px solid #b3b99a; box-shadow: 0 0 0 3px #34493f, inset 0 0 30px #202c26; overflow: hidden; }
.shelf-line { position: absolute; left: 0; right: 0; height: 8px; background: #a69168; box-shadow: 0 4px #343e31; }
.shelf-one { top: 58px; }
.shelf-two { top: 122px; }
.bottles { display: flex; gap: 13px; position: absolute; top: 22px; left: 17px; }
.bottles i { width: 15px; height: 36px; border-radius: 6px 6px 2px 2px; background: #afad77; border-top: 8px solid #a1b6a0; box-shadow: inset 5px 0 #f6dba120; }
.bottles i:nth-child(2n) { background: #9b7676; height: 29px; align-self: end; }
.hanging-light { position: absolute; top: -20px; left: 47%; height: 37px; width: 2px; background: #b1a980; }
.hanging-light::after { content: ''; position: absolute; top: 32px; left: -12px; width: 27px; height: 13px; border-radius: 20px 20px 4px 4px; background: #e7c280; box-shadow: 0 15px 45px 20px #ffe2a035; }
.open-sign { position: absolute; right: 32px; top: 116px; z-index: 5; color: #edbd93; border: 1px solid #d69c7550; transform: rotate(5deg); padding: 5px 7px; font-size: 8px; letter-spacing: 1px; background: #414b42; box-shadow: 0 0 8px #efbf8020; }
.guest-art { position: absolute; z-index: 6; height: 318px; width: 342px; bottom: 18px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 9px 5px #15172245); }
.character-svg { width: 100%; height: 100%; overflow: visible; }
.guest-art.arrive { animation: arrive .35s ease-out; }
@keyframes arrive { from { opacity: .2; transform: translateX(-45%); } to { opacity: 1; transform: translateX(-50%); } }
.counter { position: absolute; z-index: 7; left: -5px; right: -5px; bottom: -2px; height: 64px; background: repeating-linear-gradient(90deg, #6c8676 0 37px, #637e6e 38px 40px); border: 3px solid #2c3b35; }
.counter-top { height: 13px; background: #d7ba86; border-bottom: 4px solid #8c795c; border-top: 2px solid #ead2a4; position: absolute; left: -10px; right: -10px; top: -10px; border-radius: 3px; box-shadow: 0 4px 3px #24362d55; }
.counter > span { display: block; padding: 22px 16px 0; text-transform: uppercase; letter-spacing: 1.8px; font-size: 8px; color: #c8d0b0; }
.counter-sticker { position: absolute; right: 22px; top: 7px; background: #e4c899; color: #76644e; font: italic 14px/1.1 Georgia, serif; padding: 5px 9px; transform: rotate(-7deg); box-shadow: 1px 2px #35433550; }
.ground-light { position: absolute; z-index: 1; width: 90%; height: 100px; background: radial-gradient(ellipse, #e2bd7760, transparent 70%); left: 5%; bottom: -35px; }
.guest-arrival { position: absolute; z-index: 10; bottom: 10px; left: 50%; transform: translateX(-50%) rotate(-2deg); background: #ead6af; color: #514842; font: italic 14px Georgia, serif; padding: 9px 16px; white-space: nowrap; box-shadow: 0 4px 12px #17202c35; }
.scene-feedback { position: absolute; z-index: 9; top: 47%; left: 50%; transform: translate(-50%, 8px) rotate(-6deg); background: var(--mint); border: 2px solid #36564c; box-shadow: 0 5px 0 #20342d; color: #243e35; font: 700 30px Georgia, serif; padding: 8px 17px; border-radius: 9px; opacity: 0; pointer-events: none; }
.scene-feedback.visible { opacity: 1; transform: translate(-50%, 0) rotate(-6deg); transition: .2s; }
.scene-feedback.miss { font-size: 18px; white-space: nowrap; background: #e8b69e; border-color: #7c5e50; }
.scene-caption { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; font-size: 10px; background: #242739; color: #b2b1b8; gap: 10px; }
.scene-caption > span { display: flex; gap: 8px; align-items: center; }
.scene-caption i { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #b5cfb3; }
.scene-caption b { color: #b4b3b9; font-weight: 400; letter-spacing: 1px; }

.order-panel { background: #282636; border: 1px solid #454052; border-radius: 18px; padding: 23px 25px 16px; min-height: 519px; position: relative; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eyebrow { font-size: 9px; color: #b9b1b7; letter-spacing: 1.9px; font-weight: 700; }
.time-chip { display: inline-block; min-width: 58px; text-align: center; font: 600 13px/1.2 monospace; background: #383340; color: var(--cream); padding: 7px 8px; border-radius: 6px; border: 1px solid #514651; }
.time-chip.urgent { color: #ffb6a7; border-color: #b47570; }
.intro-screen { padding-top: 26px; }
.tiny-star { color: var(--gold); font-size: 24px; }
.intro-screen h1 { font: 400 clamp(30px, 3.1vw, 39px)/1.12 Georgia, serif; letter-spacing: -.7px; margin-top: 9px; }
.intro-screen h1 em { font-weight: 400; color: var(--peach); }
.intro-screen > p { color: #bfb7bd; font-size: 13px; line-height: 1.75; margin-top: 16px; }
.intro-how { color: #d8d0cc; font-size: 11px; line-height: 2.2; margin: 20px 0 18px; }
.intro-how span { color: #acaa99; font-size: 9px; letter-spacing: 1px; margin-right: 10px; }
.button { width: 100%; border-radius: 9px; padding: 14px 17px; font-size: 13px; font-weight: 700; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s, background .12s; }
.button-primary { color: #342c2d; background: #f3bf9d; border: 1px solid #fbd6b4; box-shadow: 0 3px 0 #9d715c; }
.button-primary > span:not(.keyboard-hint) { font-size: 20px; font-weight: 400; line-height: .7; }
.button-primary:hover:not(:disabled) { background: #ffd0aa; transform: translateY(-1px); }
.button-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #9d715c; }
.button-primary:disabled { background: #52464a; color: #a7999b; border-color: #64525a; box-shadow: 0 3px 0 #29232d; }
.button-secondary { border: 1px solid #59505e; background: #34303f; color: #dfd6d2; margin-top: 12px; box-shadow: none; }
.button-secondary:hover { background: #443a4b; }
.intro-footnote { font-size: 9px; color: #aaa0aa; margin-top: 14px; display: block; text-align: center; }
.customer-heading { display: flex; justify-content: space-between; gap: 8px; margin-top: 19px; align-items: center; }
.customer-heading h1 { font: 400 29px/1.1 Georgia, serif; }
.customer-heading p { font-size: 11px; color: #b7aeb8; margin-top: 5px; }
.guest-number { color: #a499ab; border: 1px solid #494051; font: 12px monospace; border-radius: 50%; width: 39px; height: 39px; flex-shrink: 0; display: grid; place-items: center; }
.speech { position: relative; font: italic 15px/1.5 Georgia, serif; color: #e8dacb; background: #35313e; border: 1px solid #49414e; padding: 14px 15px; border-radius: 11px; margin-top: 18px; min-height: 76px; display: flex; align-items: center; }
.speech::before { content: ''; position: absolute; width: 11px; height: 11px; border-top: 1px solid #49414e; border-left: 1px solid #49414e; background: #35313e; left: 20px; top: -7px; transform: rotate(45deg); }
.order-heading { display: flex; justify-content: space-between; align-items: center; margin: 19px 0 8px; gap: 6px; }
#patience-label { color: #c7c1ba; font-size: 9px; }
.required-items { display: flex; gap: 7px; flex-wrap: wrap; }
.required-item { display: flex; gap: 5px; align-items: center; background: #37353f; border: 1px solid #4b4852; border-radius: 7px; padding: 5px 8px 5px 4px; font-size: 10px; }
.required-item > .icon { width: 26px; height: 26px; }
.required-item b { color: var(--gold); }
.patience-track { height: 3px; border-radius: 4px; background: #45404c; overflow: hidden; margin-top: 12px; }
#patience-fill { height: 100%; background: #a3c8ad; transform-origin: left; transition: background .3s; }
#patience-fill.low { background: #efaa91; }
.tray-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.text-button { background: none; border: none; padding: 3px 0 3px 8px; font-size: 9px; color: #c2b8be; }
.text-button:hover:not(:disabled) { color: var(--cream); text-decoration: underline; }
.text-button:disabled { opacity: .4; }
.tray { display: flex; gap: 8px; min-height: 61px; align-items: center; margin: 6px 0 13px; }
.tray-item, .tray-empty { width: 52px; height: 52px; border-radius: 9px; display: grid; place-items: center; position: relative; }
.tray-empty { border: 1px dashed #605263; color: #75677a; font-size: 21px; background: #242330; }
.tray-item { background: #45404d; border: 1px solid #7f6d79; }
.tray-item > .icon { width: 40px; height: 40px; }
.tray-item > span { position: absolute; top: -4px; right: -4px; height: 15px; width: 15px; background: #75616c; border-radius: 50%; font-size: 12px; color: #fff3df; line-height: 14px; }
.tray-item:hover { background: #60505e; }
.keyboard-hint { font: 8px/1 monospace; border: 1px solid currentColor; padding: 4px 5px; opacity: .7; margin-left: auto; border-radius: 3px; }
#serve-button { justify-content: space-between; }
.order-feedback { margin-top: 13px; font-size: 10px; color: #b0a4b1; line-height: 1.6; min-height: 30px; }
.order-feedback.success { color: #c2dfc0; }
.order-feedback.miss { color: #ecc0a6; }

.shelf-panel { border: 1px solid #46404d; border-radius: 15px; background: #2c2936; padding: 17px 21px 20px; margin-top: 19px; }
.shelf-heading { display: flex; gap: 17px; align-items: center; margin-bottom: 14px; }
.shelf-heading h2 { font: 400 19px Georgia, serif; color: #e6dece; white-space: nowrap; }
.shelf-heading > span { font-size: 10px; color: #b2a8b2; }
.shop-link { margin-left: auto; display: flex; align-items: center; gap: 5px; color: #d8c5a1; border: 0; font-size: 10px; background: none; padding: 5px 0 5px 8px; }
.shop-link .icon { width: 12px; height: 12px; }
.shop-link:disabled { opacity: .4; }
.shop-link:hover:not(:disabled) { color: #ffe1a3; }
.item-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
.item-card { display: flex; flex-direction: column; align-items: center; position: relative; border: 1px solid #5c505b; border-radius: 10px; background: #38313f; padding: 7px 5px 11px; transition: background .12s, transform .12s, border-color .12s; overflow: visible; }
.item-card:disabled { cursor: default; }
.item-card:hover:not(:disabled) { background: #49404c; border-color: #bda28b; transform: translateY(-3px); }
.item-card:active:not(:disabled) { transform: translateY(1px); }
.item-card.selected { background: #484644; border-color: #b5b99a; }
.item-shortcut { position: absolute; left: 8px; top: 7px; font: 9px monospace; color: #b2a6b4; border: 1px solid #635364; border-radius: 3px; width: 15px; height: 16px; display: grid; place-items: center; }
.item-illustration { position: relative; display: grid; place-items: center; height: 65px; width: 78px; }
.item-illustration::before { content: ''; position: absolute; width: 51px; height: 41px; border-radius: 50%; background: var(--item-color); opacity: .075; top: 18px; }
.item-illustration > .icon { width: 60px; height: 60px; filter: drop-shadow(0 4px 2px #211a2b45); }
.item-name { font-size: 11px; font-weight: 500; color: #e6d9cf; }
.item-count { position: absolute; right: 7px; top: 7px; background: var(--mint); color: #293d34; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.shift-stats { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 20px; padding: 21px 12px 19px; }
.shift-stats > div { display: flex; gap: 11px; align-items: center; }
.stat-label { color: #a9a0ab; font-size: 8px; letter-spacing: 1.1px; line-height: 1.7; max-width: 100px; }
.shift-stats strong { font: 400 24px Georgia, serif; white-space: nowrap; }
.shift-stats strong small { font: 10px "Segoe UI", sans-serif; color: #c8b59b; }
.gold { color: var(--gold); }
.hearts-stat { justify-content: end; }
.hearts { display: flex; gap: 4px; color: #c98e94; }
.hearts .icon { width: 18px; height: 18px; }
.hearts .lost { color: #49414f; }
.footer { border-top: 1px solid #383341; padding-top: 15px; font-size: 9px; color: #a297a6; display: flex; justify-content: space-between; gap: 15px; line-height: 1.6; }
.footer b { color: #c3b6bf; font-weight: 500; }

.modal { color: #eee5d7; background: #2b2737; border: 1px solid #706071; border-radius: 21px; padding: 32px; width: min(510px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-shadow: 0 24px 100px #080c1780; }
.modal::backdrop { background: #101322b8; backdrop-filter: blur(7px); }
.modal h2 { font: 400 32px/1.15 Georgia, serif; letter-spacing: -.4px; margin-top: 13px; }
.modal p { font-size: 13px; line-height: 1.8; color: #c6b9c3; margin-top: 14px; }
.modal .button { margin-top: 22px; }
.modal .button + .button { margin-top: 12px; }
.result-symbol { margin-bottom: 19px; color: var(--gold); }
.result-symbol > .icon { height: 46px; width: 46px; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; padding: 20px 0; border-top: 1px solid #504454; border-bottom: 1px solid #504454; gap: 12px; }
.result-stats > div { display: flex; flex-direction: column; gap: 7px; }
.result-stats strong { font: 400 31px Georgia, serif; color: var(--gold); }
.result-stats span { color: #c2b3c0; font-size: 10px; }
.dialog-footnote { margin-top: 19px; color: #b5a3b5; display: block; font-size: 10px; text-align: center; }
.upgrades { margin: 21px 0; }
.upgrade { display: flex; align-items: center; gap: 11px; padding: 17px 0; border-top: 1px solid #514454; }
.upgrade-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; color: var(--gold); background: #403444; }
.upgrade-icon .icon { width: 30px; height: 30px; }
.upgrade h3 { font-size: 12px; font-weight: 600; }
.upgrade p { margin: 5px 0 0; font-size: 10px; line-height: 1.5; }
.upgrade-buy { flex-shrink: 0; margin-left: auto; background: #4a4249; border: 1px solid #a08b79; color: #f2d0a1; padding: 10px; border-radius: 7px; font-size: 11px; min-width: 77px; }
.upgrade-buy:disabled { opacity: .5; border-color: #6c5a6c; }
.help-steps b { color: #e8d9cb; }
.controls-note { color: #b4a7b6; line-height: 2; font-size: 10px; margin-top: 18px; padding: 12px; background: #362f40; border-radius: 9px; }
kbd { font: 10px "Segoe UI", sans-serif; padding: 2px 4px; border: 1px solid #6c596e; border-radius: 3px; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; transform: translate(-50%, 15px); background: #ecdbc2; color: #463b3d; padding: 12px 20px; font-size: 12px; border-radius: 10px; box-shadow: 0 6px 20px #11142560; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; text-align: center; max-width: calc(100vw - 40px); }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 1400px) {
  .shell { padding-top: 38px; }
  .topbar { margin-bottom: 31px; }
}

@media (max-width: 1020px) {
  .shell { padding: 23px 22px 16px; }
  .game-grid { grid-template-columns: minmax(0, 1.2fr) minmax(310px, 1fr); gap: 15px; }
  .order-panel { padding: 21px 20px 14px; }
  .kiosk { width: 87%; left: 6.5%; }
  .kiosk-sign { gap: 6px; left: 8px; right: 8px; }
  .kiosk-sign span { font-size: 11px; letter-spacing: 2px; }
  .kiosk-sign strong { font-size: 23px; }
  .kiosk-sign b { display: none; }
  .weather { font-size: 9px; }
  .scene-caption { font-size: 9px; }
  .scene-caption b { display: none; }
  .item-name { font-size: 10px; }
  .shelf-panel { padding: 16px; }
  .item-grid { gap: 8px; }
  .shift-stats { gap: 10px; padding-left: 5px; padding-right: 5px; }
  .shift-stats > div { gap: 7px; }
  .stat-label { font-size: 7px; letter-spacing: .6px; }
  .hearts .icon { width: 15px; height: 15px; }
}

@media (max-width: 720px) {
  .shell { padding: 15px 14px max(16px, env(safe-area-inset-bottom)); max-width: 540px; }
  .topbar { margin-bottom: 16px; }
  .brand { gap: 8px; }
  .brand > .icon { width: 29px; height: 29px; }
  .brand > span { font-size: 18px; }
  .brand small { font-size: 8px; letter-spacing: 1px; margin-top: 3px; }
  .top-actions { gap: 5px; }
  .wallet { gap: 4px; margin-right: 3px; font-size: 13px; }
  .wallet .icon { width: 20px; height: 20px; }
  .icon-button { width: 30px; height: 31px; border-radius: 8px; }
  .icon-button .icon { width: 14px; height: 14px; }
  .help-button { font-size: 19px; }
  .game-grid { grid-template-columns: 1fr; gap: 13px; }
  .scene-panel { border-radius: 13px; }
  .scene { height: 240px; }
  .scene-top { left: 13px; right: 13px; top: 12px; }
  .night-label { font-size: 8px; letter-spacing: 1.5px; padding: 5px 7px; }
  .scene-moon { width: 32px; height: 32px; top: 48px; right: 30px; }
  .scene-moon::after { height: 30px; width: 30px; }
  .kiosk { width: 68%; left: 16%; bottom: 12px; height: 199px; }
  .kiosk-sign { height: 34px; top: 5px; gap: 8px; }
  .kiosk-sign span { font-size: 9px; letter-spacing: 2px; }
  .kiosk-sign strong { font-size: 19px; }
  .awning { height: 20px; top: 45px; }
  .window { top: 59px; bottom: 44px; left: 13px; right: 13px; border-width: 3px; }
  .shelf-one { top: 35px; }
  .shelf-two { top: 75px; }
  .bottles { top: 9px; gap: 8px; left: 9px; }
  .bottles i { width: 10px; height: 25px; border-top-width: 5px; }
  .bottles i:nth-child(2n) { height: 20px; }
  .open-sign { font-size: 6px; top: 73px; right: 19px; padding: 3px; }
  .guest-art { height: 183px; width: 200px; bottom: 7px; }
  .counter { height: 38px; }
  .counter-top { height: 10px; top: -7px; }
  .counter > span { font-size: 5px; padding: 12px 9px 0; letter-spacing: 1px; }
  .counter-sticker { right: 11px; top: 3px; font-size: 10px; padding: 3px 6px; }
  .tree { bottom: 20px; height: 85px; }
  .skyline { inset: 90px 0 30px; }
  .guest-arrival { padding: 6px 10px; font-size: 11px; bottom: 5px; }
  .scene-caption { height: 30px; padding: 0 11px; font-size: 8px; }
  .scene-feedback { font-size: 23px; top: 48%; padding: 5px 10px; }
  .scene-feedback.miss { font-size: 14px; }
  .order-panel { border-radius: 13px; min-height: 0; padding: 18px 19px 13px; }
  .intro-screen { padding-top: 8px; }
  .tiny-star { float: right; margin: 15px 12px 0 0; font-size: 32px; }
  .intro-screen h1 { font-size: 35px; }
  .intro-screen > p { font-size: 12px; margin-top: 12px; }
  .intro-screen > p br { display: none; }
  .intro-how { margin: 11px 0 14px; font-size: 11px; }
  .intro-footnote { font-size: 8px; margin-top: 11px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .time-chip { font-size: 12px; min-width: 54px; padding: 5px 7px; }
  .customer-heading { margin-top: 12px; }
  .customer-heading h1 { font-size: 26px; }
  .customer-heading p { font-size: 10px; }
  .guest-number { width: 33px; height: 33px; font-size: 10px; }
  .speech { min-height: 54px; padding: 9px 12px; font-size: 13px; margin-top: 12px; }
  .order-heading { margin: 13px 0 7px; }
  .required-item { padding: 3px 7px 3px 3px; font-size: 10px; }
  .required-item .icon { width: 22px; height: 22px; }
  .patience-track { margin-top: 9px; }
  .tray-heading { margin-top: 10px; }
  .tray { min-height: 49px; margin: 5px 0 10px; }
  .tray-item, .tray-empty { width: 43px; height: 43px; }
  .tray-item > .icon { width: 34px; height: 34px; }
  .button { padding: 12px 14px; min-height: 44px; font-size: 12px; }
  .keyboard-hint { display: none; }
  .order-feedback { min-height: 15px; margin-top: 9px; font-size: 9px; }
  .has-started .scene { height: 170px; }
  .has-started .scene-top { z-index: 10; }
  .has-started .kiosk { bottom: -8px; height: 171px; }
  .has-started .guest-art { height: 155px; width: 169px; bottom: 6px; }
  .has-started .counter { height: 32px; }
  .has-started .scene-caption { display: none; }
  .has-started .scene-moon { top: 40px; }
  .has-started .skyline { inset: 60px 0 10px; }
  .has-started .kiosk-sign { height: 28px; top: 2px; }
  .has-started .kiosk-sign strong { font-size: 16px; }
  .has-started .awning { top: 32px; height: 16px; }
  .has-started .window { top: 45px; }
  .has-started .open-sign { top: 59px; }
  .shelf-panel { margin-top: 13px; padding: 13px; border-radius: 13px; }
  .shelf-heading { gap: 9px; margin-bottom: 11px; }
  .shelf-heading h2 { font-size: 17px; }
  .shelf-heading > span { display: none; }
  .shop-link { font-size: 9px; }
  .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .item-card { padding: 3px 3px 8px; }
  .item-illustration { height: 48px; width: 60px; }
  .item-illustration > .icon { width: 45px; height: 45px; }
  .item-illustration::before { height: 30px; width: 40px; top: 14px; }
  .item-name { font-size: 10px; }
  .item-shortcut { display: none; }
  .item-count { height: 16px; width: 16px; font-size: 9px; right: 4px; top: 4px; }
  .shift-stats { grid-template-columns: 1fr 1fr; gap: 13px 15px; padding: 16px 4px; }
  .shift-stats > div { justify-content: space-between; }
  .stat-label { font-size: 7px; max-width: 97px; }
  .shift-stats strong { font-size: 22px; }
  .hearts-stat { justify-content: space-between; }
  .footer { padding-top: 10px; font-size: 8px; flex-direction: column; gap: 3px; }
  .has-started .game-grid { gap: 10px; }
  .has-started .scene { height: 124px; }
  .has-started .kiosk { height: 145px; bottom: -10px; }
  .has-started .guest-art { height: 140px; width: 152px; }
  .has-started .scene-top { top: 9px; }
  .has-started .weather { display: none; }
  .has-started .order-panel { padding: 13px 15px 10px; }
  .has-started .panel-top { position: absolute; right: 15px; top: 13px; }
  .has-started #panel-label, .has-started .guest-number { display: none; }
  .has-started .customer-heading { margin-top: 0; padding-right: 60px; }
  .has-started .customer-heading h1 { font-size: 24px; }
  .has-started .customer-heading p { font-size: 9px; margin-top: 4px; }
  .has-started .speech { margin-top: 10px; min-height: 0; padding: 8px 10px; font-size: 12px; line-height: 1.4; }
  .has-started .order-heading { margin: 10px 0 6px; }
  .has-started .tray-heading { display: none; }
  .has-started .tray { display: inline-flex; width: 49%; vertical-align: middle; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; min-height: 40px; }
  .has-started .tray-item, .has-started .tray-empty { width: 37px; height: 37px; }
  .has-started .tray-item > .icon { width: 30px; height: 30px; }
  .has-started #serve-button { display: inline-flex; width: 48%; vertical-align: middle; margin-top: 9px; min-height: 40px; justify-content: center; padding: 10px 6px; font-size: 11px; }
  .has-started .order-feedback { font-size: 8.5px; line-height: 1.4; margin-top: 8px; min-height: 12px; }
  .has-started .shelf-panel { padding: 10px; margin-top: 10px; }
  .has-started .shelf-heading { margin-bottom: 8px; }
  .has-started .item-card { padding: 2px 3px 6px; }
  .has-started .item-illustration { height: 42px; }
  .has-started .item-illustration > .icon { height: 40px; width: 40px; }
  .has-started .shift-stats { padding: 12px 4px; gap: 9px 15px; }
  .has-started .footer { display: none; }
  .modal { padding: 26px 22px; }
  .modal h2 { font-size: 28px; }
  .modal p { font-size: 12px; }
  .upgrade { gap: 8px; }
  .upgrade-icon { width: 34px; height: 38px; }
  .upgrade-icon .icon { width: 25px; height: 25px; }
  .upgrade h3 { font-size: 11px; }
  .upgrade p { font-size: 9px; }
  .upgrade-buy { min-width: 67px; padding: 9px 7px; font-size: 10px; }
}

@media (max-width: 370px) {
  .shell { padding-left: 10px; padding-right: 10px; }
  .brand > span { font-size: 16px; }
  .brand small { font-size: 7px; letter-spacing: .7px; }
  .brand > .icon { width: 24px; }
  .top-actions { gap: 3px; }
  .icon-button { width: 28px; height: 29px; }
  .wallet { font-size: 11px; }
  .wallet .icon { width: 17px; }
  .order-panel { padding: 15px; }
  .kiosk { width: 73%; left: 13.5%; }
  .weather { font-size: 8px; }
}

.district { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin: -2px 0 18px; }
.district-progress { min-width: 0; max-width: 490px; flex: 1; }
.district-progress strong { display: block; font: 24px Georgia, serif; color: var(--cream); margin: 7px 0 5px; }
.district-progress > span:last-of-type { color: var(--muted); font-size: 11px; }
.rank-track { height: 3px; background: #363346; border-radius: 8px; overflow: hidden; margin-top: 9px; }
.rank-track i, .goal-track i { display: block; height: 100%; background: var(--mint); border-radius: inherit; transition: width .3s; }
.journal-link { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid #4b4355; background: #322c3c; padding: 14px 19px; border-radius: 12px; }
.journal-link > .icon { color: var(--peach); }
.journal-link > span { font: 18px Georgia, serif; }
.journal-link small { display: block; font: 10px 'Segoe UI', sans-serif; margin-top: 5px; color: var(--muted); }
.journal-link b { margin-left: 18px; color: var(--mint); }
.chapter-map { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-bottom: 20px; }
.chapter-card { border: 1px solid var(--line); border-radius: 10px; background: #242435; padding: 12px 14px; text-align: left; transition: border-color .15s, background .15s; }
.chapter-card small { display: block; font-size: 8px; letter-spacing: 1.5px; color: var(--muted); }
.chapter-card strong { display: block; font: 16px/1.25 Georgia, serif; min-height: 40px; margin: 7px 0; }
.chapter-card > span { font-size: 10px; color: #a6a1ad; }
.chapter-card > span.gold { color: var(--gold); letter-spacing: 3px; }
.chapter-card:disabled { opacity: .45; }
.chapter-card.active { background: #34433e; border-color: #96bca1; box-shadow: inset 0 3px #b4d3aa; }
.chapter-card.active small { color: var(--mint); }
.chapter-target { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--gold); padding: 12px 0 0; line-height: 1.5; }
.chapter-target .icon { width: 19px; height: 19px; }
.intro-screen h1 { font-size: clamp(34px, 3.4vw, 47px); line-height: 1.07; max-width: 340px; }
.intro-screen > p { line-height: 1.65; max-width: 340px; }
.intro-how { line-height: 1.8; }
.intro-footnote { line-height: 1.5; }
.night-label { letter-spacing: 1px; }
.rain { display: none; position: absolute; inset: -100px; z-index: 7; pointer-events: none; opacity: .45; background-image: repeating-linear-gradient(110deg, transparent 0 43px, #c4d9ed55 44px 45px, transparent 46px 87px); background-size: 90px 180px; animation: rain-drift 1.1s linear infinite; }
[data-theme="rain"] .rain { display: block; }
[data-theme="rain"] .scene { background: linear-gradient(#262b40, #424958 65%, #343743 65%); }
[data-theme="moon"] .scene-moon { background: #d1edb1; box-shadow: 0 0 50px #c6efa266; }
[data-theme="festival"] .kiosk-sign { box-shadow: 0 0 18px #ffca7140; }
.rush-label { position: absolute; z-index: 12; bottom: 12px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; border: 1px solid #d5ad70; background: #3d2b25ed; border-radius: 20px; color: var(--gold); padding: 7px 12px; }
@keyframes rain-drift { to { transform: translate(-30px, 90px); } }
.item-meta { display: block; color: #aaa6b3; font-size: 10px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.item-card.sold-out { opacity: .38; }
.tray-item { isolation: isolate; }
.tray-item small { position: absolute; z-index: 3; bottom: -5px; left: 50%; transform: translateX(-50%); background: #313e3a; border: 1px solid #90b49d; color: #d8ecdf; font: 10px/1.2 'Segoe UI', sans-serif; border-radius: 5px; padding: 1px 4px; white-space: nowrap; }
.tray-item.cooking { border-color: #efbe74; }
.tray-item.cooking::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(to top, #e9b56830 var(--cooked, 0%), transparent 0); }
.tray-item.cooking small { background: #4c3d2e; color: var(--gold); border-color: #d4aa67; }
.service-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.service-bar button { display: flex; align-items: center; gap: 14px; border: 1px solid #5b5262; border-radius: 8px; background: #353040; padding: 10px 13px; text-align: left; font-size: 12px; }
.service-bar button small { color: var(--muted); font-size: 10px; }
.service-bar button:disabled { opacity: .45; }
.service-bar button:hover:not(:disabled) { border-color: var(--mint); background: #3c4140; }
.service-hint { font-size: 11px; color: var(--muted); }
.shift-goal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; border-top: 1px solid var(--line); padding-top: 11px; margin-top: 10px; font-size: 10px; color: #b9cbbf; }
.goal-track { height: 3px; background: #41404c; border-radius: 6px; overflow: hidden; grid-row: 2; }
.shift-goal > b { grid-column: 2; grid-row: 1 / 3; color: var(--gold); font-size: 20px; letter-spacing: 2px; }
.level-dots { color: var(--mint); font-size: 10px; letter-spacing: 2px; margin-left: 4px; white-space: nowrap; }
.result-stars { color: var(--gold); font-size: 38px; letter-spacing: 10px; text-align: center; margin: 17px 0; }
.result-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 17px; }
.result-links button { background: none; border: 0; font-size: 11px; color: var(--mint); text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
.modal .result-bonus { text-align: center; color: var(--gold); padding: 0 0 13px; margin: 0; }
.story-unlock { width: 100%; padding: 13px; text-align: left; font-size: 12px; line-height: 1.6; color: var(--peach); background: #483343; border: 1px solid #806078; border-radius: 9px; margin-bottom: 18px; }
.story-unlock b { float: right; }
.journal-grid { display: grid; gap: 16px; margin: 18px 0 24px; }
.journal-card { display: grid; grid-template-columns: 70px 1fr; gap: 12px; background: #292838; border: 1px solid var(--line); padding: 15px 12px; border-radius: 12px; text-align: left; }
.journal-portrait { overflow: hidden; height: 100px; align-self: start; }
.journal-portrait svg { height: 100px; width: 100px; margin-left: -15px; }
.journal-card.unmet .journal-portrait { filter: saturate(.25); opacity: .55; }
.journal-card h3 { font: 19px Georgia, serif; margin-bottom: 7px; }
.journal-card h3 > span { font: 13px 'Segoe UI', sans-serif; white-space: nowrap; }
.journal-card small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.journal-card ol { padding: 0 0 0 15px; margin: 10px 0 0; font-size: 11px; line-height: 1.65; color: #8d889c; }
.journal-card li + li { margin-top: 7px; }
.journal-card .unlocked { color: #d6d3c9; }
.help-steps p { text-align: left; line-height: 1.7; }
.help-steps b { color: var(--cream); }
@media (max-width: 900px) {
  .chapter-map { gap: 6px; }
  .chapter-card { padding: 10px 8px; }
  .chapter-card strong { font-size: 13px; }
  .chapter-card > span { font-size: 8px; }
  .service-hint { display: none; }
  .night-label { max-width: 70%; font-size: 8px; letter-spacing: .5px; }
}
@media (max-width: 600px) {
  .district { gap: 14px; margin: 0 0 13px; align-items: stretch; }
  .district-progress strong { font-size: 19px; margin: 6px 0; }
  .district-progress > span:last-of-type { display: block; font-size: 9px; line-height: 1.5; }
  .journal-link { gap: 6px; padding: 9px 10px; width: 132px; }
  .journal-link > .icon { width: 18px; height: 18px; }
  .journal-link > span { font-size: 14px; }
  .journal-link small { font-size: 8px; line-height: 1.5; }
  .journal-link b { display: none; }
  .chapter-map { display: flex; overflow-x: auto; gap: 7px; margin: 0 -3px 13px; padding: 3px 3px 8px; scrollbar-width: thin; }
  .chapter-card { flex: 0 0 117px; padding: 9px 10px; }
  .chapter-card small { font-size: 7px; }
  .chapter-card strong { font-size: 14px; min-height: 32px; margin: 5px 0; }
  .scene { height: 200px; }
  .kiosk { bottom: -4px; }
  .intro-screen h1 { font-size: 35px; padding-top: 3px; }
  .intro-screen > p { margin-top: 10px; font-size: 12px; }
  .chapter-target { padding-top: 8px; font-size: 10px; }
  .intro-how { font-size: 10px; }
  .intro-footnote { font-size: 8px; }
  .tiny-star { margin-right: 0; font-size: 24px; }
  .night-label { max-width: 80%; font-size: 7px; }
  .rush-label { bottom: 5px; font-size: 8px; padding: 5px 8px; }
  .item-meta { font-size: 8px; margin-top: 3px; }
  .service-bar { gap: 8px; padding-top: 8px; margin-top: 8px; }
  .service-bar button { flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 9px; min-height: 43px; font-size: 10px; }
  .service-bar button small { font-size: 8px; }
  .shift-goal { padding-top: 7px; margin-top: 7px; gap: 4px 8px; font-size: 8px; }
  .shift-goal > b { font-size: 16px; }
  .tray-item small { font-size: 8px; bottom: -4px; }
  .has-started .order-feedback { margin-top: 10px; }
  .has-started .topbar { margin-bottom: 11px; }
  .result-stars { font-size: 33px; margin: 12px 0; }
  .result-links { gap: 8px 14px; }
  .result-links button { font-size: 10px; }
  .level-dots { font-size: 8px; letter-spacing: 1px; }
  .journal-card { grid-template-columns: 52px 1fr; gap: 7px; padding: 12px 9px; }
  .journal-portrait svg { width: 82px; height: 90px; }
  .journal-card h3 { font-size: 18px; }
  .journal-card ol { font-size: 10px; }
}

.connection-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 20px; margin: -15px 0 18px; color: #aaa8b6; font-size: 10px; }
.connection-strip[data-status="error"] { color: var(--gold); }
.connection-strip[data-status="syncing"] { color: #b8cabe; }
.connection-strip button { background: none; border: 0; padding: 5px 0; color: var(--mint); text-decoration: underline; font-size: 10px; }
.return-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 17px; }
.return-tools button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; background: #292b3a; border: 1px solid #494758; border-radius: 9px; font-size: 12px; text-align: left; }
.return-tools button:first-child { border-color: #6c5a48; background: #342e32; }
.return-tools button b { font-size: 10px; color: var(--gold); font-weight: 500; }
.return-tools button:disabled { opacity: .6; }
.mission-list { margin-top: 23px; }
.mission { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 20px 0; border-top: 1px solid #514454; }
.mission h3 { font: 21px Georgia, serif; }
.mission p { margin-top: 6px; font-size: 11px; }
.mission .goal-track { margin-top: 10px; }
.mission small { display: block; font-size: 10px; color: var(--muted); margin-top: 6px; }
.mission button { align-self: center; background: #404c42; color: var(--mint); border: 1px solid #7d9d83; border-radius: 8px; padding: 11px; font-size: 11px; min-width: 80px; }
.mission button:disabled { background: #38313e; color: var(--muted); border-color: #514454; }
.modal .daily-footnote { font-size: 10px; }
.modal-connection { border-top: 1px solid #78604a; margin-top: 18px; padding-top: 10px; }
.modal-connection p { color: var(--gold); font-size: 11px; }
.modal-connection .button { background: #3b4e43; border: 1px solid #84aa90; color: var(--mint); width: 100%; margin-top: 13px; }
.modal .modal-support { margin-top: 18px; font-size: 9px; color: var(--muted); text-align: center; }
.reward-button { width: 100%; background: #36493f; border: 1px solid #7aab90; color: var(--mint); margin-top: 18px; }
.footer a, .modal a { color: #b4c8bc; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .connection-strip { margin: -4px 0 10px; font-size: 8px; min-height: 15px; line-height: 1.4; }
  .has-started .connection-strip { margin: -3px 0 8px; }
  .connection-strip button { font-size: 8px; max-width: 95px; }
  .return-tools { gap: 7px; margin-bottom: 12px; }
  .return-tools button { display: block; font-size: 10px; padding: 9px 10px; }
  .return-tools button b { display: block; font-size: 8px; margin-top: 5px; }
  .mission { gap: 10px; padding: 16px 0; }
  .mission h3 { font-size: 18px; }
  .mission button { min-width: 71px; padding: 11px 6px; font-size: 10px; }
  .mission p { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}