/* ══ TOPBAR ══ */
.topbar {
  height: 56px;
  background: rgba(4,8,18,0.96);
  background-image: repeating-linear-gradient(90deg, transparent, transparent 200px, rgba(255,255,255,0.02) 200px, rgba(255,255,255,0.02) 201px);
  border-bottom: 1px solid rgba(var(--accent-rgb),0.45);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  position: relative; z-index: 200;
  box-shadow: 0 2px 20px rgba(0,0,0,0.9);
  backdrop-filter: blur(10px);
}
.topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--gold) 50%, var(--accent) 70%, transparent 100%);
  opacity: 0.7;
}
.logo-wrap { display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.logo {
  font-family: 'Orbitron', monospace;
  font-size: 12px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, var(--accent2), var(--gold2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter: drop-shadow(0 0 8px rgba(var(--accent2-rgb),0.4));
}
.logo-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px; letter-spacing: 0.5px; color: var(--textsoft);
  text-transform: uppercase;
}

/* Resources in topbar */
.tb-resources {
  display:flex; align-items:center; gap:14px;
  flex:1; justify-content:center;
  padding:0 20px;
}
.rb-item { display:flex; align-items:center; gap:5px; white-space:nowrap; position:relative; cursor:default; padding:6px 12px; border-radius:8px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); transition:all 0.2s; }
.rb-item:hover { background:rgba(255,255,255,0.08); transform:translateY(-1px); box-shadow:0 2px 12px rgba(0,0,0,0.4); }
#rbItemMetal { background:rgba(91,141,217,0.08); border-color:rgba(91,141,217,0.25); }
#rbItemMetal:hover { background:rgba(91,141,217,0.16); border-color:rgba(91,141,217,0.4); }
#rbItemNaq { background:rgba(212,146,10,0.08); border-color:rgba(212,146,10,0.25); }
#rbItemNaq:hover { background:rgba(212,146,10,0.16); border-color:rgba(212,146,10,0.4); }
#rbItemNaqria { background:rgba(72,202,228,0.08); border-color:rgba(72,202,228,0.25); }
#rbItemNaqria:hover { background:rgba(72,202,228,0.16); border-color:rgba(72,202,228,0.4); }
#rbItemHommes { background:rgba(46,204,136,0.08); border-color:rgba(46,204,136,0.25); }
#rbItemHommes:hover { background:rgba(46,204,136,0.16); border-color:rgba(46,204,136,0.4); }
#rbItemEne { background:rgba(240,192,64,0.08); border-color:rgba(240,192,64,0.25); }
#rbItemEne:hover { background:rgba(240,192,64,0.16); border-color:rgba(240,192,64,0.4); }
.tb-resources .rb-lbl { font-size:22px; flex-shrink:0; line-height:1; filter:drop-shadow(0 0 4px rgba(255,255,255,0.3)); }
.rb-val {
  font-family:'Share Tech Mono',monospace; font-size:16px; color:var(--gold2);
  min-width:50px; text-align:right; font-weight:700;
  text-shadow: 0 0 8px rgba(240,192,64,0.3);
}
#rbItemMetal .rb-val { color:#7ab3ff; text-shadow:0 0 8px rgba(91,141,217,0.4); }
#rbItemNaq .rb-val { color:#f0c040; text-shadow:0 0 8px rgba(212,146,10,0.4); }
#rbItemNaqria .rb-val { color:#5ee8ff; text-shadow:0 0 8px rgba(72,202,228,0.4); }
#rbItemHommes .rb-val { color:#44dd99; text-shadow:0 0 8px rgba(46,204,136,0.4); }
#rbItemEne .rb-val { text-shadow:0 0 8px rgba(240,192,64,0.4); }
.rb-rate { font-family:'Share Tech Mono',monospace; font-size: 12px; color:var(--success); opacity:0.8; white-space:nowrap; margin-left:3px; }
.rb-sep { width:2px; height:24px; background:linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.4), transparent); box-shadow:0 0 4px rgba(var(--accent-rgb),0.2); flex-shrink:0; }
.rb-tooltip {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:rgba(8,14,28,0.96); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:6px;
  padding:8px 12px; min-width:140px; z-index:300; backdrop-filter:blur(12px);
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
  font-family:'Share Tech Mono',monospace; font-size:14px; color:var(--text); line-height:1.7;
  pointer-events:none; margin-top:4px;
}
.rb-tooltip::before {
  content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:5px solid rgba(var(--accent-rgb),0.3);
}
.rb-item:hover .rb-tooltip { display:block; }

