:root{
  --bg:#05070f; --panel:#0c1222; --panel2:#111a30; --line:#1f2b48;
  --text:#e9eefc; --muted:#8e9bbd; --cyan:#5ef2ff; --amber:#ffbf4d; --pink:#ff5c9a; --green:#5dffa8; --violet:#a98bff;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif}
body{display:flex;justify-content:center;align-items:center;min-height:100dvh;background:radial-gradient(ellipse at 50% 30%,#0b1430 0%,#000 70%)}
.phone{position:relative;width:100%;max-width:420px;height:100dvh;max-height:880px;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
@media(min-width:500px){.phone{border-radius:34px;border:1px solid #1d2747;box-shadow:0 30px 80px #000c,0 0 0 8px #0a0f1d}}
#stars{position:absolute;inset:0;z-index:0;pointer-events:none}
.screen{position:absolute;inset:0;z-index:1;display:none;flex-direction:column;padding:18px 18px 0}
.screen.on{display:flex;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-size:44px;letter-spacing:.18em;font-weight:800}
h2{font-size:20px;font-weight:700}
h3{font-size:15px;font-weight:700}
.muted{color:var(--muted)}
.small{font-size:12px}
.tiny{font-size:10.5px}
.btn{appearance:none;border:0;border-radius:16px;padding:15px 18px;font-size:16px;font-weight:700;color:#04121a;background:var(--cyan);cursor:pointer;width:100%;transition:transform .1s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.amber{background:var(--amber)}
.btn.pink{background:var(--pink);color:#fff}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.pill.real{color:var(--green);border-color:#1f5a3f;background:#0b2219}
.pill.train{color:var(--violet);border-color:#3c3170;background:#151033}
.pill.sim{color:var(--amber);border-color:#5f4720;background:#21180a}
/* intro */
#intro{justify-content:space-between;padding-bottom:28px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-top:20px}
.hero p{max-width:310px}
canvas.earth{width:100%;aspect-ratio:1/1;max-height:46dvh}
input.txt{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:14px;font-size:17px;outline:none}
input.txt:focus{border-color:var(--cyan)}
/* top bar */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#123a55,#0b1a33);display:grid;place-items:center;border:1px solid #23527a}
.xp{height:6px;background:var(--panel2);border-radius:9px;overflow:hidden}
.xp>i{display:block;height:100%;width:10%;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .6s}
/* tabs */
.tabs{position:absolute;left:0;right:0;bottom:0;z-index:5;display:none;background:#070b18f2;border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.tabs.on{display:flex}
.tab{flex:1;background:none;border:0;color:var(--muted);font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:4px 0}
.tab svg{width:22px;height:22px}
.tab.on{color:var(--cyan)}
.scroll{overflow-y:auto;padding-bottom:90px;flex:1;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
/* transmission */
.tx{position:relative;overflow:hidden}
.tx::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#5ef2ff18,transparent);animation:sweep 2.4s infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);display:inline-block;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
/* review */
#review{padding-top:14px}
.hud{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.timer{height:5px;background:var(--panel2);border-radius:9px;overflow:hidden;margin:6px 0 10px}
.timer>i{display:block;height:100%;width:100%;background:var(--cyan);transition:width .2s linear}
.mission{font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--cyan);text-transform:uppercase}
.viewer{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#000;touch-action:manipulation}
.viewer canvas{display:block;width:100%;aspect-ratio:1/1;cursor:crosshair}
.viewer .lbl{position:absolute;left:10px;top:10px;font-size:11px;font-weight:700;background:#000a;padding:4px 8px;border-radius:8px;letter-spacing:.03em}
.viewer .lbl2{position:absolute;right:10px;top:10px;font-size:11px;background:#000a;padding:4px 8px;border-radius:8px;color:var(--muted)}
.epochs{display:flex;gap:6px;justify-content:center;margin:10px 0}
.epochs span{font-size:11px;padding:4px 8px;border-radius:8px;background:var(--panel);color:var(--muted);border:1px solid var(--line)}
.epochs span.on{color:#04121a;background:var(--cyan);border-color:var(--cyan)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.gadgets{display:flex;gap:8px;margin-top:10px}
.gadget{flex:1;font-size:11.5px;padding:9px 6px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.gadget.on{border-color:var(--violet);color:var(--violet);background:#151033}
.gadget.locked{opacity:.45}
.combo{font-weight:800;color:var(--amber)}
.toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.8);font-size:26px;font-weight:900;opacity:0;pointer-events:none;z-index:20;text-shadow:0 4px 20px #000;transition:all .35s;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,-60%) scale(1)}
/* reveal */
.overlay{position:absolute;inset:0;z-index:30;background:#000c;display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(4px)}
.overlay.on{display:flex}
.flip{width:100%;perspective:1200px}
.flip .inner{position:relative;transition:transform .8s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;height:min(560px,calc(100dvh - 40px))}
.flip.go .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:24px;border:1px solid var(--line);padding:18px;display:flex;flex-direction:column}
.face.front{background:repeating-linear-gradient(45deg,#0c1530,#0c1530 10px,#0e1a3a 10px,#0e1a3a 20px);align-items:center;justify-content:center;gap:10px;text-align:center}
.face.back{transform:rotateY(180deg);background:linear-gradient(180deg,#101a35,#0a0f20);overflow-y:auto}
.creature{width:100%;aspect-ratio:2.4/1;border-radius:16px;margin:10px 0;background:#000}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.fact{background:#0b1226;border:1px solid var(--line);border-radius:12px;padding:8px}
.fact b{display:block;font-size:15px}
.fact span{font-size:10.5px;color:var(--muted)}
.unknown .face.back{background:linear-gradient(180deg,#2a1a05,#120b02);border-color:#6b4c1b}
/* sky map */
canvas.sky{width:100%;aspect-ratio:2/1;border-radius:16px;border:1px solid var(--line);background:#02040a}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.list .item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.list .item:last-child{border:0}
.bar{height:6px;border-radius:9px;background:var(--panel2);overflow:hidden;flex:1}
.bar i{display:block;height:100%;background:var(--amber)}
/* science */
.targets{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.targets button{font-size:12px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.targets button.on{border-color:var(--cyan);color:var(--cyan)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
label.f{font-size:11px;color:var(--muted);display:block;margin-bottom:4px}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{flex:1;border:0;background:none;color:var(--muted);padding:7px;border-radius:9px;font-size:12px;cursor:pointer}
.seg button.on{background:var(--panel2);color:var(--text)}
.note{font-size:11.5px;color:var(--muted);line-height:1.45}
.summary-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.reward{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:#0b1226;border:1px solid var(--line);margin-top:8px}
.reward .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:22px;background:#151033}

/* ================= COMPUTADOR (telas largas) ================= */
.layout{display:flex;align-items:center;justify-content:center;gap:48px;width:100%;min-height:100dvh}
.painel{display:none}
.atalhos{display:none}
@media(min-width:1000px){
  body{padding:24px}
  .layout{min-height:calc(100dvh - 48px)}
  .phone{height:calc(100dvh - 48px);max-height:900px;flex:0 0 420px}
  .painel{display:flex;flex-direction:column;gap:18px;max-width:520px;color:var(--text)}
  .painel .selo{align-self:flex-start}
  .painel h1{font-size:64px;line-height:1}
  .painel .slogan{font-size:20px;color:var(--muted);line-height:1.4}
  .painel .bloco{background:#0c1222cc;border:1px solid var(--line);border-radius:18px;padding:16px 18px}
  .painel .bloco h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
  .painel .bloco p{font-size:15px;line-height:1.5;color:#c9d3ee}
  .painel .numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .painel .numeros div{background:#0c1222cc;border:1px solid var(--line);border-radius:14px;padding:12px}
  .painel .numeros b{display:block;font-size:22px}
  .painel .numeros span{font-size:12px;color:var(--muted)}
  .atalhos{display:block;font-size:12px;color:var(--muted)}
  .atalhos kbd{display:inline-block;min-width:22px;text-align:center;padding:2px 6px;margin:0 2px;border-radius:6px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-family:inherit}
  .viewer canvas{cursor:crosshair}
  .btn:hover{filter:brightness(1.08)}
  .gadget:hover,.targets button:hover,.tab:hover{border-color:var(--cyan)}
}
@media(min-width:1000px) and (max-height:760px){ .painel h1{font-size:48px} .painel .bloco p{font-size:14px} }

/* ================= MODO IMERSIVO ================= */
#imersivo{background:#02040a}
#imCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block;z-index:1}
#imVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.imTop{position:absolute;left:12px;right:12px;top:12px;z-index:3}
.imTop .seg{background:#0c1222e6}
.imTop .gadget{flex:0 0 auto;padding:7px 10px;background:#0c1222e6}
.imBottom{position:absolute;left:12px;right:12px;bottom:80px;z-index:3;background:#0c1222e6;max-height:34%;overflow-y:auto}
.imExit{display:none}
#imersivo.vr{position:fixed;inset:0;z-index:100}
#imersivo.vr .imTop,#imersivo.vr .imBottom{display:none}
#imersivo.vr .imExit{display:block;position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:5;background:#000a;color:#fff;border:1px solid #fff3;border-radius:10px;padding:6px 12px;font-size:12px}
.tabs .tab{font-size:10px}