:root { color-scheme: dark; --zg-void: #050a12; --zg-panel: #0b1725; --zg-panel-raised: #112337; --zg-line: #24445f; --zg-gold: #f5b51b; --zg-gold-hot: #ffd45c; --zg-blue: #42b9ff; --zg-success: #91df63; --zg-warning: #ffc857; --zg-danger: #ff7878; --zg-text: #f3f7fb; --zg-muted: #91a7ba; --zg-map-overlay: rgba(5, 10, 18, .72); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--zg-void); color: var(--zg-text); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
button { cursor: pointer; }
.game-shell { display: grid; min-height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(circle at 50% -20%, #173452 0, var(--zg-void) 54%); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--zg-line); background: rgba(5, 10, 18, .94); }
.eyebrow { margin: 0 0 .25rem; color: var(--zg-gold); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; color: var(--zg-text); font-size: clamp(1.15rem, 5vw, 1.9rem); letter-spacing: .04em; text-transform: uppercase; }
.world-status { color: var(--zg-blue); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.map-panel { position: relative; min-height: 0; overflow: hidden; border-inline: 1px solid var(--zg-line); }
#world-map { position: absolute; inset: 0; min-height: 430px; filter: saturate(.78) contrast(1.08); }
.map-hint { position: absolute; z-index: 500; top: .8rem; left: 50%; width: max-content; max-width: calc(100% - 2rem); padding: .65rem .85rem; border: 1px solid var(--zg-gold); background: var(--zg-map-overlay); color: var(--zg-text); font-size: .74rem; font-weight: 700; transform: translateX(-50%); }
.game-intro { position: absolute; z-index: 500; left: .75rem; right: .75rem; bottom: .75rem; max-width: 540px; padding: 1rem; border: 1px solid var(--zg-line); background: rgba(7, 17, 29, .94); box-shadow: 0 12px 35px rgba(0, 0, 0, .4); }
.game-intro .eyebrow { margin-bottom: .4rem; }
.game-intro h2 { margin: 0; color: var(--zg-text); font-size: clamp(1.2rem, 5vw, 1.9rem); line-height: 1.05; }
.game-intro p:not(.eyebrow) { margin: .7rem 0 0; color: var(--zg-muted); font-size: .87rem; line-height: 1.5; }
.intro-steps { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.intro-steps span { padding: .35rem .55rem; border: 1px solid var(--zg-line); background: var(--zg-panel); color: var(--zg-blue); font-size: .68rem; font-weight: 800; }
.bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; padding: .5rem; border-top: 1px solid var(--zg-line); background: rgba(5, 10, 18, .97); }
.bottom-nav button { border: 1px solid transparent; border-radius: .2rem; padding: .68rem .25rem; background: transparent; color: var(--zg-muted); font: inherit; font-size: .68rem; font-weight: 800; }
.bottom-nav button:hover, .bottom-nav button:focus-visible { border-color: var(--zg-blue); color: var(--zg-text); outline: none; }
.bottom-nav button.is-active { border-color: var(--zg-gold); background: rgba(245, 181, 27, .14); color: var(--zg-gold-hot); }
.leaflet-control-zoom a { border-color: var(--zg-line) !important; background: var(--zg-panel) !important; color: var(--zg-gold) !important; }
@media (min-width: 760px) { .topbar { padding-inline: 2rem; } .bottom-nav { margin: 0 auto 1rem; width: min(620px, calc(100% - 2rem)); border: 1px solid var(--zg-line); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }