:root {
  --bg: #0b0f16; --glass: rgba(10, 16, 26, 0.72); --line: rgba(140, 200, 255, 0.18);
  --txt: #e9eef5; --mut: #9aa8ba; --acc: #ff7a2f; --cyan: #5fd7ff; --ok: #46f2a0; --bad: #ff5040; --gold: #ffc83a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--txt); font-family: Inter, "Segoe UI", sans-serif; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, .badge { font-family: "Exo 2", Inter, sans-serif; }

#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s; z-index: 50; }

/* Yuklanish */
#loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 120%, #7a2f14 0%, #1c0c07 45%, #050507 100%); }
#loading h1 { margin: 12px 0 0; letter-spacing: .08em; font-size: clamp(20px, 3.4vw, 38px); }
#loading p { color: var(--mut); margin: 0; max-width: 560px; }
.logo .planet { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f3a06a, #b2461c 45%, #3a1206 80%);
  box-shadow: 0 0 60px rgba(255, 110, 40, .45), inset -18px -14px 30px rgba(0,0,0,.6); animation: spin 8s linear infinite; }
@keyframes spin { from { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(-8deg) brightness(1.1); } to { filter: hue-rotate(0deg); } }
.loadTrack { width: min(420px, 80vw); height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; margin-top: 10px; }
#loadBar { height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--gold)); transition: width .3s; }
#loadLabel { color: var(--mut); font-size: 12px; }

/* Menyu */
#menu { position: fixed; inset: 0; z-index: 40; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 5vh 16px;
  background: linear-gradient(180deg, rgba(5,5,8,.55), rgba(20,8,4,.35) 60%, rgba(5,5,8,.8)); backdrop-filter: blur(2px); }
