:root {
  --bg: #0b1020;
  --panel: rgba(18, 27, 48, 0.82);
  --panel-strong: rgba(24, 36, 63, 0.94);
  --text: #f3fbff;
  --muted: #b9c7e5;
  --cyan: #78f7ff;
  --mint: #73ffc9;
  --purple: #a98cff;
  --danger: #ff5573;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font: inherit;
  border: 0;
  cursor: pointer;
  user-select: none;
}

#gameShell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  background: radial-gradient(circle at 50% 30%, #243a67 0%, #10182c 46%, #070b15 100%);
}

#gameCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hidden {
  display: none !important;
}

.hud {
  position: absolute;
  z-index: 20;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.brandMark,
.hudPill,
.iconBtn {
  pointer-events: auto;
  color: var(--text);
  background: rgba(10, 17, 32, 0.54);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
}

.brandMark {
  padding: 10px 13px;
  border-radius: 16px;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, rgba(115,255,201,0.32), rgba(169,140,255,0.24));
}

.hudPill {
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

.iconBtn {
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 19px;
}

.toast {
  position: absolute;
  z-index: 35;
  left: 50%;
  top: calc(max(68px, env(safe-area-inset-top) + 58px));
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  padding: 13px 18px;
  border-radius: 999px;
  color: #06111f;
  background: linear-gradient(135deg, #78f7ff, #73ffc9);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  font-weight: 900;
  text-align: center;
}

.screenOverlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 15%, rgba(120,247,255,0.12), transparent 32%), linear-gradient(180deg, rgba(8,13,24,0.4), rgba(8,13,24,0.72));
  backdrop-filter: blur(4px);
}

.heroCard,
.modalCard {
  width: min(92vw, 720px);
  max-height: 94dvh;
  overflow: auto;
  border-radius: 34px;
  padding: clamp(22px, 5vw, 42px);
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05)), var(--panel);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 30px 90px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.12);
}

.miniPlanetLogo {
  width: 76px;
  height: 76px;
  margin: 0 auto 10px;
  position: relative;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #ffffff, #78f7ff 28%, #5568d8 64%, #252d5d 100%);
  box-shadow: 0 0 35px rgba(120,247,255,0.45);
}

.miniPlanetLogo::before,
.miniPlanetLogo::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.miniPlanetLogo::before {
  inset: 28px -16px;
  border: 5px solid rgba(255,255,255,0.7);
  transform: rotate(-18deg);
}

.miniPlanetLogo::after {
  width: 14px;
  height: 14px;
  right: 12px;
  top: 10px;
  background: #73ffc9;
}

.miniPlanetLogo span {
  position: absolute;
  left: 14px;
  top: 48px;
  width: 24px;
  height: 12px;
  border-radius: 999px;
  background: #66d38c;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--mint);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(11px, 1.8vw, 13px);
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: clamp(42px, 11.5vw, 86px);
  line-height: 0.88;
  letter-spacing: -0.08em;
}