/* Gate screen bg */
.res-strip { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.rp-res-ico svg, .rp-cost-ico svg { vertical-align:middle; display:inline-block; }

/* ══ LAYOUT ══ */
.app {
  display:grid; grid-template-rows:56px 1fr;
  height:100vh; height:100dvh;
  overflow:hidden;
  width:100%; max-width:1700px;
  border-left:1px solid rgba(var(--accent-rgb),0.30);
  border-right:1px solid rgba(var(--accent-rgb),0.30);
  box-shadow: 0 0 60px rgba(0,0,0,0.7);
}
/* ════════════════════════════════════ */
.res-bar-bg { height:5px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.res-bar-f { height:100%; border-radius:3px; transition:width 0.8s; }

/* Building detail pane — see OGame section below */
.bdd-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bdd-icon { font-size:26px; }
.bdd-name { font-family:'Orbitron',monospace; font-size: 15px; font-weight:700; color:var(--textbright); letter-spacing:1px; }
.bdd-sub { font-size: 14px; margin-top:2px; }
.bdd-stat { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--border); }
.bdd-stat:last-of-type { border-bottom:none; }
.bdd-sl { font-size: 14px; color:var(--textmid); }
.bdd-sv { font-family:'Share Tech Mono',monospace; font-size: 14px; color:var(--textbright); }
.bdd-btn {
  width:100%; margin-top:10px; padding:10px;
  font-family:'Orbitron',monospace; font-size: 14px; font-weight:700; letter-spacing:2px;
  border:1px solid var(--accent); color:var(--accent);
  background:rgba(var(--accent2-rgb),0.08); cursor:pointer; border-radius:6px;
  transition:all 0.2s; box-shadow:var(--inset);
}
.bdd-btn:hover { background:rgba(var(--accent2-rgb),0.16); box-shadow:0 0 14px var(--accentglow); transform:translateY(-1px); }
.sect-label {
  font-family:'Share Tech Mono',monospace; font-size: 14px; color:var(--textsoft);
  letter-spacing:2px; text-transform:uppercase;
  border-bottom:1px solid var(--border); padding-bottom:5px; margin-bottom:8px;
}

/* ════════════════════════════════════ */
.rb-icon { font-size:22px; transition:transform 0.2s; }
.rb:hover .rb-icon,.rb.act .rb-icon { transform:scale(1.15); }
.rb-lbl { font-family:'Orbitron',monospace; font-size: 11px; letter-spacing:1px; color:var(--textsoft); text-align:center; text-transform:uppercase; }
.rb-cnt { font-family:'Share Tech Mono',monospace; font-size: 11px; padding:1px 6px; border-radius:10px; border:1px solid var(--border); color:var(--textsoft); }

.tech-main { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.tech-hdr {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 20px; display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; box-shadow:0 2px 10px rgba(0,10,30,0.3);
}
.th-l { display:flex; align-items:center; gap:14px; }
.th-icon { font-size:32px; }
.th-name { font-family:'Cinzel',serif; font-size:20px; font-weight:600; letter-spacing:4px; transition:color 0.4s; }
.th-lore { font-size:13px; color:var(--textsoft); max-width:400px; margin-top:2px; line-height:1.4; }
.th-r { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.th-plbl { font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--textmid); }
.th-pbar { width:180px; height:5px; background:var(--surface3); border-radius:3px; overflow:hidden; border:1px solid var(--border); }
.th-pfill { height:100%; border-radius:3px; transition:width 0.8s, background 0.4s; }

/* Tech cards (OGame-style grid) */
.user-chip {
  display:flex; align-items:center; gap:6px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:20px; padding:4px 12px;
  font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--textmid);
  transition:all 0.2s;
}
.user-chip:hover { background:rgba(212,146,10,0.12); border-color:rgba(212,146,10,0.4); color:var(--gold2); }
/* ── Notification bell ── */
.notif-wrap { position:relative; }
.notif-bell { display:flex; align-items:center; justify-content:center; width:32px; height:32px; background:var(--surface2); border:1px solid var(--border); border-radius:50%; cursor:pointer; font-size:14px; transition:all 0.2s; flex-shrink:0; }
.notif-bell:hover { background:rgba(var(--accent-rgb),0.15); border-color:var(--accent); }
.notif-bell.has-unread { border-color:rgba(255,160,40,0.6); animation:bellRing 2s ease-in-out infinite; }
.notif-badge { position:absolute; top:-4px; right:-4px; background:var(--danger); color:#fff; font-family:'Share Tech Mono',monospace; font-size: 12px; font-weight:700; border-radius:50%; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.notif-dropdown { position:absolute; top:calc(100% + 8px); right:0; width:320px; background:rgba(10,18,32,0.97); border:1px solid rgba(var(--accent-rgb),0.3); border-radius:6px; backdrop-filter:blur(12px); z-index:1000; box-shadow:0 8px 32px rgba(0,0,0,0.6); display:none; flex-direction:column; max-height:380px; overflow:hidden; }
.notif-dropdown.open { display:flex; }
.notif-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.06); }
.notif-title { font-family:'Orbitron',monospace; font-size: 12px; font-weight:700; color:var(--accent); letter-spacing:1.5px; }
.notif-mark-all { font-family:'Share Tech Mono',monospace; font-size: 12px; color:var(--textsoft); cursor:pointer; padding:2px 6px; border-radius:3px; border:1px solid rgba(255,255,255,0.1); }
.notif-mark-all:hover { color:#fff; border-color:rgba(255,255,255,0.3); }
.notif-list { overflow-y:auto; flex:1; }
.notif-item { display:flex; align-items:flex-start; gap:8px; padding:9px 14px; border-bottom:1px solid rgba(255,255,255,0.04); cursor:default; }
.notif-item.unread { background:rgba(var(--accent-rgb),0.06); }
.notif-item:hover { background:rgba(255,255,255,0.04); }
.notif-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:4px; }
.notif-item.read .notif-dot { background:transparent; border:1px solid rgba(255,255,255,0.15); }
.notif-msg { font-family:'Share Tech Mono',monospace; font-size: 12px; color:#a8c0d8; line-height:1.5; flex:1; }
.notif-msg.log-ok  { color:var(--success); }
.notif-msg.log-err { color:var(--danger); }
.notif-time { font-size:var(--fs-xs); color:var(--textsoft); flex-shrink:0; }
.notif-empty { padding:24px; text-align:center; font-family:'Share Tech Mono',monospace; font-size: 12px; color:var(--textsoft); }
.notif-item-body  { display:flex; flex-direction:column; gap:1px; flex:1; }
.notif-item-title { font-family:'Share Tech Mono',monospace; font-size: 12px; font-weight:bold; color:var(--textbright); }
.notif-item-sub   { font-family:'Share Tech Mono',monospace; font-size: 11px; color:var(--textsoft); }
.notif-item[onclick] { cursor:pointer; }
.logout-btn {
  padding:5px 10px; border-radius:4px; cursor:pointer;
  border:1px solid rgba(224,80,80,0.35); color:var(--danger);
  background:rgba(224,80,80,0.07); font-size: 11px; font-family:'Orbitron',monospace;
  transition:all 0.2s; letter-spacing:1px;
}
.logout-btn:hover { background:rgba(224,80,80,0.16); }

::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background:var(--surface3); border-radius:2px; }

/* ══ MAIN LAYOUT — Left nav + right content ══ */
.main-layout { display:flex; overflow:hidden; height:100%; }

