/* The immersive stage and the floating HUD (composition follows the supplied reference interface). */
.app { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; inset: 0; background: var(--bg); overflow: hidden; }
.atmos { position: absolute; inset: 0; background:
  radial-gradient(60% 55% at 22% 78%, var(--atmos-1), transparent 70%),
  radial-gradient(50% 45% at 82% 24%, var(--atmos-2), transparent 70%),
  radial-gradient(70% 60% at 60% 110%, var(--atmos-3), transparent 70%),
  linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline-offset: -4px; }
#sky:active { cursor: grabbing; }
.gridlines { position: absolute; inset: 0; pointer-events: none; opacity: var(--grid-op, 0.6);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; background-position: center; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.5) 100%); }
:root[data-theme='light'] .vignette { background: radial-gradient(120% 100% at 50% 45%, transparent 60%, rgba(6, 60, 48, 0.2) 100%); }

.prov-badge { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 10px); display: flex; align-items: center; gap: 8px; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); pointer-events: none; white-space: nowrap; }
:root[dir='rtl'] .prov-badge { transform: translateX(50%); }
.prov-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
:root[lang='ar'] .prov-badge { letter-spacing: 0; text-transform: none; }

/* ---- generic circular HUD button (reference: outlined circles with a small caption) ---- */
.circ { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); color: var(--text); transition: background 0.2s, color 0.2s, transform 0.2s var(--ease), border-color 0.2s; }
.circ .ic { width: 1.15rem; height: 1.15rem; }
button:hover > .circ, .circ:hover { background: var(--glass-hi); border-color: var(--text); }
button:active > .circ { transform: scale(0.93); }
button.on > .circ, button[aria-pressed='true'] > .circ { background: var(--hi-bg); color: var(--hi-text); border-color: transparent; }
.lbl { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
:root[data-theme='light'] .lbl { text-shadow: 0 1px 6px rgba(255, 255, 255, 0.7); }

/* ---- top left ---- */
.tl { position: absolute; top: calc(var(--safe-t) + var(--pad)); inset-inline-start: calc(var(--safe-l) + var(--pad)); z-index: 20; display: grid; gap: 10px; max-width: min(520px, 60vw); }
.back { display: flex; align-items: center; gap: 14px; text-align: start; }
.back-text { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
:root[lang='ar'] .back-text { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }
:root[dir='rtl'] .back .ic { transform: scaleX(-1); }
.crumb { padding-inline-start: 54px; display: grid; gap: 2px; min-height: 40px; }
.crumb .name { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
:root[data-theme='light'] .crumb .name { text-shadow: none; }
.crumb .sub { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }

/* ---- left toolbar ---- */
.toolbar { position: absolute; inset-inline-start: calc(var(--safe-l) + var(--pad)); top: calc(var(--safe-t) + var(--pad) + 112px); z-index: 20; display: flex; flex-direction: column; gap: 14px; }
.tool { display: flex; align-items: center; gap: 14px; text-align: start; }
.tool-gap { height: 6px; }
:root[data-level='beginner'] .toolbar { gap: 12px; }
:root[data-level='beginner'] .tool .circ { width: 52px; height: 52px; }
:root[data-level='beginner'] .tool .circ .ic { width: 1.5rem; height: 1.5rem; }
:root[data-level='beginner'] .tool .lbl { font-size: 0.8125rem; letter-spacing: 0.1em; }
:root[data-level='beginner'] .tool[data-act='settings'] { display: none; }

/* ---- top right: assistant pill + minimap (reference: "2 New Messages" + map card) ---- */
.tr { position: absolute; top: calc(var(--safe-t) + var(--pad)); inset-inline-end: calc(var(--safe-r) + var(--pad)); z-index: 20; display: grid; gap: 12px; justify-items: end; }
.msg-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--glass); border: 1px solid var(--line-soft); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); color: var(--text); font-size: 0.75rem; letter-spacing: 0.08em; font-weight: 600; border-radius: 4px; transition: background 0.2s; }
.msg-pill:hover { background: var(--glass-hi); }
.msg-pill .ic { width: 1.05rem; height: 1.05rem; }
.minimap { width: clamp(200px, 21vw, 300px); border: 3px solid var(--text); border-radius: 3px; background: var(--glass-strong); overflow: hidden; box-shadow: var(--shadow); transition: width 0.45s var(--ease), height 0.45s var(--ease); }
.mm-frame { position: relative; aspect-ratio: 2 / 1; background: #02100d; }
#mm-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.mm-expand { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; display: grid; place-items: center; color: #F4FFF9; background: rgba(0, 0, 0, 0.35); border-radius: 4px; }
.mm-expand .ic { width: 0.95rem; height: 0.95rem; }
.mm-read { position: absolute; bottom: 5px; inset-inline-start: 8px; font: 0.625rem var(--font-mono); color: #F4FFF9; opacity: 0.85; text-shadow: 0 1px 3px #000; pointer-events: none; direction: ltr; }
.mm-btn { width: 100%; padding: 12px 8px; background: var(--hi-bg); color: var(--hi-text); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.24em; text-align: center; }
.mm-btn:hover { filter: brightness(0.92); }
.minimap.big { position: fixed; inset: calc(var(--safe-t) + 70px) calc(var(--safe-r) + var(--pad)) calc(var(--safe-b) + 90px) calc(var(--safe-l) + var(--pad)); width: auto; z-index: 60; display: flex; flex-direction: column; }
.minimap.big .mm-frame { flex: 1; aspect-ratio: auto; }

/* ---- bottom left: infrared lights + sliders (reference: lights icon + thin level bars) ---- */
.bl { position: absolute; inset-inline-start: calc(var(--safe-l) + var(--pad)); bottom: calc(var(--safe-b) + var(--pad) + 84px); z-index: 20; display: grid; gap: 14px; }
.lights { display: flex; align-items: center; gap: 14px; text-align: start; }
.sliders { display: grid; gap: 12px; width: min(250px, 42vw); }
.sl { display: grid; grid-template-columns: 76px 1fr 38px; align-items: center; gap: 10px; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
:root[data-theme='light'] .sl { text-shadow: none; }
:root[lang='ar'] .sl { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }
.sl b { font: 600 0.6875rem var(--font-mono); text-align: end; color: var(--muted); text-shadow: none; }
.sl input[type='range'], .range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; }
.sl input[type='range']::-webkit-slider-runnable-track, .range::-webkit-slider-runnable-track { height: 2px; background: var(--line); border-radius: 2px; }
.sl input[type='range']::-moz-range-track, .range::-moz-range-track { height: 2px; background: var(--line); }
.sl input[type='range']::-webkit-slider-thumb, .range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 0; margin-top: -6px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 18%, transparent); }
.sl input[type='range']::-moz-range-thumb, .range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 0; }
.bands { grid-template-columns: 76px 1fr 38px; }
.dots { display: flex; gap: 8px; align-items: center; }
.dot-btn { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--text); position: relative; }
.dot-btn::after { content: ''; position: absolute; inset: -10px; }
.dot-btn[aria-pressed='true'] { background: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
.dot-btn.off { opacity: 0.35; border-style: dashed; }

/* ---- bottom: big-number stats (reference: Energy / Humidity / Temp ...) ---- */
.stats { position: absolute; inset-inline-start: calc(var(--safe-l) + var(--pad)); bottom: calc(var(--safe-b) + var(--pad)); display: flex; gap: clamp(14px, 2.2vw, 30px); z-index: 19; }
.stat { display: grid; gap: 2px; min-width: 0; }
.stat .k { font-size: 0.5938rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
:root[data-theme='light'] .stat .v { text-shadow: none; }
.stat .v.mono { font-size: 1.05rem; }
.coord-line { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 6px); font-size: 0.625rem; letter-spacing: 0.08em; color: var(--muted); z-index: 18; white-space: nowrap; pointer-events: none; }

/* ---- timeline (collapsible) ---- */
.timeline { position: absolute; inset-inline-start: calc(var(--safe-l) + var(--pad) + 400px); inset-inline-end: calc(var(--safe-r) + var(--pad) + 260px); margin-inline: auto; width: auto; max-width: 620px; bottom: calc(var(--safe-b) + var(--pad) + 8px); z-index: 22; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); overflow: hidden; }
.tl-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; text-align: start; }
:root[lang='ar'] .tl-toggle { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; }
.tl-toggle .ic { width: 1rem; height: 1rem; transition: transform 0.3s var(--ease); }
.tl-toggle[aria-expanded='false'] .ic { transform: rotate(-180deg); }
.tl-sum { margin-inline-start: auto; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); text-transform: none; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-body { padding: 0 14px 12px; display: grid; gap: 10px; }
.timeline[data-collapsed='true'] .tl-body { display: none; }
.tl-row { display: flex; align-items: center; gap: 8px; }
.tl-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--glass); transition: background 0.2s; flex: none; }
.tl-btn:hover:not(:disabled) { background: var(--glass-hi); }
.tl-btn.play { background: var(--hi-bg); color: var(--hi-text); border-color: transparent; width: 44px; height: 44px; }
.tl-btn .ic { width: 1.05rem; height: 1.05rem; }
.visits { flex: 1; display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; scroll-snap-type: x proximity; }
.visits::-webkit-scrollbar { display: none; }
.visit { flex: none; min-width: 64px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-soft); font-size: 0.6875rem; text-align: center; display: grid; gap: 1px; scroll-snap-align: center; transition: background 0.2s, color 0.2s; }
.visit b { font-size: 0.75rem; }
.visit small { color: var(--muted); font-size: 0.625rem; }
.visit[aria-current='true'] { background: var(--hi-bg); color: var(--hi-text); border-color: transparent; }
.visit[aria-current='true'] small { color: inherit; opacity: 0.75; }
.visit.planned { border-style: dashed; opacity: 0.7; }
.tl-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---- rotation dial (reference: ticked circular camera control) ---- */
.dial-wrap { position: absolute; inset-inline-end: calc(var(--safe-r) + var(--pad)); bottom: calc(var(--safe-b) + var(--pad)); z-index: 20; display: flex; align-items: flex-end; gap: 8px; }
.dial { position: relative; width: clamp(150px, 15vw, 196px); aspect-ratio: 1; touch-action: none; cursor: grab; color: var(--text); border-radius: 50%; }
.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; pointer-events: none; }
:root[lang='ar'] .dial-center { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.dial-center small { font-size: 0.625rem; color: var(--muted); letter-spacing: 0.04em; }
.zoomx { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); font: 600 0.6875rem var(--font-mono); align-self: center; transition: background 0.2s; direction: ltr; }
.zoomx:hover { background: var(--glass-hi); }
.dial-reset { position: absolute; top: -6px; inset-inline-end: -6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--glass); }
.dial-reset .ic { width: 1rem; height: 1rem; }
.dial-reset:hover { background: var(--glass-hi); }

