@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;width:100%}
body{background:#000;color:#bff;overflow:hidden;font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:none}

#cockpit, #worlds {position:fixed;inset:0;transition:opacity 1.2s ease}
#cockpit {z-index:10;background:radial-gradient(ellipse at center,#00131f 0%,#000000 70%)}
#worlds {z-index:5;opacity:0;pointer-events:none}
#worlds.active{opacity:1;pointer-events:auto}
#cockpit.hidden{opacity:0;pointer-events:none;visibility:hidden}
canvas{display:block;outline:none}

/* HUD Nave */
.hud-frame{position:absolute;inset:0;pointer-events:none;z-index:20;
  background:
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.9) 100%),
    linear-gradient(transparent 50%, rgba(0,243,255,0.03) 50%);
  background-size:100% 100%, 100% 4px;
}
.hud-corner{position:absolute;width:120px;height:120px;border:2px solid #00f3ff;opacity:0.7;pointer-events:none;transition:0.3s}
.hud-corner.tl{top:24px;left:24px;border-right:none;border-bottom:none;box-shadow:0 0 20px rgba(0,243,255,0.4)}
.hud-corner.tr{top:24px;right:24px;border-left:none;border-bottom:none;box-shadow:0 0 20px rgba(0,243,255,0.4)}
.hud-corner.bl{bottom:24px;left:24px;border-right:none;border-top:none;box-shadow:0 0 20px rgba(0,243,255,0.4)}
.hud-corner.br{bottom:24px;right:24px;border-left:none;border-top:none;box-shadow:0 0 20px rgba(0,243,255,0.4)}

.panel{position:absolute;background:rgba(2,15,28,0.75);border:1px solid rgba(0,243,255,0.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:14px 16px;z-index:25;box-shadow:0 0 30px rgba(0,243,255,0.1), inset 0 0 20px rgba(0,243,255,0.05);max-width:320px;transition:0.3s}
.panel h3{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:#7df9ff;letter-spacing:2px;margin-bottom:8px;text-transform:uppercase;font-weight:700}
.panel .line{font-size:0.82rem;line-height:1.5;opacity:0.9;margin:4px 0;font-family:'JetBrains Mono',monospace}
.panel .ok{color:#00ffaa}.panel .warn{color:#ffbb00}.panel .info{color:#00f3ff}

#panel-status{top:70px;left:40px}
#panel-news{top:70px;right:40px;width:340px}
#panel-ia{bottom:110px;left:40px;width:360px}

#center-hud{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:25;pointer-events:none;width:90%;max-width:600px}
#center-hud .logo{font-size:clamp(2.2rem,6vw,3.5rem);font-weight:600;letter-spacing:6px;color:#00f3ff;text-shadow:0 0 30px #00f3ff,0 0 60px rgba(0,243,255,0.8);animation:pulse 3s infinite}
#center-hud .sub{margin-top:8px;font-family:'JetBrains Mono';font-size:clamp(0.7rem,1.8vw,0.85rem);opacity:0.7;letter-spacing:3px}
@keyframes pulse{0%,100%{opacity:0.9}50%{opacity:1;text-shadow:0 0 40px #00f3ff,0 0 80px #00f3ff}}

#btn-explorar{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);z-index:30;background:linear-gradient(180deg,rgba(0,243,255,0.2),rgba(0,243,255,0.05));border:2px solid #00f3ff;color:#eaffff;padding:16px 42px;font-family:'JetBrains Mono';font-size:1rem;letter-spacing:3px;border-radius:12px;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 30px rgba(0,243,255,0.4),inset 0 0 20px rgba(0,243,255,0.15);transition:0.3s;white-space:nowrap}
#btn-explorar:hover{background:rgba(0,243,255,0.25);box-shadow:0 0 50px rgba(0,243,255,0.7);transform:translateX(-50%) scale(1.05)}
#btn-explorar:active{transform:translateX(-50%) scale(0.98)}

#sello-nave{position:absolute;bottom:24px;right:40px;z-index:25;font-size:0.8rem;color:rgba(0,243,255,0.6);text-align:right;font-family:'JetBrains Mono';line-height:1.4}

/* Worlds UI */
#webgl{position:absolute;inset:0}
#ui-top{position:absolute;top:0;left:0;right:0;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:linear-gradient(180deg,rgba(0,10,20,0.9),transparent);border-bottom:1px solid rgba(0,243,255,0.15);z-index:20;backdrop-filter:blur(8px)}
#ui-top .logo{color:#00f3ff;font-weight:700;letter-spacing:3px;text-shadow:0 0 12px #00f3ff;font-size:0.95rem}
#ui-top .hint{font-size:0.8rem;opacity:0.7;font-family:'JetBrains Mono'}

#planetView{position:fixed;inset:0;z-index:50;display:none;background:radial-gradient(ellipse at center,#020a1a 0%,#000 70%);align-items:center;justify-content:center;padding:20px}
#planetView.active{display:flex}
#mapWrap{width:min(1100px,92vw);height:min(680px,78vh);border-radius:20px;overflow:hidden;border:1px solid rgba(0,243,255,0.4);box-shadow:0 0 60px rgba(0,243,255,0.25);position:relative;background:#000a14}
#map{width:100%;height:100%;background:#00111a}
#planetHeader{position:absolute;top:16px;left:20px;z-index:401;background:rgba(0,10,20,0.85);padding:8px 14px;border-radius:10px;border:1px solid rgba(0,243,255,0.3);backdrop-filter:blur(8px)}
#planetHeader h2{margin:0;font-size:0.95rem;color:#00f3ff;font-family:'JetBrains Mono';letter-spacing:1px}
#closePlanet{position:absolute;top:16px;right:20px;z-index:402;background:rgba(255,51,102,0.15);border:1px solid rgba(255,51,102,0.5);color:#ff8fb1;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:0.8rem;font-family:'JetBrains Mono';backdrop-filter:blur(8px);transition:0.2s}
#closePlanet:hover{background:rgba(255,51,102,0.3)}

.leaflet-container{background:#000a14 !important}

/* Mobile */
@media (max-width:900px){
  .hud-corner{width:70px;height:70px}
  .hud-corner.tl{top:14px;left:14px}
  .hud-corner.tr{top:14px;right:14px}
  .hud-corner.bl{bottom:14px;left:14px}
  .hud-corner.br{bottom:14px;right:14px}
  #panel-status{top:62px;left:14px;right:14px;max-width:none}
  #panel-news{top:auto;bottom:180px;right:14px;left:14px;width:auto;display:none}
  #panel-ia{bottom:110px;left:14px;right:14px;width:auto}
  #sello-nave{display:none}
  #btn-explorar{bottom:28px;padding:14px 26px;font-size:0.88rem;letter-spacing:2px}
  #ui-top{padding:0 14px;height:52px}
  #ui-top .hint{display:none}
}
@media (max-width:600px){
  #panel-news{display:none}
  #panel-ia{display:none}
  .panel{padding:10px 12px}
  .panel .line{font-size:0.75rem}
}