.mg-overview {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  animation: mg-fade-in 700ms var(--ease-standard) both;
}
.mg-overview.is-hidden { display: none; }

.mg-overview-copy {
  position: absolute;
  left: 60px;
  top: 92px;
  max-width: min(440px, calc(38 * var(--vw, 1vw)));
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: mg-rise 900ms var(--ease-standard) both;
}

.mg-tagline {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(20px, calc(2 * var(--vw, 1vw)), 27px);
  line-height: 1.42;
  letter-spacing: .03em;
  color: #f6f8ff;
  text-shadow: 0 2px 26px rgba(4,10,30,.95);
  text-wrap: pretty;
}

.mg-rule-row { display: flex; align-items: center; gap: 14px; }
.mg-rule-line {
  display: block;
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, rgba(214,232,255,.6), rgba(214,232,255,0));
}
.mg-rule-label {
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(198,220,255,.6);
}

.mg-cta {
  position: relative;
  pointer-events: auto;
  align-self: flex-start;
  width: 216px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: url('../assets/images/button.png') center/100% 100% no-repeat;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: .26em;
  color: #eaf3ff;
  transition:
    filter 260ms var(--ease-decel),
    transform 260ms var(--ease-decel);
}
.mg-cta-glow {
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(150,200,255,.3), transparent 70%);
  opacity: 0;
  transition: opacity 300ms var(--ease-standard);
  pointer-events: none;
}
.mg-cta-label { position: relative; z-index: 1; }
.mg-cta:hover {
  filter: drop-shadow(0 0 12px rgba(160,205,255,.7));
  transform: translateY(-2px);
}
.mg-cta:hover .mg-cta-glow { opacity: 1; }
.mg-cta:active { transform: translateY(0) scale(.985); }

.mg-wheel-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mg-hint {
  font-size: 9.5px;
  letter-spacing: .3em;
  color: rgba(198,220,255,.45);
  white-space: nowrap;
}
.mg-scrub {
  position: relative;
  width: min(300px, calc(32 * var(--vw, 1vw)));
  height: 22px;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.mg-scrub-track {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(198,220,255,0), rgba(198,220,255,.45) 20%, rgba(198,220,255,.45) 80%, rgba(198,220,255,0));
}
.mg-scrub-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #eef5ff;
  box-shadow: 0 0 12px rgba(190,220,255,.9);
  will-change: transform;
}

@media (max-width: 1100px) {
  .mg-overview-copy { left: 30px; top: 72px; }
}