:root {
    --bg-color: #02050A;
    --text-color: #00E5FF;
    --accent-color: #00E5FF;
    --border-color: rgba(0, 229, 255, 0.4);
    --glow: 0 0 20px rgba(0, 229, 255, 0.4);
    --panel-bg: rgba(0, 10, 20, 0.7);
}
.kingdom-theme {
    --bg-color: #1a0b2e; --text-color: #FFD700; --accent-color: #FFD700;
    --border-color: rgba(255, 215, 0, 0.4); --glow: 0 0 20px rgba(255, 215, 0, 0.4);
    --panel-bg: rgba(20, 5, 30, 0.8);
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Courier New', monospace; user-select: none; }
body { background: #000; color: var(--text-color); overflow: hidden; height: 100vh; transition: 0.5s; }

/* STARTUP */
#startup-screen { position: fixed; inset: 0; z-index: 9999; cursor: pointer; display: flex; justify-content: center; align-items: center; background: #000; transition: opacity 1s; }
.startup-img { width: 100%; height: 100%; object-fit: cover; animation: pulse 4s infinite alternate; }

#canvas-container { position: absolute; inset: 0; z-index: 1; }

/* TOP HUD */
.hud-top { position: absolute; top: 0; width: 100%; z-index: 10; display: flex; justify-content: space-between; align-items: flex-start; padding: 15px; font-size: 0.75rem; text-transform: uppercase; text-shadow: var(--glow); }
.top-banner { height: 45px; filter: drop-shadow(0 0 10px var(--accent-color)); }
.hud-right { text-align: right; }
.status-live { color: #00FF00; animation: pulse 2s infinite; }

/* CENTER PROFILE ICON */
.center-profile {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 5; pointer-events: none;
}
.profile-ring {
    width: 70px; height: 70px; border-radius: 50%;
    border: 2px solid var(--accent-color); background: var(--panel-bg);
    display: flex; justify-content: center; align-items: center;
    box-shadow: var(--glow); font-size: 2rem; color: var(--accent-color);
}

/* FLOATING PANELS */
.holo-panel { position: absolute; z-index: 4; width: 140px; height: 180px; background: var(--panel-bg); border: 1px solid var(--border-color); box-shadow: var(--glow); backdrop-filter: blur(5px); border-radius: 8px; overflow: hidden; transition: 0.5s; display: flex; justify-content: center; align-items: center; }
.panel-left { left: -10px; bottom: 180px; transform: rotateY(20deg) rotateZ(-5deg); }
.panel-right { right: 10px; bottom: 200px; transform: rotateY(-20deg) rotateZ(5deg); width: 150px; height: 150px; }
.panel-inner h3 { font-size: 1rem; letter-spacing: 2px; text-shadow: var(--glow); }
.panel-inner.gold h3 { color: #FFD700; }

/* BOTTOM HUD */
.bottom-hud { position: absolute; bottom: 150px; left: 10px; width: calc(100% - 20px); display: flex; align-items: flex-end; z-index: 10; gap: 15px; }
.agent-avatar { text-align: center; font-size: 0.65rem; text-transform: uppercase; text-shadow: var(--glow); }
.avatar-ring { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--accent-color); box-shadow: var(--glow); display: flex; justify-content: center; align-items: center; background: var(--panel-bg); margin-bottom: 5px; font-size: 1.5rem; font-weight: bold; color: var(--accent-color); }
.telemetry-hud { flex: 1; background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; backdrop-filter: blur(10px); font-size: 0.7rem; text-transform: uppercase; box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.1); }
.tel-row { display: flex; justify-content: space-between; margin-bottom: 4px; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 2px; }
.tel-row:last-child { border-bottom: none; margin-bottom: 0; }

/* BOTTOM DOCK */
.bottom-dock { position: absolute; bottom: 75px; width: 100%; z-index: 10; display: flex; justify-content: space-around; padding: 0 10px; }
.dock-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.dock-circle { width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); border: 2px solid var(--accent-color); color: var(--accent-color); display: flex; justify-content: center; align-items: center; text-align: center; font-size: 0.55rem; font-weight: bold; box-shadow: var(--glow); text-transform: uppercase; transition: 0.2s; line-height: 1.2; padding: 5px; }
.dock-circle:active { transform: scale(0.9); }
.dock-circle.hybrid { border-color: #00FF00; color: #00FF00; box-shadow: 0 0 20px rgba(0,255,0,0.5); }

/* COMMAND BAR */
.command-bar { position: absolute; bottom: 15px; left: 0; width: 100%; z-index: 10; display: flex; gap: 10px; padding: 0 15px; }
.command-bar input { flex: 1; background: rgba(0,0,0,0.8); border: 1px solid var(--border-color); color: #fff; padding: 12px; border-radius: 8px; outline: none; font-family: inherit; box-shadow: var(--glow); }
.undo-btn { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid var(--border-color); padding: 0 20px; border-radius: 8px; cursor: pointer; font-weight: bold; }

/* PLANET LABELS (Supports Multi-line) */
.planet-label {
    position: absolute; color: #fff; font-size: 0.65rem; text-transform: uppercase;
    text-shadow: 0 0 8px var(--accent-color); transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8); padding: 4px 6px; border-radius: 4px; border: 1px solid var(--border-color);
    white-space: pre-line; text-align: center; line-height: 1.1; pointer-events: none;
}

@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } }
.hidden { display: none !important; }