/* =========================
   Moon-Host Landing v2
   (RED + BLUE, NO YELLOW)
   SQUARED UI (NO ROUNDED) — ONLY BUTTONS SLIGHTLY ROUNDED
   + BORDER OFF (cards/blocks/chips)
   ========================= */

:root{
  --mh-bg: #07080c;
  --mh-bg2:#0b0d12;

  --mh-card: rgba(255,255,255,.05);
  --mh-card2: rgba(255,255,255,.035);
  --mh-border: rgba(255,255,255,.10);

  --mh-soft: rgba(255,255,255,.70);
  --mh-text: rgba(255,255,255,.92);
  --mh-muted: rgba(255,255,255,.60);

  /* ✅ Accent: PIROS (sárga/narancs OFF) */
  --mh-accent: #ff4a4a;
  --mh-accent2:#e83a3a;
  --mh-accent-rgb: 255, 74, 74;

  /* ✅ Kék ambient maradhat */
  --mh-blue-rgb: 130, 160, 255;

  --mh-shadow: 0 18px 60px rgba(0,0,0,.55);

  /* ✅ FULL SQUARED UI */
  --mh-radius: 0px;
  --mh-radius-md: 0px;
  --mh-radius-sm: 0px;

  /* ✅ ONLY BUTTONS: MINIMAL ROUND */
  --mh-btn-radius: 8px;
  --mh-btn-radius-sm: 6px;
}

html, body { background: var(--mh-bg); }
body{
  color: var(--mh-text);
  overflow-x: hidden;
}

a { text-decoration: none !important; }

.mh-landing{ position: relative; }

/* =========================
   Buttons (hover fix + red)
   ONLY THINGS ROUNDED
   + slightly smaller sizing
   ========================= */
.btn,
.btn-primary,
.btn-outline-light{
  border-radius: var(--mh-btn-radius) !important;
}

/* ✅ minimális “lekicsinyítés” */
.btn.btn-lg{
  padding: 10px 16px !important;
  font-size: 15px !important;
}
.btn.btn-sm{
  padding: .35rem .6rem !important;
  font-size: .82rem !important;
}
.mh-btn{
  border-radius: var(--mh-btn-radius) !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
}

.btn-primary{
  background: linear-gradient(90deg, var(--mh-accent), var(--mh-accent2));
  border: 0;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(var(--mh-accent-rgb), .18);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background: linear-gradient(90deg, var(--mh-accent), var(--mh-accent2)) !important;
  color: #fff !important;
  filter: brightness(1.06) saturate(1.02);
  box-shadow:
    0 18px 44px rgba(var(--mh-accent-rgb), .22),
    0 0 0 3px rgba(var(--mh-accent-rgb), .12);
}
.btn-primary:focus{ outline: none !important; }

.btn-outline-light{
  border-color: rgba(255,255,255,.32) !important;
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  font-weight: 800;
}
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active{
  background: rgba(var(--mh-accent-rgb), .12) !important;
  border-color: rgba(var(--mh-accent-rgb), .55) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(var(--mh-accent-rgb), .10);
}
.btn-outline-light:focus{ outline: none !important; }

/* =========================
   HERO
   ========================= */
.mh-hero{
  position: relative;
  padding: 70px 0 30px;
}
.mh-hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 18% 25%, rgba(var(--mh-accent-rgb), .14), transparent 60%),
    radial-gradient(900px 500px at 80% 15%, rgba(var(--mh-blue-rgb), .10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.80));
  pointer-events:none;
}
.mh-hero .container{ position: relative; z-index: auto; }

.mh-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border: 0; /* ✅ border OFF */
  background: rgba(0,0,0,.35);
  border-radius: 0;
  color: var(--mh-soft);
  font-size: 13px;
  letter-spacing: .3px;
}
.mh-pill .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--mh-accent);
  box-shadow: 0 0 18px rgba(var(--mh-accent-rgb), .55);
}
.mh-pill .sep{ opacity:.4; }