/* ══ LEFT NAV — OGame style ══ */
.left-nav {
  width:260px; flex-shrink:0;
  background:linear-gradient(180deg, rgba(14,14,20,0.97) 0%, rgba(20,20,28,0.95) 50%, rgba(14,14,20,0.97) 100%);
  border-right:2px solid rgba(var(--accent-rgb),0.45);
  box-shadow:inset -20px 0 40px rgba(var(--accent-rgb),0.04), 4px 0 20px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; backdrop-filter:blur(12px);
}
.left-nav::-webkit-scrollbar { display:none; }
.lnav-thumb { display:none; }
.lnav-header {
  padding:16px 18px; font-family:'Orbitron',monospace; font-size: 15px; font-weight:700;
  color:var(--accent2); background:linear-gradient(180deg, rgba(var(--accent-rgb),0.12) 0%, rgba(var(--accent-rgb),0.04) 100%);
  border-bottom:2px solid rgba(var(--accent-rgb),0.4);
  box-shadow:0 2px 12px rgba(var(--accent-rgb),0.15);
  letter-spacing:2.5px; flex-shrink:0; text-transform:uppercase;
  text-shadow:0 0 10px rgba(var(--accent-rgb),0.3);
}
.lnav-sep {
  font-family:'Orbitron',monospace; font-size: 14px; color:rgba(var(--accent-rgb),0.7);
  letter-spacing:2.5px; padding:12px 16px 5px; text-transform:uppercase; flex-shrink:0;
}
.lnav-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 12px 18px; cursor:pointer; flex-shrink:0;
  border-bottom:1px solid rgba(var(--accent-rgb),0.15);
  transition:all 0.2s ease; min-height:50px; position:relative;
}
.lnav-item:hover { background:rgba(var(--accent-rgb),0.12); border-left:4px solid rgba(var(--accent-rgb),0.5); padding-left:14px; transform:translateX(2px); }
.lnav-item.active { background:linear-gradient(90deg, rgba(var(--accent-rgb),0.22) 0%, rgba(var(--accent-rgb),0.06) 100%); border-left:4px solid var(--accent); padding-left:14px; box-shadow:inset 6px 0 18px rgba(var(--accent-rgb),0.2), 0 0 8px rgba(var(--accent-rgb),0.1); }
.lnav-lbl {
  font-family:'Rajdhani',sans-serif; font-size:18px; font-weight:600;
  color:var(--text); line-height:1.2; flex:1;
}
.lnav-item:hover .lnav-lbl { color:var(--textbright); }
.lnav-item.active .lnav-lbl { color:var(--textbright); font-weight:700; text-shadow:0 0 8px rgba(var(--accent-rgb),0.3); }
.lnav-ico {
  width:42px; height:42px; border-radius:6px; flex-shrink:0;
  background:rgba(var(--accent-rgb),0.06); border:1px solid rgba(var(--accent-rgb),0.3);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  transition:all 0.2s ease;
}
.lnav-ico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.lnav-item:hover .lnav-ico { border-color:rgba(var(--accent-rgb),0.5); background:rgba(var(--accent-rgb),0.1); }
.lnav-item.active .lnav-ico { border-color:rgba(var(--accent-rgb),0.7); background:rgba(var(--accent-rgb),0.18); box-shadow:0 0 8px rgba(var(--accent-rgb),0.2); }
.lnav-div { height:2px; background:linear-gradient(90deg, transparent 5%, rgba(var(--accent-rgb),0.35) 50%, transparent 95%); margin:3px 0; flex-shrink:0; }

/* ══ CENTER CONTENT ══ */
.center-content {
  flex:1; min-width:0;
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, rgba(10,10,16,0.3) 0%, transparent 15%, transparent 85%, rgba(10,10,16,0.3) 100%);
  position:relative;
}
/* ── Star dust particles ── */
@keyframes starDust {
  0%   { background-position:0 0, 50px 100px, 100px 50px; }
  100% { background-position:0 -600px, 50px -500px, 100px -550px; }
}
.center-content::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.15), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.1), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.12), transparent);
  background-size:300px 600px;
  animation:starDust 30s linear infinite;
}
.planet-frame { display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* Section header image — OGame wide banner */
.sec-hdr {
  position:relative; flex-shrink:0; height:280px; overflow:hidden;
  border-bottom:2px solid rgba(var(--accent-rgb),0.45);
}
.sec-hdr::after {
  content:''; position:absolute; bottom:0; left:5%; right:5%; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent2) 50%, var(--accent) 80%, transparent);
  box-shadow:0 0 12px rgba(var(--accent-rgb),0.6), 0 0 30px rgba(var(--accent-rgb),0.25); z-index:2;
}
.sec-hdr img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.82); }
.sec-hdr.no-img { height:70px; background:linear-gradient(135deg,rgba(20,20,28,0.95) 0%,rgba(32,32,44,0.9) 100%); }
.sec-hdr-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 50%, rgba(16,16,22,0.7) 80%, rgba(16,16,22,0.95) 100%);
}
.sec-hdr-title {
  position:absolute; top:0; left:0; right:0; padding:12px 0;
  font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700;
  color:#ffffff; text-align:center; letter-spacing:1px;
  text-shadow:0 1px 8px rgba(0,0,0,0.9);
}

/* Planet section (scrollable content) */
.planet-section {
  flex:1; overflow-y:auto; position:relative;
  background:rgba(16,16,22,0.85);
  backdrop-filter:blur(6px);
}
.planet-section::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(var(--accent-rgb),0.018) 3px, rgba(var(--accent-rgb),0.018) 4px);
  pointer-events:none; z-index:1;
}
.planet-section::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.2) 100%);
  pointer-events:none; z-index:1;
}