h1 strong {
  display: inline-block;
  color: transparent;
  background: linear-gradient(135deg, #73ffc9, #78f7ff 44%, #a98cff);
  -webkit-background-clip: text;
  background-clip: text;
}

.lead {
  max-width: 620px;
  margin: 0 auto 24px;
  color: var(--muted);
  font-size: clamp(15px, 3.2vw, 20px);
  line-height: 1.48;
  font-weight: 650;
}

.actionRow {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.primaryBtn,
.secondaryBtn {
  min-width: 148px;
  padding: 15px 22px;
  border-radius: 22px;
  font-weight: 950;
  font-size: clamp(15px, 3.3vw, 18px);
  transition: transform 0.14s ease, filter 0.14s ease;
}

.primaryBtn {
  color: #051422;
  background: linear-gradient(135deg, #73ffc9, #78f7ff);
  box-shadow: 0 18px 44px rgba(115,255,201,0.22);
}

.secondaryBtn {
  color: var(--text);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
}

.primaryBtn:active,
.secondaryBtn:active,
.iconBtn:active {
  transform: scale(0.97);
  filter: brightness(1.1);
}

.hintGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 26px;
}

.hintGrid div {
  padding: 13px;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}

.hintGrid b,
.hintGrid span {
  display: block;
}

.hintGrid b {
  margin-bottom: 4px;
  color: var(--cyan);
}

.hintGrid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.modalCard {
  width: min(92vw, 560px);
}

.modalCard h2 {
  margin-bottom: 10px;
  font-size: clamp(32px, 7vw, 48px);
  letter-spacing: -0.05em;
}

.modalCard p {
  color: var(--muted);
  line-height: 1.5;
  font-size: 17px;
  font-weight: 600;
}

.resultBadge {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #071424;
  background: linear-gradient(135deg, #ffe66b, #73ffc9);
  box-shadow: 0 0 40px rgba(255,230,107,0.35);
  font-size: 42px;
  font-weight: 950;
}

#touchControls {
  position: absolute;
  z-index: 25;
  inset: auto 0 max(18px, env(safe-area-inset-bottom)) 0;
  pointer-events: none;
  touch-action: none;
}

#joystickBase {
  position: absolute;
  -webkit-user-select: none;
  user-select: none;
  left: max(18px, env(safe-area-inset-left));
  bottom: 0;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 18px 45px rgba(0,0,0,0.24);
  pointer-events: auto;
  touch-action: none;
}

#joystickKnob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: linear-gradient(135deg, #73ffc9, #78f7ff);
  box-shadow: 0 14px 28px rgba(0,0,0,0.24);
}

#jumpBtn {
  position: absolute;
  -webkit-user-select: none;
  user-select: none;
  right: max(20px, env(safe-area-inset-right));
  bottom: 12px;
  width: 104px;
  height: 104px;
  border-radius: 32px;
  color: #071424;
  background: linear-gradient(135deg, #ffe66b, #ff9d7a);
  box-shadow: 0 18px 45px rgba(255,230,107,0.18);
  pointer-events: auto;
  font-weight: 950;
  font-size: 20px;
  touch-action: none;
}

.loadingNotice {
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 24px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 22px 48px rgba(0,0,0,0.28);
  font-weight: 850;
  backdrop-filter: blur(14px);
}

@media (max-width: 640px) {
  .hud {
    gap: 6px;
  }

  .brandMark {
    display: none;
  }

  .hudPill {
    padding: 9px 10px;
    font-size: 12px;
  }

  .iconBtn {
    width: 38px;
    height: 38px;
  }

  .heroCard,
  .modalCard {
    border-radius: 28px;
  }

  .hintGrid {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .primaryBtn,
  .secondaryBtn {
    min-width: 130px;
    padding: 14px 18px;
  }

  #joystickBase {
    width: 112px;
    height: 112px;
  }

  #jumpBtn {
    width: 94px;
    height: 94px;
    border-radius: 30px;
  }
}

@media (max-height: 520px) {
  .heroCard {
    padding: 18px;
    border-radius: 24px;
  }

  .miniPlanetLogo,
  .hintGrid {
    display: none;
  }

  h1 {
    font-size: clamp(38px, 9vw, 62px);
    line-height: 0.92;
  }

  .lead {
    margin-bottom: 14px;
    font-size: 15px;
  }

  #joystickBase {
    width: 96px;
    height: 96px;
  }

  #jumpBtn {
    width: 82px;
    height: 82px;
    border-radius: 25px;
    font-size: 16px;
  }
}

/* V3 Dashboard logo + animated world treatment */
.visuallyHidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.startDashboard {
  background:
    radial-gradient(circle at 50% 22%, rgba(120,247,255,0.20), transparent 28%),
    radial-gradient(circle at 18% 74%, rgba(169,140,255,0.16), transparent 28%),
    linear-gradient(180deg, rgba(4,8,20,0.28), rgba(4,8,20,0.78));
}