.mh-title{
  margin: 18px 0 14px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.05;
  font-weight: 800;
}
.accent{ color: var(--mh-accent); }

.mh-lead{
  color: var(--mh-muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 620px;
}

.mh-cta{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 18px;
}
.mh-btn-icon{ margin-right: 6px; }

.mh-trust-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
.mh-trust{
  border: 0; /* ✅ border OFF */
  background: rgba(0,0,0,.28);
  border-radius: 0;
  padding: 12px 12px;
}
.mh-trust-big{
  font-weight: 900;
  font-size: 18px;
}
.mh-trust-small{
  color: var(--mh-muted);
  font-size: 12px;
  margin-top: 2px;
}

/* ✅ ha a hero-ban 2 KPI-t használsz */
.mh-trust-row--two{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  max-width: 420px;
}

/* ✅ hero meta sor (Backups / Standort) */
.mh-hero-meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(255,255,255,.60);
  font-size: 13px;
}
.mh-hero-meta b{
  color: rgba(255,255,255,.88);
  font-weight: 900;
}
.mh-meta-sep{ opacity:.45; }

.mh-platforms{
  margin-top: 14px;
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 8px;
}
.mh-platform-label{
  color: var(--mh-muted);
  font-size: 13px;
}
.mh-chip{
  border: 0; /* ✅ border OFF */
  background: rgba(255,255,255,.04);
  padding: 6px 10px;
  border-radius: 0;
  font-size: 12px;
  color: var(--mh-soft);
}

/* platformok lejjebb */
.mh-platforms--below{
  margin-top: 14px;
}

/* =========================
   Showcase
   ========================= */
.mh-showcase{
  background: rgba(0,0,0,.22);
  border: 0; /* ✅ border OFF */
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--mh-shadow);
}
.mh-showcase-hero{
  height: 320px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.mh-showcase-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.25));
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 16px 16px;
}
.mh-badges{ display:flex; gap: 8px; margin-bottom: 8px; }
.mh-badge{
  border-radius: 4px !important;
  padding: 6px 10px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}
.mh-badge-soft{
  background: rgba(255,255,255,.10) !important;
  border: 0 !important; /* ✅ border OFF */
}
.mh-showcase-title{
  font-weight: 900;
  margin: 0;
  font-size: 28px;
}
.mh-showcase-sub{
  margin: 6px 0 10px;
  color: rgba(255,255,255,.75);
}
.mh-showcase-btn{
  align-self: flex-start;
  border-radius: var(--mh-btn-radius) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}

/* Featured list */
.mh-featured-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(0,0,0,.35);
  border-top: 0; /* ✅ border OFF */
}
.mh-featured-item{
  width: 100%;
  border: 0 !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: var(--mh-radius) !important;
  padding: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--mh-text);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.mh-featured-item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06) !important;
}
.mh-featured-item.active{
  border: 0 !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow:
    0 0 0 2px rgba(var(--mh-accent-rgb), .22),
    0 14px 40px rgba(0,0,0,.55) !important;
}
.mh-featured-item .thumb{
  width: 44px; height: 44px;
  border-radius: var(--mh-radius) !important;
  background-size: cover;
  background-position: center;
  border: 0 !important;
}
.mh-featured-item .meta{ text-align:left; }
.mh-featured-item .name{ font-weight: 900; display:block; line-height: 1.1; }
.mh-featured-item .desc{ font-size: 12px; color: rgba(255,255,255,.60); }

/* =========================
   SEARCH STRIP
   ========================= */
.mh-search-strip{
  margin-top: 22px;
  border: 0; /* ✅ border OFF */
  background: rgba(0,0,0,.35);
  border-radius: 0;
  padding: 18px;
}
.mh-search-kicker{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .3px;
}
.mh-search-head{
  font-weight: 900;
  font-size: 18px;
  margin-top: 2px;
}
.mh-search-box{
  position: relative;
}
.mh-input{
  background: rgba(255,255,255,.06) !important;
  border: 0 !important; /* ✅ border OFF */
  color: #fff !important;
  height: 48px;
  border-radius: 0 !important;
  padding-right: 46px !important;
}
.mh-input::placeholder{ color: rgba(255,255,255,.45); }

