@font-face {
  font-family: 'Favorite Nurse';
  src: url('../font/Favorite%20Nurse.otf') format('opentype');
  font-display: swap;
}

/* ─── MAIN MENU ──────────────────────────────────────────────────────────────── */
#main-menu {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: radial-gradient(ellipse at 50% 38%, #2a0a1f 0%, #1a0a0f 62%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}
#mm-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 320px;
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
#mm-inner.mm-opts-open {
  width: 520px;
  align-items: stretch;
}
#mm-inner.mm-credits-open {
  width: 520px;
  align-items: stretch;
}
#mm-inner.mm-hotkeys-open {
  width: 520px;
  align-items: stretch;
}
#mm-inner.mm-challenge-open {
  width: 520px;
  align-items: stretch;
}
#mm-inner.mm-newgame-open {
  width: 400px;
  align-items: stretch;
}
#mm-inner.mm-load-open {
  width: 400px;
  align-items: stretch;
}
#mm-load .mm-panel-title { font-size: 23px; }
#mm-load #mm-load-input { font-size: 15px; }
#mm-load #mm-load-error { font-size: 14px; }

/* Logo & title */
#mm-logo {
  font-size: 67px;
  font-weight: 400;
  line-height: 1.2;
  color: #f5d0e8;
  font-family: 'Favorite Nurse', 'Cinzel Decorative', sans-serif;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 18px rgba(230,70,170,0.9),
    0 0 40px rgba(230,70,170,0.6),
    0 0 80px rgba(140,40,210,0.45);
  animation: mmLogoGlow 2.5s ease-in-out infinite, mmLogoBounce 1.8s ease-in-out infinite, mmLogoBreath 4.2s ease-in-out infinite;
  animation-composition: replace, add, add;
  margin-bottom: 4px;
}
@keyframes mmLogoBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes mmLogoBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
/* Gentle idle breath for the cylinder/kiwi visuals on the main-menu save
   preview (#mm-stage-*) and the name-entry "this is your cylinder" screen
   (#ne-*). Mirrors the in-game left-column rhythm. Keyframes preserve the
   existing translateX(-50%) centering since CSS animations override the
   base transform entirely. */