/* ---- object labels on the sky ---- */
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tlabel { position: absolute; left: 0; top: 0; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); white-space: nowrap; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); opacity: 0.85; will-change: transform; }
:root[data-theme='light'] .tlabel { text-shadow: 0 0 6px rgba(255, 255, 255, 0.9); }
:root[lang='ar'] .tlabel { letter-spacing: 0; text-transform: none; font-size: 0.75rem; }
.tlabel.hover { opacity: 1; font-weight: 800; }
.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.pin span { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border: 1.5px solid var(--text); border-radius: 50%; }
.pin span::before, .pin span::after { content: ''; position: absolute; background: var(--text); }
.pin span::before { left: 50%; top: -9px; bottom: -9px; width: 1px; }
.pin span::after { top: 50%; left: -9px; right: -9px; height: 1px; }

/* ---- selection: corner handles + label + stacked context menu (reference: "Project Daedalus") ---- */
.sel { position: absolute; left: 0; top: 0; z-index: 15; width: 0; height: 0; will-change: transform; }
.sel-box { position: absolute; width: var(--sz, 84px); height: var(--sz, 84px); left: calc(var(--sz, 84px) / -2); top: calc(var(--sz, 84px) / -2); border: 1px solid color-mix(in srgb, var(--text) 55%, transparent); animation: sel-in 0.5s var(--ease); pointer-events: none; }
@keyframes sel-in { from { transform: scale(1.5); opacity: 0; } }
.sel-box .h { position: absolute; width: 7px; height: 7px; background: var(--text); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.h.tl { left: -4px; top: -4px; } .h.tc { left: calc(50% - 3.5px); top: -4px; } .h.tr { right: -4px; top: -4px; }
.h.ml { left: -4px; top: calc(50% - 3.5px); } .h.mr { right: -4px; top: calc(50% - 3.5px); }
.h.bl { left: -4px; bottom: -4px; } .h.bc { left: calc(50% - 3.5px); bottom: -4px; } .h.br { right: -4px; bottom: -4px; }
.sel-label { position: absolute; top: calc(var(--sz, 84px) / -2); inset-inline-end: calc(var(--sz, 84px) / 2 + 22px); width: 230px; text-align: end; pointer-events: none; animation: fade-in 0.5s var(--ease) 0.12s both; }
.sel-label .n { font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
:root[lang='ar'] .sel-label .n { letter-spacing: 0; text-transform: none; font-size: 1.05rem; font-weight: 700; }
.sel-label .d { font-size: 0.8125rem; color: var(--text); opacity: 0.85; margin-top: 4px; line-height: 1.35; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
:root[data-theme='light'] .sel-label .n, :root[data-theme='light'] .sel-label .d { text-shadow: 0 0 8px rgba(255, 255, 255, 0.9); }
.sel-label .chip { margin-top: 6px; background: var(--glass); }
.ctx { position: absolute; top: calc(var(--sz, 84px) / -2); inset-inline-start: calc(var(--sz, 84px) / 2 + 22px); width: 216px; display: grid; gap: 1px; background: transparent; animation: ctx-in 0.4s var(--ease) 0.1s both; }
@keyframes ctx-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes fade-in { from { opacity: 0; } }
:root[dir='rtl'] .ctx { animation-name: ctx-in-rtl; }
@keyframes ctx-in-rtl { from { opacity: 0; transform: translateX(10px); } }
.ctx button { width: 100%; text-align: start; padding: 13px 16px; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--text) 18%, transparent); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transition: background 0.2s, color 0.2s; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
:root[lang='ar'] .ctx button { font-size: 0.875rem; letter-spacing: 0; text-transform: none; }
.ctx button:hover, .ctx button:focus-visible, .ctx button.hi { background: var(--hi-bg); color: var(--hi-text); }
.ctx button:disabled { opacity: 0.5; }
.ctx button .ic { width: 0.95rem; height: 0.95rem; }
:root[data-theme='light'] .ctx button { background: color-mix(in srgb, #fff 55%, transparent); }
:root[data-theme='light'] .ctx button:hover { background: var(--hi-bg); }
.sel[data-flip='1'] .sel-label { inset-inline-end: auto; inset-inline-start: calc(var(--sz, 84px) / 2 + 22px); text-align: start; top: calc(var(--sz, 84px) / 2 + 6px); }
.sel[data-flip='1'] .ctx { inset-inline-start: auto; inset-inline-end: calc(var(--sz, 84px) / 2 + 22px); }

.webgl-fail { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; background: var(--bg); z-index: 5; }

:root[data-level="intermediate"] .timeline { inset-inline-start: calc(var(--safe-l) + var(--pad) + 500px); }
:root[data-level="advanced"] .timeline { inset-inline-start: calc(var(--safe-l) + var(--pad) + 620px); }

:root[data-dock="1"] .minimap:not(.big) { width: 170px; } :root[data-dock="1"] .minimap:not(.big) .mm-btn { display: none; } :root[data-dock="1"] .minimap:not(.big) .mm-read { display: none; }

.tr-row { display: flex; align-items: center; gap: 8px; }
.tr-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-soft); background: var(--glass); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); transition: background 0.2s; }
.tr-btn:hover { background: var(--glass-hi); } .tr-btn.on { background: var(--hi-bg); color: var(--hi-text); } .tr-btn .ic { width: 1.05rem; height: 1.05rem; }
:root[data-level="beginner"] .tr-btn[data-act="settings"] { display: none; }
@media (min-width: 721px) { .tool[data-act="assistant"], .tool[data-act="settings"], .tool[data-act="help"], .tool-gap { display: none !important; } }
@media (max-width: 720px) { .tr-btn { display: none; } }

:root[data-theme='light'] .ctx button:hover, :root[data-theme='light'] .ctx button:focus-visible, :root[data-theme='light'] .ctx button.hi { background: var(--hi-bg); color: var(--hi-text); }
.tl-row, .visits { direction: ltr; }
/* real star names (Hipparcos positions, IAU names) */
.star-labels { z-index: 0; }
.slabel { position: absolute; left: 0; top: 0; font-size: 0.6875rem; color: var(--muted); white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); opacity: 0.8; will-change: transform; }
:root[data-theme='light'] .slabel { text-shadow: 0 0 6px rgba(255, 255, 255, 0.9); }