/* Robot Pop: its own look for the level menu, on top of the shared Pop menu. */
:root {
  --ol: #1a1250;
  --rb-navy: #1b2257;
  --rb-blue: #2a4fae;
}
html,
body {
  background:
    radial-gradient(120% 50% at 50% 0%, #5fe3ff 0%, rgba(80, 210, 255, 0) 58%),
    linear-gradient(180deg, #3a3fd0 0%, #2c2a96 30%, #2b1f7a 58%, #1a5f9e 82%, #13a7b8 100%);
}
.pop-menu {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.5) 0 1.2px, transparent 2px) 0 0 / 120px 140px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1.6px) 0 0 / 90px 110px,
    linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(5, 0, 40, 0.25) 100%);
}

/* ---------- background dressing ---------- */
.pop-deco .pop-ghost {
  display: none;
}
.pop-deco .pop-rays {
  background: repeating-conic-gradient(rgba(190, 245, 255, 0.15) 0 9deg, rgba(190, 245, 255, 0) 9deg 22deg);
}
.pop-deco .pop-cloud {
  background: rgba(170, 225, 255, 0.14);
}
.rb-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rb-deco svg {
  position: absolute;
}
.rb-planet {
  right: -34px;
  top: 34px;
  width: 128px;
  opacity: 0.55;
}
.rb-gear-l {
  left: -46px;
  top: 96px;
  width: 140px;
  color: #b9c4ff;
  opacity: 0.18;
  animation: rb-turn 24s linear infinite;
}
.rb-gear-s {
  left: 52px;
  top: 64px;
  width: 58px;
  color: #b9c4ff;
  opacity: 0.16;
  animation: rb-turn 12s linear infinite reverse;
}
.rb-gear-r {
  right: -70px;
  top: 420px;
  width: 190px;
  color: #8ff0ff;
  opacity: 0.12;
  animation: rb-turn 30s linear infinite reverse;
}
.rb-circuit {
  left: -10px;
  top: 300px;
  width: 120px;
  color: #8ff0ff;
  opacity: 0.2;
}
.rb-circuit2 {
  right: -6px;
  top: 690px;
  width: 120px;
  color: #b9c4ff;
  opacity: 0.18;
  transform: scaleX(-1);
}
.rb-bighead {
  left: -70px;
  top: 640px;
  width: 250px;
  color: #c9d6ff;
  opacity: 0.1;
  transform: rotate(-10deg);
}
.rb-bat {
  right: 18px;
  top: 178px;
  width: 30px;
  opacity: 0.5;
  transform: rotate(14deg);
}
.rb-spark {
  color: #d9fbff;
  width: 18px;
  animation: rb-twinkle 2.4s ease-in-out infinite;
}

/* ---------- logo and title ---------- */
.pop-logo {
  width: 150px;
  height: 130px;
  margin-top: 0;
  background: radial-gradient(circle, rgba(170, 250, 255, 0.55) 0%, rgba(170, 250, 255, 0) 64%);
}
.pop-logo > svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 12px rgba(10, 0, 50, 0.45));
  animation: pop-bob 2.4s ease-in-out infinite;
}
.pop-title {
  margin-top: -4px;
  font-size: clamp(44px, 13vw, 64px);
}
.pop-how {
  font-size: 16.5px;
  text-shadow: 0 1px 3px rgba(10, 0, 50, 0.5);
}

/* ---------- buttons ---------- */
.pop-reto-row {
  width: 100%;
  max-width: 460px;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 14px;
}
.pop-reto-row .pop-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  padding: 8px 12px;
  font-size: 21px;
  white-space: nowrap;
  color: var(--rb-navy);
}
.pop-btn.pop-reto {
  flex-grow: 1.25;
  background: linear-gradient(180deg, #fff27a 0%, #ffd23a 45%, #ffb300 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 5px 0 #c97800,
    0 9px 16px rgba(10, 0, 50, 0.35);
  font-size: 22px;
}
.pop-btn.ghost {
  background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 55%, #dfe7fb 100%);
  box-shadow:
    inset 0 2px 0 #fff,
    0 5px 0 rgba(20, 20, 90, 0.45),
    0 9px 16px rgba(10, 0, 50, 0.28);
  color: var(--rb-navy);
}
.pop-reto-how {
  font-size: 15px;
  opacity: 1;
  text-shadow: 0 1px 3px rgba(10, 0, 50, 0.5);
}
.pop-total {
  background: rgba(8, 4, 50, 0.42);
  border: 1.5px solid rgba(160, 230, 255, 0.25);
}

/* ---------- level cards ---------- */
.pop-level {
  box-shadow:
    inset 0 -3px 0 rgba(170, 160, 220, 0.35),
    0 5px 0 rgba(12, 6, 70, 0.5),
    0 10px 18px rgba(5, 0, 40, 0.3);
}
.pop-level:not([disabled]):active {
  box-shadow:
    inset 0 -3px 0 rgba(170, 160, 220, 0.35),
    0 2px 0 rgba(12, 6, 70, 0.5);
}
.pop-level .pop-wm {
  opacity: 0.12;
}
.pop-level[disabled] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(170, 225, 255, 0.1));
  border: 1.5px solid rgba(190, 235, 255, 0.4);
}
.pop-level[disabled] .pop-wm {
  opacity: 0.2;
  filter: grayscale(1) brightness(2.4);
}

@keyframes rb-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes rb-twinkle {
  50% {
    transform: scale(0.55) rotate(25deg);
    opacity: 0.5;
  }
}
@media (max-width: 360px) {
  .pop-reto-row .pop-btn {
    font-size: 18px;
    padding: 8px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rb-spark,
  .rb-gear-l,
  .rb-gear-s,
  .rb-gear-r,
  .pop-logo > svg {
    animation: none;
  }
}