:root { color-scheme: dark; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #080e0c; color: #e8eee8; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { height: 100dvh; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.scene { position: fixed; inset: 0; }
.scene img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; }
#gate img { object-position: 42% 71%; }
#garage img { object-position: 23% 52%; }
#garage.entering { animation: arrive 650ms ease-out; }
button { font: inherit; touch-action: manipulation; }
.hotspot { position: absolute; padding: 0; border: 0; border-radius: 50%; transform: translate(-50%, -50%); background: transparent; cursor: pointer; }
#gnome { left: 42%; top: 71%; width: 14vmin; height: 14vmin; }
#gun { left: 23%; top: 52%; width: 15vmin; height: 15vmin; }
.hotspot:focus { outline: none; }
.hotspot:focus-visible { outline: 1px solid #cef7b699; outline-offset: 4px; }
.glint { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #ebffd9; opacity: 0; box-shadow: 0 0 9px 3px #c1ff9999; animation: glint 6s 3s infinite; }
dialog { width: min(420px, calc(100% - 40px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid #bcdfbd26; border-radius: 18px; background: #101a16f2; color: inherit; box-shadow: 0 24px 100px #0009; }
dialog::backdrop { background: #030a0673; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.menu-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
h1 { font-size: 15px; font-weight: 500; letter-spacing: .08em; margin: 0; }
#close-menu { border: 0; background: transparent; color: #a6b8aa; font-size: 25px; width: 44px; height: 44px; cursor: pointer; }
#destinations { display: grid; gap: 10px; }
.destination { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px; text-align: left; color: inherit; background: #c9ffc006; border: 1px solid #c9ffc01c; border-radius: 10px; cursor: pointer; }
.destination:hover:not(:disabled) { background: #c9ffc012; border-color: #c9ffc060; }
.destination:focus-visible, #close-menu:focus-visible { outline: 2px solid #b5ef96; outline-offset: 3px; }
.destination strong { display: block; font-size: 15px; font-weight: 500; }
.destination small { display: block; margin-top: 5px; color: #95a99b; font-size: 12px; }
.destination .symbol { color: #b8ef95; font-size: 19px; }
.destination:disabled { cursor: default; opacity: .38; }
.destination:disabled strong { font-size: 11px; letter-spacing: .15em; }
.panel-footnote { margin: 20px 0 0; font-size: 11px; color: #7f9486; }
#portal { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
#flash { position: fixed; left: 23%; top: 52%; width: 30vmin; height: 30vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #fff 0%, #d6ff9e 8%, #82ff3466 30%, transparent 68%); opacity: 0; pointer-events: none; z-index: 21; }
#flash.firing { animation: fire 240ms ease-out; }
#status { position: fixed; z-index: 22; left: 50%; bottom: max(36px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); padding: 14px 20px; margin: 0; border: 1px solid #c9ffc02b; border-radius: 10px; background: #101a16ed; font-size: 13px; letter-spacing: .02em; text-align: center; opacity: 0; transition: opacity 300ms; pointer-events: none; }
#status.visible { opacity: 1; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes glint { 0%, 6%, 100% { opacity: 0; } 3% { opacity: .8; } }
@keyframes fire { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #garage.entering { animation: none; } .glint { animation: none; opacity: .25; } #flash.firing { animation: none; } }