@keyframes mmCylBreath {
  0%, 100% { transform: translateX(-50%) scaleY(1)     scaleX(1); }
  50%      { transform: translateX(-50%) scaleY(1.018) scaleX(0.992); }
}
@keyframes mmKiwiBreath {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.025); }
}
@keyframes mmLogoGlow {
  0%, 100% {
    text-shadow:
      0 0 16px rgba(220,60,160,0.85),
      0 0 36px rgba(220,60,160,0.55),
      0 0 72px rgba(120,30,200,0.38);
  }
  50% {
    text-shadow:
      0 0 28px rgba(255,90,190,1),
      0 0 56px rgba(255,90,190,0.75),
      0 0 110px rgba(170,60,250,0.55);
  }
}
#mm-logo .mm-logo-sweat {
  color: transparent;
  margin-left: -30px;
  position: relative;
  top: -9px;
  left: 5px;
  /* Render the emoji glyph in the logo's text color (the 0-offset shadow
     acts as a fill when color is transparent) and replicate the glow stack. */
  text-shadow:
    0 0 0 #f5d0e8,
    0 0 18px rgba(230,70,170,0.9),
    0 0 40px rgba(230,70,170,0.6),
    0 0 80px rgba(140,40,210,0.45);
  animation: mmLogoSweatGlow 2.5s ease-in-out infinite;
}
@keyframes mmLogoSweatGlow {
  0%, 100% {
    text-shadow:
      0 0 0 #f5d0e8,
      0 0 16px rgba(220,60,160,0.85),
      0 0 36px rgba(220,60,160,0.55),
      0 0 72px rgba(120,30,200,0.38);
  }
  50% {
    text-shadow:
      0 0 0 #f5d0e8,
      0 0 28px rgba(255,90,190,1),
      0 0 56px rgba(255,90,190,0.75),
      0 0 110px rgba(170,60,250,0.55);
  }
}
/* Main nav buttons */
#mm-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.mm-btn {
  position: relative;
  width: 100%;
  padding: 14px 26px;
  font-size: 19px;
  font-weight: 700;
  color: #f2c8d8;
  background: linear-gradient(180deg, #3a1830 0%, #260e1a 100%);
  border: 1px solid #703458;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Exo 2', Calibri, sans-serif;
  letter-spacing: 0.04em;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s, color 0.15s;
  box-shadow:
    inset 0 1px 0 rgba(255,180,220,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 10px rgba(0,0,0,0.5);
  text-align: center;
}
.mm-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,200,230,0.12) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.55s ease;
}
.mm-btn:hover::before { left: 125%; }
.mm-btn:hover {
  background: linear-gradient(180deg, #4a1a32 0%, #2a0e1c 100%);
  border-color: #9a4070;
  color: #f8d0e0;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,200,230,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 5px 22px rgba(160,60,120,0.42),
    0 0 18px rgba(190,80,140,0.22);
}
.mm-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.5),
    0 1px 4px rgba(0,0,0,0.5);
  transition: transform 0.06s, box-shadow 0.06s;
}
.mm-btn-primary {
  background: linear-gradient(135deg, #4a1238 0%, #7020a0 100%);
  border-color: #b050d8;
  color: #f5d0ff;
  box-shadow:
    inset 0 1px 0 rgba(255,210,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 2px 18px rgba(150,50,200,0.45),
    0 0 36px rgba(110,30,180,0.22);
}
.mm-btn-primary:hover {
  background: linear-gradient(135deg, #601848 0%, #8830b8 100%);
  border-color: #d070f0;
  color: #fff0ff;
  box-shadow:
    inset 0 1px 0 rgba(255,220,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 5px 28px rgba(190,70,240,0.6),
    0 0 50px rgba(150,50,220,0.36);
}
.mm-btn-danger {
  background: linear-gradient(135deg, #3a0808 0%, #8a1010 100%);
  border-color: #cc3030;
  color: #ffd0d0;
  box-shadow:
    inset 0 1px 0 rgba(255,180,180,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 14px rgba(180,30,30,0.4);
}
.mm-btn-danger:hover {
  background: linear-gradient(135deg, #4a1010 0%, #aa2020 100%);
  border-color: #ee5050;
  color: #fff0f0;
  box-shadow:
    inset 0 1px 0 rgba(255,200,200,0.26),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 5px 24px rgba(220,50,50,0.55);
}
.mm-btn-exit {
  color: #70404e;
  background: linear-gradient(180deg, #1a0810 0%, #0c0408 100%);
  border-color: #2a0e18;
  font-size: 14px;
  padding: 11px 26px;
}
.mm-btn-exit:hover {
  background: #200a12;
  border-color: #7a2840;
  color: #cc8090;
}

/* Exit message */
#mm-exit-msg {
  font-size: 12px;
  color: #8a5060;
  font-family: 'Exo 2', Calibri, sans-serif;
  text-align: center;
  padding: 8px 14px;
  background: #1a080e;
  border: 1px solid #3a1828;
  border-radius: 8px;
  width: 100%;
}

/* ── Load Game panel ──────────────────────────────────────────────────────── */
#mm-load {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.mm-panel-title {
  font-size: 19px;
  font-weight: 700;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  text-align: center;
}
.mm-panel-sub {
  font-size: 12px;
  color: #7a5068;
  font-family: 'Exo 2', Calibri, sans-serif;
  text-align: center;
  line-height: 1.5;
}
#mm-load-input {
  width: 100%;
  background: #110608;
  border: 1px solid #4a2035;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #c090a8;
  font-family: monospace;
  font-weight: 700;
  resize: none;
  height: 90px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
#mm-load-input::placeholder {
  font-weight: 700;
}
#mm-load-input:focus {
  border-color: #7a3060;
}
#mm-load-error {
  font-size: 12px;
  color: #ff6868;
  font-family: 'Exo 2', Calibri, sans-serif;
  min-height: 16px;
  text-align: center;
}
.mm-btn-row {
  display: flex;
  gap: 10px;
}
.mm-btn-row .mm-btn {
  flex: 1;
}

/* ── New Game warning panels ──────────────────────────────────────────────── */
#mm-newgame-warn,
#mm-newgame-sure {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.mm-ng-export-label {
  font-size: 12px;
  font-weight: 700;
  color: #9a7080;
  font-family: 'Exo 2', Calibri, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mm-ng-export-box {
  width: 100%;
  background: #110608;
  border: 1px solid #4a2035;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  color: #c090a8;
  font-family: monospace;
  resize: none;
  height: 72px;
  box-sizing: border-box;
  outline: none;
}
.mm-ng-copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mm-ng-copy-btn {
  width: auto;
  padding: 7px 14px;
  font-size: 12px;
  flex-shrink: 0;
}
#mm-newgame-warn .mm-panel-title { font-size: 23px; }
#mm-newgame-warn .mm-ng-export-label { font-size: 14px; }
#mm-newgame-warn .mm-ng-export-box { font-size: 13px; }
#mm-newgame-warn .mm-ng-copy-btn { font-size: 14px; }
#mm-newgame-sure .mm-panel-title { font-size: 25px; }

/* ── Options container ────────────────────────────────────────────────────── */
/* Outer container is a flex column wrapping a scrollable inner div and a
   static Back button — Back stays pinned below the scroll, matching the
   hotkeys panel. */
#mm-options-container {
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}
#mm-options-scroll {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  /* Cap by both the measured panel height AND remaining viewport height
     (after logo + back button + paddings) so the Back button is never
     pushed off-screen on shorter viewports. */
  max-height: min(var(--mm-panel-h, 68vh), calc(100vh - 240px));
  overflow-y: auto;
  box-sizing: border-box;
  font-family: 'Exo 2', Calibri, sans-serif;
  background: #170b0e;
  border: 1px solid #3a1828;
  border-radius: 10px;
}
#mm-challenge-container {
  font-family: 'Exo 2', Calibri, sans-serif;
  font-weight: 700;
}
#mm-challenge-container * {
  font-weight: 700;
}