.dashboardCard {
  width: min(94vw, 860px);
  padding: clamp(16px, 3.8vw, 34px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)),
    radial-gradient(circle at 50% 14%, rgba(120,247,255,0.18), transparent 36%),
    rgba(11, 18, 37, 0.82);
}

.dashboardScene {
  position: relative;
  width: min(86vw, 650px);
  height: clamp(245px, 46dvh, 470px);
  margin: -8px auto 8px;
  display: grid;
  place-items: center;
  isolation: isolate;
  pointer-events: none;
}

.dashboardLogo {
  position: relative;
  z-index: 4;
  width: min(86vw, 610px);
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 54px rgba(0,0,0,0.38)) drop-shadow(0 0 34px rgba(120,247,255,0.20));
  animation: logoFloat 4.4s ease-in-out infinite;
}

.dashGlow {
  position: absolute;
  z-index: 0;
  width: min(68vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,247,255,0.28), rgba(169,140,255,0.12) 48%, transparent 72%);
  filter: blur(6px);
  animation: glowPulse 3.6s ease-in-out infinite;
}

.dashOrbit {
  position: absolute;
  z-index: 1;
  width: min(78vw, 570px);
  height: min(27vw, 180px);
  border-radius: 50%;
  border: 4px solid rgba(120,247,255,0.42);
  transform: rotate(-12deg);
  box-shadow: 0 0 26px rgba(120,247,255,0.28), inset 0 0 16px rgba(120,247,255,0.12);
  animation: orbitSpin 6s linear infinite;
}

.dashOrbitTwo {
  width: min(72vw, 510px);
  height: min(24vw, 155px);
  border-color: rgba(201,96,255,0.38);
  transform: rotate(15deg);
  animation-duration: 8.5s;
  animation-direction: reverse;
}

.dashSparkle,
.dashSparkle::before,
.dashSparkle::after {
  position: absolute;
  width: 18px;
  height: 18px;
  content: "";
  background: #78f7ff;
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  filter: drop-shadow(0 0 11px currentColor);
  animation: sparkleTwinkle 1.8s ease-in-out infinite;
}