.menuInner { width: min(980px, 100%); }
header { text-align: center; margin-bottom: 22px; }
.badge { display: inline-block; font-size: 12px; letter-spacing: .3em; color: var(--acc); border: 1px solid rgba(255,122,47,.5); padding: 4px 12px; border-radius: 20px; }
header h1 { font-size: clamp(26px, 4.6vw, 56px); margin: 12px 0 4px; letter-spacing: .04em; text-shadow: 0 4px 30px rgba(255,100,30,.4); }
.sub { color: #d5c4b8; margin: 0; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mode { text-align: left; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 6px; transition: .2s; backdrop-filter: blur(10px); }
.mode:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 10px 40px rgba(95,215,255,.15); }
.mode.hot { border-color: rgba(255,122,47,.6); background: linear-gradient(160deg, rgba(255,122,47,.18), var(--glass)); }
.mode .ic { font-size: 26px; } .mode b { font-size: 18px; font-family: "Exo 2"; } .mode small { color: var(--mut); line-height: 1.4; }
#resumeRow { text-align: center; margin: 16px 0 0; }
.settings { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: center; margin: 22px 0 10px; background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.settings label { display: flex; align-items: center; gap: 10px; color: var(--mut); font-size: 14px; }
select, input[type=range] { accent-color: var(--acc); }
select { background: #111823; color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.lang-switch { display: inline-flex; gap: 4px; }
button.lang { background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: 5px 10px; border-radius: 8px; font-weight: 700; font-size: 13px; }
button.lang.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.xrRow { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 14px; }
#vrSlot { position: relative; min-height: 46px; min-width: 150px; }
#vrSlot > button, #vrSlot > a { position: static !important; transform: none !important; left: auto !important; bottom: auto !important; width: auto !important; padding: 12px 20px !important; border-radius: 10px !important; font: 700 14px Inter, sans-serif !important; }
button.primary { background: linear-gradient(135deg, var(--acc), #e2551a); border: 0; padding: 11px 20px; border-radius: 10px; font-weight: 700; color: #fff; box-shadow: 0 6px 20px rgba(255,100,30,.3); }
button.primary.danger { background: linear-gradient(135deg, #ff4a3a, #b3160c); }
button.ghost { background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: 11px 18px; border-radius: 10px; font-weight: 600; }
.hint { text-align: center; color: var(--mut); font-size: 13px; max-width: 640px; margin: 10px auto; }
.controls { background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; margin-top: 10px; }
.controls summary { cursor: pointer; font-weight: 700; } .controls p { color: #c9d4e2; line-height: 1.8; font-size: 14px; }
.credits { text-align: center; color: #7d8898; font-size: 11px; margin-top: 16px; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
#hud > * { position: absolute; }
#topbar { top: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; }
#topbar > div { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 7px 14px; font-size: 14px; backdrop-filter: blur(8px); white-space: nowrap; }
.loc { font-weight: 600; } .loc .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 8px; box-shadow: 0 0 8px var(--ok); }
.clock { font-family: Consolas, monospace; color: var(--gold); }
#tasks { top: 70px; left: 16px; width: min(330px, 42vw); background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; backdrop-filter: blur(8px); }
#tasks h3 { margin: 0 0 6px; font-size: 14px; color: var(--acc); letter-spacing: .06em; text-transform: uppercase; }
#taskList { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 1.45; }
#taskList li { padding: 3px 0 3px 22px; position: relative; color: var(--mut); }
#taskList li::before { content: '○'; position: absolute; left: 2px; }
#taskList li.done { color: #6f7e90; text-decoration: line-through; } #taskList li.done::before { content: '✓'; color: var(--ok); }
#taskList li.cur { color: #fff; font-weight: 600; } #taskList li.cur::before { content: '▶'; color: var(--gold); }
#taskList li.info { padding-left: 0; } #taskList li.info::before { content: ''; }
#tasks.collapsed #taskList li:not(.cur) { display: none; }
#minimap { top: 16px; right: 16px; width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(255,190,150,.35); box-shadow: 0 0 30px rgba(0,0,0,.5); }
#suitBox { bottom: 18px; left: 16px; width: 230px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 13px; backdrop-filter: blur(8px); }
#suitBox.outside { border-color: rgba(255,122,47,.6); }
#suitBox .row { display: flex; justify-content: space-between; padding: 2px 0; color: var(--mut); }
#suitBox .v { color: #fff; } #suitBox .v.ok { color: var(--ok); }
.track { height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; margin: 3px 0 5px; }
.bar { height: 100%; background: linear-gradient(90deg, #2bd98f, var(--ok)); transition: width .3s; } .bar.low { background: var(--bad); animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: .4; } }
#hudButtons { bottom: 18px; right: 16px; display: flex; gap: 8px; pointer-events: auto; align-items: center; }
#hudButtons > button { background: var(--glass); border: 1px solid var(--line); border-radius: 10px; width: 40px; height: 36px; font-size: 16px; }
#prompt { bottom: 22%; left: 50%; transform: translateX(-50%) scale(.9); background: rgba(10,16,26,.85); border: 1px solid var(--cyan); padding: 9px 18px; border-radius: 30px; font-weight: 600; opacity: 0; transition: .2s; white-space: nowrap; box-shadow: 0 0 24px rgba(95,215,255,.25); }
#prompt.on { opacity: 1; transform: translateX(-50%) scale(1); }
#alert { top: 64px; left: 50%; transform: translateX(-50%); padding: 10px 22px; border-radius: 10px; font-weight: 700; opacity: 0; transition: .3s; max-width: 90vw; text-align: center; }
#alert.on { opacity: 1; } #alert.warn { background: rgba(200, 30, 20, .88); animation: blink 1s infinite; } #alert.info { background: rgba(20, 120, 80, .88); }
#toast { top: 118px; left: 50%; transform: translateX(-50%) translateY(-10px); background: rgba(10,16,26,.9); border: 1px solid var(--gold); padding: 8px 18px; border-radius: 10px; opacity: 0; transition: .3s; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translateX(-50%); }
#progress { bottom: 30%; left: 50%; transform: translateX(-50%); width: 320px; text-align: center; opacity: 0; transition: .2s; }
#progress.on { opacity: 1; } #progressBar { height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--ok)); }
#progress .track { height: 8px; } #progressLabel { text-shadow: 0 1px 4px #000; font-weight: 600; }
#clickHint { top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 12px; opacity: 0; }

#caption { position: fixed; bottom: 8%; left: 50%; transform: translateX(-50%); z-index: 25; max-width: min(900px, 90vw); text-align: center; font-size: clamp(16px, 2vw, 24px); font-weight: 600;
  background: rgba(5,8,14,.6); padding: 14px 26px; border-radius: 14px; border-left: 4px solid var(--acc); opacity: 0; transition: opacity .8s; pointer-events: none; backdrop-filter: blur(6px); }
#caption.on { opacity: 1; }

/* Panel */
#panel, #bigmap, #final { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.35); }
.card { width: min(760px, 100%); max-height: 90vh; overflow-y: auto; background: linear-gradient(170deg, rgba(18,26,40,.96), rgba(9,13,20,.96)); border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.card h2 { margin: 2px 0 12px; color: #fff; font-size: 26px; }
#panelKicker { color: var(--acc); letter-spacing: .15em; text-transform: uppercase; font-size: 11px; font-weight: 700; }
#panelBody { color: #d2dbe7; line-height: 1.6; font-size: 15px; }
#panelBody ul { padding-left: 20px; } #panelBody li { margin: 5px 0; } #panelBody b { color: #fff; }
#panelBody canvas { width: 100%; border-radius: 10px; margin: 6px 0; }
#panelQuiz { margin-top: 14px; background: rgba(95,215,255,.06); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
#panelQuiz h4 { margin: 0 0 6px; color: var(--cyan); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
#panelQuiz .q { margin: 0 0 8px; font-weight: 600; } .opts { display: grid; gap: 6px; }
.opts button { text-align: left; background: rgba(255,255,255,.05); border: 1px solid var(--line); padding: 9px 12px; border-radius: 8px; }
.opts button:hover:not(:disabled) { border-color: var(--cyan); }
.opts button.right { background: rgba(70,242,160,.2); border-color: var(--ok); } .opts button.wrong { background: rgba(255,80,64,.2); border-color: var(--bad); }
.res.ok { color: var(--ok); font-weight: 700; } .res.bad { color: var(--bad); font-weight: 700; }
#panelActions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; }
#panelActions > button:not(.primary) { background: rgba(255,255,255,.07); border: 1px solid var(--line); padding: 11px 18px; border-radius: 10px; }
.legend { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--mut); margin-bottom: 8px; }
.legend span { width: 14px; height: 8px; border-radius: 2px; display: inline-block; margin-left: 10px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 20px; }
.fact .fk { font-size: 13px; color: #fff; font-weight: 600; margin-bottom: 3px; }
.fb { position: relative; height: 18px; background: rgba(255,255,255,.05); border-radius: 4px; margin: 3px 0; }
.fb span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.fb em { position: absolute; right: 6px; top: 0; font-size: 11px; font-style: normal; line-height: 18px; color: #fff; text-shadow: 0 1px 2px #000; }
span.mars { background: linear-gradient(90deg, #b8441a, #ff8a4a); } span.earth { background: linear-gradient(90deg, #1f5fae, #4ab8ff); }
#bigmap canvas { width: min(640px, 80vh, 100%); aspect-ratio: 1; border-radius: 12px; display: block; margin: 0 auto; }
#bigmap .card { width: auto; } #bigmap h3 { margin: 0 0 10px; text-align: center; }
#final .card { text-align: center; } #final .big { font-size: 64px; } #finalStats { color: #d2dbe7; font-size: 16px; line-height: 1.7; }

@media (max-width: 720px) {
  #tasks { width: 58vw; font-size: 12px; } #minimap { width: 120px; height: 120px; } #suitBox { width: 170px; font-size: 11px; }
  #topbar { flex-wrap: wrap; justify-content: center; width: 92vw; } #topbar > div { font-size: 12px; padding: 5px 9px; }
}