.mh-search-btn{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: var(--mh-btn-radius-sm);
  border: 0; /* ✅ border OFF */
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.85);
  cursor:pointer;
}
.mh-search-btn:hover{
  box-shadow: 0 0 0 3px rgba(var(--mh-accent-rgb), .10);
}

.mh-quick-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.mh-tag{
  border: 0; /* ✅ border OFF */
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  padding: 7px 10px;
  border-radius: 0;
  font-size: 12px;
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.mh-tag:hover{
  background: rgba(var(--mh-accent-rgb), .10);
  color: #fff;
}
.mh-search-hint{
  margin-top: 10px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* =========================
   SECTIONS
   ========================= */
.mh-section{
  padding: 54px 0;
}
.mh-section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 0;   /* ✅ border OFF */
  border-bottom: 0;/* ✅ border OFF */
}
.mh-section-head{
  margin-bottom: 18px;
}
.mh-section-head h2{
  font-weight: 900;
  margin: 0 0 6px;
}
.mh-section-head p{
  margin: 0;
  color: rgba(255,255,255,.60);
}

/* kisebb, tisztább spacing a kártya rácson */
.mh-card-row > [class*="col-"]{
  margin-bottom: 16px;
}

/* Tabs */
.mh-pills{
  gap: 10px;
  margin: 16px 0 18px;
}
.mh-pills .nav-link{
  border: 0 !important; /* ✅ border OFF */
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  border-radius: 0 !important;
  font-weight: 800;
  padding: 10px 14px;
  transition: background .15s ease, color .15s ease;
}
.mh-pills .nav-link:hover{
  background: rgba(var(--mh-accent-rgb), .10);
  color: #fff;
}
.mh-pills .nav-link.active{
  background: rgba(var(--mh-accent-rgb), .16);
  color: #fff;
}
.mh-tab-content{ margin-top: 8px; }

/* Game cards */
.mh-game-card{
  border: 0; /* ✅ border OFF */
  background: rgba(255,255,255,.04);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  height: 100%;
}
.mh-game-card .cover{
  height: 160px;
  background-size: cover;
  background-position: center;
}
.mh-game-card .body{
  padding: 12px;
}
.mh-game-card .title{
  font-weight: 900;
  font-size: 16px;
}
.mh-game-card .sub{
  color: rgba(255,255,255,.60);
  font-size: 12px;
  margin: 4px 0 10px;
}
.mh-center-cta{
  margin-top: 14px;
  text-align: right;
}
.mh-link-accent{
  color: var(--mh-accent);
  font-weight: 800;
}

/* Features */
.mh-feature{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border: 0; /* ✅ border OFF */
  background: rgba(255,255,255,.035);
  border-radius: 0;
  padding: 16px;
  height: 100%;
}
.mh-feature .ico{
  width: 46px; height: 46px;
  border-radius: 0;
  background: rgba(var(--mh-accent-rgb), .12);
  border: 0; /* ✅ border OFF */
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  overflow:hidden;
}
.mh-feature .ico img{
  max-width: 28px;
  opacity: .95;
}
.mh-feature .mh-ico{
  font-size: 20px;
}
.mh-feature h4{
  margin: 0 0 6px;
  font-weight: 900;
}
.mh-feature p{
  margin: 0;
  color: rgba(255,255,255,.60);
  line-height: 1.55;
}

/* Steps */
.mh-steps{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.mh-step{
  border: 0; /* ✅ border OFF */
  background: rgba(0,0,0,.25);
  border-radius: 0;
  padding: 14px;
  display:flex;
  gap: 12px;
}
.mh-step .n{
  width: 34px; height: 34px;
  border-radius: 0;
  background: rgba(var(--mh-accent-rgb), .14);
  border: 0; /* ✅ border OFF */
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--mh-accent);
}
.mh-step h5{
  margin: 0 0 4px;
  font-weight: 900;
}
.mh-step p{
  margin: 0;
  color: rgba(255,255,255,.60);
  font-size: 13px;
}

/* Stats */
.mh-stat{
  border: 0; /* ✅ border OFF */
  background: rgba(255,255,255,.035);
  border-radius: 0;
  padding: 16px;
  text-align:center;
}
.mh-stat .big{
  font-size: 34px;
  font-weight: 900;
  color: var(--mh-accent);
}
.mh-stat .small{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.mh-split{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.mh-split-card{
  border: 0; /* ✅ border OFF */
  background: rgba(0,0,0,.25);
  border-radius: 0;
  padding: 16px;
}
.mh-split-card h4{
  margin: 0 0 6px;
  font-weight: 900;
}
.mh-split-card p{
  color: rgba(255,255,255,.60);
  margin: 0 0 10px;
}
.mh-locations{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mh-loc{
  border: 0; /* ✅ border OFF */
  background: rgba(255,255,255,.04);
  padding: 7px 10px;
  border-radius: 0;
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.mh-check{
  list-style:none;
  padding-left: 0;
  margin: 0;
}
.mh-check li{
  padding: 6px 0;
  border-bottom: 0 !important;
  color: rgba(255,255,255,.75);
}
.mh-check li:last-child{ border-bottom: 0; }

.mh-mini-note{
  color: rgba(255,255,255,.45);
  font-size: 12px;
  margin-top: 10px;
}

/* =========================
   Pricing
   ========================= */
.mh-price{
  border: 0; /* ✅ border OFF */
  background: rgba(255,255,255,.035);
  border-radius: 0;
  padding: 16px;
  height: 100%;
  position: relative;
  overflow:hidden;
}
.mh-price .head{
  padding-bottom: 12px;
  border-bottom: 0; /* ✅ border OFF */
  margin-bottom: 12px;
}
.mh-price .name{
  font-weight: 900;
  font-size: 18px;
}
.mh-price .price{
  margin-top: 6px;
  font-weight: 900;
  font-size: 26px;
  color: var(--mh-accent);
}
.mh-price .price span{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-right: 6px;
  font-weight: 700;
}
.mh-price .price small{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  font-weight: 700;
}
.mh-price .tag{
  margin-top: 6px;
  color: rgba(255,255,255,.60);
  font-size: 12px;
}
.mh-price ul{
  padding-left: 18px;
  color: rgba(255,255,255,.80);
}
.mh-price ul li{ margin: 8px 0; }

.mh-price-featured{
  box-shadow: 0 0 0 3px rgba(var(--mh-accent-rgb), .12), var(--mh-shadow);
  background: linear-gradient(180deg, rgba(var(--mh-accent-rgb), .10), rgba(255,255,255,.03));
}
.mh-price .ribbon{
  position:absolute;
  top: 14px;
  right: -44px;
  background: var(--mh-accent);
  color: #fff;
  font-weight: 900;
  padding: 6px 54px;
  transform: rotate(35deg);
  font-size: 12px;
}

/* =========================
   Weekly deals
   ========================= */
.mh-weekly{
  border: 0; /* ✅ border OFF */
  background: rgba(255,255,255,.03);
  border-radius: 0;
  padding: 18px;
}
.mh-weekly-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mh-countdown{
  text-align:right;
}
.mh-countdown .label{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.mh-countdown .value{
  font-weight: 900;
  font-size: 20px;
  color: var(--mh-accent);
}

.mh-deal{
  position: relative;
  min-height: 190px;
  border-radius: 0;
  overflow:hidden;
  background-size: cover;
  background-position: center;
  border: 0; /* ✅ border OFF */
  box-shadow: 0 14px 50px rgba(0,0,0,.40);
}
.mh-deal .overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,.10));
}
.mh-deal .content{
  position:absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
}
.mh-deal h3{
  margin: 8px 0 4px;
  font-weight: 900;
}
.mh-deal p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.70);
}

/* =========================
   Quotes
   ========================= */
.mh-quote{
  border: 0; /* ✅ border OFF */
  background: rgba(0,0,0,.25);
  border-radius: 0;
  padding: 16px;
  height: 100%;
}
.mh-quote .q{
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.85);
}
.mh-quote .who{
  margin-top: 10px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* =========================
   FAQ
   ========================= */
.mh-faq-card{
  background: rgba(255,255,255,.03) !important;
  border: 0 !important; /* ✅ border OFF */
  border-radius: 0 !important;
  overflow:hidden;
  margin-bottom: 10px;
}
.mh-faq-card .card-header{
  background: rgba(0,0,0,.25) !important;
  border-bottom: 0 !important; /* ✅ border OFF */
}
.mh-faq-btn{
  width: 100%;
  text-align:left;
  color: rgba(255,255,255,.92) !important;
  font-weight: 900 !important;
  padding: 10px 0 !important;
  text-decoration:none !important;
}
.mh-faq-card .card-body{
  color: rgba(255,255,255,.70);
  line-height: 1.6;
}

/* =========================
   Final CTA
   ========================= */
.mh-final-cta{
  margin-top: 18px;
  border-radius: 0;
  border: 0; /* ✅ border OFF */
  background:
    radial-gradient(900px 300px at 20% 30%, rgba(var(--mh-accent-rgb), .16), transparent 60%),
    rgba(0,0,0,.30);
  box-shadow: var(--mh-shadow);
}
.mh-final-cta .inner{
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.mh-final-cta h3{
  margin: 0 0 6px;
  font-weight: 900;
}
.mh-final-cta p{
  margin: 0;
  color: rgba(255,255,255,.65);
}
.mh-final-cta .btns{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 991.98px){
  .mh-hero{ padding-top: 30px; }
  .mh-trust-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mh-trust-row--two{ max-width: none; }
  .mh-showcase-hero{ height: 260px; }
  .mh-steps{ grid-template-columns: 1fr; }
  .mh-split{ grid-template-columns: 1fr; }
  .mh-weekly-head{ flex-direction: column; align-items:flex-start; }
  .mh-countdown{ text-align:left; }
  .mh-center-cta{ text-align:left; }
  .mh-final-cta .inner{ flex-direction: column; align-items:flex-start; }
}

/* =========================
   ORBIT v3 — realistic moon + real occlusion + curved fly-by
   ICON ONLY
   ========================= */

.mh-orbit-stage{
  margin: 18px auto 0;
  padding: 26px 14px 18px;
  background: transparent;
}

.mh-orbit-head{
  width: min(980px, 100%);
  margin: 0 auto 10px;
}
.mh-orbit-head h2{
  margin: 0 0 6px;
  font-weight: 900;
}
.mh-orbit-head p{
  margin: 0;
  color: rgba(255,255,255,.60);
}

.mh-orbit-scene{
  --moonSize: clamp(230px, 22vw, 340px);
  --iconSize: 88px;

  position: relative;
  width: min(980px, 100%);
  height: clamp(340px, 44vh, 560px);
  margin: 0 auto;

  display: grid;
  place-items: center;

  perspective: 1400px;
  transform-style: preserve-3d;
  overflow: visible;
}

/* finom orbit vonal */
.mh-orbit-scene::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width: min(860px, 92%);
  height: min(280px, 40%);
  transform: translate(-50%, -50%);
  opacity: .55;
  pointer-events:none;
}

/* két layer (back/front) */
.mh-orbit-layer{
  position:absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.mh-orbit-layer--back{ z-index: 2; }
.mh-orbit-layer--front{ z-index: 6; }

/* BACK layer MASZK: a hold közepe legyen “lyuk”, így a mögötte lévő ikon eltűnik a hold mögött */
.mh-orbit-layer--back{
  --r: calc(var(--moonSize) / 2);
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    transparent 0 var(--r),
    #000 calc(var(--r) + 2px)
  );
  mask-image: radial-gradient(circle at 50% 50%,
    transparent 0 var(--r),
    #000 calc(var(--r) + 2px)
  );
}

/* HOLD (realisztikusabb CSS “textúrával”) */
.mh-orbit-moon{
  position:absolute;
  left:50%; top:50%;
  width: var(--moonSize);
  height: var(--moonSize);
  transform: translate(-50%, -50%) translateZ(0);
  border-radius: 50%;
  z-index: 4;

  background:
    /* fényfolt */
    radial-gradient(120px 120px at 32% 28%, rgba(255,255,255,.20), transparent 62%),
    /* hideg kék ambient */
    radial-gradient(140px 140px at 72% 70%, rgba(130,160,255,.10), transparent 70%),
    /* terminátor + mélység */
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.10), rgba(0,0,0,.42) 58%, rgba(0,0,0,.86) 100%);

  box-shadow:
    0 40px 120px rgba(0,0,0,.70),
    0 0 120px rgba(var(--mh-accent-rgb), .10);

  filter: contrast(1.08) saturate(1.05);
  animation: mhMoonFloat 6.2s ease-in-out infinite;
  overflow: hidden;
}