/* ── Credits panel ────────────────────────────────────────────────────────── */
#mm-credits {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
/* ── Hotkeys panel ────────────────────────────────────────────────────────── */
#mm-hotkeys {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}
.mm-hotkey-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Exo 2', Calibri, sans-serif;
  padding: 2px 0;
}
.mm-hotkey-key {
  flex-shrink: 0;
  min-width: 44px;
  text-align: center;
  font-family: Calibri, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #f5d0e8;
  background: #1e0a14;
  border: 1px solid #5a2848;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 3px 8px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.mm-hotkey-key-clickable {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.mm-hotkey-key-clickable:hover {
  background: #3a1228;
  border-color: #a04878;
  color: #ffe0f0;
}
.mm-hotkey-key-clickable:active {
  transform: translateY(1px);
}
.hk-rebind-backdrop {
  position: absolute;
  background: rgba(0, 0, 0, 0.88);
  z-index: 20;
  border-radius: 9px;
  overflow: hidden;
}
.hk-rebind-pop {
  position: absolute;
  background: linear-gradient(
    to bottom,
    transparent 0,
    #000 20px,
    #000 calc(100% - 20px),
    transparent 100%
  );
  border: none;
  border-radius: 9px;
  padding: 16px;
  z-index: 21;
  text-align: center;
  font-family: Calibri, 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.hk-rebind-title {
  color: #f0c0ff;
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 8px;
}
.hk-rebind-current {
  color: #d8b0e0;
  font-size: 17px;
  margin-bottom: 14px;
}
.hk-rebind-current b {
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.hk-rebind-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.hk-rebind-btn {
  background: #1e0a24;
  color: #f0c0ff;
  border: 1px solid #6a3890;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: Calibri, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.hk-rebind-btn:hover {
  background: #3a1248;
  border-color: #a060d0;
}
.mm-hotkey-desc {
  font-size: 14px;
  font-weight: 700;
  color: #c090a8;
}
.mm-credits-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #110608;
  border: 1px solid #3a1828;
  border-radius: 10px;
  padding: 14px 16px;
}
#mm-credits .mm-credits-list {
  max-height: var(--mm-panel-h, 68vh);
  overflow-y: auto;
}
.mm-credit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: 'Exo 2', Calibri, sans-serif;
}
.mm-credit-role {
  font-size: 16px;
  font-weight: 700;
  color: #7a5068;
  flex-shrink: 0;
}
.mm-credit-name {
  font-size: 14px;
  font-weight: 700;
  color: #e0b0c8;
  text-align: right;
  background: #1e0a14;
  border: 1px solid #3a1828;
  border-radius: 6px;
  padding: 3px 10px;
}
.mm-credit-divider {
  height: 1px;
  background: #4a2040;
  margin: 6px auto;
  width: 85%;
}
.mm-credit-section {
  font-size: 13px;
  font-weight: 900;
  color: #c090a8;
  font-family: 'Exo 2', Calibri, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.mm-credit-block {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
  font-family: 'Exo 2', Calibri, sans-serif;
}
.mm-credit-block .mm-credit-role {
  font-size: 15px;
  font-weight: 900;
  color: #c090a8;
  margin-bottom: 1px;
  background: none;
  border: 0;
  padding: 0;
}
.mm-credit-attr {
  font-size: 14px;
  font-weight: 700;
  color: #7a5068;
  padding-left: 8px;
}
.mm-credits-thanks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mm-thanks-name {
  font-size: 14px;
  font-weight: 700;
  color: #e0b0c8;
  font-family: 'Exo 2', Calibri, sans-serif;
  background: #1e0a14;
  border: 1px solid #3a1828;
  border-radius: 6px;
  padding: 3px 10px;
}
/* Radio soundtrack — grid of track cards inside the credits panel */
.mm-credits-tracks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 10px;
  margin-top: 4px;
}
.mm-track {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #1a0810;
  border: 1px solid #2e1422;
  border-radius: 6px;
  padding: 6px 9px;
  font-family: 'Exo 2', Calibri, sans-serif;
}
.mm-track-name {
  font-size: 12px;
  font-weight: 700;
  color: #e0b0c8;
  line-height: 1.2;
}
.mm-track-artist {
  font-size: 12px;
  font-weight: 700;
  color: #8a5878;
  line-height: 1.2;
}

/* Version tag */
#mm-version {
  font-size: 10px;
  color: #4a2838;
  font-family: 'Exo 2', Calibri, sans-serif;
  margin-top: 6px;
  letter-spacing: 0.05em;
  width: 100%;
  text-align: center;
}

/* Only show version on the main menu itself — hide when any sub-panel is open
   (sub-panels hide #mm-nav via inline display:none). The cylinder stage and
   the version-update widget follow the same rule: they belong to the root
   menu screen and disappear together with the nav. */
