/* ---------- nav ---------- */
.mc-nav{
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,7,20,0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.mc-nav-inner{ display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; gap: 20px; }
.brand{ display: flex; align-items: center; gap: 10px; }
.brand-logo{ width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(124,58,237,0.55)); }
.brand-logo-sm{ width: 24px; height: 24px; }
.brand-name{ font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; }
.brand-name span{ color: var(--violet-glow); }
.mc-links{ display: flex; align-items: center; gap: 26px; }
.mc-links a{ font-size: 13.5px; color: var(--text-muted); font-weight: 500; transition: color .15s ease; }
.mc-links a:hover{ color: var(--text); }
.btn-sm{ padding: 10px 18px; font-size: 13px; }

/* ---------- hero ---------- */
.mc-hero{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  padding: 90px 28px 70px;
}
.mc-hero h1{
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1;
  margin: 20px 0 18px;
}
.mc-hero h1 span{ color: var(--violet-glow); text-shadow: 0 0 30px rgba(148,87,255,0.45); }
.mc-hero-text > p{ color: var(--text-muted); max-width: 480px; margin-bottom: 26px; font-size: 16px; }

.ip-box{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
  max-width: 420px;
  margin-bottom: 26px;
}
.ip-box-label{ font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.05em; }
.ip-box-value{ font-family: var(--font-mono); font-size: 16px; color: var(--text); flex: 1; }
.ip-copy{
  background: var(--violet-deep); color: #fff; border: none;
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600;
  transition: background .15s ease;
}
.ip-copy:hover{ background: var(--violet); }
.ip-copy.copied{ background: var(--success); color: #052e12; }

.mc-hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.btn-discord .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); display: inline-block; }

/* ---------- floating island signature art ---------- */
.mc-hero-art{ display: flex; justify-content: center; }
.floating-island{
  position: relative;
  width: 260px; height: 260px;
  animation: float 6s ease-in-out infinite;
}
@keyframes float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
.block{
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 6px;
}
.block-grass{
  top: 30px; width: 220px; height: 60px;
  background: linear-gradient(180deg, #8b5cf6, #6d28d9);
  box-shadow: 0 0 40px rgba(124,58,237,0.5);
}
.block-dirt{
  top: 88px; width: 190px; height: 40px;
  background: linear-gradient(180deg, #3d1a78, #241147);
  clip-path: polygon(6% 0, 94% 0, 84% 100%, 16% 100%);
}
.block-dirt-2{
  top: 126px; width: 140px; height: 34px;
  background: linear-gradient(180deg, #2a1657, #170c30);
  clip-path: polygon(10% 0, 90% 0, 74% 100%, 26% 100%);
}
.crystal{
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 30px;
  background: var(--violet-glow);
  clip-path: polygon(50% 0, 100% 35%, 70% 100%, 30% 100%, 0 35%);
  box-shadow: 0 0 24px 6px rgba(183,148,255,0.7);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100%{ opacity: 0.85; }
  50%{ opacity: 1; filter: brightness(1.25); }
}
@media (prefers-reduced-motion: reduce){
  .floating-island, .crystal{ animation: none; }
}

/* ---------- status strip ---------- */
.status-strip{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(124,58,237,0.04); }
.status-strip-inner{ display: flex; flex-wrap: wrap; gap: 40px; padding: 20px 28px; }
.status-item{ display: flex; align-items: center; gap: 10px; }
.status-item strong{ display: block; font-family: var(--font-display); font-size: 18px; }
.status-item span{ display: block; font-size: 11.5px; color: var(--text-faint); font-family: var(--font-mono); }
.status-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); }
.status-dot.online{ background: var(--success); box-shadow: 0 0 8px var(--success); }

/* ---------- sections ---------- */
.section{ padding: 84px 28px; }
.section-alt{ background: rgba(255,255,255,0.012); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-title{ font-size: clamp(26px, 3.4vw, 36px); margin: 14px 0 44px; }

.feature-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card{
  padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.015); transition: border-color .18s ease, transform .18s ease;
}
.feature-card:hover{ border-color: var(--violet); transform: translateY(-3px); }
.feature-icon{ font-size: 22px; margin-bottom: 14px; }
.feature-card h3{ font-family: var(--font-body); font-size: 16.5px; margin: 0 0 8px; }
.feature-card p{ color: var(--text-muted); font-size: 14px; margin: 0; }

.mode-list{ display: flex; flex-direction: column; gap: 12px; }
.mode-row{
  display: flex; align-items: center; gap: 24px;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.015);
  transition: border-color .18s ease;
}
.mode-row:hover{ border-color: var(--violet); }
.mode-tag{ font-family: var(--font-display); font-size: 22px; color: var(--violet-glow); opacity: 0.7; width: 40px; flex-shrink: 0; }
.mode-info h3{ font-family: var(--font-body); font-size: 17px; margin: 0 0 4px; }
.mode-info p{ color: var(--text-muted); font-size: 13.5px; margin: 0; }
.mode-row .pill{ margin-left: auto; flex-shrink: 0; }

.gallery-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-tile{ aspect-ratio: 4/3; border-radius: var(--radius-md); border: 1px solid var(--line); position: relative; overflow: hidden; }
.gt-1{ background: linear-gradient(150deg, #6d28d9, #1c1436 70%); }
.gt-2{ background: linear-gradient(150deg, #4c1d95, #0a0714 70%); }
.gt-3{ background: linear-gradient(150deg, #9457ff, #241a44 70%); }
.gt-4{ background: linear-gradient(150deg, #3d1a78, #150f26 70%); }
.gallery-tile::after{
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 26px),
                     repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 26px);
}

.team-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.team-card{
  padding: 26px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.015);
}
.team-avatar{
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 12px;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 20px;
  background: linear-gradient(135deg, var(--violet-2), var(--violet-deep)); color: #fff;
}
.team-card strong{ display: block; font-size: 15px; margin-bottom: 4px; }
.team-card span{ font-size: 12.5px; color: var(--text-faint); }

.cta-band{ padding: 90px 28px; text-align: center; }
.cta-band h2{ font-size: clamp(28px, 4vw, 40px); margin-bottom: 12px; }
.cta-band p{ color: var(--text-muted); margin-bottom: 28px; }

/* ---------- footer ---------- */
.mc-footer{ border-top: 1px solid var(--line); padding: 36px 0 60px; }
.mc-footer-inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.mc-footer-links{ display: flex; gap: 22px; flex-wrap: wrap; }
.mc-footer-links a{ font-size: 13px; color: var(--text-muted); }
.mc-footer-links a:hover{ color: var(--text); }
.mc-footer-inner p{ color: var(--text-faint); font-size: 12.5px; margin: 0; width: 100%; text-align: center; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 880px){
  .mc-hero{ grid-template-columns: 1fr; padding-top: 130px; }
  .mc-links{ display: none; }
  .feature-grid, .team-grid{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .feature-grid, .team-grid, .gallery-grid{ grid-template-columns: 1fr; }
  .mode-row{ flex-wrap: wrap; }
  .mode-row .pill{ margin-left: 0; }
}