/* kráterek (pseudo “texture”) */
.mh-orbit-moon::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  opacity: .95;
  mix-blend-mode: overlay;
  background:
    radial-gradient(18px 14px at 28% 38%, rgba(255,255,255,.10), transparent 65%),
    radial-gradient(24px 18px at 60% 30%, rgba(0,0,0,.35), transparent 70%),
    radial-gradient(14px 12px at 68% 56%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(26px 22px at 42% 70%, rgba(0,0,0,.28), transparent 72%),
    radial-gradient(10px 10px at 36% 52%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(16px 14px at 54% 52%, rgba(0,0,0,.22), transparent 72%);
  filter: blur(.2px);
}

/* finom peremfény */
.mh-orbit-moon::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:50%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 26px rgba(255,255,255,.05);
  pointer-events:none;
}

/* hold “front highlight” (de NE takarja a front ikonokat) */
.mh-orbit-moon-front{
  position:absolute;
  left:50%; top:50%;
  width: var(--moonSize);
  height: var(--moonSize);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 5;
  pointer-events:none;
  opacity: .55;
  mix-blend-mode: screen;
  background:
    radial-gradient(180px 140px at 28% 30%, rgba(255,255,255,.12), transparent 65%),
    radial-gradient(220px 220px at 30% 35%, rgba(255,255,255,.06), transparent 72%);
}