#mm-inner:has(#mm-nav[style*="none"]) #mm-version { display: none; }
#main-menu:has(#mm-nav[style*="none"]) #mm-stage,
#main-menu:has(#mm-nav[style*="none"]) #vp-widget { display: none; }

/* ── Mobile / narrow-viewport layout ──────────────────────────────────────────
   The default #mm-inner is position:absolute at left:50px with hardcoded
   widths (320px default, 520px when a sub-panel is open). On phones narrower
   than ~600px that pushes sub-panel content off the right edge — and on
   shorter viewports the centered-via-translateY trick pushes the static Back
   button below the screen. Either case: switch to static, full-width, and
   let #main-menu's flex centering + scroll take over so Back is always
   reachable by scrolling. */
@media (max-width: 600px), (max-height: 760px) {
  #main-menu {
    align-items: flex-start;
    overflow-y: auto;
    padding: 28px 12px;
  }
  #mm-inner,
  #mm-inner.mm-opts-open,
  #mm-inner.mm-credits-open,
  #mm-inner.mm-hotkeys-open,
  #mm-inner.mm-challenge-open {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    align-items: stretch;
  }
  #mm-options-scroll {
    max-height: none;
  }
}

/* ── Type Selection Screen ─────────────────────────────────────────────────── */
#type-select-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(ellipse at 50% 38%, #1a0714 0%, #0f0509 70%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  opacity: 0;
  transition: opacity 0.7s ease;
}
#type-select-screen.ts-visible {
  opacity: 1;
}
#ts-prompt {
  font-size: 34px;
  font-weight: 700;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  letter-spacing: 0.03em;
}
#ts-buttons {
  display: flex;
  gap: 18px;
}
.ts-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ts-preview {
  width: 64px;
  height: 42px;
  border-radius: 10px;
  border: 2px solid transparent;
  font-size: 22px;
  cursor: pointer;
  background: rgba(255,255,255,0.08);
  transition: transform 0.12s ease, background 0.12s ease;
}
.ts-preview:hover {
  transform: translateY(-2px);
}
.ts-preview-a { border-color: rgba(74,138,222,0.2); background: linear-gradient(135deg, rgba(13,42,85,0.5) 0%, rgba(42,110,181,0.5) 100%); }
.ts-preview-b { border-color: rgba(222,74,74,0.2); background: linear-gradient(135deg, rgba(74,13,13,0.5) 0%, rgba(181,42,42,0.5) 100%); }
.ts-preview-x { border-color: rgba(136,136,136,0.2); background: linear-gradient(135deg, rgba(26,26,26,0.5) 0%, rgba(85,85,85,0.5) 100%); }
/* ── Type confirm dialog ── */
#ts-confirm {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
#ts-confirm.tc-visible {
  opacity: 1;
  pointer-events: all;
}
#ts-confirm-box {
  position: relative;
  background: #1a0a18;
  border: 1.5px solid #c080f0;
  border-radius: 14px;
  padding: 20px 28px 20px;
  text-align: center;
  font-family: Calibri, sans-serif;
  font-weight: 700;
  box-shadow: 0 0 40px rgba(160,80,240,0.5), 0 8px 32px #0008;
  transform: scale(0.92);
  transition: transform 0.18s ease;
  min-width: 340px;
}
#ts-confirm-stars {
  font-size: 20px;
  margin-bottom: 8px;
  letter-spacing: 8px;
  animation: unlockSparkle 0.8s ease-in-out infinite alternate;
}
#ts-confirm.tc-visible #ts-confirm-box {
  transform: scale(1);
}
#ts-confirm-text {
  font-size: 22px;
  font-weight: 700;
  color: #f0c0f0;
  margin-bottom: 20px;
  text-shadow: 0 0 12px rgba(200,100,255,0.6);
  padding: 0 10px;
}
#ts-confirm-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
}
.tc-btn {
  padding: 10px 28px;
  border-radius: 10px;
  border: 2px solid transparent;
  font-size: 15px;
  font-weight: 700;
  font-family: 'Exo 2', Calibri, sans-serif;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.tc-btn:hover { transform: translateY(-2px); }
.tc-yes {
  background: #1a4a1a;
  border-color: #4ada6a;
  color: #b8ffcc;
  box-shadow: 0 0 14px rgba(74,218,106,0.3);
}
.tc-yes:hover { box-shadow: 0 0 22px rgba(74,218,106,0.55); }
.tc-no {
  background: #2a1a1a;
  border-color: #aa4444;
  color: #ffcccc;
  box-shadow: 0 0 14px rgba(180,60,60,0.25);
}
.tc-no:hover { box-shadow: 0 0 22px rgba(180,60,60,0.5); }
#ts-confirm-note {
  margin-top: 14px;
  font-size: 17px;
  color: #c090c8;
  font-style: italic;
  font-weight: 700;
  line-height: 1.55;
}
.ts-btn {
  width: 110px;
  padding: 14px 0;
  border-radius: 12px;
  border: 3px solid transparent;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Exo 2', Calibri, sans-serif;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ts-btn:hover {
  transform: translateY(-3px);
}
.ts-a {
  background: linear-gradient(135deg, #0d2a55 0%, #2a6eb5 100%);
  border-color: #4a8ade;
  color: #b8d8ff;
  box-shadow: 0 0 18px rgba(74,138,222,0.35);
}
.ts-a:hover {
  box-shadow: 0 0 28px rgba(74,138,222,0.6);
}
.ts-b {
  background: linear-gradient(135deg, #4a0d0d 0%, #b52a2a 100%);
  border-color: #de4a4a;
  color: #ffd8d8;
  box-shadow: 0 0 18px rgba(222,74,74,0.35);
}
.ts-b:hover {
  box-shadow: 0 0 28px rgba(222,74,74,0.6);
}
.ts-x {
  background: linear-gradient(135deg, #1a1a1a 0%, #555 100%);
  border-color: #888;
  color: #ccc;
  box-shadow: 0 0 18px rgba(136,136,136,0.2);
}
.ts-x:hover {
  box-shadow: 0 0 28px rgba(136,136,136,0.4);
}

/* ── Run Type Select Screen (before name prompt) ──────────────────────────── */
#runtype-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(ellipse at 50% 38%, #1a0714 0%, #0f0509 70%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#runtype-screen.rt-visible { opacity: 1; }
#rt-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 680px;
  padding: 0 24px;
}
#rt-title {
  font-size: 34px;
  font-weight: 700;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  letter-spacing: 0.02em;
  background: linear-gradient(110deg,#f0c0d0 0%,#f0c0d0 38%,#fff4d0 48%,#ffd470 52%,#fff4d0 56%,#f0c0d0 66%,#f0c0d0 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rtTitleShine 4.5s ease-in-out infinite;
  text-shadow: 0 0 18px rgba(255,212,128,0.15);
}
@keyframes rtTitleShine {
  0%   { background-position: 130% 50%; }
  60%  { background-position: -30% 50%; }
  100% { background-position: -30% 50%; }
}
#rt-sub {
  font-size: 16px;
  color: #ff4040;
  font-family: 'Exo 2', Calibri, sans-serif;
  font-style: italic;
  font-weight: 700;
  margin-bottom: 8px;
}
#runtype-screen, #runtype-screen * { font-weight: 700; }
#rt-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.rt-btn {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  background: #1a0818;
  border: 1px solid #8040a0;
  border-radius: 12px;
  padding: 16px 20px;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.12s;
}
.rt-btn:hover {
  background: #23102a;
  border-color: #c060e0;
  box-shadow: 0 0 20px rgba(190,70,240,0.35);
  transform: translateY(-1px);
}
.rt-btn .rt-icon {
  font-size: 42px;
  flex: 0 0 auto;
  width: 56px;
  text-align: center;
}
.rt-btn .rt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}
.rt-btn .rt-name {
  font-size: 19px;
  font-weight: 800;
  color: #f5d0e8;
  letter-spacing: 0.01em;
}
.rt-btn .rt-desc {
  font-size: 13px;
  color: #c090a8;
  line-height: 1.4;
}
.rt-btn .rt-tag {
  font-size: 12px;
  color: #c080ff;
  margin-top: 2px;
}
.rt-btn.rt-ptw .rt-name { color: #ffd878; }
.rt-btn.rt-ige .rt-name { color: #a8e0ff; }

/* ── Name Prompt Screen (before type-select) ──────────────────────────────── */
#name-prompt-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(ellipse at 50% 38%, #1a0714 0%, #0f0509 70%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  opacity: 0;
  transition: opacity 1.8s ease;
}
#name-prompt-screen.np-visible {
  opacity: 1;
}
@keyframes np-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#np-prompt  { opacity: 0; }
#np-input-row { opacity: 0; }
#name-prompt-screen.np-visible #np-prompt {
  animation: np-fade-in 0.8s ease 0.7s forwards;
}
#name-prompt-screen.np-visible #np-input-row {
  animation: np-fade-in 0.7s ease 1.5s forwards;
}
#np-prompt {
  font-size: 34px;
  font-weight: 700;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
  padding-bottom: 14px;
}
#np-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
#np-name-input {
  width: 240px;
  background: #1a0818;
  border: 1px solid #8040a0;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 19px;
  font-weight: bold;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  outline: none;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#np-name-input:focus {
  border-color: #c060e0;
  box-shadow: 0 0 14px rgba(180,80,220,0.4);
}
#np-name-input::placeholder {
  font-weight: bold;
  font-size: 19px;
}
#np-submit-btn {
  background: linear-gradient(135deg, #4a1238 0%, #7020a0 100%);
  border: 1px solid #b050d8;
  border-radius: 10px;
  color: #f5d0ff;
  font-size: 18px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  font-family: 'Exo 2', Calibri, sans-serif;
}
#np-submit-btn:hover {
  background: linear-gradient(135deg, #601848 0%, #8830b8 100%);
  box-shadow: 0 0 16px rgba(190,70,240,0.5);
}
#np-submit-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Name Entry Screen ─────────────────────────────────────────────────────── */
#name-entry-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(ellipse at 50% 38%, #1a0714 0%, #0f0509 70%);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  opacity: 0;
  transition: opacity 0.7s ease;
}
#name-entry-screen.ne-visible {
  opacity: 1;
}
#name-entry-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
  z-index: -1;
}
#name-entry-screen:has(#ne-farewell.ne-fw-visible)::after {
  opacity: 0.5;
}
@keyframes ne-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
#ne-visual  { opacity: 0; }
#ne-prompt  { opacity: 0; }
#ne-input-row { opacity: 0; }
#name-entry-screen.ne-visible #ne-visual {
  animation: ne-fade-in 0.9s ease 0.5s forwards;
}
#name-entry-screen.ne-visible #ne-prompt {
  animation: ne-fade-in 0.8s ease 1.8s forwards;
}
#name-entry-screen.ne-visible #ne-input-row {
  animation: ne-fade-in 0.7s ease 3.0s forwards;
}
#ne-farewell {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 39px;
  font-weight: 700;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
