/* Styles extracted from MainMenu.js */
@keyframes mm_rotate {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.mm-root { position: relative; width: 100%; height: 100%; overflow: hidden; }
.mm-scene { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 50%; }
.mm-cube { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }
.mm-rotor { position: relative; width: 100%; height: 100%; transform-origin: 50% 50% 0; transform-style: preserve-3d; animation: mm_rotate 120s linear infinite; }
.mm-face { position: absolute; backface-visibility: visible; background-size: cover; background-position: center; will-change: transform; }
.mm-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.14); }
.mm-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-shadow: 0 2px 2px rgba(0,0,0,0.7); transform: translateY(-10vh); opacity: 0; transition: opacity 180ms ease; }
.mm-content.mm-ready { opacity: 1; }
.mm-logo { display: block; max-width: 80vw; width: 720px; height: auto; margin-bottom: 28px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)); }
.mm-primary { display: flex; flex-direction: column; align-items: center; margin-top: 58px; }
.btn-inline { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.btn-emerald { width: 22px; height: 22px; image-rendering: pixelated; border: none; border-radius: 0; display: block; }
.mm-row {
  position: relative;
  margin-top: 58px;
  height: 60px; /* enough to center absolute children vertically */
}
.mm-row-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 12px;
}
.mm-leader {
  position: absolute;
  /* nudge up to visually center with larger buttons (account for drop shadow) */
  top: calc(50% - 5px);
  transform: translateY(-50%);
  /* place to the left of the first centered narrow button */
  left: calc(50% - ((220px * 2 + 12px) / 2) - 12px - 42px);
}

/* Preserve centering transform when the small button is pressed */
.mm-leader:active {
  transform: translateY(calc(-50% + 1px));
}
.mm-bottom { position: absolute; bottom: 6px; left: 8px; right: 8px; display: flex; justify-content: space-between; font-size: 12px; opacity: 0.9; }