.dashSparkle.s1 { color: #78f7ff; left: 9%; top: 28%; }
.dashSparkle.s2 { color: #b28cff; right: 7%; top: 36%; animation-delay: .45s; transform: scale(.86); }
.dashSparkle.s3 { color: #73ffc9; left: 48%; bottom: 7%; animation-delay: .9s; transform: scale(.72); }

.dashRock {
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 28px;
  border-radius: 38% 62% 46% 54%;
  background: linear-gradient(135deg, #7c72ff, #3449a5);
  box-shadow: inset 5px 6px 0 rgba(255,255,255,0.12), 0 14px 26px rgba(0,0,0,0.25);
  animation: rockFloat 4.8s ease-in-out infinite;
}

.dashRock.r1 { left: 10%; bottom: 18%; transform: rotate(-22deg); }
.dashRock.r2 { right: 12%; bottom: 22%; transform: rotate(28deg) scale(.82); animation-delay: 1.1s; }

.lead strong {
  color: #f7fbff;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.012); }
}

@keyframes glowPulse {
  0%, 100% { opacity: .68; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes orbitSpin {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

@keyframes sparkleTwinkle {
  0%, 100% { opacity: .35; scale: .82; }
  50% { opacity: 1; scale: 1.18; }
}

@keyframes rockFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

@media (max-width: 640px) {
  .dashboardScene {
    width: 94vw;
    height: clamp(250px, 40dvh, 390px);
    margin-top: -14px;
    margin-bottom: 0;
  }

  .dashboardLogo {
    width: 96vw;
    max-width: none;
  }

  .dashboardCard {
    width: 96vw;
    padding: 14px 12px 18px;
    border-radius: 30px;
  }

  .dashboardCard .lead {
    margin-bottom: 16px;
    font-size: 14px;
  }

  .dashboardCard .hintGrid {
    display: none;
  }
}

@media (max-height: 620px) {
  .dashboardScene {
    height: clamp(190px, 40dvh, 300px);
  }

  .dashboardCard .lead {
    margin-bottom: 12px;
  }
}

/* V4 fixes: smaller dashboard logo, more visible animation, and wider mobile compatibility. */
.dashboardCard {
  width: min(94vw, 760px);
}

.dashboardScene {
  height: clamp(165px, 34dvh, 310px);
  margin: -4px auto 10px;
  perspective: 900px;
  overflow: visible;
}

.logoStage {
  position: relative;
  z-index: 5;
  width: min(78vw, 440px);
  max-height: 100%;
  display: grid;
  place-items: center;
  animation: logoStageFloatV4 2.9s ease-in-out infinite;
  transform-origin: center center;
}

.dashboardLogo {
  width: 100%;
  max-height: 285px;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.40)) drop-shadow(0 0 24px rgba(120,247,255,0.34));
  animation: logoBreathV4 1.8s ease-in-out infinite;
}

.logoShine {
  position: absolute;
  inset: 5% -10%;
  border-radius: 50%;
  background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,0.0) 35%, rgba(255,255,255,0.55) 48%, rgba(120,247,255,0.20) 54%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: logoShineSweepV4 3.2s ease-in-out infinite;
}

.dashGlow {
  width: min(60vw, 360px);
  animation: glowPulseV4 2.4s ease-in-out infinite;
}

.dashOrbit {
  width: min(74vw, 470px);
  height: min(22vw, 118px);
  animation: orbitSpinOneV4 3.4s linear infinite;
}

.dashOrbitTwo {
  width: min(68vw, 430px);
  height: min(20vw, 104px);
  animation: orbitSpinTwoV4 4.8s linear infinite;
}

.dashSparkle.s1 { animation: sparkleTwinkleV4 1.2s ease-in-out infinite; }
.dashSparkle.s2 { animation: sparkleTwinkleV4 1.35s ease-in-out infinite .25s; }
.dashSparkle.s3 { animation: sparkleTwinkleV4 1.45s ease-in-out infinite .55s; }

.dashRock.r1 {
  --rock-rotate: -22deg;
  --rock-scale: 1;
  animation: rockFloatV4 2.7s ease-in-out infinite;
}
.dashRock.r2 {
  --rock-rotate: 28deg;
  --rock-scale: .82;
  animation: rockFloatV4 3.1s ease-in-out infinite .45s;
}

@keyframes logoStageFloatV4 {
  0%, 100% { transform: translateY(0) rotate(-1.2deg) scale(1); }
  50% { transform: translateY(-13px) rotate(1.2deg) scale(1.035); }
}

@keyframes logoBreathV4 {
  0%, 100% { filter: drop-shadow(0 18px 34px rgba(0,0,0,0.40)) drop-shadow(0 0 18px rgba(120,247,255,0.28)); }
  50% { filter: drop-shadow(0 23px 42px rgba(0,0,0,0.46)) drop-shadow(0 0 36px rgba(120,247,255,0.58)); }
}

@keyframes logoShineSweepV4 {
  0%, 38% { transform: translateX(-80%) skewX(-16deg); opacity: 0; }
  50% { opacity: .7; }
  64%, 100% { transform: translateX(80%) skewX(-16deg); opacity: 0; }
}

@keyframes glowPulseV4 {
  0%, 100% { opacity: .58; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes orbitSpinOneV4 {
  from { transform: rotate(-12deg); }
  to { transform: rotate(348deg); }
}

@keyframes orbitSpinTwoV4 {
  from { transform: rotate(15deg); }
  to { transform: rotate(-345deg); }
}

@keyframes sparkleTwinkleV4 {
  0%, 100% { opacity: .25; transform: scale(.62) rotate(0deg); }
  45% { opacity: 1; transform: scale(1.18) rotate(45deg); }
}

@keyframes rockFloatV4 {
  0%, 100% { transform: translateY(0) rotate(var(--rock-rotate)) scale(var(--rock-scale)); }
  50% { transform: translateY(-18px) rotate(calc(var(--rock-rotate) + 10deg)) scale(var(--rock-scale)); }
}

@media (max-width: 640px) {
  .dashboardCard {
    width: min(95vw, 520px);
    padding: 16px 14px 18px;
  }

  .dashboardScene {
    height: clamp(140px, 27dvh, 220px);
    margin: -2px auto 6px;
  }

  .logoStage {
    width: min(76vw, 330px);
  }

  .dashboardLogo {
    max-height: 210px;
  }

  .dashOrbit {
    width: min(82vw, 360px);
    height: min(24vw, 88px);
  }

  .dashOrbitTwo {
    width: min(76vw, 320px);
    height: min(21vw, 76px);
  }

  .lead {
    font-size: 14px;
    line-height: 1.36;
    margin-bottom: 16px;
  }

  .eyebrow {
    font-size: 10px;
    margin-bottom: 5px;
  }
}

@media (max-height: 620px) {
  .dashboardScene {
    height: clamp(118px, 26dvh, 170px);
  }

  .logoStage {
    width: min(62vw, 300px);
  }

  .dashboardLogo {
    max-height: 160px;
  }
}


/* V5 FINAL FIXES: no dashboard scrollbars, smaller fitted logo, real visible animations. */
html, body, #gameShell {
  overflow: hidden !important;
}
.heroCard.dashboardCard {
  width: min(94vw, 720px) !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: hidden !important;
  padding: clamp(14px, 3.2vw, 28px) !important;
}
.dashboardCard::-webkit-scrollbar,
.dashboardSceneV5::-webkit-scrollbar,
.logoPanelV5::-webkit-scrollbar { display: none !important; }
.dashboardScene,
.logoStage,
.dashboardLogo,
.dashOrbit,
.dashGlow,
.dashSparkle,
.dashRock { display: none !important; }
.dashboardSceneV5 {
  position: relative;
  width: 100%;
  height: clamp(185px, 35dvh, 330px);
  margin: -4px auto 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 42%, rgba(120,247,255,0.17), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
}
.menuPlanetV5 {
  position: absolute;
  z-index: 1;
  width: min(62vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  top: 46%;
  left: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.48), rgba(255,255,255,0.06) 12%, transparent 14%),
    radial-gradient(circle at 35% 31%, #4ee7ff 0%, #168ee0 42%, #0d4f95 75%, #082557 100%);
  box-shadow: 0 32px 70px rgba(0,0,0,0.34), inset -28px -32px 48px rgba(2,8,30,0.32), 0 0 48px rgba(120,247,255,0.24);
  animation: menuPlanetFloatV5 4.2s ease-in-out infinite, menuPlanetHueV5 6s ease-in-out infinite;
  opacity: .95;
}
.menuPlanetV5::before {
  content: "";
  position: absolute;
  inset: 11% 8% 13% 9%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 18% 18%, #90f478 0 10%, transparent 11%),
    radial-gradient(ellipse at 72% 23%, #8cf172 0 12%, transparent 13%),
    radial-gradient(ellipse at 49% 54%, #7be36d 0 18%, transparent 19%),
    radial-gradient(ellipse at 24% 71%, #62c957 0 10%, transparent 11%),
    radial-gradient(ellipse at 78% 76%, #81e86b 0 12%, transparent 13%);
  animation: landDriftV5 8s linear infinite;
}
.menuPlanetV5::after {
  content: "";
  position: absolute;
  left: 19%;
  right: 13%;
  top: 9%;
  height: 34%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 14% 72%, #d8e6ff 0 4%, transparent 4.6%),
    radial-gradient(circle at 44% 52%, #d8e6ff 0 6%, transparent 6.6%),
    radial-gradient(circle at 78% 66%, #d8e6ff 0 5%, transparent 5.6%);
  opacity: .9;
}
.menuOrbitV5,
.menuOrbitV5::before,
.menuOrbitV5::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: min(86vw, 520px);
  height: min(25vw, 132px);
  border-radius: 50%;
  border: 4px solid rgba(120,247,255,.62);
  box-shadow: 0 0 28px rgba(120,247,255,.35), inset 0 0 20px rgba(120,247,255,.08);
  transform: rotate(-14deg);
  animation: orbitV5 3.8s linear infinite;
}
.menuOrbitV5::before {
  width: 94%;
  height: 90%;
  left: 3%;
  top: 5%;
  border-color: rgba(187,111,255,.56);
  animation-duration: 5.2s;
  animation-direction: reverse;
}
.menuOrbitV5::after {
  width: 11px;
  height: 11px;
  left: 21%;
  top: 50%;
  margin-top: -5px;
  border: 0;
  background: #fff;
  box-shadow: 0 0 15px #78f7ff, 0 0 32px #78f7ff;
}
.menuTreesV5,
.menuBuildingsV5,
.menuSparklesV5 {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.menuTreesV5 i,
.menuBuildingsV5 i,
.menuSparklesV5 i {
  position: absolute;
  display: block;
}
.menuTreesV5 i {
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 28px solid #7df06e;
  filter: drop-shadow(0 4px 0 #7e4f31);
  animation: tinyBobV5 2.8s ease-in-out infinite;
}
.menuTreesV5 i:nth-child(1){ left:34%; top:23%; transform:scale(.88) rotate(-8deg); }
.menuTreesV5 i:nth-child(2){ left:59%; top:20%; transform:scale(.72) rotate(4deg); animation-delay:.4s; }
.menuTreesV5 i:nth-child(3){ left:70%; top:44%; transform:scale(.65) rotate(8deg); animation-delay:.8s; }
.menuBuildingsV5 i {
  width: 38px; height: 26px;
  border-radius: 26px 26px 8px 8px;
  background: linear-gradient(180deg, #fff, #9fb4db);
  box-shadow: inset 0 -4px 0 rgba(4,17,45,.22), 0 0 12px rgba(120,247,255,.18);
}
.menuBuildingsV5 i::after {
  content:"";
  position:absolute; left:13px; bottom:2px; width:12px; height:16px; border-radius:8px 8px 4px 4px;
  background:#05223e; box-shadow:0 0 10px #78f7ff inset, 0 0 10px #78f7ff;
}
.menuBuildingsV5 i:nth-child(1){ left:50%; top:16%; transform:scale(.86); }
.menuBuildingsV5 i:nth-child(2){ left:63%; top:25%; transform:scale(.64); }
.menuSparklesV5 i {
  width: 18px; height: 18px;
  background: #78f7ff;
  clip-path: polygon(50% 0%,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0% 50%,39% 38%);
  filter: drop-shadow(0 0 10px currentColor);
  animation: sparkleTwinkleV5 1.3s ease-in-out infinite;
}
.menuSparklesV5 i:nth-child(1){ left:14%; top:28%; color:#78f7ff; }
.menuSparklesV5 i:nth-child(2){ right:13%; top:34%; color:#bd73ff; animation-delay:.34s; transform:scale(.76); }
.menuSparklesV5 i:nth-child(3){ left:47%; bottom:10%; color:#73ffc9; animation-delay:.68s; transform:scale(.64); }
.logoPanelV5 {
  position: relative;
  z-index: 6;
  width: min(76vw, 430px);
  max-height: 92%;
  display: grid;
  place-items: center;
  overflow: visible !important;
  animation: logoFloatV5 3s ease-in-out infinite;
}
.logoPanelV5::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:72%;
  height:42%;
  border-radius:999px;
  background: radial-gradient(ellipse, rgba(120,247,255,.28), transparent 68%);
  filter: blur(10px);
  bottom:6%;
  left:14%;
  animation: glowPulseV5 2.4s ease-in-out infinite;
}
.dashboardLogoV5 {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: min(30dvh, 250px) !important;
  object-fit: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.42)) drop-shadow(0 0 26px rgba(120,247,255,.34));
  animation: logoBreathV5 1.9s ease-in-out infinite;
}
.logoShineV5 {
  position:absolute;
  inset:6% -12%;
  border-radius:30%;
  background:linear-gradient(105deg, transparent 24%, rgba(255,255,255,0) 38%, rgba(255,255,255,.60) 50%, rgba(120,247,255,.18) 58%, transparent 70%);
  mix-blend-mode:screen;
  opacity:0;
  animation:logoShineSweepV5 3.1s ease-in-out infinite;
}
.dashboardCard .eyebrow { margin-top: 2px; }
.dashboardCard .lead { margin-bottom: 16px; }
@keyframes menuPlanetFloatV5 { 0%,100%{ transform: translateY(4px) scale(1) rotate(-1deg);} 50%{ transform: translateY(-10px) scale(1.025) rotate(1deg);} }
@keyframes menuPlanetHueV5 { 0%,100%{ filter:saturate(1.05);} 50%{ filter:saturate(1.28) brightness(1.08);} }
@keyframes landDriftV5 { from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes orbitV5 { from{ rotate:0deg;} to{ rotate:360deg;} }
@keyframes tinyBobV5 { 0%,100%{ translate:0 0;} 50%{ translate:0 -6px;} }
@keyframes sparkleTwinkleV5 { 0%,100%{ opacity:.36; scale:.8;} 50%{ opacity:1; scale:1.22;} }
@keyframes logoFloatV5 { 0%,100%{ transform:translateY(0) rotate(-.6deg) scale(1);} 50%{ transform:translateY(-9px) rotate(.7deg) scale(1.025);} }
@keyframes logoBreathV5 { 0%,100%{ filter:drop-shadow(0 18px 34px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(120,247,255,.25));} 50%{ filter:drop-shadow(0 22px 42px rgba(0,0,0,.48)) drop-shadow(0 0 38px rgba(120,247,255,.62));} }
@keyframes glowPulseV5 { 0%,100%{ opacity:.55; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.14);} }
@keyframes logoShineSweepV5 { 0%,38%{ transform:translateX(-82%) skewX(-16deg); opacity:0;} 50%{ opacity:.68;} 66%,100%{ transform:translateX(82%) skewX(-16deg); opacity:0;} }

@media (max-width: 640px) {
  .heroCard.dashboardCard {
    width: calc(100vw - 22px) !important;
    padding: 12px 10px 16px !important;
    border-radius: 26px !important;
  }
  .dashboardSceneV5 {
    height: clamp(175px, 31dvh, 260px);
    margin: -4px auto 8px;
  }
  .menuPlanetV5 { width: min(74vw, 292px); }
  .menuOrbitV5 { width: min(96vw, 410px); height: min(30vw, 112px); }
  .logoPanelV5 { width: min(88vw, 350px); }
  .dashboardLogoV5 { max-height: min(27dvh, 205px) !important; }
  .dashboardCard .lead { font-size: 13.5px !important; line-height: 1.36; }
  .dashboardCard .actionRow { gap: 9px; }
  .dashboardCard .primaryBtn, .dashboardCard .secondaryBtn { min-width: 128px; padding: 13px 16px; }
}
@media (max-height: 640px) {
  .dashboardSceneV5 { height: clamp(135px, 30dvh, 210px); }
  .dashboardLogoV5 { max-height: 150px !important; }
  .dashboardCard .lead { margin-bottom: 9px; }
  .dashboardCard .eyebrow { font-size: 10px; margin-bottom: 5px; }
}


/* V5 compatibility patch: use standard transform animation properties for Android browsers. */
@keyframes orbitV5 {
  from { transform: rotate(-14deg); }
  to { transform: rotate(346deg); }
}
@keyframes tinyBobV5 {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -6px; }
}
@keyframes sparkleTwinkleV5 {
  0%, 100% { opacity: .36; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.22); }
}
.menuSparklesV5 i:nth-child(2){ transform-origin:center; }
.menuSparklesV5 i:nth-child(3){ transform-origin:center; }