#ne-farewell.ne-fw-visible {
  opacity: 1;
}
/* Mirror the in-game #cylinder-wrap / #kiwi-wrap geometry: 95×386 cylinder
   with a 45px corner radius, 128×128 kiwis bottom-anchored to the cylinder
   base (kiwi top = 386 - 128). Box-shadow alphas + shine offsets copy
   #cylinder / #cylinder-shine in core.css so the preview reads the same as
   the left column once the player lands in-game. */
#ne-visual {
  position: relative;
  width: 280px;
  height: 460px;
}
/* Sparkles twinkle over the cylinder as it fades in */
#ne-sparkles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.ne-spark {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  opacity: 0;
  transform: scale(0) rotate(0deg);
  background: radial-gradient(circle, #ffffff 0%, #fff4d0 35%, rgba(255,212,128,0.45) 60%, transparent 75%);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  filter: drop-shadow(0 0 5px rgba(255,240,200,0.85));
}
@keyframes ne-twinkle {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  45%  { opacity: 1; transform: scale(1.15) rotate(45deg); }
  100% { opacity: 0; transform: scale(0) rotate(90deg); }
}
#name-entry-screen.ne-visible .ne-spark {
  animation: ne-twinkle 1.5s ease-in-out 2;
}
#ne-cyl-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 95px;
  height: 386px;
  z-index: 2;
  animation: mmCylBreath 4s ease-in-out infinite;
}
#ne-cyl {
  position: absolute;
  inset: 0;
  border-radius: 45px;
  background: linear-gradient(to right,#d4a0c0,#f5cce0,#e8b5d0,#c890b0);
  border: 2px solid #c080a8;
  box-shadow: 0 0 32px rgba(192,128,168,0.28), 0 0 10px rgba(192,128,168,0.14), inset 0 0 36px rgba(0,0,0,0.32);
}
#ne-cyl-shine {
  position: absolute;
  left: 13px;
  top: 22px;
  width: 18px;
  height: 78%;
  border-radius: 10px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.1) 60%, rgba(255,255,255,0.02) 100%);
  pointer-events: none;
}
#ne-kiwi-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 268px;
  display: flex;
  gap: 4px;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
  animation: mmKiwiBreath 4.5s ease-in-out infinite;
}
#ne-kiwi-l {
  width: 128px;
  height: 128px;
  display: block;
  flex-shrink: 0;
  transform: rotate(90deg);
}
#ne-kiwi-r {
  width: 128px;
  height: 128px;
  display: block;
  flex-shrink: 0;
  transform: rotate(-90deg);
}
#ne-prompt {
  font-size: 33px;
  font-weight: 700;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  text-align: center;
  letter-spacing: 0.02em;
  background: linear-gradient(110deg,#f0c0d0 0%,#f0c0d0 38%,#fff4d0 48%,#ffd470 52%,#fff4d0 56%,#f0c0d0 66%,#f0c0d0 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rtTitleShine 4.5s ease-in-out infinite;
  text-shadow: 0 0 18px rgba(255,212,128,0.15);
}
#ne-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
#ne-name-input {
  width: 240px;
  background: #1a0818;
  border: 1px solid #8040a0;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 17px;
  color: #f0c0d0;
  font-family: 'Exo 2', Calibri, sans-serif;
  outline: none;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#ne-name-input:focus {
  border-color: #c060e0;
  box-shadow: 0 0 14px rgba(180,80,220,0.4);
}
#ne-submit-btn {
  background: linear-gradient(135deg, #4a1238 0%, #7020a0 100%);
  border: 1px solid #b050d8;
  border-radius: 10px;
  color: #f5d0ff;
  font-size: 20px;
  padding: 13px 35px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  font-family: 'Exo 2', Calibri, sans-serif;
  letter-spacing: 0.04em;
  margin-top: 20px;
  animation: neSubmitGlow 1.8s ease-in-out infinite;
}
@keyframes neSubmitGlow {
  0%, 100% {
    text-shadow: 0 0 4px rgba(255,220,250,0.4), 0 0 10px rgba(190,90,240,0.35);
    color: #f5d0ff;
  }
  50% {
    text-shadow: 0 0 10px rgba(255,235,255,0.95), 0 0 22px rgba(210,120,255,0.75), 0 0 32px rgba(180,80,220,0.45);
    color: #ffffff;
  }
}
#ne-submit-btn:hover {
  background: linear-gradient(135deg, #601848 0%, #8830b8 100%);
  box-shadow: 0 0 16px rgba(190,70,240,0.5);
}
#ne-submit-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Right-side hero stage (rotating cylinder + drips + save teaser) ───── */
#mm-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 560px;
  z-index: 0;
  pointer-events: none;
}
/* Two kiwi balls — same 128×128 size as the in-game #kiwi-wrap. They sit
   at z-index:1 so the cylinder body (z-index:2) covers their tops; only
   the bottom slivers peek out, matching the in-game left column. Position
   mirrors the in-game ratio: 72% down the cylinder height. Colors come
   from --mm-kiwi-* CSS vars on this wrap, written by menu.js when a save
   is detected. */
