:root {
  color-scheme: light;
  font-family: Inter, ui-rounded, "Microsoft YaHei", system-ui, sans-serif;
  --cream: #fff7df;
  --red: #c43d2f;
  --dark-red: #8d261f;
  --teal: #267f79;
  --ink: #412f27;
  --gold: #f3bb42;
  --green: #42a765;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #1c413d; }
button { font: inherit; }
#app { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 20%, #4a877c, #173a37 72%); }
.game-shell { position: relative; width: min(100vw, 177.78vh); height: min(100vh, 56.25vw); min-height: 520px; overflow: hidden; background: var(--cream); box-shadow: 0 30px 90px #0d2828aa; isolation: isolate; }
.rotate-notice { display: none; }
.world { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(#183d3122 0 12%, transparent 30% 78%, #193c3533); pointer-events: none; }

.topbar { position: absolute; z-index: 30; left: 2.2%; right: 2.2%; top: max(14px, env(safe-area-inset-top)); height: 58px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.brand, .wallet, .level-wrap, .icon-button { pointer-events: auto; border: 2px solid #ffffffb8; box-shadow: 0 6px 15px #2f1e1740; backdrop-filter: blur(9px); }
.brand { height: 54px; display: flex; align-items: center; gap: 9px; padding: 0 18px 0 10px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #d64b3d, #aa3028); font-weight: 1000; font-size: 19px; letter-spacing: .04em; text-shadow: 0 2px 0 #7a201b; }
.brand-mark { width: 36px; height: 36px; border-radius: 50%; background: #ffe7a0; position: relative; display: block; box-shadow: inset 0 0 0 4px #f3bd53; }
.brand-mark i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #be4334; }
.brand-mark i:nth-child(1) { left: 10px; top: 8px; }.brand-mark i:nth-child(2) { right: 8px; top: 13px; }.brand-mark i:nth-child(3) { left: 13px; bottom: 7px; }
.level-wrap { width: 180px; height: 48px; padding: 7px 12px; color: var(--ink); background: #fff8e5e8; border-radius: 15px; font-size: 11px; font-weight: 900; }
.level-track { height: 10px; margin-top: 5px; overflow: hidden; border-radius: 10px; background: #d7cab0; box-shadow: inset 0 2px 3px #7d674940; }
.level-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5c34e, #f08e34); transition: width .3s; }
.wallet { margin-left: auto; height: 50px; min-width: 108px; padding: 0 17px 0 9px; border-radius: 17px; display: flex; align-items: center; gap: 9px; color: #183f2e; background: #f4fff1e8; font-size: 21px; }
.cash-note { display: grid; place-items: center; width: 34px; height: 27px; border-radius: 7px; color: #fff; background: var(--green); box-shadow: inset 0 0 0 3px #bce6a9; font-weight: 1000; }
.icon-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 15px; color: #fff; background: #294f4bcc; font-size: 23px; font-weight: 900; cursor: pointer; }
.icon-button:hover { transform: translateY(-2px); }.icon-button.muted { background: #6c6c64cc; }

.objective { position: absolute; z-index: 25; left: 50%; top: 82px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; min-width: 270px; padding: 9px 17px; border: 2px solid #fff9; border-radius: 16px; color: #fff; background: #2f463fd9; box-shadow: 0 6px 16px #1e282655; pointer-events: none; }
.objective-dot { width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px #f3bb4244; animation: pulse 1.4s infinite; }
.objective small, .objective strong { display: block; }.objective small { opacity: .72; font-size: 9px; letter-spacing: .15em; }.objective strong { margin-top: 1px; font-size: 13px; }

.station { position: absolute; z-index: 6; width: 96px; height: 68px; transform: translate(-50%, -50%); pointer-events: none; }
.oven { left: 25%; top: 40%; }.counter { left: 58%; top: 38%; }.register { left: 67%; top: 51%; }
.station-label { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px); display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 8px; border: 2px solid #fff; border-radius: 10px; color: #fff; background: #3b2f28d9; box-shadow: 0 4px 8px #3b241b44; font-size: 10px; font-weight: 900; }
.station-label b { color: #ffdc68; }.station-ring { position: absolute; inset: 24% 4% 0; border: 3px dashed #fff9; border-radius: 50%; transform: skewX(-10deg); animation: ring 2.3s linear infinite; }
.pizza-stack, .carry { position: absolute; left: 50%; top: 30%; width: 38px; height: 32px; transform: translate(-50%, -50%); }
.pizza-stack i, .carry i { position: absolute; left: 0; bottom: calc(var(--i) * 5px); width: 36px; height: 12px; border-radius: 50%; border: 3px solid #b84b30; background: radial-gradient(circle at 28% 40%, #bd3d31 0 8%, transparent 9%), radial-gradient(circle at 68% 58%, #bd3d31 0 8%, transparent 9%), #f3c653; box-shadow: 0 3px 0 #7b3227; }
.carry { z-index: 12; top: -10px; left: 55%; transform: scale(.7); }
.money-stack { position: absolute; left: 52%; top: 39%; width: 42px; height: 29px; transform: translate(-50%, -50%) scale(0); opacity: 0; border-radius: 7px; border: 4px solid #c1e494; background: repeating-linear-gradient(0deg, #4ea85a 0 5px, #76c86f 5px 9px); box-shadow: 0 5px 0 #28683e; transition: .2s; }
.money-stack.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: moneyBob .8s infinite alternate; }

.queue { position: absolute; z-index: 7; left: 69%; top: 32%; display: flex; align-items: flex-end; gap: 3px; transform: rotate(-4deg); }
.queue-person { position: relative; width: 46px; height: 58px; animation: customerBob 1.4s ease-in-out infinite alternate; }
.queue-person:nth-child(2n) { animation-delay: -.6s; }.queue-person:nth-child(n+4) { opacity: .74; transform: scale(.86); }
.portrait { position: absolute; z-index: 2; left: 50%; top: 50%; width: 52px; height: 64px; transform: translate(-50%, -50%); border-radius: 45% 45% 40% 40%; background-image: url("./assets/crew-strip.png"); background-size: 300% 100%; background-repeat: no-repeat; box-shadow: inset 0 0 0 3px #fff8, 0 4px 9px #36241f55; }
.player-portrait { background-position: 0% 50%; }.employee-portrait { background-position: 50% 50%; }.customer-portrait { background-position: 100% 50%; }
.queue-person .portrait { width: 38px; height: 50px; }
.thought-pizza { position: absolute; z-index: 4; left: 27px; top: -14px; width: 27px; height: 23px; border: 3px solid #fff; border-radius: 50%; background: radial-gradient(circle at 30% 45%, #bd3d31 0 8%, transparent 9%), radial-gradient(circle at 68% 55%, #bd3d31 0 8%, transparent 9%), #f4c85b; box-shadow: 0 3px 7px #31252044; }

.actor { position: absolute; z-index: 14; width: 64px; height: 75px; transform: translate(-50%, -73%); transition: opacity .25s; pointer-events: none; }
.actor .portrait { width: 58px; height: 72px; transform: translate(-50%, -50%) scaleX(var(--facing, 1)); }
.actor-shadow { position: absolute; z-index: 0; left: 50%; bottom: -3px; width: 47px; height: 16px; transform: translateX(-50%); border-radius: 50%; background: #3d2a2060; filter: blur(2px); }
.actor.moving .portrait { animation: walk .28s infinite alternate ease-in-out; }.actor.hidden { opacity: 0; }

.upgrade-pad { position: absolute; z-index: 8; width: 125px; min-height: 73px; transform: translate(-50%, -50%) skewY(-3deg); padding: 8px 8px 7px 42px; border: 3px solid #fff; border-radius: 50% / 34%; color: #fff; background: #2d8d87db; box-shadow: 0 7px 0 #175c58, 0 10px 15px #1e352d44; text-shadow: 0 2px 1px #165a56; pointer-events: none; }
.hire-pad { left: 31%; top: 70%; }.speed-pad { left: 47%; top: 75%; background: #db8835dc; box-shadow: 0 7px 0 #925525, 0 10px 15px #1e352d44; }.expand-pad { left: 77%; top: 70%; background: #b5453cdc; box-shadow: 0 7px 0 #7c2e28, 0 10px 15px #1e352d44; }
.upgrade-pad strong, .upgrade-pad small { display: block; white-space: nowrap; }.upgrade-pad strong { margin-top: 4px; font-size: 11px; }.upgrade-pad small { margin-top: 2px; color: #fff3a7; font-weight: 1000; font-size: 12px; }
.pad-icon { position: absolute; left: 9px; top: 15px; width: 30px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: #153e3a88; font-size: 25px; font-weight: 1000; }.crew-icon { background-image: url("./assets/crew-strip.png"); background-size: 300% 100%; background-position: 50%; }
.pad-progress { position: absolute; left: 20px; right: 17px; bottom: 4px; height: 5px; overflow: hidden; border-radius: 6px; background: #173a3755; }.pad-progress em { display: block; height: 100%; background: #fff1a1; transition: width .16s; }
.upgrade-pad.complete { filter: saturate(.45); opacity: .78; }.upgrade-pad.complete::after { content: "✓"; position: absolute; right: 8px; top: 5px; font-size: 16px; }

.drive-thru { position: absolute; z-index: 5; right: 4%; top: 37%; width: 18%; height: 20%; opacity: 0; transform: translateX(35px); transition: .6s; pointer-events: none; }
.drive-thru.unlocked { opacity: 1; transform: translateX(0); }.drive-thru > span { display: block; padding: 6px 10px; border-radius: 7px; color: #fff; background: #8e302a; text-align: center; font-size: 11px; font-weight: 1000; box-shadow: 0 4px 0 #5b2421; }
.car { position: absolute; right: 1%; top: 54%; width: 80px; height: 40px; border: 5px solid #d09624; border-radius: 40% 45% 32% 35%; background: #f3bd3e; box-shadow: inset 0 11px #eaa632, 0 6px 8px #39282155; }.car::before { content: ""; position: absolute; left: 19px; top: -13px; width: 39px; height: 18px; border-radius: 45% 45% 0 0; background: #d7f1ef; border: 4px solid #b78325; }.car i { position: absolute; bottom: -9px; width: 15px; height: 15px; border-radius: 50%; background: #293234; border: 3px solid #6e7777; }.car i:first-child { left: 8px; }.car i:last-child { right: 8px; }

.joystick { position: absolute; z-index: 26; left: 3.5%; bottom: 7.5%; width: 108px; height: 108px; display: grid; place-items: center; border: 3px solid #ffffff80; border-radius: 50%; background: #183d385e; box-shadow: inset 0 0 20px #102a2a66, 0 8px 20px #24352d40; backdrop-filter: blur(4px); touch-action: none; }
.joystick-knob { width: 52px; height: 52px; border: 4px solid #fff7; border-radius: 50%; background: linear-gradient(145deg, #f5d67c, #d48d36); box-shadow: 0 6px 12px #1e282677, inset 0 3px 3px #fff6; }
.interaction-hint { position: absolute; z-index: 20; left: 50%; bottom: 13%; transform: translateX(-50%); padding: 6px 12px; border-radius: 12px; color: #fff; background: #253e38aa; font-size: 10px; pointer-events: none; opacity: .8; }

.bottom-hud { position: absolute; z-index: 28; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px; border: 2px solid #fff8; border-radius: 17px; background: #fff9; box-shadow: 0 6px 18px #2c201b3d; backdrop-filter: blur(10px); }
.stat { min-width: 82px; padding: 3px 11px; border-right: 1px solid #9c856b44; }.stat span, .stat b { display: block; }.stat span { color: #7a675d; font-size: 9px; }.stat b { color: var(--ink); margin-top: 1px; font-size: 15px; }
.control-tip { display: flex; align-items: center; gap: 7px; padding: 0 8px; color: #59483f; font-size: 10px; }.control-tip kbd { padding: 5px 7px; border: 1px solid #bea992; border-bottom-width: 3px; border-radius: 6px; background: #fffaf0; font-weight: 900; }
.toast { position: absolute; z-index: 60; left: 50%; top: 23%; transform: translate(-50%, -12px) scale(.9); padding: 10px 18px; border: 2px solid #fff; border-radius: 20px; color: #fff; background: #314d47e8; box-shadow: 0 7px 18px #2b282055; opacity: 0; pointer-events: none; transition: .22s; font-weight: 900; }.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }.toast.accent { color: #5c3716; background: #ffdb61ef; }
.celebration { position: absolute; z-index: 55; inset: 0; overflow: hidden; pointer-events: none; }.celebration i { position: absolute; left: var(--x); top: -30px; width: 10px; height: 20px; border-radius: 3px; background: var(--c); opacity: 0; }.celebration.play i { animation: confetti 1.5s var(--d) ease-out; }

@keyframes walk { to { margin-top: -5px; transform: translate(-50%, -50%) scaleX(var(--facing, 1)) rotate(2deg); } }
@keyframes ring { to { transform: skewX(-10deg) rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.25); box-shadow: 0 0 0 8px #f3bb4211; } }
@keyframes moneyBob { to { transform: translate(-50%, -60%) scale(1.05); } }
@keyframes customerBob { to { transform: translateY(-3px); } }
@keyframes confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(88vh) rotate(720deg); } }

@media (max-width: 760px), (max-height: 600px) {
  .game-shell { width: 100vw; height: 100vh; min-height: 0; }
  .brand { font-size: 0; width: 56px; padding: 0 8px; }.brand-mark { flex: none; }
  .level-wrap { width: 120px; }.objective { top: 74px; transform: translateX(-50%) scale(.88); }
  .topbar { gap: 6px; }.icon-button { width: 40px; height: 40px; }.wallet { min-width: 82px; padding-right: 10px; }
  .bottom-hud { left: auto; right: 2%; transform: none; }.control-tip { display: none; }
  .joystick { width: 94px; height: 94px; bottom: 4%; }.interaction-hint { display: none; }
  .upgrade-pad { transform: translate(-50%, -50%) skewY(-3deg) scale(.82); }
}

@media (orientation: portrait) {
  #app { align-content: center; gap: 22px; padding: 20px; }
  .game-shell { width: 100vw; height: 56.25vw; min-height: 0; pointer-events: none; filter: brightness(.45) saturate(.7); }
  .rotate-notice { z-index: 100; display: grid; justify-items: center; gap: 7px; color: #fff; text-align: center; text-shadow: 0 2px 6px #102b29; }
  .rotate-notice strong { font-size: 20px; }.rotate-notice small { color: #cbe0da; }
  .phone-shape { width: 62px; height: 38px; border: 4px solid #f5cc65; border-radius: 10px; box-shadow: inset 0 0 0 3px #173a37; animation: rotatePhone 1.5s ease-in-out infinite alternate; }
}

@keyframes rotatePhone { from { transform: rotate(90deg); } to { transform: rotate(0); } }