body[data-away="yes"] .upgrade-panel{display:none!important}body[data-away="yes"] .game-nav [data-view="base"]{opacity:.3;cursor:not-allowed}.expedition-status{margin:16px 0 24px;padding:15px;border:1px solid #3c5d63;background:linear-gradient(135deg,#0b1b1e,#0a1113);box-shadow:inset 3px 0 #67bdc7}.expedition-status.hidden{display:none}.expedition-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid #263d42}.expedition-head>div{display:grid;gap:5px}.expedition-head span,.expedition-grid span,.expedition-status p>b{color:#ddaF62;font:500 8px/1.2 "DM Mono",monospace;letter-spacing:.12em}.expedition-head b{color:#eef3f3;font:700 13px/1.25 Unbounded,sans-serif}.expedition-head em{padding:6px 9px;border:1px solid #466e76;color:#87dbe3;font:500 8px/1 "DM Mono",monospace;letter-spacing:.1em;font-style:normal}.expedition-head em.surface{border-color:#9b7d45;color:#e6be70;background:#30271966}.expedition-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}.expedition-grid>div{display:grid;gap:4px;padding:9px;border:1px solid #263b40;background:#0b1315}.expedition-grid b{color:#c9d7d8;font:500 9px/1.35 "DM Mono",monospace;text-transform:uppercase}.expedition-status p{margin:11px 0 5px;color:#a9babc;font:9px/1.55 "DM Mono",monospace}.expedition-status>small{display:block;color:#7f9296;font:8px/1.45 "DM Mono",monospace}.base-offline{padding:15px;border:1px dashed #405155;color:#819397}.base-offline b,.base-offline small{display:block}.base-offline b{font:500 9px/1.3 Unbounded,sans-serif;color:#a7b5b7}.base-offline small{margin-top:7px;font:9px/1.5 "DM Mono",monospace}.expedition-store small{color:#d29a70!important}.colony-item.remote{opacity:.72} .orbit-brief{margin:11px 0 5px;color:#a9babc;font:9px/1.55 "DM Mono",monospace}.orbit-actions{display:grid;gap:8px;margin-top:14px}.orbit-btn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 14px;border:1px solid #4a7b84;background:linear-gradient(135deg,#0e2529,#0a1c20);color:#87dbe3;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}.orbit-btn:hover{border-color:#87dbe3;background:linear-gradient(135deg,#122d33,#0d2226)}.orbit-btn b,.orbit-btn>:first-child{font:700 9px/1 Unbounded,sans-serif;letter-spacing:.1em}.orbit-btn small{color:#6a9298;font:8px/1.3 "DM Mono",monospace;letter-spacing:.06em}.orbit-btn.secondary{border-color:#2e4a50;background:transparent;color:#6a9298}.orbit-btn.secondary:hover{border-color:#4a7b84;color:#87dbe3} @media(max-width:760px){.expedition-status{margin:12px 0 18px;padding:13px}.expedition-grid{grid-template-columns:1fr}.expedition-head{align-items:flex-start;gap:8px}.expedition-head b{font-size:11px}.expedition-head em{flex:0 0 auto}} /* --- Progreso planetario persistente (state.planetProgress) --- Mismo lenguaje visual que .orbit-btn/.expedition-status de arriba: no se inventa un componente nuevo, sólo se reutilizan sus clases para las tarjetas de operación (yacimiento/ruinas/señal/explorar nueva zona). */ #planetProgressPanel{margin:16px 0 24px;padding:15px;border:1px solid #3c5d63;background:linear-gradient(135deg,#0b1b1e,#0a1113);box-shadow:inset 3px 0 #67bdc7} #planetProgressPanel .planet-progress-copy{margin:11px 0 5px;color:#a9babc;font:9px/1.55 "DM Mono",monospace} #planetProgressPanel .planet-progress-bar{margin:12px 0;height:8px;border:1px solid #2f545c;background:#071216;overflow:hidden} #planetProgressPanel .planet-progress-bar i{display:block;height:100%;background:linear-gradient(90deg,#4fb8c7,#e0c875);transition:width .3s ease} #planetProgressPanel .planet-ops{display:grid;gap:8px} #planetProgressPanel .planet-op-card.planet-op-primary{border-color:#ddaf62;color:#e0c875} @media(max-width:760px){#planetProgressPanel{margin:12px 0 18px;padding:13px}} /* --- OBJETIVO ACTUAL (P1 UX ORBIT) --- Primer bloque del panel: DÓNDE ESTOY ya lo dice #expeditionStatus, este es QUÉ TENGO QUE HACER AHORA + CUÁNTO ME FALTA. Mismo lenguaje visual que .planet-progress-*/.orbit-btn de arriba. */ #planetProgressPanel .planet-objective{padding-bottom:13px;border-bottom:1px solid #263d42} #planetProgressPanel .planet-objective-title{color:#ddaf62;font:500 8px/1.2 "DM Mono",monospace;letter-spacing:.12em} #planetProgressPanel .planet-objective h3{margin:5px 0 0;color:#eef3f3;font:700 14px/1.3 Unbounded,sans-serif} #planetProgressPanel .planet-objective-count{margin:6px 0 0;color:#c9d7d8;font:500 9px/1.4 "DM Mono",monospace} #planetProgressPanel .planet-objective-copy{margin:9px 0 12px;color:#a9babc;font:9px/1.55 "DM Mono",monospace} #planetProgressPanel .planet-objective .planet-op-card{width:100%} #planetProgressPanel .planet-ops{margin-top:13px} /* ABRIR NAVEGACIÓN / REGRESAR A BASE: la salida del sistema, reubicada al final de la columna (objetivo y oportunidades primero) y con menor peso visual -- reutilizan .orbit-btn.secondary/.orbit-nav-actions tal cual. */ #planetProgressPanel .planet-nav-footer{margin-top:13px;padding-top:13px;border-top:1px solid #263d42} #planetProgressPanel .planet-nav-footer .orbit-nav-actions{margin-top:8px;padding-top:8px} /* ================================================================== MISIÓN DE SUPERFICIE · rediseño 2026-08 Selectores `#activeExpedition.sm-root ...` para ganar en especificidad a las hojas heredadas (active-expedition.css, mission-map-*.css) sin tener que tocarlas. Paleta: cian #87dbe3, ámbar #e0c875/#ddaf62, rojo #c75050, fondos #0b1b1e. ================================================================== */ #activeExpedition.sm-root{position:fixed;z-index:115;inset:0;display:grid;place-items:center;padding:14px;box-sizing:border-box;--sm-cyan:#87dbe3;--sm-amber:#e0c875;--sm-amber-2:#ddaf62;--sm-red:#c75050;--sm-ink:#0b1b1e;--sm-line:#2c4a50;--sm-dim:#7f9ba0} #activeExpedition.sm-root *{box-sizing:border-box} #activeExpedition.sm-root .sm-backdrop{position:absolute;inset:0;background:#02090ee8;backdrop-filter:blur(10px)} #activeExpedition.sm-root .sm-window{position:relative;display:grid;gap:12px;width:min(1120px,100%);max-height:calc(100dvh - 28px);overflow:auto;padding:16px;border:1px solid #4d8b93;background:radial-gradient(circle at 84% 0,#1e535f55,transparent 32%),linear-gradient(150deg,#0c2027,#04090c 70%);box-shadow:0 26px 80px #000;grid-template-columns:minmax(0,1fr) minmax(200px,auto);grid-template-areas:"ident pulse" "stats stats" "flash flash" "main main" "actions actions" "log log"} /* --- Cabecera --- */ #activeExpedition.sm-root .sm-header{grid-area:ident;display:flex;flex-wrap:wrap;align-items:center;gap:14px;min-width:0} #activeExpedition.sm-root .sm-ident{display:flex;align-items:center;gap:9px;min-width:0} #activeExpedition.sm-root .sm-ident>img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 8px #79dbe488)} #activeExpedition.sm-root .sm-header span{display:block;color:var(--sm-amber-2);font:500 8px/1.3 "DM Mono",monospace;letter-spacing:.12em} #activeExpedition.sm-root .sm-header b{display:block;margin-top:4px;color:#f1f5ee;font:700 13px/1.25 Unbounded,sans-serif} #activeExpedition.sm-root .sm-header small{display:block;margin-top:3px;color:var(--sm-dim);font:500 8px/1.3 "DM Mono",monospace;letter-spacing:.06em} #activeExpedition.sm-root .sm-objective{min-width:0;padding-left:14px;border-left:1px solid var(--sm-line)} #activeExpedition.sm-root .sm-objective b{color:var(--sm-amber);font-size:11px} /* --- Señal (PULSO) --- */ #activeExpedition.sm-root .sm-pulse{grid-area:pulse;align-self:center;display:grid;gap:4px;min-width:190px;padding:9px 12px;border:1px solid #3c6d75;background:linear-gradient(145deg,#10262c,#071216)} #activeExpedition.sm-root .sm-pulse span{color:var(--sm-cyan);font:500 7px/1 "DM Mono",monospace;letter-spacing:.14em} #activeExpedition.sm-root .sm-pulse b{color:#eef6f4;font:700 18px/1 Unbounded,sans-serif} #activeExpedition.sm-root .sm-pulse em{display:block;height:3px;background:#1e353a} #activeExpedition.sm-root .sm-pulse u{display:block;height:100%;background:var(--sm-cyan);text-decoration:none;transition:width .45s ease} #activeExpedition.sm-root .sm-pulse small{color:var(--sm-dim);font:500 8px/1.2 "DM Mono",monospace;letter-spacing:.05em} #activeExpedition.sm-root .sm-pulse[data-trend="up"] small{color:#8ce0a8} #activeExpedition.sm-root .sm-pulse[data-trend="up"] b{color:#a9ecc0} #activeExpedition.sm-root .sm-pulse[data-trend="down"] small,#activeExpedition.sm-root .sm-pulse[data-trend="down"] b{color:#e39289} #activeExpedition.sm-root .sm-pulse[data-trend="up"],#activeExpedition.sm-root .sm-pulse[data-trend="down"]{animation:smPulseShift .5s ease} /* --- Recursos --- */ #activeExpedition.sm-root .sm-stats{grid-area:stats;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px} #activeExpedition.sm-root .sm-meter{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:7px;min-height:46px;padding:7px 9px;border:1px solid #35656c;background:linear-gradient(145deg,#10262c,#071216)} #activeExpedition.sm-root .sm-meter>img{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 0 5px #83d8df66)} #activeExpedition.sm-root .sm-meter-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 6px;min-width:0} #activeExpedition.sm-root .sm-meter i{color:#6e9ca1;font:500 7px/1.2 "DM Mono",monospace;font-style:normal;letter-spacing:.09em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #activeExpedition.sm-root .sm-meter b{color:#e6f1ee;font:700 8px/1.2 "DM Mono",monospace} #activeExpedition.sm-root .sm-meter em{grid-column:1/-1;height:3px;background:#1e353a} #activeExpedition.sm-root .sm-meter u{display:block;height:100%;background:#69c7d2;text-decoration:none;transition:width .4s ease,background .3s ease} #activeExpedition.sm-root .sm-meter.warning{border-color:#9b7d45} #activeExpedition.sm-root .sm-meter.warning u{background:var(--sm-amber-2)} #activeExpedition.sm-root .sm-meter.warning b{color:var(--sm-amber)} #activeExpedition.sm-root .sm-meter.critical{border-color:var(--sm-red);animation:smAlert 1.6s ease-in-out infinite} #activeExpedition.sm-root .sm-meter.critical u{background:var(--sm-red)} #activeExpedition.sm-root .sm-meter.critical b{color:#f0a49b} /* --- Realimentación inline --- */ #activeExpedition.sm-root .sm-flash{grid-area:flash;display:flex;flex-wrap:wrap;gap:6px} #activeExpedition.sm-root .sm-flash em{padding:3px 7px;border:1px solid #35656c;color:var(--sm-cyan);font:500 8px/1.3 "DM Mono",monospace;font-style:normal;letter-spacing:.07em;animation:smFlashIn .3s ease} #activeExpedition.sm-root .sm-flash em.down{border-color:#7a4d49;color:#e2938b} #activeExpedition.sm-root .sm-flash em.up{border-color:#4d7f60;color:#96dcae} /* --- Zona principal --- */ #activeExpedition.sm-root .sm-main{grid-area:main;display:grid;grid-template-columns:minmax(0,60%) minmax(0,1fr);gap:12px;align-items:start} #activeExpedition.sm-root .sm-panel-title{color:var(--sm-cyan);font:500 8px/1.3 "DM Mono",monospace;letter-spacing:.14em} #activeExpedition.sm-root .sm-map-panel,#activeExpedition.sm-root .sm-sector-panel{display:grid;gap:10px;align-content:start;padding:13px;border:1px solid #37676f;background:linear-gradient(145deg,#0d252d,#071216);min-width:0} /* --- Mapa 6×6 --- */ #activeExpedition.sm-root .sm-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;width:100%} #activeExpedition.sm-root .sm-cell{position:relative;display:grid;place-content:center;gap:2px;aspect-ratio:1;min-width:44px;min-height:44px;padding:0;border:1px solid #23454a;background:linear-gradient(145deg,#0b1a1e,#071014);cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease} #activeExpedition.sm-root .sm-cell:hover{transform:translateY(-2px);border-color:var(--sm-cyan)} #activeExpedition.sm-root .sm-cell:focus-visible{outline:2px solid var(--sm-amber);outline-offset:1px} #activeExpedition.sm-root .sm-cell small{color:#4d6c71;font:500 6px/1 "DM Mono",monospace;letter-spacing:.06em} #activeExpedition.sm-root .sm-cell .sm-cell-mark{display:block;width:11px;height:11px;margin:0 auto;font-style:normal} /* UNKNOWN: sólo un punto muerto, sin ninguna pista de contenido. */ #activeExpedition.sm-root .sm-cell.state-unknown .sm-cell-mark{width:4px;height:4px;border-radius:50%;background:#31555b} #activeExpedition.sm-root .sm-cell.state-scanned{border-style:dashed;border-color:#4f8f97;background:linear-gradient(145deg,#102a30,#08161a);animation:smReveal .35s ease} #activeExpedition.sm-root .sm-cell.state-scanned .sm-cell-mark{border:1px solid var(--sm-cyan);border-radius:50%;background:transparent} #activeExpedition.sm-root .sm-cell.state-scanned[data-risk="alto"]{border-color:#8d514d} #activeExpedition.sm-root .sm-cell.state-scanned[data-risk="alto"] .sm-cell-mark{border-color:#dd8b82} #activeExpedition.sm-root .sm-cell.state-scanned[data-risk="impasable"]{border-color:#7a4d49;opacity:.72} #activeExpedition.sm-root .sm-cell.is-visited{border-color:#49858b;background:linear-gradient(145deg,#1d444a,#0c2429)} #activeExpedition.sm-root .sm-cell.is-visited small{color:#79a7ac} #activeExpedition.sm-root .sm-cell.state-visited .sm-cell-mark{width:7px;height:1px;background:#79c3c9} #activeExpedition.sm-root .sm-cell.state-resource{border-color:#5e9c7a;background:linear-gradient(145deg,#153a30,#0a1c19)} #activeExpedition.sm-root .sm-cell.state-resource .sm-cell-mark{background:#8fdcae;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} #activeExpedition.sm-root .sm-cell.state-danger{border-color:var(--sm-red);background:linear-gradient(145deg,#2b1315,#120a0b)} #activeExpedition.sm-root .sm-cell.state-danger .sm-cell-mark{background:#e8867c;clip-path:polygon(50% 0,100% 100%,0 100%)} #activeExpedition.sm-root .sm-cell.state-anomaly{border-color:#7c6bb0;background:linear-gradient(145deg,#1d1a33,#0b0a14)} #activeExpedition.sm-root .sm-cell.state-anomaly .sm-cell-mark{border:1px solid #b3a5e6;border-radius:50%;background:transparent} #activeExpedition.sm-root .sm-cell.state-objective{border-color:var(--sm-amber);background:linear-gradient(145deg,#33290f,#14100a)} #activeExpedition.sm-root .sm-cell.state-objective .sm-cell-mark{background:var(--sm-amber);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} #activeExpedition.sm-root .sm-cell.state-extraction{border-color:#63c7d5;background:linear-gradient(145deg,#0f333c,#071a1f)} #activeExpedition.sm-root .sm-cell.state-extraction .sm-cell-mark{border:2px solid var(--sm-cyan);border-radius:50%;background:transparent;animation:smBeacon 1.8s ease-in-out infinite} #activeExpedition.sm-root .sm-cell.state-blocked{border-color:#7a4d49;background:#1c1011;cursor:not-allowed} #activeExpedition.sm-root .sm-cell.state-blocked .sm-cell-mark{background:linear-gradient(45deg,transparent 45%,#e08a80 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#e08a80 45% 55%,transparent 55%)} #activeExpedition.sm-root .sm-cell.state-current{border-color:var(--sm-amber);background:radial-gradient(circle,#f5db7c22 0 35%,#153239 36%);box-shadow:0 0 14px #ecc35966} #activeExpedition.sm-root .sm-cell.state-current .sm-cell-mark{border-radius:50%;background:#ffe695;box-shadow:0 0 7px 3px #edc44c;animation:smHere 2.2s ease-in-out infinite} #activeExpedition.sm-root .sm-cell.is-adjacent{box-shadow:inset 0 0 0 1px #4bb8c144} #activeExpedition.sm-root .sm-cell.is-selected{outline:1px solid var(--sm-amber);outline-offset:1px} #activeExpedition.sm-root .sm-scan-readout{display:grid;gap:3px;padding:9px 10px;border-left:2px solid var(--sm-cyan);background:linear-gradient(90deg,#0c2025,#07101400);animation:smReveal .35s ease} #activeExpedition.sm-root .sm-scan-readout span{color:var(--sm-cyan);font:500 7px/1 "DM Mono",monospace;letter-spacing:.14em} #activeExpedition.sm-root .sm-scan-readout p{margin:0;color:#b9cfce;font:8px/1.5 "DM Mono",monospace} #activeExpedition.sm-root .sm-legend{display:flex;flex-wrap:wrap;gap:4px 11px;margin:0;padding:0;list-style:none} #activeExpedition.sm-root .sm-legend li{display:flex;align-items:center;gap:4px;color:var(--sm-dim);font:7px/1.3 "DM Mono",monospace;letter-spacing:.06em} #activeExpedition.sm-root .sm-legend i{width:8px;height:8px;border:1px solid #23454a;background:#0b1a1e} #activeExpedition.sm-root .sm-legend .legend-scanned i{border-style:dashed;border-color:#4f8f97} #activeExpedition.sm-root .sm-legend .legend-visited i{border-color:#49858b;background:#1d444a} #activeExpedition.sm-root .sm-legend .legend-resource i{border-color:#5e9c7a;background:#153a30} #activeExpedition.sm-root .sm-legend .legend-danger i{border-color:var(--sm-red);background:#2b1315} #activeExpedition.sm-root .sm-legend .legend-blocked i{border-color:#7a4d49;background:#1c1011} #activeExpedition.sm-root .sm-legend .legend-extraction i{border-color:#63c7d5;background:#0f333c} #activeExpedition.sm-root .sm-legend .legend-current i{border-color:var(--sm-amber);background:#33290f} /* --- Panel de sector --- */ #activeExpedition.sm-root .sm-sector-name{color:#f1f5ee;font:700 14px/1.2 Unbounded,sans-serif} #activeExpedition.sm-root .sm-sector-state{justify-self:start;padding:4px 8px;border:1px solid var(--sm-line);color:var(--sm-cyan);font:500 7px/1 "DM Mono",monospace;letter-spacing:.12em} #activeExpedition.sm-root .sm-sector-state.state-blocked,#activeExpedition.sm-root .sm-sector-state.state-danger{border-color:#7a4d49;color:#e2938b} #activeExpedition.sm-root .sm-sector-state.state-objective,#activeExpedition.sm-root .sm-sector-state.state-current{border-color:#9b7d45;color:var(--sm-amber)} #activeExpedition.sm-root .sm-sector-read,#activeExpedition.sm-root .sm-sector-hint{margin:0;color:#b9cfce;font:9px/1.6 "DM Mono",monospace} #activeExpedition.sm-root .sm-sector-rows{display:grid;gap:4px;margin:0;padding:0;list-style:none} #activeExpedition.sm-root .sm-sector-rows li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 7px;border:1px solid #1f3a3f;background:#08161a} #activeExpedition.sm-root .sm-sector-rows i{color:#6e9ca1;font:500 7px/1.3 "DM Mono",monospace;font-style:normal;letter-spacing:.1em} #activeExpedition.sm-root .sm-sector-rows b{color:#e6f1ee;font:700 8px/1.3 "DM Mono",monospace;text-align:right} #activeExpedition.sm-root .sm-sector-rows li.warning b{color:var(--sm-amber)} #activeExpedition.sm-root .sm-sector-rows li.critical{border-color:#7a4d49} #activeExpedition.sm-root .sm-sector-rows li.critical b{color:#f0a49b} #activeExpedition.sm-root .sm-sector-block{margin:0;padding:7px 9px;border:1px solid #7a4d49;color:#d58d85;font:500 8px/1.45 "DM Mono",monospace;letter-spacing:.06em} #activeExpedition.sm-root .sm-advance{min-height:44px;padding:11px 14px;border:1px solid var(--sm-amber);background:linear-gradient(90deg,#302713,#121713);color:#ffe09a;font:700 9px/1 "DM Mono",monospace;letter-spacing:.14em;cursor:pointer;transition:background .15s ease,box-shadow .15s ease} #activeExpedition.sm-root .sm-advance:hover{background:#3b2f16;box-shadow:0 0 18px #e8be4933} /* Retirada de emergencia: transitable pero excepcional — se distingue tanto del avance normal (ámbar) como de un corredor cerrado (rojo apagado). */ #activeExpedition.sm-root .sm-advance.is-retreat{border-color:#5fb0c4;background:linear-gradient(90deg,#12313a,#0a171b);color:#bfe9f4} #activeExpedition.sm-root .sm-advance.is-retreat:hover{background:#173f4a;box-shadow:0 0 18px #5fb0c433} #activeExpedition.sm-root .sm-sector-stale{display:block;margin:0;color:#c9a86a;font:500 7px/1.4 "DM Mono",monospace;letter-spacing:.08em} /* --- Controles --- */ #activeExpedition.sm-root .sm-actions{grid-area:actions;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;justify-items:stretch} #activeExpedition.sm-root .sm-actions button{cursor:pointer;font-family:"DM Mono",monospace} #activeExpedition.sm-root .sm-actions button:disabled{opacity:.4;cursor:not-allowed} #activeExpedition.sm-root .sm-scan,#activeExpedition.sm-root .sm-extract{display:grid;gap:4px;min-height:56px;padding:11px 13px;border:1px solid #4a7b84;background:linear-gradient(135deg,#0e2529,#0a1c20);text-align:left} #activeExpedition.sm-root .sm-scan b,#activeExpedition.sm-root .sm-extract b{color:var(--sm-cyan);font:700 9px/1 Unbounded,sans-serif;letter-spacing:.11em} #activeExpedition.sm-root .sm-scan small,#activeExpedition.sm-root .sm-extract small{color:var(--sm-dim);font:8px/1.3 "DM Mono",monospace} #activeExpedition.sm-root .sm-scan:hover:not(:disabled),#activeExpedition.sm-root .sm-extract:hover:not(:disabled){border-color:var(--sm-cyan)} #activeExpedition.sm-root .sm-extract:not(:disabled){border-color:var(--sm-amber)} #activeExpedition.sm-root .sm-extract:not(:disabled) b{color:var(--sm-amber)} #activeExpedition.sm-root .sm-pad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:5px;justify-self:center} #activeExpedition.sm-root .sm-dir{display:grid;place-content:center;gap:1px;border:1px solid #427a83;background:linear-gradient(145deg,#123139,#0a171b);color:#dff7f6;text-align:center;transition:transform .15s ease,border-color .15s ease,background .15s ease} #activeExpedition.sm-root .sm-dir:hover:not(:disabled){transform:translateY(-2px);border-color:var(--sm-amber);background:#1b3b41} #activeExpedition.sm-root .sm-dir i{color:var(--sm-amber);font:20px/1 Unbounded,sans-serif;font-style:normal} #activeExpedition.sm-root .sm-dir b{font:600 7px/1 "DM Mono",monospace} #activeExpedition.sm-root .sm-dir small{display:none} #activeExpedition.sm-root .sm-dir.is-blocked{border-color:#7a4d49;opacity:.45} #activeExpedition.sm-root .sm-dir.is-blocked i{color:#e58378} #activeExpedition.sm-root .sm-dir.is-retreat{border-color:#5fb0c4;background:linear-gradient(145deg,#12313a,#0a171b)} #activeExpedition.sm-root .sm-dir.is-retreat i{color:#7fd4e6} #activeExpedition.sm-root .sm-dir.north{grid-area:1/2} #activeExpedition.sm-root .sm-dir.west{grid-area:2/1} #activeExpedition.sm-root .sm-dir.east{grid-area:2/3} #activeExpedition.sm-root .sm-dir.south{grid-area:3/2} #activeExpedition.sm-root .sm-pad-core{grid-area:2/2;display:grid;place-content:center;border:1px solid var(--sm-amber-2);background:linear-gradient(145deg,#1d3135,#0e181b);text-align:center} #activeExpedition.sm-root .sm-pad-core img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 0 7px #f2d36e99)} #activeExpedition.sm-root .sm-pad-core small{color:#d9e6e0;font:6px/1 "DM Mono",monospace} #activeExpedition.sm-root .sm-evac{grid-column:1/-1;justify-self:center;min-height:44px;padding:10px 14px;border:1px solid #7a4d49;background:#201111;color:#d58d85;font:500 8px/1 "DM Mono",monospace;letter-spacing:.1em} #activeExpedition.sm-root .sm-evac:hover{border-color:var(--sm-red);color:#f0a49b} /* --- Registro --- */ #activeExpedition.sm-root .sm-log{grid-area:log;display:grid;gap:6px;padding:10px 12px;border-left:2px solid #72ccd5;background:linear-gradient(90deg,#0c2025,#07101400)} #activeExpedition.sm-root .sm-log-head{display:flex;justify-content:space-between;align-items:center;gap:10px} #activeExpedition.sm-root .sm-log-head span{color:var(--sm-cyan);font:500 7px/1 "DM Mono",monospace;letter-spacing:.14em} #activeExpedition.sm-root .sm-log-toggle{min-height:32px;padding:6px 10px;border:1px solid var(--sm-line);background:transparent;color:var(--sm-dim);font:500 7px/1 "DM Mono",monospace;letter-spacing:.1em;cursor:pointer} #activeExpedition.sm-root .sm-log-toggle:hover{border-color:var(--sm-cyan);color:var(--sm-cyan)} #activeExpedition.sm-root .sm-log-last{margin:0;color:#d6e4e2;font:9px/1.5 "DM Mono",monospace} #activeExpedition.sm-root .sm-log-full{display:grid;gap:3px;margin:0;padding:0 0 0 16px;color:#8fa7a9;font:8px/1.5 "DM Mono",monospace} /* --- Evento modal --- */ #activeExpedition.sm-root .sm-event{position:fixed;z-index:3;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;gap:9px;width:min(420px,calc(100% - 28px));max-height:calc(100dvh - 60px);overflow:auto;padding:22px;border:1px solid #72d4dc;background:radial-gradient(circle at 50% 8%,#25535d88,transparent 34%),linear-gradient(145deg,#102931,#070d10);box-shadow:0 18px 55px #000c;text-align:center;animation:smEventIn .25s ease} #activeExpedition.sm-root .sm-event.hostile,#activeExpedition.sm-root .sm-event.storm,#activeExpedition.sm-root .sm-event.warning{border-color:#a95e58} #activeExpedition.sm-root .sm-event.extract,#activeExpedition.sm-root .sm-event.objective{border-color:var(--sm-amber-2)} #activeExpedition.sm-root .sm-event-icon{justify-self:center;width:60px;height:60px} #activeExpedition.sm-root .sm-event-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 13px #8de0e999)} #activeExpedition.sm-root .sm-event>span{color:#a8dce0;font:500 7px/1 "DM Mono",monospace;letter-spacing:.14em} #activeExpedition.sm-root .sm-event h2{margin:0;color:#f3f6ef;font:700 14px/1.2 Unbounded,sans-serif} #activeExpedition.sm-root .sm-event p{margin:0;color:#c3d2d1;font:9px/1.6 "DM Mono",monospace} #activeExpedition.sm-root .sm-event-summary{display:grid;gap:3px;margin:0;padding:0;list-style:none;text-align:left} #activeExpedition.sm-root .sm-event-summary li{display:flex;justify-content:space-between;gap:8px;padding:4px 7px;border:1px solid #1f3a3f;background:#08161a} #activeExpedition.sm-root .sm-event-summary i{color:#6e9ca1;font:500 7px/1.3 "DM Mono",monospace;font-style:normal;letter-spacing:.08em} #activeExpedition.sm-root .sm-event-summary b{color:#e6f1ee;font:700 8px/1.3 "DM Mono",monospace;text-align:right} #activeExpedition.sm-root .sm-event-actions{display:grid;gap:7px;justify-items:center} #activeExpedition.sm-root .sm-event-actions button{min-height:44px;padding:11px 14px;border:1px solid var(--sm-amber-2);background:#282311;color:#f0d880;font:500 8px/1 "DM Mono",monospace;letter-spacing:.1em;cursor:pointer} #activeExpedition.sm-root .sm-event-actions button:hover:not(:disabled){border-color:var(--sm-amber);background:#332b13} #activeExpedition.sm-root .sm-event-actions button:disabled{opacity:.36;filter:grayscale(1);cursor:not-allowed} #activeExpedition.sm-root .sm-event>small{color:#d7a39b;font:8px/1.45 "DM Mono",monospace} @keyframes smPulseShift{0%{opacity:.55;transform:translateY(-2px)}100%{opacity:1;transform:none}} @keyframes smFlashIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}} @keyframes smReveal{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:none}} @keyframes smEventIn{0%{opacity:0;transform:translate(-50%,-46%)}100%{opacity:1;transform:translate(-50%,-50%)}} @keyframes smAlert{50%{border-color:#f0a49b;box-shadow:0 0 14px #c7505044}} @keyframes smBeacon{50%{transform:scale(1.25);opacity:.55}} @keyframes smHere{50%{box-shadow:0 0 12px 5px #edc44c}} /* --- Móvil: recursos → señal → mapa → sector → acciones --- */ @media(max-width:760px){ #activeExpedition.sm-root{padding:0;align-items:end} #activeExpedition.sm-root .sm-window{width:100%;max-height:96dvh;padding:13px;border-width:1px 0 0;grid-template-columns:minmax(0,1fr);grid-template-areas:"ident" "stats" "pulse" "flash" "main" "actions" "log"} #activeExpedition.sm-root .sm-objective{padding-left:0;border-left:0} #activeExpedition.sm-root .sm-stats{grid-template-columns:repeat(2,minmax(0,1fr))} #activeExpedition.sm-root .sm-pulse{min-width:0} #activeExpedition.sm-root .sm-main{grid-template-columns:minmax(0,1fr)} #activeExpedition.sm-root .sm-actions{grid-template-columns:minmax(0,1fr)} #activeExpedition.sm-root .sm-pad{grid-template-columns:repeat(3,minmax(52px,1fr));grid-template-rows:repeat(3,52px);width:100%;max-width:230px} #activeExpedition.sm-root .sm-evac{grid-column:auto;width:100%} #activeExpedition.sm-root .sm-map-panel,#activeExpedition.sm-root .sm-sector-panel{padding:10px} #activeExpedition.sm-root .sm-grid{gap:4px} #activeExpedition.sm-root .sm-cell{min-width:0} #activeExpedition.sm-root .sm-event{width:calc(100% - 24px);padding:18px} } @media(max-width:380px){ #activeExpedition.sm-root .sm-window{padding:10px} #activeExpedition.sm-root .sm-map-panel,#activeExpedition.sm-root .sm-sector-panel{padding:8px} #activeExpedition.sm-root .sm-grid{gap:3px} #activeExpedition.sm-root .sm-cell small{display:none} #activeExpedition.sm-root .sm-stats{grid-template-columns:minmax(0,1fr)} } @media(prefers-reduced-motion:reduce){ #activeExpedition.sm-root *,#activeExpedition.sm-root *:before,#activeExpedition.sm-root *:after{animation:none!important;transition:none!important} #activeExpedition.sm-root .sm-cell:hover,#activeExpedition.sm-root .sm-dir:hover:not(:disabled){transform:none} } /* ================================================================== OPERACIONES PLANETARIAS DIRIGIDAS · modos mining/ruins/signal/rescue Reutilizan la cáscara de la misión de superficie (.sm-window, .sm-stats, .sm-sector-rows, .sm-advance…). Sólo hace falta: (1) deshacer el grid por áreas — estos modos no tienen mapa ni pulso, así que fluyen en una sola columna — y (2) las piezas propias: lista de operaciones, selectores de rumbo/banda e insignias de modo en el panel orbital. ================================================================== */ #activeExpedition.sm-root .sm-window.sm-mode-window{grid-template-columns:minmax(0,1fr);grid-template-areas:none} #activeExpedition.sm-root .sm-window.sm-mode-window>*{grid-area:auto!important} #activeExpedition.sm-root .sm-mode-panel{display:grid;gap:10px;padding:12px;border:1px solid var(--sm-line);background:#08161a} #activeExpedition.sm-root .sm-mode-actions{display:grid;gap:8px} #activeExpedition.sm-root .sm-op-list{display:grid;gap:7px} #activeExpedition.sm-root .sm-op-btn{display:grid;gap:4px;text-align:left;min-height:auto;padding:10px 13px} #activeExpedition.sm-root .sm-op-btn b{font:700 9px/1.2 Unbounded,sans-serif;letter-spacing:.1em} #activeExpedition.sm-root .sm-op-btn small{color:#a58c56;font:8px/1.35 "DM Mono",monospace;letter-spacing:.06em} #activeExpedition.sm-root .sm-op-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none} #activeExpedition.sm-root .sm-op-btn.is-retreat small{color:#7fb3c1} #activeExpedition.sm-root .sm-op-choices{display:flex;flex-wrap:wrap;gap:6px} #activeExpedition.sm-root .sm-op-choice{min-width:52px;padding:9px 11px;border:1px solid var(--sm-line);background:#08161a;color:#a9c4c6;font:700 8px/1 "DM Mono",monospace;letter-spacing:.12em;cursor:pointer;transition:border-color .15s,background .15s,color .15s} #activeExpedition.sm-root .sm-op-choice:hover{border-color:var(--sm-cyan);color:var(--sm-cyan)} #activeExpedition.sm-root .sm-op-choice.is-selected{border-color:var(--sm-amber);background:#302713;color:#ffe09a} /* --- Ruinas: ruta de operación (energía -> terminal -> cámara -> regreso) --- Una sola fila compacta que envuelve sola en pantallas estrechas. No es interactiva: sólo dice en qué punto de la secuencia está el jugador. */ #activeExpedition.sm-root .sm-ruins-steps{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 4px} #activeExpedition.sm-root .sm-ruins-step{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--sm-line);background:#08161a;color:#6f8f95} #activeExpedition.sm-root .sm-ruins-step i{font:600 9px/1 "DM Mono",monospace;font-style:normal} #activeExpedition.sm-root .sm-ruins-step b{font:600 7px/1 "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase} #activeExpedition.sm-root .sm-ruins-step.is-done{border-color:#4f8f6a;color:#8fd8ac} #activeExpedition.sm-root .sm-ruins-step.is-current{border-color:var(--sm-amber);background:#241d0f;color:#ffe09a} #activeExpedition.sm-root .sm-ruins-step.is-pending{opacity:.55} /* --- Mapa local de ruinas (.ruins-map) --- Rejilla 3x3 en cruz: la sala actual en el centro y las salidas alrededor. Las líneas de conexión son pseudo-elementos ::after sobre cada salida (decorativas, fuera del árbol de accesibilidad, cero DOM extra). Todo se mide en fracciones y `em`: no hay un solo ancho fijo, así que la misma rejilla sirve en escritorio y en móvil sin desbordar. */ #activeExpedition.sm-root .ruins-map{--rm-gap:14px;display:grid;gap:var(--rm-gap);margin:2px 0 6px;grid-template-columns:1fr minmax(0,1.25fr) 1fr;grid-template-areas:". mtop ." "mleft mcenter mright" ". mbottom .";transition:opacity 150ms ease} #activeExpedition.sm-root .ruins-map__slot--center{grid-area:mcenter} #activeExpedition.sm-root .ruins-map__slot--top{grid-area:mtop} #activeExpedition.sm-root .ruins-map__slot--left{grid-area:mleft} #activeExpedition.sm-root .ruins-map__slot--right{grid-area:mright} #activeExpedition.sm-root .ruins-map__slot--bottom{grid-area:mbottom} /* Quinta salida en adelante: fila propia debajo de la cruz, nunca scroll lateral. */ #activeExpedition.sm-root .ruins-map__slot--extra{grid-row:4} #activeExpedition.sm-root .ruins-map__center{display:grid;align-content:center;gap:4px;padding:11px 12px;border:1px solid var(--sm-amber);background:linear-gradient(135deg,#241d0f,#12181a);text-align:center;min-width:0} #activeExpedition.sm-root .ruins-map__center-label{color:#ffe09a;font:700 9px/1.25 Unbounded,sans-serif;letter-spacing:.1em;overflow-wrap:anywhere} #activeExpedition.sm-root .ruins-map__center-mark{color:var(--sm-amber-2);font:500 7px/1 "DM Mono",monospace;letter-spacing:.12em} #activeExpedition.sm-root .ruins-map__center-desc{margin:2px 0 0;color:#a9babc;font:8px/1.45 "DM Mono",monospace} #activeExpedition.sm-root .ruins-map__exit{position:relative;display:grid;align-content:center;justify-items:center;gap:3px;min-height:44px;min-width:0;padding:9px 8px;border:1px solid var(--sm-line);background:#08161a;color:#a7c3c8;cursor:pointer;text-align:center;transition:border-color .15s,background .15s} #activeExpedition.sm-root .ruins-map__exit:hover:not(:disabled){border-color:var(--sm-cyan);background:#0d2226} #activeExpedition.sm-root .ruins-map__exit:disabled{opacity:.4;cursor:not-allowed} #activeExpedition.sm-root .ruins-map__exit-label{font:700 8px/1.2 Unbounded,sans-serif;letter-spacing:.08em;overflow-wrap:anywhere} #activeExpedition.sm-root .ruins-map__exit-cost{color:#a58c56;font:7px/1.3 "DM Mono",monospace;letter-spacing:.06em} #activeExpedition.sm-root .ruins-map__exit-return{color:#7fb3c1;font:500 7px/1 "DM Mono",monospace;letter-spacing:.12em} #activeExpedition.sm-root .ruins-map__exit-badge{padding:2px 5px;border:1px solid #4f8f6a;color:#8fd8ac;font:500 6px/1 "DM Mono",monospace;letter-spacing:.1em} #activeExpedition.sm-root .ruins-map__exit-unknown{color:var(--sm-dim);font:600 13px/1 "DM Mono",monospace} /* Sin explorar = borde punteado e interrogante. Ya visitada = borde verde y su nombre real. Regreso = borde cian y la flecha. Ninguna de las tres dice nada del contenido: la diferencia es sólo "ya estuviste aquí o no". */ #activeExpedition.sm-root .ruins-map__exit--unknown{border-style:dashed} #activeExpedition.sm-root .ruins-map__exit--visited{border-color:#4f8f6a} #activeExpedition.sm-root .ruins-map__exit--previous{border-color:#4a7b84;background:#0a1c20} /* Conectores decorativos hacia el centro. 2px y color var(--sm-dim) para que se lean como corredores, no como separadores. El conector del regreso (slot bottom + variante previous) usa el acento cian para diferenciarse. */ #activeExpedition.sm-root .ruins-map__slot--top::after, #activeExpedition.sm-root .ruins-map__slot--bottom::after, #activeExpedition.sm-root .ruins-map__slot--left::after, #activeExpedition.sm-root .ruins-map__slot--right::after{content:"";position:absolute;background:var(--sm-dim)} #activeExpedition.sm-root .ruins-map__slot--top::after{left:50%;top:100%;width:2px;height:var(--rm-gap)} #activeExpedition.sm-root .ruins-map__slot--bottom::after{left:50%;bottom:100%;width:2px;height:var(--rm-gap)} #activeExpedition.sm-root .ruins-map__slot--left::after{left:100%;top:50%;height:2px;width:var(--rm-gap)} #activeExpedition.sm-root .ruins-map__slot--right::after{right:100%;top:50%;height:2px;width:var(--rm-gap)} #activeExpedition.sm-root .ruins-map__slot--bottom.ruins-map__exit--previous::after{background:var(--sm-cyan)} /* Acciones de la sala: bloque aparte, debajo del mapa. Navegar y actuar no se mezclan. */ #activeExpedition.sm-root .ruins-map__actions{margin-top:10px;border-top:1px solid var(--sm-line);padding-top:10px} @media(max-width:640px){ #activeExpedition.sm-root .ruins-map{--rm-gap:9px;grid-template-columns:1fr minmax(0,1.1fr) 1fr} #activeExpedition.sm-root .ruins-map__center{padding:9px 7px} #activeExpedition.sm-root .ruins-map__center-label{font-size:8px} #activeExpedition.sm-root .ruins-map__center-desc{display:none} #activeExpedition.sm-root .ruins-map__exit{padding:8px 4px} #activeExpedition.sm-root .ruins-map__exit-label{font-size:7px;letter-spacing:.04em} } /* Estado de extracción en la cabecera: por qué la lanzadera puede o no bajar. */ #activeExpedition.sm-root .sm-objective .sm-ruins-extract-status{display:block;margin-top:3px;color:#87dbe3;font:500 7px/1.4 "DM Mono",monospace;letter-spacing:.1em} /* Evacuar es destructivo (se pierde la carga): tratamiento rojo explícito. Sólo estilo — el botón sigue disparando exactamente la misma acción. */ #activeExpedition.sm-root .sm-evac.is-danger{border-color:var(--sm-red);background:linear-gradient(90deg,#2a1010,#180c0c);color:#f0a49b;font-weight:700;letter-spacing:.14em} #activeExpedition.sm-root .sm-evac.is-danger:hover{background:#3a1616;box-shadow:0 0 16px #c1524733} /* Insignias de modo del panel orbital (hub de operaciones). */ #planetProgressPanel .planet-ops-title{margin-top:6px;color:#ddaf62;font:500 8px/1.2 "DM Mono",monospace;letter-spacing:.14em} #planetProgressPanel .planet-ops-title:first-child{margin-top:0} #planetProgressPanel .planet-op-badge{align-self:flex-start;padding:3px 6px;border:1px solid #466e76;color:#87dbe3;font:500 7px/1 "DM Mono",monospace;font-style:normal;letter-spacing:.12em} #planetProgressPanel .planet-op-badge.badge-mining{border-color:#9b7d45;color:#e6be70} #planetProgressPanel .planet-op-badge.badge-ruins{border-color:#8a6ea8;color:#c4a9df} #planetProgressPanel .planet-op-badge.badge-signal{border-color:#4f8fa8;color:#8fd0e3} #planetProgressPanel .planet-op-badge.badge-rescue{border-color:#a85f5f;color:#e39a9a} #planetProgressPanel .planet-op-cta{margin-top:2px;color:#87dbe3;font:500 8px/1 "DM Mono",monospace;font-style:normal;letter-spacing:.1em} #planetProgressPanel .planet-op-card:disabled{opacity:.45;cursor:not-allowed} #planetProgressPanel .planet-op-card:disabled .planet-op-cta{color:#6a9298} /* ---- Hub orbital: una sola columna de lectura ---------------------------- El hub (#expeditionStatus) y las operaciones planetarias (#planetProgressPanel) son ahora dos bloques contiguos de la MISMA pantalla, y el planificador de ruta es una pantalla distinta que se abre con ABRIR NAVEGACIÓN. `data-orbit-nav` sólo describe cuál de las dos está activa; el HTML de cada una lo decide expedition.js. */ .orbit-status{margin:11px 0 0;padding:8px 10px;border:1px solid #263b40;background:#0b1315;color:#c9d7d8;font:500 9px/1.4 "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase} .expedition-status .living-intel{margin-top:11px} .orbit-nav-actions{margin-top:12px;padding-top:12px;border-top:1px solid #263d42} body[data-orbit-nav="open"] #planetProgressPanel{display:none} /* #scene es un contenedor compartido: la vista de base (scene.js), el planificador legacy (galaxy.js) y el planificador online (multiplayer.js) escriben todos dentro de él. Mientras el hub orbital manda la pantalla (lejos de base, planificador cerrado) nada debe pintarse ahí debajo; al pulsar ABRIR NAVEGACIÓN vuelve a mostrarse para el planificador que corresponda. El ownership real (qué script puede escribir) se resuelve en JS -- esto sólo evita que el último renderer que escribió quede visible por error mientras el hub está activo. */ body[data-away="yes"][data-orbit-nav="closed"] #scene{display:none} /* Lejos de base, #shipPanel compite por protagonismo con el hub orbital: se mantiene la misma lógica de renderShip() (sin tocarla) y se comprime sólo la presentación -- una fila de 4 estadísticas en vez de una tarjeta grande. */ body[data-away="yes"] #shipPanel h2{margin:0 0 6px;font:500 8px/1 "DM Mono",monospace;letter-spacing:.14em;color:#7f9296;text-transform:uppercase} body[data-away="yes"] #shipPanel .ship-grid{grid-template-columns:repeat(4,1fr);gap:6px} body[data-away="yes"] #shipPanel .ship-grid div{padding:6px 8px} body[data-away="yes"] #shipPanel .ship-grid span{font-size:7px} body[data-away="yes"] #shipPanel .ship-grid b{font-size:9px;margin:3px 0} @media(max-width:760px){ .orbit-status{font-size:8px;line-height:1.5} .orbit-nav-actions{margin-top:10px;padding-top:10px} /* La regla base (game.css) fuerza .ship-grid a una sola columna en mobile; lejos de base eso son 4 filas apiladas para un panel secundario -- 2x2 mantiene la misma información en la mitad del alto. */ body[data-away="yes"] #shipPanel .ship-grid{grid-template-columns:repeat(2,1fr)} }