#mm-stage-kiwi-wrap {
  position: absolute;
  left: 50%;
  top: 278px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  animation: mmKiwiBreath 4.5s ease-in-out infinite;
}
.mm-stage-kiwi {
  width: 128px;
  height: 128px;
  display: block;
}
/* Match in-game #kiwi-left/#kiwi-right rotation so the stems point outward
   horizontally instead of straight up. */
.mm-stage-kiwi:first-child  { transform: rotate(90deg); }
.mm-stage-kiwi:last-child   { transform: rotate(-90deg); }
/* Flat 2D cylinder mirroring the in-game #cylinder in core.css — same
   95×386 proportions, same border-radius, same gradient + box-shadow,
   no bob, no tip, no pedestal, no animated shine sweep. */
#mm-stage-cyl-wrap {
  position: absolute;
  left: 50%;
  top: 38px;
  transform: translateX(-50%);
  width: 95px;
  height: 386px;
  animation: mmCylBreath 4s ease-in-out infinite;
}
/* Static cylinder shadow — same pill geometry as the in-game
   #cylinder-wrap::after sun shadow, locked at 30° (down-and-right) instead
   of running the 40s sun-arc animation. */
#mm-stage-cyl-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -224px;
  width: 92px;
  height: 206px;
  border-radius: 46px;
  background-color: rgba(0,0,0,0.56);
  filter: blur(11px);
  pointer-events: none;
  z-index: 0;
  transform-origin: 50% 46px;
  transform: translateX(-50%) rotate(-30deg);
}
/* Static kiwi shadows — match the in-game #kiwi-left-wrap::after / right
   shadows but no opacity breathe; one pseudo per kiwi, anchored to the
   left/right edges of the 260px-wide kiwi flex row. */