@keyframes mhMoonFloat{
  0%   { transform: translate(-50%, -50%) translateZ(0) rotate(-.35deg); }
  50%  { transform: translate(-50%, -50%) translateZ(0) rotate(.35deg); }
  100% { transform: translate(-50%, -50%) translateZ(0) rotate(-.35deg); }
}

/* MOZGÓ IKON (kattintható) */
.mh-orbit-icon{
  position:absolute;
  left:50%; top:50%;
  width: var(--iconSize);
  height: var(--iconSize);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
  z-index: 7; /* JS mozgatja layerbe, de kattintás miatt marad itt */
  opacity: 0;
  pointer-events: none !important;
  text-decoration: none;

  border: 0px solid rgba(255,255,255,.10);
  border-radius: 0; /* squared */
  display:grid;
  place-items:center;

  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

.mh-orbit-ico{
  width: calc(var(--iconSize) - 22px);
  height: calc(var(--iconSize) - 22px);
  border: 1px solid rgba(255,255,255,.10);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0; /* squared */
}

/* amikor tényleg elöl van */
.mh-orbit-icon.is-front{
  border-color: rgba(var(--mh-accent-rgb), .30);
  box-shadow:
    0 22px 70px rgba(0,0,0,.62),
}

.mh-orbit-hint{
  margin-top: 12px;
  color: rgba(255,255,255,.45);
  font-size: 12px;
  text-align:left;
  max-width: min(980px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .mh-orbit-moon{ animation: none !important; }
  .mh-orbit-icon{ opacity: 1 !important; transform: translate(-50%,-50%) !important; }
}