:root { font-family: Figtree, sans-serif; color: #f5f4e7; background: #16363a; font-synthesis: none; }
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#app { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button, .view-link { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#world { width: 100%; height: 100%; display: block; cursor: grab; image-rendering: pixelated; touch-action: none; }
#world:active { cursor: grabbing; }
.vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 130px 25px rgba(8,28,33,.28); }
.topbar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 86px; display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 28px; background: linear-gradient(rgba(11,32,36,.7),transparent); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; letter-spacing: -.055em; text-shadow: 0 2px 12px #152d36; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #172a27; background: #d8ee9a; font-size: 23px; font-weight: 400; line-height: 1; text-shadow: none; }
.alpha { align-self: center; margin-left: 9px; padding: 5px 8px; border: 1px solid rgba(229,246,214,.24); border-radius: 5px; color: #e0ebd7; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-shadow: none; }
button { font: inherit; cursor: pointer; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.view-link { color: #edf4dc; font-size: 12px; font-weight: 700; text-decoration: none; padding: 12px; border-radius: 9px; background: rgba(15,42,44,.8); border: 1px solid rgba(223,246,226,.2); }
.view-link:hover { background: #37554b; }
.primary { min-height: 42px; padding: 0 17px; border: 1px solid rgba(244,248,208,.8); border-radius: 11px; background: #eaf3c8; color: #21352d; font-size: 13px; font-weight: 800; box-shadow: 0 6px 22px rgba(7,32,35,.25); transition: transform .15s, background .15s; }
.primary:hover { transform: translateY(-2px); background: white; }
.primary:active { transform: translateY(0); }
.refresh-icon { display: inline-block; margin-right: 6px; font-size: 20px; vertical-align: -2px; line-height: 0; }
.world-card, .map-panel, .bottom-controls { position: absolute; z-index: 2; background: rgba(15,42,44,.88); border: 1px solid rgba(223,246,226,.19); box-shadow: 0 12px 36px rgba(7,29,31,.18); backdrop-filter: blur(14px); }
.world-card { top: 102px; left: 28px; width: 255px; border-radius: 15px; padding: 17px 18px 18px; }
.eyebrow, .map-title { color: #bbd2b8; font-weight: 800; font-size: 10px; letter-spacing: .17em; }
h1 { margin: 8px 0 8px; font-weight: 800; font-size: 23px; letter-spacing: -.05em; line-height: 1.12; }
.world-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #c9d9cd; font-weight: 600; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: #9db3a7; }
.divider { height: 1px; margin: 16px 0 15px; background: rgba(233,247,228,.13); }
.legend { display: flex; align-items: center; gap: 5px; color: #d5e4d5; font-size: 10px; font-weight: 600; white-space: nowrap; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; margin-left: 5px; }
.legend-dot:first-child { margin-left: 0; }
.meadow { background: #a7cf6a; } .coast { background: #f7de81; } .highland { background: #8ac9bf; }
.map-panel { right: 28px; bottom: 28px; border-radius: 13px; padding: 12px; width: 202px; }
.map-title { display: flex; justify-content: space-between; margin: 0 2px 10px; font-size: 9px; }
#position { color: #e8eee0; letter-spacing: 0; }
#minimap { width: 176px; height: 176px; display: block; image-rendering: pixelated; border: 1px solid rgba(223,246,226,.15); border-radius: 4px; background: #3c969c; cursor: crosshair; }
.bottom-controls { bottom: 28px; left: 28px; display: flex; align-items: center; gap: 11px; height: 43px; padding: 0 8px 0 16px; border-radius: 12px; color: #e2ebdf; font-size: 11px; font-weight: 700; }
.control-divider { width: 3px; height: 3px; border-radius: 50%; background: #9eb6aa; }
.zoom-buttons { display: flex; margin-left: 5px; gap: 3px; }
.zoom-buttons button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: rgba(225,242,218,.13); color: #eff7e8; font-size: 19px; line-height: 1; }
.zoom-buttons button:hover { background: rgba(225,242,218,.28); }
.loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; background: #1e5559; font-weight: 700; letter-spacing: -.02em; transition: opacity .5s; }
.loading.hidden { opacity: 0; pointer-events: none; }
@media (max-width: 650px) { .topbar { padding: 18px; height: 70px; } .alpha { display: none; } .brand { font-size: 19px; } .world-card { left: 16px; top: 78px; width: 200px; padding: 12px; } h1 { font-size: 19px; } .legend, .divider { display: none; } .map-panel { right: 15px; bottom: 76px; transform: scale(.72); transform-origin: bottom right; } .bottom-controls { left: 15px; bottom: 15px; } }