#mm-stage-kiwi-wrap::before,
#mm-stage-kiwi-wrap::after {
  content: "";
  position: absolute;
  bottom: -42px;
  width: 128px;
  height: 27px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.83);
  filter: blur(11px);
  pointer-events: none;
  z-index: 0;
}
#mm-stage-kiwi-wrap::before { left: 0; }
#mm-stage-kiwi-wrap::after  { right: 0; }
/* No-save state: fade the preview cylinder + kiwis (and their shadows) to
   half opacity so the placeholder reads as "nothing owned yet". */
#mm-stage.mm-stage-empty #mm-stage-cyl-wrap,
#mm-stage.mm-stage-empty #mm-stage-kiwi-wrap { opacity: 0.5; }
#mm-stage-cyl {
  position: absolute;
  inset: 0;
  border-radius: 45px;
  background: linear-gradient(to right, #d4a0c0, #f5cce0, #e8b5d0, #c890b0);
  border: 2px solid #c080a8;
  box-shadow:
    0 0 32px rgba(192,128,168,0.28),
    0 0 10px rgba(192,128,168,0.14),
    inset 0 0 36px rgba(0,0,0,0.32);
  overflow: hidden;
  z-index: 2;
}
/* Static vertical highlight on the left edge — copied from #cylinder-shine. */
#mm-stage-cyl-shine {
  position: absolute;
  left: 13px; top: 22px;
  width: 18px; height: 78%;
  border-radius: 10px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.38) 0%,
    rgba(255,255,255,0.1) 60%,
    rgba(255,255,255,0.02) 100%);
  pointer-events: none;
}

/* Falling droplets — three staggered loops behind the cylinder */
#mm-stage-drips {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 60px;
  pointer-events: none;
}
.mm-drip {
  position: absolute;
  font-size: 22px;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(170,210,255,0.5));
  animation: mmDripFall 6.5s linear infinite;
}
.mm-drip-1 { left: 22%; animation-delay: 0s;    animation-duration: 6.5s; }
.mm-drip-2 { left: 70%; animation-delay: 2.4s;  animation-duration: 7.2s; }
.mm-drip-3 { left: 48%; animation-delay: 4.8s;  animation-duration: 5.8s; font-size: 16px; }
@keyframes mmDripFall {
  0%   { top: -10%;  opacity: 0; transform: scale(0.8); }
  10%  { opacity: 0.85; }
  85%  { opacity: 0.7; }
  100% { top: 100%;  opacity: 0; transform: scale(1); }
}

