@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@600;700;800&display=swap');

:root { color-scheme: dark; font-family: 'DM Mono', monospace; }
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #0f141b; }
#app canvas { display: block; width: 100%; height: 100%; }
.hud { position: fixed; top: 28px; left: 32px; color: #f3e6c7; z-index: 4; width: 230px; pointer-events: none; text-shadow: 0 2px 15px rgba(0,0,0,.55); }
.brand-lockup { display: flex; gap: 9px; align-items: center; font-size: 9px; letter-spacing: .18em; color: #a9b5c0; }
.brand-mark { width: 22px; height: 22px; border: 2px solid #e6b53c; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; font-family: Georgia, serif; font-size: 15px; color: #e6b53c; }
.title { margin-top: 31px; display: flex; flex-direction: column; gap: -2px; font-family: 'Playfair Display', Georgia, serif; }
.title span { font-size: 14px; letter-spacing: .08em; color: #e7bf58; }
.title strong { font-size: 67px; line-height: .9; letter-spacing: -.06em; color: #f7ead1; }
.rule { width: 42px; border-top: 2px solid #d84a3e; margin: 21px 0 12px; }
.hud p { margin: 0; font-size: 10px; letter-spacing: .08em; color: #c2cbd0; }
.controls { margin-top: 21px; font-size: 8px; line-height: 2; color: #8b989f; letter-spacing: .03em; }
.controls span { color: #efc767; font-weight: 500; }
.caption { position: fixed; z-index: 4; bottom: 22px; left: 32px; color: #aab4b8; font-size: 8px; letter-spacing: .13em; pointer-events: none; }
.dot { display: inline-block; width: 5px; height: 5px; background: #da4c3e; border-radius: 50%; margin: 0 8px 1px 0; box-shadow: 0 0 11px #e3685e; }
.slash { color: #dfb85a; margin: 0 8px; }
.vignette { position: fixed; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 170px rgba(2, 5, 9, .78), inset 0 0 35px rgba(0,0,0,.25); }
#walkMode { position: fixed; right: 28px; bottom: 25px; z-index: 6; border: 1px solid rgba(238,205,128,.75); background: rgba(22,31,37,.84); color: #f4d776; padding: 11px 15px 10px; font: 500 9px 'DM Mono', monospace; letter-spacing: .12em; cursor: pointer; box-shadow: 0 8px 28px rgba(0,0,0,.26); }
#walkMode:hover, #walkMode.active { background: #d5a841; color: #1a2025; }
#walkHelp { position: fixed; right: 28px; bottom: 110px; z-index: 6; color: #d5d0bc; font-size: 8px; letter-spacing: .05em; opacity: 0; transition: opacity .2s; pointer-events: none; text-shadow: 0 2px 10px #000; }
body.walking #walkHelp { opacity: 1; }
body.walking .hud, body.walking .caption { opacity: .38; }
#soundToggle { position: fixed; right: 28px; bottom: 72px; z-index: 6; border: 1px solid rgba(225,184,85,.55); background: rgba(22,31,37,.72); color: #cfc6a8; padding: 8px 12px 7px; font: 500 8px 'DM Mono', monospace; letter-spacing: .10em; cursor: pointer; }
#soundToggle:hover, #soundToggle.active { border-color: #e8c861; color: #f8df84; background: rgba(43,47,42,.9); }
#weatherPanel { position: fixed; left: 32px; bottom: 42px; z-index: 6; display: flex; align-items: center; gap: 5px; padding: 6px; background: rgba(18,25,30,.72); border: 1px solid rgba(220,196,127,.24); }
#weatherPanel span { margin: 0 6px 0 3px; color: #d3c49d; font-size: 8px; letter-spacing: .1em; }
#weatherPanel button { border: 0; background: transparent; color: #9da6a8; padding: 5px 6px; font: 500 7px 'DM Mono', monospace; letter-spacing: .05em; cursor: pointer; }
#weatherPanel button:hover, #weatherPanel button.active { color: #f1d46c; background: rgba(213,168,65,.18); }
@media (max-width: 680px) { .hud { top: 18px; left: 18px; transform: scale(.78); transform-origin: top left; } .caption { left: 18px; bottom: 14px; font-size: 7px; } }