/* ══ RIGHT PANEL ══ */
.right-panel {
  width:300px; max-width:300px; flex-shrink:0;
  background:linear-gradient(180deg, rgba(14,14,20,0.96) 0%, rgba(20,20,28,0.94) 50%, rgba(14,14,20,0.96) 100%);
  border-left:2px solid rgba(var(--accent-rgb),0.4);
  box-shadow:inset 20px 0 40px rgba(var(--accent-rgb),0.04), -4px 0 20px rgba(0,0,0,0.5);
  display:flex; flex-direction:column; align-items:center;
  padding:18px 14px 12px; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; backdrop-filter:blur(10px);
}
.right-panel > * { overflow-wrap:break-word; word-break:break-word; max-width:100%; }
.right-panel::-webkit-scrollbar { display:none; }
/* Planet wrapper — holds sphere + orbital rings */
.rp-planet-wrap {
  position:relative; width:180px; height:180px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  perspective:400px;
  animation: sphereFloat 7s ease-in-out infinite;
}
/* Orbital rings — ellipses via width/height ratio */
.rp-orbit {
  position:absolute; top:50%; left:50%; border-radius:50%;
  border:2px solid rgba(var(--accent-rgb),0.35);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.2), inset 0 0 8px rgba(var(--accent-rgb),0.1);
  pointer-events:none; animation: orbitSpin 18s linear infinite;
  transform-style:preserve-3d;
}
.rp-orbit-1 {
  width:175px; height:175px;
  margin-top:-87px; margin-left:-87px;
  transform: rotateX(70deg);
}
.rp-orbit-2 {
  width:200px; height:200px;
  margin-top:-100px; margin-left:-100px;
  transform: rotateX(70deg) rotateZ(25deg);
  border-color:rgba(var(--accent-rgb),0.22);
  animation-duration:26s; animation-direction:reverse;
}
/* Orbit dots — bright glowing beads */
.rp-orbit-dot {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:rgba(var(--accent-rgb),0.9);
  box-shadow: 0 0 10px rgba(var(--accent-rgb),0.8), 0 0 20px rgba(var(--accent-rgb),0.4);
}
.rp-orbit-1 .rp-orbit-dot { top:-3px; left:50%; margin-left:-3px; }
.rp-orbit-2 .rp-orbit-dot { top:-3px; left:50%; margin-left:-3px; }
/* Aura glow behind planet */
.rp-aura {
  position:absolute; width:160px; height:160px; top:50%; left:50%;
  margin-top:-80px; margin-left:-80px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),0.25) 0%, rgba(var(--accent-rgb),0.08) 50%, transparent 72%);
  animation: auraPulse 4s ease-in-out infinite; pointer-events:none;
}
/* CSS planet sphere — 3D animated (Option C) */
.rp-sphere {
  width:130px; height:130px; aspect-ratio:1/1; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 32%, #d0eeff 0%, #3a88e0 18%, #1448a0 45%, #061838 72%, #020810 100%);
  box-shadow:
    0 0 50px rgba(var(--accent-rgb),0.50),
    0 0 100px rgba(var(--accent-rgb),0.20),
    -12px 0 28px rgba(0,0,0,0.85),
    inset -14px -10px 32px rgba(0,0,0,0.85),
    0 0 0 2px rgba(var(--accent-rgb),0.18);
  position:relative; overflow:hidden; z-index:2;
  animation: sphereGlow 4s ease-in-out infinite;
}
.rp-sphere svg { width:100%; height:100%; display:block; position:relative; z-index:2; }
/* Hide CSS continents/atmosphere when procedural SVG is present */
.rp-sphere:has(svg)::before, .rp-sphere:has(svg)::after { display:none; }
.rp-sphere::before { /* spinning continents — fallback when no SVG */
  content:''; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(ellipse 45% 28% at 40% 50%, rgba(46,170,80,0.60) 0%, transparent 100%),
    radial-gradient(ellipse 28% 20% at 68% 36%, rgba(55,150,65,0.45) 0%, transparent 100%),
    radial-gradient(ellipse 22% 22% at 24% 66%, rgba(40,130,55,0.50) 0%, transparent 100%),
    radial-gradient(ellipse 18% 14% at 72% 68%, rgba(160,110,50,0.30) 0%, transparent 100%);
  animation: continentSpin 28s linear infinite;
}
.rp-sphere::after { /* atmosphere — fallback when no SVG */
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:radial-gradient(circle at 30% 26%, rgba(160,230,255,0.22) 0%, transparent 52%);
  animation: atmoPulse 4s ease-in-out infinite;
}
.mac-title {
  font-family:'Orbitron',monospace; font-size: 15px; font-weight:700;
  color:var(--accent2); letter-spacing:1.5px; margin-bottom:6px;
}
.mac-planet {
  font-family:'Share Tech Mono',monospace; font-size: 15px;
  color:var(--textbright); margin-bottom:8px;
}
.mac-bar-bg { background:rgba(255,255,255,0.07); border-radius:3px; height:5px; overflow:hidden; margin-top:5px; }
.mac-bar-fill { background:linear-gradient(90deg,var(--accent),var(--success)); height:100%; transition:width 1s linear; }
.rp-planet-nav {
  display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:5px;
}
.rp-nav-arrow {
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(var(--accent-rgb),0.5);
  background:rgba(var(--accent-rgb),0.08); color:var(--accent); font-size:13px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s ease; padding:0; line-height:1;
}
.rp-nav-arrow:hover {
  background:rgba(var(--accent-rgb),0.2); border-color:var(--accent);
  box-shadow:0 0 8px rgba(var(--accent-rgb),0.4);
}
.rp-planet-name {
  font-family:'Orbitron',monospace; font-size: 16px; font-weight:700;
  color:#c8d8f0; text-align:center; letter-spacing:2px; margin-bottom:0;
  cursor:pointer; position:relative; transition:color 0.15s;
}
.rp-planet-name:hover { color:var(--accent); }
.rp-planet-name:hover::after {
  content:' ✎'; font-size:13px; color:var(--accent); opacity:0.8;
}
.rp-planet-name:only-child { margin-bottom:5px; }
.rp-coords {
  font-family:'Share Tech Mono',monospace; font-size:14px;
  color:var(--textmid); text-align:center; margin-bottom:14px;
}
.rp-div { width:100%; height:1px; background:rgba(var(--accent-rgb),0.3); margin:10px 0; }
.rp-sec-lbl {
  font-family:'Orbitron',monospace; font-size:14px; color:rgba(var(--accent-rgb),0.8);
  letter-spacing:2px; text-transform:uppercase; text-align:center; margin-bottom:10px;
}
.rp-res-card {
  position:relative; padding:8px 10px 5px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02);
  transition:all 0.25s ease; overflow:hidden;
}
.rp-res-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:8px 0 0 8px; background:var(--rc); box-shadow:0 0 8px var(--rc);
}
.rp-res-card:hover {
  background:rgba(255,255,255,0.05); border-color:rgba(var(--rc-rgb),0.3);
  transform:translateX(2px); box-shadow:0 0 12px rgba(var(--rc-rgb),0.12);
}
.rp-res-metal   { --rc:#8ca8cc; --rc-rgb:140,168,204; }
.rp-res-naqria  { --rc:#5ee8ff; --rc-rgb:94,232,255; }
.rp-res-naq     { --rc:#f0c040; --rc-rgb:240,192,64; }
.rp-res-hommes  { --rc:#66dd88; --rc-rgb:102,221,136; }
.rp-res-energie { --rc:#44aaff; --rc-rgb:68,170,255; }
.rp-res-row {
  display:flex; align-items:center; gap:8px;
  width:100%; padding:0;
  font-family:'Share Tech Mono',monospace; font-size:15px;
}
.rp-res-ico {
  width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:6px; background:rgba(var(--rc-rgb),0.08); box-shadow:0 0 6px rgba(var(--rc-rgb),0.15);
  font-size:17px; transition:box-shadow 0.3s;
}
.rp-res-card:hover .rp-res-ico { box-shadow:0 0 12px rgba(var(--rc-rgb),0.35); }
.rp-res-info { display:flex; flex-direction:column; flex:1; min-width:0; gap:1px; }
.rp-res-lbl { color:var(--textbright); font-size:14px; font-weight:700; letter-spacing:0.5px; }
.rp-rate { font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--success); letter-spacing:0.3px; opacity:0.85; }
.rp-res-right { display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.rp-res-val {
  color:var(--gold); font-weight:bold; font-size:17px;
  text-shadow:0 0 8px rgba(255,192,64,0.5);
  font-family:'Orbitron',monospace; letter-spacing:0.5px;
}
.rp-res-val.rp-full { color:var(--danger); animation:rpValPulse 1.5s ease-in-out infinite; }
.rp-res-val.rp-full::after { content:' FULL'; font-size:12px; color:var(--danger); opacity:0.85; letter-spacing:1px; }
@keyframes rpValPulse { 0%,100%{opacity:1;} 50%{opacity:0.6;} }
.rp-res-max { font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--textsoft); opacity:0.6; }
.rp-bar-bg {
  height:8px; background:rgba(var(--rc-rgb),0.15); border-radius:4px;
  margin:3px 2px 1px; overflow:hidden;
}
.rp-bar-fill {
  height:100%; border-radius:4px; transition:width 1s linear;
  background:linear-gradient(90deg, rgba(var(--rc-rgb),0.5), rgba(var(--rc-rgb),0.85));
  box-shadow:0 0 6px rgba(var(--rc-rgb),0.4); position:relative;
}
.rp-bar-fill::after {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  animation:shimmerSweep 2s ease-in-out infinite; border-radius:4px;
}
.rp-bar-fill.rp-bar-warn {
  box-shadow:0 0 8px rgba(var(--rc-rgb),0.6);
  animation:rpBarGlow 1.5s ease-in-out infinite;
}
.rp-bar-fill.rp-bar-full {
  box-shadow:0 0 12px rgba(var(--rc-rgb),0.8);
  animation:rpBarGlow 1s ease-in-out infinite;
}
/* Planet selector in right panel */
.rp-planet-item {
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:5px;
  cursor:pointer; transition:background 0.15s; border:1px solid transparent;
  font-family:'Share Tech Mono',monospace; font-size: 14px; color:var(--textmid);
}
.rp-planet-item:hover { background:rgba(var(--accent-rgb),0.1); border-color:rgba(var(--accent-rgb),0.25); }
.rp-planet-active { background:rgba(var(--accent-rgb),0.15); border-color:rgba(var(--accent-rgb),0.4); color:var(--textbright); }
.rp-planet-thumb { width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0; border:1px solid rgba(var(--accent-rgb),0.3); }
.rp-planet-thumb svg { width:100%; height:100%; }
.rp-planet-info { flex:1; min-width:0; overflow:hidden; }
.rp-planet-nm { font-size: 14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-planet-co { font-size: 13px; color:var(--textsoft); }
.rp-planet-count { font-family:'Share Tech Mono',monospace; font-size: 13px; color:var(--textsoft); text-align:center; margin-top:5px; }
/* Colony toggle & list */
.rp-colony-toggle {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--textsoft);
  padding:4px 0; margin:2px 0 0; cursor:pointer; user-select:none;
  transition:color 0.2s; letter-spacing:1px;
}
.rp-colony-toggle:hover { color:var(--accent); }
.rp-colony-chevron { font-size:10px; transition:transform 0.3s ease; display:inline-block; }
.rp-colony-chevron.open { transform:rotate(180deg); }
.rp-colony-list {
  max-height:0; overflow:hidden; transition:max-height 0.35s ease;
  display:flex; flex-direction:column; gap:2px; width:100%; padding:0 2px;
}
.rp-colony-list.open { max-height:400px; }
.rp-colony-list .rp-planet-item { font-size:12px; padding:5px 6px; gap:6px; }
.rp-colony-list .rp-planet-thumb { width:26px; height:26px; }
.rp-colony-list .rp-planet-nm { font-size:12px; }
.rp-colony-list .rp-planet-co { font-size:11px; }
.rp-colony-bld-badge {
  font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--textsoft);
  background:rgba(var(--accent-rgb),0.1); border-radius:3px; padding:1px 5px;
}
.rp-colony-building-ico {
  font-size:10px; animation:loRingSpin 2s linear infinite; opacity:0.7;
}
/* Colony banner in center content */
.rp-colony-banner {
  display:flex; align-items:center; gap:8px; padding:8px 14px; margin-bottom:10px;
  background:rgba(212,146,10,0.08); border:1px solid rgba(212,146,10,0.3); border-radius:8px;
}
.rp-colony-banner-title { font-family:'Orbitron',monospace; font-size: 14px; font-weight:700; color:var(--gold2); flex:1; }
.rp-colony-banner-btn { background:none; border:1px solid rgba(var(--accent-rgb),0.4); color:var(--accent); border-radius:5px;
  padding:5px 12px; font-family:'Share Tech Mono',monospace; font-size: 13px; cursor:pointer; }
.rp-colony-banner-btn:hover { background:rgba(var(--accent-rgb),0.1); }
/* Planet metadata grid */
.rp-meta-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:4px 8px;
  width:100%; padding:4px 2px; font-family:'Share Tech Mono',monospace;
}
.rp-meta-item { display:flex; flex-direction:column; align-items:center; gap:1px; }
.rp-meta-lbl { font-size: 13px; color:var(--textsoft); text-transform:uppercase; letter-spacing:1px; }
.rp-meta-val { font-size: 15px; font-weight:bold; }
.rp-meta-full { grid-column:1/-1; text-align:center; }
.rp-meta-race-btn {
  cursor:pointer; transition:all 0.2s; padding:2px 6px; border-radius:4px;
  border:1px solid transparent;
}
.rp-meta-race-btn:hover { border-color:currentColor; filter:brightness(1.2); text-shadow:0 0 8px currentColor; }
/* Race info popup */
/* ══ RIGHT PANEL — Building detail ══ */
/* Day/night cycle overlay on planet */
.rp-sphere { position:relative; }
.rp-sphere-day::after {
  content:''; position:absolute; inset:0; border-radius:50%; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at 35% 30%, rgba(255,240,180,0.15) 0%, transparent 50%);
}
.rp-sphere-dusk::after {
  content:''; position:absolute; inset:0; border-radius:50%; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,140,40,0.12) 0%, rgba(100,40,120,0.08) 50%, rgba(8,12,30,0.3) 100%);
}
.rp-sphere-night::after {
  content:''; position:absolute; inset:0; border-radius:50%; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at 70% 30%, transparent 15%, rgba(8,12,30,0.6) 55%, rgba(4,6,18,0.75) 100%);
  box-shadow:inset -10px -6px 24px rgba(60,120,255,0.15);
  animation:nightPulse 6s ease-in-out infinite;
}
@keyframes nightPulse { 0%,100%{opacity:0.85} 50%{opacity:1} }

/* Minimap widget */
.minimap-wrap {
  position:fixed; bottom:16px; right:16px; z-index:900;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),0.4);
  background:rgba(6,10,22,0.9); backdrop-filter:blur(4px);
  cursor:pointer; overflow:hidden;
  transition:width 0.35s ease, height 0.35s ease, border-radius 0.35s ease;
  box-shadow:0 2px 16px rgba(0,0,0,0.5), 0 0 8px rgba(var(--accent-rgb),0.15);
  display:flex; align-items:center; justify-content:center;
}
.minimap-wrap::before {
  content:'🌌'; font-size:22px; position:absolute;
  transition:opacity 0.2s; pointer-events:none;
}
.minimap-wrap:hover::before { opacity:0; }
.minimap-wrap:hover {
  width:180px; height:180px; border-radius:12px;
  border-color:rgba(var(--accent-rgb),0.6);
  box-shadow:0 4px 24px rgba(0,0,0,0.6), 0 0 16px rgba(var(--accent-rgb),0.25);
}
.minimap-wrap canvas { opacity:0; transition:opacity 0.3s; }
.minimap-wrap:hover canvas { opacity:1; }
/* Ambiance button */
.amb-btn {
  position:fixed; bottom:16px; right:72px; z-index:900;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),0.25);
  background:rgba(6,10,22,0.8); backdrop-filter:blur(4px);
  font-size:14px; cursor:pointer; color:var(--textmid);
  transition:border-color 0.2s;
}
.amb-btn:hover { border-color:rgba(var(--accent-rgb),0.5); }

