* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
    background: #000;
    font-family: 'Rajdhani', sans-serif;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

#scene-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

#scene-container canvas { display: block; }

/* ========== LOADING SCREEN ========== */
#loading-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #0a0a0f;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1.5s ease;
}

#loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

#loading-inner {
    text-align: center;
}

#loading-atlas {
    margin-bottom: 30px;
    animation: atlasFloat 3s ease-in-out infinite;
}

@keyframes atlasFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

#loading-text {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 8px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 20px;
}

#loading-bar-outer {
    width: 200px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin: 0 auto 30px;
    overflow: hidden;
}

#loading-bar-inner {
    width: 0%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    transition: width 0.3s;
}

#loading-subtitle {
    font-family: 'Geo', sans-serif;
    font-size: 28px;
    letter-spacing: 12px;
    color: rgba(255,255,255,0.7);
}

/* ========== HUD ========== */
#hud {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none;
}

/* Compass */
#compass-bar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 28px;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#compass-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 2px;
    transition: transform 0.3s;
}

.compass-mark[data-dir="N"],
.compass-mark[data-dir="S"],
.compass-mark[data-dir="E"],
.compass-mark[data-dir="W"] {
    color: rgba(255,255,255,0.6);
    font-weight: 700;
}

/* Reticle */
#reticle {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
    transition: transform 0.2s;
}

/* Left HUD */
#hud-left {
    position: absolute;
    top: 60px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.3);
    padding: 5px 10px;
    border-left: 2px solid rgba(255,255,255,0.15);
}

.status-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.status-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.4);
}

.status-bar-outer {
    width: 120px;
    height: 4px;
    background: rgba(255,255,255,0.08);
}

.status-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #3399ff, #66bbff);
    transition: width 1s;
}

.status-bar-inner.life {
    background: linear-gradient(90deg, #44cc44, #88ff88);
}

.status-bar-inner.hazard {
    background: linear-gradient(90deg, #ffaa00, #ffdd44);
}

/* Right HUD */
#hud-right {
    position: absolute;
    top: 60px;
    right: 20px;
}

#planet-info-box {
    background: rgba(0,0,0,0.3);
    border-right: 2px solid rgba(255,255,255,0.15);
    padding: 10px 14px;
    text-align: right;
}

#planet-name-display {
    font-family: 'Geo', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 3px;
    margin-bottom: 4px;
}

#planet-biome-display,
#planet-weather-display,
#planet-sentinels-display {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
}

/* Bottom Left - Resources */
#hud-bottom-left {
    position: absolute;
    bottom: 60px;
    left: 20px;
    display: flex;
    gap: 6px;
}

.resource-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.3);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.06);
    transition: border-color 0.3s;
}

.resource-slot.active {
    border-color: rgba(255,255,255,0.2);
}

.resource-icon {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.15);
}

#resource-1 .resource-icon { color: #55cc55; border-color: rgba(85,204,85,0.3); }
#resource-2 .resource-icon { color: #cc8844; border-color: rgba(204,136,68,0.3); }
#resource-3 .resource-icon { color: #ffdd44; border-color: rgba(255,221,68,0.3); }

.resource-name {
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 1px;
    font-family: 'Share Tech Mono', monospace;
}

.resource-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

/* Bottom Center */
#hud-bottom-center {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

#mode-display {
    font-family: 'Geo', sans-serif;
    font-size: 12px;
    letter-spacing: 6px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 4px;
}

#prompt-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.2);
    letter-spacing: 1px;
    transition: opacity 2s;
}

#prompt-text.faded { opacity: 0; }

/* Bottom Right */
#hud-bottom-right {
    position: absolute;
    bottom: 60px;
    right: 20px;
    text-align: right;
}

#units-display, #discoveries-display {
    background: rgba(0,0,0,0.3);
    padding: 5px 12px;
    margin-bottom: 4px;
    border-right: 2px solid rgba(255,255,255,0.1);
}

.units-label, .disc-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.3);
}

.units-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: #ffdd44;
    text-shadow: 0 0 8px rgba(255,221,68,0.3);
}

.disc-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px;
    color: #55ccff;
    text-shadow: 0 0 8px rgba(85,204,255,0.3);
}

/* Scan Overlay */
#scan-overlay {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 20;
}

#scan-overlay.hidden { display: none; }

#scan-frame {
    width: 320px;
    padding: 20px;
    position: relative;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    animation: scanAppear 0.4s ease-out;
}

@keyframes scanAppear {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

#scan-corners { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }

.scan-corner {
    position: absolute;
    width: 12px; height: 12px;
    border-color: rgba(255,255,255,0.5);
    border-style: solid;
}

.scan-corner.tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.scan-corner.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.scan-corner.bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.scan-corner.br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }

#scan-type {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.35);
    margin-bottom: 4px;
}

#scan-obj-name {
    font-family: 'Geo', sans-serif;
    font-size: 20px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 3px;
    margin-bottom: 10px;
}

#scan-details-list {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    line-height: 1.8;
}

#scan-progress-bar {
    margin-top: 10px;
    height: 2px;
    background: rgba(255,255,255,0.1);
}

#scan-progress-fill {
    height: 100%;
    width: 0%;
    background: rgba(255,255,255,0.5);
    transition: width 0.1s linear;
}

/* Discovery Notification */
#discovery-notification {
    position: fixed;
    top: 45%;
    right: 30px;
    display: flex;
    align-items: stretch;
    gap: 0;
    animation: discSlideIn 0.6s ease-out;
    z-index: 25;
}

#discovery-notification.hidden { display: none; }

@keyframes discSlideIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

#disc-notif-line {
    width: 2px;
    background: rgba(255,255,255,0.5);
}

#disc-notif-content {
    padding: 10px 16px;
    background: rgba(0,0,0,0.4);
}

#disc-notif-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.35);
}

#disc-notif-name {
    font-family: 'Geo', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 2px;
    margin: 2px 0;
}

#disc-notif-reward {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: #ffdd44;
}

/* Vignette */
#vignette {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.5) 100%);
    z-index: 5;
}

/* Film grain */
#film-grain {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 6;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    animation: grainShift 0.3s steps(3) infinite;
}

@keyframes grainShift {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-2px, 1px); }
    66% { transform: translate(1px, -2px); }
    100% { transform: translate(0, 0); }
}

/* Footer */
#footer-link {
    position: fixed;
    bottom: 6px;
    right: 16px;
    z-index: 20;
}

#footer-link a {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    color: rgba(255,255,255,0.1);
    text-decoration: none;
    letter-spacing: 1px;
    pointer-events: all;
    transition: color 0.3s;
}

#footer-link a:hover { color: rgba(255,255,255,0.35); }

/* Mobile */
@media (max-width: 768px) {
    #compass-bar { width: 200px; }
    .status-bar-outer { width: 80px; }
    #planet-info-box { display: none; }
    .resource-detail { display: none; }
    .resource-slot { padding: 4px 6px; }
    #hud-bottom-left { bottom: 50px; }
    #prompt-text { font-size: 8px; }
    #scan-frame { width: 240px; padding: 14px; }
}