:root {
    --bg: #000008;
    --surface: rgba(10,14,26,0.92);
    --border: rgba(255,255,255,0.07);
    --text: #f1f5f9;
    --muted: #64748b;
    --gold: #facc15;
    --blue: #60a5fa;
    --teal: #2dd4bf;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); }
#phet-stage {
    position: absolute; top: 0; left: 0;
    width: 1280px; height: 720px;
    background: var(--bg);
    overflow: hidden; transform-origin: 0 0;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
    touch-action: none;
}
#starCanvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ── NAV ── */
.ps-nav {
    position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.4rem;
    background: rgba(0,0,8,0.88); backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
}
.nav-logo a { text-decoration: none; font-weight: 800; font-size: 1rem; color: var(--text); display: flex; align-items: center; gap: 0.4rem; }
.nav-logo em { color: #a78bfa; font-style: normal; }
.nav-title { font-size: 0.88rem; color: var(--muted); font-weight: 600; letter-spacing: 0.5px; }
.nav-back { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; border-radius: 50px; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 0.78rem; transition: 0.2s; }
.nav-back:hover { border-color: #a78bfa; color: #a78bfa; }

/* ── CONTROL BAR ── */
.ctrl-bar {
    position: absolute; top: 52px; left: 0; right: 0; z-index: 90;
    display: flex; align-items: center; gap: 1.2rem; padding: 0.55rem 1.4rem;
    background: rgba(0,0,8,0.82); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.ctrl-group { display: flex; align-items: center; gap: 0.5rem; }
.ctrl-group label { font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.ctrl-group.btns { gap: 0.3rem; }
.ctrl-num { font-family: 'JetBrains Mono'; font-size: 0.85rem; color: var(--gold); min-width: 28px; }
.ps-slider {
    -webkit-appearance: none; width: 110px; height: 4px;
    appearance: none; width: 110px; height: 4px;
    background: rgba(255,255,255,0.1); border-radius: 4px; outline: none; cursor: pointer;
}
.ps-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: var(--gold); cursor: pointer; box-shadow: 0 0 8px rgba(250,204,21,0.6);
}
.cb-btn {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.75rem; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: var(--muted);
    font-family: 'Outfit'; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.18s;
    white-space: nowrap;
}
.cb-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }
.cb-btn.toggled { border-color: rgba(250,204,21,0.5); background: rgba(250,204,21,0.08); color: var(--gold); }

/* ── SIM AREA ── */
.sim-wrap {
    position: absolute; top: 100px; bottom: 64px; left: 0; right: 0; z-index: 10;
    overflow: hidden; cursor: grab;
}
.sim-wrap:active { cursor: grabbing; }
#simCanvas { display: block; width: 100%; height: 100%; }

/* ── INFO PANEL ── */
.info-panel {
    position: absolute; right: 16px; top: 12px; width: 280px;
    background: rgba(8,12,28,0.97); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px; padding: 1.5rem; z-index: 50;
    backdrop-filter: blur(20px); box-shadow: 0 8px 40px rgba(0,0,0,0.7);
    display: none; flex-direction: column; align-items: center; gap: 0.5rem;
    animation: slideIn 0.3s ease;
}
.info-panel.visible { display: flex; }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.info-close {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    color: var(--muted); font-size: 0.9rem; cursor: pointer; transition: 0.2s;
}
.info-close:hover { color: var(--text); }
.info-icon { font-size: 3.5rem; filter: drop-shadow(0 0 20px rgba(255,255,255,0.3)); }
.info-panel h2 { font-size: 1.5rem; font-weight: 900; color: white; text-align: center; }
.info-badge {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 0.2rem 0.8rem; border-radius: 50px;
    background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.3); color: #a78bfa;
}
.info-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; margin-top: 0.4rem; }
.fact-box {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 10px; padding: 0.55rem 0.6rem; text-align: center;
}
.fact-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.fact-val { font-family: 'JetBrains Mono'; font-size: 0.78rem; color: white; font-weight: 700; margin-top: 2px; }
.info-desc { font-size: 0.78rem; color: #94a3b8; line-height: 1.7; text-align: center; margin-top: 0.3rem; }

/* ── HOVER LABEL ── */
.hover-label {
    position: absolute; background: rgba(0,0,8,0.9); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; padding: 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 600;
    pointer-events: none; display: none; white-space: nowrap; z-index: 40;
    backdrop-filter: blur(8px);
}

/* ── PLANET STRIP ── */
.planet-strip {
    position: absolute; bottom: 0; left: 0; right: 0; height: 64px; z-index: 90;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: rgba(0,0,8,0.92); border-top: 1px solid var(--border);
    padding: 0 1rem; backdrop-filter: blur(14px); overflow-x: auto;
}
.planet-strip::-webkit-scrollbar { display: none; }
.strip-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: transparent; border: 1px solid transparent;
    border-radius: 10px; padding: 4px 8px; cursor: pointer; transition: 0.18s; flex-shrink: 0;
}
.strip-btn:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); }
.strip-btn.active { border-color: rgba(250,204,21,0.5); background: rgba(250,204,21,0.06); }
.strip-emoji { font-size: 1.4rem; }
.strip-name { font-size: 0.6rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }