/* ============================================================================
   moon-colony.css — MOON COLONY styling (Command ▸ Moon Colony)
============================================================================ */
/* FULL-SCREEN world mode — the scr-body IS the game view */
.scr-body.mn-full{ position:relative; padding:0 !important; overflow:hidden !important; }
.scr-body.mn-full #mn-scene-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; }
.scr-body.mn-full .mn-stage-ov{ position:absolute; left:11px; top:10px; pointer-events:none; z-index:2; }
.mn-raidchip{ color:#ff8f9c !important; }
.mn-logbtn{ pointer-events:auto; background:rgba(6,10,20,.6); border:1px solid rgba(120,150,200,.3); color:#9db6cb;
  border-radius:7px; padding:3px 9px; font-family:'Orbitron',sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.1em; cursor:pointer; }
.scr-body.mn-full .mn-stage-tags{ position:absolute; right:9px; top:10px; z-index:2; }
/* bottom dock — floating collect bar over the world */
.mn-dock{ position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  display:flex; align-items:center; gap:11px;
  background:linear-gradient(180deg, rgba(12,26,18,.88), rgba(8,18,12,.92));
  border:1px solid rgba(89,217,140,.4); border-radius:14px; padding:10px 12px;
  backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,.5); }
.mn-dock.idle{ background:linear-gradient(180deg, rgba(30,24,10,.9), rgba(22,17,7,.94)); border-color:rgba(255,190,80,.45); }
.mn-dock .mn-c-t{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:9px; letter-spacing:.12em; color:#7ce0a0; }
.mn-dock.idle .mn-c-t{ color:#ffcf7a; }
/* live diorama stage (legacy embedded panel) */
.mn-stage{ position:relative; height:212px; border-radius:15px; overflow:hidden;
  border:1px solid #2b3a55; margin-bottom:11px; background:#04070f;
  box-shadow:inset 0 0 40px rgba(4,8,18,.8), 0 6px 20px rgba(0,0,0,.4); }
.mn-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mn-stage-ov{ position:absolute; left:11px; top:9px; pointer-events:none; }
.mn-stage-ov .mn-title{ text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 14px rgba(158,207,255,.55); }
.mn-stage-ov .mn-stats span{ background:rgba(6,10,20,.55); border:1px solid rgba(120,150,200,.2);
  border-radius:7px; padding:2px 7px; backdrop-filter:blur(2px); }
.mn-stage-tags{ position:absolute; right:9px; top:9px; display:flex; flex-direction:column; gap:4px; align-items:flex-end; pointer-events:none; }
.mn-stage-tags .mn-buff,.mn-stage-tags .mn-perm{ margin:0; background:rgba(6,10,20,.6); border-radius:7px; padding:3px 8px;
  border:1px solid rgba(124,224,160,.35); backdrop-filter:blur(2px); }
.mn-stage-tags .mn-perm{ border-color:rgba(201,160,255,.35); }
/* hero (legacy static header, kept for fallback) */
.mn-hero{ display:flex; align-items:center; gap:15px; position:relative; overflow:hidden;
  background:radial-gradient(150% 200% at 85% -30%, rgba(158,207,255,.12), transparent 55%), linear-gradient(180deg,#10182a,#0a101d);
  border:1px solid #2b3a55; border-radius:15px; padding:14px 15px; margin-bottom:11px; }
.mn-moon{ position:relative; width:72px; height:72px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #d8dee8, #9aa4b5 48%, #4d5568 100%);
  box-shadow:inset -9px -10px 14px rgba(10,16,30,.75), 0 0 18px rgba(158,207,255,.3); }
.mn-crater{ position:absolute; border-radius:50%; background:radial-gradient(circle at 38% 32%, rgba(70,80,100,.55), rgba(40,48,64,.7));
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06); }
.mn-crater.c1{ width:16px; height:16px; left:16%; top:22%; }
.mn-crater.c2{ width:10px; height:10px; left:58%; top:48%; }
.mn-crater.c3{ width:7px; height:7px; left:34%; top:64%; }
/* colony domes grow with stage */
.mn-domes{ position:absolute; left:50%; bottom:10%; transform:translateX(-50%); display:flex; gap:2px; align-items:flex-end; }
.mn-domes::before,.mn-domes::after{ content:''; border-radius:50% 50% 0 0; background:linear-gradient(180deg,#ffe9a8,#c99b3f);
  box-shadow:0 0 6px rgba(255,220,130,.8); }
.mn-domes.s1::before{ width:7px; height:5px; } .mn-domes.s1::after{ display:none; }
.mn-domes.s2::before{ width:9px; height:7px; } .mn-domes.s2::after{ width:6px; height:4px; }
.mn-domes.s3::before{ width:12px; height:9px; } .mn-domes.s3::after{ width:8px; height:6px; }
.mn-domes.s4::before{ width:15px; height:12px; } .mn-domes.s4::after{ width:11px; height:8px; }
.mn-hero.stage3 .mn-moon,.mn-hero.stage4 .mn-moon{ box-shadow:inset -9px -10px 14px rgba(10,16,30,.75), 0 0 26px rgba(255,214,120,.4); }
.mn-title{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:13.5px; letter-spacing:.11em; color:#e8f0fb;
  text-shadow:0 0 12px rgba(158,207,255,.5); }
.mn-stats{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; font-size:10px; color:#8fa2bd; font-weight:600; }
.mn-buff{ margin-top:6px; font-size:10.5px; font-weight:700; color:#7ce0a0; }
.mn-perm{ margin-top:3px; font-size:10px; font-weight:700; color:#c9a0ff; }
/* collect */
.mn-collect{ display:flex; align-items:center; gap:11px; background:linear-gradient(180deg,#12241a,#0c1810);
  border:1px solid rgba(89,217,140,.4); border-radius:13px; padding:12px 13px; margin-bottom:9px; }
.mn-collect.idle{ background:linear-gradient(180deg,#241d10,#181208); border-color:rgba(255,190,80,.45); }
.mn-c-l{ flex:1; min-width:0; }
.mn-c-t{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:9.5px; letter-spacing:.12em; color:#7ce0a0; }
.mn-collect.idle .mn-c-t{ color:#ffcf7a; }
.mn-c-rows{ display:flex; flex-wrap:wrap; gap:9px; margin-top:5px; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
.mn-c-rate{ font-size:9.5px; color:#6f8aa4; margin-top:4px; font-variant-numeric:tabular-nums; }
.mn-c-btn{ flex:none; font-family:'Orbitron',sans-serif; font-weight:800; font-size:11px; letter-spacing:.08em;
  color:#04140a; background:linear-gradient(180deg,#7ce0a0,#3fae6c); border:none; border-radius:11px; padding:13px 16px;
  cursor:pointer; box-shadow:0 0 14px -3px rgba(89,217,140,.7); }
.mn-c-btn:disabled{ opacity:.4; box-shadow:none; }
.mn-c-btn:active{ transform:scale(.94); }
/* raid strip */
.mn-raid{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:10px; color:#8fa2bd;
  background:rgba(226,59,78,.07); border:1px solid rgba(226,59,78,.25); border-radius:10px; padding:7px 11px; margin-bottom:12px; }
.mn-raid b{ color:#ff8f9c; }
/* sectors */
.mn-sec{ margin-bottom:13px; }
.mn-sec-h{ display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 7px; }
.mn-sec-n{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:11px; letter-spacing:.07em; color:#b9cbe4; }
.mn-sec-s{ font-size:9px; color:#5f7590; letter-spacing:.08em; text-transform:uppercase; }
.mn-slots{ display:grid; gap:8px; }
.mn-slot{ display:grid; place-items:center; min-height:52px; border:1.5px dashed #33445f; border-radius:12px;
  background:rgba(60,90,140,.06); color:#6f8aa4; font-family:'Orbitron',sans-serif; font-weight:700; font-size:10px;
  letter-spacing:.1em; cursor:pointer; }
.mn-slot:active{ transform:scale(.98); background:rgba(60,90,140,.14); }
/* building card — tiers evolve the visual */
.mn-b{ display:flex; align-items:center; gap:10px; background:linear-gradient(180deg,#141d2d,#0e1522);
  border:1px solid #263650; border-radius:12px; padding:9px 11px; }
.mn-b-ic{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:16px;
  color:#9ecfff; background:radial-gradient(120% 120% at 50% 0%,#1e2a3f,#111827); border:1px solid #33445f; }
.mn-b.t2 .mn-b-ic{ color:#7ce0a0; border-color:rgba(89,217,140,.45); box-shadow:0 0 9px -2px rgba(89,217,140,.5); }
.mn-b.t3 .mn-b-ic{ color:#ffd24d; border-color:rgba(255,210,77,.5); box-shadow:0 0 12px -2px rgba(255,210,77,.6); }
.mn-b.t4 .mn-b-ic{ color:#ff6ad5; border-color:rgba(255,106,213,.55); box-shadow:0 0 14px -2px rgba(255,106,213,.7); font-size:19px; }
.mn-b.t4{ border-color:rgba(255,106,213,.4); }
.mn-b-m{ flex:1; min-width:0; }
.mn-b-n{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:11px; color:#e8f0fb; display:flex; align-items:center; gap:6px; }
.mn-b-lv{ font-size:9px; color:#8fa2bd; font-weight:600; }
.mn-b-tier{ font-size:8px; font-weight:800; letter-spacing:.08em; color:#ffd24d; border:1px solid rgba(255,210,77,.5); border-radius:5px; padding:1px 4px; }
.mn-b.t4 .mn-b-tier{ color:#ff6ad5; border-color:rgba(255,106,213,.5); }
/* T5 — endless-tier prestige (Lv 60+): prismatic */
.mn-b.t5 .mn-b-ic{ color:#9ff5ff; border-color:rgba(159,245,255,.6); box-shadow:0 0 16px -2px rgba(159,245,255,.85); font-size:19px; }
.mn-b.t5{ border-color:rgba(159,245,255,.45); }
.mn-b.t5 .mn-b-tier{ color:#9ff5ff; border-color:rgba(159,245,255,.55); }
.mn-b-d{ font-size:10px; color:#8fa2bd; margin-top:2px; }
.mn-b-cost{ font-size:10.5px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.mn-b-max{ font-size:10px; font-weight:700; color:#ffd24d; margin-top:3px; }
.mn-b-up{ flex:none; width:38px; height:38px; border-radius:10px; border:none; cursor:pointer;
  font-size:15px; font-weight:800; color:#04140a; background:linear-gradient(180deg,#7ce0a0,#3fae6c);
  box-shadow:0 0 10px -2px rgba(89,217,140,.6); }
.mn-b-up:disabled{ opacity:.35; box-shadow:none; }
.mn-b-up:active{ transform:scale(.92); }
.mn-b-up.wide{ width:auto; padding:0 16px; font-family:'Orbitron',sans-serif; font-size:10px; letter-spacing:.08em; height:42px; }
/* MOON TABS — switch between your colonies (was missing all styling) */
.mn-moons{ display:flex; gap:7px; overflow-x:auto; padding:1px 1px 3px; margin-bottom:10px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.mn-moons::-webkit-scrollbar{ display:none; }
.mn-mtab{ flex:none; display:flex; align-items:center; gap:7px; min-height:38px; padding:6px 13px 6px 8px;
  background:linear-gradient(180deg,#141d2d,#0e1522); border:1px solid #263650; border-radius:11px;
  color:#93a5bd; font-family:'Orbitron',sans-serif; font-weight:700; font-size:10px; letter-spacing:.05em;
  cursor:pointer; position:relative; }
.mn-mtab.on{ color:#eaf2fd; border-color:hsl(var(--mh,215) 60% 55% / .7);
  background:linear-gradient(180deg, hsl(var(--mh,215) 45% 20%), hsl(var(--mh,215) 45% 12%));
  box-shadow:0 0 12px -3px hsl(var(--mh,215) 80% 60% / .6); }
.mn-mtab:active{ transform:scale(.96); }
.mn-morb{ width:18px; height:18px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 34% 30%, hsl(var(--mh,215) 70% 76%), hsl(var(--mh,215) 60% 46%) 52%, hsl(var(--mh,215) 55% 16%) 100%);
  box-shadow:inset -2.5px -3px 4px rgba(0,0,0,.55), 0 0 6px hsl(var(--mh,215) 80% 60% / .45); }
.mn-mtab.lock{ opacity:.55; }
.mn-mtab.lock.ready{ opacity:1; border-style:dashed; border-color:rgba(124,224,160,.55); color:#a4f0c0; }
.mn-mdot{ font-style:normal; font-size:9px; color:#7ce0a0; margin-left:2px; }
.mn-mdot.bad{ color:#ff8f9c; animation:mnDotBlink 1.2s ease-in-out infinite; }
@keyframes mnDotBlink{ 0%,100%{opacity:1} 50%{opacity:.3} }
/* offline tag in the stage overlay */
.mn-dmgtag{ display:inline-block; font-size:10px; font-weight:800; color:#ff8f9c;
  background:rgba(226,59,78,.15); border:1px solid rgba(226,59,78,.5); border-radius:7px; padding:3px 8px;
  animation:mnDotBlink 1.2s ease-in-out infinite; }
/* raid strip danger state */
.mn-raid.danger{ background:rgba(226,59,78,.14); border-color:rgba(226,59,78,.55);
  box-shadow:0 0 14px -4px rgba(226,59,78,.5); }
/* offline building card */
.mn-b.dmg{ border-color:rgba(226,59,78,.5); background:linear-gradient(180deg,#241318,#170d10); }
.mn-b.dmg .mn-b-ic{ color:#ff8f9c; border-color:rgba(226,59,78,.45); filter:grayscale(.4); }
.mn-b-off{ font-size:8.5px; font-weight:800; letter-spacing:.08em; color:#ff8f9c;
  border:1px solid rgba(226,59,78,.5); border-radius:5px; padding:1px 5px; animation:mnDotBlink 1.2s ease-in-out infinite; }
.mn-b-up.fix{ background:linear-gradient(180deg,#ffd24d,#e09a2d); box-shadow:0 0 10px -2px rgba(255,210,77,.6); }
/* stage overlay stat chips — labelled */
.mn-stats span i{ font-style:normal; font-size:8px; letter-spacing:.09em; color:#7d8fa8; display:block; margin-top:1px; text-transform:uppercase; }
/* empty-state starter callout */
.mn-start{ background:radial-gradient(140% 200% at 10% -30%, rgba(124,224,160,.12), transparent 55%), linear-gradient(180deg,#12241a,#0c1810);
  border:1.5px dashed rgba(124,224,160,.45); border-radius:13px; padding:12px 14px; margin-bottom:12px; }
.mn-start-t{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:11px; letter-spacing:.09em; color:#a4f0c0; margin-bottom:6px; }
.mn-start-s{ font-size:11px; color:#a9bccd; line-height:1.6; }
.mn-start-s b{ color:#e8f0fb; }
/* sector occupancy + storage timer */
.mn-sec-s b{ color:#9db6cb; }
.mn-c-full{ font-size:9.5px; font-weight:700; color:#8fa2bd; margin-top:3px; }
.mn-c-full b{ color:#cfe0f5; }
/* demolish */
.mn-b-btns{ flex:none; display:flex; flex-direction:column; gap:5px; align-items:center; }
.mn-b-btns .mn-b-up{ width:34px; height:30px; border-radius:8px; }
.mn-b-del{ width:34px; height:20px; border-radius:7px; border:1px solid rgba(226,59,78,.4); background:rgba(226,59,78,.1);
  color:#ff8f9c; font-size:10px; font-weight:800; cursor:pointer; line-height:1; }
.mn-b-del:active{ transform:scale(.92); background:rgba(226,59,78,.25); }
.mn-c-btn.danger{ color:#2a0508; background:linear-gradient(180deg,#ff8f9c,#d5364b); box-shadow:0 0 14px -3px rgba(226,59,78,.7); }
/* expansion */
.mn-expand{ display:flex; align-items:center; gap:10px; background:radial-gradient(140% 200% at 8% -30%, rgba(158,207,255,.1), transparent 55%), linear-gradient(180deg,#131c2c,#0c1220);
  border:1.5px dashed #3a4d6e; border-radius:13px; padding:12px 13px; margin-bottom:13px; }
/* log */
.mn-log{ background:linear-gradient(180deg,#101724,#0b111c); border:1px solid #223148; border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.mn-log-t{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:9px; letter-spacing:.14em; color:#5f7590; margin-bottom:6px; }
.mn-log-r{ font-size:10px; color:#93a5bd; padding:3px 0; border-top:1px solid rgba(120,150,200,.08); display:flex; gap:8px; }
.mn-log-r span{ color:#5f7590; flex:none; font-variant-numeric:tabular-nums; }
/* build sheet */
.mn-sheet-veil{ position:fixed; inset:0; z-index:60; background:rgba(4,8,16,.72); backdrop-filter:blur(4px);
  display:grid; place-items:end center; }
.mn-sheet{ width:min(440px, 100%); max-height:78vh; overflow:auto; background:linear-gradient(180deg,#131c2c,#0b111d);
  border:1px solid #2c3b56; border-radius:18px 18px 0 0; padding:15px 14px 18px; }
.mn-sheet-t{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:11px; letter-spacing:.14em; color:#dbe8fa; margin-bottom:9px; }
.mn-sheet-cat{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.14em; color:#5f7590; margin:11px 2px 6px; }
.mn-pick{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:linear-gradient(180deg,#141d2d,#0e1522);
  border:1px solid #263650; border-radius:11px; padding:9px 10px; margin-bottom:6px; cursor:pointer; color:inherit; }
.mn-pick:active{ transform:scale(.985); }
.mn-pick:disabled{ opacity:.45; }
.mn-pick.locked{ opacity:.4; }
.mn-pick-m{ flex:1; min-width:0; display:block; }
.mn-pick-m b{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:11px; color:#e8f0fb; display:block; }
.mn-pick-m i{ font-style:normal; font-size:10px; color:#8fa2bd; display:block; margin-top:1px; }
.mn-pick-m em{ font-style:normal; font-size:10px; font-weight:700; display:block; margin-top:3px; font-variant-numeric:tabular-nums; }
.mn-sheet-x{ width:100%; margin-top:8px; background:none; border:1px solid #2b4055; color:#9db6cb; border-radius:10px;
  padding:10px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; cursor:pointer; }
@media (min-width:520px){ .mn-slots{ grid-template-columns:1fr 1fr; } }