/* Concepto: la vista 3D ocupa toda la pantalla; los controles son paneles de vidrio ahumado pegados a los bordes.
   Es un juego de un solo aspecto (atardecer marciano), por eso no hay variante clara. */
:root{
  --bg:#150d0c;
  --panel:linear-gradient(155deg,rgba(24,66,104,.86),rgba(12,32,62,.88));
  --line:rgba(110,220,255,.34);
  --line-strong:rgba(140,238,255,.75);
  --fg:#eaf7ff;
  --muted:#a3c6da;
  --sand:#ffb661;
  --scan:#5ee7ff;
  --warn:#ff8a5c;
  --ok:#8fe3a4;
  --font-d:'Oxanium','Segoe UI',system-ui,sans-serif;
  --font-m:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html{box-sizing:border-box;height:100%}
body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-d);overflow:hidden;-webkit-user-select:none;user-select:none}
button{font-family:inherit;color:inherit}
#app{position:relative;width:100%;height:100%;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#gl.drag{cursor:grabbing}

#hud{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:10px 16px;pointer-events:none;transition:opacity .8s}
#hud.off{opacity:0}
.glass{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 18px rgba(0,8,24,.45),inset 0 1px 0 rgba(150,230,255,.22),0 0 12px rgba(94,231,255,.10);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);pointer-events:auto}
.glass::before{content:"";position:absolute;left:-1px;top:-1px;width:12px;height:12px;border-left:2px solid var(--scan);border-top:2px solid var(--scan);border-top-left-radius:6px;pointer-events:none}
.lbl{font:600 9.5px/1 var(--font-m);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.val{font:500 13px/1.2 var(--font-m);font-variant-numeric:tabular-nums}

/* barra superior */
#top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 10px;flex-wrap:wrap}
#tl{display:flex;flex-direction:column;gap:6px}
#energy{width:min(230px,calc(100vw - 32px))}
#energy .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.meter{height:7px;background:rgba(255,255,255,.1);position:relative}
.meter i{position:absolute;inset:0 auto 0 0;width:50%;background:var(--scan);transition:width .3s,background .3s}
.meter i.low{background:var(--warn)}
#energy{display:grid;grid-template-columns:18px 1fr auto 22px;align-items:center;gap:5px 8px;padding:7px 9px;cursor:pointer}
#energy .sub{grid-column:2/5;font:500 10.5px var(--font-m);color:var(--muted)}
.meter.cg i{background:linear-gradient(90deg,#ffb661,#ffe27a)!important;box-shadow:0 0 8px rgba(255,182,97,.5)}
.meter.cg i.full{background:linear-gradient(90deg,#ff5d3a,#ff9a5c)!important}
#energy .meter{flex:1;min-width:60px}
#enTxt,#cgTxt{min-width:42px;text-align:right;font-size:12px}
.tag{font:600 9px var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-left:4px}
.mini{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--scan);font:700 12px/1 var(--font-m);cursor:pointer;padding:0}
#rtools{position:relative;display:flex}
.qm{font:700 15px/16px var(--font-m);width:16px;text-align:center;color:var(--scan)}
#bTools .dot{position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:#ffe27a;box-shadow:0 0 6px #ffe27a;display:none}
#bTools.lit .dot{display:block}
#toolPop{position:absolute;right:0;bottom:calc(100% + 8px);display:none;flex-direction:column;gap:6px;padding:8px;z-index:7}
#toolPop.on{display:flex}
.sqb.wide{width:auto;min-width:130px;height:38px;padding:0 12px;display:flex;justify-content:flex-start;gap:8px;font:600 12.5px var(--font-d);color:var(--fg);white-space:nowrap}
.sqb.wide svg{color:var(--scan)}
#clock{padding:6px 11px;display:flex;justify-content:space-between;gap:10px;align-items:center}
#tc{display:flex;flex-direction:column;gap:6px;align-items:center;flex:1 1 200px;min-width:0;order:3}
#missionStrip{max-width:min(420px,100%);padding:7px 12px;cursor:pointer;display:flex;gap:10px;align-items:center;text-align:left}
#missionStrip span{font:500 12px/1.3 var(--font-d)}
#runInfo{display:none;padding:8px 14px;font:600 13px/1.2 var(--font-m);color:var(--scan);border-color:var(--scan)}
#runInfo.on{display:block}
#tr{display:flex;gap:6px;align-items:flex-start}
#nav{display:flex;gap:12px;padding:7px 11px;align-items:center}
#nav .col{display:flex;flex-direction:column;gap:3px}
#tiltWarn{color:var(--warn,#E3BB32)}
#tiltWarn.hi{color:var(--bad,#D15B63)}
#promptX{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;border:1px solid var(--scan);background:rgba(8,26,48,.96);color:var(--fg);font:700 12px var(--font-d);line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
#compassIcon{width:34px;height:34px;flex:none}
.tiltg{display:flex;flex-direction:column;align-items:center;gap:2px}
.tiltg svg{width:40px;height:40px}
.tiltg .val.mid{color:var(--sand)}
.tiltg .val.hi{color:#ff6b55}
.tiltg .val{font-size:11px}
.sqb{width:40px;height:40px;display:grid;place-items:center;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 2px 10px rgba(0,8,24,.4),inset 0 1px 0 rgba(150,230,255,.2);color:var(--scan);cursor:pointer;pointer-events:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sqb:hover{border-color:var(--line-strong)}
.sqb.on{border-color:var(--sand);color:var(--sand)}
.sqb:disabled{opacity:.4;cursor:default}
button:focus-visible{outline:2px solid var(--scan);outline-offset:2px}

/* zona media */
#mid{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:0}
#lookPad{display:grid;grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px);gap:3px;pointer-events:none}
#lookPad button{pointer-events:auto}
#lookPad .sqb{width:38px;height:38px}
#rtools{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#prompt{position:absolute;overflow:visible!important;left:50%;top:50%;transform:translate(-50%,-50%);display:none;pointer-events:auto;padding:12px 22px;background:linear-gradient(155deg,rgba(24,66,104,.92),rgba(12,32,62,.94));border-radius:8px;box-shadow:0 0 18px rgba(94,231,255,.35);border:1px solid var(--scan);color:var(--fg);font:600 14px/1.2 var(--font-d);letter-spacing:.05em;cursor:pointer;border-radius:3px;box-shadow:0 0 24px rgba(105,217,232,.25);white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
#prompt.on{display:block}
#prompt small{display:block;font:500 10px var(--font-m);color:var(--scan);letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
/* Todos los menús llegan hasta arriba y conservan el hueco inferior de los mandos. */
#sheet{position:absolute;left:0;right:0;margin:0 auto;top:env(safe-area-inset-top,0px);bottom:calc(var(--botH,140px) + 22px);width:min(400px,calc(100% - 24px));min-height:0;overflow:auto;padding:12px 13px 13px;display:none;flex-direction:column;z-index:6}
#sheet.on{display:flex}
#sheet > *{flex-shrink:0}
#sheet h3{margin:0 0 10px;font:700 14px/1 var(--font-d);letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:8px}
#sheet h3 button{background:transparent;border:1px solid var(--line);width:28px;height:28px;cursor:pointer;font:500 15px/1 var(--font-m)}
/* El título y la X siguen visibles al bajar por el contenido. */
#sheet > h3{position:sticky;top:-12px;z-index:5;margin:-12px -13px 0;padding:12px 13px 10px;background:linear-gradient(155deg,#184268,#0c203e);box-shadow:0 1px 0 var(--line);overflow-wrap:anywhere}
#sheet > h3 button,#sheet > h3 .sheet-tools{flex:none}
#sheet.on > .tabs-dock{margin-top:auto}
#sheet p{margin:0 0 10px;font:400 12px/1.5 var(--font-d);color:var(--muted)}
#ficha{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(var(--botH,140px) + 22px);width:min(340px,calc(100% - 24px));padding:12px 13px;display:none;z-index:6}
#ficha.on{display:block}

/* parte inferior */
#bot{display:flex;flex-direction:column;align-items:center;gap:8px}
#botRow{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;width:100%;flex-wrap:wrap}
#quick{padding:6px 8px;display:flex;gap:6px;align-items:flex-start}
.qb{display:flex;flex-direction:column;align-items:center;gap:3px}
.qb .act{padding:0;width:42px;height:38px;justify-content:center}
.chipbtn{background:transparent;border:1px solid var(--line);color:var(--sand);font:500 10.5px var(--font-m);padding:2px 5px;cursor:pointer;min-width:42px}
.chipbtn:hover{border-color:var(--sand)}
#qMode{align-self:stretch;display:flex;flex-direction:column;gap:3px;margin-left:4px;border-left:1px solid var(--line);padding-left:8px;justify-content:center}
#qMode button{background:transparent;border:1px solid var(--line);color:var(--muted);font:600 10px var(--font-m);letter-spacing:.06em;padding:5px 7px;cursor:pointer;text-transform:uppercase}
#qMode button.on{color:var(--sand);border-color:var(--sand)}
#qMode button.drv{color:#7dffb5;border-color:rgba(125,255,181,.6)}
#qMode button.drv.d1{color:#ffd36b;border-color:#ffd36b}
#qMode button.drv.d2{color:#ff7a5c;border-color:#ff7a5c}
#dock{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.act{position:relative;display:flex;align-items:center;gap:7px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);color:var(--fg);box-shadow:0 2px 10px rgba(0,8,24,.4),inset 0 1px 0 rgba(150,230,255,.2);font:600 11.5px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase;border-radius:3px;cursor:pointer;pointer-events:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.act:hover{border-color:var(--line-strong)}
.act.on{border-color:var(--sand);color:var(--sand)}
.act:disabled{opacity:.45;cursor:default}
.act svg{flex:none;color:var(--scan)}
#bStop{background:linear-gradient(155deg,#e2493a,#a8231c)!important;border-color:#ff9a8a!important;color:#fff}
#bStop svg{color:#fff}
.meter{border-radius:4px;overflow:hidden}
.meter i{background:linear-gradient(90deg,#2fd3ff,#7dffb5)!important;box-shadow:0 0 8px rgba(94,231,255,.6)}
.meter i.warnc{background:linear-gradient(90deg,#ff5d3a,#ffb661)!important}
.act .badge{position:absolute;right:-5px;top:-6px;background:var(--warn);color:#1a0d08;font:700 10px/1 var(--font-m);padding:3px 5px;border-radius:9px;display:none}
.act .badge.on{display:block}
#bStop{display:none;padding:13px 34px;background:#c0452a;border-color:#ff9a78;color:#fff;font-size:14px;letter-spacing:.14em;box-shadow:0 0 28px rgba(255,120,80,.35)}
#bStop.on{display:flex}

/* contenido de paneles */
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 12px/1.8 var(--font-m);color:var(--muted)}
.row b{color:var(--fg);font-weight:500}
.field{display:grid;grid-template-columns:1fr 84px;gap:6px;margin-bottom:8px}
select,input[type=number]{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--fg);font:500 13px var(--font-m);padding:8px;border-radius:2px;width:100%;box-sizing:border-box;user-select:text}
select option{background:#241714}
.btn{background:rgba(255,255,255,.05);border:1px solid var(--line-strong);color:var(--fg);font:600 12px/1 var(--font-d);letter-spacing:.08em;text-transform:uppercase;padding:10px 12px;cursor:pointer;border-radius:2px}
.btn:hover{border-color:var(--sand)}
.btn.pri{background:rgba(233,180,124,.16);border-color:var(--sand);color:var(--sand)}
.btn:disabled{opacity:.45;cursor:default}
.btns{display:flex;gap:6px;flex-wrap:wrap}
.btns .btn{flex:1}
ol.q{margin:0 0 10px;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;counter-reset:q}
ol.q li{counter-increment:q;display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);font:500 12.5px var(--font-m)}
ol.q li::before{content:counter(q);color:var(--muted)}
ol.q li.cur{border-color:var(--scan);color:var(--scan)}
ol.q li.done{opacity:.45}
ol.q li button{background:transparent;border:none;color:var(--muted);cursor:pointer;font:500 14px var(--font-m);padding:0 2px}
.empty{padding:14px;border:1px dashed var(--line);font:400 12px/1.5 var(--font-d);color:var(--muted);text-align:center;margin-bottom:10px}
.item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-top:1px solid var(--line)}
.item h4{margin:0;font:600 13px var(--font-d)}
.item p{grid-column:1;margin:0;font:400 11.5px/1.4 var(--font-d);color:var(--muted)}
.item .btn{grid-row:1/3;grid-column:2;align-self:center;padding:8px 10px}
.bar{height:6px;background:rgba(255,255,255,.1);margin:4px 0 8px}
.bar i{display:block;height:100%;background:var(--sand)}
input[type=range]{width:100%;accent-color:var(--sand)}

/* avisos centrados: fondo claro opaco, texto negro, botón para cerrar */
#modal{position:absolute;inset:0;z-index:30;display:none;place-items:center;background:rgba(8,4,3,.55);padding:16px}
#modal.on{display:grid}
#mbox{background:#f3ebe1;color:#14100d;max-width:420px;width:100%;padding:20px 22px 18px;border-radius:4px;box-shadow:0 12px 50px rgba(0,0,0,.6);user-select:text}
#mbox h2{margin:0 0 8px;font:700 19px/1.2 var(--font-d);letter-spacing:.02em}
#mbox p{margin:0 0 14px;font:400 14px/1.55 var(--font-d);color:#14100d;white-space:pre-line}
#mbox .btn{background:#14100d;color:#f3ebe1;border-color:#14100d;width:100%;padding:12px}
#mbox .btn:hover{background:#3a2a22}
#sheet textarea,#sheet input[type=text],#sheet input[type=email],#sheet input[type=password]{width:100%;box-sizing:border-box;background:rgba(4,18,36,.75);border:1px solid var(--line-strong);border-radius:6px;color:var(--fg);font:400 14px/1.45 var(--font-d);padding:10px;margin-top:6px;resize:vertical;user-select:text;-webkit-user-select:text}
#mOpts{display:none;flex-direction:column;gap:8px}
#mOpts.on{display:flex}
#mOpts button{padding:11px;font:600 14px var(--font-d);border:1px solid #14100d;background:transparent;color:#14100d;border-radius:3px;cursor:pointer;text-align:left}
#mOpts button.pri{background:#14100d;color:#f3ebe1}
#qalert{position:absolute;left:50%;top:max(84px,14%);transform:translate(-50%,-12px);z-index:32;width:min(420px,calc(100% - 32px));padding:12px 16px 12px 18px;border-radius:10px;background:linear-gradient(155deg,rgba(60,14,22,.95),rgba(32,8,14,.96));border:1px solid #D15B63;border-left:5px solid #D15B63;box-shadow:0 10px 30px rgba(0,0,0,.5);color:#fbe9ea;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;cursor:pointer}
#qalert.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#qalert b{display:block;font:700 14px/1.3 var(--font-d);margin-bottom:3px;color:#ffb3b8}
#qalert span{display:block;font:400 13px/1.45 var(--font-d);white-space:pre-line}

.resbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;align-items:center}
.resbar .rt{width:100%;font:600 10px var(--font-m);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rc{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 70%,transparent)}
.rc i{font-style:normal;color:var(--c);font-size:13px}
.rc b{font:700 14px var(--font-m);color:var(--fg)}
.rc small{font:500 10.5px var(--font-d);color:var(--muted)}
.stblk{margin:0 0 12px}
.strow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 4px;font:600 12.5px var(--font-d)}
.strow b{font:700 13px var(--font-m);color:var(--fg)}
.strow .off{color:var(--muted);font-weight:600}
.stsub{margin:4px 0 0;font:400 11.5px/1.45 var(--font-d);color:var(--muted)}
.stempty{font:400 11.5px var(--font-d);color:var(--muted)}
.rc u{text-decoration:none;font:600 10px var(--font-m);color:var(--c);opacity:.95;padding-left:4px;border-left:1px solid color-mix(in srgb,var(--c) 45%,transparent)}
.costs{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.cc{font:600 11px var(--font-d);padding:3px 8px;border-radius:999px;border:1px solid}
.cc.ok{color:#a8e39b;border-color:#77A56B;background:rgba(119,165,107,.15)}
.cc.no{color:#ffb3b8;border-color:#D15B63;background:rgba(209,91,99,.15)}

.volrow{display:flex;align-items:center;gap:8px;margin:8px 0}
.volrow .lbl{flex:1 1 90px}
.volrow .vbar{flex:1 1 60px;height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.volrow .vbar i{display:block;height:100%;background:linear-gradient(90deg,#1688B4,#5ee7ff)}
.volrow b{font:600 12px var(--font-m);color:var(--scan);min-width:40px;text-align:right}
.vb{width:40px;height:36px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel);color:var(--scan);font:700 18px/1 var(--font-d);cursor:pointer;flex:none}
#mbox.radio{background:#e6f3fb;border-left:6px solid #1b8fc9}
#mbox.radio h2{color:#0b4f7a}
#mbox.good h2{color:#0e5a2b}
#mbox.bad h2{color:#9a2a10}

#caption{position:absolute;left:0;right:0;bottom:22%;text-align:center;font:500 13px/1.6 var(--font-m);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 10px #000,0 0 3px #000;pointer-events:none;padding:0 16px;transition:opacity .6s;z-index:4;opacity:0}
#caption small{display:block;color:var(--sand);font-size:10.5px;letter-spacing:.24em;margin-bottom:4px}

#loading{position:absolute;inset:0;z-index:40;background:radial-gradient(ellipse at 50% 38%,#2a1511,var(--bg) 70%);display:grid;place-items:center;transition:opacity .8s;padding:16px}
#loading.hide{opacity:0;pointer-events:none}
.lbox{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(340px,100%);text-align:center}
.planet{width:128px;height:128px;border-radius:50%;background:radial-gradient(circle at 30% 28%,#f0a86e,#b9582f 52%,#3e180f 100%);box-shadow:0 0 70px rgba(232,120,70,.28),inset -14px -10px 30px rgba(20,6,4,.55)}
.lbox h1{margin:0;font:700 20px/1 var(--font-d);letter-spacing:.3em}
.lbar{width:100%;height:3px;background:rgba(255,255,255,.1)}
.lbar i{display:block;height:100%;width:0;background:var(--sand);transition:width .15s}
#loadMsg{font:400 11px/1.5 var(--font-m);color:var(--muted);letter-spacing:.06em;min-height:2.6em}

@media (max-width:640px){
  #hud{padding:8px 12px;gap:6px}
  #energy{width:min(170px,50vw);padding:5px 7px}
  #clock{padding:5px 9px}
  #missionStrip{padding:6px 10px;max-width:100%}
  #missionStrip span{font-size:11px}
  #nav{padding:6px 8px;gap:8px}
  .tiltg svg{width:30px;height:30px}
  .tiltg .lbl{display:none}
  .tiltg .val{font-size:10px}
  .act span.t{display:none}
  .act{padding:10px 9px}
  #dock{gap:4px}
  #bStop{padding:12px 26px}
  #lookPad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}
  #lookPad .sqb{width:34px;height:34px}
  #quick{padding:5px 6px}
  .qb .act{width:38px;height:36px}
}
@media (prefers-reduced-motion:reduce){#hud,#caption,#loading{transition:none}}

/* tutorial guiado */
#tour{position:absolute;inset:0;z-index:35;display:none}
#tour.on{display:block}
#tourRing{position:absolute;border:2px solid var(--sand);border-radius:6px;box-shadow:0 0 0 9999px rgba(8,4,3,.66);transition:all .25s;pointer-events:none}
#tourCard{position:absolute;background:#f3ebe1;color:#14100d;width:min(340px,calc(100% - 24px));padding:16px 18px 14px;border-radius:4px;box-shadow:0 12px 50px rgba(0,0,0,.6);user-select:text}
#tourCard h2{margin:0 0 6px;font:700 17px/1.2 var(--font-d)}
#tourCard p{margin:0 0 12px;font:400 13.5px/1.5 var(--font-d);white-space:pre-line}
#tourCard .cnt{font:500 10.5px var(--font-m);letter-spacing:.12em;color:#6b5a4d;margin-bottom:6px}
#tourCard .tb{display:flex;gap:8px}
#tourCard button{flex:1;padding:10px 8px;font:600 13px var(--font-d);border:1px solid #14100d;background:transparent;color:#14100d;border-radius:3px;cursor:pointer}
#tourCard button.pri{background:#14100d;color:#f3ebe1;flex:2}
#tourCard button.skip{border-color:transparent;text-decoration:underline;flex:1}
#tourHits{position:absolute;inset:0;display:none}
#tourHits .hit{position:absolute;border:2px dashed var(--sand);border-radius:6px;background:rgba(233,180,124,.10);cursor:pointer}
#tourHits .hit:hover{background:rgba(233,180,124,.28)}
#helpBar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;background:#f3ebe1;color:#14100d;width:min(300px,calc(100% - 24px));padding:14px 16px;border-radius:4px;box-shadow:0 12px 50px rgba(0,0,0,.6);text-align:center}
#helpBar h2{margin:0 0 4px;font:700 16px var(--font-d)}
#helpBar p{margin:0 0 10px;font:400 13px/1.4 var(--font-d)}
#helpBar .tb{display:flex;gap:8px}
#helpBar button{flex:1;padding:9px 6px;font:600 12.5px var(--font-d);border:1px solid #14100d;background:transparent;color:#14100d;border-radius:3px;cursor:pointer}
#helpBar button.pri{background:#14100d;color:#f3ebe1;flex:1.5}
.tourshow{display:flex !important}

/* columna derecha (menú en L) */
#mid{align-items:flex-end}
#rcol{display:flex;flex-direction:column;gap:6px;align-items:stretch;pointer-events:auto;margin-bottom:2px}
#rcol .act{justify-content:center}
#views{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,8,24,.4)}
.vbtn{display:flex;align-items:center;gap:8px;padding:9px 12px;background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--muted);font:600 11.5px/1 var(--font-d);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.vbtn:last-child{border-bottom:none}
.vbtn svg{color:currentColor;flex:none}
.vbtn.on{color:#06121f;background:var(--scan)}
#rtools{position:relative;display:flex}
#rtools{flex-direction:row!important;align-items:stretch!important}
#rtools .act{flex:1}
#toolPop{right:calc(100% + 8px)!important;bottom:0!important;top:auto!important}
/* ── Diálogos con los personajes ── */
#say{position:absolute;inset:0;z-index:37;display:none;background:linear-gradient(to top,rgba(4,10,20,.8) 36%,rgba(4,12,24,.32) 66%,rgba(4,12,24,.1))}
#say.on{display:block}
#say *{box-sizing:border-box}
#say .sfig{position:absolute;left:max(0px,env(safe-area-inset-left,0px));top:14px;width:38vw;max-height:calc(100% - 14px);overflow:hidden;pointer-events:none;filter:drop-shadow(0 4px 18px rgba(0,0,0,.65))}
#say .sfig img{display:block;width:100%;height:auto;animation:sfin .4s ease}
#say .stap{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;place-items:end center;padding-bottom:8px;font:600 11px var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:rgba(190,225,245,.45);pointer-events:none}
@keyframes sfin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
#say .sbox{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));background:linear-gradient(160deg,rgba(16,52,86,.96),rgba(8,22,42,.98));border-top:1px solid var(--scan);box-shadow:0 -10px 40px rgba(0,0,0,.55);animation:sbin .35s ease;max-height:76vh;overflow:auto;min-height:190px}
@keyframes sbin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#say .stx{padding-left:calc(38vw - 6px)}
#say .swho{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 5px}
#say .swho b{font:700 14px var(--font-d);color:var(--fg)}
#say .swho i{font:600 9.5px var(--font-m);font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:var(--scan)}
#say h3{margin:0 0 6px;font:700 15.5px/1.25 var(--font-d);color:var(--sand);text-wrap:balance}
#say p{margin:0;font:400 12.8px/1.5 var(--font-d);color:var(--fg);white-space:pre-line}
#say .sdots{display:flex;gap:6px;justify-content:center;margin:12px 0 2px}
#say .sdots span{width:8px;height:8px;border-radius:50%;background:rgba(150,200,230,.3);cursor:pointer;transition:background .2s,transform .2s}
#say .sdots span.on{background:var(--scan);transform:scale(1.25)}
#say .sbb{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:10px}
#say .sbb button{padding:9px 15px;border-radius:7px;border:1px solid var(--line-strong);background:rgba(10,30,54,.85);color:var(--fg);font:600 13px var(--font-d);cursor:pointer}
#say .sbb button.pri{background:var(--scan);border-color:var(--scan);color:#06243c}
#say .sbb .skip{border-color:transparent;color:var(--muted)}
@media (min-width:600px){#say .sfig{left:max(16px,env(safe-area-inset-left,0px));width:280px}#say .stx{padding-left:300px}#say .sbox{padding-right:28px;min-height:210px}#say p{font-size:14px}#say h3{font-size:17px}}
@media (max-height:560px){#say .sfig{width:min(28vw,280px)}#say .stx{padding-left:calc(28vw + 6px)}#say .sbox{min-height:150px}}
.vstate{margin:0 0 10px;font:500 13px/1.45 var(--font-d);color:var(--fg)}
.vbig{display:flex;flex-direction:column;gap:8px;margin:0 0 6px}
.vbig .btn{width:100%;text-align:left;padding:13px 14px;font:600 14px/1.25 var(--font-d);border-radius:9px}
.tabs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.tabs .tb{flex:1 1 auto;min-width:70px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 6px;border-radius:8px;border:1px solid var(--line);background:rgba(10,30,54,.6);color:var(--muted);font:600 11px var(--font-d);cursor:pointer}
.tabs .tb i{font-style:normal;font-size:15px;line-height:1}
.tabs .tb.on{border-color:var(--scan);background:color-mix(in srgb,var(--scan) 18%,transparent);color:var(--fg)}
.bth{float:left;width:88px;height:66px;object-fit:contain;margin:0 9px 2px 0}
.bimg{width:100%;max-width:320px;display:block;margin:2px auto 8px;border-radius:8px;background:linear-gradient(160deg,rgba(20,58,92,.55),rgba(8,22,42,.35));border:1px solid var(--line)}
@media (max-width:640px){
  .vbtn span{display:none}
  .vbtn{padding:11px 12px;justify-content:center}
  #rcol .act{padding:11px 12px}
}

#bJump i{font:600 10px var(--font-m);color:var(--muted);font-style:normal;margin-left:auto}
#bJump.ready{border-color:var(--scan);box-shadow:0 0 12px rgba(94,231,255,.45)}
#bJump.ready i{color:var(--scan)}
#aimHint,#goHint{position:absolute;left:50%;top:max(84px,13%);transform:translateX(-50%);z-index:31;display:none;align-items:center;gap:10px;flex-wrap:wrap;width:min(460px,calc(100% - 32px));padding:10px 14px;border-radius:10px;background:linear-gradient(155deg,rgba(10,52,84,.95),rgba(8,30,56,.96));border:1px solid var(--scan);color:var(--fg);box-shadow:0 8px 26px rgba(0,0,0,.45)}
#aimHint.on,#goHint.on{display:flex}
#aimHint b,#goHint b{font:700 14px var(--font-d);color:var(--scan)}
#aimHint span,#goHint span{flex:1 1 220px;font:400 12.5px/1.4 var(--font-d)}
#aimHint button,#goHint button{background:transparent;border:1px solid var(--line-strong);color:var(--fg);border-radius:6px;padding:6px 10px;cursor:pointer;font:600 12px var(--font-d)}
@media (max-width:640px){ #bJump i{font-size:9px} }


/* Clear resource flows and readable vehicle controls. */
.recipe-card{margin:12px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:rgba(5,24,43,.32)}
.recipe-card h4{margin:0 0 12px;font:600 15px/1.35 var(--font-d)}
.recipe-flow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.recipe-flow>div{display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid;border-radius:9px;font:600 14px/1.4 var(--font-d)}
.recipe-consume{color:#ffb4b8;background:rgba(180,50,65,.16);border-color:#b96670!important}
.recipe-produce{color:#acf1bb;background:rgba(45,150,90,.16);border-color:#5fbd89!important}
.recipe-flow strong{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.recipe-card p{margin:10px 0;color:var(--muted);font-size:12px}
.recipe-card .btns{display:flex;gap:8px}.recipe-card .btns .btn{flex:1;min-height:44px;border-radius:8px}
#sheet[data-panel="veh"] .vstate{display:flex;flex-direction:column;gap:8px;padding:16px;margin:12px 0 16px;border:1px solid #65d6eb;border-left:4px solid #65d6eb;border-radius:12px;background:linear-gradient(120deg,rgba(35,132,163,.35),rgba(11,35,60,.8));box-shadow:0 0 18px rgba(63,202,226,.12)}
.vstate-label{font:600 11px var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:#8fe9f8}
.vstate strong{font:600 17px/1.45 var(--font-d);color:#f0fbff}.vstate-meta{font:400 12px/1.5 var(--font-d);color:var(--muted)}
#sheet[data-panel="veh"] .btn{border-radius:9px;min-height:44px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#sheet[data-panel="veh"] .vbig .btn{padding:14px 16px;text-transform:none;letter-spacing:.02em;background:linear-gradient(120deg,rgba(49,113,143,.4),rgba(17,44,69,.7));border-color:#5e93ab}
#sheet[data-panel="veh"] .vbig .btn.pri{background:linear-gradient(120deg,#a4e5ef,#76c0da);color:#102a3b}
#sheet[data-panel="veh"] .btn:disabled{opacity:.45;box-shadow:none}
#sheet[data-panel="veh"] .btn:focus-visible,.recipe-card .btn:focus-visible{outline:2px solid #a4e5ef;outline-offset:3px}


.recipe-card .recipe-ready{padding:9px 11px;border-radius:8px;font:600 13px/1.4 var(--font-d);background:rgba(25,47,65,.8)}
.recipe-card .recipe-ready.available{color:#aff1bf;border:1px solid #64ad82}.recipe-card .recipe-ready.missing{color:#ffc1c5;border:1px solid #b96670}
.recipe-consume small{display:block;font:500 12px/1.4 var(--font-d);color:#e0eaf1;margin-top:3px}


/* Compact storage HUD and optional guides. */
#baseTxt{min-width:42px;text-align:right;font-size:12px}
#energy{grid-template-columns:18px minmax(32px,1fr) auto auto}
#energy .meter{min-width:0}
.meter.base i{background:#9ae4b4}
.meter.base i.full{background:var(--warn)}
.sheet-tools{display:flex;gap:8px;align-items:center}
#sheet h3 .sheet-tools button[data-act="storehelp"]{border-radius:50%;background:#a6dcf5;color:#102332;font-weight:700}
.human-guide{padding:10px;border:1px solid var(--line-strong);border-radius:8px;background:rgba(94,231,255,.08);margin-bottom:12px}
.human-guide p{margin:6px 0}
.human-guide small{color:var(--muted)}
#mbox.help{max-height:80vh;max-height:80dvh;overflow-y:auto;overscroll-behavior:contain}


.crew-name{display:flex;align-items:center;gap:10px}.crew-face{width:52px;height:60px;object-fit:cover;border-radius:8px;flex:none}.food-critical{border:2px solid #ff705f!important;background:rgba(160,30,20,.3)!important}.food-low{border:2px solid #ffb661!important}

#sheet .btn.crew-role.is-current,#sheet .btn.crew-role.is-current:disabled{background:#9ae4b4;color:#102b1a;border:2px solid #c4f7d5;opacity:1;box-shadow:0 0 12px rgba(110,235,156,.3);font-weight:800;cursor:default;filter:none}

.crew-face.crew-portrait{display:inline-block;width:60px;height:60px;background-image:url("img/crew-portraits-20261103.webp");background-size:300% 700%;background-repeat:no-repeat;border:1px solid var(--line);flex:none}


/* Puestos mineros: secciones claras y botones grandes. */
:is(.post-card,.colony-body) h5.post-h{margin:14px 0 6px;font:700 12px/1.3 var(--font-d);letter-spacing:.06em;text-transform:uppercase;color:var(--sand);border-top:1px solid var(--line);padding-top:10px}
:is(.post-card,.colony-body) .post-stats{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
:is(.post-card,.colony-body) .post-stats span{flex:1 1 auto;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:rgba(10,30,54,.5);font:600 12.5px var(--font-d);white-space:nowrap}
:is(.post-card,.colony-body) .post-stats .post-bad{color:#ffc1c5;border-color:#b96670}
:is(.post-card,.colony-body) .post-note{margin:6px 0;color:var(--muted);font:400 12px/1.45 var(--font-d)}
:is(.post-card,.colony-body) .post-line{margin:8px 0 12px}
:is(.post-card,.colony-body) .btns{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
:is(.post-card,.colony-body) .btns .btn{flex:1 1 150px;min-height:46px;border-radius:8px;text-transform:none;letter-spacing:.02em;font-size:13.5px}
:is(.post-card,.colony-body) .recipe-ready strong{font-size:13.5px;letter-spacing:.04em}


/* Pestañas siempre a mano: se quedan pegadas al borde inferior de la hoja. */
#sheet .tabs-dock{position:sticky;bottom:-13px;z-index:4;margin:14px -13px -13px;padding:10px 13px 13px;border-top:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(6,22,42,.72),rgba(6,22,42,.97) 35%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#sheet .tabs-dock .tabs{margin:0}
#sheet .tabs-dock .tb{min-height:46px;justify-content:center}
#sheet .tabs-dock .tabs-sub{margin:0 0 8px;padding:0 0 8px;border-bottom:1px dashed var(--line)}
#sheet .tabs-dock .tabs-sub .tb{min-height:40px;min-width:62px;font-size:10.5px;flex-direction:row;gap:5px;background:rgba(10,30,54,.35)}
#sheet .tabs-dock .tabs-sub .tb i{font-size:13px}
#sheet .tabs-dock .tabs-sub .tb.on{border-color:var(--sand);background:color-mix(in srgb,var(--sand) 20%,transparent)}
.hsum{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.hsum span{flex:1 1 auto;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:rgba(10,30,54,.5);font:600 12px var(--font-d);white-space:nowrap}
.hsum.food-low{border-left:3px solid #ffb661;padding-left:6px}
.hsum.food-critical{border-left:3px solid #ff705f;padding-left:6px}

/* Colonia: selector desplegable y pestañas en dos filas. */
.col-pick{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:rgba(10,30,54,.5)}
.col-pick span{font:700 11px var(--font-d);letter-spacing:.06em;text-transform:uppercase;color:var(--sand);flex:none}
.col-pick select{flex:1;min-width:0;min-height:40px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:7px;background:#0a1e36;color:#eaf3ff;font:600 14px var(--font-d)}
#sheet .tabs-dock .tabs-sub .tb{flex:1 1 72px}


/* Vehicle observation never exposes controls for a different rover. */
#quick[hidden],.act[hidden]{display:none!important}
#rangeTxt{overflow-wrap:anywhere}

#mapFilters[hidden]{display:none!important}#mapFilters{padding:6px 10px;max-width:100%;font-size:12px;pointer-events:auto}#mapFilters select{margin-left:8px;background:#abd8f5;color:#111;font-weight:700;border-radius:5px;padding:7px;border:0;max-width:210px}#mapFilters small{display:block;margin-top:4px;color:#ffc3f5;font-size:10px}

/* Inicio y filtro compacto bajo el rumbo. */
#tr{flex-direction:column;align-items:flex-end}
#tr #mapFilters{width:132px;max-width:34vw;padding:5px}
#tr #mapFilters select{display:block;width:100%;max-width:100%;margin:0;padding:8px 2px;font-size:11px}
#startMenu{position:fixed;inset:0;z-index:1000;overflow:auto;display:grid;place-items:center;padding:24px 18px;background:radial-gradient(ellipse at 70% 10%,#a4492f 0,transparent 55%),linear-gradient(155deg,#152e48,#060f1d 80%);color:#eff7ff}
#startMenu[hidden],#startPane[hidden],#startMain[hidden]{display:none!important}
.start-card{width:min(100%,460px);padding:24px;border:1px solid #68b7cc;border-radius:18px;background:#0b2034e8;box-shadow:0 20px 70px #0008}
.start-card h1{font:700 64px/1 var(--font-d);margin:12px 0}.start-card h1 span{color:#82d8f2}
.start-card p{font-size:14px;line-height:1.5}.start-kicker{font-size:11px!important;letter-spacing:.12em;color:#8dd5ee}
#startMenu button{display:block;width:100%;min-height:46px;margin:9px 0;padding:12px;border:1px solid #74bbd9;border-radius:9px;background:#a9d8ed;color:#102332;font:700 15px var(--font-d);cursor:pointer}
#startMenu button:disabled{opacity:.4;cursor:default}#startMenu button.danger{background:#efa4a0;border-color:#dc6b64}
#startMenu input[type=range]{width:100%;min-height:40px}#startStatus{color:#a9e2c4}#startPane{overflow-wrap:anywhere}

/* Keep navigation in its own column even when the tilt warning is long. */
#top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,132px);grid-template-areas:"status navigation" "mission mission";align-items:start}
#tl{grid-area:status;min-width:0;max-width:230px}
#tr{grid-area:navigation;min-width:0;width:100%;align-items:stretch}
#tc{grid-area:mission;min-width:0}
#tl #energy{width:100%;max-width:230px;min-width:0;box-sizing:border-box}
#tl #clock{min-width:0;gap:4px}
#tr #nav{width:100%;min-width:0;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px;padding:6px}
#tr #compassIcon{width:28px;height:28px}
#tr #nav .col{min-width:0}
#tr #hdgTxt{white-space:nowrap;font-size:12px}
#tr #tiltWarn{white-space:normal;overflow-wrap:anywhere;letter-spacing:.03em;font-size:9px;line-height:1.3}
#tr #mapFilters{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
@media(max-width:360px){#top{grid-template-columns:minmax(0,1fr) 118px;column-gap:6px}#tl #energy{gap:5px 4px;padding:5px}#tl #clock{padding:5px;font-size:10px}}

#manualControls{pointer-events:auto;padding:6px;margin-top:5px;max-width:340px}#manualControls button{background:#a9d8ed;color:#102332;font-weight:700;border:1px solid #75bdd8;border-radius:6px;padding:9px;touch-action:none}#manualControls small{display:block;font-size:10px;margin:4px;color:#b9d9e8}#manualPad{display:flex;gap:6px}#manualPad[hidden]{display:none}#manualPad button{flex:1;min-height:44px}#manualToggle:disabled{opacity:.5}

body.manual-driving #quick{display:none!important}

/* Compact mode switch beside either set of driving controls. */
#driveControlsRow{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:6px;width:min(100%,380px)}
#driveControlsRow #quick{min-width:0;width:100%;box-sizing:border-box}
#manualControls{display:contents}
#manualToggle{grid-column:2;grid-row:1;min-width:40px;min-height:44px;padding:8px!important;pointer-events:auto}
#manualToggle[aria-pressed="true"]{background:#99e2b5;border-color:#53c789}
#manualStatus{display:none!important}
#manualPad{grid-column:1;grid-row:1;pointer-events:auto;padding:5px}
#manualPad button{min-width:0}

#timeControls{display:flex;gap:4px;align-items:stretch}#timeControls .act{width:36px;min-height:36px;padding:3px;justify-content:center;flex-direction:column;gap:0;font-size:19px}#timeControls #spdTxt{font-size:9px;line-height:1.1;letter-spacing:0}#timeControls .act:disabled{opacity:.4;cursor:default}

/* Base: content scrolls between the header and compact navigation. */
#sheet[data-panel="base"]{overflow:hidden}
#sheet[data-panel="base"]>.base-content{flex:1 1 auto;min-height:0;overflow:auto;padding:10px 0;overscroll-behavior:contain}
#sheet[data-panel="base"]>.tabs-dock{position:static;margin-top:0;flex:none}
#sheet[data-panel="base"] .tabs-sub{flex-wrap:nowrap;overflow-x:auto}
#sheet[data-panel="base"] .tabs-sub .tb{flex:0 0 auto;min-width:60px;padding:7px 8px}
.expedition-need.ready{color:#9ae4b4!important}
.expedition-need.missing{color:#ffb4ac!important}

/* Consistent route controls and visible, scrollable colony content. */
#sheet[data-panel="colony"]{overflow:hidden}
#sheet[data-panel="colony"]>.colony-body{flex:1 1 auto;min-height:0;overflow:auto;padding:8px 0;overscroll-behavior:contain}
#sheet[data-panel="colony"]>.tabs-dock{position:static;margin-top:0;flex:none}
#sheet[data-panel="colony"] .tabs-sub{flex-wrap:nowrap;overflow-x:auto}
#sheet[data-panel="colony"] .tabs-sub .tb{flex:0 0 auto;min-width:60px;padding:7px 8px}
#sheet :is([data-act="cgo"],[data-act="ago"],[data-act="mulemulti"],[data-act="cpause"]){flex:0 1 auto;min-height:40px;padding:8px 12px!important;font:700 12px var(--font-d);text-transform:none;letter-spacing:.02em;border-radius:8px;background:#a6dcf5;color:#102332}
#sheet [data-act="back"]{flex:none;font-size:18px}
#bRoute{font:700 11px var(--font-d);color:#102332;background:#a6dcf5}

.campaign-warning{color:#ffb4ac!important}
.campaign-victory{padding:16px;border:2px solid #9ae4b4;border-radius:12px;background:linear-gradient(145deg,#123c4d,#122640)}
.campaign-victory h4{color:#9ae4b4;font-size:20px}
.campaign-launch{background:#9ae4b4!important;color:#102332!important;font-weight:800}
#campaignFlight{position:absolute;top:40%;left:50%;transform:translateX(-50%);padding:12px 18px;max-width:85%;text-align:center;color:#a6dcf5;font:700 16px var(--font-d);z-index:4;pointer-events:none}
#campaignFlight[hidden]{display:none}
#sheet[data-panel="base"]>.tabs-dock>.tabs{flex-wrap:nowrap;overflow-x:auto}
#sheet[data-panel="base"]>.tabs-dock>.tabs>.tb{flex:0 0 auto;min-width:64px;font-size:10px}


.collection-mode{border:1px solid #69cbe0;border-radius:10px;padding:10px;margin-bottom:12px}.collection-mode .btn{background:#abd8f5;color:#111;font-weight:700}.collection-mode .is-current{background:#83ddbc;box-shadow:inset 0 0 0 2px #299977}.collection-mode p{font-size:12px;line-height:1.4;margin:6px 0}.start-card h1 span{font-size:.55em}