:root {
  color-scheme: dark;
  --gold: #f2c14e;
  --panel: rgba(10, 8, 7, 0.82);
  --panel-border: rgba(242, 193, 78, 0.42);
  --text: #f6ead0;
  --red: #e44841;
  --blue: #1d64c8;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow: hidden; background: #070808; color: var(--text); font-family: Georgia, "Times New Roman", serif; }
button { font: inherit; }
.demo-shell { display: grid; width: 100%; height: 100vh; place-items: center start; overflow: hidden; background: #0b0d0d; }
.game-phone { position: relative; width: min(100%, 390px); height: min(100vh, 860px); min-height: 620px; overflow: hidden; background: #0a0b0b; isolation: isolate; }
.phone-status { position: absolute; inset: 0 0 auto; z-index: 8; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 12px; color: #2d3035; background: #f7f3fa; font: 0.76rem Arial, Helvetica, sans-serif; }
#sceneCanvas { position: absolute; inset: 34px 0 0; width: 100%; height: calc(100% - 34px); display: block; background: #080808; }
.hud { position: absolute; z-index: 10; top: 43px; left: 8px; right: 8px; display: grid; grid-template-columns: 116px minmax(0, 1fr) 66px; align-items: start; gap: 6px; pointer-events: none; text-shadow: 0 2px 2px #000; }
.bars { display: grid; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 16px 70px 32px; align-items: center; gap: 4px; color: #f6ead0; font-size: 0.82rem; }
.icon { color: #f4ead4; text-align: center; font: 0.55rem Arial, Helvetica, sans-serif; }
.bar { height: 7px; border: 1px solid rgba(0,0,0,0.45); background: rgba(255,255,255,0.12); box-shadow: inset 0 0 6px rgba(0,0,0,0.75); }
.bar i { display: block; height: 100%; }
.health i { width: 100%; background: var(--red); }
.focus i { width: 80%; background: var(--blue); }
.zone-title { margin: 0; color: var(--gold); font-size: 0.72rem; letter-spacing: 0.18em; white-space: nowrap; overflow: hidden; text-align: center; text-transform: uppercase; }
.loadout { display: grid; justify-items: end; gap: 1px; color: var(--gold); font-size: 0.5rem; letter-spacing: 0.04em; line-height: 1.12; overflow: visible; text-transform: uppercase; }
.loadout span, .loadout strong { max-width: 66px; overflow: visible; text-align: right; white-space: normal; }
.loadout strong::before { content: "$ "; }
.objective-stack { position: absolute; z-index: 10; top: 75px; left: 50%; transform: translateX(-5%); display: grid; gap: 7px; width: min(45%, 190px); pointer-events: none; }
.waypoint, .objective { border: 1px solid var(--panel-border); border-radius: 5px; background: var(--panel); box-shadow: 0 8px 20px rgba(0,0,0,0.55), inset 0 0 20px rgba(242,193,78,0.08); }
.waypoint { display: grid; place-items: center; min-height: 44px; padding: 6px; text-align: center; }
.waypoint span { color: #ffe27a; font-size: 1.12rem; line-height: 1; }
.waypoint strong { color: #fff0aa; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; }
.objective { padding: 7px 9px; }
.objective span { display: block; color: #b8872d; font-size: 0.6rem; letter-spacing: 0.22em; }
.objective p { margin: 5px 0 0; color: #f2e5c5; font: 0.7rem/1.35 Consolas, monospace; }
.controls { position: absolute; z-index: 12; inset: auto 16px 20px; min-height: 102px; pointer-events: none; }
.controls button { pointer-events: auto; }
.stick { position: absolute; left: 0; bottom: 0; width: 78px; height: 78px; border: 1px solid rgba(242,193,78,0.42); border-radius: 50%; background: rgba(116, 92, 34, 0.28); box-shadow: inset 0 0 28px rgba(242,193,78,0.16); }
.stick span { position: absolute; left: 27px; bottom: 22px; width: 32px; height: 32px; border: 1px solid rgba(255,236,151,0.7); border-radius: 50%; background: rgba(204, 156, 38, 0.72); box-shadow: 0 0 18px rgba(242,193,78,0.6); }
.action { position: absolute; right: 0; width: 47px; height: 47px; border: 1px solid rgba(242,193,78,0.26); border-radius: 8px; color: #f8ead1; background: rgba(22, 15, 10, 0.86); box-shadow: 0 8px 18px rgba(0,0,0,0.45); }
.attack { right: 55px; bottom: 39px; background: rgba(107, 20, 17, 0.88); font-size: 1.15rem; }
.interact { bottom: 39px; }
.menu { right: 55px; bottom: 0; font-size: 1.35rem; }
.demo-note { position: absolute; z-index: 13; left: 50%; bottom: 8px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 160px); margin: 0; border-radius: 999px; padding: 5px 9px; color: #f8ead1; background: rgba(0,0,0,0.42); font: 0.65rem Arial, Helvetica, sans-serif; text-align: center; opacity: 0.82; }
.game-phone.is-attacking .attack { filter: brightness(1.5); transform: translateY(1px); }
.game-phone.is-moving .stick span { transform: translate(6px, -8px); }
@media (max-height: 680px) { .objective-stack { top: 70px; } .demo-note { display: none; } }
@media (max-width: 360px) { .hud { grid-template-columns: 108px 1fr 58px; gap: 4px; } .zone-title { font-size: 0.64rem; letter-spacing: 0.14em; } .loadout { font-size: 0.47rem; } .loadout span, .loadout strong { max-width: 58px; } .objective-stack { width: 48%; } }