/* Save teaser pill — populated by menu.js when a save exists. */
#mm-save-teaser {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  min-width: 240px;
  padding: 12px 18px 10px;
  border-radius: 14px;
  background: rgba(26, 10, 18, 0.448);
  border: 1px solid rgba(192, 90, 168, 0.288);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 180, 220, 0.038);
  text-align: center;
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  z-index: 2;
}
#mm-st-name {
  font-size: 20px;
  font-weight: 800;
  color: #f5d0e8;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(230,90,180,0.5);
}
#mm-st-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #d8b8cc;
}
.mm-st-cell { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.mm-st-icon { font-size: 17px; }
.mm-st-lbl  { color: #a07a96; font-weight: 700; margin-right: 2px; }
.mm-st-val  { color: #f5d0e8; font-weight: 700; }
/* Diamond-blue palette so the menu's Prestige cell matches the in-game
   prestige bar / level text / star. */
.mm-st-icon-prestige {
  filter: hue-rotate(165deg) saturate(0.85) brightness(1.45)
          drop-shadow(0 0 3px #a8d8ff)
          drop-shadow(0 0 8px rgba(168,216,255,0.5));
}
.mm-st-lbl-prestige {
  background: linear-gradient(135deg,#a8d8ff,#e0f0ff,#c0e8ff,#80c8ff,#a8d8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(168,216,255,0.4);
}
.mm-st-divider {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: rgba(192,90,168,0.4);
}
#mm-st-when {
  font-size: 13px;
  color: #8c5878;
  margin-top: 4px;
  font-weight: 700;
}
/* On smaller windows the stage would crowd the nav buttons — hide it. */
@media (max-width: 900px) { #mm-stage { display: none; } }

/* Sunburst */
.mm-sunburst {
  position: absolute;
  /* horizontally centered on the button block: 50px left offset + 320px width / 2 */
  left: 210px;
  /* origin 220px below the bottom of the viewport */
  top: calc(100vh + 220px);
  /* Radius must always reach past the top of the viewport — the center sits
     ~100vh+220px below the viewport top, so on narrow/short windows 125vmax
     wasn't enough and the circle edge cut into the viewport. */
  width: 500vmax;
  height: 500vmax;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,200,240,0.07) 0deg, transparent 8deg,
    transparent 15deg, rgba(255,180,220,0.06) 15deg, transparent 23deg,
    transparent 30deg, rgba(255,210,245,0.08) 30deg, transparent 38deg,
    transparent 45deg, rgba(255,190,230,0.05) 45deg, transparent 53deg,
    transparent 60deg, rgba(255,200,240,0.07) 60deg, transparent 68deg,
    transparent 75deg, rgba(255,180,220,0.06) 75deg, transparent 83deg,
    transparent 90deg, rgba(255,210,245,0.08) 90deg, transparent 98deg,
    transparent 105deg, rgba(255,190,230,0.05) 105deg, transparent 113deg,
    transparent 120deg, rgba(255,200,240,0.07) 120deg, transparent 128deg,
    transparent 135deg, rgba(255,180,220,0.06) 135deg, transparent 143deg,
    transparent 150deg, rgba(255,210,245,0.08) 150deg, transparent 158deg,
    transparent 165deg, rgba(255,190,230,0.05) 165deg, transparent 173deg,
    transparent 180deg, rgba(255,200,240,0.07) 180deg, transparent 188deg,
    transparent 195deg, rgba(255,180,220,0.06) 195deg, transparent 203deg,
    transparent 210deg, rgba(255,210,245,0.08) 210deg, transparent 218deg,
    transparent 225deg, rgba(255,190,230,0.05) 225deg, transparent 233deg,
    transparent 240deg, rgba(255,200,240,0.07) 240deg, transparent 248deg,
    transparent 255deg, rgba(255,180,220,0.06) 255deg, transparent 263deg,
    transparent 270deg, rgba(255,210,245,0.08) 270deg, transparent 278deg,
    transparent 285deg, rgba(255,190,230,0.05) 285deg, transparent 293deg,
    transparent 300deg, rgba(255,200,240,0.07) 300deg, transparent 308deg,
    transparent 315deg, rgba(255,180,220,0.06) 315deg, transparent 323deg,
    transparent 330deg, rgba(255,210,245,0.08) 330deg, transparent 338deg,
    transparent 345deg, rgba(255,190,230,0.05) 345deg, transparent 353deg,
    transparent 360deg
  );
  animation: sunburstRotate 25s linear infinite, mmSunburstPulse 4s ease-in-out infinite;
  opacity: 0.7;
}
@keyframes mmSunburstPulse {
  0%   { opacity: 0.7; filter: blur(0px) brightness(1);   }
  50%  { opacity: 1;   filter: blur(1.5px) brightness(1.9) saturate(1.25); }
  100% { opacity: 0.7; filter: blur(0px) brightness(1);   }
}