#rpPlanetView { display:flex; flex-direction:column; align-items:center; width:100%; }
#rpBldDetail  { display:none; flex-direction:column; align-self:stretch; overflow-y:auto; flex:1; }
.rp-back-btn {
  font-family:'Share Tech Mono',monospace; font-size: 14px; letter-spacing:1px;
  padding:10px 14px; background:rgba(var(--accent-rgb),0.12); border:none;
  border-bottom:1px solid rgba(var(--accent-rgb),0.3); color:var(--textmid);
  cursor:pointer; text-align:left; transition:background 0.15s; width:100%;
}
.rp-back-btn:hover { background:rgba(40,70,130,0.7); color:var(--textbright); }
.rp-bld-det-head { text-align:center; padding:24px 14px 12px; }
.rp-bld-det-icon { font-size:72px; margin-bottom:14px; }
.rp-bld-det-icon.has-illus { width:180px; height:180px; margin:0 auto 14px; border-radius:14px; border:2px solid rgba(var(--accent-rgb),0.35); box-shadow:0 4px 20px rgba(0,0,0,0.5), 0 0 15px rgba(var(--accent-rgb),0.15); }
.rp-bld-det-name {
  font-family:'Orbitron',monospace; font-size:22px; font-weight:700;
  color:var(--textbright); letter-spacing:2px; margin-bottom:8px;
}
.rp-bld-det-sub { font-family:'Share Tech Mono',monospace; font-size:17px; margin-bottom:4px; }
.rp-bld-det-desc {
  padding:10px 18px 14px; font-size:18px; color:var(--textmid);
  line-height:1.7; font-family:'Rajdhani',sans-serif; font-weight:500;
}
.bd-lv-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);
  transition:all 0.2s;
}
.bd-lv-dot.on { background:var(--accent); border-color:var(--accent); box-shadow:0 0 5px var(--accent); }
.rp-cost-block { padding:0 18px 14px; }
.rp-cost-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; font-family:'Rajdhani',sans-serif; font-size:19px; font-weight:500;
}
.rp-cost-ico { font-size:22px; width:28px; }
.rp-cost-lbl { color:var(--textmid); flex:1; margin-left:8px; }
.rp-cost-val { color:var(--accent2); font-weight:700; font-size:20px; }
.rp-cost-val.cant-afford { color:var(--danger); }
.rp-upgrade-btn {
  margin:8px 14px 14px; padding:14px 10px; width:calc(100% - 28px);
  font-family:'Orbitron',monospace; font-size:14px; font-weight:700; letter-spacing:1.5px;
  background:rgba(var(--accent-rgb),0.15); border:1px solid var(--accent);
  color:var(--accent2); cursor:pointer; border-radius:4px;
  transition:all 0.18s; text-transform:uppercase; display:block;
}
.rp-upgrade-btn:hover:not([disabled]) { background:rgba(var(--accent-rgb),0.28); }
.rp-upgrade-btn[disabled] {
  opacity:0.7; cursor:not-allowed;
  border-color:rgba(80,80,100,0.4); color:var(--textsoft); background:transparent;
}
.rp-upgrade-btn.btn-no-prereq {
  border-color:rgba(255,119,119,0.5); color:var(--danger); background:rgba(255,60,60,0.08);
  opacity:0.85;
}
.rp-upgrade-btn.btn-no-res {
  border-color:rgba(255,119,119,0.4); color:var(--danger); background:rgba(255,60,60,0.06);
  opacity:0.85;
}
.rp-bld-constr {
  padding:8px 16px 14px;
  font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:500;
}
.rp-constr-bar-bg {
  background:rgba(255,255,255,0.08); border-radius:4px; height:8px;
  overflow:hidden; margin:6px 0 4px;
}
.rp-constr-bar-fill {
  background:linear-gradient(90deg,var(--warn),#f0b030);
  height:100%; transition:width 0.5s ease;
}
.rp-max-badge {
  text-align:center; padding:18px 14px;
  font-family:'Orbitron',monospace; font-size:18px; letter-spacing:1.5px; color:var(--gold);
}

/* ══ OGAME BUILDING CARDS ══ */
.nav-alert-badge {
  background:var(--danger); color:#fff; border-radius:50%;
  font-family:'Orbitron',monospace; font-size: 11px; font-weight:700;
  padding:1px 4px; min-width:14px; display:none;
  position:absolute; top:4px; right:4px; text-align:center; line-height:14px;
}

/* Messages */
.rb-item:first-child .rb-tooltip { left:0; transform:none; }
.rb-item:last-child .rb-tooltip  { left:auto; right:0; transform:none; }

/* ══ SKELETON LOADING ══ */
.skeleton { background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 50%,var(--surface2) 75%); background-size:200% 100%; animation:skeletonPulse 1.5s ease-in-out infinite; border-radius:4px; }
@keyframes skeletonPulse { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══ STACKABLE NOTIFICATIONS ══ */
#notifStack { position:fixed; top:64px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; z-index:99999; pointer-events:none; }
.notif-toast {
  background:var(--surface2); border:1px solid var(--border2);
  border-radius:20px; padding:7px 18px;
  font-family:'Share Tech Mono',monospace; font-size:var(--fs-sm); color:var(--accent);
  letter-spacing:1px; box-shadow:var(--sh);
  animation:notifSlideIn 0.3s ease forwards;
  white-space:normal; max-width:420px; pointer-events:auto;
}
.notif-toast.fade-out { animation:notifFadeOut 0.3s ease forwards; }

/* Large tablet / small desktop: ≤1400px — réduire le panneau droit */
@media (max-width:1400px) {
  .app { max-width:100%; border-left:none; border-right:none; box-shadow:none; }
  .right-panel { width:220px; max-width:220px; padding:14px 10px 10px; }
  .rp-planet-wrap { width:140px; height:140px; }
  .left-nav { width:200px; }
  .lnav-lbl { font-size:14px; }
  .lnav-ico { width:32px; height:32px; font-size:16px; }
  .lnav-item { padding:10px 10px 10px 14px; min-height:44px; }
}

/* Tablet: ≤1024px — compresser nav + cacher panneau droit */
@media (max-width:1024px) {
  .right-panel { display:none !important; }
  .left-nav { width:54px; overflow-x:hidden; }
  .lnav-lbl { display:none; }
  .lnav-ico { margin:0 auto; width:36px; height:36px; font-size:18px; }
  .lnav-item { justify-content:center; padding:10px 6px; }
  .lnav-header { font-size:0; padding:8px; text-align:center; }
  .lnav-header::after { content:'◈'; font-size:14px; }
  .lnav-sep, .lnav-div { margin:2px 6px; }
}

/* Mobile: ≤768px */
@media (max-width:768px) {
  .main-layout { flex-direction:column; }
  .left-nav {
    flex-direction:row; height:48px; width:100%;
    overflow-x:auto; overflow-y:hidden; border-right:none;
    border-bottom:1px solid rgba(var(--accent-rgb),0.35);
  }
  .lnav-header { display:none; }
  .lnav-div { display:none; }
  .lnav-sep { display:none; }
  .lnav-item { padding:8px 12px; flex-shrink:0; }
  .sec-hdr { height:140px; }
}

/* PvP spy button */
.pvp-spy-btn { background:rgba(46,204,136,0.12); border:1px solid rgba(46,204,136,0.35); color:var(--success); border-radius:4px; padding:2px 8px; font-size:14px; cursor:pointer; transition:all 0.15s; line-height:1; }
.pvp-spy-btn:hover { background:rgba(46,204,136,0.25); border-color:rgba(46,204,136,0.6); transform:scale(1.1); }

/* Cancel button for construction/training/research slots */
.og-cancel-btn {
  font-family:'Share Tech Mono',monospace; font-size:15px; padding:6px 14px;
  border:1px solid rgba(192,57,43,0.5); background:rgba(192,57,43,0.15);
  color:var(--danger); border-radius:6px; cursor:pointer; transition:all 0.15s;
  font-weight:700; letter-spacing:0.5px;
}
.og-cancel-btn:hover { background:rgba(192,57,43,0.35); border-color:rgba(192,57,43,0.8); }

/* Prereq clickable links */
.prereq-link { cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; transition:color 0.15s, text-shadow 0.15s; }
.prereq-link:hover { color:var(--accent); text-shadow:0 0 6px rgba(var(--accent-rgb),0.5); }
.prereq-link.prereq-done { color:var(--success); text-shadow:0 0 6px rgba(0,200,100,0.4); }
.prereq-lv { font-family:'Orbitron',monospace; font-size:0.9em; font-weight:900; letter-spacing:1px; }

/* ══ MISSION TRACKER ══ */
.mission-tracker { background:rgba(6,14,28,0.9); border:1px solid rgba(var(--accent-rgb),0.35); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:12px; }
.mt-header { display:flex; align-items:center; gap:12px; }
.mt-icon { font-size:32px; animation:sphereFloat 3s ease-in-out infinite; }
.mt-info { flex:1; }
.mt-title { font-family:'Orbitron',monospace; font-size:12px; font-weight:700; color:var(--accent); letter-spacing:2px; text-transform:uppercase; }
.mt-target { font-family:'Orbitron',monospace; font-size:16px; font-weight:700; color:var(--textbright); letter-spacing:1px; margin-top:2px; text-shadow:0 0 8px rgba(var(--accent-rgb),0.3); }
.mt-code { font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--textsoft); margin-top:1px; }
.mt-progress { display:flex; align-items:center; gap:8px; }
.mt-bar-bg { flex:1; height:8px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden; border:1px solid rgba(var(--accent-rgb),0.2); }
.mt-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--success)); border-radius:3px; transition:width 1s linear; box-shadow:0 0 6px rgba(46,204,136,0.4); }
.mt-pct { font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--success); font-weight:700; min-width:32px; text-align:right; }
.mt-times { display:flex; flex-direction:column; gap:4px; background:rgba(255,255,255,0.02); border-radius:6px; padding:8px 10px; }
.mt-time-row { display:flex; justify-content:space-between; align-items:center; }
.mt-time-lbl { font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--textsoft); }
.mt-time-val { font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--textmid); font-weight:700; }
.mt-time-accent { color:var(--accent); }
.mt-time-warn { color:var(--warn); font-size:15px; text-shadow:0 0 8px rgba(240,192,64,0.4); }
.mt-countdown { border-top:1px solid rgba(var(--accent-rgb),0.15); padding-top:5px; margin-top:2px; }
.mt-troops-section { border-top:1px solid rgba(var(--accent-rgb),0.2); padding-top:10px; }
.mt-troops-title { font-family:'Orbitron',monospace; font-size:11px; font-weight:700; color:var(--accent); letter-spacing:1.5px; margin-bottom:6px; }
.mt-troops-list { display:flex; flex-direction:column; gap:3px; }
.mt-troop { display:flex; justify-content:space-between; align-items:center; font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--textmid); padding:3px 6px; background:rgba(var(--accent-rgb),0.04); border-radius:4px; }
.mt-troop-cnt { color:var(--accent2); font-weight:700; }
.mt-troop-lost { color:var(--danger); font-size:12px; }
.mt-active { border-color:rgba(46,204,136,0.4); box-shadow:0 0 12px rgba(46,204,136,0.1); }
.mt-idle { border-color:rgba(var(--accent-rgb),0.2); opacity:0.9; }
/* Mission history rows */
.mt-hist-loading { font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--textsoft); text-align:center; padding:8px; }
.mt-hist-list { display:flex; flex-direction:column; gap:4px; }
.mt-hist-row { background:rgba(255,255,255,0.02); border:1px solid rgba(var(--accent-rgb),0.1); border-radius:6px; padding:8px 10px; cursor:pointer; transition:all 0.15s; }
.mt-hist-row:hover { background:rgba(var(--accent-rgb),0.06); border-color:rgba(var(--accent-rgb),0.25); }
.mt-hist-head { display:flex; justify-content:space-between; align-items:center; }
.mt-hist-planet { font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; color:var(--success); }
.mt-hist-date { font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--textsoft); }
.mt-hist-summary { display:flex; justify-content:space-between; margin-top:3px; font-family:'Share Tech Mono',monospace; font-size:12px; }
.mt-hist-rew { color:var(--gold); }
.mt-hist-loss { color:var(--danger); }
.mt-hist-ok { color:var(--success); font-size:11px; }
.mt-hist-detail { display:none; margin-top:6px; padding-top:6px; border-top:1px solid rgba(var(--accent-rgb),0.15); }
.mt-hist-detail.open { display:block; }
.mt-hist-det-title { font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--textsoft); margin-bottom:4px; }

/* Recruitment qty/btn */
.ut-qty-btn { width:36px; height:36px; border:1px solid var(--border2); background:var(--surface2); color:var(--accent); font-size:20px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.ut-qty-btn:disabled { opacity:0.55; cursor:not-allowed; }
.ut-rec-btn-main { flex:1; height:44px; border:1px solid var(--accent); background:rgba(var(--accent-rgb),0.15); color:var(--accent); font-family:'Orbitron',monospace; font-size:15px; font-weight:700; letter-spacing:1.5px; border-radius:6px; cursor:pointer; }
.ut-rec-btn-main:hover:not(:disabled) { background:rgba(var(--accent-rgb),0.3); }
.ut-rec-btn-main:disabled { opacity:0.55; cursor:not-allowed; }

/* Small mobile: ≤480px */
@media (max-width:480px) {
  .topbar .logo-wrap { display:none; }
  .tb-resources .rb-sep { display:none; }
  .tb-resources { gap:4px; }
  .rb-rate { display:none; }
  .sec-hdr { height:80px; }
}