*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:17px;line-height:1.7;scroll-behavior:smooth}
body{background-color:#1C1610;color:#E8DDD0;font-family:'Space Grotesk',sans-serif;font-weight:400;overflow-x:hidden}

.hud-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100}
.hud-corner{position:fixed;display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity 400ms}
.hud-tl{top:20px;left:20px}
.hud-tr{top:20px;right:20px;text-align:right}
.hud-bl{bottom:20px;left:20px}
.hud-br{bottom:20px;right:20px;text-align:right}
.hud-label{font-family:'Space Mono',monospace;font-size:0.6rem;font-weight:700;color:#8A7B6A;letter-spacing:0.12em;text-transform:uppercase}
.hud-value{font-family:'Space Mono',monospace;font-size:0.75rem;font-weight:400;color:#D4A574}

.zone{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.zone-atmosphere{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}

.zone-hero{flex-direction:column;gap:16px}
.ringworld-arc{position:absolute;top:35%;left:50%;transform:translateX(-50%);width:0;height:200px;border-top:2px solid #D4A574;border-radius:50%;z-index:1;transition:width 1200ms ease-out}
.ringworld-arc.visible{width:100vw}

.hero-content{position:relative;z-index:2;text-align:center}
.hero-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:5rem;letter-spacing:0.03em;color:#E8DDD0;opacity:0;transform:translateY(30px);transition:opacity 500ms ease-out,transform 500ms ease-out}
.hero-title.visible{opacity:1;transform:translateY(0)}
.hero-subtitle{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:2rem;color:#D4A574;opacity:0;transition:opacity 400ms ease-out 200ms}
.hero-subtitle.visible{opacity:1}
.hero-tagline{font-family:'Space Mono',monospace;font-size:0.75rem;color:#8A7B6A;letter-spacing:0.08em;margin-top:24px;opacity:0;transition:opacity 400ms ease-out 400ms}
.hero-tagline.visible{opacity:1}

.scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity 600ms ease-out}
.scroll-indicator.visible{opacity:1}
.scroll-text{font-family:'Space Mono',monospace;font-size:0.6rem;letter-spacing:0.15em;color:#8A7B6A}
.scroll-arrow{animation:scrollBounce 2s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.zone-content{position:relative;z-index:2;max-width:680px;padding:80px 24px;opacity:0;transform:translateY(40px);transition:opacity 600ms ease-out,transform 600ms ease-out}
.zone-content.visible{opacity:1;transform:translateY(0)}

.zone-marker{font-family:'Space Mono',monospace;font-size:0.65rem;font-weight:700;color:#C47D3E;letter-spacing:0.12em;text-transform:uppercase;display:block;margin-bottom:12px}
.zone-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.6rem;letter-spacing:0.03em;color:#E8DDD0;margin-bottom:20px;line-height:1.2}
.zone-body{color:#B8A898;font-size:1rem;margin-bottom:32px}

.zone-data{display:flex;gap:32px;flex-wrap:wrap}
.data-point{display:flex;flex-direction:column;gap:4px}
.data-label{font-family:'Space Mono',monospace;font-size:0.6rem;font-weight:700;color:#8A7B6A;letter-spacing:0.1em;text-transform:uppercase}
.data-value{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;color:#D4A574}

.zone-terracotta .zone-marker{color:#C47D3E}
.zone-moss .zone-marker{color:#5E8C61}
.zone-copper .zone-marker{color:#D4A574}
.zone-amethyst .zone-marker{color:#8B5E7A}
.zone-spire .zone-marker{color:#4A7B8C}

.zone-moss .data-value{color:#5E8C61}
.zone-amethyst .data-value{color:#8B5E7A}
.zone-spire .data-value{color:#4A7B8C}

.zone-ending{flex-direction:column;gap:32px;min-height:60vh}
.ending-content{position:relative;z-index:2;text-align:center}
.ending-text{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:1.4rem;color:#B8A898;line-height:1.8;margin-bottom:40px}
.ending-arc{width:200px;height:100px;border-top:2px solid #D4A574;border-radius:50%;margin:0 auto 32px;opacity:0.4}
.ending-domain{font-family:'Space Mono',monospace;font-size:0.7rem;color:#8A7B6A;letter-spacing:0.12em}

@media(max-width:768px){
    .hero-title{font-size:2.8rem}
    .zone-title{font-size:1.8rem}
    .zone-data{gap:20px}
    .hud-corner{display:none}
}