* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  background: #b7e4f6;
  color: #fff;
  font-family: system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: none;
  overscroll-behavior: none;
}
.home-viewport-bg {
  display: none;
}
.outer-bg {
  position: fixed;
  inset: -48px;
  z-index: 0;
  pointer-events: none;
  background: #b7e4f6 url("assets/Morning_Sky_Background_v2.webp?v=729") center / cover no-repeat;
  filter: blur(36px) saturate(0.78) brightness(0.52);
  transform: scale(1.08);
}
.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding:
    max(0px, env(safe-area-inset-top, 0px))
    max(0px, env(safe-area-inset-right, 0px))
    max(0px, env(safe-area-inset-bottom, 0px))
    max(0px, env(safe-area-inset-left, 0px));
}
.playfield {
  position: relative;
  overflow: hidden;
  aspect-ratio: 390 / 844;
  width: min(100%, calc(100dvh * 390 / 844));
  max-height: 100%;
  background: #6fb4d6;
  container-type: inline-size;
  --world-unit: calc(100cqi / 390);
  --world-offset-x: 0px;
  --world-offset-y: 0px;
  --world-width: 390;
  --world-height: 844;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 820px) {
  html, body {
    background: #b7e4f6;
  }
  html:has(.playfield.is-start),
  html:has(.playfield.is-start) body,
  html:has(.playfield.is-menu) body {
    background-color: transparent;
    background-image: url("assets/home/Home_Background_Menu_v4.webp?v=729");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    min-height: calc(100lvh + env(safe-area-inset-bottom, 0px) + 64px);
  }
  .home-viewport-bg {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px) - 64px);
    width: 100%;
    height: auto;
    min-height: calc(100lvh + env(safe-area-inset-bottom, 0px) + 64px);
    z-index: 0;
    pointer-events: none;
    background-image: url("assets/home/Home_Background_Menu_v4.webp?v=729");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  html:has(.playfield.is-start) .home-viewport-bg,
  html:has(.playfield.is-menu) .home-viewport-bg {
    display: block;
  }
  .outer-bg {
    display: none;
  }
  .stage,
  .playfield {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    width: 100%;
    height: auto;
    min-height: 100dvh;
    min-height: 100lvh;
    min-height: -webkit-fill-available;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }
  .stage:has(.playfield.is-start),
  .playfield.is-start {
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px) - 64px);
    min-height: calc(100lvh + env(safe-area-inset-bottom, 0px) + 64px);
  }
  .stage {
    background: transparent;
    justify-items: stretch;
    align-items: stretch;
  }
  .playfield {
    background-color: #b7e4f6;
    background-image: url("assets/Morning_Sky_Background_v3.webp?v=729");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    min-width: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    overflow: hidden;
    z-index: 1;
  }
  #game {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: transparent;
  }
  .level-intro {
    z-index: 6;
  }
  .level-intro-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.hud {
  position: absolute;
  left: var(--world-offset-x, 0px);
  top: var(--world-offset-y, 0px);
  width: calc(var(--world-width, 390) * var(--world-unit));
  height: calc(var(--world-height, 844) * var(--world-unit));
  z-index: 3;
  pointer-events: none;
  font-size: var(--world-unit);
  --hud-row-top: calc(10 * var(--world-unit));
  --hud-capsule-height: calc(30 * var(--world-unit));
  --hud-powerup-top: calc(var(--hud-row-top) + var(--hud-capsule-height) + 1 * var(--world-unit));
}
.hud-capsule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 999em;
  overflow: hidden;
  isolation: isolate;
  background: rgba(250, 248, 242, 0.84);
  border: 1em solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0 0 1em rgba(176, 196, 228, 0.15),
    0 2em 8em rgba(90, 120, 160, 0.08),
    inset 0 1em 0 rgba(255, 252, 246, 0.26),
    inset 0 -7em 8em rgba(150, 164, 196, 0.1);
  backdrop-filter: blur(8px) saturate(1.06);
  -webkit-backdrop-filter: blur(8px) saturate(1.06);
}
@media (max-width: 820px) {
  .hud-capsule {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(250, 248, 242, 0.86);
  }
  .hud-capsule--pause {
    background: transparent;
    border-color: transparent;
  }
}
.hud-capsule::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 252, 246, 0.26) 0%,
    rgba(255, 252, 246, 0.06) 28%,
    rgba(255, 255, 255, 0) 42%
  );
  pointer-events: none;
  z-index: 0;
}
.hud-capsule > * {
  position: relative;
  z-index: 1;
}
.hud-capsule--lives {
  width: 84em;
  height: var(--hud-capsule-height);
  padding: 0 7em;
  overflow: hidden;
  gap: 0;
  transition: width 240ms ease-out;
}
.hud-capsule--lives.is-expanded {
  width: 108em;
  overflow: visible;
}
.hud-capsule--lives.is-single {
  width: 42em;
}
.hud-capsule--score {
  width: max-content;
  min-width: 112em;
  max-width: 176em;
  height: var(--hud-capsule-height);
  padding: 0 16.5em 0 14.5em;
  flex-shrink: 0;
  white-space: nowrap;
}
.hud-capsule--pause {
  width: 38em;
  height: 38em;
  padding: 0;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hud-capsule--pause::before {
  display: none;
}
.hud-lives {
  position: absolute;
  left: 8em;
  top: var(--hud-row-top);
  height: var(--hud-capsule-height);
  display: flex;
  align-items: stretch;
}
.hud-hearts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5em;
  width: 100%;
  height: 100%;
}
.hud-heart {
  position: relative;
  flex: 0 0 19.3em;
  width: 19.3em;
  height: 17.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}
.hud-heart-icon {
  display: block;
  width: 19.3em;
  height: 16.9em;
  flex-shrink: 0;
  overflow: visible;
}
.hud-heart-live,
.hud-heart-gloss {
  opacity: 0;
}
.hud-heart-idle {
  opacity: 0.55;
}
.hud-heart.is-filled .hud-heart-live,
.hud-heart.is-losing .hud-heart-live {
  opacity: 1;
}
.hud-heart.is-filled .hud-heart-gloss,
.hud-heart.is-losing .hud-heart-gloss {
  opacity: 1;
}
.hud-heart.is-filled .hud-heart-idle,
.hud-heart.is-losing .hud-heart-idle {
  opacity: 0;
}
.hud-heart.is-empty .hud-heart-live,
.hud-heart.is-empty .hud-heart-gloss {
  opacity: 0;
}
.hud-heart.is-empty .hud-heart-idle {
  opacity: 1;
}
.hud-heart.is-filled {
  filter: drop-shadow(0 0.55em 2.5em rgba(230, 70, 112, 0.5));
}
.hud-heart.is-empty {
  opacity: 0.22;
  filter: saturate(0.55);
}
.hud-heart.is-losing {
  animation: hudHeartLose 170ms ease-out forwards;
}
.hud-heart.is-life-lost {
  animation: hudHeartLifeLost 380ms ease-in-out;
}
.hud-heart.is-gaining {
  animation: hudHeartGain 200ms ease-out both;
}
.hud-heart.is-reserved {
  visibility: hidden;
}
.hud-heart.is-highlight {
  animation: hudHeartGlow 500ms ease-out;
}
.hud-heart.is-slot-in {
  animation: hudHeartSlotIn 260ms ease-out both;
}
.hud-heart.is-slot-out {
  animation: hudHeartSlotOut 220ms ease-out forwards;
}
.hud-heart-sparkle {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 3.2em;
  height: 3.2em;
  margin: -1.6em 0 0 -1.6em;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 220, 230, 0.35) 42%, rgba(255, 255, 255, 0) 72%);
}
.hud-heart.is-gaining .hud-heart-sparkle {
  animation: hudHeartSparkle 200ms ease-out;
}
@keyframes hudHeartLose {
  0% { transform: scale(1); filter: drop-shadow(0 0.55em 2.5em rgba(230, 70, 112, 0.5)); }
  46% { transform: scale(0.94); filter: drop-shadow(0 0 1.4em rgba(180, 150, 170, 0.16)); }
  100% { transform: scale(1); filter: drop-shadow(0 0.4em 1.6em rgba(180, 150, 170, 0.12)); }
}
@keyframes hudHeartLifeLost {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.14); filter: brightness(1.22) drop-shadow(0 0.4em 2em rgba(230, 70, 112, 0.62)); }
  58% { transform: scale(0.9); }
  80% { transform: scale(1.05); }
}
@keyframes hudHeartGain {
  0% { transform: scale(1); filter: drop-shadow(0 0.55em 2.5em rgba(230, 70, 112, 0.5)); }
  42% { transform: scale(1.08); filter: drop-shadow(0 0.55em 2.5em rgba(230, 70, 112, 0.5)) drop-shadow(0 0 3.2em rgba(255, 236, 242, 0.18)); }
  100% { transform: scale(1); filter: drop-shadow(0 0.55em 2.5em rgba(230, 70, 112, 0.5)); }
}
@keyframes hudHeartSparkle {
  0% { opacity: 0; transform: scale(0.8); }
  40% { opacity: 0.18; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes hudHeartSlotIn {
  0% { opacity: 0; transform: scale(0.78); filter: drop-shadow(0 0 1.6em rgba(255, 196, 214, 0.28)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0.55em 2.5em rgba(230, 70, 112, 0.5)); }
}
@keyframes hudHeartSlotOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.2; transform: scale(0.86); }
}
@keyframes hudHeartGlow {
  0% { filter: drop-shadow(0 0.55em 2.5em rgba(230, 70, 112, 0.5)); }
  40% { filter: drop-shadow(0 0 5em rgba(255, 214, 226, 0.82)) drop-shadow(0 0 2.2em rgba(255, 255, 255, 0.4)); }
  100% { filter: drop-shadow(0 0.55em 2.5em rgba(230, 70, 112, 0.5)); }
}
.big-bubble-hud,
.big-bubble-fire-hint,
.mission-hud,
.mission-toast,
.golden-ball-banner,
.level1-guide-message,
.bottom-control-zone {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.big-bubble-hud {
  position: absolute;
  top: calc(var(--hud-row-top) + 44 * var(--world-unit));
  right: calc(10 * var(--world-unit));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: calc(4 * var(--world-unit));
  pointer-events: none;
  padding: calc(2 * var(--world-unit)) calc(8 * var(--world-unit)) calc(2 * var(--world-unit)) calc(3 * var(--world-unit));
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.9);
  color: #1d4f73;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: calc(14 * var(--world-unit));
  line-height: 1;
  letter-spacing: 0.02em;
  transition: opacity 0.22s linear;
}
.big-bubble-hud[hidden] { display: none !important; }
.big-bubble-fire-hint {
  position: absolute;
  top: calc(var(--hud-row-top) + 70 * var(--world-unit));
  right: calc(10 * var(--world-unit));
  z-index: 5;
  margin: 0;
  padding: calc(4 * var(--world-unit)) calc(8 * var(--world-unit));
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.92);
  color: #1d4f73;
  font-family: Nunito, sans-serif;
  font-weight: 800;
  font-size: calc(11 * var(--world-unit));
  letter-spacing: 0.04em;
  pointer-events: none;
}
.big-bubble-fire-hint[hidden] { display: none !important; }
.big-bubble-hud-icon {
  width: calc(17 * var(--world-unit));
  height: calc(17 * var(--world-unit));
  object-fit: contain;
}
.timed-effect-lane {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--hud-row-top) + 42 * var(--world-unit));
  height: calc(36 * var(--world-unit));
  z-index: 4;
  pointer-events: none;
}
.hud-active-powerup-bar {
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 188 * var(--world-unit));
  height: 100%;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
}
.hud-active-powerup-bar[hidden] {
  display: none;
}
.mission-hud {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: calc(8 * var(--world-unit));
  right: auto;
  top: calc(var(--hud-row-top) + var(--hud-capsule-height) + 6 * var(--world-unit));
  z-index: 3;
  transform: none;
  max-width: calc(116 * var(--world-unit));
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: calc(4 * var(--world-unit)) calc(10 * var(--world-unit)) calc(5 * var(--world-unit));
  border-radius: 999px;
  background: rgba(248, 244, 236, 0.58);
  border: calc(1 * var(--world-unit)) solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 calc(2 * var(--world-unit)) calc(8 * var(--world-unit)) rgba(30, 48, 72, 0.1),
    inset 0 calc(1 * var(--world-unit)) 0 rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  color: #4a5d72;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-size: calc(10 * var(--world-unit));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: left;
  text-shadow: 0 calc(1 * var(--world-unit)) calc(2 * var(--world-unit)) rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  pointer-events: none;
}
.mission-hud[hidden] {
  display: none;
}
.mission-hud.is-compact {
  gap: calc(4 * var(--world-unit));
  max-width: calc(72 * var(--world-unit));
  padding: calc(3 * var(--world-unit)) calc(7 * var(--world-unit)) calc(3 * var(--world-unit));
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.mission-hud-icon {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  margin-right: 0.28em;
}
.mission-hud.is-compact .mission-hud-icon {
  width: calc(16 * var(--world-unit));
  height: calc(16 * var(--world-unit));
  margin-right: 0;
}
.mission-hud.is-moon-pearl {
  max-width: calc(92 * var(--world-unit));
  padding: calc(3 * var(--world-unit)) calc(8 * var(--world-unit)) calc(3 * var(--world-unit));
  background: rgba(248, 244, 236, 0.72);
  color: #1c334c;
  font-size: calc(11.2 * var(--world-unit));
  font-weight: 800;
}
.mission-hud.is-moon-pearl .mission-hud-icon {
  width: calc(17 * var(--world-unit));
  height: calc(17 * var(--world-unit));
}
.mission-hud.is-lagoon-heart {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(1 * var(--world-unit));
  max-width: calc(210 * var(--world-unit));
  white-space: normal;
  line-height: 1.15;
  letter-spacing: 0.04em;
  font-size: calc(9.5 * var(--world-unit));
}
.mission-hud.is-lagoon-heart.is-switching {
  animation: lagoon-mission-in 0.28s ease;
}
.mission-hud.is-lagoon-heart.is-phase-cue {
  animation: lagoon-objective-pulse 0.68s ease;
}
.lagoon-mission-line,
.lagoon-mission-count {
  display: block;
}
.lagoon-mission-count {
  letter-spacing: 0.08em;
}
@keyframes lagoon-mission-in {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@keyframes lagoon-objective-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 calc(4 * var(--world-unit)) calc(16 * var(--world-unit)) rgba(28, 48, 72, 0.1),
      inset 0 calc(1 * var(--world-unit)) 0 rgba(255, 255, 255, 0.72);
  }
  42% {
    filter: brightness(1.32);
    box-shadow:
      0 0 0 calc(1 * var(--world-unit)) rgba(255, 252, 245, 0.96),
      0 0 calc(14 * var(--world-unit)) rgba(150, 220, 235, 0.9),
      inset 0 calc(1 * var(--world-unit)) 0 rgba(255, 255, 255, 0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mission-hud.is-lagoon-heart.is-phase-cue {
    animation: none;
  }
}
.mission-toast {
  position: absolute;
  left: 50%;
  top: calc(276 * var(--world-unit));
  z-index: 4;
  transform: translateX(-50%);
  margin: 0;
  padding: calc(7 * var(--world-unit)) calc(14 * var(--world-unit)) calc(8 * var(--world-unit));
  border-radius: 999px;
  background: rgba(248, 244, 236, 0.7);
  border: calc(1 * var(--world-unit)) solid rgba(255, 255, 255, 0.78);
  box-shadow:
    0 calc(4 * var(--world-unit)) calc(16 * var(--world-unit)) rgba(28, 48, 72, 0.12),
    inset 0 calc(1 * var(--world-unit)) 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px) saturate(1.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.14);
  color: #3d5368;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-size: calc(12 * var(--world-unit));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 calc(1 * var(--world-unit)) calc(2 * var(--world-unit)) rgba(255, 255, 255, 0.74);
  white-space: nowrap;
  pointer-events: none;
}
.mission-toast.is-key,
.mission-toast.is-chest,
.mission-toast.is-diamond,
.mission-toast.is-gold {
  padding-left: calc(32 * var(--world-unit));
  background-repeat: no-repeat;
  background-position: calc(10 * var(--world-unit)) center;
  background-size: calc(16 * var(--world-unit)) calc(16 * var(--world-unit));
}
.mission-toast.is-key { background-image: url("assets/Icon_Key.webp?v=729"); }
.mission-toast.is-chest { background-image: url("assets/Icon_Chest.webp?v=729"); }
.mission-toast.is-diamond { background-image: url("assets/Icon_Diamond.webp?v=729"); }
.mission-toast.is-gold { background-image: url("assets/Icon_Gold.webp?v=729"); }
.mission-toast[hidden] {
  display: none;
}
.mission-toast.is-treasure {
  top: calc(54 * var(--world-unit));
  padding: calc(3 * var(--world-unit)) calc(8 * var(--world-unit));
  font-size: calc(9 * var(--world-unit));
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(255, 236, 206, 0.9));
  border-color: rgba(232, 196, 120, 0.55);
  box-shadow: 0 calc(3 * var(--world-unit)) calc(10 * var(--world-unit)) rgba(90, 58, 18, 0.1);
  animation: treasureToastLife 0.68s linear both;
}
.hud.is-golden-live .mission-toast.is-treasure {
  left: calc(10 * var(--world-unit));
  transform: none;
}
@keyframes treasureToastLife {
  0% { opacity: 0; }
  15% { opacity: 1; }
  71% { opacity: 1; }
  100% { opacity: 0; }
}
.mission-toast.is-reward {
  animation: diamondToastPop 0.48s ease-out both;
}
.mission-toast.is-reward::before,
.mission-toast.is-reward::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 244, 210, 0.9);
  transform: translate(-50%, -50%) scale(0.4);
  animation: diamondToastRing 0.48s ease-out both;
  pointer-events: none;
}
.mission-toast.is-reward::after {
  border-color: rgba(140, 220, 255, 0.85);
  animation-delay: 0.05s;
}
@keyframes diamondToastPop {
  0% { transform: translateX(-50%) scale(0.92); }
  35% { transform: translateX(-50%) scale(1.04); }
  100% { transform: translateX(-50%) scale(1); }
}
@keyframes diamondToastRing {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
}
.mission-debug {
  position: absolute;
  left: calc(10 * var(--world-unit));
  top: calc(44 * var(--world-unit));
  z-index: 3;
  margin: 0;
  padding: calc(6 * var(--world-unit)) calc(8 * var(--world-unit)) calc(7 * var(--world-unit));
  border-radius: calc(10 * var(--world-unit));
  background: rgba(28, 40, 56, 0.46);
  border: calc(1 * var(--world-unit)) solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 calc(2 * var(--world-unit)) calc(8 * var(--world-unit)) rgba(20, 32, 48, 0.16);
  color: #f4efe6;
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  font-size: calc(9 * var(--world-unit));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: pre;
  pointer-events: none;
}
.mission-debug[hidden] {
  display: none;
}
.lagoon-heart-debug {
  position: absolute;
  left: calc(10 * var(--world-unit));
  top: calc(46 * var(--world-unit));
  z-index: 4;
  width: calc(148 * var(--world-unit));
  padding: calc(6 * var(--world-unit)) calc(8 * var(--world-unit));
  border-radius: calc(10 * var(--world-unit));
  background: rgba(18, 28, 48, 0.55);
  border: calc(1 * var(--world-unit)) solid rgba(255, 255, 255, 0.28);
  color: #f7f3ea;
  pointer-events: auto;
}
.lagoon-heart-debug[hidden] {
  display: none;
}
.lagoon-heart-debug-text {
  margin: 0;
  font-family: "Consolas", "SFMono-Regular", "Menlo", monospace;
  font-size: calc(9 * var(--world-unit));
  font-weight: 600;
  line-height: 1.35;
  white-space: pre;
}
.lagoon-heart-defeated {
  margin: calc(4 * var(--world-unit)) 0 0;
  font-size: calc(11 * var(--world-unit));
  font-weight: 800;
  letter-spacing: 0.04em;
}
.lagoon-heart-defeated[hidden] {
  display: none;
}
.lagoon-heart-debug-actions {
  display: flex;
  gap: calc(4 * var(--world-unit));
  margin-top: calc(6 * var(--world-unit));
}
.lagoon-heart-debug-btn {
  flex: 1;
  margin: 0;
  padding: calc(4 * var(--world-unit)) calc(4 * var(--world-unit));
  border: 0;
  border-radius: calc(7 * var(--world-unit));
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: calc(8 * var(--world-unit));
  font-weight: 700;
  letter-spacing: 0.03em;
}
.lagoon-heart-debug-btn[hidden] {
  display: none;
}
@media (max-width: 820px) {
  .mission-hud,
  .mission-toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(248, 244, 236, 0.88);
  }
}
.hud-active-powerup-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}
.hud-active-powerup-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10em;
  min-height: calc(30 * var(--world-unit));
  overflow: visible;
}
.hud-powerup {
  position: relative;
  overflow: visible;
  width: 34em;
  height: 34em;
  display: grid;
  place-items: center;
  opacity: 0;
  scale: 0.88;
  transition: opacity 0.16s ease, scale 0.16s ease;
}
.hud-powerup.is-active {
  opacity: 1;
  scale: 1;
}
.hud-powerup.is-entering {
  opacity: 0;
  scale: 0.88;
}
.hud-powerup.is-exiting {
  opacity: 0;
  scale: 0.92;
  transition: opacity 0.18s ease, scale 0.18s ease;
}
.hud-powerup::after {
  content: "";
  position: absolute;
  inset: -4em;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 248, 238, 0.34);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2em), #000 calc(100% - 2em));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2em), #000 calc(100% - 2em));
  box-shadow: 0 0 5em rgba(255, 244, 232, 0.2);
}
.hud-powerup::before {
  content: "";
  position: absolute;
  inset: -4em;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    rgba(255, 252, 246, 0.96) calc(var(--progress) * 360deg),
    transparent 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.3em), #000 calc(100% - 3.3em));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.3em), #000 calc(100% - 3.3em));
  filter: drop-shadow(0 0 4em rgba(255, 245, 235, 0.36));
  pointer-events: none;
  transition: filter 0.3s ease;
}
.hud-powerup.is-waning::before {
  filter: drop-shadow(0 0 5em rgba(255, 240, 228, 0.46)) brightness(1.03);
  animation: hudPowerupWane 1.6s ease-in-out infinite;
}
.hud-powerup.is-waning::after {
  animation: hudPowerupBaseWane 1.6s ease-in-out infinite;
}
.hud-powerup img {
  position: relative;
  z-index: 1;
  width: 27em;
  height: 27em;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 3em rgba(255, 255, 255, 0.58)) brightness(1.12) contrast(1.1);
}
.hud-powerup.is-flash::before,
.hud-powerup.is-flash::after {
  opacity: 0;
}
.hud-powerup-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 2 * var(--world-unit));
  z-index: 2;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #16324c;
  font-size: 11em;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 0 6em rgba(255, 252, 246, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
}
.hud-powerup.is-named .hud-powerup-name {
  animation: hudPowerupNameFade 1.6s ease-in-out forwards;
}
.hud-powerup.is-holding .hud-powerup-name {
  opacity: 1;
  animation: none;
  color: #16324c;
}
.hud-powerup.is-timed {
  width: auto;
  height: calc(32 * var(--world-unit));
  padding: 0 calc(12 * var(--world-unit)) 0 calc(6 * var(--world-unit));
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.72);
  border: calc(1 * var(--world-unit)) solid rgba(255, 255, 255, 0.84);
  box-shadow:
    inset 0 calc(1 * var(--world-unit)) 0 rgba(255, 255, 255, 0.9),
    0 calc(4 * var(--world-unit)) calc(14 * var(--world-unit)) rgba(72, 96, 128, 0.12),
    0 0 calc(12 * var(--world-unit)) rgba(255, 236, 214, 0.45);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  transition: opacity 220ms ease, scale 220ms ease, transform 220ms ease;
}
.hud-powerup.is-timed.is-entering {
  opacity: 0;
  scale: 0.96;
  transform: translateY(calc(6 * var(--world-unit)));
}
.hud-powerup.is-timed.is-exiting {
  transition: opacity 220ms ease, scale 220ms ease, transform 220ms ease;
}
.hud-powerup.is-timed::before,
.hud-powerup.is-timed::after,
.hud-timed-face::before,
.hud-timed-face::after {
  display: none;
}
.hud-timer-capsule {
  display: flex;
}
.hud-timed-face {
  position: relative;
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--world-unit));
}
.hud-powerup.is-timed img {
  width: calc(22 * var(--world-unit));
  height: calc(22 * var(--world-unit));
  object-fit: contain;
  flex: 0 0 auto;
}
.hud-timer-name {
  color: #3d5166;
  font-size: calc(9 * var(--world-unit));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}
.hud-timed-time {
  position: static;
  transform: none;
  color: #16324c;
  font-size: calc(15 * var(--world-unit));
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: none;
  pointer-events: none;
}
.hud-powerup.is-timed .hud-powerup-name {
  display: none;
}
.hud-powerup.is-timed[data-accent="rainbowRush"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 176, 198, 0.38), 0 0 16px rgba(168, 206, 255, 0.28);
}
.hud-powerup.is-timed[data-accent="discoOrb"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 120, 196, 0.34), 0 0 14px rgba(96, 230, 240, 0.28);
}
.hud-powerup.is-timed[data-accent="giantOrb"],
.hud-powerup.is-timed[data-accent="goldenBall"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 14px rgba(232, 176, 74, 0.42);
}
.hud-powerup.is-timed[data-accent="guidingHelm"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 12px rgba(232, 186, 84, 0.32), 0 0 12px rgba(110, 214, 224, 0.28);
}
.hud-powerup.is-timed[data-accent="rainbowTwins"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 14px rgba(196, 176, 255, 0.36), 0 0 12px rgba(255, 196, 214, 0.24);
}
.hud-powerup.is-timed[data-accent="piercingOrb"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 14px rgba(150, 214, 230, 0.4);
}
.hud-powerup.is-timed[data-accent="happyBalls"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 186, 150, 0.36);
}
.hud-powerup.is-timer-badge {
  height: calc(22 * var(--world-unit));
  padding: 0 calc(6 * var(--world-unit)) 0 calc(4 * var(--world-unit));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 8px rgba(255, 236, 214, 0.35);
}
.hud-powerup.is-timer-badge img {
  width: calc(14 * var(--world-unit));
  height: calc(14 * var(--world-unit));
}
.hud-powerup.is-timer-badge .hud-timer-name {
  display: none;
}
.hud-powerup.is-timer-badge .hud-timed-time {
  font-size: calc(9 * var(--world-unit));
}
.hud-powerup.is-capsule.is-finale {
  animation: hudTimerPulse 0.9s ease-in-out infinite;
}
@keyframes hudTimerPulse {
  0%, 100% { scale: 1; filter: brightness(1); }
  50% { scale: 1.04; filter: brightness(1.12); }
}
.golden-ball-banner {
  position: absolute;
  left: 50%;
  top: calc(318 * var(--world-unit));
  z-index: 4;
  transform: translateX(-50%);
  margin: 0;
  padding: calc(6 * var(--world-unit)) calc(12 * var(--world-unit));
  border-radius: 999px;
  background: rgba(255, 246, 226, 0.88);
  border: calc(1 * var(--world-unit)) solid rgba(214, 168, 72, 0.45);
  color: #6a4a16;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-size: calc(12 * var(--world-unit));
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}
#complete-story-golden-row[hidden] {
  display: none !important;
}
.complete-story-golden:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--world-unit));
}
.complete-story-golden {
  color: #8a6418;
  font-weight: 800;
}
.complete-story-gold-total {
  font-weight: 700;
  letter-spacing: 0.04em;
}
@keyframes hudPowerupNameFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hudPowerupWane {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}
@keyframes hudPowerupBaseWane {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}
.hud-right {
  position: absolute;
  top: var(--hud-row-top);
  right: 8em;
  height: auto;
  min-height: var(--hud-capsule-height);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6em;
}
.hud-score-content {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 9em;
  width: auto;
  height: 100%;
  color: #2a4f6b;
  white-space: nowrap;
}
.hud-star {
  font-size: 11em;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0.4em 1.6em rgba(214, 164, 72, 0.45));
}
.hud-score-value {
  display: inline-block;
  font-size: 14em;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #1d425c;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform-origin: center center;
}
.hud-gold-icon {
  width: 16em;
  height: 16em;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 0.4em 1.6em rgba(214, 164, 72, 0.45));
}
.hud-capsule--gold {
  transform-origin: center center;
}
.hud-capsule--gold.is-gold-pulse {
  animation: hudGoldPulse 200ms ease-out;
}
.hud-capsule--gold.is-gold-glow {
  filter: brightness(1.18);
}
.hud-gold-icon.is-shimmer {
  animation: hudGoldIconShimmer 200ms ease-out;
}
.hud-score-value.is-score-pulse {
  animation: hudScorePulse 155ms ease-out;
}
.hud-score-content:has(.is-score-pulse) .hud-star {
  animation: hudStarGlow 155ms ease-out;
}
@keyframes hudGoldPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes hudGoldIconShimmer {
  0%, 100% { filter: drop-shadow(0 0.4em 1.6em rgba(214, 164, 72, 0.45)); }
  50% { filter: drop-shadow(0 0 4em rgba(255, 214, 130, 0.72)) brightness(1.18); }
}
@keyframes hudScorePulse {
  0%, 100% { transform: scale(1); }
  45% {
    transform: scale(1.035);
    text-shadow: 0 0 6em rgba(255, 244, 214, 0.2);
  }
}
@keyframes hudStarGlow {
  0%, 100% { filter: drop-shadow(0 0.4em 1.6em rgba(214, 164, 72, 0.45)); }
  45% { filter: drop-shadow(0 0 4em rgba(255, 214, 130, 0.62)); }
}
.hud-capsule--score[data-digits="5"] .hud-score-value {
  font-size: 13em;
}
.hud-capsule--score[data-digits="6"] .hud-score-value,
.hud-capsule--score[data-digits="7"] .hud-score-value {
  font-size: 12em;
}
.hud-pause {
  pointer-events: auto;
  position: relative;
  font: inherit;
  margin: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.hud-pause::after {
  content: "";
  position: absolute;
  inset: -7em;
  border-radius: 50%;
}
.hud-pause-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 54em;
  height: 54em;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.hud-pause:active .hud-pause-icon {
  transform: translate(-50%, -50%) scale(0.96);
}
.hud-pause.is-cue {
  animation: hudPauseCue 650ms ease-in-out 1;
}
@keyframes hudPauseCue {
  0%, 100% {
    box-shadow:
      0 3em 10em rgba(28, 46, 88, 0.2),
      inset 0 1em 0 rgba(255, 255, 255, 0.58),
      inset 0 -1em 0 rgba(70, 88, 140, 0.2),
      inset 0 0 12em rgba(168, 182, 230, 0.16);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 5em rgba(186, 198, 236, 0.34),
      0 4em 16em rgba(70, 96, 168, 0.28),
      inset 0 1em 0 rgba(255, 255, 255, 0.7);
    transform: scale(1.045);
  }
}
.release-calm-hint {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: calc(var(--paddle-visual-top, 718px) - 70px);
  bottom: auto;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 30px;
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 2px 10px rgba(28, 48, 72, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -100%);
  color: #24384c;
  -webkit-text-fill-color: #24384c;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  filter: none;
  white-space: nowrap;
  opacity: 0;
}
.release-calm-hint[hidden] {
  display: none;
}
.aim-guide-hint {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 5;
  display: grid;
  gap: 3px;
  width: min(240px, 78%);
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 8px 20px rgba(28, 48, 72, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translate(-50%, -50%);
  color: #24384c;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  text-align: center;
}
.aim-guide-hint span:first-child {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.aim-guide-hint span:last-child {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.aim-guide-hint[hidden] {
  display: none;
}
.stone-recharge-hint {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: calc(var(--paddle-visual-top, 718px) + 30px);
  z-index: 5;
  box-sizing: border-box;
  width: min(320px, 86%);
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 6px 16px rgba(28, 48, 72, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateX(-50%);
  color: #24384c;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
}
.stone-recharge-hint[hidden] {
  display: none;
}
.release-calm-hint.is-pulse {
  animation: releaseCalmHintPulse 1.8s ease-in-out infinite;
}
@keyframes releaseCalmHintPulse {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 2px 10px rgba(28, 48, 72, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }
  50% {
    opacity: 0.84;
    box-shadow:
      0 2px 14px rgba(186, 214, 240, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }
}
@media (max-width: 820px) {
  .release-calm-hint {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 252, 246, 0.88);
  }
}
.bottom-control-zone {
  --rail-width: 240px;
  --rail-bottom: 54px;
  --knob-size: 36px;
  --knob-shift: 0px;
  --control-center-x: 50%;
  --control-rail-y: 70%;
  position: absolute;
  left: var(--control-center-x);
  top: var(--control-rail-y);
  z-index: 4;
  width: calc(var(--rail-width) + var(--knob-size));
  height: 64px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  touch-action: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
.bottom-control-zone.is-enabled.is-live {
  pointer-events: auto;
  opacity: 1;
}
.bottom-control-zone[hidden] {
  display: none;
}
.bottom-control-hint {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 10px));
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(255, 250, 240, 0.94);
  border: 1px solid rgba(255, 236, 196, 0.95);
  box-shadow:
    0 0 18px rgba(255, 186, 48, 0.72),
    0 8px 18px rgba(90, 52, 8, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: #3a2a12;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.bottom-control-hint.is-fading {
  opacity: 0;
  transition: opacity 300ms ease;
}
.bottom-control-hint span {
  display: block;
}
.bottom-control-hint::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 160, 0.95), transparent);
  transform: translateX(-120%);
  pointer-events: none;
}
.bottom-control-hint:not([hidden]) {
  animation: none;
}
.bottom-control-hint:not([hidden])::after {
  animation: none;
}
.bottom-control-hint span + span::before {
  content: none;
}
.bottom-control-hint[hidden] {
  display: none;
}
@keyframes controlHintPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    color: #3a2a12;
    background: rgba(255, 250, 240, 0.94);
    box-shadow:
      0 0 22px rgba(255, 170, 24, 0.85),
      0 0 36px rgba(255, 150, 20, 0.4),
      0 8px 18px rgba(90, 52, 8, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  50% {
    transform: translateX(-50%) scale(1.045);
    color: #8a4e08;
    background: rgba(255, 236, 176, 0.98);
    box-shadow:
      0 0 28px rgba(255, 176, 24, 0.95),
      0 0 48px rgba(255, 150, 20, 0.55),
      0 8px 18px rgba(90, 52, 8, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 1);
    text-shadow: 0 0 10px rgba(255, 210, 80, 0.9);
  }
}
@keyframes controlHintSweep {
  0%, 18% { transform: translateX(-140%); opacity: 0; }
  42% { opacity: 0.95; }
  70%, 100% { transform: translateX(420%); opacity: 0; }
}
@media (max-width: 820px) {
  .bottom-control-hint {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.bottom-control-capsule {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rail-width, 240px) + 8px);
  height: 46px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: rgba(255, 252, 248, 0.28);
  border: 1px solid rgba(186, 214, 240, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  opacity: 0.72;
}
.bottom-control-guide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--rail-width, 240px);
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 250, 240, 0), rgba(186, 228, 242, 0.95), rgba(214, 220, 255, 1), rgba(186, 228, 242, 0.95), rgba(255, 250, 240, 0));
  box-shadow: 0 0 9px rgba(186, 214, 240, 0.18);
  opacity: 0.28;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 180ms ease, box-shadow 180ms ease;
}
.bottom-control-zone.is-launched:not(.is-active):not(.is-cue):not(.is-emphasis) .bottom-control-guide {
  opacity: 0.2;
  box-shadow: 0 0 8px rgba(186, 214, 240, 0.14);
}
.bottom-control-zone.is-active .bottom-control-guide,
.bottom-control-zone.is-cue .bottom-control-guide {
  opacity: 0.55;
  box-shadow: 0 0 10px rgba(186, 214, 240, 0.42);
}
.bottom-control-zone.is-cue .bottom-control-guide {
  animation: controlZoneCueRail 760ms ease-in-out 1;
}
.level1-drag-finger {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 78px;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: none;
  pointer-events: none;
  opacity: var(--finger-opacity, 0);
  visibility: hidden;
  filter: drop-shadow(0 6px 8px rgba(18, 42, 64, 0.16));
}
.level1-drag-finger.is-on {
  visibility: visible;
}
.level1-guide-message {
  position: absolute;
  z-index: 7;
  left: calc(var(--world-offset-x) + 90 * var(--world-unit));
  top: calc(var(--world-offset-y) + 308 * var(--world-unit));
  width: calc(210 * var(--world-unit));
  height: calc(36 * var(--world-unit));
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(8 * var(--world-unit));
  border-radius: calc(12 * var(--world-unit));
  background: rgba(255, 252, 246, 0.95);
  border: 1px solid rgba(214, 176, 96, 0.7);
  box-shadow: 0 2px 6px rgba(18, 42, 64, 0.08);
  color: #16324c;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-size: calc(10 * var(--world-unit));
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.level1-guide-message[hidden] {
  display: none;
}
.level1-guide-message.is-power-hint {
  width: calc(236 * var(--world-unit));
  height: auto;
  min-height: calc(36 * var(--world-unit));
  left: calc(var(--world-offset-x) + 77 * var(--world-unit));
  font-size: calc(8.6 * var(--world-unit));
  white-space: normal;
  padding: calc(4 * var(--world-unit)) calc(8 * var(--world-unit));
}
.level1-power-finger {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 72px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 6px 8px rgba(18, 42, 64, 0.16));
}
.level1-power-finger.is-on {
  visibility: visible;
}
.pause-lesson-hand {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: 72px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 6px 8px rgba(18, 42, 64, 0.16));
}
.pause-lesson-hand.is-on {
  visibility: visible;
}
.pause-lesson-hint {
  position: absolute;
  z-index: 8;
  top: calc(var(--hud-row-top) + var(--hud-capsule-height) + 8 * var(--world-unit));
  right: 8em;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(22 * var(--world-unit));
  padding: calc(3 * var(--world-unit)) calc(8 * var(--world-unit));
  border-radius: calc(11 * var(--world-unit));
  background: rgba(255, 252, 246, 0.95);
  border: 1px solid rgba(214, 176, 96, 0.7);
  box-shadow: 0 2px 6px rgba(18, 42, 64, 0.08);
  color: #16324c;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-size: calc(8.2 * var(--world-unit));
  font-weight: 650;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.pause-lesson-hint[hidden] {
  display: none;
}
.hud-pause.is-lesson {
  animation: pauseLessonGlow 850ms ease-in-out infinite;
}
@keyframes pauseLessonGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(186, 214, 255, 0);
  }
  50% {
    box-shadow:
      0 0 0 6em rgba(186, 214, 255, 0.5),
      0 0 18em rgba(150, 190, 255, 0.38);
  }
}
.bottom-control-knob {
  position: absolute;
  left: calc(50% + var(--knob-shift, 0px));
  top: 50%;
  width: var(--knob-size, 36px);
  height: var(--knob-size, 36px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 252, 246, 0.98), rgba(210, 236, 248, 0.72) 42%, rgba(168, 186, 232, 0.88) 72%, rgba(148, 170, 220, 0.95) 100%);
  border: 1.5px solid rgba(214, 226, 255, 0.78);
  box-shadow:
    0 0 11px rgba(186, 214, 240, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  opacity: 0.72;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, box-shadow 180ms ease;
}
.bottom-control-zone.is-launched:not(.is-active):not(.is-cue):not(.is-emphasis) .bottom-control-knob {
  opacity: 0.4;
  box-shadow:
    0 0 8px rgba(186, 214, 240, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.bottom-control-zone.is-active .bottom-control-knob {
  opacity: 0.95;
  box-shadow:
    0 0 12px rgba(186, 214, 240, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.bottom-control-zone.is-cue .bottom-control-knob {
  animation: controlZoneCueKnob 760ms ease-in-out 1;
}
.bottom-control-zone.is-teaching .bottom-control-capsule,
.bottom-control-zone.is-emphasis .bottom-control-capsule {
  background: rgba(255, 252, 248, 0.62);
  border: 1.5px solid rgba(150, 206, 245, 0.92);
  box-shadow:
    0 0 18px rgba(168, 198, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  opacity: 1;
}
.bottom-control-zone.is-teaching .bottom-control-guide,
.bottom-control-zone.is-emphasis .bottom-control-guide {
  opacity: 0.72;
  height: 6px;
  box-shadow: 0 0 14px rgba(170, 210, 255, 0.75);
}
.bottom-control-zone.is-teaching .bottom-control-knob,
.bottom-control-zone.is-emphasis .bottom-control-knob {
  opacity: 1;
  border-color: rgba(214, 232, 255, 0.98);
  box-shadow:
    0 0 16px rgba(170, 210, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.bottom-control-zone.is-pulse .bottom-control-knob {
  animation: controlKnobPulse 1650ms ease-in-out 1;
}
@keyframes controlKnobPulse {
  0%, 42.4%, 57.6%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 12px rgba(170, 210, 255, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }
  21.2%, 78.8% {
    transform: translate(-50%, -50%) scale(1.14);
    box-shadow:
      0 0 22px rgba(170, 214, 255, 0.95),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
}
.control-connector {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  width: 0;
  height: 28px;
  border-left: 1.5px dotted rgba(120, 198, 230, 0.95);
  transform: translateX(-50%);
  pointer-events: none;
}
.control-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(120, 198, 230, 0.95);
}
.control-connector[hidden] {
  display: none;
}
@keyframes controlZoneCueRail {
  0%, 100% {
    opacity: 0.28;
    box-shadow: 0 0 9px rgba(186, 214, 240, 0.18);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 10px rgba(186, 214, 240, 0.42);
  }
}
@keyframes controlZoneCueKnob {
  0% {
    transform: translate(-50%, -50%);
    opacity: 0.72;
  }
  28.95% {
    transform: translate(calc(-50% - 24px), -50%);
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
  71.05% {
    transform: translate(calc(-50% + 24px), -50%);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 0.72;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bottom-control-zone,
  .bottom-control-guide,
  .bottom-control-knob {
    transition: none;
  }
  .bottom-control-zone.is-cue .bottom-control-guide,
  .bottom-control-zone.is-cue .bottom-control-knob,
  .bottom-control-zone.is-pulse .bottom-control-knob {
    animation: none;
  }
}
.level-intro {
  position: absolute;
  left: var(--world-offset-x, 0px);
  width: calc(var(--world-width, 390) * var(--world-unit));
  right: auto;
  z-index: 6;
  display: grid;
  justify-items: center;
  padding: 0 18em;
  pointer-events: none;
  text-align: center;
  font-size: var(--world-unit);
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-synthesis: none;
  will-change: opacity, transform;
}
.level-intro[hidden] {
  display: none;
}
.level-intro.is-hold {
  pointer-events: auto;
  cursor: pointer;
}
.level-intro.is-lagoon-heart .level-intro-card {
  padding-top: 14em;
  padding-bottom: 14em;
}
.level-intro-lagoon {
  position: relative;
  width: 132em;
  height: 124em;
  margin: 6em 0 2em;
}
.level-intro-lagoon-core,
.level-intro-lagoon-shard {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}
.level-intro-lagoon-core {
  left: 21em;
  top: 20em;
  width: 90em;
  height: 85em;
  animation: lagoon-intro-breathe 4.8s ease-in-out infinite;
}
.level-intro-lagoon-shard {
  width: 40em;
  height: 40em;
  opacity: 0.8;
}
.level-intro-lagoon-shard.is-tl { left: 16em; top: 2em; }
.level-intro-lagoon-shard.is-tr { right: 16em; top: 2em; }
.level-intro-lagoon-shard.is-bl { left: 16em; bottom: 2em; }
.level-intro-lagoon-shard.is-br { right: 16em; bottom: 2em; }
@keyframes lagoon-intro-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}
.level-intro-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  width: min(100%, 338em);
  padding: 18em 22em 20em;
  overflow: hidden;
  isolation: isolate;
  border-radius: 30em;
  background:
    linear-gradient(180deg, rgba(255, 186, 122, 0.62) 0%, rgba(255, 210, 156, 0.4) 24%, rgba(255, 236, 206, 0.5) 58%, rgba(255, 252, 246, 0.96) 100%),
    rgba(255, 248, 236, 0.92);
  border: 1.2em solid rgba(255, 255, 255, 0.86);
  box-shadow:
    0 8em 26em rgba(18, 42, 64, 0.14),
    0 0 22em rgba(170, 214, 240, 0.2),
    inset 0 1em 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
}
.level-intro.is-daily {
  opacity: 1;
}
.level-intro.is-daily .level-intro-card,
.daily-info-panel {
  border: 1.2em solid rgba(255, 255, 255, 0.86);
  box-shadow:
    0 8em 26em rgba(18, 42, 64, 0.14),
    0 0 22em rgba(232, 176, 96, 0.24),
    inset 0 1em 0 rgba(255, 255, 255, 0.92);
}
.level-intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.16) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 252, 246, 0) 72%);
  z-index: 0;
}
.level-intro-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -36em;
  width: 160em;
  height: 90em;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.42) 0%, rgba(255, 214, 164, 0.14) 46%, rgba(255, 214, 164, 0) 72%);
  transform: translateX(-50%);
  z-index: 0;
}
.level-intro-card > * {
  position: relative;
  z-index: 1;
}
.level-intro-world {
  margin: 0 0 calc(6 * var(--world-unit));
  font-size: 12em;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: #1a3a52;
  text-shadow: 0 1em 2em rgba(255, 255, 255, 0.55);
}
.level-intro-number {
  margin: 0 0 calc(8 * var(--world-unit));
  font-size: 14em;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #122838;
  text-shadow: 0 1em 2em rgba(255, 255, 255, 0.55);
}
.level-intro-name {
  margin: 0;
  font-family: "Nunito", "Quicksand", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 36em;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.12;
  color: #102838;
  text-shadow:
    0 1em 2em rgba(255, 255, 255, 0.88),
    0 2em 10em rgba(12, 28, 40, 0.16);
}
.level-intro-line {
  margin: calc(8 * var(--world-unit)) 0 0;
  max-width: 26ch;
  font-size: 13em;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: #24384c;
  text-shadow: 0 1em 2em rgba(255, 255, 255, 0.45);
}
.level-intro-line[hidden],
.level-intro-number[hidden],
.level-intro-reward[hidden],
.level-intro-mission[hidden],
.level-intro-new[hidden],
.level-intro-feature[hidden],
.level-intro-life[hidden],
.level-intro-feature-cloud-frame[hidden],
.level-intro-pulse[hidden],
.level-intro-sling[hidden],
.level-intro-deflector[hidden],
.level-intro-hint[hidden],
.level-intro-reminders[hidden] {
  display: none !important;
}
.level-intro-new {
  display: grid;
  justify-items: center;
  gap: 5em;
  width: 100%;
  margin: calc(16 * var(--world-unit)) 0 0;
  padding: calc(10 * var(--world-unit)) calc(12 * var(--world-unit)) calc(11 * var(--world-unit));
  border-radius: 14em;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.72) 0%, rgba(236, 246, 255, 0.42) 100%);
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, 0.88);
}
.level-intro-new-kicker,
.level-intro-new-title,
.level-intro-new-note {
  margin: 0;
  text-align: center;
}
.level-intro-new-kicker {
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: #24384c;
}
.level-intro-new-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1em 0 2em;
}
.level-intro-new-brick {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
}
.level-intro-new-brick-live {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  z-index: 2;
}
.level-intro-new-cloud {
  display: block;
  width: 120em;
  height: auto;
  object-fit: contain;
}
.level-intro-new-cloud[hidden] {
  display: none;
}
.level-intro-new-vortex {
  display: block;
  width: 96em;
  height: auto;
  object-fit: contain;
}
.level-intro-new-vortex[hidden] {
  display: none;
}
.level-intro.is-moon-current .level-intro-new {
  gap: 4em;
  padding-top: calc(4 * var(--world-unit));
  padding-bottom: calc(8 * var(--world-unit));
}
.level-intro.is-moon-current .level-intro-new-preview {
  margin: -13em 0 0;
}
.level-intro.is-moon-current .level-intro-moon-current {
  margin: 0 0 2em;
}
.level-intro-moon-current {
  position: relative;
  display: block;
  width: 164em;
  height: 42em;
  margin: 2em 0 1em;
  overflow: hidden;
  border-radius: 99em;
}
.level-intro-moon-current[hidden] {
  display: none;
}
.level-intro-moon-current img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.level-intro-moon-current canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro-shadowfin {
  position: relative;
  display: block;
  width: 256em;
  height: 76em;
  margin: 0 0 2em;
  overflow: hidden;
}
.level-intro-shadowfin[hidden] {
  display: none;
}
.level-intro-shadowfin canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro-paddle-shadow {
  position: relative;
  display: block;
  width: 300em;
  height: 158em;
  margin: 0;
  overflow: hidden;
  border-radius: 16em;
}
.level-intro.is-paddle-shadow .level-intro-new-brick-face,
.level-intro.is-paddle-shadow .level-intro-new-brick-icon,
.level-intro.is-paddle-shadow .level-intro-new-brick-live {
  display: none !important;
}
.level-intro.is-paddle-shadow .level-intro-new {
  gap: 4em;
  padding-top: calc(6 * var(--world-unit));
  padding-bottom: calc(8 * var(--world-unit));
}
.level-intro.is-paddle-shadow .level-intro-new-preview {
  margin: 0;
}
.level-intro-paddle-shadow[hidden] {
  display: none;
}
.level-intro-paddle-shadow canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro.is-shadowfin .level-intro-new {
  gap: 3em;
  padding-top: calc(4 * var(--world-unit));
  padding-bottom: calc(6 * var(--world-unit));
}
.level-intro.is-shadowfin .level-intro-new-preview {
  margin: 0;
}
.level-intro.is-shadowfin .level-intro-new-brick-face,
.level-intro.is-shadowfin .level-intro-new-brick-icon,
.level-intro.is-shadowfin .level-intro-new-brick-live {
  display: none !important;
}
.level-intro-big-bubble {
  position: relative;
  display: block;
  width: 210em;
  height: 132em;
  margin: 2em auto 0;
}
.level-intro-big-bubble[hidden] { display: none !important; }
.level-intro-big-bubble canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro.is-big-bubble .level-intro-power .level-intro-new-brick-live {
  display: none !important;
}
.level-intro-rushstone {
  position: relative;
  display: block;
  width: 168em;
  height: 78em;
  margin: 0;
  overflow: visible;
}
.level-intro-rushstone[hidden] {
  display: none;
}
.level-intro-rushstone canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro.is-rushstone .level-intro-card {
  padding-top: 12em;
  padding-bottom: 14em;
}
.level-intro.is-rushstone .level-intro-mission {
  margin-top: calc(10 * var(--world-unit));
}
.level-intro.is-rushstone .level-intro-new {
  gap: 3em;
  margin-top: calc(8 * var(--world-unit));
  padding-top: calc(6 * var(--world-unit));
  padding-bottom: calc(6 * var(--world-unit));
}
.level-intro.is-rushstone .level-intro-new-preview {
  margin: 0;
}
.level-intro.is-rushstone .level-intro-new-brick-face,
.level-intro.is-rushstone .level-intro-new-brick-icon,
.level-intro.is-rushstone .level-intro-new-brick-live {
  display: none !important;
}
.level-intro.is-rushstone .level-intro-hint {
  margin-top: calc(20 * var(--world-unit));
}
.level-intro-shell-lesson {
  gap: 2em;
  padding-top: 4em;
  padding-bottom: 2em;
}
.level-intro.is-paddle-shadow.is-shell-lesson .level-intro-paddle-shadow {
  height: 128em;
}
.level-intro.is-paddle-shadow.is-shell-lesson .level-intro-new {
  padding-bottom: calc(2 * var(--world-unit));
}
.level-intro.is-lagoon-heart.is-preview .level-intro-card {
  padding-top: 10em;
  padding-bottom: 10em;
}
.level-intro.is-lagoon-heart.is-preview .level-intro-lagoon {
  width: 108em;
  height: 96em;
  margin: 2em 0 0;
}
.level-intro.is-lagoon-heart.is-preview .level-intro-lagoon-core {
  left: 18em;
  top: 14em;
  width: 72em;
  height: 68em;
}
.level-intro.is-lagoon-heart .level-intro-reminders {
  gap: calc(3 * var(--world-unit));
  margin-top: calc(4 * var(--world-unit));
}
.level-intro.is-lagoon-heart .level-intro-reminder {
  padding: calc(3 * var(--world-unit)) calc(8 * var(--world-unit));
}
.level-intro-reminder.is-bad-bubble .level-intro-reminder-bubble {
  width: calc(36 * var(--world-unit));
  height: calc(36 * var(--world-unit));
}
.level-intro-reminder-bad-bubble-live {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro.is-preview .level-intro-reminders {
  gap: 4em;
  margin-top: 4em;
}
.level-intro-reminder-currents {
  width: calc(72 * var(--world-unit));
  height: calc(36 * var(--world-unit));
  flex: 0 0 auto;
  display: block;
}
.level-intro-reminder-currents-live {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro-shell-lock {
  position: relative;
  display: block;
  width: 180em;
  height: 68em;
  margin: 0;
  overflow: hidden;
}
.level-intro-shell-lock[hidden] {
  display: none;
}
.level-intro-shell-lock canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro.is-shell-lock .level-intro-new-brick-face,
.level-intro.is-shell-lock .level-intro-new-brick-icon,
.level-intro.is-shell-lock .level-intro-new-brick-live {
  display: none !important;
}
.level-intro.is-shell-lock .level-intro-new {
  gap: 3em;
  padding-top: calc(6 * var(--world-unit));
  padding-bottom: calc(6 * var(--world-unit));
}
.level-intro.is-shell-lock .level-intro-new-preview {
  margin: 0;
}
.level-intro-moonbeam {
  position: relative;
  display: block;
  width: 180em;
  height: 108em;
  margin: 0;
  overflow: hidden;
}
.level-intro-moonbeam[hidden] {
  display: none;
}
.level-intro-moonbeam canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro.is-moonbeam .level-intro-new-brick-face,
.level-intro.is-moonbeam .level-intro-new-brick-icon,
.level-intro.is-moonbeam .level-intro-new-brick-live {
  display: none !important;
}
.level-intro.is-moonbeam .level-intro-new {
  gap: 3em;
  padding-top: calc(4 * var(--world-unit));
  padding-bottom: calc(4 * var(--world-unit));
}
.level-intro.is-moonbeam .level-intro-new-preview {
  margin: 0;
}
.mission-hud.is-moonbeam {
  max-width: calc(96 * var(--world-unit));
  padding: calc(3 * var(--world-unit)) calc(8 * var(--world-unit)) calc(3 * var(--world-unit));
  background: rgba(248, 244, 236, 0.9);
  color: #1c334c;
  font-size: calc(11.2 * var(--world-unit));
  font-weight: 800;
}
.mission-hud.is-moonbeam .mission-hud-icon {
  width: calc(18 * var(--world-unit));
  height: calc(18 * var(--world-unit));
}
.level-intro.is-flow-vortex .level-intro-new-brick-face,
.level-intro.is-flow-vortex .level-intro-new-brick-icon,
.level-intro.is-flow-vortex .level-intro-new-brick-live {
  display: none !important;
}
.level-intro.is-energy-cloud .level-intro-new-brick-face,
.level-intro.is-energy-cloud .level-intro-new-brick-icon,
.level-intro.is-energy-cloud .level-intro-new-brick-live,
.level-intro.is-energy-cloud #level-intro-watch,
.level-intro.is-energy-cloud #level-intro-power {
  display: none !important;
}
.level-intro-new-brick-face,
.level-intro-new-brick-icon {
  position: absolute;
  inset: 0;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
}
.level-intro-new-brick-face {
  inset: -18% -6%;
  background-size: cover;
}
.level-intro-new-brick-icon {
  left: 8%;
  right: 8%;
  top: 22%;
  bottom: 22%;
  background-size: contain;
  filter: saturate(1.28) contrast(1.18) drop-shadow(0 0 3em rgba(255, 255, 255, 0.85));
}
.level-intro-new-brick-live:not([hidden]) ~ .level-intro-new-brick-face,
.level-intro-new-brick-live:not([hidden]) ~ .level-intro-new-brick-icon,
.level-intro-new-brick:has(.level-intro-new-brick-live:not([hidden])) .level-intro-new-brick-face,
.level-intro-new-brick:has(.level-intro-new-brick-live:not([hidden])) .level-intro-new-brick-icon {
  visibility: hidden;
}
.level-intro-new-title {
  font-size: 13em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-transform: uppercase;
  color: #1a3348;
  text-shadow: 0 1em 3em rgba(255, 255, 255, 0.9);
}
.level-intro-new-note {
  font-size: 11.5em;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: #24384c;
}
.level-intro.is-golden-clarity .level-intro-card {
  padding-top: 14em;
  padding-bottom: 12em;
}
.level-intro-power.is-golden-clarity {
  gap: 2em;
  margin-top: calc(8 * var(--world-unit));
  padding: calc(6 * var(--world-unit)) calc(10 * var(--world-unit)) calc(6 * var(--world-unit));
}
.level-intro-power.is-golden-clarity .level-intro-new-preview {
  margin: 0;
}
.level-intro-power.is-golden-clarity .level-intro-new-note {
  font-size: 10.4em;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.level-intro.is-ghost-egg .level-intro-card {
  padding: 10em 16em 8em;
}
.level-intro.is-ghost-egg .level-intro-new {
  margin-top: calc(6 * var(--world-unit));
  gap: 2em;
  padding: calc(5 * var(--world-unit)) calc(8 * var(--world-unit)) calc(6 * var(--world-unit));
}
.level-intro.is-ghost-egg .level-intro-new-preview {
  margin: 0;
}
.level-intro.is-ghost-egg .level-intro-new-brick-live {
  width: 140em;
  height: auto;
}
.level-intro-egg-art {
  display: block;
  width: 34em;
  height: 40.25em;
  object-fit: contain;
  pointer-events: none;
}
.level-intro.is-ghost-egg .level-intro-hint {
  margin-top: calc(8 * var(--world-unit));
}
.level-intro.is-dewdrop .level-intro-new {
  margin-top: calc(10 * var(--world-unit));
  gap: 3em;
  padding: calc(8 * var(--world-unit)) calc(10 * var(--world-unit));
}
.level-intro.is-dewdrop .level-intro-new-preview {
  margin: 0;
}
.level-intro:not(.is-daily) .level-intro-deflector {
  display: grid;
  justify-items: center;
  gap: 3em;
  width: 100%;
  margin: calc(8 * var(--world-unit)) 0 0;
  padding: calc(8 * var(--world-unit)) calc(10 * var(--world-unit));
  border-radius: 14em;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.72) 0%, rgba(236, 246, 255, 0.42) 100%);
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, 0.88);
  text-align: center;
}
.level-intro:not(.is-daily) .level-intro-deflector-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8em;
  height: calc(36 * var(--world-unit));
}
.level-intro:not(.is-daily) .level-intro-deflector-orb {
  position: relative;
  width: calc(34 * var(--world-unit));
  height: calc(34 * var(--world-unit));
  flex: none;
}
.level-intro:not(.is-daily) .level-intro-deflector-orb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.level-intro:not(.is-daily) .level-intro-deflector-orb .is-active {
  animation: deflectorPreview 2.8s ease-in-out infinite;
}
.level-intro:not(.is-daily) .level-intro-deflector-arrow {
  width: 28em;
  height: 2em;
  border-radius: 99em;
  background: linear-gradient(90deg, rgba(170, 214, 232, 0.25), rgba(36, 88, 106, 0.72));
  position: relative;
}
.level-intro:not(.is-daily) .level-intro-deflector-arrow::after {
  content: "";
  position: absolute;
  right: -1em;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 3.5em solid transparent;
  border-bottom: 3.5em solid transparent;
  border-left: 6em solid rgba(36, 88, 106, 0.72);
  transform: translateY(-50%);
}
.level-intro:not(.is-daily) .level-intro-deflector-arrow.is-in {
  transform: rotate(-28deg);
}
.level-intro:not(.is-daily) .level-intro-deflector-arrow.is-out {
  transform: rotate(34deg);
}
.level-intro:not(.is-daily) .level-intro-deflector-title,
.level-intro:not(.is-daily) .level-intro-deflector-note {
  margin: 0;
}
.level-intro:not(.is-daily) .level-intro-deflector-title {
  font-size: 13em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a3348;
}
.level-intro:not(.is-daily) .level-intro-deflector-note {
  font-size: 11.5em;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #24384c;
}
.level-intro.is-dewdrop .level-intro-hint {
  margin-top: calc(10 * var(--world-unit));
}
.level-intro-hint {
  position: relative;
  z-index: 1;
  margin: calc(16 * var(--world-unit)) 0 0;
  padding: 0.35em 0.8em;
  font-size: 16em;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  color: #e07a00;
  transform-origin: center;
}
.level-intro-hint::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 118%;
  height: 2.6em;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 196, 40, 0.72) 0%, rgba(255, 160, 20, 0.4) 42%, rgba(255, 140, 0, 0) 72%);
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}
.level-intro.is-hold .level-intro-hint {
  animation: introTapPulse 1.5s ease-in-out infinite;
}
.level-intro.is-hold .level-intro-hint::before {
  animation: introTapHalo 1.5s ease-in-out infinite;
}
@keyframes introTapPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    color: #c56a00;
    text-shadow: 0 1px 0 rgba(255, 248, 220, 0.55);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
    color: #c56a00;
    text-shadow: 0 1px 0 rgba(255, 248, 220, 0.55);
  }
}
@keyframes introTapHalo {
  0%, 100% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.76;
    transform: translate(-50%, -50%) scale(1.08);
  }
}
.level-intro-mission {
  display: grid;
  justify-items: center;
  gap: 7em;
  margin: calc(18 * var(--world-unit)) 0 2em;
}
.level-intro-mission-kicker {
  font-size: 13em;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: #0b1c28;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}
.level-intro-mission-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  max-width: 16.5em;
  font-size: 16em;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #163044;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.level-intro-mission-line.is-wrapped {
  align-items: center;
}
#level-intro-mission-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28em;
  text-align: center;
}
.level-intro-mission-line.is-wrapped #level-intro-mission-text {
  align-items: flex-start;
  text-align: left;
}
.level-intro-mission-line.is-wrapped .mission-icon {
  margin-top: -0.05em;
}
.level-intro-mission-line .treasure-icon,
.level-intro-mission-line .mission-icon {
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
  flex: 0 0 auto;
}
.level-intro.is-final-chest .level-intro-mission {
  gap: 12em;
}
.level-intro.is-final-chest #level-intro-mission-text {
  width: 100%;
  gap: 0.2em;
}
.level-intro.is-final-chest .mission-row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.48em;
  text-align: center;
}
.level-intro.is-final-chest .level-intro-mission-line .treasure-icon--finalChest {
  width: calc(198 * var(--world-unit) * 0.65);
  height: auto;
  margin: 0.2em 0 0.04em;
  overflow: visible;
  border-radius: 0;
  filter: none;
  animation: none;
}
.level-intro.is-final-chest .treasure-icon--finalChest::before,
.level-intro.is-final-chest .treasure-icon--finalChest::after {
  content: none;
  display: none;
  animation: none;
}
.level-intro.is-final-chest .treasure-icon--finalChest .mission-icon {
  width: 100%;
  height: auto;
  filter: none;
  animation: none;
}
.level-intro-mission-line .treasure-icon .mission-icon {
  width: 100%;
  height: 100%;
}
.level-intro-mission-line:has(.treasure-icon--moon-pearl) {
  max-width: 18em;
}
.level-intro-mission-line .mission-row .treasure-icon--moon-pearl {
  width: calc(26 * var(--world-unit));
  height: calc(26 * var(--world-unit));
  overflow: visible;
  border-radius: 0;
  animation: none;
}
.level-intro-mission-line .treasure-icon--moon-pearl::before,
.level-intro-mission-line .treasure-icon--moon-pearl::after {
  display: none;
}
.level-intro-mission-line .treasure-icon--moon-pearl .mission-pearl {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro-watch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--world-unit));
  margin: calc(12 * var(--world-unit)) 0 0;
  max-width: calc(280 * var(--world-unit));
}
.level-intro-watch-brick {
  width: calc(78 * var(--world-unit));
  height: calc(78 * var(--world-unit));
  object-fit: contain;
  filter: drop-shadow(0 calc(4 * var(--world-unit)) calc(8 * var(--world-unit)) rgba(90, 40, 20, 0.16));
}
.level-intro-watch-note {
  margin: 0;
  max-width: 20em;
  font-size: 15em;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: #8a3418;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.level-intro-watch[hidden] {
  display: none;
}
.level-intro:not(.is-daily) .level-intro-sling {
  display: grid;
  justify-items: center;
  gap: 2em;
  width: 100%;
  margin: calc(8 * var(--world-unit)) 0 0;
  padding: 4em 8em 5em;
  border-radius: 14em;
  background-color: rgba(236, 250, 248, 0.42);
  border: 1em solid rgba(255, 255, 255, 0.55);
}
.level-intro:not(.is-daily) .level-intro-sling-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(36 * var(--world-unit));
}
.level-intro:not(.is-daily) .level-intro-sling-node {
  width: calc(34 * var(--world-unit));
  height: calc(34 * var(--world-unit));
  object-fit: contain;
  flex: none;
}
.level-intro:not(.is-daily) .level-intro-sling-field {
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 3em;
  margin: 0 2em;
  border-radius: 99em;
  background: linear-gradient(90deg, rgba(186, 236, 226, 0.2), rgba(255, 252, 244, 1), rgba(196, 214, 255, 0.27));
}
.level-intro:not(.is-daily) .level-intro-sling-pulse {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28%;
  border-radius: 99em;
  background: linear-gradient(90deg, rgba(186, 236, 226, 0), rgba(255, 252, 244, 0.95) 45%, rgba(168, 230, 224, 0.72) 70%, rgba(186, 236, 226, 0));
  animation: sling-intro-flow 2.6s ease-in-out infinite;
}
.level-intro:not(.is-daily) .level-intro-sling-title,
.level-intro:not(.is-daily) .level-intro-sling-note {
  margin: 0;
}
.level-intro:not(.is-daily) .level-intro-sling-title {
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #24584e;
}
.level-intro:not(.is-daily) .level-intro-sling-note {
  font-size: 10em;
  font-weight: 650;
  color: #3d5c56;
}
.level-intro.is-dense-intro .level-intro-card {
  padding: 10em 16em 12em;
}
.level-intro.is-dense-intro .level-intro-world {
  margin-bottom: calc(2 * var(--world-unit));
}
.level-intro.is-dense-intro .level-intro-number {
  margin-bottom: calc(2 * var(--world-unit));
}
.level-intro.is-dense-intro .level-intro-name {
  font-size: 26em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.level-intro.is-dense-intro .level-intro-reminders {
  gap: 4em;
  margin-top: 0;
}
.level-intro.is-dense-intro .level-intro-reminder {
  gap: 6em;
  padding: 4em 7em;
}
.level-intro.is-dense-intro .level-intro-reminder img {
  width: calc(34 * var(--world-unit));
  height: calc(34 * var(--world-unit));
}
.level-intro.is-dense-intro .level-intro-reminder .level-intro-zone.is-float,
.level-intro.is-dense-intro .level-intro-reminder .level-intro-zone.is-curve {
  width: calc(62 * var(--world-unit));
  height: auto;
}
.level-intro.is-dense-intro .level-intro-reminder .level-intro-zone img {
  width: 100%;
  height: 100%;
}
.level-intro.is-dense-intro .level-intro-reminder-title {
  font-size: 10em;
}
.level-intro.is-dense-intro .level-intro-reminder-note {
  font-size: 8.4em;
}
.level-intro.is-dense-intro .level-intro-line {
  margin-top: calc(4 * var(--world-unit));
}
.level-intro.is-dense-intro .level-intro-mission {
  gap: 4em;
  margin-top: calc(8 * var(--world-unit));
}
.level-intro-wacky-machine {
  display: flex;
  justify-content: center;
  margin: 1em auto 0;
  pointer-events: none;
}
.level-intro-wacky-machine[hidden] {
  display: none;
}
.level-intro-mega-bubble {
  display: grid;
  place-items: center;
  width: 84em;
  height: 84em;
  margin: 0.35em auto 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 238, 255, 0.72) 0%, rgba(214, 238, 255, 0.16) 58%, rgba(214, 238, 255, 0) 74%);
  pointer-events: none;
}
.level-intro-mega-bubble[hidden] {
  display: none;
}
.level-intro-mega-bubble img {
  width: 72em;
  height: 72em;
  object-fit: contain;
  filter: drop-shadow(0 0 8em rgba(120, 196, 255, 0.45));
}
.level-intro-wacky-machine canvas {
  width: 108em;
  height: 56em;
}
.level-intro.is-wacky-boss.is-dense-intro .level-intro-card {
  padding-top: 8em;
  padding-bottom: 8em;
}
.level-intro.is-wacky-boss.is-dense-intro .level-intro-mission {
  gap: 2em;
  margin-top: calc(4 * var(--world-unit));
}
.level-intro.is-wacky-boss.is-dense-intro .level-intro-reminders {
  gap: 3em;
}
.level-intro.is-dense-intro .level-intro-watch {
  gap: calc(4 * var(--world-unit));
  margin-top: calc(6 * var(--world-unit));
}
.level-intro.is-dense-intro .level-intro-watch-brick {
  width: calc(46 * var(--world-unit));
  height: calc(46 * var(--world-unit));
}
.level-intro.is-dense-intro .level-intro-watch-note {
  font-size: 12em;
}
.level-intro.is-dense-intro .level-intro-sling {
  margin-top: calc(6 * var(--world-unit));
  padding-top: 3em;
  padding-bottom: 4em;
}
.level-intro-finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 12em;
}
.level-intro-finale[hidden] {
  display: none;
}
.level-intro-finale-kicker {
  margin: 0 0 8em;
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: #24384c;
}
.level-intro-finale-kicker[hidden] {
  display: none;
}
.level-intro-finale-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8em;
}
.level-intro-finale-item {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--world-unit));
  font-size: 14em;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: #163044;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.level-intro-finale-item img {
  width: 1.7em;
  height: 1.7em;
  object-fit: contain;
  flex: 0 0 auto;
}
.level-intro-reminders {
  display: grid;
  justify-items: stretch;
  gap: 6em;
  width: 100%;
  margin-top: 2em;
}
.level-intro-reminders[data-kicker]::before {
  content: attr(data-kicker);
  justify-self: center;
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2a6d86;
}
.level-intro-reminders.is-kicker-spoken::before {
  color: #12384c;
}
.level-intro-reminder.is-spoken {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(214, 244, 255, 0.88) 100%);
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, 0.95), 0 0 0 1.5em rgba(72, 176, 214, 0.45);
}
.level-intro-mission.is-spoken .level-intro-mission-line,
.level-intro-mission.is-spoken #level-intro-mission-text {
  color: #12384c;
}
.level-intro-zone {
  position: relative;
  width: calc(62 * var(--world-unit));
  height: auto;
  border-radius: 8em;
  flex: 0 0 auto;
  overflow: hidden;
}
.level-intro-zone.is-float,
.level-intro-zone.is-curve {
  background: rgba(12, 32, 58, 0.72);
  box-shadow: inset 0 0 0 1em rgba(255, 255, 255, 0.42);
}
.level-intro-zone.is-float {
  aspect-ratio: 360 / 200;
}
.level-intro-zone.is-curve {
  aspect-ratio: 360 / 233;
}
.level-intro-reminder .level-intro-zone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  flex: none;
  pointer-events: none;
}
.level-intro-zone.is-gravity {
  width: calc(28 * var(--world-unit));
  height: calc(22 * var(--world-unit));
  background: linear-gradient(180deg, rgba(186, 164, 255, 0.35), rgba(98, 72, 196, 0.92));
}
.level-intro-zone.is-gravity::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -40%);
  border-left: 5em solid transparent;
  border-right: 5em solid transparent;
  border-top: 7em solid rgba(255, 255, 255, 0.94);
}
.level-intro-reverse {
  flex: 0 0 auto;
  min-width: calc(36 * var(--world-unit));
  font-size: 13em;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #6a46c8;
}
.level-intro-reminder {
  display: flex;
  align-items: center;
  gap: 8em;
  width: 100%;
  padding: 5em 8em;
  border-radius: 12em;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.78) 0%, rgba(226, 240, 255, 0.5) 100%);
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, 0.88);
}
.level-intro-reminder img {
  width: calc(28 * var(--world-unit));
  height: calc(28 * var(--world-unit));
  object-fit: contain;
  flex: 0 0 auto;
}
.level-intro-reminder.is-guardian-portrait {
  flex-direction: column;
  justify-content: center;
  gap: 4em;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.level-intro-reminder.is-guardian-portrait img {
  width: calc(208 * var(--world-unit));
  height: calc(202 * var(--world-unit));
  object-fit: contain;
  object-position: center center;
}
.level-intro-reminder.is-guardian-portrait .level-intro-reminder-copy {
  justify-items: center;
}
.level-intro-reminder.is-guardian-portrait .level-intro-reminder-note {
  font-size: 11em;
  text-align: center;
  color: #163044;
}
.level-intro-reminder.is-guardian-portrait.is-stir img {
  animation: guardianStir 0.34s ease-out;
}
@keyframes guardianStir {
  0% { transform: translate(0, 0) scale(1); filter: drop-shadow(0 0 0 rgba(214, 148, 58, 0)); }
  20% { transform: translate(-2px, 1px) scale(1.03); filter: drop-shadow(0 0 12px rgba(214, 148, 58, 0.72)); }
  48% { transform: translate(2px, -1px) scale(1.015); filter: drop-shadow(0 0 8px rgba(214, 148, 58, 0.4)); }
  74% { transform: translate(-1px, 0) scale(1.005); }
  100% { transform: translate(0, 0) scale(1); filter: none; }
}
.level-intro-reminder.is-falling-warning {
  justify-content: center;
  padding: 0 10em;
  background: transparent;
  box-shadow: none;
}
.level-intro-reminder.is-falling-warning .level-intro-reminder-note {
  font-size: 9em;
  letter-spacing: 0.06em;
  text-align: center;
  color: #8a4e1c;
}
.level-intro.is-guardian-intro .level-intro-name {
  display: none;
}
.level-intro.is-guardian-intro .level-intro-card {
  padding-top: 12em;
  padding-bottom: 12em;
}
.level-intro.is-guardian-intro .level-intro-mission {
  margin-top: calc(8 * var(--world-unit));
  gap: 4em;
}
.level-intro.is-guardian-intro .level-intro-mission-line {
  font-size: 18em;
  max-width: 14em;
}
.level-intro-reminder.is-switch img {
  width: calc(56 * var(--world-unit));
  height: calc(22 * var(--world-unit));
}
.level-intro-reminder-copy {
  display: grid;
  gap: 1em;
  min-width: 0;
}
.level-intro-reminder-title,
.level-intro-reminder-note {
  margin: 0;
}
.level-intro-reminder-title {
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: #163044;
}
.level-intro-reminder-note {
  font-size: 9.5em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: #3d5c74;
}
.level-intro-reminder-bubble {
  width: calc(48 * var(--world-unit));
  height: calc(48 * var(--world-unit));
  flex: 0 0 auto;
  display: block;
}
.level-intro-reminder-bubble-live {
  display: block;
  width: 100%;
  height: 100%;
}
.level-intro-bubble-row {
  display: flex;
  justify-content: center;
  gap: calc(18 * var(--world-unit));
  margin-top: calc(4 * var(--world-unit));
}
.level-intro-bubble-row .level-intro-bubble {
  width: calc(48 * var(--world-unit));
  height: calc(48 * var(--world-unit));
  border-radius: 50%;
  position: relative;
  opacity: 1;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 50% 58%, rgba(214, 232, 255, 0.55), rgba(255, 255, 255, 0.12) 68%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.96),
    inset 0 7px 8px rgba(255, 255, 255, 0.45),
    0 0 16px rgba(198, 226, 255, 0.78);
}
.level-intro-bubble-row .level-intro-bubble.is-gold {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 50% 56%, rgba(255, 228, 160, 0.98), rgba(226, 170, 72, 0.55) 46%, rgba(255, 248, 230, 0.16) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 244, 214, 0.96),
    inset 0 7px 8px rgba(255, 255, 255, 0.5),
    0 0 16px rgba(255, 206, 120, 0.55);
}
.level-intro-bubble-row .level-intro-bubble.is-gold::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  width: 46%;
  height: 32%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #fff6d4, #e2b34a 62%, #c48a28);
  box-shadow: 0 0 8px rgba(255, 214, 120, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.level-intro-bubble-row .level-intro-bubble.is-ghost {
  background:
    radial-gradient(circle at 32% 26%, rgba(244, 248, 255, 0.92), rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 50% 58%, rgba(78, 96, 168, 0.72), rgba(176, 164, 230, 0.38) 58%, rgba(214, 228, 255, 0.12) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(226, 236, 255, 0.92),
    inset 0 7px 8px rgba(255, 255, 255, 0.28),
    0 0 16px rgba(170, 186, 255, 0.55);
}
.level-intro-bubble-row .level-intro-bubble.is-ghost::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 40%;
  width: 18%;
  height: 26%;
  border-radius: 50%;
  background: rgba(236, 242, 255, 0.94);
  box-shadow: 11em -7em 0 rgba(214, 206, 255, 0.86), 22em 1em 0 rgba(232, 244, 255, 0.94);
}
.level-intro.is-preview .level-intro-card {
  padding: 14em 16em 14em;
}
.level-intro.is-preview .level-intro-name {
  font-size: 32em;
}
.level-intro.is-preview .level-intro-mission {
  margin-top: calc(12 * var(--world-unit));
  gap: 6em;
}
.level-intro.is-preview .level-intro-hint {
  margin-top: calc(12 * var(--world-unit));
}
.level-intro-finale.is-power-row {
  margin-top: 10em;
  padding: 8em 4em 7em;
  border-radius: 14em;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.66) 0%, rgba(236, 246, 255, 0.4) 100%);
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, 0.88);
}
.level-intro-finale.is-power-row .level-intro-finale-kicker {
  margin-bottom: 6em;
  font-size: 11em;
}
.level-intro-finale.is-power-row .level-intro-finale-list {
  width: 100%;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4em;
}
.level-intro-finale.is-power-row .level-intro-finale-item {
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 4em;
  min-width: 0;
  font-size: 8.6em;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
}
.level-intro-finale.is-power-row .level-intro-finale-item img {
  width: calc(28 * var(--world-unit));
  height: calc(28 * var(--world-unit));
}
.level-intro-finale-live {
  display: block;
  flex: 0 0 auto;
}
.level-intro.is-whispering-reach .level-intro-finale.is-power-row,
.level-intro.is-twin-stream .level-intro-finale.is-power-row,
.level-intro.is-locked-tide .level-intro-finale.is-power-row {
  width: max-content;
  max-width: 100%;
  margin-top: 4em;
  margin-left: auto;
  margin-right: auto;
  padding: 3em 12em 4em;
}
.level-intro.is-whispering-reach .level-intro-finale.is-power-row .level-intro-finale-kicker,
.level-intro.is-twin-stream .level-intro-finale.is-power-row .level-intro-finale-kicker,
.level-intro.is-locked-tide .level-intro-finale.is-power-row .level-intro-finale-kicker {
  margin-bottom: calc(2 * var(--world-unit));
}
.level-intro.is-whispering-reach .level-intro-finale.is-power-row .level-intro-finale-item,
.level-intro.is-twin-stream .level-intro-finale.is-power-row .level-intro-finale-item,
.level-intro.is-locked-tide .level-intro-finale.is-power-row .level-intro-finale-item {
  flex: 0 0 auto;
  gap: calc(2 * var(--world-unit));
}
.level-intro.is-whispering-reach .level-intro-finale.is-power-row .level-intro-finale-item img {
  width: calc(38 * var(--world-unit));
  height: calc(38 * var(--world-unit));
}
.level-intro.is-twin-stream .level-intro-finale.is-power-row .level-intro-finale-item img {
  width: calc(34 * var(--world-unit));
  height: calc(34 * var(--world-unit));
}
.level-intro.is-whispering-reach .level-intro-reminders {
  gap: 4em;
  margin-top: 4em;
}
.level-intro.is-whispering-reach .level-intro-reminder.is-rushstone img {
  width: calc(36 * var(--world-unit));
  height: calc(36 * var(--world-unit));
}
.level-intro.is-whispering-reach .level-intro-deflector {
  gap: 2em;
  margin-top: calc(4 * var(--world-unit));
  padding-top: calc(4 * var(--world-unit));
  padding-bottom: calc(4 * var(--world-unit));
}
.level-intro.is-whispering-reach .level-intro-deflector-art {
  height: calc(30 * var(--world-unit));
}
.level-intro.is-whispering-reach .level-intro-deflector-orb {
  width: calc(30 * var(--world-unit));
  height: calc(30 * var(--world-unit));
}
.level-intro.is-twin-stream .level-intro-reminders {
  gap: calc(4 * var(--world-unit));
  margin-top: calc(6 * var(--world-unit));
}
.level-intro.is-twin-stream .level-intro-reminder {
  padding: calc(4 * var(--world-unit)) calc(8 * var(--world-unit));
}
.level-intro.is-twin-stream .level-intro-reminder-currents {
  width: calc(96 * var(--world-unit));
  height: calc(52 * var(--world-unit));
}
.level-intro.is-locked-tide .level-intro-mission {
  margin-top: calc(14 * var(--world-unit));
}
.level-intro.is-locked-tide .level-intro-reminders {
  gap: calc(3 * var(--world-unit));
  margin-top: calc(8 * var(--world-unit));
}
.level-intro.is-locked-tide .level-intro-reminder {
  padding: calc(3 * var(--world-unit)) calc(8 * var(--world-unit));
  border-radius: calc(10 * var(--world-unit));
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.5) 0%, rgba(226, 240, 255, 0.28) 100%);
}
.level-intro.is-locked-tide .level-intro-reminder img {
  width: calc(26 * var(--world-unit));
  height: calc(26 * var(--world-unit));
}
.level-intro.is-locked-tide .level-intro-finale.is-power-row .level-intro-finale-item img {
  width: calc(58 * var(--world-unit));
  height: calc(58 * var(--world-unit));
}
.level-intro.is-locked-tide .level-intro-hint {
  margin-top: calc(14 * var(--world-unit));
}
.level-intro.is-rising-halo .level-intro-finale.is-power-row {
  width: max-content;
  max-width: 100%;
  margin-top: 4em;
  margin-left: auto;
  margin-right: auto;
  padding: 3em 14em 4em;
}
.level-intro.is-rising-halo .level-intro-finale.is-power-row .level-intro-finale-kicker {
  margin-bottom: calc(2 * var(--world-unit));
}
.level-intro.is-rising-halo .level-intro-finale.is-power-row .level-intro-finale-list {
  justify-content: center;
  gap: calc(18 * var(--world-unit));
}
.level-intro.is-rising-halo .level-intro-finale.is-power-row .level-intro-finale-item {
  flex: 0 0 auto;
  gap: calc(2 * var(--world-unit));
}
.level-intro.is-rising-halo .level-intro-finale.is-power-row .level-intro-finale-item img {
  width: calc(44 * var(--world-unit));
  height: calc(44 * var(--world-unit));
}
.level-intro.is-rising-halo .level-intro-finale.is-power-row .level-intro-finale-item.is-bubble-parade img {
  width: calc(54 * var(--world-unit));
  height: calc(54 * var(--world-unit));
  filter: drop-shadow(0 0 8px rgba(170, 214, 255, 0.95));
}
.level-intro-garden {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6em;
  width: 100%;
  margin-top: 12em;
}
.level-intro-garden[hidden] {
  display: none;
}
.level-intro-garden-kicker,
.level-intro-garden-line {
  margin: 0;
}
.level-intro-garden-kicker {
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #8a4a68;
}
.level-intro-garden-line {
  max-width: 280em;
  font-size: 13em;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #163044;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.level-intro-garden-stage {
  position: relative;
  width: 168em;
  height: 78em;
  margin-top: 1em;
}
.level-intro-garden-flower {
  position: absolute;
  display: block;
}
.level-intro-garden-flower.is-a {
  left: 0;
  top: 0;
  width: 44em;
  height: 44em;
}
.level-intro-garden-flower.is-b {
  left: 38em;
  top: 22em;
  width: 54em;
  height: 54em;
}
.level-intro-garden-flower.is-c {
  left: 86em;
  top: 2em;
  width: 38em;
  height: 38em;
}
.level-intro-garden-reward {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.level-intro-garden-plus {
  font-size: 10em;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #9a6230;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
@keyframes flowerFallIn {
  from { opacity: 0; transform: translateY(-10em); }
  to { opacity: 1; transform: translateY(0); }
}
.level-intro-garden.is-falling .level-intro-garden-flower,
.level-intro-garden.is-falling .level-intro-garden-reward {
  animation: flowerFallIn 0.85s ease-out both;
}
.level-intro-garden.is-falling .level-intro-garden-flower.is-b { animation-delay: 0.1s; }
.level-intro-garden.is-falling .level-intro-garden-flower.is-c { animation-delay: 0.2s; }
.level-intro-garden.is-falling .level-intro-garden-reward { animation-delay: 0.28s; }
.level-intro.is-flower-bonus .level-intro-card {
  padding-top: 14em;
  padding-bottom: 12em;
}
.level-intro.is-flower-bonus .level-intro-mission {
  margin-top: calc(8 * var(--world-unit));
  margin-bottom: 0;
  gap: 4em;
}
.level-intro.is-flower-bonus .level-intro-garden {
  gap: 5em;
  margin-top: 8em;
  padding: 8em 10em 8em;
  border-radius: 16em;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.82) 0%, rgba(255, 226, 210, 0.46) 100%);
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, 0.9);
}
.level-intro.is-flower-bonus .level-intro-garden-kicker {
  font-size: 12em;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #9a6230;
}
.level-intro.is-flower-bonus .level-intro-garden-line {
  max-width: 16em;
  text-align: center;
}
.level-intro.is-flower-bonus .level-intro-finale {
  margin-top: 8em;
  padding: 7em 10em 4em;
  border-radius: 14em;
  background: rgba(255, 252, 246, 0.62);
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, 0.88);
}
.level-intro.is-flower-bonus .level-intro-finale-kicker {
  margin-bottom: calc(11 * var(--world-unit));
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}
.level-intro.is-flower-bonus .level-intro-finale-list {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--world-unit));
}
.level-intro.is-flower-bonus .level-intro-finale-item {
  font-size: 12em;
  gap: calc(6 * var(--world-unit));
  white-space: nowrap;
}
.level-intro.is-flower-bonus .level-intro-finale-item img {
  width: calc(26 * var(--world-unit));
  height: calc(26 * var(--world-unit));
}
.level-intro.is-flower-bonus .level-intro-finale-item.is-wide img {
  width: calc(48 * var(--world-unit));
  height: calc(20 * var(--world-unit));
}
.level-intro.is-flower-bonus .level-intro-hint {
  margin-top: calc(8 * var(--world-unit));
}
.level-intro-garden-stage .mission-icon {
  width: 26em;
  height: 26em;
  object-fit: contain;
}
.level-intro-bubbles {
  position: relative;
  width: 168em;
  height: 88em;
  margin: 1em 0 0;
}
.level-intro-bubbles[hidden] {
  display: none;
}
.level-intro-bubble {
  position: absolute;
  display: block;
  object-fit: contain;
  opacity: 0;
}
.level-intro-bubble.is-center {
  left: 56em;
  top: 16em;
  width: 54em;
  height: 54em;
  z-index: 2;
  --bubble-end: 1;
  filter: hue-rotate(328deg) saturate(1.35) drop-shadow(0 0 10em rgba(255, 176, 206, 0.55));
}
.level-intro-bubble.is-mint {
  left: 8em;
  top: 8em;
  width: 34em;
  height: 34em;
  --bubble-end: 0.92;
  filter: hue-rotate(108deg) saturate(1.25) drop-shadow(0 0 8em rgba(170, 240, 210, 0.5));
}
.level-intro-bubble.is-lavender {
  right: 6em;
  top: 4em;
  width: 32em;
  height: 32em;
  --bubble-end: 0.9;
  filter: hue-rotate(265deg) saturate(1.3) drop-shadow(0 0 8em rgba(196, 176, 255, 0.5));
}
.level-intro-bubble.is-peach {
  left: 34em;
  bottom: 0;
  width: 30em;
  height: 30em;
  --bubble-end: 0.9;
  filter: hue-rotate(22deg) saturate(1.28) drop-shadow(0 0 8em rgba(255, 196, 150, 0.48));
}
@keyframes bubbleFloatIn {
  from { opacity: 0; transform: translateY(7em); }
  to { opacity: var(--bubble-end, 0.94); transform: translateY(0); }
}
.level-intro-power.is-bubble-in .level-intro-bubble {
  animation: bubbleFloatIn 1.5s ease-out both;
}
.level-intro-power.is-bubble-in .level-intro-bubble.is-mint { animation-delay: 0.12s; }
.level-intro-power.is-bubble-in .level-intro-bubble.is-lavender { animation-delay: 0.24s; }
.level-intro-power.is-bubble-in .level-intro-bubble.is-peach { animation-delay: 0.36s; }
.level-intro-power.is-bubble-parade {
  gap: 3em;
  margin-top: calc(10 * var(--world-unit));
  padding-bottom: calc(8 * var(--world-unit));
}
.level-intro-power.is-bubble-parade .level-intro-new-preview {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .level-intro-garden.is-falling .level-intro-garden-flower,
  .level-intro-garden.is-falling .level-intro-garden-reward,
  .level-intro-power.is-bubble-in .level-intro-bubble {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.level-intro-moving {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8em;
  margin-top: 8em;
}
.level-intro-moving-title,
.level-intro-moving-note {
  flex: 1 0 100%;
}
.level-intro-moving[hidden] {
  display: none;
}
.level-intro-moving-brick {
  width: 42em;
  height: 26em;
  object-fit: contain;
}
.level-intro-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6em;
  margin-top: 10em;
}
.level-intro-switch[hidden] {
  display: none;
}
.level-intro-switch-brick {
  width: 92em;
  height: 58em;
  object-fit: contain;
  filter: drop-shadow(0 6em 10em rgba(120, 36, 48, 0.18));
}
.level-intro-switch-caption {
  margin: 0;
  color: #163044;
  font-size: 15em;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
}
.level-intro-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8em;
  margin-top: 12em;
}
.level-intro-gate[hidden] {
  display: none;
}
#level-intro-midas .treasure-icon,
#level-intro-midas .mission-icon {
  width: 34em;
  height: 34em;
  object-fit: contain;
}
.level-intro-gate-title,
.level-intro-gate-note {
  margin: 0;
  color: #163044;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
}
.level-intro-gate-title {
  font-size: 13em;
  letter-spacing: 0.12em;
  color: #6d5a92;
}
.level-intro-gate-note {
  max-width: 260em;
  font-size: 12em;
  letter-spacing: 0.06em;
}
.level-intro-gate-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10em;
}
.level-intro-gate-switch,
.level-intro-gate-stone {
  width: 54em;
  height: 34em;
  object-fit: contain;
}
.level-intro-breeze-mark {
  width: 86em;
  height: 36em;
  object-fit: contain;
}
.level-intro-gate-arrow {
  position: relative;
  width: 22em;
  height: 3em;
  border-radius: 99em;
  background: #c9b6e6;
}
.level-intro-gate-arrow::after {
  content: "";
  position: absolute;
  right: -2em;
  top: 50%;
  transform: translateY(-50%);
  border-left: 8em solid #c9b6e6;
  border-top: 6em solid transparent;
  border-bottom: 6em solid transparent;
}
.mission-hud.is-icon {
  max-width: none;
  padding: calc(3 * var(--world-unit));
}
.mission-hud.is-done {
  box-shadow:
    0 0 calc(10 * var(--world-unit)) rgba(214, 186, 240, 0.9),
    0 calc(2 * var(--world-unit)) calc(8 * var(--world-unit)) rgba(30, 48, 72, 0.1);
}
.mission-hud.is-icons {
  gap: calc(6 * var(--world-unit));
  max-width: none;
  padding: calc(3 * var(--world-unit)) calc(6 * var(--world-unit));
}
.mission-hud.is-icons .mission-hud-icon {
  opacity: 0.42;
  filter: saturate(0.65);
}
.mission-hud.is-icons .mission-hud-icon.is-done {
  opacity: 1;
  filter: drop-shadow(0 0 calc(3 * var(--world-unit)) rgba(232, 196, 120, 0.95));
}
.treasure-icon[hidden] {
  display: none;
}
.treasure-icon {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border-radius: 8px;
  isolation: isolate;
}
.treasure-icon::before,
.treasure-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.treasure-icon::before {
  width: 18%;
  height: 18%;
  right: 12%;
  top: 16%;
  border-radius: 50%;
  background: rgba(255, 252, 245, 0.95);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: treasureSpark 3.2s ease-in-out infinite;
}
.treasure-icon::after {
  inset: -30% -60%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 252, 245, 0.0) 46%, rgba(255, 255, 255, 0.72) 50%, rgba(210, 236, 255, 0.35) 54%, transparent 60%);
  transform: translateX(-70%);
  animation: treasureSweep 3.2s ease-in-out infinite;
}
.treasure-icon--gold::before {
  background: rgba(255, 236, 196, 0.95);
  box-shadow: 0 0 4px rgba(255, 210, 120, 0.7);
  animation-delay: 0.55s;
}
.treasure-icon--gold::after {
  background: linear-gradient(115deg, transparent 42%, rgba(255, 228, 170, 0) 46%, rgba(255, 248, 230, 0.78) 50%, rgba(255, 196, 110, 0.4) 54%, transparent 60%);
  animation-delay: 0.45s;
}
.treasure-icon--diamond {
  animation: treasurePulseCool 3.2s ease-in-out infinite;
}
.treasure-icon--gold {
  animation: treasurePulseWarm 3.2s ease-in-out infinite;
  animation-delay: 0.4s;
}
.treasure-icon--key::before {
  animation-delay: 0.2s;
}
.treasure-icon--key::after {
  animation-delay: 0.15s;
}
.treasure-icon--chest::before {
  background: rgba(255, 228, 186, 0.95);
  animation-delay: 0.7s;
}
.treasure-icon--chest::after {
  background: linear-gradient(115deg, transparent 42%, rgba(255, 228, 170, 0) 46%, rgba(255, 248, 230, 0.78) 50%, rgba(255, 196, 110, 0.4) 54%, transparent 60%);
  animation-delay: 0.65s;
}
.treasure-icon--chest {
  animation: treasurePulseWarm 3.2s ease-in-out infinite;
  animation-delay: 0.7s;
}
.treasure-icon--sanctuary::before {
  background: rgba(255, 248, 236, 0.92);
  box-shadow: 0 0 4px rgba(255, 220, 180, 0.45);
  animation-delay: 0.9s;
}
.treasure-icon--sanctuary::after {
  background: linear-gradient(115deg, transparent 42%, rgba(255, 244, 220, 0) 46%, rgba(255, 252, 245, 0.7) 50%, rgba(230, 214, 255, 0.28) 54%, transparent 60%);
  animation-delay: 0.85s;
}
.mission-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.38em;
  line-height: 1.15;
}
.mission-row .treasure-icon,
.mission-row .mission-icon {
  width: 1.35em;
  height: 1.35em;
}
@keyframes treasureSweep {
  0%, 64% { transform: translateX(-70%); opacity: 0; }
  72% { opacity: 1; }
  88% { transform: translateX(70%); opacity: 0; }
  100% { transform: translateX(70%); opacity: 0; }
}
@keyframes treasureSpark {
  0%, 70%, 100% { opacity: 0; }
  78%, 84% { opacity: 0.9; }
}
@keyframes treasurePulseCool {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(186, 230, 255, 0)); }
  76% { filter: drop-shadow(0 0 3px rgba(186, 230, 255, 0.45)); }
}
@keyframes treasurePulseWarm {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 196, 110, 0)); }
  76% { filter: drop-shadow(0 0 3px rgba(255, 196, 110, 0.4)); }
}
.complete-story-gem-wrap.treasure-icon {
  overflow: hidden;
  border-radius: 6px;
}
.level-intro.is-daily .level-intro-card {
  gap: 0;
  padding: 16em 20em 18em;
}
.level-intro.is-daily .level-intro-world {
  margin: 0 0 calc(6 * var(--world-unit));
  font-size: 11em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #8a6244;
  text-shadow: none;
}
.level-intro.is-daily .level-intro-number {
  margin: 0 0 calc(4 * var(--world-unit));
  font-size: 11em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  color: #6a4630;
  text-shadow: none;
}
.level-intro.is-daily .level-intro-name {
  margin: 0;
  font-size: 32em;
  font-weight: 800;
  line-height: 1.08;
  color: #2c1c12;
  text-shadow:
    0 1em 2em rgba(255, 255, 255, 0.88),
    0 2em 10em rgba(62, 36, 18, 0.12);
}
.level-intro.is-daily .level-intro-line {
  margin-top: calc(5 * var(--world-unit));
  color: #5c4030;
  font-style: italic;
  font-weight: 650;
  line-height: 1.25;
  text-shadow: none;
}
.level-intro.is-daily .level-intro-mission,
.level-intro.is-daily .level-intro-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4em;
  width: 100%;
  margin: 12em 0 0;
  padding: 8em 12em 9em;
  border-radius: 16em;
  background-color: #fff8f1;
  background-image: linear-gradient(180deg, #fffdf9 0%, #fff1e2 100%);
  border: 1em solid #fff;
  box-shadow: inset 0 1em 0 #fff;
  text-align: center;
}
.level-intro.is-daily .level-intro-mission-kicker {
  margin: 0;
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  color: #8a6244;
  text-shadow: none;
}
.level-intro.is-daily .level-intro-mission-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  margin: 0;
  max-width: none;
  font-size: 15em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #24180f;
  text-align: center;
  text-shadow: none;
}
.level-intro.is-daily .level-intro-mission-line .mission-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
  margin: 0;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1;
  letter-spacing: inherit;
  color: inherit;
}
.level-intro.is-daily .level-intro-reward .mission-row {
  font-weight: 900;
  color: #8a4514;
  text-shadow: 0 0 8em rgba(232, 154, 58, 0.55);
}
.level-intro.is-daily .level-intro-feature {
  display: grid;
  justify-items: center;
  gap: 2em;
  width: 100%;
  margin: 12em 0 0;
  padding: 8em 10em 9em;
  border-radius: 16em;
  background-color: #fff8f1;
  background-image: linear-gradient(180deg, #fffdf9 0%, #fff1e2 100%);
  border: 1em solid #fff;
  box-shadow: inset 0 1em 0 #fff;
  text-align: center;
}
.level-intro.is-daily .level-intro-feature-kicker,
.level-intro.is-daily .level-intro-feature-title,
.level-intro.is-daily .level-intro-feature-note {
  margin: 0;
}
.level-intro.is-daily .level-intro-feature-kicker {
  font-size: 10em;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: #8a6244;
}
.level-intro.is-daily .level-intro-feature-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(36 * var(--world-unit));
}
.level-intro.is-daily .level-intro-feature-live {
  display: block;
  width: auto;
  height: auto;
}
.level-intro.is-daily .level-intro-feature-rule {
  display: grid;
  place-items: center;
  width: calc(28 * var(--world-unit));
  height: calc(28 * var(--world-unit));
  border-radius: 999em;
  background-color: #fff4e4;
  border: 1.2em solid #f0c48a;
  color: #a85a16;
  font-size: 16em;
  font-weight: 900;
  line-height: 1;
}
.level-intro.is-daily .level-intro-feature-rule.is-heart {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  font-size: 1.9em;
}
.level-intro.is-daily .level-intro-feature-heart {
  flex: none;
}
.level-intro-feature-rule[hidden],
.level-intro-feature-live[hidden] {
  display: none !important;
}
.level-intro.is-daily .level-intro-feature-title {
  font-size: 13em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-transform: uppercase;
  color: #2c1c12;
}
.level-intro.is-daily .level-intro-feature-note {
  font-size: 11em;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.28;
  color: #5c4030;
}
.level-intro-feature-vortex[hidden] {
  display: none !important;
}
.level-intro.is-daily .level-intro-feature-vortex {
  display: block;
  width: calc(36 * var(--world-unit));
  height: calc(36 * var(--world-unit));
  object-fit: contain;
}
.level-intro-feature-extra[hidden],
.level-intro-bastion-preview[hidden],
.level-intro-feature-extra-live[hidden] {
  display: none !important;
}
.level-intro.is-daily .level-intro-feature-extra-live {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.level-intro.is-daily .level-intro-feature-extra {
  display: grid;
  justify-items: center;
  gap: 1.5em;
  width: 100%;
  margin-top: 3em;
  padding-top: 5em;
  border-top: 1em solid rgba(196, 148, 96, 0.28);
}
.level-intro.is-daily .level-intro-feature-extra-title,
.level-intro.is-daily .level-intro-feature-extra-note {
  margin: 0;
}
.level-intro.is-daily .level-intro-feature-extra-title {
  font-size: 10em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-transform: uppercase;
  color: #8a6244;
}
.level-intro.is-daily .level-intro-feature-extra-note {
  font-size: 9.5em;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #7a5a42;
}
.level-intro-feature-rows[hidden] {
  display: none !important;
}
.level-intro.is-friday .level-intro-feature {
  order: 2;
  gap: 5em;
  margin-top: 8em;
  padding: 7em 8em 8em;
}
.level-intro.is-friday .level-intro-reward {
  order: 3;
  margin-top: 8em;
}
.level-intro.is-friday .level-intro-hint {
  order: 4;
}
.level-intro.is-friday .level-intro-feature-preview,
.level-intro.is-friday .level-intro-feature-title,
.level-intro.is-friday .level-intro-feature-note,
.level-intro.is-friday .level-intro-feature-extra {
  display: none !important;
}
.level-intro.is-friday .level-intro-feature-rows {
  display: grid;
  gap: 5em;
  width: 100%;
}
.level-intro.is-friday .level-intro-feature-row {
  display: grid;
  grid-template-columns: 76em minmax(0, 1fr);
  align-items: center;
  gap: 8em;
  width: 100%;
  padding: 4em 5em;
  border-radius: 12em;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1em rgba(255, 255, 255, 0.9);
  text-align: left;
}
.level-intro.is-friday .level-intro-feature-row-icon {
  display: grid;
  place-items: center;
  width: 76em;
  height: 34em;
}
.level-intro.is-friday .level-intro-feature-row-title,
.level-intro.is-friday .level-intro-feature-row-note {
  margin: 0;
}
.level-intro.is-friday .level-intro-feature-row-title {
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2c1c12;
}
.level-intro.is-friday .level-intro-feature-row-note {
  margin-top: 1.5em;
  font-size: 9.5em;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-transform: none;
  color: #5c4030;
}
.level-intro.is-friday #level-intro-friday-bomb {
  display: block !important;
  width: 62em !important;
  height: 21em !important;
}
.level-intro.is-friday .level-intro-growth-mark {
  position: relative;
  width: 70em;
  height: 32em;
}
.level-intro.is-friday .level-intro-growth-mark img {
  position: absolute;
  width: 40em;
  height: 14em;
  object-fit: contain;
  filter: drop-shadow(0 0.7em 0 rgba(72, 42, 18, 0.16));
}
.level-intro.is-friday .level-intro-growth-mark img:nth-child(1) {
  left: 0;
  bottom: 0;
}
.level-intro.is-friday .level-intro-growth-mark img:nth-child(2) {
  left: 14em;
  bottom: 8em;
}
.level-intro.is-friday .level-intro-growth-mark img:nth-child(3) {
  left: 28em;
  bottom: 16em;
}
.level-intro.is-friday .level-intro-friday-breeze {
  display: block;
  width: 70em;
  height: 28em;
  object-fit: contain;
}
.level-intro.is-daily .level-intro-bastion-preview {
  position: relative;
  width: 36em;
  height: 32em;
  margin-bottom: 1em;
}
.level-intro.is-daily .level-intro-bastion-brick {
  position: absolute;
  left: 4em;
  top: 0;
  width: 28em;
  height: 10em;
  border-radius: 3em;
  background: linear-gradient(180deg, #ffe6bc 0%, #e39a42 100%);
  box-shadow: 0 1em 0 rgba(168, 104, 36, 0.28);
  animation: bastion-drop 2.6s ease-in infinite;
}
.level-intro.is-daily .level-intro-bastion-arrow {
  position: absolute;
  left: 14em;
  top: 12em;
  width: 0;
  height: 0;
  border-left: 4em solid transparent;
  border-right: 4em solid transparent;
  border-top: 6em solid #c4843a;
  animation: bastion-arrow 2.6s ease-in infinite;
}
@keyframes bastion-drop {
  0%, 16% { transform: translateY(0); }
  42%, 70% { transform: translateY(14em); }
  88%, 100% { transform: translateY(0); }
}
@keyframes bastion-arrow {
  0%, 14% { opacity: 0.25; transform: translateY(0); }
  30%, 42% { opacity: 0.9; transform: translateY(2em); }
  70%, 100% { opacity: 0.15; transform: translateY(8em); }
}
.level-intro.is-daily .level-intro-life {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  margin: 10em 0 0;
}
.level-intro.is-daily .level-intro-life-row {
  display: inline-flex;
  align-items: center;
  gap: 5em;
}
.level-intro.is-daily .level-intro-life-heart.hud-heart {
  flex: none;
  width: 16em;
  height: 15em;
}
.level-intro.is-daily .level-intro-life-heart .hud-heart-icon {
  width: 16em;
  height: 14em;
}
.level-intro.is-daily .level-intro-life-label {
  font-size: 12em;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2c1c12;
}
.level-intro.is-daily .level-intro-life-note {
  margin: 0;
  font-size: 10em;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #5c4030;
}
.level-intro.is-daily .level-intro-feature-cloud-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(118 * var(--world-unit));
  height: calc(70 * var(--world-unit));
  overflow: hidden;
}
.level-intro.is-daily .level-intro-feature-cloud {
  width: calc(118 * var(--world-unit));
  height: calc(118 * var(--world-unit));
  flex: none;
  object-fit: cover;
  object-position: center;
}
.level-intro.is-daily .level-intro-deflector {
  display: grid;
  justify-items: center;
  gap: 0.6em;
  width: 100%;
  margin: 6em 0 0;
  padding: 4em 8em 5em;
  border-radius: 14em;
  background-color: rgba(236, 250, 248, 0.42);
  border: 1em solid rgba(255, 255, 255, 0.55);
  text-align: center;
}
.level-intro.is-daily .level-intro-deflector-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4em;
  height: calc(36 * var(--world-unit));
}
.level-intro.is-daily .level-intro-deflector-orb {
  position: relative;
  width: calc(34 * var(--world-unit));
  height: calc(34 * var(--world-unit));
  flex: none;
}
.level-intro.is-daily .level-intro-deflector-orb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.level-intro.is-daily .level-intro-deflector-orb .is-active {
  animation: deflectorPreview 2.8s ease-in-out infinite;
}
@keyframes deflectorPreview {
  0%, 68%, 100% { opacity: 0; }
  76%, 90% { opacity: 1; }
}
.level-intro.is-daily .level-intro-deflector-arrow {
  width: 22em;
  height: 2em;
  border-radius: 99em;
  background: linear-gradient(90deg, rgba(170, 230, 226, 0.2), rgba(255, 252, 244, 0.95));
  position: relative;
}
.level-intro.is-daily .level-intro-deflector-arrow::after {
  content: "";
  position: absolute;
  right: -1em;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 3.5em solid transparent;
  border-bottom: 3.5em solid transparent;
  border-left: 6em solid rgba(255, 252, 244, 0.95);
  transform: translateY(-50%);
}
.level-intro.is-daily .level-intro-deflector-arrow.is-in {
  transform: rotate(-32deg);
}
.level-intro.is-daily .level-intro-deflector-arrow.is-out {
  transform: rotate(38deg);
}
.level-intro.is-daily .level-intro-deflector-title,
.level-intro.is-daily .level-intro-deflector-note {
  margin: 0;
}
.level-intro.is-daily .level-intro-deflector-title {
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #24586a;
}
.level-intro.is-daily .level-intro-deflector-note {
  font-size: 10em;
  font-weight: 650;
  color: #3d5c66;
}
.level-intro.is-daily .level-intro-sling {
  display: grid;
  justify-items: center;
  gap: 1em;
  width: 100%;
  margin: 6em 0 0;
  padding: 5em 8em 6em;
  border-radius: 14em;
  background-color: rgba(236, 250, 248, 0.42);
  border: 1em solid rgba(255, 255, 255, 0.55);
}
.level-intro.is-daily .level-intro-sling-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(44 * var(--world-unit));
}
.level-intro.is-daily .level-intro-sling-node {
  width: calc(42.5 * var(--world-unit));
  height: calc(42.5 * var(--world-unit));
  object-fit: contain;
  flex: none;
}
.level-intro.is-daily .level-intro-sling-field {
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 3.2em;
  margin: 0 2em;
  border-radius: 99em;
  background: linear-gradient(90deg, rgba(186, 236, 226, 0.2), rgba(255, 252, 244, 1), rgba(196, 214, 255, 0.27));
}
.level-intro.is-daily .level-intro-sling-pulse {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28%;
  border-radius: 99em;
  background: linear-gradient(90deg, rgba(186, 236, 226, 0), rgba(255, 252, 244, 0.95) 45%, rgba(168, 230, 224, 0.72) 70%, rgba(186, 236, 226, 0));
  animation: sling-intro-flow 2.6s ease-in-out infinite;
}
@keyframes sling-intro-flow {
  0% { transform: translateX(-30%); opacity: 0; }
  10% { opacity: 0.95; }
  64% { transform: translateX(280%); opacity: 0.95; }
  76% { opacity: 0; }
  100% { transform: translateX(280%); opacity: 0; }
}
.level-intro.is-daily .level-intro-sling-title,
.level-intro.is-daily .level-intro-sling-note {
  margin: 0;
}
.level-intro.is-daily .level-intro-sling-title {
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #24584e;
}
.level-intro.is-daily .level-intro-sling-note {
  font-size: 10em;
  font-weight: 650;
  color: #3d5c56;
}
.level-intro.is-daily .level-intro-pulse {
  display: grid;
  justify-items: center;
  gap: 1.5em;
  width: 100%;
  margin: 8em 0 0;
  padding: 6em 8em 7em;
  border-radius: 16em;
  background-color: rgba(236, 250, 248, 0.55);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(214, 242, 236, 0.46) 100%);
  border: 1em solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1em 0 rgba(255, 255, 255, 0.8),
    0 8em 18em rgba(120, 176, 168, 0.1);
  backdrop-filter: blur(10px);
  text-align: center;
}
.level-intro.is-daily .level-intro-pulse-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(54 * var(--world-unit));
  padding: 0 calc(2 * var(--world-unit));
  border-radius: 14em;
  background-color: rgba(198, 232, 226, 0.42);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(168, 216, 208, 0.5) 100%);
  box-shadow:
    inset 0 1em 0 rgba(255, 255, 255, 0.72),
    inset 0 0 14em rgba(255, 255, 255, 0.28);
}
.level-intro.is-daily .level-intro-pulse-node {
  position: relative;
  width: calc(46 * var(--world-unit));
  height: calc(46 * var(--world-unit));
  flex: none;
  z-index: 1;
  animation: pulse-intro-breath 2.8s ease-in-out infinite;
}
.level-intro.is-daily .level-intro-pulse-node img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.level-intro.is-daily .level-intro-pulse-node.is-left .is-idle {
  animation: pulse-intro-idle 1.6s linear infinite;
}
.level-intro.is-daily .level-intro-pulse-node .is-charge {
  opacity: 0;
  transform-origin: center;
  animation: pulse-intro-charge 1.6s linear infinite;
}
.level-intro.is-daily .level-intro-pulse-lane {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  min-width: calc(88 * var(--world-unit));
  height: calc(18 * var(--world-unit));
  margin: 0 calc(-22 * var(--world-unit));
  z-index: 2;
}
.level-intro.is-daily .level-intro-pulse-beam {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: calc(3 * var(--world-unit));
  margin-top: calc(-1.5 * var(--world-unit));
  border-radius: 999em;
  transform-origin: left center;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(225, 255, 250, 0.55));
  box-shadow: 0 0 5em 0.4em rgba(210, 248, 242, 0.22);
  animation: pulse-intro-beam 1.6s linear infinite;
}
.level-intro.is-daily .level-intro-pulse-packet {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  width: calc(14 * var(--world-unit));
  height: calc(14 * var(--world-unit));
  margin-top: calc(-7 * var(--world-unit));
  border-radius: 999em;
  opacity: 0;
  background: radial-gradient(circle, #ffffff 0 42%, rgba(255, 255, 255, 0.98) 52%, rgba(230, 255, 252, 0.2) 68%, rgba(180, 230, 220, 0) 76%);
  box-shadow: 0 0 3em 1.1em rgba(255, 255, 255, 0.95);
  animation: pulse-intro-packet 1.6s linear infinite;
}
.level-intro.is-daily .level-intro-pulse-receive {
  position: absolute;
  inset: 16%;
  border-radius: 999em;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(186, 248, 240, 0.42) 48%, rgba(140, 220, 210, 0) 74%);
  animation: pulse-intro-receive 1.6s linear infinite;
}
@keyframes pulse-intro-breath {
  0%, 100% { box-shadow: 0 0 6em rgba(186, 236, 226, 0.12); }
  50% { box-shadow: 0 0 10em rgba(210, 250, 244, 0.28); }
}
@keyframes pulse-intro-idle {
  0%, 16% { opacity: 1; }
  22%, 28% { opacity: 0; }
  34%, 100% { opacity: 1; }
}
@keyframes pulse-intro-charge {
  0%, 16% { opacity: 0; transform: scale(1); }
  22% { opacity: 1; transform: scale(1.06); }
  28% { opacity: 1; transform: scale(1); }
  34%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes pulse-intro-beam {
  0%, 22% { opacity: 0; transform: scaleX(0.04); }
  28% { opacity: 0.55; transform: scaleX(0.08); }
  46% { opacity: 0.7; transform: scaleX(1); }
  54% { opacity: 0; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0.04); }
}
@keyframes pulse-intro-packet {
  0%, 20% { opacity: 0; left: -8%; }
  26% { opacity: 1; left: -8%; }
  46% { opacity: 1; left: 100%; }
  54% { opacity: 0; left: 100%; }
  100% { opacity: 0; left: -8%; }
}
@keyframes pulse-intro-beam-bloom {
  0%, 20% { opacity: 0; transform: scaleX(0.04); }
  26% { opacity: 1; transform: scaleX(0.12); }
  48% { opacity: 1; transform: scaleX(1); }
  58% { opacity: 0; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0.04); }
}
@keyframes pulse-intro-packet-bloom {
  0%, 18% { opacity: 0; left: -6%; }
  24% { opacity: 1; left: -6%; }
  48% { opacity: 1; left: 92%; }
  58% { opacity: 0; left: 92%; }
  100% { opacity: 0; left: -6%; }
}
@keyframes pulse-intro-receive {
  0%, 42% { opacity: 0; transform: scale(0.92); }
  48% { opacity: 1; transform: scale(1); }
  56% { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .level-intro.is-daily .level-intro-pulse-node,
  .level-intro.is-daily .level-intro-pulse-node.is-left .is-idle,
  .level-intro.is-daily .level-intro-pulse-node .is-charge,
  .level-intro.is-daily .level-intro-pulse-beam,
  .level-intro.is-daily .level-intro-pulse-packet,
  .level-intro.is-daily .level-intro-pulse-receive,
  .level-intro.is-ghost-bloom .level-intro-pulse-node.is-left .is-idle,
  .level-intro.is-ghost-bloom .level-intro-pulse-node .is-charge,
  .level-intro.is-ghost-bloom .level-intro-pulse-beam,
  .level-intro.is-ghost-bloom .level-intro-pulse-packet,
  .level-intro.is-ghost-bloom .level-intro-pulse-receive {
    animation: none;
  }
  .level-intro.is-daily .level-intro-pulse-node .is-charge,
  .level-intro.is-daily .level-intro-pulse-beam,
  .level-intro.is-daily .level-intro-pulse-packet,
  .level-intro.is-daily .level-intro-pulse-receive,
  .level-intro.is-ghost-bloom .level-intro-pulse-node .is-charge,
  .level-intro.is-ghost-bloom .level-intro-pulse-beam,
  .level-intro.is-ghost-bloom .level-intro-pulse-packet,
  .level-intro.is-ghost-bloom .level-intro-pulse-receive {
    opacity: 0;
  }
}
.level-intro.is-daily .level-intro-pulse-title,
.level-intro.is-daily .level-intro-pulse-note {
  margin: 0;
}
.level-intro.is-daily .level-intro-pulse-title {
  font-size: 11em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  color: #1c6c76;
}
.level-intro.is-daily .level-intro-pulse-note {
  font-size: 10em;
  font-weight: 650;
  line-height: 1.25;
  color: #3d6d78;
}
.level-intro.is-ghost-bloom .level-intro-card {
  padding: 12em 16em 12em;
}
.level-intro.is-ghost-bloom .level-intro-mission {
  gap: 4em;
  margin: calc(10 * var(--world-unit)) 0 0;
}
.level-intro.is-ghost-bloom .level-intro-new {
  margin-top: calc(8 * var(--world-unit));
  gap: 2em;
  padding: calc(6 * var(--world-unit)) calc(10 * var(--world-unit)) calc(7 * var(--world-unit));
}
.level-intro.is-ghost-bloom .level-intro-new-preview {
  margin: 0;
}
.level-intro.is-ghost-bloom .level-intro-hint {
  margin-top: calc(8 * var(--world-unit));
}
.level-intro.is-ghost-bloom .level-intro-pulse {
  display: grid;
  justify-items: center;
  gap: 1em;
  width: 100%;
  margin: calc(8 * var(--world-unit)) 0 0;
  padding: calc(6 * var(--world-unit)) calc(8 * var(--world-unit)) calc(7 * var(--world-unit));
  border-radius: 14em;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.72) 0%, rgba(226, 246, 255, 0.5) 100%);
  box-shadow: inset 0 1em 0 rgba(255, 255, 255, 0.88);
  text-align: center;
}
.level-intro.is-ghost-bloom .level-intro-pulse-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(52 * var(--world-unit));
  border-radius: 999em;
  background: rgba(46, 40, 88, 0.48);
}
.level-intro.is-ghost-bloom .level-intro-pulse-node {
  position: relative;
  z-index: 3;
  width: calc(48 * var(--world-unit));
  height: calc(48 * var(--world-unit));
  flex: none;
}
.level-intro.is-ghost-bloom .level-intro-pulse-node img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.level-intro.is-ghost-bloom .level-intro-pulse-node.is-left .is-idle {
  animation: pulse-intro-idle 1.6s linear infinite;
}
.level-intro.is-ghost-bloom .level-intro-pulse-node .is-charge {
  opacity: 0;
  transform-origin: center;
  animation: pulse-intro-charge 1.6s linear infinite;
}
.level-intro.is-ghost-bloom .level-intro-pulse-lane {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: calc(88 * var(--world-unit));
  height: calc(22 * var(--world-unit));
  margin: 0 calc(-20 * var(--world-unit));
}
.level-intro.is-ghost-bloom .level-intro-pulse-beam {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: calc(3 * var(--world-unit));
  margin-top: calc(-1.5 * var(--world-unit));
  border-radius: 999em;
  transform-origin: left center;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(232, 255, 250, 0.92) 62%, rgba(255, 255, 255, 0.98));
  box-shadow:
    0 0 0.55em 0.12em rgba(255, 255, 255, 0.95),
    0 0 4em 1em rgba(186, 236, 226, 0.88);
  animation: pulse-intro-beam-bloom 1.65s linear infinite;
}
.level-intro.is-ghost-bloom .level-intro-pulse-packet {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: calc(16 * var(--world-unit));
  height: calc(16 * var(--world-unit));
  margin-top: calc(-8 * var(--world-unit));
  border-radius: 999em;
  opacity: 0;
  background: radial-gradient(circle, #ffffff 0 28%, rgba(236, 255, 252, 0.92) 46%, rgba(186, 236, 226, 0.18) 70%, rgba(170, 230, 220, 0) 78%);
  box-shadow: 0 0 6em 1.5em rgba(210, 255, 246, 0.95);
  animation: pulse-intro-packet-bloom 1.65s linear infinite;
}
.level-intro.is-ghost-bloom .level-intro-pulse-receive {
  position: absolute;
  inset: 16%;
  border-radius: 999em;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(186, 248, 240, 0.42) 48%, rgba(140, 220, 210, 0) 74%);
  animation: pulse-intro-receive 1.6s linear infinite;
}
.level-intro.is-ghost-bloom .level-intro-pulse-title,
.level-intro.is-ghost-bloom .level-intro-pulse-note {
  margin: 0;
}
.level-intro.is-ghost-bloom .level-intro-pulse-title {
  font-size: 13em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-transform: uppercase;
  color: #1a3348;
}
.level-intro.is-ghost-bloom .level-intro-pulse-note {
  font-size: 11.5em;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #24384c;
}
.level-intro.is-daily .level-intro-hint {
  margin-top: calc(12 * var(--world-unit));
  color: #c45a18;
  text-shadow: 0 1em 0 #fff6ea;
}
.complete-daily-reward {
  margin: 8px 0 0;
  text-align: center;
}
.complete-daily-reward[hidden] {
  display: none !important;
}
.complete-daily-reward .complete-mission-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.complete-card--daily .complete-mission {
  margin-bottom: 8px;
}
.complete-card--daily .complete-score-block {
  margin-top: 8px;
}
.complete-card--daily .complete-progress {
  margin-top: 6px;
  padding-top: 6px;
}
.complete-card--daily .complete-progress-head {
  margin-bottom: 0;
}
.complete-card--daily .complete-cta-zone {
  margin-top: 6px;
  padding-top: 4px;
}
.complete-card--daily .complete-footer-actions {
  margin-top: 6px;
}
.second-chance-banner {
  position: absolute;
  left: calc(var(--world-offset-x, 0px) + (var(--world-width, 390) * var(--world-unit) / 2));
  top: calc(var(--world-offset-y, 0px) + 520em);
  z-index: 2;
  margin: 0;
  padding: 10em 20em;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  font-size: var(--world-unit);
  font-family: "Nunito", "Quicksand", "Avenir Next", "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #102838;
  text-shadow: 0 1em 2em rgba(255, 255, 255, 0.88);
  border-radius: 999em;
  background: rgba(248, 252, 255, 0.78);
  border: 1.2em solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 6em 22em rgba(18, 42, 64, 0.14);
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  white-space: nowrap;
}
.second-chance-banner[hidden] {
  display: none;
}
.pause-veil {
  --pu: var(--world-unit);
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: calc(28 * var(--pu)) calc(18 * var(--pu));
  pointer-events: auto;
  font-size: var(--pu);
  color: #1d3f58;
  background: rgba(186, 216, 238, 0.18);
  backdrop-filter: blur(7px) saturate(1.06);
  -webkit-backdrop-filter: blur(7px) saturate(1.06);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}
@media (max-width: 820px) {
  .pause-veil {
    backdrop-filter: blur(5px) saturate(1.04);
    -webkit-backdrop-filter: blur(5px) saturate(1.04);
  }
}
.pause-veil.is-open {
  opacity: 1;
  visibility: visible;
}
.pause-veil[hidden] {
  display: none;
  pointer-events: none;
}
.pause-card {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 77%;
  max-height: 92%;
  height: max-content;
  padding: calc(18 * var(--pu)) calc(18 * var(--pu)) calc(16 * var(--pu));
  border-radius: calc(30 * var(--pu));
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(255, 248, 240, 0.96) 58%, rgba(246, 242, 252, 0.95) 100%);
  border: calc(1.25 * var(--pu)) solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 0 0 calc(1 * var(--pu)) rgba(176, 210, 228, 0.28),
    0 0 calc(28 * var(--pu)) rgba(168, 210, 230, 0.22),
    0 0 calc(36 * var(--pu)) rgba(196, 176, 224, 0.12),
    0 calc(16 * var(--pu)) calc(32 * var(--pu)) rgba(90, 120, 150, 0.1),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: scale(0.97);
  transition: transform 220ms ease, width 200ms ease;
}
.pause-veil.is-open .pause-card {
  transform: scale(1);
}
.pause-card[data-view="select"] {
  width: 84%;
  padding: calc(16 * var(--pu)) calc(18 * var(--pu)) calc(18 * var(--pu));
  background:
    linear-gradient(180deg, rgba(255, 246, 236, 0.38) 0%, rgba(236, 244, 252, 0.34) 36%, rgba(250, 236, 244, 0.26) 74%, rgba(255, 234, 224, 0.22) 100%),
    rgba(255, 250, 252, 0.24);
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 calc(18 * var(--pu)) calc(36 * var(--pu)) rgba(48, 92, 132, 0.12),
    0 0 calc(20 * var(--pu)) rgba(170, 210, 240, 0.1),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.94),
    inset 0 calc(-1 * var(--pu)) 0 rgba(170, 200, 230, 0.08);
}
.pause-card[data-view="scores"] {
  display: flex;
  flex-direction: column;
  width: 84%;
  max-height: 82%;
  padding: calc(16 * var(--pu)) calc(16 * var(--pu)) calc(14 * var(--pu));
}
.pause-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 26%, rgba(255, 255, 255, 0) 40%);
  z-index: 0;
}
.pause-card[data-view="select"]::before {
  background:
    radial-gradient(ellipse 78% 36% at 50% -4%, rgba(255, 214, 176, 0.3) 0%, rgba(255, 228, 200, 0.12) 38%, transparent 70%),
    linear-gradient(180deg, rgba(255, 252, 246, 0.46) 0%, rgba(255, 255, 255, 0.08) 36%, rgba(255, 255, 255, 0) 70%);
}
.pause-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 236, 242, 0) 0%, rgba(255, 224, 232, 0.14) 52%, rgba(255, 228, 214, 0.16) 100%);
  z-index: 0;
}
.pause-card > * {
  position: relative;
  z-index: 1;
}
.pause-view {
  display: none;
}
.pause-view.is-active {
  display: grid;
  justify-items: stretch;
  align-content: start;
  height: max-content;
  animation: pauseViewIn 200ms ease;
}
.pause-view--home {
  gap: 0;
}
.pause-title {
  margin: 0;
  text-align: center;
  font-size: calc(20 * var(--pu));
  font-weight: 750;
  letter-spacing: 0.22em;
  line-height: 1;
  color: #15384f;
  text-shadow: 0 0 calc(14 * var(--pu)) rgba(176, 206, 228, 0.34);
}
.pause-mode {
  margin: calc(8 * var(--pu)) 0 0;
  text-align: center;
  font-size: calc(11 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #3e6278;
}
.pause-wallet,
.collection-wallet {
  display: flex;
  justify-content: center;
}
.pause-wallet {
  margin: calc(12 * var(--pu)) 0 calc(22 * var(--pu));
}
.wallet-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--pu));
  max-width: 100%;
}
.wallet-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--pu));
  min-width: calc(72 * var(--pu));
  height: calc(34 * var(--pu));
  padding: 0 calc(12 * var(--pu));
  border-radius: 999em;
  border: calc(1.25 * var(--pu)) solid rgba(255, 255, 255, 0.72);
  background: rgba(250, 247, 240, 0.92);
  box-shadow:
    0 0 0 calc(1 * var(--pu)) rgba(176, 196, 228, 0.14),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.28),
    inset 0 calc(-6 * var(--pu)) calc(8 * var(--pu)) rgba(160, 170, 200, 0.08);
}
.wallet-display.is-compact .wallet-pill {
  min-width: calc(64 * var(--pu));
  height: calc(28 * var(--pu));
  padding: 0 calc(10 * var(--pu));
}
.wallet-pill--gold {
  background: linear-gradient(180deg, rgba(255, 250, 236, 0.96) 0%, rgba(250, 240, 214, 0.92) 100%);
  box-shadow:
    0 0 0 calc(1 * var(--pu)) rgba(214, 176, 96, 0.16),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.34);
}
.wallet-pill--diamond {
  background: linear-gradient(180deg, rgba(244, 250, 252, 0.96) 0%, rgba(226, 240, 248, 0.92) 100%);
  box-shadow:
    0 0 0 calc(1 * var(--pu)) rgba(150, 196, 220, 0.18),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.34);
}
.wallet-icon {
  width: calc(16 * var(--pu));
  height: calc(16 * var(--pu));
  object-fit: contain;
  flex: 0 0 auto;
}
.wallet-display.is-compact .wallet-icon {
  width: calc(14 * var(--pu));
  height: calc(14 * var(--pu));
}
.wallet-amount {
  font-size: calc(13 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #1d425c;
  font-variant-numeric: tabular-nums;
}
.wallet-display.is-compact .wallet-amount {
  font-size: calc(12 * var(--pu));
}
.collection-wallet {
  margin: calc(12 * var(--pu)) 0 0;
}
.collection-wallet .wallet-amount {
  font-size: calc(15 * var(--pu));
}
.pause-section-label {
  margin: calc(18 * var(--pu)) 0 calc(8 * var(--pu));
  padding: 0 calc(2 * var(--pu));
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: #6a879c;
}
.pause-nav {
  display: grid;
  gap: calc(8 * var(--pu));
}
.pause-nav .pause-secondary {
  min-height: calc(42 * var(--pu));
  background: linear-gradient(180deg, #fff8ef 0%, #f8e4c6 58%, #f4d4b2 100%);
  border-color: rgba(206, 158, 86, 0.72);
  color: #7a4e22;
  font-size: calc(11.5 * var(--pu));
  font-weight: 750;
  letter-spacing: 0.08em;
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 250, 240, 0.85),
    inset 0 0 calc(12 * var(--pu)) rgba(255, 214, 150, 0.28);
}
.pause-card button {
  font-family: inherit;
  line-height: 1.15;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.pause-ico {
  width: calc(16 * var(--pu));
  height: calc(16 * var(--pu));
  flex: 0 0 auto;
  display: block;
}
.pause-resume,
.pause-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--pu));
}
.pause-resume {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: calc(58 * var(--pu));
  margin: 0 0 calc(10 * var(--pu));
  padding: calc(15 * var(--pu)) calc(18 * var(--pu));
  border: calc(1.5 * var(--pu)) solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: linear-gradient(180deg, #f4fcfe 0%, #c5eaf6 46%, #d9c8f0 100%);
  color: #123248;
  font-size: calc(15.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.14em;
  box-shadow:
    0 0 0 calc(1 * var(--pu)) rgba(120, 190, 214, 0.34),
    0 0 calc(18 * var(--pu)) rgba(140, 206, 228, 0.38),
    0 0 calc(22 * var(--pu)) rgba(186, 168, 220, 0.2),
    0 calc(8 * var(--pu)) calc(16 * var(--pu)) rgba(90, 130, 160, 0.1),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.7);
}
.pause-resume::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: calc(2 * var(--pu));
  height: 32%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
}
.pause-resume:hover,
.pause-resume:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 calc(1 * var(--pu)) rgba(120, 190, 214, 0.34),
    0 0 calc(16 * var(--pu)) rgba(140, 200, 224, 0.26),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.6);
}
.pause-resume:active {
  transform: scale(0.985);
}
.pause-actions {
  display: grid;
  gap: calc(8 * var(--pu));
  margin: 0 0 calc(6 * var(--pu));
}
.pause-actions .pause-secondary {
  min-height: calc(46 * var(--pu));
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.96), rgba(244, 236, 226, 0.92));
  border-color: rgba(255, 255, 255, 0.84);
  color: #2a4d66;
  font-weight: 750;
  box-shadow:
    0 calc(4 * var(--pu)) calc(12 * var(--pu)) rgba(120, 150, 170, 0.08),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.7);
}
.pause-secondary,
.pause-back {
  width: 100%;
  min-height: calc(44 * var(--pu));
  padding: calc(10 * var(--pu)) calc(16 * var(--pu));
  border: calc(1.25 * var(--pu)) solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(250, 247, 240, 0.72);
  color: #2f5470;
  font-size: calc(12 * var(--pu));
  font-weight: 650;
  letter-spacing: 0.08em;
  box-shadow:
    0 0 0 calc(1 * var(--pu)) rgba(176, 196, 228, 0.1),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.28);
}
.pause-back {
  background: rgba(255, 255, 255, 0.36);
  border-color: rgba(255, 255, 255, 0.68);
  color: #3a5f78;
  box-shadow: 0 calc(4 * var(--pu)) calc(12 * var(--pu)) rgba(80, 130, 170, 0.07), inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.55);
}
.pause-secondary:hover,
.pause-secondary:focus-visible,
.pause-back:hover,
.pause-back:focus-visible {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(255, 255, 255, 0.92);
  outline: none;
}
.pause-secondary:active,
.pause-back:active {
  transform: scale(0.985);
}
.pause-nav .pause-secondary:hover,
.pause-nav .pause-secondary:focus-visible {
  background: linear-gradient(180deg, #fffaf3 0%, #fbe9d0 58%, #f6d8b8 100%);
  border-color: rgba(198, 146, 72, 0.86);
  color: #6e4318;
  outline: none;
}
.pause-nav .pause-secondary:active {
  transform: translateY(calc(1 * var(--pu))) scale(0.985);
  background: linear-gradient(180deg, #f8e6cc 0%, #f0d2ae 100%);
  border-color: rgba(176, 124, 58, 0.8);
}
.pause-settings {
  display: grid;
  gap: calc(11 * var(--pu));
  margin: 0 0 calc(2 * var(--pu));
  padding: 0 calc(2 * var(--pu));
  border-top: 0;
}
.pause-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--pu));
  min-height: calc(36 * var(--pu));
}
.pause-setting-label {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--pu));
  min-width: 0;
  font-size: calc(14.5 * var(--pu));
  font-weight: 650;
  color: #2c516a;
}
.pause-setting-label .pause-ico {
  width: calc(18 * var(--pu));
  height: calc(18 * var(--pu));
}
.pause-switch {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(10 * var(--pu));
  flex: 0 0 auto;
  min-height: calc(36 * var(--pu));
  padding: 0;
  border: 0;
  background: transparent;
  color: #5a7c94;
}
.pause-switch-track {
  position: relative;
  width: calc(46 * var(--pu));
  height: calc(26 * var(--pu));
  border-radius: 999px;
  background: rgba(236, 232, 224, 0.72);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 calc(1 * var(--pu)) calc(3 * var(--pu)) rgba(120, 130, 150, 0.08);
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.pause-switch-knob {
  position: absolute;
  top: calc(2 * var(--pu));
  left: calc(2 * var(--pu));
  width: calc(20 * var(--pu));
  height: calc(20 * var(--pu));
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #eef6fc 100%);
  box-shadow: 0 calc(2 * var(--pu)) calc(6 * var(--pu)) rgba(40, 70, 100, 0.16), inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
  transition: transform 180ms ease;
}
.pause-switch-text {
  min-width: calc(22 * var(--pu));
  font-size: calc(10 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pause-switch.is-on .pause-switch-track {
  background: linear-gradient(90deg, #9ed8ee 0%, #c9b6e6 100%);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.55),
    0 0 calc(12 * var(--pu)) rgba(160, 206, 228, 0.42);
}
.pause-switch.is-on .pause-switch-knob {
  transform: translateX(calc(20 * var(--pu)));
}
.pause-switch.is-on {
  color: #1d4a66;
}
.pause-switch:hover,
.pause-switch:focus-visible {
  outline: none;
}
.pause-switch:focus-visible .pause-switch-track {
  box-shadow: 0 0 0 calc(2 * var(--pu)) rgba(170, 220, 255, 0.45);
}
.pause-nav .pause-daily,
.pause-nav .pause-leaderboard,
.pause-nav .pause-main-menu,
.pause-nav .pause-secondary {
  width: 100%;
  margin: 0;
}
.pause-back {
  width: auto;
  justify-self: start;
  min-height: calc(44 * var(--pu));
  margin: 0 0 calc(8 * var(--pu));
  padding: calc(10 * var(--pu)) calc(14 * var(--pu));
  font-size: calc(11 * var(--pu));
}
.pause-world {
  margin: 0;
  text-align: center;
  font-size: calc(11 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(27, 58, 82, 0.46);
}
.pause-view--select .pause-world-head {
  display: grid;
  justify-items: center;
  margin: calc(2 * var(--pu)) 0 0;
}
.pause-view--select .pause-world-sun {
  position: relative;
  width: calc(22 * var(--pu));
  height: calc(12 * var(--pu));
  margin: 0 0 calc(6 * var(--pu));
}
.pause-view--select .pause-world-sun::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(1 * var(--pu));
  width: calc(8.5 * var(--pu));
  height: calc(8.5 * var(--pu));
  margin-left: calc(-4.25 * var(--pu));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff8ee 0%, #ffd4a2 52%, rgba(255, 190, 132, 0.62) 100%);
  box-shadow: 0 0 calc(10 * var(--pu)) rgba(255, 196, 146, 0.34);
}
.pause-view--select .pause-world-sun::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(1 * var(--pu));
  height: calc(3.6 * var(--pu));
  margin-left: calc(-0.5 * var(--pu));
  background: rgba(224, 168, 108, 0.38);
  box-shadow:
    calc(-6 * var(--pu)) calc(2.4 * var(--pu)) 0 rgba(224, 168, 108, 0.24),
    calc(6 * var(--pu)) calc(2.4 * var(--pu)) 0 rgba(224, 168, 108, 0.24);
}
.pause-view--select .pause-world {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: calc(13 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #4f3a2c;
  text-shadow: 0 0 calc(14 * var(--pu)) rgba(255, 214, 170, 0.5);
}
.pause-view--select .pause-world::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(148 * var(--pu));
  height: calc(26 * var(--pu));
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(255, 214, 176, 0.32) 0%, rgba(255, 226, 196, 0.1) 48%, transparent 72%);
}
.pause-view--select .pause-world-divider {
  display: block;
  width: calc(68 * var(--pu));
  height: calc(8 * var(--pu));
  margin: calc(8 * var(--pu)) 0 calc(2 * var(--pu));
  background:
    radial-gradient(circle at 50% 50%, rgba(210, 158, 96, 0.62) 0 1.15px, transparent 1.3px),
    linear-gradient(90deg, transparent 0%, rgba(210, 158, 96, 0.08) 12%, rgba(210, 158, 96, 0.4) 36%, transparent 48%, transparent 52%, rgba(210, 158, 96, 0.4) 64%, rgba(210, 158, 96, 0.08) 88%, transparent 100%);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 100% 100%, 100% 1px;
}
.pause-select-title {
  margin: calc(6 * var(--pu)) 0 calc(16 * var(--pu));
  text-align: center;
  font-size: calc(17 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #123248;
  text-shadow: 0 0 calc(12 * var(--pu)) rgba(170, 220, 255, 0.22);
}
.pause-view--select .pause-select-title {
  margin: calc(8 * var(--pu)) 0 calc(18 * var(--pu));
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #123248;
  text-shadow: 0 0 calc(10 * var(--pu)) rgba(170, 220, 255, 0.16);
}
.pause-level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--pu));
}
.pause-level {
  position: relative;
  min-height: calc(52 * var(--pu));
  padding: calc(6 * var(--pu)) calc(4 * var(--pu)) calc(7 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.66);
  border-radius: calc(16 * var(--pu));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 100%),
    rgba(255, 252, 250, 0.2);
  color: #2a4f6b;
  box-shadow:
    0 calc(4 * var(--pu)) calc(12 * var(--pu)) rgba(72, 118, 156, 0.06),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.74);
  transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.pause-level-id {
  display: block;
  font-size: calc(15.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pause-level-best-mini {
  display: block;
  margin-top: calc(2 * var(--pu));
  font-size: calc(8.5 * var(--pu));
  font-weight: 650;
  letter-spacing: 0.02em;
  color: rgba(27, 58, 82, 0.46);
}
.pause-level-best-mini[hidden] {
  display: none;
}
.pause-level-lock {
  display: none;
  position: absolute;
  right: calc(6 * var(--pu));
  bottom: calc(6 * var(--pu));
  width: calc(10 * var(--pu));
  height: calc(12 * var(--pu));
  color: rgba(58, 92, 118, 0.42);
}
.pause-level-lock svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pause-level-mark {
  display: none;
  position: absolute;
  left: calc(7 * var(--pu));
  top: calc(7 * var(--pu));
  width: calc(5 * var(--pu));
  height: calc(5 * var(--pu));
  border-radius: 50%;
  background: rgba(126, 196, 228, 0.92);
  box-shadow: 0 0 calc(6 * var(--pu)) rgba(140, 210, 240, 0.5);
}
.pause-level.is-current .pause-level-mark {
  display: block;
  animation: pauseLevelMark 3.4s ease-in-out infinite;
}
.pause-level.is-completed {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.2) 100%),
    rgba(255, 252, 250, 0.26);
  color: #1d3f58;
}
.pause-level.is-current {
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.72) 0%, rgba(232, 246, 255, 0.5) 100%),
    rgba(236, 248, 255, 0.4);
  border-color: rgba(186, 228, 252, 0.96);
  box-shadow:
    0 0 0 calc(1.5 * var(--pu)) rgba(158, 214, 242, 0.46),
    0 0 calc(12 * var(--pu)) rgba(140, 206, 236, 0.22),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 248, 236, 0.82);
  color: #123248;
}
.pause-level.is-selected:not(.is-locked) {
  box-shadow:
    0 0 0 calc(1.8 * var(--pu)) rgba(168, 214, 240, 0.4),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.94);
}
.pause-level.is-current.is-selected {
  box-shadow:
    0 0 0 calc(1.6 * var(--pu)) rgba(158, 214, 242, 0.5),
    0 0 calc(16 * var(--pu)) rgba(140, 206, 236, 0.3),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.96);
}
.pause-level:not(.is-locked):hover,
.pause-level:not(.is-locked):focus-visible {
  background: rgba(255, 255, 255, 0.52);
  outline: none;
}
.pause-level:not(.is-locked):active {
  transform: scale(0.98);
}
.pause-level.is-current:hover,
.pause-level.is-current:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(232, 246, 255, 0.56) 100%),
    rgba(236, 248, 255, 0.48);
}
.pause-level.is-locked {
  cursor: default;
  opacity: 0.58;
  color: rgba(74, 92, 108, 0.62);
  background:
    linear-gradient(180deg, rgba(255, 250, 246, 0.22) 0%, rgba(236, 244, 250, 0.1) 100%),
    rgba(244, 246, 248, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.4);
}
.pause-level.is-locked .pause-level-lock {
  display: block;
}
.pause-level.is-locked:hover,
.pause-level.is-locked:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 250, 246, 0.22) 0%, rgba(236, 244, 250, 0.1) 100%),
    rgba(244, 246, 248, 0.12);
  outline: none;
}
.pause-level.is-nudge {
  animation: pauseLevelNudge 220ms ease-out;
}
@keyframes pauseLevelNudge {
  0% { transform: scale(1); }
  40% { transform: scale(0.975); }
  100% { transform: scale(1); }
}
@keyframes pauseLevelMark {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
.pause-level-preview {
  margin-top: calc(20 * var(--pu));
  padding-top: calc(12 * var(--pu));
  text-align: center;
  min-height: calc(56 * var(--pu));
  position: relative;
}
.pause-view--select .pause-level-preview::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(42 * var(--pu));
  height: 1px;
  margin-left: calc(-21 * var(--pu));
  background: linear-gradient(90deg, transparent, rgba(210, 158, 96, 0.28), transparent);
}
.pause-level-num {
  margin: 0;
  font-size: calc(10.5 * var(--pu));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(27, 58, 82, 0.4);
}
.pause-level-name {
  margin: calc(6 * var(--pu)) 0 0;
  font-size: calc(19 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #123248;
}
.pause-level-name.is-locked {
  font-size: calc(13.5 * var(--pu));
  font-weight: 650;
  letter-spacing: 0.02em;
  color: #5a7384;
}
.pause-level-best {
  margin: calc(6 * var(--pu)) 0 0;
  font-size: calc(12 * var(--pu));
  font-weight: 650;
  letter-spacing: 0.06em;
  color: rgba(27, 58, 82, 0.55);
}
.pause-level-best[hidden] {
  display: none;
}
.pause-view--scores {
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
}
.scores-total {
  margin: 0 0 calc(14 * var(--pu));
  padding: calc(14 * var(--pu)) calc(12 * var(--pu)) calc(12 * var(--pu));
  border-radius: calc(18 * var(--pu));
  text-align: center;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.72);
}
.scores-total-label {
  margin: 0;
  font-size: calc(10 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(27, 58, 82, 0.52);
}
.scores-total-value {
  margin: calc(6 * var(--pu)) 0 calc(4 * var(--pu));
  font-size: calc(28 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #12384f;
  font-variant-numeric: tabular-nums;
}
.scores-total-meta {
  margin: 0;
  font-size: calc(11 * var(--pu));
  font-weight: 600;
  color: rgba(27, 58, 82, 0.48);
}
.scores-list-title {
  margin: 0 0 calc(8 * var(--pu));
  font-size: calc(11 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(27, 58, 82, 0.5);
}
.scores-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: calc(4 * var(--pu));
  -webkit-overflow-scrolling: touch;
}
.scores-row {
  display: grid;
  grid-template-columns: calc(28 * var(--pu)) minmax(0, 1fr) auto;
  gap: calc(8 * var(--pu));
  align-items: baseline;
  padding: calc(7 * var(--pu)) calc(4 * var(--pu));
  border-bottom: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.36);
}
.scores-row-id {
  font-size: calc(12 * var(--pu));
  font-weight: 700;
  color: rgba(27, 58, 82, 0.42);
  font-variant-numeric: tabular-nums;
}
.scores-row-name {
  font-size: calc(13 * var(--pu));
  font-weight: 650;
  color: #1d3f58;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scores-row-best {
  font-size: calc(13 * var(--pu));
  font-weight: 700;
  color: #15384f;
  font-variant-numeric: tabular-nums;
}
.scores-leaderboard {
  margin-top: calc(12 * var(--pu));
}
.scores-leaderboard[hidden] {
  display: none;
}
@keyframes pauseViewIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pauseResumeSweep {
  0%, 28% { transform: translateX(-18%); opacity: 0; }
  42% { opacity: 0.7; }
  58%, 100% { transform: translateX(18%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pause-veil,
  .pause-card,
  .pause-switch-track,
  .pause-switch-knob {
    transition: none;
  }
  .pause-view.is-active,
  .pause-resume::after,
  .pause-level.is-current .pause-level-mark,
  .pause-level.is-nudge,
  .overlay-button--invite::after,
  .complete-card::before,
  .complete-mission::before,
  .complete-mission-kicker,
  .complete-story-diamond.is-pop,
  .complete-story-diamond.is-pop .complete-story-icon,
  .complete-story-gem-wrap::before,
  .level-intro.is-hold .level-intro-hint,
  .level-intro.is-hold .level-intro-hint::before,
  .bottom-control-hint:not([hidden]),
  .bottom-control-hint:not([hidden])::after,
  .complete-best,
  .overlay-complete--finale .complete-title,
  .hud-powerup.is-named .hud-powerup-name,
  .hud-powerup.is-holding .hud-powerup-name,
  .hud-pause.is-cue {
    animation: none;
  }
  .hud-powerup.is-named .hud-powerup-name,
  .hud-powerup.is-holding .hud-powerup-name {
    opacity: 1;
  }
}
.hud.is-paused .hud-powerup.is-waning::before,
.hud.is-paused .hud-powerup.is-waning::after,
.hud.is-paused .hud-heart.is-losing,
.hud.is-paused .hud-heart.is-gaining,
.hud.is-paused .hud-heart.is-highlight,
.hud.is-paused .hud-heart.is-slot-in,
.hud.is-paused .hud-heart.is-slot-out,
.hud.is-paused .hud-heart.is-gaining .hud-heart-sparkle,
.hud.is-paused .hud-score-value.is-score-pulse,
.hud.is-paused .hud-score-content:has(.is-score-pulse) .hud-star,
.hud.is-paused .hud-capsule--gold.is-gold-pulse,
.hud.is-paused .hud-gold-icon.is-shimmer {
  animation-play-state: paused;
}
.overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  text-align: center;
  color: #21405a;
  pointer-events: none;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
}
.overlay[hidden] { display: none; }
.overlay--gameover,
.overlay--second-chance {
  background: rgba(255, 248, 242, 0.2);
  backdrop-filter: blur(8px) saturate(1.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.08);
}
.overlay--complete {
  background: rgba(255, 250, 244, 0.14);
  backdrop-filter: blur(5px) saturate(1.06);
  -webkit-backdrop-filter: blur(5px) saturate(1.06);
}
.overlay--world-finale {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.overlay-panel {
  pointer-events: auto;
  width: min(100%, 340px);
  padding: 0 20px;
}
.overlay-panel[hidden] {
  display: none !important;
}
.overlay-card {
  position: relative;
  display: grid;
  gap: 12px;
  justify-items: center;
  width: min(100%, 308px);
  padding: 32px 26px 24px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(236, 246, 255, 0.4) 44%, rgba(255, 236, 228, 0.3) 100%),
    rgba(248, 252, 255, 0.56);
  border: 1.2px solid rgba(255, 255, 255, 0.86);
  box-shadow:
    0 16px 36px rgba(18, 42, 64, 0.14),
    0 0 24px rgba(170, 214, 240, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.overlay-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 74%);
  z-index: 0;
}
.overlay-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -42px;
  width: 168px;
  height: 96px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(190, 230, 255, 0.16) 48%, rgba(190, 230, 255, 0) 74%);
  transform: translateX(-50%);
  z-index: 0;
}
.overlay-card > * {
  position: relative;
  z-index: 1;
}
.overlay-second-chance {
  gap: 13px;
  padding: 34px 26px 26px;
}
.overlay-gameover {
  gap: 14px;
  padding: 34px 26px 26px;
}
.overlay-gameover.is-sanctuary {
  gap: 10px;
  padding: 26px 26px 24px;
  background:
    linear-gradient(180deg, rgba(255, 250, 244, 0.94) 0%, rgba(255, 236, 220, 0.72) 46%, rgba(244, 236, 255, 0.55) 100%),
    rgba(255, 248, 242, 0.78);
  box-shadow:
    0 18px 40px rgba(120, 72, 48, 0.16),
    0 0 28px rgba(255, 196, 150, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.overlay-gameover.is-sanctuary .overlay-title {
  font-size: 1.48rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #7a4328;
  text-shadow: 0 1px 0 rgba(255, 252, 246, 0.9), 0 0 16px rgba(255, 210, 170, 0.55);
}
.overlay-gameover.is-sanctuary .overlay-soft {
  margin: 0;
  color: #6d4a38;
  font-style: normal;
  font-weight: 650;
}
.overlay-gameover.is-sanctuary .overlay-soft-follow {
  margin: -4px 0 8px;
  color: #8a624c;
  font-weight: 500;
}
.overlay-gameover.is-sanctuary .overlay-button--invite {
  background: linear-gradient(180deg, #ffe7bf 0%, #f0a45a 58%, #e08a3a 100%);
  color: #4a2410;
  box-shadow:
    0 10px 22px rgba(196, 110, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.overlay-gameover.is-sanctuary .overlay-secondary {
  background: rgba(255, 248, 242, 0.55);
  color: #8a624c;
}
.overlay-gameover.is-sanctuary #overlay-restart {
  background: rgba(255, 248, 242, 0.92);
  color: #6a4030;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.overlay-gameover.is-sanctuary #overlay-sanctuary-home {
  background: transparent;
  color: #8a624c;
  box-shadow: none;
}
.fail-sanctuary {
  position: relative;
  width: 86px;
  height: 40px;
  margin-bottom: 2px;
}
.fail-sanctuary[hidden] {
  display: none;
}
.fail-sanctuary-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 86px;
  height: 40px;
  object-fit: contain;
  opacity: 0.72;
  filter: saturate(0.82) brightness(0.96);
}
.fail-sanctuary-halo {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 54px;
  height: 18px;
  border: 1.5px solid rgba(186, 206, 230, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.72);
  box-shadow: 0 0 10px rgba(255, 220, 180, 0.2);
  opacity: 0.55;
}
.second-chance-life {
  margin: 2px 0 6px;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #174560;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.7), 0 0 22px rgba(180, 230, 255, 0.28);
}
.second-chance-hint,
.second-chance-status {
  margin: 2px 0 4px;
  max-width: 28ch;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #5a7a90;
}
.second-chance-status[hidden] {
  display: none;
}
.overlay-second-chance .overlay-button {
  width: min(100%, 268px);
  letter-spacing: 0.04em;
}
.overlay-soft {
  margin: -2px 0 6px;
  max-width: 22ch;
  font-size: 0.88rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #5a7a90;
}
.overlay-button[disabled] {
  opacity: 0.62;
  cursor: wait;
}
.overlay-title {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #15384f;
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.62), 0 0 18px rgba(170, 220, 255, 0.22);
}
.overlay-button {
  position: relative;
  overflow: hidden;
  width: min(100%, 230px);
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 247, 255, 0.94) 50%, rgba(236, 238, 252, 0.9) 100%);
  color: #123248;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(90, 150, 200, 0.2),
    0 0 16px rgba(170, 220, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.overlay-button--invite::after {
  content: "";
  position: absolute;
  inset: -30% -50%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.5) 48%, transparent 62%);
  animation: pauseResumeSweep 7.2s ease-in-out infinite;
}
.overlay-secondary {
  display: block;
  width: min(100%, 220px);
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  color: #4a6d84;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(80, 130, 170, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.overlay-secondary:hover,
.overlay-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.48);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 16px rgba(80, 130, 170, 0.12);
  outline: none;
}

.overlay-complete {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 40px 20px 32px;
  width: 100%;
  max-width: none;
}
.complete-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  width: min(100%, 320px);
  transform: translateY(-4vh);
}
.complete-stack[hidden] {
  display: none !important;
}
.complete-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.complete-sparkles span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 236, 0.98) 0%, rgba(255, 196, 120, 0.58) 42%, rgba(255, 196, 120, 0) 72%);
  opacity: 0;
  animation: completeSpark 2.2s ease-out infinite;
}
.complete-sparkles span:nth-child(1) { left: 18%; top: 22%; animation-delay: 0.05s; }
.complete-sparkles span:nth-child(2) { left: 76%; top: 18%; animation-delay: 0.35s; width: 6px; height: 6px; }
.complete-sparkles span:nth-child(3) { left: 62%; top: 30%; animation-delay: 0.65s; }
.complete-sparkles span:nth-child(4) { left: 28%; top: 34%; animation-delay: 0.95s; width: 7px; height: 7px; }
.complete-sparkles span:nth-child(5) { left: 84%; top: 42%; animation-delay: 0.2s; }
.complete-sparkles span:nth-child(6) { left: 12%; top: 48%; animation-delay: 0.55s; width: 6px; height: 6px; }
.complete-sparkles span:nth-child(7) { left: 48%; top: 16%; animation-delay: 0.8s; }
.complete-sparkles span:nth-child(8) { left: 38%; top: 52%; animation-delay: 1.1s; width: 7px; height: 7px; }

.complete-card {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: min(100%, 320px);
  padding: 26px 22px 14px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 252, 248, 0.97) 0%, rgba(255, 228, 196, 0.72) 46%, rgba(255, 214, 176, 0.58) 78%, rgba(255, 206, 168, 0.5) 100%),
    rgba(255, 244, 224, 0.92);
  border: 1.2px solid rgba(255, 220, 160, 0.98);
  box-shadow:
    0 18px 42px rgba(210, 96, 48, 0.18),
    0 0 40px rgba(255, 168, 86, 0.46),
    0 0 24px rgba(255, 196, 120, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.complete-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56) 0%, rgba(255, 248, 230, 0.12) 40%, rgba(255, 255, 255, 0) 74%),
    linear-gradient(115deg, transparent 32%, rgba(255, 236, 186, 0.42) 48%, transparent 64%);
  background-size: 100% 100%, 220% 100%;
  animation: completeCardSheen 5.6s ease-in-out infinite;
  z-index: 0;
}
.complete-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -48px;
  width: 220px;
  height: 140px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 244, 210, 0.78) 0%, rgba(255, 196, 120, 0.3) 46%, rgba(255, 196, 120, 0) 74%);
  transform: translateX(-50%);
  z-index: 0;
}
.complete-card > * {
  position: relative;
  z-index: 1;
}
.overlay-complete.is-visible .complete-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.overlay-complete.is-ready .complete-card {
  cursor: pointer;
}
.overlay-complete.is-ready .complete-card:active {
  box-shadow: 0 14px 34px rgba(120, 78, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}
.complete-title {
  margin: 0 0 10px;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #b04810;
  text-shadow:
    0 0 18px rgba(255, 196, 80, 0.82),
    0 1px 0 rgba(255, 248, 220, 0.95);
  animation: completeTitleGlow 2.8s ease-in-out infinite;
}
.complete-mission {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 100%;
  margin: 0 0 10px;
  padding: 9px 12px 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 250, 232, 0.86) 0%, rgba(255, 228, 186, 0.48) 100%),
    rgba(255, 244, 220, 0.55);
  box-shadow:
    0 0 22px rgba(255, 196, 120, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  overflow: hidden;
}
.complete-mission[hidden] {
  display: none;
}
.complete-mission::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 252, 236, 0.55) 48%, transparent 66%);
  background-size: 220% 100%;
  animation: completeCardSheen 4.8s ease-in-out infinite;
}
.complete-mission-kicker,
.complete-mission-line {
  position: relative;
  z-index: 1;
}
.complete-mission-kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c47a38;
  text-shadow: 0 0 14px rgba(255, 210, 140, 0.7);
  animation: completeMissionGlow 2.4s ease-in-out infinite;
}
.complete-mission-line {
  margin: 0;
  max-width: 28ch;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: #5a3a1e;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 236, 186, 0.7), 0 1px 2px rgba(255, 255, 255, 0.7);
}
.complete-mission-line .mission-row {
  justify-content: center;
}
.complete-mission-line .treasure-icon,
.complete-mission-line .mission-icon {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  flex: 0 0 auto;
}
.complete-mission-line.is-wrapped {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
}
.complete-mission-line[hidden] {
  display: none;
}
.complete-story-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.complete-story-ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.complete-story-ico--brick {
  width: 22px;
  height: 9px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffe7c4 0%, #f4b36a 55%, #e08a4a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.complete-story-ico--power {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, #fff8ee 0%, #ffe08a 28%, #7ec8f0 72%, #3a88c4 100%);
  box-shadow: 0 0 8px rgba(126, 200, 240, 0.45);
}
.complete-story {
  display: grid;
  gap: 5px;
  width: 100%;
  margin: 0 0 8px;
}
.complete-story[hidden] {
  display: none;
}
.complete-story-diamond {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 2px;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  color: #1e5a86;
  text-shadow: 0 0 16px rgba(186, 230, 255, 0.85), 0 1px 2px rgba(255, 255, 255, 0.85);
}
.complete-story-gem-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
}
.complete-story-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.complete-story-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.15;
}
.complete-story-wallet {
  font-size: 0.78em;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.complete-story-wallet[hidden] {
  display: none;
}
.complete-story-gem-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(126, 198, 232, 0.55);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.7);
}
.complete-story-diamond[hidden] {
  display: none;
}
.complete-story-diamond.is-pop {
  animation:
    completeDiamondLineIn 0.42s ease-out both,
    completeDiamondGlow 2s ease-out 0.42s infinite;
}
.complete-story-diamond.is-gem-spin {
  flex-direction: column;
  gap: 6px;
}
.complete-story-diamond.is-gem-spin .complete-story-copy {
  align-items: center;
}
.complete-story-diamond.is-gem-spin .complete-story-gem-wrap {
  width: 42px;
  height: 42px;
}
.complete-reward[hidden] {
  display: none;
}
.complete-reward:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 6px 0 2px;
  padding: 10px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.98) 0%, rgba(255, 232, 196, 0.82) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 18px rgba(232, 176, 72, 0.22);
}
.complete-reward-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #8a6418;
}
.complete-reward-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.complete-reward-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #6a4a16;
}
.complete-reward-row .treasure-icon,
.complete-reward-row img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.complete-story-diamond.is-pop .complete-story-icon {
  animation: completeGemIn 0.4s ease-out both;
}
.complete-story-diamond.is-gem-spin.is-pop .complete-story-icon {
  width: 42px;
  height: 42px;
  animation: diamondFoundSpin 3s linear infinite;
}
@keyframes diamondFoundSpin {
  0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 0 rgba(186, 230, 255, 0)); }
  50% { transform: rotate(180deg) scale(1.06); filter: drop-shadow(0 0 8px rgba(186, 230, 255, 0.85)); }
  100% { transform: rotate(360deg) scale(1); filter: drop-shadow(0 0 0 rgba(186, 230, 255, 0)); }
}
.complete-story-diamond.is-pop .complete-story-gem-wrap::before {
  animation: completeGemRing 2s ease-out infinite;
}
@keyframes completeDiamondLineIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes completeDiamondGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(186, 230, 255, 0.35), 0 1px 2px rgba(255, 255, 255, 0.85); }
  16% { text-shadow: 0 0 14px rgba(214, 242, 255, 0.9), 0 1px 2px rgba(255, 255, 255, 0.85); }
  42% { text-shadow: 0 0 8px rgba(186, 230, 255, 0.35), 0 1px 2px rgba(255, 255, 255, 0.85); }
}
@keyframes completeGemIn {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes completeGemRing {
  0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.72); }
  72% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}
.complete-card--proto920 {
  box-shadow:
    0 18px 42px rgba(210, 96, 48, 0.2),
    0 0 46px rgba(255, 168, 80, 0.5),
    0 0 28px rgba(255, 196, 120, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.complete-card--proto920 .complete-title {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 6px 6px 8px;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 214, 110, 0.58) 0%, rgba(255, 168, 72, 0.18) 52%, rgba(255, 176, 80, 0) 74%);
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #c24a0c;
  text-shadow:
    0 0 20px rgba(255, 196, 80, 0.9),
    0 1px 0 rgba(255, 248, 220, 0.98);
}
.complete-card--proto920 .complete-level {
  font-size: 1.28rem;
  color: #5a2a10;
}
.complete-card--proto920 .complete-mission {
  background:
    linear-gradient(180deg, rgba(255, 250, 236, 0.94) 0%, rgba(255, 196, 140, 0.58) 100%),
    rgba(255, 232, 196, 0.7);
  box-shadow:
    0 0 22px rgba(255, 168, 80, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.complete-card--proto920 .complete-mission-kicker {
  font-size: 0.76rem;
  font-weight: 800;
  color: #c24a0c;
}
.complete-card--proto920 .complete-mission-line {
  max-width: 100%;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: #5a2a10;
}
.complete-card--proto920 .complete-next {
  color: #9a4e1c;
}
.complete-card--proto920 .complete-score-block {
  display: none;
}
.complete-gold-reward:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 8px 0 10px;
  padding: 12px 14px 13px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.98) 0%, rgba(255, 226, 168, 0.72) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 22px rgba(232, 176, 72, 0.28);
}
.complete-gold-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #8a6418;
}
.complete-gold-earned {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1;
  color: #6a4a16;
  font-variant-numeric: tabular-nums;
}
.complete-gold-ico {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
}
.complete-gold-total {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6a4a16;
}
.complete-daily-board.is-shop-cta:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #6a4a16;
  background: linear-gradient(180deg, rgba(255, 248, 228, 0.96) 0%, rgba(255, 226, 168, 0.78) 100%);
  border-color: rgba(214, 168, 72, 0.45);
}
.complete-shop-ico {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.main-menu-view--shop .shop-list {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  align-content: start;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  gap: calc(17 * var(--pu));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.collection-card.shop-product.is-locked .collection-art,
.collection-card.shop-product.is-locked .shop-art {
  opacity: 1;
  filter: none;
}
.shop-product .collection-preview-stage {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 244, 228, 0.78) 42%, rgba(214, 232, 255, 0.42) 100%);
  border: 1px solid rgba(255, 248, 236, 0.96);
  box-shadow:
    inset 0 0 28px rgba(255, 214, 160, 0.32),
    inset 0 0 0 1px rgba(186, 214, 236, 0.55);
}
.shop-frame--silver .collection-preview-stage {
  border-color: rgba(168, 184, 200, 0.95);
  box-shadow:
    inset 0 0 22px rgba(220, 232, 244, 0.7),
    inset 0 0 0 1px rgba(150, 168, 186, 0.65),
    0 8px 16px rgba(18, 42, 64, 0.05);
}
.shop-frame--gold .collection-preview-stage {
  border-color: rgba(214, 168, 72, 0.9);
  box-shadow:
    inset 0 0 26px rgba(255, 210, 120, 0.45),
    inset 0 0 0 1px rgba(214, 168, 72, 0.7),
    0 8px 16px rgba(120, 84, 24, 0.08);
}
.main-menu-view--shop .collection-card.shop-product {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: calc(112 * var(--pu)) minmax(0, 1fr) auto;
  grid-template-rows: none;
  align-items: center;
  align-content: center;
  justify-items: stretch;
  column-gap: calc(6 * var(--pu));
  row-gap: 0;
  width: 100%;
  max-width: 100%;
  height: calc(150 * var(--pu));
  min-height: calc(142 * var(--pu));
  max-height: calc(158 * var(--pu));
  padding: calc(14 * var(--pu)) calc(14 * var(--pu));
  border-radius: calc(22 * var(--pu));
  overflow: hidden;
  border: 1px solid rgba(232, 196, 154, 0.85);
  background:
    linear-gradient(180deg, rgba(255, 253, 250, 0.98) 0%, rgba(255, 246, 236, 0.96) 100%);
  box-shadow:
    0 calc(6 * var(--pu)) calc(16 * var(--pu)) rgba(120, 84, 48, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.main-menu-view--shop .shop-product.is-equipped {
  border-color: rgba(214, 168, 82, 0.9);
  box-shadow:
    0 0 0 1px rgba(214, 168, 82, 0.35),
    0 0 calc(14 * var(--pu)) rgba(226, 177, 90, 0.22),
    0 calc(6 * var(--pu)) calc(16 * var(--pu)) rgba(120, 84, 48, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.main-menu-view--shop .shop-preview,
.main-menu-view--shop .shop-preview.collection-preview,
.main-menu-view--shop .shop-preview.collection-preview--orb,
.main-menu-view--shop .shop-preview.collection-preview--paddle,
.main-menu-view--shop .shop-preview--orb,
.main-menu-view--shop .shop-preview--paddle,
.main-menu-view--shop .shop-preview--trail {
  display: grid;
  place-items: center;
  width: calc(112 * var(--pu));
  height: calc(112 * var(--pu));
  min-height: 0;
  max-width: calc(112 * var(--pu));
  border-radius: calc(18 * var(--pu));
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(255, 236, 220, 0.78));
}
.main-menu-view--shop .shop-preview.shop-preview--trail {
  background: linear-gradient(180deg, rgba(214, 206, 236, 0.98) 0%, rgba(168, 184, 216, 0.96) 100%);
  box-shadow: inset 0 0 calc(18 * var(--pu)) rgba(118, 136, 176, 0.16);
}
.main-menu-view--shop .shop-tier--premium .shop-preview {
  box-shadow: 0 0 calc(14 * var(--pu)) rgba(232, 204, 150, 0.42);
}
.main-menu-view--shop .shop-tier--premium.shop-product--trail .shop-preview {
  box-shadow:
    inset 0 0 calc(18 * var(--pu)) rgba(118, 136, 176, 0.16),
    0 0 calc(14 * var(--pu)) rgba(232, 204, 150, 0.42);
}
.main-menu-view--shop .shop-tier--diamond .shop-preview {
  box-shadow: 0 0 calc(14 * var(--pu)) rgba(126, 198, 220, 0.4);
}
.main-menu-view--shop .shop-tier--diamond.shop-product--trail .shop-preview {
  box-shadow:
    inset 0 0 calc(18 * var(--pu)) rgba(118, 136, 176, 0.16),
    0 0 calc(14 * var(--pu)) rgba(126, 198, 220, 0.4);
}
.main-menu-view--shop .shop-tier--diamond .shop-pill--buy:not(.is-short) {
  border-color: rgba(120, 186, 210, 0.72);
}
.main-menu-view--shop .shop-art {
  display: block;
  width: 86%;
  height: 86%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.main-menu-view--shop .shop-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(6 * var(--pu));
}
.main-menu-view--shop .shop-name {
  margin: 0;
  min-width: 0;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-size: calc(14.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0;
  line-height: calc(18 * var(--pu));
  text-align: left;
  text-transform: none;
  color: #16324c;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.main-menu-view--shop .shop-copy {
  margin: 0;
  max-width: none;
  font-size: calc(10.5 * var(--pu));
  font-weight: 600;
  line-height: 1.28;
  text-align: left;
  color: #93a8b8;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.main-menu-view--shop .shop-product--pack .shop-name {
  text-align: center;
}
.main-menu-view--shop .shop-product--pack .shop-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3.2 * var(--pu));
  font-size: calc(10.4 * var(--pu));
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: 0.045em;
  text-align: center;
  color: #5d7c90;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.main-menu-view--shop .shop-product--pack .shop-copy span {
  display: block;
}
.main-menu-view--shop .shop-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 calc(96 * var(--pu));
  width: calc(96 * var(--pu));
  min-width: calc(96 * var(--pu));
  max-width: calc(96 * var(--pu));
}
.main-menu-view--shop .shop-product--pack.is-cleared .shop-side {
  flex-direction: column;
  justify-content: center;
  gap: calc(6 * var(--pu));
}
.main-menu-view--shop .shop-pack-cleared {
  margin: 0;
  font-size: calc(8 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #3d8f98;
  text-align: center;
}
.main-menu-view--shop .shop-pill--replay {
  font-size: calc(7.4 * var(--pu));
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.main-menu-view--shop .shop-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: calc(4 * var(--pu));
  width: 100%;
  max-width: 100%;
  min-height: calc(42 * var(--pu));
  margin: 0;
  padding: 0 calc(6 * var(--pu));
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: calc(9 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.main-menu-view--shop .shop-pill--equipped,
.main-menu-view--shop .shop-ribbon--equipped {
  position: static;
  background: linear-gradient(180deg, #e8f8ee, #c9efd6);
  color: #1d6b45;
  border-color: rgba(92, 176, 122, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.main-menu-view--shop .shop-pill--owned,
.main-menu-view--shop .shop-ribbon--owned {
  position: static;
  background: linear-gradient(180deg, #fffaf2, #f3e6cc);
  color: #6a4a16;
  border-color: rgba(214, 186, 140, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.main-menu-view--shop .shop-pill--owned.is-equip-pulse {
  transform-origin: center;
  animation: shopEquipPulse 1.55s ease-in-out infinite;
}
@keyframes shopEquipPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.055);
    filter: brightness(1.12);
    opacity: 1;
  }
}
.main-menu-view--shop .shop-pill--buy {
  flex-direction: row;
  gap: calc(4 * var(--pu));
  width: 100%;
  min-width: 0;
  min-height: calc(42 * var(--pu));
  padding: 0 calc(6 * var(--pu));
  background: linear-gradient(180deg, #fff6dc 0%, #f3d48a 100%);
  color: #5c3e10;
  border-color: rgba(214, 168, 72, 0.85);
  box-shadow:
    0 4px 10px rgba(168, 124, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.main-menu-view--shop .shop-buy-label {
  font-size: calc(10 * var(--pu));
  letter-spacing: 0;
}
.main-menu-view--shop .shop-pill--buy.is-short {
  background: rgba(255, 248, 240, 0.92);
  color: #8a7358;
  border-color: rgba(196, 176, 150, 0.75);
  box-shadow: none;
}
.main-menu-view--shop .shop-price {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--pu));
  font-size: calc(13 * var(--pu));
  font-weight: 800;
}
.main-menu-view--shop .shop-price-icon,
.main-menu-view--shop .shop-tab-icon,
.main-menu-view--shop .shop-logo,
.main-menu-view--shop .shop-header {
  object-fit: contain;
}
.main-menu-view--shop .shop-price-icon {
  width: calc(15 * var(--pu));
  height: calc(15 * var(--pu));
  flex: 0 0 auto;
}
.main-menu-view--shop .shop-check {
  font-size: calc(15 * var(--pu));
  line-height: 1;
}
.main-menu-view--shop .shop-pill--equipped {
  font-size: calc(10 * var(--pu));
  padding: 0 calc(6 * var(--pu));
}
.main-menu-view--shop .shop-note:not([hidden]) {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #9a4e1c;
}
.shop-choice:not([hidden]) {
  margin: 8px 0 0;
  text-align: center;
}
.shop-choice-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6a4a14;
}
.shop-choice-copy {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  color: #3a5870;
}
.shop-tab-new {
  position: absolute;
  top: 1px;
  right: 1px;
  padding: 1px 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4d6, #efd08a);
  color: #6a4a14;
  font-size: calc(7 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  pointer-events: none;
}
.shop-onboarding {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: calc(22 * var(--world-unit, 1px));
  background: rgba(18, 32, 48, 0.28);
  pointer-events: auto;
}
.shop-onboarding[hidden] { display: none; }
.shop-onboarding-card {
  width: min(100%, calc(300 * var(--world-unit, 1px)));
  padding: calc(22 * var(--world-unit, 1px)) calc(18 * var(--world-unit, 1px)) calc(16 * var(--world-unit, 1px));
  border-radius: calc(22 * var(--world-unit, 1px));
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(255, 244, 224, 0.96));
  border: 1px solid rgba(255, 248, 236, 0.96);
  box-shadow: 0 16px 36px rgba(36, 56, 78, 0.18);
  text-align: center;
  color: #21405a;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
}
.shop-onboarding-title {
  margin: 0;
  font-size: calc(15 * var(--world-unit, 1px));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #6a4a14;
}
.shop-onboarding-copy {
  margin: calc(10 * var(--world-unit, 1px)) 0 0;
  font-size: calc(13 * var(--world-unit, 1px));
  line-height: 1.35;
  font-weight: 650;
}
.shop-onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--world-unit, 1px));
  margin-top: calc(16 * var(--world-unit, 1px));
}
.shop-onboarding-btn {
  appearance: none;
  min-height: calc(42 * var(--world-unit, 1px));
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe7a8, #e7b85a);
  color: #5a3e10;
  font: inherit;
  font-size: calc(13 * var(--world-unit, 1px));
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.shop-onboarding-btn--later {
  min-height: calc(34 * var(--world-unit, 1px));
  background: transparent;
  color: #6d5b48;
}
.complete-card.is-shop > :not(.complete-shop) {
  display: none;
}
.complete-shop:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 18px 8px 8px;
}
.shop-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #8a6418;
}
.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.shop-preview {
  position: relative;
  width: 100%;
  max-width: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 252, 246, 0.72);
}
.shop-art {
  display: block;
  width: 100%;
  height: auto;
}
.shop-equipped-star {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
}
.shop-name {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #6a4a16;
}
.shop-copy,
.shop-status,
.shop-note {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: #8a6418;
  text-align: center;
}
.shop-cta {
  min-width: 120px;
}
.collection-preview--trail .collection-art {
  object-fit: contain;
}
.complete-card--proto920 .complete-line {
  color: #8a4a22;
}
.complete-card--proto920 .complete-cta.is-ready {
  animation: completeSunriseCta 2.4s ease-in-out infinite;
}
.complete-card--proto920 .complete-cta.is-ready:hover,
.complete-card--proto920 .complete-cta.is-ready:focus-visible,
.complete-card--proto920 .complete-cta.is-ready:active {
  animation: none;
  box-shadow:
    0 12px 26px rgba(210, 110, 36, 0.3),
    0 0 22px rgba(255, 196, 80, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.complete-card--proto920 .complete-secondary.complete-daily-board,
.complete-card--proto920 .complete-home {
  margin: 0;
  background: rgba(255, 252, 246, 0.42);
  border-color: rgba(255, 236, 210, 0.7);
  color: #7a5a38;
}
.complete-card--proto920 .complete-story-diamond.is-gold {
  color: #8a4e08;
  background: linear-gradient(180deg, rgba(255, 248, 220, 0.94) 0%, rgba(255, 214, 120, 0.46) 100%);
  box-shadow: 0 0 18px rgba(255, 196, 72, 0.42);
  text-shadow: 0 0 14px rgba(255, 220, 120, 0.9), 0 1px 2px rgba(255, 255, 255, 0.92);
}
.complete-card--proto920 .complete-story-diamond {
  padding: 8px 10px 7px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.7) 0%, rgba(210, 236, 255, 0.28) 100%);
  box-shadow: 0 0 18px rgba(186, 230, 255, 0.28);
}
.complete-breakdown.is-story-hidden {
  display: none;
}
.complete-level {
  margin: 0 0 8px;
  font-family: "Nunito", "Quicksand", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #2a1c12;
  line-height: 1.15;
  text-shadow: 0 1px 10px rgba(255, 248, 230, 0.8);
}
.complete-score-block {
  width: 100%;
  margin: 0 0 2px;
  padding: 8px 12px 8px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 252, 244, 0.58) 0%, rgba(255, 236, 214, 0.3) 100%),
    rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 18px rgba(255, 208, 150, 0.16);
}
.complete-breakdown {
  display: grid;
  gap: 5px;
  margin: 0 0 10px;
}
.complete-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #8a6a4a;
}
.complete-line span:last-child {
  color: #3a2614;
  font-variant-numeric: tabular-nums;
}
.complete-line.is-reveal,
#complete-bonus-row.is-reveal {
  animation: completeBonusIn 0.28s ease forwards;
}
.complete-score {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #3a2614;
  line-height: 1;
}
.complete-score #complete-score {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  line-height: 1;
  transform-origin: center center;
}
.complete-score #complete-score.is-landed {
  animation: completeScoreValueLand 0.42s ease-out forwards;
}
.complete-star {
  flex: 0 0 auto;
  width: 1.55rem;
  font-size: 1.55rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-0.04em) scale(1);
  filter: drop-shadow(0 0 6px rgba(255, 196, 110, 0.42));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.complete-star.is-pop {
  animation: completeStarPop 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.complete-cta-zone {
  width: calc(100% + 16px);
  margin: 8px -8px 0;
  padding: 8px 8px 4px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 252, 246, 0.72) 0%, rgba(255, 244, 228, 0.28) 62%, rgba(255, 236, 210, 0) 100%);
}
.complete-cta-zone .complete-next {
  margin: 0 0 10px;
}
.complete-cta-zone .complete-cta {
  margin-top: 0;
  box-shadow:
    0 14px 28px rgba(120, 72, 28, 0.12),
    0 0 14px rgba(255, 220, 160, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.complete-next {
  margin: 18px 0 8px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #567a92;
}
.complete-best-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6a8aa0;
}
.complete-best-line span:last-child {
  color: #1d3f58;
  font-variant-numeric: tabular-nums;
}
.complete-best {
  margin: 8px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d4893f;
  text-shadow: 0 0 12px rgba(255, 196, 110, 0.42);
  animation: completeBestGlow 2.4s ease-in-out infinite;
}
.complete-world {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.46);
}
.complete-world-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(33, 64, 90, 0.5);
}
.complete-world-value {
  display: block;
  margin-top: 3px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1d4a66;
  font-variant-numeric: tabular-nums;
}
@keyframes completeBonusIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.complete-progress--daily .complete-progress-track {
  display: none;
}
.complete-progress--daily {
  padding-bottom: 0;
}
.complete-footer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin: 8px 0 0;
  align-items: stretch;
}
.complete-footer-actions > .complete-daily-board,
.complete-footer-actions > .complete-home {
  width: 100%;
  min-width: 0;
}
.complete-footer-actions:not(:has(.complete-daily-board:not([hidden]))) {
  grid-template-columns: 1fr;
}
.complete-daily-board {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  margin: 0;
  flex-shrink: 0;
}
.complete-daily-board[hidden] {
  display: none;
}
.complete-cta {
  display: block;
  width: auto;
  max-width: 86%;
  margin: 12px auto 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 247, 255, 0.94) 50%, rgba(236, 238, 252, 0.9) 100%);
  color: #123248;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 12px 26px rgba(72, 118, 156, 0.22),
    0 0 16px rgba(170, 220, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  opacity: 0.45;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.complete-cta.is-ready {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: completeCtaPulse 1.8s ease-in-out infinite;
}
.complete-card--proto920 .complete-cta {
  padding: 9px 16px;
  background: linear-gradient(180deg, #fff6e4 0%, #ffd06a 48%, #ffb03a 100%);
  color: #6a3208;
  letter-spacing: 0.06em;
  box-shadow:
    0 12px 24px rgba(160, 90, 30, 0.14),
    0 0 12px rgba(255, 214, 140, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.complete-cta.is-ready:hover,
.complete-cta.is-ready:focus-visible,
.complete-cta.is-ready:active {
  animation: none;
  transform: translateY(0) scale(1.01);
  box-shadow: 0 16px 34px rgba(72, 118, 156, 0.32), inset 0 1px 0 rgba(255, 255, 255, 1);
  outline: none;
}
.complete-cta:disabled {
  cursor: default;
}
.complete-finale-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin: 10px 0 0;
}
.complete-finale-actions[hidden] {
  display: none;
}
.complete-secondary[hidden] {
  display: none !important;
}
.complete-secondary {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  color: #5a7890;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(80, 130, 170, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.complete-secondary:hover:not(:disabled),
.complete-secondary:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.44);
  border-color: rgba(255, 255, 255, 0.66);
  box-shadow: 0 5px 14px rgba(80, 130, 170, 0.12);
  outline: none;
}
.complete-secondary:disabled {
  opacity: 0.45;
  cursor: default;
}
.complete-secondary.complete-daily-board {
  margin: 0;
}
.overlay-complete--finale .complete-secondary {
  background: rgba(255, 248, 236, 0.46);
  border-color: rgba(255, 236, 200, 0.78);
  color: #6a4a28;
}
.complete-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  color: #5a7890;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(80, 130, 170, 0.08);
}
.complete-home[hidden] {
  display: none !important;
}
.complete-home-icon {
  width: 14px;
  height: 14px;
}
.complete-home:hover,
.complete-home:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  outline: none;
}
.overlay-reward {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  padding: 28px 16px 24px;
  background: rgba(255, 250, 244, 0.28);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.overlay-reward[hidden] {
  display: none !important;
}
.reward-card {
  width: min(100%, 320px);
  padding: 28px 22px 22px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 246, 230, 0.58) 46%, rgba(255, 236, 210, 0.5) 100%),
    rgba(255, 252, 248, 0.7);
  border: 1.2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 18px 42px rgba(72, 118, 156, 0.16),
    0 0 28px rgba(255, 208, 150, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.overlay-reward.is-visible .reward-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reward-kicker {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #8a6a3a;
}
.reward-step {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #a07a3c;
}
.reward-step[hidden] {
  display: none;
}
.reward-art-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 132px;
  margin: 0 0 14px;
}
.reward-art {
  display: block;
  width: 148px;
  height: 148px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
.reward-art.is-wide {
  width: min(88%, 280px);
  height: 72px;
}
.reward-desc {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
  color: #6a8aa0;
}
.reward-desc[hidden] {
  display: none;
}
.reward-name {
  margin: 0 0 6px;
  font-family: "Nunito", "Quicksand", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #17384f;
}
.reward-status {
  margin: 0 0 16px;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: #6a8aa0;
}
.reward-cta {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8ec 0%, #f6e2b8 52%, #efd29a 100%);
  color: #4a3518;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(160, 122, 58, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.reward-cta:hover,
.reward-cta:focus-visible {
  outline: none;
  box-shadow: 0 12px 26px rgba(160, 122, 58, 0.22), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.reward-continue {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  color: #5a7890;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.reward-continue:hover,
.reward-continue:focus-visible {
  background: rgba(255, 255, 255, 0.46);
  outline: none;
}
.overlay-reward.is-milestone .reward-card {
  display: flex;
  flex-direction: column;
}
.overlay-reward.is-milestone .reward-continue {
  order: 1;
  margin: 0 0 10px;
  padding: 14px 18px;
  border: 0;
  background: linear-gradient(180deg, #fff8ec 0%, #f6e2b8 52%, #efd29a 100%);
  color: #4a3518;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow:
    0 10px 22px rgba(160, 122, 58, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.overlay-reward.is-milestone .reward-cta {
  order: 2;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
  color: #5a7890;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  box-shadow: none;
}
.reward-home {
  order: 3;
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: #6a8aa0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.reward-home[hidden] {
  display: none;
}
.overlay-reward.is-detail-open .reward-card {
  display: none;
}
.award-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 28px 16px 24px;
}
.award-detail[hidden] {
  display: none !important;
}
.award-detail-card {
  position: relative;
  width: min(100%, 320px);
  padding: 28px 22px 22px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 246, 230, 0.7) 46%, rgba(255, 236, 210, 0.62) 100%),
    rgba(255, 252, 248, 0.84);
  border: 1.2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 18px 42px rgba(72, 118, 156, 0.18),
    0 0 28px rgba(255, 208, 150, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.award-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #5a7890;
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.award-detail-art-wrap {
  min-height: 168px;
}
.award-detail-art {
  max-width: 196px;
  max-height: 196px;
}
.award-detail-desc,
.award-detail-meta {
  margin: 0 0 8px;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.35;
  color: #6a8aa0;
}
.award-detail-back {
  margin-top: 8px;
}
@media (max-width: 360px) {
  .reward-card {
    width: min(100%, 292px);
    padding: 24px 18px 18px;
  }
  .reward-art {
    width: 120px;
    height: 120px;
  }
  .reward-art.is-wide {
    height: 58px;
  }
  .reward-cta {
    min-height: 46px;
  }
}
.complete-progress {
  position: relative;
  width: 100%;
  margin: 8px 0 0;
  padding: 8px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  background: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.complete-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.complete-progress-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6a8aa0;
}
.complete-progress-count {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1d3f58;
  font-variant-numeric: tabular-nums;
}
.complete-progress-count[hidden] {
  display: none;
}
.complete-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(45, 82, 110, 0.16);
  box-shadow: inset 0 1px 3px rgba(33, 64, 90, 0.12);
  overflow: hidden;
  margin-bottom: 0;
}
.complete-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(86, 172, 226, 1), rgba(255, 236, 210, 1));
  box-shadow: 0 0 14px rgba(140, 210, 255, 0.58);
  transition: width 0.55s ease-out;
}
.complete-progress-fill.is-animate {
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes completeSpark {
  0% { opacity: 0; transform: translateY(8px) scale(0.6); }
  18% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.05); }
}
@keyframes completeTitleGlow {
  0%, 100% { text-shadow: 0 0 14px rgba(255, 196, 80, 0.55), 0 1px 0 rgba(255, 248, 220, 0.9); }
  50% { text-shadow: 0 0 22px rgba(255, 214, 110, 0.92), 0 0 26px rgba(255, 168, 72, 0.42), 0 1px 0 rgba(255, 248, 220, 0.98); }
}
@keyframes completeSunriseCta {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    box-shadow:
      0 12px 24px rgba(160, 90, 30, 0.2),
      0 0 18px rgba(255, 196, 90, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.96);
  }
  50% {
    transform: translateY(0) scale(1.045);
    filter: brightness(1.08);
    box-shadow:
      0 16px 32px rgba(180, 90, 20, 0.28),
      0 0 28px rgba(255, 210, 110, 0.72),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }
}
@keyframes completeMissionGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(255, 210, 140, 0.45); }
  50% { text-shadow: 0 0 18px rgba(255, 220, 160, 0.85), 0 0 22px rgba(255, 186, 100, 0.35); }
}
@keyframes completeStarPop {
  0% { transform: translateY(-0.04em) scale(0.76); filter: brightness(0.94); opacity: 0.82; }
  42% { transform: translateY(-0.04em) scale(1.17); filter: brightness(1.24) drop-shadow(0 0 11px rgba(255, 224, 140, 0.62)); opacity: 1; }
  100% { transform: translateY(-0.04em) scale(1); filter: brightness(1.06) drop-shadow(0 0 5px rgba(255, 224, 140, 0.28)); opacity: 1; }
}
@keyframes completeScoreValueLand {
  0% { transform: scale(1); text-shadow: 0 0 0 rgba(255, 208, 150, 0); }
  48% { transform: scale(1.028); text-shadow: 0 0 16px rgba(255, 208, 150, 0.36); }
  100% { transform: scale(1); text-shadow: 0 0 10px rgba(255, 208, 150, 0.16); }
}
@keyframes completeCardSheen {
  0%, 100% { background-position: 0 0, 120% 0; }
  50% { background-position: 0 0, -20% 0; }
}
@keyframes completeBestGlow {
  0%, 100% { color: #d4893f; text-shadow: 0 0 10px rgba(255, 196, 110, 0.32); }
  50% { color: #e09a4c; text-shadow: 0 0 16px rgba(255, 196, 110, 0.55); }
}
.overlay-complete--finale .complete-card {
  background:
    linear-gradient(180deg, rgba(255, 252, 240, 0.78) 0%, rgba(255, 236, 210, 0.5) 42%, rgba(255, 220, 176, 0.42) 100%),
    rgba(255, 248, 236, 0.68);
  border-color: rgba(255, 244, 224, 0.96);
  box-shadow:
    0 18px 42px rgba(120, 84, 42, 0.12),
    0 0 42px rgba(255, 196, 110, 0.28),
    0 0 26px rgba(170, 214, 240, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.overlay-complete--finale .complete-card::after {
  width: 220px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 236, 186, 0.72) 0%, rgba(255, 196, 110, 0.28) 46%, rgba(255, 196, 110, 0) 74%);
}
.overlay-complete--finale .complete-title {
  font-size: 1.18rem;
  letter-spacing: 0.12em;
  color: #8a5a28;
  text-shadow: 0 0 16px rgba(255, 220, 160, 0.55);
  animation: completeFinaleTitleGlow 3.2s ease-in-out infinite;
}
.overlay-complete--finale .complete-level {
  font-size: 1.02rem;
  font-weight: 700;
  color: #5a3e22;
}
.overlay-complete--finale .complete-next {
  color: #8a5a28;
  font-weight: 700;
}
.overlay-complete--finale .complete-world-label {
  color: rgba(90, 62, 34, 0.62);
}
.overlay-complete--finale .complete-progress-name {
  color: rgba(90, 62, 34, 0.58);
}
.overlay-complete--finale .complete-progress-count {
  color: #5a3e22;
}
.overlay-complete--finale .complete-sparkles span {
  background: radial-gradient(circle, rgba(255, 252, 236, 0.98) 0%, rgba(255, 196, 110, 0.58) 42%, rgba(255, 196, 110, 0) 72%);
}
.overlay-complete--finale .complete-progress-fill {
  background: linear-gradient(90deg, rgba(214, 164, 82, 0.95), rgba(255, 236, 196, 1));
  box-shadow: 0 0 14px rgba(255, 196, 110, 0.48);
}
.world-complete-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.world-complete-fx[hidden] {
  display: none;
}
.world-complete-glow {
  position: absolute;
  inset: -8%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 236, 196, 0.72) 0%, rgba(255, 196, 140, 0.28) 38%, rgba(255, 214, 170, 0) 68%);
  animation: worldCompleteGlow 2.1s ease-out forwards;
}
.world-complete-bit {
  position: absolute;
  left: var(--x);
  top: 16%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
  animation: worldCompleteBit var(--dur) ease-out var(--delay) forwards;
}
.world-complete-bit.is-star {
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(255, 236, 196, 0.8);
}
.complete-card--world .complete-title {
  font-size: 1.42rem;
  letter-spacing: 0.08em;
}
.complete-card--world .complete-level {
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.complete-card--world .complete-score-block,
.complete-card--world .complete-next,
.complete-card--world .complete-progress,
.complete-card--world #complete-reward,
.complete-card--world #complete-gold-reward,
.complete-card--world #complete-story-diamond,
.complete-card--world #complete-story-bricks-row,
.complete-card--world #complete-story-powerups-row {
  display: none;
}
.complete-card--world .complete-progress--world .complete-progress-name {
  color: #8a5a28;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.complete-card--world .complete-progress-fill {
  background: linear-gradient(90deg, #e7c27a 0%, #fff6e4 48%, #f3d7a2 100%);
  box-shadow: 0 0 16px rgba(255, 214, 140, 0.72);
}
.complete-world-reward {
  display: grid;
  gap: 8px;
  margin: 8px 0 4px;
  text-align: center;
}
.complete-world-reward[hidden] {
  display: none;
}
.complete-world-reward-gold,
.complete-world-reward-paddle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: #8a5a28;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.complete-world-reward-paddle img {
  width: 72px;
  height: auto;
}
.complete-story-diamond.is-final-chest.is-pop .complete-story-icon {
  animation: finalChestPop 0.78s ease-out both;
}
.complete-story-diamond.is-final-chest.is-pop .complete-story-gem-wrap::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 214, 140, 0.85);
  animation: finalChestRing 0.78s ease-out both;
  pointer-events: none;
}
@keyframes worldCompleteGlow {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes worldCompleteBit {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  18% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(120px) scale(1); }
}
.world-complete-bit.is-star {
  animation-name: worldCompleteStar;
}
@keyframes worldCompleteStar {
  0% { opacity: 0; transform: translateY(0) rotate(45deg) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(96px) rotate(45deg) scale(1.15); }
}
.world-finale {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: auto;
  padding:
    max(14px, env(safe-area-inset-top, 0px))
    14px
    max(14px, env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  text-align: center;
  color: #3a2a18;
}
.world-finale[hidden] {
  display: none !important;
}
.pack-complete {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  padding:
    max(18px, env(safe-area-inset-top, 0px))
    18px
    max(18px, env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  text-align: center;
  color: #3a2a18;
}
.pack-complete[hidden] {
  display: none !important;
}
.pack-complete.is-rockfall .pack-complete-glow {
  width: 160%;
  height: 78%;
  top: 6%;
  left: -30%;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(232, 168, 72, 0.26), rgba(232, 168, 72, 0.06) 46%, transparent 72%);
  filter: blur(22px);
}
.pack-complete-glow {
  position: absolute;
  width: min(86vw, 320px);
  height: min(86vw, 320px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 250, 242, 0.72) 0%,
    rgba(168, 226, 236, 0.34) 38%,
    rgba(214, 190, 244, 0.22) 62%,
    rgba(255, 214, 186, 0.08) 74%,
    transparent 78%);
  filter: blur(6px);
  pointer-events: none;
}
.pack-complete-bubbles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pack-complete-bubble {
  position: absolute;
  left: var(--x);
  bottom: -12%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85), transparent 28%),
    radial-gradient(circle at 50% 58%, var(--c), transparent 68%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.28);
  opacity: 0;
  animation: packBubbleRise var(--dur) ease-in var(--delay) infinite;
}
.pack-complete-bubble.is-shimmer {
  background: radial-gradient(circle, var(--c), transparent 70%);
  border: 0;
  box-shadow: none;
  filter: blur(0.3px);
}
.pack-complete-bubble.is-large {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.96), transparent 16%),
    radial-gradient(circle at 72% 64%, rgba(255, 186, 156, 0.62), transparent 40%),
    radial-gradient(circle at 34% 74%, rgba(168, 206, 255, 0.7), transparent 52%),
    radial-gradient(circle at 48% 42%, rgba(226, 196, 255, 0.55), transparent 46%),
    radial-gradient(circle at 50% 50%, var(--c), transparent 68%);
  border: 1.5px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.55),
    0 0 36px rgba(168, 214, 255, 0.48);
}
.pack-complete-bubble.is-burst {
  bottom: 46%;
  animation: packBubbleBurst 0.7s ease-out var(--delay) 1 both;
}
@keyframes packBubbleBurst {
  0% { transform: translate3d(0, 16px, 0) scale(0.42); opacity: 0; }
  36% { opacity: var(--a); }
  100% { transform: translate3d(var(--drift), -88px, 0) scale(1.12); opacity: 0; }
}
.pack-complete.is-in .pack-complete-glow {
  animation: packGlowBurst 0.85s ease-out;
}
@keyframes packGlowBurst {
  0% { transform: scale(0.7); opacity: 0.15; }
  42% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.pack-complete.is-rockfall .pack-complete-stone {
  position: absolute;
  left: var(--x);
  bottom: -8%;
  width: var(--s);
  height: var(--s);
  opacity: 0;
  pointer-events: none;
  animation: packStoneRise var(--dur) ease-in-out var(--delay) infinite;
}
.pack-complete.is-rockfall .pack-complete-stone.is-fragment {
  top: var(--y);
  bottom: auto;
  width: var(--w);
  height: var(--h);
  background: none;
  animation: packStoneFall var(--dur) ease-in-out var(--delay) infinite;
}
.pack-complete-stone.is-fragment img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.pack-complete-stone.is-spark {
  border-radius: 50%;
  background: radial-gradient(circle, #fff4cf 0%, #e7b45a 55%, transparent 72%);
  box-shadow: 0 0 8px rgba(231, 180, 90, 0.65);
}
.pack-complete.is-rockfall .pack-complete-stone.is-spark {
  border-radius: 40%;
  filter: blur(2.4px);
  background: radial-gradient(circle, rgba(255, 236, 190, 0.85) 0%, rgba(231, 160, 60, 0.35) 46%, transparent 74%);
  box-shadow: none;
}
.pack-complete-stone.is-dust {
  background: url("assets/StoneBreaker_DustPuff.webp?v=729") center / contain no-repeat;
  filter: saturate(0.85);
}
.pack-complete-stone.is-burst {
  bottom: 42%;
  animation: packStoneBurst 0.8s ease-out var(--delay) 1 both;
}
@keyframes packStoneRise {
  0% { transform: translate3d(0, 12px, 0) rotate(0deg); opacity: 0; }
  16% { opacity: 0.82; }
  100% { transform: translate3d(var(--drift), -108vh, 0) rotate(28deg); opacity: 0; }
}
@keyframes packStoneFall {
  0% { transform: translate3d(0, -12vh, 0) rotate(var(--rot)); opacity: 0; }
  1.5% { opacity: 0.97; }
  100% { transform: translate3d(var(--drift), 72vh, 0) rotate(var(--spin)); opacity: 0.12; }
}
@keyframes packStoneBurst {
  0% { transform: translate3d(0, 10px, 0) scale(0.4); opacity: 0; }
  40% { opacity: 0.9; }
  100% { transform: translate3d(var(--drift), -70px, 0) scale(1); opacity: 0; }
}
@keyframes packBubbleRise {
  0% { transform: translate3d(0, 24px, 0) scale(0.86); opacity: 0; }
  14% { opacity: var(--a); }
  100% { transform: translate3d(var(--drift), -118vh, 0) scale(1.04); opacity: 0; }
}
.pack-complete-card {
  position: relative;
  z-index: 1;
  width: min(100%, 318px);
  margin: auto;
  padding: 28px 22px 18px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 252, 248, 0.98) 0%, rgba(255, 246, 236, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 18px 40px rgba(72, 96, 120, 0.16),
    0 0 36px rgba(168, 220, 232, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.42s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
.pack-complete.is-in .pack-complete-card {
  opacity: 1;
  transform: none;
}
.pack-complete-kicker {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #6a8ea0;
}
.pack-complete-title {
  margin: 0;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.05;
  color: #5c4030;
}
.pack-complete-count {
  margin: 14px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #3d8f98;
}
.pack-complete-award {
  position: relative;
  width: min(62%, 188px);
  margin: 12px auto 0;
  isolation: isolate;
}
.pack-complete.is-wacky .pack-complete-award {
  width: min(44%, 168px);
}
.pack-complete-award-glow {
  position: absolute;
  z-index: 0;
  inset: 6% 2%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 250, 236, 0.96) 0%,
    rgba(150, 226, 236, 0.62) 30%,
    rgba(214, 186, 255, 0.46) 54%,
    rgba(232, 196, 120, 0.24) 70%,
    transparent 78%);
  filter: blur(8px);
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}
.pack-complete-award img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  transform: scale(0.82);
  opacity: 0;
  filter: brightness(1);
}
.pack-complete-award::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 6% 4%;
  border-radius: 46%;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 252, 244, 0.82) 48%, transparent 64%);
  transform: translateX(-130%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.pack-complete.is-in .pack-complete-award img {
  animation:
    packAwardIn 0.52s cubic-bezier(0.22, 0.82, 0.28, 1) forwards,
    packAwardBreathe 1.8s ease-in-out 0.52s infinite;
}
.pack-complete.is-in .pack-complete-award-glow {
  animation: packAwardGlow 1.75s ease-in-out 0.16s infinite;
}
.pack-complete.is-in .pack-complete-award::after {
  animation: packAwardShimmer 0.62s ease-out 0.18s 1 both;
}
@keyframes packAwardIn {
  0% { transform: scale(0.82); opacity: 0; filter: brightness(0.92); }
  62% { transform: scale(1.05); opacity: 1; filter: brightness(1.08); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes packAwardBreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}
@keyframes packAwardGlow {
  0%, 100% { opacity: 0.34; transform: scale(0.92); }
  50% { opacity: 0.95; transform: scale(1.05); }
}
@keyframes packAwardShimmer {
  from { transform: translateX(-130%); opacity: 0.15; }
  to { transform: translateX(130%); opacity: 0; }
}
.pack-complete-gold {
  margin: 10px 0 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #c4882a;
}
.pack-complete-gold[hidden] {
  display: none !important;
}
.pack-complete-gold.is-reward {
  animation: packGoldPulse 0.9s ease-out 1;
}
@keyframes packGoldPulse {
  0% { transform: scale(0.92); text-shadow: 0 0 0 transparent; }
  38% { transform: scale(1.08); text-shadow: 0 0 18px rgba(255, 206, 110, 0.95); }
  100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}
.pack-complete-actions {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}
.pack-complete-again,
.pack-complete-back {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.pack-complete-again {
  border: 0;
  color: #5c4030;
  background: linear-gradient(180deg, #fff8ee 0%, #f3d7a4 100%);
  box-shadow: 0 8px 16px rgba(196, 148, 72, 0.18);
}
.pack-complete-back {
  border: 1px solid rgba(122, 164, 176, 0.45);
  color: #4d6d78;
  background: rgba(255, 255, 255, 0.72);
}
.world-finale-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  animation: worldBgBreath 9.6s ease-in-out infinite;
}
.world-finale-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 22, 16, 0.05) 0%, rgba(28, 22, 16, 0.16) 28%, rgba(24, 18, 14, 0.2) 72%, rgba(18, 16, 14, 0.06) 100%);
}
.world-finale-card {
  position: relative;
  z-index: 1;
  width: min(100%, 336px);
  margin: auto;
  padding: 10px 14px 10px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 248, 236, 0.96) 0%, rgba(255, 252, 246, 0.94) 100%);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 18px 40px rgba(24, 20, 16, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.world-finale-title {
  display: grid;
  margin: 0;
  justify-items: center;
}
.world-finale-title-line {
  font-size: 1.48rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.02;
  color: #5a3414;
}
.world-finale-sub {
  margin: 6px 0 0;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(90, 52, 20, 0.68);
}
.world-finale-mission-kicker {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #e15a28;
}
.world-finale-mission-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 3px 0 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #5a3414;
}
.world-finale-mission-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.world-finale-reward-kicker {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #8a5a22;
}
.world-finale-stage {
  position: relative;
  height: 214px;
  margin: 4px 0 0;
  overflow: hidden;
}
.world-finale-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 86%;
  height: 86%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 244, 220, 0.72) 0%, rgba(255, 214, 150, 0.28) 46%, rgba(255, 214, 150, 0) 72%);
  pointer-events: none;
}
.world-finale-breath {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 1;
  width: 78px;
  height: 46px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 236, 186, 0.92) 0%, rgba(255, 196, 110, 0.42) 42%, rgba(255, 186, 90, 0) 72%);
  filter: blur(2px);
  pointer-events: none;
  animation: worldChestBreath 4.4s ease-in-out infinite;
}
.world-finale-glow,
.world-finale-sparkle,
.world-finale-chest {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.world-finale-glow {
  left: 50%;
  top: 50%;
  width: 118%;
  z-index: 0;
  filter: brightness(1.16) saturate(1.2);
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation: worldRewardGlow 5.6s ease-in-out infinite;
}
.world-finale-chest {
  left: 50%;
  top: 50%;
  width: 198px;
  max-width: 74%;
  z-index: 2;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 16px rgba(74, 42, 12, 0.28));
}
.world-finale-rise {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 52px;
  height: 16px;
  margin: -8px 0 0 -26px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 228, 168, 0.95) 0%, rgba(255, 196, 110, 0.28) 58%, rgba(255, 186, 90, 0) 78%);
  filter: blur(1.6px);
  pointer-events: none;
  opacity: 0;
  animation: worldChestRise 7.8s ease-in-out infinite;
}
.world-finale-glint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 214, 130, 0) 0%, rgba(255, 248, 224, 0.96) 46%, rgba(255, 206, 112, 0.4) 74%, rgba(255, 186, 70, 0) 100%);
  mix-blend-mode: screen;
  filter: blur(0.35px);
  pointer-events: none;
  opacity: 0;
}
.world-finale-glint--rim {
  width: 26px;
  height: 4px;
  margin: -2px 0 0 -13px;
  animation: worldGlintRim 7.6s ease-in-out 0.4s infinite;
}
.world-finale-glint--band {
  width: 4px;
  height: 16px;
  margin: -8px 0 0 -2px;
  animation: worldGlintBand 9.1s ease-in-out 2.7s infinite;
}
.world-finale-glint--coins {
  width: 18px;
  height: 6px;
  margin: -3px 0 0 -9px;
  animation: worldGlintCoins 6.8s ease-in-out 1.6s infinite;
}
.world-finale-glint--clasp {
  width: 14px;
  height: 4px;
  margin: -2px 0 0 -7px;
  animation: worldGlintClasp 11.2s ease-in-out 4.2s infinite;
}
.world-finale-glint--corner {
  width: 12px;
  height: 4px;
  margin: -2px 0 0 -6px;
  animation: worldGlintCorner 8.3s ease-in-out 5.5s infinite;
}
.world-finale-sparkle {
  z-index: 3;
  width: 34px;
  opacity: 0;
}
.world-finale-sparkle--a {
  left: 16%;
  top: 16%;
  animation: worldSparkleFade 4.6s ease-in-out infinite;
}
.world-finale-sparkle--b {
  right: 14%;
  top: 24%;
  width: 26px;
  animation: worldSparkleFade 3.8s ease-in-out 1.35s infinite;
}
.world-finale-sparkle--c {
  left: 58%;
  bottom: 14%;
  width: 22px;
  animation: worldSparkleFade 5.2s ease-in-out 2.55s infinite;
}
.world-finale-reward-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.world-finale-reward-copy {
  display: grid;
  justify-items: start;
  gap: 1px;
  text-align: left;
}
.world-finale-reward-gold {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #8a4e08;
  animation: worldGoldTextPulse 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}
.world-finale-reward-diamond {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #3d6f9a;
}
.world-finale-reward-diamond[hidden] {
  display: none;
}
.world-finale-paddle {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 8px 0 0;
}
.world-finale-paddle[hidden] {
  display: none;
}
.world-finale-paddle-art {
  width: 118px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(196, 140, 64, 0.28));
}
.world-finale-paddle-name {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8a4e08;
}
.world-finale-coins-wrap {
  position: relative;
  width: 101px;
  height: 59px;
  flex: 0 0 auto;
  overflow: hidden;
}
.world-finale-coin-sheen {
  position: absolute;
  top: 4px;
  left: 0;
  width: 28px;
  height: 20px;
  border-radius: 40%;
  background: linear-gradient(100deg, rgba(255, 248, 220, 0) 0%, rgba(255, 250, 232, 0.9) 48%, rgba(255, 220, 150, 0) 100%);
  mix-blend-mode: screen;
  filter: blur(0.5px);
  pointer-events: none;
  animation: worldCoinSheen 0.4s ease-out 0.9s 1 both;
}
.world-finale-coins {
  position: static;
  width: 101px;
  height: 59px;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  animation: worldRewardSettle 0.9s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}
.world-finale-next-kicker {
  margin: 10px 0 0;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: rgba(90, 52, 20, 0.55);
}
.world-finale-next-name {
  margin: 2px 0 0;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7b57b8;
  text-shadow: 0 0 16px rgba(150, 110, 210, 0.38);
  animation: worldGardenReveal 1.35s ease both;
}
.world-finale-next-line {
  margin: 3px 0 0;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: rgba(90, 52, 20, 0.72);
}
.world-finale-continue {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  padding: 12px 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe7a8 0%, #f0b84a 52%, #e09a2e 100%);
  color: #5a3208;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow:
    0 10px 22px rgba(176, 112, 32, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: worldCtaPulse 3s ease-in-out infinite;
  transform-origin: center;
}
.world-finale-continue:disabled,
.world-finale-quiet:disabled {
  opacity: 0.55;
  cursor: default;
}
.world-finale-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
.world-finale-quiet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 8px 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(90, 62, 34, 0.05);
  color: rgba(58, 42, 24, 0.52);
  font: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}
.world-finale-quiet img,
.world-finale-home-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}
@keyframes worldRewardGlow {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}
@keyframes worldChestBreath {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 0.78; }
}
@keyframes worldSparkleFade {
  0%, 62%, 100% { opacity: 0; }
  76%, 88% { opacity: 0.82; }
}
@keyframes worldRewardSettle {
  0% { opacity: 0; transform: translateY(3px); }
  68% { opacity: 1; transform: translateY(-1.5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes worldGardenReveal {
  0% { opacity: 0; text-shadow: 0 0 0 rgba(150, 110, 210, 0); }
  58% { opacity: 1; text-shadow: 0 0 18px rgba(186, 150, 230, 0.72); }
  100% { opacity: 1; text-shadow: 0 0 16px rgba(150, 110, 210, 0.38); }
}
@keyframes worldBgBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
@keyframes worldChestRise {
  0%, 5% { opacity: 0; transform: translate(-2px, 6px); }
  13% { opacity: 0.36; transform: translate(0, -6px); }
  18%, 48% { opacity: 0; transform: translate(1px, -16px); }
  57% { opacity: 0; transform: translate(2px, 4px); }
  62% { opacity: 0.28; transform: translate(0, -8px); }
  68%, 100% { opacity: 0; transform: translate(-1px, -14px); }
}
@keyframes worldGlintRim {
  0%, 9% { opacity: 0; transform: translate(-36px, -38px) rotate(-14deg); }
  12% { opacity: 0.62; transform: translate(-28px, -40px) rotate(-14deg); }
  16%, 100% { opacity: 0; transform: translate(-20px, -42px) rotate(-14deg); }
}
@keyframes worldGlintBand {
  0%, 7% { opacity: 0; transform: translate(67px, -13px) rotate(8deg); }
  10% { opacity: 0.55; transform: translate(67px, -3px) rotate(8deg); }
  13%, 100% { opacity: 0; transform: translate(67px, 7px) rotate(8deg); }
}
@keyframes worldGlintCoins {
  0%, 21% { opacity: 0; transform: translate(-21px, -3px) rotate(-6deg); }
  25% { opacity: 0.58; transform: translate(-7px, -5px) rotate(-6deg); }
  29%, 100% { opacity: 0; transform: translate(9px, -5px) rotate(-6deg); }
}
@keyframes worldGlintClasp {
  0%, 13% { opacity: 0; transform: translate(2px, 24px) rotate(-18deg); }
  16% { opacity: 0.5; transform: translate(6px, 22px) rotate(-18deg); }
  19%, 100% { opacity: 0; transform: translate(9px, 20px) rotate(-18deg); }
}
@keyframes worldGlintCorner {
  0%, 30% { opacity: 0; transform: translate(-58px, 44px) rotate(22deg); }
  33.5% { opacity: 0.52; transform: translate(-50px, 40px) rotate(22deg); }
  37%, 100% { opacity: 0; transform: translate(-42px, 36px) rotate(22deg); }
}
@keyframes worldGoldTextPulse {
  0%, 100% { text-shadow: 0 0 0 rgba(255, 186, 64, 0); }
  68% { text-shadow: 0 0 12px rgba(255, 176, 48, 0.78); }
}
@keyframes worldCoinSheen {
  0% { opacity: 0; transform: translateX(-6px); }
  28% { opacity: 0.62; }
  100% { opacity: 0; transform: translateX(76px); }
}
@keyframes worldCtaPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      0 10px 22px rgba(176, 112, 32, 0.26),
      0 0 0 0 rgba(255, 214, 120, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
  50% {
    transform: scale(1.025);
    filter: brightness(1.06);
    box-shadow:
      0 12px 26px rgba(176, 112, 32, 0.32),
      0 0 18px 1px rgba(255, 214, 120, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .world-finale-bg,
  .world-finale-glow,
  .world-finale-breath,
  .world-finale-rise,
  .world-finale-glint,
  .world-finale-sparkle,
  .world-finale-coins,
  .world-finale-coin-sheen,
  .world-finale-reward-gold,
  .world-finale-next-name,
  .world-finale-continue {
    animation: none;
  }
}
@keyframes finalChestPop {
  0% { transform: scale(0.92); filter: drop-shadow(0 0 0 rgba(255, 210, 120, 0)); }
  55% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(255, 210, 120, 0.9)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 210, 120, 0.45)); }
}
@keyframes finalChestRing {
  0% { opacity: 0.2; transform: scale(0.86); }
  70% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.18); }
}
@keyframes completeFinaleTitleGlow {
  0%, 100% { text-shadow: 0 0 12px rgba(255, 220, 160, 0.4), 0 0 0 rgba(255, 196, 110, 0); }
  50% { text-shadow: 0 0 20px rgba(255, 220, 160, 0.7), 0 0 24px rgba(255, 196, 110, 0.28); }
}
.rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: #102232;
  color: #e8f4fc;
  text-align: center;
  font-family: "Nunito", "Quicksand", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rotate-overlay[hidden] {
  display: none;
}
.rotate-overlay p {
  margin: 0;
}
.debug-overlay {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 8;
  pointer-events: none;
  font: 500 10px/1.35 ui-monospace, Consolas, monospace;
  color: rgba(255, 253, 248, 0.88);
  background: rgba(12, 28, 40, 0.46);
  padding: 6px 8px;
  border-radius: 8px;
  white-space: pre;
}
.debug-overlay[hidden] {
  display: none;
}
.start-screen {
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
}
.start-screen[hidden] {
  display: none;
}
.playfield.is-start {
  background-color: transparent;
  background-image: url("assets/home/Home_Background_Menu_v4.webp?v=729");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.playfield.is-start .hud,
.playfield.is-start .level-intro,
.playfield.is-start .bottom-control-zone,
.playfield.is-start .release-calm-hint,
.playfield.is-start .aim-guide-hint,
.playfield.is-start .stone-recharge-hint,
.playfield.is-menu .hud,
.playfield.is-menu .level-intro,
.playfield.is-menu .bottom-control-zone,
.playfield.is-menu .release-calm-hint,
.playfield.is-menu .aim-guide-hint,
.playfield.is-menu .stone-recharge-hint,
.playfield.is-menu .second-chance-banner {
  visibility: hidden;
}
.playfield.is-shell #game,
.playfield.is-shell .level-intro,
.playfield.is-shell .hud,
.playfield.is-shell .overlay,
.playfield.is-shell .mission-toast,
.playfield.is-shell .bottom-control-zone,
.playfield.is-shell .release-calm-hint,
.playfield.is-shell .aim-guide-hint,
.playfield.is-shell .stone-recharge-hint,
.playfield.is-shell .second-chance-banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  animation: none !important;
}
.start-screen-bg,
.start-screen-dim {
  position: absolute;
  inset: 0;
  bottom: calc(-1 * env(safe-area-inset-bottom, 0px) - 64px);
  pointer-events: none;
}
.start-screen-bg {
  z-index: 0;
  background-color: transparent;
  background-image: url("assets/home/Home_Background_Menu_v4.webp?v=729");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0;
}
.start-screen.is-ready .start-screen-bg {
  animation: startBgIn 720ms ease-out forwards;
}
.start-screen-dim {
  z-index: 2;
  background: #b7e4f6;
  opacity: 1;
}
.start-screen.is-ready .start-screen-dim {
  animation: startDimOut 520ms ease-out forwards;
}
.start-screen-stack {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(8px, calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 1.6%))
    5.6%
    max(12px, calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px));
}
.start-logo {
  display: block;
  width: min(65cqi, 72%);
  max-width: 260px;
  max-height: 17%;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(10px);
  transform-origin: center center;
  pointer-events: none;
}
.start-screen.is-ready .start-logo {
  animation:
    startLogoIn 800ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards,
    homeLogoBreathe 4.6s ease-in-out 1.2s infinite;
}
.start-logo-sheen {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  clip-path: inset(43% 5% 10% 5%);
  -webkit-mask-image: url("assets/Intro_Harmony_Bounce_Logo.webp?v=729");
  mask-image: url("assets/Intro_Harmony_Bounce_Logo.webp?v=729");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.start-logo-sheen::after {
  content: "";
  position: absolute;
  top: 43%;
  left: -18%;
  width: 12%;
  height: 46%;
  background: linear-gradient(
    118deg,
    transparent 18%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0) 60%,
    transparent 82%
  );
  filter: blur(2.5px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(0) rotate(14deg);
  will-change: transform, opacity;
}
.start-screen.is-ready .start-logo-sheen::after {
  animation: startLogoSheen 7.5s ease-in-out 2.2s infinite;
}
.start-slogan {
  margin: 4px 0 0;
  padding: 0;
  flex: 0 0 auto;
  color: #ffffff;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(10px, 3.1cqi, 13px);
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  text-align: center;
  background: none;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.4),
    0 1px 8px rgba(18, 44, 72, 0.58),
    0 0 1px rgba(255, 255, 255, 0.96);
  opacity: 0;
}
.start-screen.is-ready .start-slogan {
  animation: startFadeIn 600ms ease-out 450ms forwards;
}
.home-nav {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 7px;
  padding-bottom: 26px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.985);
}
.home-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.start-screen.is-ready .home-nav {
  animation: homeNavIn 520ms cubic-bezier(0.22, 1, 0.36, 1) 640ms forwards;
}
.start-screen.is-live .home-nav {
  pointer-events: auto;
}
.home-nav > * {
  flex-shrink: 0;
}
.home-card,
.home-tile,
.home-util {
  position: relative;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 246, 234, 0.86);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}
.home-card:active,
.home-tile:active,
.home-util:active {
  transform: scale(0.98);
  box-shadow:
    0 4px 10px rgba(80, 100, 130, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.home-card {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 86px;
  padding: 0 10px 0 0;
  border-radius: 24px;
}
.home-card-art {
  justify-self: stretch;
  align-self: stretch;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.home-card-copy {
  min-width: 0;
  padding: 10px 8px 10px 4px;
}
.home-card-title {
  display: block;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fffaf4;
  line-height: 1.05;
  text-shadow:
    0 1px 2px rgba(36, 72, 110, 0.22),
    0 0 10px rgba(255, 255, 255, 0.18);
}
.home-card-sub {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.28;
  color: #2f4a64;
}
.home-card-world,
.home-card-level {
  display: block;
}
.home-card-arrow,
.home-card-arrow--mini {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: end;
  flex: 0 0 auto;
  pointer-events: none;
}
.home-card-arrow {
  align-self: end;
  width: 36px;
  height: 36px;
  margin-bottom: 11px;
  border-radius: 50%;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #78d4f0 0%, #3db4e8 58%, #2a96ce 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 5px 12px rgba(36, 150, 200, 0.26),
    0 0 9px rgba(80, 210, 255, 0.23),
    inset 0 1px 2px rgba(255, 255, 255, 0.42),
    inset 0 -4px 6px rgba(20, 90, 140, 0.26);
}
.home-card-arrow::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  right: 7px;
  height: 36%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.04));
  pointer-events: none;
}
.home-card-chevron {
  position: relative;
  z-index: 1;
  display: block;
  width: 16px;
  height: 16px;
  transform: translateX(0.6px);
  filter: drop-shadow(0 1px 1px rgba(20, 60, 90, 0.28));
}
.home-card--continue .home-card-arrow {
  color: #fff;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #78d8f2 0%, #42b8e6 56%, #2498d6 100%);
  box-shadow:
    0 5px 12px rgba(32, 150, 210, 0.3),
    0 0 10px rgba(70, 210, 255, 0.27),
    inset 0 1px 2px rgba(255, 255, 255, 0.44),
    inset 0 -4px 6px rgba(16, 90, 140, 0.28);
}
.home-card--daily .home-card-arrow {
  color: #fff;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #f2a8ba 0%, #ef7a96 56%, #e85a7a 100%);
  box-shadow:
    0 5px 12px rgba(220, 80, 120, 0.28),
    0 0 10px rgba(255, 150, 180, 0.26),
    inset 0 1px 2px rgba(255, 255, 255, 0.44),
    inset 0 -4px 6px rgba(160, 40, 80, 0.26);
}
.home-card--create .home-card-arrow {
  color: #fff;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #8fe0cc 0%, #4ed4b4 56%, #2fb89a 100%);
  box-shadow:
    0 5px 12px rgba(32, 160, 130, 0.26),
    0 0 10px rgba(90, 230, 190, 0.24),
    inset 0 1px 2px rgba(255, 255, 255, 0.44),
    inset 0 -4px 6px rgba(16, 110, 90, 0.26);
}
.home-card--continue {
  grid-template-columns: 36% minmax(0, 1fr) 44px;
  min-height: 114px;
  background:
    linear-gradient(100deg,
      rgba(210, 236, 255, 0.28) 0%,
      rgba(160, 216, 246, 0.5) 30%,
      rgba(72, 172, 224, 0.86) 62%,
      rgba(36, 148, 210, 0.94) 100%);
  box-shadow:
    0 12px 24px rgba(88, 126, 168, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(70, 150, 200, 0.12);
}
.home-card--continue .home-card-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.045em;
  color: #fffaf4;
}
.home-card--continue .home-card-art {
  background-position: 8% center;
  background-size: cover;
  mask-image: linear-gradient(90deg, #000 68%, transparent 100%);
}
.home-continue-orb {
  position: absolute;
  left: 7%;
  top: 50%;
  width: 58px;
  height: auto;
  transform: translateY(-58%);
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(80, 130, 180, 0.22));
  animation: homeOrbFloat 3s ease-in-out infinite alternate;
}
.home-card--daily {
  min-height: 92px;
  background:
    linear-gradient(100deg,
      rgba(255, 226, 232, 0.28) 0%,
      rgba(248, 178, 200, 0.56) 30%,
      rgba(226, 112, 164, 0.9) 62%,
      rgba(198, 88, 166, 0.96) 100%);
  box-shadow:
    0 10px 20px rgba(168, 96, 120, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.home-card--daily .home-card-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.035em;
  color: #fffaf4;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 1px 3px rgba(36, 72, 110, 0.26),
    0 0 14px rgba(255, 255, 255, 0.3);
}
.home-card--daily .home-card-copy {
  padding-right: 6px;
}
.home-card--daily .home-card-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  white-space: normal;
}
.home-daily-name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #243e56;
}
.home-daily-status {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #ffc4a0;
  text-shadow:
    0 1px 0 rgba(70, 18, 42, 0.46),
    0 1px 3px rgba(48, 12, 30, 0.48);
}
.home-card--daily .home-card-art {
  position: relative;
  overflow: hidden;
  background-position: 4% center;
  background-size: cover;
  mask-image: linear-gradient(90deg, #000 64%, transparent 100%);
}
.home-card-art--daily::after {
  content: none;
  display: none;
}
.home-daily-done,
.home-daily-done[hidden],
.home-card--create[hidden] {
  display: none;
}
.home-daily-done {
  position: absolute;
  top: 10px;
  right: 52px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5f7d68;
}
.home-daily-check {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #dff6e6, #b7e4c6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.home-daily-check::before {
  content: "";
  display: block;
  width: 6px;
  height: 3px;
  margin: 3px 0 0 3px;
  border-left: 1.6px solid #3d6a4e;
  border-bottom: 1.6px solid #3d6a4e;
  transform: rotate(-45deg);
}
.home-card--create {
  min-height: 88px;
  background:
    linear-gradient(100deg,
      rgba(214, 248, 238, 0.28) 0%,
      rgba(158, 238, 220, 0.54) 30%,
      rgba(50, 198, 176, 0.88) 62%,
      rgba(24, 176, 158, 0.94) 100%);
  box-shadow:
    0 10px 18px rgba(56, 140, 120, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.home-card--create .home-card-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fffaf4;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 1px 3px rgba(36, 72, 110, 0.26),
    0 0 14px rgba(255, 255, 255, 0.3);
}
.home-card--create .home-card-art {
  background-position: 6% center;
  background-size: cover;
  mask-image: linear-gradient(90deg, #000 64%, transparent 100%);
  animation: homeCreateBob 4.8s ease-in-out infinite;
}
.home-card + .home-card {
  margin-top: 9px;
}
.home-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
}
.home-row + .home-row {
  margin-top: 11px;
}
.home-row--single {
  grid-template-columns: 1fr;
}
.home-tile--awards {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 252, 242, 0.97) 0%, rgba(255, 244, 220, 0.94) 100%);
}
.home-tile--collection {
  background:
    linear-gradient(180deg, rgba(250, 246, 255, 0.97) 0%, rgba(236, 228, 248, 0.94) 100%);
}
.home-tile-new {
  position: absolute;
  top: 6px;
  right: 8px;
  min-height: 16px;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4d6, #efd08a);
  color: #6a4a14;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(176, 132, 58, 0.18);
}
.home-nav-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 0;
}
.home-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 8px 10px;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 8px 16px rgba(80, 100, 130, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.home-tile--levels {
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.94) 0%, rgba(232, 244, 255, 0.9) 100%);
}
.home-tile--levels .home-tile-icon {
  width: 43px;
  height: 43px;
  filter:
    drop-shadow(0 0 0.55px rgba(22, 50, 76, 0.32))
    drop-shadow(0 1px 1.4px rgba(36, 80, 120, 0.2));
}
.home-tile--board {
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.95) 0%, rgba(255, 244, 226, 0.9) 100%);
}
.home-tile--howto {
  background:
    linear-gradient(180deg, rgba(242, 252, 255, 0.97) 0%, rgba(220, 242, 248, 0.94) 100%);
}
.home-tile--settings {
  background:
    linear-gradient(180deg, rgba(244, 246, 255, 0.97) 0%, rgba(226, 232, 248, 0.94) 100%);
}
.home-tile-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
}
.home-tile--howto .home-tile-icon {
  width: 36px;
  height: 36px;
}
.home-tile--settings .home-tile-icon {
  width: 44px;
  height: 44px;
}
.home-tile-label {
  min-width: 0;
  margin-left: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #16324c;
  white-space: nowrap;
}
.home-tile--board .home-tile-label {
  position: relative;
  left: -8px;
}
.home-utils {
  display: none;
}
.home-util {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 8px 16px rgba(80, 100, 130, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.home-util--achievements {
  background: linear-gradient(180deg, rgba(255, 252, 242, 0.97) 0%, rgba(255, 244, 220, 0.94) 100%);
}
.home-util--collection {
  background: linear-gradient(180deg, rgba(250, 246, 255, 0.97) 0%, rgba(236, 228, 248, 0.94) 100%);
}
.home-util--howto {
  background: linear-gradient(180deg, rgba(242, 252, 255, 0.97) 0%, rgba(220, 242, 248, 0.94) 100%);
}
.home-util--settings {
  background: linear-gradient(180deg, rgba(244, 246, 255, 0.97) 0%, rgba(226, 232, 248, 0.94) 100%);
}
.home-util-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
}
.home-util-label {
  min-width: 0;
  margin-left: -4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: left;
  color: #16324c;
  white-space: nowrap;
}
.start-screen.is-leaving {
  pointer-events: none;
  animation: startLeave 220ms ease-out forwards;
}
@keyframes startBgIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes startDimOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes startLogoIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes startFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes homeNavIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes homeOrbFloat {
  from { transform: translateY(calc(-58% + 3px)); }
  to { transform: translateY(calc(-58% - 9px)); }
}
@keyframes homeDailyShimmer {
  0%, 76% {
    opacity: 0;
    transform: translateX(-8%) rotate(16deg);
  }
  81% {
    opacity: 0.62;
  }
  88% {
    opacity: 0.3;
    transform: translateX(170%) rotate(16deg);
  }
  94%, 100% {
    opacity: 0;
    transform: translateX(230%) rotate(16deg);
  }
}
@keyframes homeLogoBreathe {
  0%, 100% {
    scale: 1;
    filter: brightness(1);
  }
  50% {
    scale: 1.012;
    filter: brightness(1.03) drop-shadow(0 0 7px rgba(255, 255, 255, 0.2));
  }
}
@keyframes homeCreateBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes startLogoSheen {
  0%, 8% {
    transform: translateX(0) rotate(14deg);
    opacity: 0;
  }
  16% {
    opacity: 0.28;
  }
  30% {
    opacity: 0.2;
  }
  40%, 100% {
    transform: translateX(780%) rotate(14deg);
    opacity: 0;
  }
}
@keyframes startLeave {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .world-card--soon.is-pulse,
  .select-tile.is-nudge {
    animation: none;
  }
  .world-card .home-card-arrow {
    transition: none;
  }
  .start-screen.is-ready .start-screen-bg,
  .start-screen.is-ready .start-screen-dim,
  .start-screen.is-ready .start-logo,
  .start-screen.is-ready .start-slogan,
  .start-screen.is-ready .home-nav,
  .home-continue-orb,
  .home-card--create .home-card-art,
  .start-screen.is-leaving {
    animation: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .home-card-art--daily::after {
    animation: none;
    opacity: 0;
  }
  .start-screen.is-ready .start-screen-dim { opacity: 0; pointer-events: none; }
  .start-screen.is-ready .start-logo-sheen::after {
    animation: none;
    opacity: 0;
  }
}
@keyframes completeCtaPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 32px rgba(72, 118, 156, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    filter: brightness(1);
  }
  50% {
    transform: translateY(0) scale(1.02);
    box-shadow: 0 16px 38px rgba(72, 118, 156, 0.36), inset 0 1px 0 rgba(255, 255, 255, 1);
    filter: brightness(1.035);
  }
}
.mock-rewarded-ad {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18, 38, 54, 0.38);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.mock-rewarded-ad-card {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: min(100%, 300px);
  padding: 28px 24px 20px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(236, 246, 255, 0.46) 100%),
    rgba(248, 252, 255, 0.7);
  border: 1.2px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 40px rgba(18, 42, 64, 0.18);
  text-align: center;
}
.mock-rewarded-ad-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #174560;
}
.mock-rewarded-ad-status {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3d6178;
}
.mock-rewarded-ad-dev {
  display: grid;
  gap: 6px;
  width: 100%;
}
.mock-rewarded-ad-dev button {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4a6c82;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.pause-leave {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: calc(22 * var(--pu));
  background: rgba(62, 96, 124, 0.36);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}
.pause-leave[hidden] {
  display: none;
}
.pause-leave-card {
  width: min(100%, calc(292 * var(--pu)));
  padding: calc(26 * var(--pu)) calc(22 * var(--pu)) calc(20 * var(--pu));
  border-radius: calc(26 * var(--pu));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(238, 246, 252, 0.72) 100%),
    rgba(255, 252, 250, 0.78);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 calc(18 * var(--pu)) calc(36 * var(--pu)) rgba(32, 64, 92, 0.22),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.96);
  text-align: center;
}
.pause-leave-title {
  margin: 0 0 calc(10 * var(--pu));
  font-size: calc(18 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #123248;
}
.pause-leave-copy {
  margin: 0 0 calc(22 * var(--pu));
  font-size: calc(13.5 * var(--pu));
  font-weight: 600;
  line-height: 1.4;
  color: #3a5c74;
}
.pause-leave-actions {
  display: grid;
  gap: calc(10 * var(--pu));
}
.pause-leave-cancel {
  width: 100%;
  min-height: calc(50 * var(--pu));
  padding: calc(13 * var(--pu)) calc(16 * var(--pu));
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 247, 255, 0.94) 100%);
  color: #123248;
  font-size: calc(13.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow:
    0 calc(10 * var(--pu)) calc(20 * var(--pu)) rgba(90, 150, 200, 0.2),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 1);
}
.pause-leave-confirm {
  opacity: 0.92;
  letter-spacing: 0.07em;
  font-size: calc(11.5 * var(--pu));
  min-height: calc(42 * var(--pu));
}

.main-menu {
  --pu: var(--world-unit);
  --menu-pad-x: calc(22 * var(--pu));
  --menu-pad-top: max(calc(28 * var(--pu)), env(safe-area-inset-top, 0px));
  --subpage-nav-edge-x: calc(12 * var(--pu));
  --subpage-nav-edge-top: max(calc(8 * var(--pu)), env(safe-area-inset-top, 0px));
  --subpage-nav-height: calc(30 * var(--pu));
  --subpage-nav-pad-x: calc(8 * var(--pu));
  --subpage-nav-gap: calc(4 * var(--pu));
  --subpage-nav-fill: rgba(255, 252, 246, 0.44);
  --subpage-nav-border: rgba(255, 255, 255, 0.53);
  --subpage-nav-shadow: 0 2px 5px rgba(18, 42, 64, 0.06);
  --subpage-nav-ink: #4c647a;
  --subpage-nav-size: calc(10 * var(--pu));
  --subpage-nav-weight: 800;
  --subpage-nav-track: 0.05em;
  --subpage-nav-arrow: calc(11 * var(--pu));
  --subpage-nav-icon: calc(13 * var(--pu));
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  padding:
    var(--menu-pad-top)
    var(--menu-pad-x)
    max(calc(16 * var(--pu)), env(safe-area-inset-bottom, 0px));
  font-size: var(--pu);
  color: #1d3f58;
  background: rgba(186, 216, 238, 0.2);
  backdrop-filter: blur(8px) saturate(1.06);
  -webkit-backdrop-filter: blur(8px) saturate(1.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.main-menu.is-over-pause {
  z-index: 16;
}
.main-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.main-menu:has(#main-menu-leaderboard-hub-page.is-active),
.main-menu:has(#main-menu-leaderboard-page.is-active),
.main-menu:has(.home-sub.is-active) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.playfield.is-leaderboard {
  background-color: #f3eee6;
  background-image: url("assets/builder/Builder_Background_Studio_v1.webp?v=729");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.playfield.is-leaderboard #game,
.playfield.is-leaderboard #start-screen,
.playfield.is-leaderboard .overlay,
.playfield.is-leaderboard .pause-veil,
.playfield.is-leaderboard .hud,
.playfield.is-leaderboard .level-intro,
.playfield.is-leaderboard .second-chance-banner {
  visibility: hidden !important;
  pointer-events: none;
}
.playfield.is-leaderboard .main-menu {
  z-index: 30;
}

/* Shared Home subpage shell — same family as Leaderboard hub */
.home-sub {
  overflow-x: hidden;
  min-width: 0;
}
.home-sub.is-active {
  background: none;
}
.home-sub-head {
  flex: 0 0 auto;
  min-width: 0;
  margin: calc(2 * var(--pu)) 0 calc(6 * var(--pu));
}
.home-sub-kicker {
  margin: 0;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6a879c;
}
.home-sub-title {
  margin: calc(2 * var(--pu)) 0 0;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-size: calc(30 * var(--pu));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #12384f;
}
.home-sub-lead {
  margin: calc(8 * var(--pu)) 0 0;
  font-size: calc(13.5 * var(--pu));
  font-weight: 600;
  line-height: 1.4;
  color: #3d5f76;
}
.select-section-label {
  margin-top: calc(10 * var(--pu));
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6a879c;
}
.home-sub-card {
  background: rgba(255, 250, 242, 0.96);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(18, 42, 64, 0.08),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home-sub .menu-back {
  align-self: start;
  margin: 0;
}
.main-menu.is-open .main-menu-view.is-active {
  animation: homePageIn 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes homePageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.main-menu[hidden] {
  display: none;
  pointer-events: none;
}
.main-menu-view {
  display: none;
  flex: 1;
  min-height: 0;
}
.main-menu-view.is-active,
.main-menu-view:not([hidden]) {
  display: flex;
  flex-direction: column;
}
.main-menu-view--home {
  justify-content: flex-start;
  gap: calc(18 * var(--pu));
}
.main-menu-view--page {
  gap: calc(12 * var(--pu));
}
.main-menu-brand {
  margin: calc(4 * var(--pu)) 0 0;
  text-align: center;
}
.main-menu-primary,
.main-menu-secondary {
  display: grid;
  gap: calc(12 * var(--pu));
}
.main-menu-title {
  margin: 0;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-size: calc(28 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: #15384f;
  text-shadow: 0 0 calc(16 * var(--pu)) rgba(170, 220, 255, 0.35);
}
.main-menu-slogan {
  margin: calc(8 * var(--pu)) 0 0;
  font-size: calc(14 * var(--pu));
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #4d738c;
}
.main-menu-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: calc(1 * var(--pu)) solid rgba(255, 246, 236, 0.8);
  border-radius: calc(24 * var(--pu));
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.68) 0%, rgba(255, 244, 232, 0.4) 56%, rgba(255, 236, 224, 0.28) 100%),
    rgba(255, 248, 240, 0.32);
  box-shadow:
    0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(120, 78, 52, 0.08),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.9);
  color: #3a2618;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.main-menu-card-label {
  display: block;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.main-menu-card--play {
  min-height: calc(118 * var(--pu));
  padding: calc(22 * var(--pu)) calc(22 * var(--pu)) calc(20 * var(--pu));
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.88) 0%, rgba(255, 238, 218, 0.6) 52%, rgba(255, 228, 208, 0.4) 100%),
    rgba(255, 248, 236, 0.54);
  box-shadow:
    0 calc(12 * var(--pu)) calc(24 * var(--pu)) rgba(140, 88, 48, 0.12),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.96);
}
.main-menu-card--play .main-menu-card-label {
  font-size: calc(24 * var(--pu));
}
.main-menu-card--play::after {
  content: "";
  position: absolute;
  inset: -30% -50%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.42) 50%, transparent 64%);
  animation: pauseResumeSweep 8.4s ease-in-out infinite;
}
.main-menu-card-level {
  display: block;
  margin-top: calc(8 * var(--pu));
  font-size: calc(14.5 * var(--pu));
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #2a536c;
}
.main-menu-card-meta {
  display: block;
  margin-top: calc(4 * var(--pu));
  font-size: calc(12 * var(--pu));
  font-weight: 600;
  color: #5a7c94;
}
.main-menu-card--daily {
  min-height: calc(72 * var(--pu));
  padding: calc(16 * var(--pu)) calc(20 * var(--pu)) calc(15 * var(--pu));
}
.main-menu-card--daily .main-menu-card-label {
  font-size: calc(15 * var(--pu));
}
.main-menu-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12 * var(--pu));
}
.main-menu-card--side {
  min-height: calc(62 * var(--pu));
  padding: calc(16 * var(--pu)) calc(14 * var(--pu));
  text-align: center;
}
.main-menu-card--side .main-menu-card-label {
  font-size: calc(12.5 * var(--pu));
}
.main-menu-card--settings,
.main-menu-card--feedback {
  min-height: calc(46 * var(--pu));
  padding: calc(12 * var(--pu)) calc(18 * var(--pu));
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 calc(5 * var(--pu)) calc(12 * var(--pu)) rgba(48, 92, 132, 0.06);
  text-align: center;
}
.main-menu-card--settings .main-menu-card-label,
.main-menu-card--feedback .main-menu-card-label {
  font-size: calc(12 * var(--pu));
  color: #4a6d84;
}
.main-menu-card--feedback {
  min-height: calc(42 * var(--pu));
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.main-menu-card--feedback .main-menu-card-label {
  color: #5c7c92;
  letter-spacing: 0.14em;
}
.main-menu-card:hover,
.main-menu-card:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.95);
}
.main-menu-card:active {
  transform: scale(0.985);
}
.main-menu-version {
  margin-top: auto;
  padding-top: calc(8 * var(--pu));
  text-align: center;
  font-size: calc(11 * var(--pu));
  font-weight: 650;
  letter-spacing: 0.08em;
  color: #7f9aab;
}
.main-menu-page-kicker {
  margin: calc(6 * var(--pu)) 0 0;
  font-size: calc(12 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5a7c94;
}
.main-menu-page-title {
  margin: 0;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-size: calc(26 * var(--pu));
  font-weight: 700;
  color: #15384f;
}
.main-menu-page-copy {
  margin: 0;
  font-size: calc(14.5 * var(--pu));
  font-weight: 600;
  line-height: 1.45;
  color: #4a6d84;
}
.main-menu-page-sub {
  margin: calc(-4 * var(--pu)) 0 0;
  font-size: calc(12.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a6280;
}
.world-list {
  display: grid;
  gap: calc(12 * var(--pu));
  min-width: 0;
}
.world-card,
.hub-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  width: 100%;
  min-height: calc(88 * var(--pu));
  margin-top: calc(10 * var(--pu));
  padding: 0 calc(14 * var(--pu)) 0 0;
  border: calc(1 * var(--pu)) solid rgba(255, 246, 236, 0.86);
  border-radius: calc(24 * var(--pu));
  text-align: left;
  cursor: pointer;
  appearance: none;
  font-family: inherit;
}
.world-card {
  grid-template-columns: calc(108 * var(--pu)) minmax(0, 1fr) calc(40 * var(--pu));
  min-height: calc(148 * var(--pu));
  margin-top: 0;
  padding: 0 calc(12 * var(--pu)) 0 0;
  background: rgba(255, 252, 248, 0.94);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(18, 42, 64, 0.08),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
}
.world-card.is-complete {
  min-height: calc(160 * var(--pu));
  box-shadow:
    0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(18, 42, 64, 0.08),
    0 0 calc(14 * var(--pu)) rgba(216, 172, 96, 0.12),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
  border-color: rgba(220, 188, 128, 0.5);
}
.world-card-art {
  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 100%;
  background: url("assets/Intro_Morning_Sky_Background.webp?v=729") center / cover no-repeat;
}
.world-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 42%, rgba(255, 252, 248, 0.96) 100%);
  pointer-events: none;
}
.world-card-copy,
.hub-card-copy {
  min-width: 0;
  padding: calc(14 * var(--pu)) calc(8 * var(--pu));
}
.world-card-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(16 * var(--pu)) calc(8 * var(--pu)) calc(16 * var(--pu)) calc(4 * var(--pu));
}
.world-card-title-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--pu));
  min-width: 0;
}
.world-card-title,
.hub-card-title {
  display: block;
  font-size: calc(16 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1f3d56;
}
.world-card-chapter {
  display: block;
  margin-bottom: calc(3 * var(--pu));
  font-size: calc(10 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d93a6;
}
.world-card-title {
  min-width: 0;
  font-size: calc(17 * var(--pu));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #12384f;
}
.world-card-mark {
  display: none;
  flex: 0 0 auto;
  width: calc(22 * var(--pu));
  height: calc(22 * var(--pu));
  border-radius: 50%;
  background: linear-gradient(180deg, #f8e6b4, #e4c46c);
  box-shadow: 0 0 calc(8 * var(--pu)) rgba(216, 172, 96, 0.22);
}
.world-card-mark::after {
  content: "";
  width: calc(8 * var(--pu));
  height: calc(4.5 * var(--pu));
  margin-top: calc(-2 * var(--pu));
  border-left: calc(2.2 * var(--pu)) solid #5a3e14;
  border-bottom: calc(2.2 * var(--pu)) solid #5a3e14;
  transform: rotate(-48deg);
}
.world-card.is-complete .world-card-mark {
  display: none;
}
.world-card-meta,
.world-card-next,
.world-card-hint {
  overflow-wrap: break-word;
}
.world-card-meta,
.hub-card-meta {
  display: block;
  margin-top: calc(4 * var(--pu));
  font-size: calc(12.5 * var(--pu));
  font-weight: 650;
  color: #4d6f86;
}
.world-card-meta {
  color: #3d5f76;
}
.world-card-next {
  display: block;
  margin-top: calc(3 * var(--pu));
  font-size: calc(12 * var(--pu));
  font-weight: 700;
  color: #35506c;
}
.world-card-hint {
  display: block;
  margin-top: calc(2 * var(--pu));
  font-size: calc(12.5 * var(--pu));
  font-weight: 650;
  line-height: 1.3;
  color: #3d5f76;
  overflow-wrap: break-word;
}
.world-card-hint[hidden] {
  display: none;
}
.world-card-track {
  display: block;
  width: 100%;
  height: calc(7 * var(--pu));
  margin-top: calc(8 * var(--pu));
  border-radius: 999px;
  background: rgba(214, 228, 238, 0.78);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.86);
  overflow: hidden;
}
.world-card-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #c5e6f6 0%, #b7ddd4 58%, #f6e3b8 100%);
  box-shadow: 0 0 calc(6 * var(--pu)) rgba(150, 206, 228, 0.45);
}
.world-card .home-card-arrow {
  align-self: center;
  margin-bottom: 0;
  z-index: 1;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.world-card:not(.world-card--soon) .home-card-arrow {
  box-shadow:
    0 calc(6 * var(--pu)) calc(14 * var(--pu)) rgba(36, 150, 200, 0.34),
    0 0 calc(16 * var(--pu)) rgba(90, 210, 255, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 calc(-4 * var(--pu)) calc(6 * var(--pu)) rgba(20, 90, 140, 0.24);
}
.world-card.is-complete .home-card-arrow {
  border-color: rgba(255, 232, 186, 0.96);
  box-shadow:
    0 calc(5 * var(--pu)) calc(12 * var(--pu)) rgba(40, 140, 190, 0.22),
    0 0 calc(12 * var(--pu)) rgba(226, 190, 110, 0.42),
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    inset 0 calc(-4 * var(--pu)) calc(6 * var(--pu)) rgba(20, 90, 140, 0.2);
}
.world-card.is-complete .home-card-arrow::after {
  content: "";
  position: relative;
  z-index: 1;
  width: calc(9 * var(--pu));
  height: calc(5.1 * var(--pu));
  margin-top: calc(-2 * var(--pu));
  border-left: calc(3 * var(--pu)) solid #fffdf8;
  border-bottom: calc(3 * var(--pu)) solid #fffdf8;
  transform: rotate(-48deg);
  filter:
    drop-shadow(0 0 0.45px rgba(8, 58, 92, 0.9))
    drop-shadow(0 1px 1px rgba(10, 48, 78, 0.42));
}
.world-card--soon .home-card-arrow {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.12) 46%),
    linear-gradient(180deg, #e4eef5 0%, #d0e0eb 60%, #c3d3e0 100%);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 calc(-3 * var(--pu)) calc(5 * var(--pu)) rgba(110, 140, 165, 0.18),
    0 1px 3px rgba(18, 42, 64, 0.06);
}
@media (hover: hover) and (pointer: fine) {
  .world-card:not(.world-card--soon):hover .home-card-arrow {
    transform: translateY(calc(-1 * var(--pu)));
  }
}
.world-card:not(.world-card--soon):active .home-card-arrow {
  transform: scale(0.94);
}
.world-card--soon {
  min-height: calc(136 * var(--pu));
  grid-template-columns: calc(108 * var(--pu)) minmax(0, 1fr) calc(40 * var(--pu));
  cursor: default;
  background: rgba(252, 248, 252, 0.92);
  border-color: rgba(236, 224, 240, 0.92);
  opacity: 0.96;
}
.world-card--soon.is-pulse {
  animation: worldSoonPulse 360ms ease-out;
}
@keyframes worldSoonPulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.985); }
  100% { transform: scale(1); }
}
.world-card-art--dream {
  background: url("assets/BG_DreamGarden_Base_v1.webp?v=729") center 28% / cover no-repeat;
}
.world-card-art--dream::before {
  content: none;
}
.world-card-art--dream::after {
  background: none;
}
.world-card-art--lagoon {
  background-color: #10243a;
  background-image: url("assets/backgrounds/BG_MoonlitLagoon_Base_v1.webp?v=729");
  background-position: center 18%;
  background-size: cover;
  background-repeat: no-repeat;
}
.world-card-art--lagoon::before,
.world-card-art--lagoon::after {
  content: none;
  background-image: none;
}
.world-card--soon .world-card-art--lagoon {
  filter: saturate(0.76) brightness(1.06);
}
.world-card--soon .world-card-art--lagoon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(214, 230, 242, 0.28), rgba(186, 210, 226, 0.08));
  pointer-events: none;
}
#main-menu-world-lagoon .world-card-title {
  font-size: calc(15.5 * var(--pu));
  line-height: 1.15;
  letter-spacing: 0.04em;
}
.world-card-badge[hidden],
.world-card-meta[hidden],
.world-card-next[hidden],
.world-card-track[hidden] {
  display: none;
}
.world-card-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(5 * var(--pu));
  margin-top: calc(6 * var(--pu));
  padding: calc(5 * var(--pu)) calc(9 * var(--pu));
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.94);
  border: calc(1 * var(--pu)) solid rgba(214, 186, 140, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  max-width: 100%;
  font-size: calc(10 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  color: #7a6240;
}
.world-card-lock {
  width: calc(12 * var(--pu));
  height: calc(14 * var(--pu));
  flex: 0 0 auto;
  color: #c6a56a;
}
.world-card-lock path {
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.world-card-soon {
  display: block;
  margin-top: calc(6 * var(--pu));
  font-size: calc(12 * var(--pu));
  font-weight: 600;
  line-height: 1.4;
  color: #5a6e82;
}
.hub-card {
  grid-template-columns: calc(44 * var(--pu)) minmax(0, 1fr) 28px;
  padding-left: calc(14 * var(--pu));
}
.hub-title {
  margin: calc(4 * var(--pu)) 0 calc(6 * var(--pu));
  font-size: calc(30 * var(--pu));
  letter-spacing: 0.01em;
}
.hub-card {
  min-height: calc(96 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(18, 42, 64, 0.08),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86);
}
.hub-card--daily,
.hub-card--world {
  isolation: isolate;
}
.hub-card--daily::before,
.hub-card--world::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  z-index: 0;
}
.hub-card--daily::before {
  background:
    linear-gradient(100deg, rgba(255, 236, 244, 0.2), transparent 46%),
    url("assets/home/Home_DailyChallenge_Art_v3.webp?v=729") right center / 46% no-repeat;
}
.hub-card--world::before {
  background:
    linear-gradient(100deg, rgba(214, 236, 255, 0.12), transparent 42%),
    url("assets/Intro_Morning_Sky_Background.webp?v=729") right center / cover no-repeat;
}
.hub-card--daily {
  background:
    linear-gradient(110deg, rgba(255, 214, 228, 0.58) 0%, rgba(236, 220, 255, 0.42) 46%, rgba(255, 246, 240, 0.78) 100%);
}
.hub-card--world {
  background:
    linear-gradient(110deg, rgba(186, 226, 255, 0.42) 0%, rgba(255, 244, 214, 0.62) 52%, rgba(255, 236, 196, 0.5) 100%);
}
.hub-card-icon,
.hub-card-copy,
.hub-card .home-card-arrow {
  position: relative;
  z-index: 1;
}
.hub-card-icon {
  width: calc(38 * var(--pu));
  height: calc(38 * var(--pu));
  object-fit: contain;
}
.main-menu-settings {
  margin: calc(10 * var(--pu)) 0 calc(16 * var(--pu));
}
.main-menu-view--howto,
.main-menu-view--page {
  overflow-y: auto;
  touch-action: pan-y;
  scrollbar-width: none;
}
.main-menu:has(.subpage-frame.is-active) {
  --menu-pad-x: var(--subpage-nav-edge-x);
  --menu-pad-top: var(--subpage-nav-edge-top);
}
.main-menu-view.main-menu-view--shop {
  overflow: hidden;
  overflow-x: hidden;
  gap: calc(8 * var(--pu));
  background:
    radial-gradient(ellipse at 50% -8%, rgba(255, 244, 220, 0.62), transparent 54%),
    linear-gradient(180deg, rgba(255, 250, 244, 0.46), rgba(232, 244, 255, 0.22));
}
.main-menu-view--shop .shop-top,
.main-menu-view--shop .shop-brand {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  text-align: center;
}
.main-menu-view--shop .shop-top {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.main-menu-view--shop .shop-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
.main-menu-view--shop .shop-logo {
  display: block;
  width: auto;
  max-width: calc(210 * var(--pu));
  height: calc(128 * var(--pu));
  margin: calc(-8 * var(--pu)) auto 0;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.main-menu-view--shop .shop-slogan {
  margin: calc(-2 * var(--pu)) 0 0;
  line-height: 1;
  color: #ffffff;
  font-family: "Quicksand", "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: calc(15 * var(--pu));
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(18, 44, 72, 0.62),
    0 2px 10px rgba(18, 44, 72, 0.48);
}
.main-menu-view--shop .shop-header {
  display: block;
  width: min(100%, calc(214 * var(--pu)));
  max-width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  margin: calc(-8 * var(--pu)) auto 0;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.main-menu-view--shop .shop-lead {
  margin: calc(4 * var(--pu)) 0 0;
  font-size: calc(13 * var(--pu));
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #3d5c72;
}
.main-menu-view--shop .collection-wallet {
  margin: calc(12 * var(--pu)) 0 0;
}
.main-menu-view--shop .wallet-pill {
  height: calc(39 * var(--pu));
  min-width: calc(82 * var(--pu));
  padding: 0 calc(16 * var(--pu));
  gap: calc(7 * var(--pu));
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 6px 14px rgba(18, 42, 64, 0.07),
    0 0 0 1px rgba(214, 196, 150, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.main-menu-view--shop .wallet-icon {
  width: calc(19 * var(--pu));
  height: calc(19 * var(--pu));
}
.main-menu-view--shop .collection-wallet .wallet-amount {
  font-size: calc(17 * var(--pu));
}
.main-menu-view--shop .collection-tabs {
  position: sticky;
  flex: 0 0 auto;
  z-index: 4;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(4 * var(--pu));
  margin-top: calc(6 * var(--pu));
  padding: calc(4 * var(--pu));
  overflow: visible;
  background: rgba(255, 252, 246, 0.72);
  box-shadow: none;
}
.main-menu-view--shop .shop-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--pu));
  min-width: 0;
  height: auto;
  min-height: calc(52 * var(--pu));
  padding: calc(6 * var(--pu)) calc(2 * var(--pu)) calc(5 * var(--pu));
  border: 1px solid rgba(214, 196, 168, 0.32);
  background: rgba(255, 252, 246, 0.62);
  color: #3a5870;
  letter-spacing: 0;
  font-size: calc(9.5 * var(--pu));
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  overflow: visible;
  box-shadow: none;
}
.main-menu-view--shop .shop-tab.is-on {
  background: linear-gradient(180deg, #fff8ec 0%, #f6e4bc 100%);
  color: #16324c;
  border-color: rgba(196, 146, 58, 0.98);
  box-shadow:
    0 0 0 1px rgba(214, 168, 82, 0.55),
    0 0 14px rgba(226, 177, 90, 0.32);
}
.main-menu-view--shop .shop-tab-icon {
  width: calc(22 * var(--pu));
  height: calc(22 * var(--pu));
  flex: 0 0 auto;
  filter: contrast(1.12) saturate(1.18) drop-shadow(0 0.6px 0.4px rgba(22, 50, 76, 0.28));
}
.main-menu-view--shop .shop-tab[data-shop-tab="paddles"] .shop-tab-icon {
  width: calc(28 * var(--pu));
  height: calc(16 * var(--pu));
}
.main-menu-view--shop .shop-tab[data-shop-tab="trails"] .shop-tab-icon {
  width: calc(26 * var(--pu));
  height: calc(16 * var(--pu));
}
.main-menu-view--shop .shop-tab[data-shop-tab="levelPacks"] .shop-tab-icon {
  width: calc(22 * var(--pu));
  height: calc(22 * var(--pu));
}
.main-menu-view--shop .shop-tab-label {
  display: block;
  max-width: 100%;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}
@container (min-width: 520px) {
  .main-menu-view--shop .shop-tab {
    flex-direction: row;
    gap: 6px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 12px;
  }
}
.main-menu-view--shop .shop-empty {
  margin: calc(28 * var(--pu)) calc(8 * var(--pu)) calc(12 * var(--pu));
  text-align: center;
  font-size: calc(14 * var(--pu));
  font-weight: 700;
  line-height: 1.35;
  color: #3d5c72;
}
.main-menu-view--page::-webkit-scrollbar {
  display: none;
}
.howto-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: calc(12 * var(--pu));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.howto-tabs {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: calc(3 * var(--pu));
  margin: 0;
  padding: calc(4 * var(--pu));
  border-radius: calc(18 * var(--pu));
  background: rgba(255, 252, 248, 0.94);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(8 * var(--pu)) calc(18 * var(--pu)) rgba(18, 42, 64, 0.06),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
}
.howto-tab {
  min-width: 0;
  min-height: calc(40 * var(--pu));
  height: calc(40 * var(--pu));
  padding: 0 calc(4 * var(--pu));
  border: 0;
  border-radius: calc(14 * var(--pu));
  background: transparent;
  color: #3d5f76;
  font-size: calc(9.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.howto-tab.is-on {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(214, 236, 246, 0.94));
  color: #12384f;
  box-shadow:
    inset 0 0 0 1px rgba(120, 176, 204, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 calc(10 * var(--pu)) rgba(186, 224, 240, 0.55);
}
.howto-section {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.howto-section[hidden] {
  display: none !important;
}
.howto-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(18 * var(--pu));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.howto-scroll::-webkit-scrollbar {
  display: none;
}
.howto-section-label {
  margin: calc(22 * var(--pu)) 0 calc(7 * var(--pu));
  padding: 0 calc(2 * var(--pu));
  font-size: calc(10 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #7d93a6;
}
.howto-scroll > .howto-section-label:first-child {
  margin-top: calc(2 * var(--pu));
}
.howto-section[data-howto-panel="powerups"] .howto-section-label {
  margin-top: calc(28 * var(--pu));
}
.howto-section[data-howto-panel="powerups"] .howto-scroll > .howto-section-label:first-child {
  margin-top: calc(2 * var(--pu));
}
.howto-grid {
  display: grid;
  gap: calc(8 * var(--pu));
  min-width: 0;
}
.howto-card {
  display: grid;
  grid-template-columns: calc(48 * var(--pu)) minmax(0, 1fr);
  align-items: center;
  gap: calc(14 * var(--pu));
  min-height: calc(64 * var(--pu));
  padding: calc(10 * var(--pu)) calc(14 * var(--pu));
  border-radius: calc(18 * var(--pu));
  background: rgba(255, 246, 234, 0.96);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(6 * var(--pu)) calc(14 * var(--pu)) rgba(18, 42, 64, 0.06),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
}
.howto-card-icon {
  display: grid;
  place-items: center;
  width: calc(48 * var(--pu));
  height: calc(48 * var(--pu));
}
.howto-card-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform: scale(calc(var(--howto-preview, 1) * var(--howto-fit, 1)));
  transform-origin: center center;
}
.howto-card-icon.is-bastion {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--pu));
}
.howto-card-icon.is-pair {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(1 * var(--pu));
}
.howto-card-icon.is-pair img {
  width: calc((100% - calc(1 * var(--pu))) / 2);
  max-width: none;
  height: auto;
  transform: none;
}
.howto-card-icon.is-bastion img {
  width: calc((100% - calc(4 * var(--pu))) / 3);
  max-width: none;
  height: auto;
  transform: none;
}
.howto-card-icon.is-sling {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  transform: scale(1.42);
}
.howto-card-icon.is-sling img {
  width: calc(26 * var(--pu));
  height: calc(26 * var(--pu));
  max-width: none;
  flex: none;
  object-fit: contain;
  transform: none;
}
.howto-sling-line {
  flex: 0 0 calc(12 * var(--pu));
  height: calc(2.6 * var(--pu));
  margin: 0 calc(-8 * var(--pu));
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(186, 236, 226, 0.28), rgba(255, 252, 244, 0.98) 50%, rgba(196, 214, 255, 0.32));
}
.howto-card-icon.is-bloom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--pu));
}
.howto-card-icon.is-bloom img {
  width: 92%;
  max-width: none;
  height: auto;
  transform: none;
}
.howto-card-icon.is-bloom img:nth-child(1) { width: 58%; }
.howto-card-icon.is-bloom img:nth-child(2) { width: 74%; }
.howto-card-icon.is-bloom img:nth-child(3) { width: 92%; }
.howto-card-icon.is-advance {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: calc(1 * var(--pu));
  padding-top: calc(2 * var(--pu));
  transform: scale(1.16);
  transform-origin: center center;
}
.howto-card-icon.is-advance img {
  width: calc((100% - calc(3 * var(--pu))) / 4);
  max-width: none;
  height: auto;
  transform: none;
}
.howto-card-icon.is-advance img:nth-child(2) {
  height: calc(4.2 * var(--pu));
  object-fit: cover;
  object-position: center;
  margin-top: calc(7 * var(--pu));
}
.howto-card-icon.is-advance img:nth-child(3) { margin-top: calc(14 * var(--pu)); }
.howto-card-icon.is-advance img:nth-child(4) { margin-top: calc(21 * var(--pu)); }
.howto-card.is-hero {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(230, 246, 252, 0.96));
  border-color: rgba(176, 214, 230, 0.95);
  box-shadow:
    0 0 0 1px rgba(186, 220, 236, 0.4),
    0 calc(6 * var(--pu)) calc(14 * var(--pu)) rgba(18, 42, 64, 0.06),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.96);
}
.howto-card.is-hero .howto-card-icon img {
  filter: drop-shadow(0 0 calc(6 * var(--pu)) rgba(120, 196, 220, 0.5));
}
.howto-card-copy {
  display: grid;
  align-content: center;
  gap: calc(3 * var(--pu));
  min-width: 0;
}
.howto-card-copy strong {
  font-size: calc(14.5 * var(--pu));
  font-weight: 800;
  line-height: 1.15;
  color: #12384f;
}
.howto-card-copy span {
  font-size: calc(12 * var(--pu));
  font-weight: 600;
  line-height: 1.35;
  color: #5d7a90;
}
.howto-card.is-demo {
  grid-template-columns: calc(48 * var(--pu)) minmax(0, 1fr) auto;
  padding-right: calc(13 * var(--pu));
}
.howto-demo-mark {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  height: calc(18 * var(--pu));
  padding: 0 calc(7 * var(--pu));
  border-radius: 999px;
  border: 1px solid rgba(112, 168, 190, 0.72);
  background: rgba(255, 252, 248, 0.9);
  box-shadow: 0 0 calc(8 * var(--pu)) rgba(156, 210, 226, 0.28);
  color: #5b849a;
  font-family: "Quicksand", "Nunito", "Avenir Next", sans-serif;
  font-size: calc(8 * var(--pu));
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}
.howto-demo-mark.is-pulse {
  animation: howto-demo-mark-pulse 850ms ease;
}
@keyframes howto-demo-mark-pulse {
  0% { transform: scale(1); box-shadow: 0 0 calc(8 * var(--pu)) rgba(156, 210, 226, 0.28); }
  42% { transform: scale(1.06); box-shadow: 0 0 calc(12 * var(--pu)) rgba(140, 206, 224, 0.5); }
  100% { transform: scale(1); box-shadow: 0 0 calc(8 * var(--pu)) rgba(156, 210, 226, 0.28); }
}
.howto-demo-hint {
  margin: calc(-8 * var(--pu)) 0 calc(-6 * var(--pu));
  text-align: center;
  font-size: calc(11 * var(--pu));
  font-weight: 650;
  line-height: 1.3;
  color: #6d8ea3;
}
.howto-demo-hint.is-in {
  animation: howto-hint-in 480ms ease;
}
@keyframes howto-hint-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .howto-demo-mark.is-pulse,
  .howto-demo-hint.is-in {
    animation: none;
  }
}
.coming-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: calc(18 * var(--pu));
  padding: calc(28 * var(--pu)) calc(18 * var(--pu)) calc(24 * var(--pu));
  border-radius: calc(26 * var(--pu));
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.78) 0%, rgba(255, 244, 232, 0.42) 100%);
  border: calc(1 * var(--pu)) solid rgba(255, 246, 236, 0.88);
}
.coming-card--create {
  background:
    linear-gradient(180deg, rgba(232, 255, 246, 0.78) 0%, rgba(214, 246, 240, 0.42) 100%);
}
.coming-card--achievements {
  background:
    linear-gradient(180deg, rgba(255, 248, 228, 0.8) 0%, rgba(232, 246, 228, 0.42) 100%);
}
.coming-card--collection {
  background:
    linear-gradient(180deg, rgba(244, 236, 255, 0.78) 0%, rgba(236, 228, 248, 0.42) 100%);
}
.main-menu-view--achievements,
.main-menu-view--collection {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
}
.main-menu-view--achievements .home-sub-head,
.main-menu-view--collection .home-sub-head {
  margin-bottom: calc(18 * var(--pu));
}
.awards-summary,
.home-sub-lead,
.awards-section-label,
.collection-name,
.collection-source,
.award-progress,
.collection-state {
  text-decoration: none;
  border: 0;
  background-image: none;
}
.awards-summary {
  display: inline-flex;
  align-items: center;
  margin: calc(10 * var(--pu)) 0 0;
  padding: calc(4 * var(--pu)) calc(10 * var(--pu));
  border-radius: 999px;
  background: rgba(255, 248, 230, 0.92);
  font-size: calc(10.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #8a6a3a;
  box-shadow: none;
}
.awards-list {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0 0 calc(22 * var(--pu));
}
.awards-section {
  display: grid;
  gap: calc(12 * var(--pu));
  min-width: 0;
}
.awards-section--morningSky {
  padding-top: calc(2 * var(--pu));
}
.awards-section--daily {
  margin-top: calc(10 * var(--pu));
  padding-top: calc(20 * var(--pu));
}
.awards-section-label {
  margin: 0;
  justify-self: start;
  font-size: calc(12 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3f6076;
}
.award-card,
.collection-card {
  display: grid;
  justify-items: center;
  gap: calc(8 * var(--pu));
  min-width: 0;
  padding: calc(16 * var(--pu)) calc(16 * var(--pu)) calc(14 * var(--pu));
  border-radius: calc(24 * var(--pu));
  background: rgba(255, 252, 246, 0.96);
  border: 0;
  box-shadow: 0 calc(8 * var(--pu)) calc(18 * var(--pu)) rgba(18, 42, 64, 0.07);
  overflow: visible;
}
.award-card.is-unlocked,
.award-card.award-card--unlocked {
  box-shadow:
    0 0 0 calc(1.2 * var(--pu)) rgba(214, 168, 82, 0.28),
    0 calc(8 * var(--pu)) calc(18 * var(--pu)) rgba(18, 42, 64, 0.07);
}
.award-speak {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.award-speak-mark {
  position: absolute;
  right: calc(6 * var(--pu));
  bottom: calc(6 * var(--pu));
  width: calc(22 * var(--pu));
  height: calc(22 * var(--pu));
  border-radius: 50%;
  background: rgba(255, 248, 234, 0.94);
  box-shadow: 0 calc(3 * var(--pu)) calc(8 * var(--pu)) rgba(18, 42, 64, 0.18);
}
.award-speak-mark::before {
  content: "";
  position: absolute;
  left: calc(8 * var(--pu));
  top: calc(6 * var(--pu));
  border-style: solid;
  border-width: calc(5 * var(--pu)) 0 calc(5 * var(--pu)) calc(8 * var(--pu));
  border-color: transparent transparent transparent #3f6076;
}
.award-card.is-speaking .award-art {
  animation: awardSpeakPulse 420ms ease;
}
@keyframes awardSpeakPulse {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(1.06); filter: brightness(1.18); }
  100% { transform: scale(1); filter: brightness(1); }
}
.award-continue {
  display: block;
  width: min(100%, 17em);
  max-width: 100%;
  min-height: 44px;
  margin: calc(2 * var(--pu)) auto 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8ea 0%, #ffe7b0 48%, #f0c56a 100%);
  color: #6a3e10;
  font: inherit;
  font-size: calc(12 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 8px 18px rgba(176, 132, 48, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.award-card.is-recent,
.collection-card.is-recent {
  animation: collectionRecent 1.8s ease-in-out 2;
}
.award-card.is-locked .award-art,
.award-card.is-progress .award-art,
.award-card.award-card--locked .award-art,
.award-card.award-card--progress .award-art,
.collection-card.is-locked.collection-card--badge .collection-art {
  opacity: 0.5;
  filter: grayscale(0.78) saturate(0.28) brightness(0.96);
}
.award-card.is-unlocked .award-art,
.award-card.award-card--unlocked .award-art,
.collection-card--badge:not(.is-locked) .collection-art {
  opacity: 1;
  filter: saturate(1.08) brightness(1.03);
}
.award-progress {
  display: none;
}
.award-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: calc(3 * var(--pu));
  width: 100%;
}
.award-day {
  display: grid;
  place-items: center;
  min-height: calc(26 * var(--pu));
  padding: calc(3 * var(--pu)) 0;
  border-radius: calc(10 * var(--pu));
  background: rgba(255, 255, 255, 0.42);
  color: #7a93a6;
  font-size: calc(8.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: none;
}
.award-day.is-won {
  background: linear-gradient(180deg, #fff8ec, #f3e0b6);
  color: #6a4a18;
}
.collection-state--progress {
  background: rgba(255, 246, 220, 0.96);
  color: #6a4a18;
}
.collection-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  flex: 0 0 auto;
  gap: calc(5 * var(--pu));
  margin: 0;
  padding: calc(5 * var(--pu));
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.96);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(8 * var(--pu)) calc(16 * var(--pu)) rgba(18, 42, 64, 0.05),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.96);
}
.collection-tab {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: calc(38 * var(--pu));
  height: calc(38 * var(--pu));
  padding: 0 calc(6 * var(--pu));
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4d6d84;
  font: inherit;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.collection-tab.is-on {
  background: linear-gradient(180deg, #fff8ec 0%, #f4e2b8 58%, #edd49a 100%);
  color: #3d2a10;
  box-shadow:
    0 0 0 calc(1.4 * var(--pu)) rgba(214, 168, 82, 0.4),
    0 calc(4 * var(--pu)) calc(12 * var(--pu)) rgba(176, 132, 58, 0.12),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.92);
}
.collection-list {
  display: grid;
  gap: calc(14 * var(--pu));
  min-width: 0;
  padding: calc(14 * var(--pu)) 0 calc(22 * var(--pu));
}
.collection-card.is-equipped {
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.98) 0%, rgba(255, 246, 230, 0.96) 100%);
  box-shadow:
    0 0 0 calc(1.4 * var(--pu)) rgba(214, 168, 82, 0.3),
    0 calc(8 * var(--pu)) calc(18 * var(--pu)) rgba(160, 122, 58, 0.08);
}
.collection-card.is-locked:not(.shop-product):not(.collection-card--badge):not(.collection-card--trail) .collection-art {
  opacity: 0.48;
  filter: grayscale(0.42) saturate(0.55) brightness(0.96);
}
.collection-card.shop-product.is-locked .collection-art,
.collection-card.shop-product.is-locked .shop-art {
  opacity: 1;
  filter: none;
}
.collection-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: visible;
}
.collection-preview-frame,
.collection-preview-stage {
  position: relative;
  display: grid;
  place-items: center;
}
.collection-preview-frame {
  overflow: visible;
}
.collection-preview-stage {
  overflow: hidden;
}
.collection-preview--paddle {
  min-height: calc(88 * var(--pu));
}
.collection-preview--paddle .collection-preview-frame,
.collection-preview--paddle .collection-preview-stage {
  width: min(100%, calc(240 * var(--pu)));
  min-height: calc(84 * var(--pu));
}
.collection-preview--orb,
.collection-preview--badge {
  min-height: calc(136 * var(--pu));
}
.collection-preview--orb .collection-preview-frame,
.collection-preview--orb .collection-preview-stage,
.collection-preview--badge .collection-preview-frame,
.collection-preview--badge .collection-preview-stage {
  width: calc(124 * var(--pu));
  height: calc(124 * var(--pu));
}
.collection-art {
  display: block;
  width: auto;
  max-width: 78%;
  object-fit: contain;
}
.collection-preview--paddle .collection-art {
  max-width: 89%;
  max-height: calc(82 * var(--pu));
}
.collection-preview--trail .collection-preview-frame,
.collection-preview--trail .collection-preview-stage {
  width: min(100%, calc(220 * var(--pu)));
  min-height: calc(96 * var(--pu));
  border-radius: calc(18 * var(--pu));
}
.collection-preview--trail .collection-preview-stage {
  background: linear-gradient(180deg, rgba(214, 206, 236, 0.98) 0%, rgba(168, 184, 216, 0.96) 100%);
  box-shadow: inset 0 0 calc(18 * var(--pu)) rgba(118, 136, 176, 0.16);
  overflow: hidden;
}
.collection-preview--trail .collection-art {
  width: 92%;
  max-width: 92%;
  max-height: calc(72 * var(--pu));
  object-fit: contain;
}
.collection-card.is-tier-premium .collection-preview-stage {
  box-shadow: 0 0 calc(14 * var(--pu)) rgba(232, 204, 150, 0.42);
}
.collection-card.is-tier-diamond .collection-preview-stage {
  box-shadow: 0 0 calc(14 * var(--pu)) rgba(126, 198, 220, 0.4);
}
.collection-card.is-tier-premium.collection-card--trail .collection-preview-stage,
.collection-card.is-tier-diamond.collection-card--trail .collection-preview-stage {
  box-shadow:
    inset 0 0 calc(18 * var(--pu)) rgba(118, 136, 176, 0.16),
    0 0 calc(14 * var(--pu)) rgba(126, 198, 220, 0.4);
}
.collection-card.is-tier-premium.collection-card--trail .collection-preview-stage {
  box-shadow:
    inset 0 0 calc(18 * var(--pu)) rgba(118, 136, 176, 0.16),
    0 0 calc(14 * var(--pu)) rgba(232, 204, 150, 0.42);
}
.collection-preview--orb .collection-art,
.collection-preview--badge .collection-art {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.main-menu-view--shop .shop-preview .shop-art {
  width: 86%;
  height: 86%;
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
  transform: none;
}
.main-menu-view--shop .shop-preview.shop-preview--pack .shop-art {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: 10% 6%;
}
.main-menu-view--shop .shop-product[data-shop-id="bubbleTrouble"] .shop-preview.shop-preview--pack .shop-art {
  object-position: center 100%;
}
.main-menu-view--shop .shop-product[data-shop-id="wackyWorld"] .shop-preview.shop-preview--pack .shop-art {
  object-position: center 74%;
}
.main-menu-view--shop .shop-product[data-shop-id="rockfallRuins"] .shop-preview.shop-preview--pack .shop-art {
  object-position: center top;
}
.main-menu-view--shop .shop-preview .shop-art.is-wide-orb {
  width: 113%;
  height: 113%;
  max-width: none;
  max-height: none;
}
.main-menu-view--shop .shop-preview--paddle .shop-art {
  width: 97%;
  height: 97%;
  max-width: 97%;
  max-height: 97%;
}
.main-menu-view--shop .shop-preview--trail .shop-art {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.main-menu-view--shop .shop-preview--trail .shop-art.is-preview-stardust,
.collection-preview--trail .collection-art.is-preview-stardust {
  transform: scale(1.04);
  transform-origin: center;
  filter: brightness(1.06) contrast(1.04);
}
.main-menu-view--shop .shop-preview--trail .shop-art.is-preview-ribbon,
.collection-preview--trail .collection-art.is-preview-ribbon {
  transform: scale(1.14);
  transform-origin: center;
  filter: brightness(1.18) contrast(1.1) saturate(1.12);
}
.main-menu-view--shop .shop-preview--trail .shop-art.is-preview-firefly,
.collection-preview--trail .collection-art.is-preview-firefly {
  transform: scale(1.75);
  transform-origin: center;
  filter: brightness(1.62) contrast(1.32) saturate(1.55) drop-shadow(0 0 1.5px rgba(255, 196, 120, 0.85));
}
.main-menu-view--shop .shop-preview--trail .shop-art.is-preview-bubble,
.collection-preview--trail .collection-art.is-preview-bubble {
  transform: scale(2.46);
  transform-origin: center;
  filter: brightness(1.32) contrast(1.76) saturate(1.9);
}
.collection-preview--orb .collection-art.is-wide-orb {
  width: 131%;
  height: 131%;
  max-width: none;
  max-height: none;
}
.collection-art.is-padded-preview {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: scale(2.28);
  transform-origin: center;
}
.collection-lock,
.collection-equipped-star {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.collection-lock {
  right: calc(-6 * var(--pu));
  bottom: calc(10 * var(--pu));
  width: max(26px, calc(30 * var(--pu)));
  height: max(26px, calc(30 * var(--pu)));
  border-radius: 50%;
  background: rgba(255, 252, 246, 0.88);
  box-shadow: 0 calc(3 * var(--pu)) calc(8 * var(--pu)) rgba(18, 42, 64, 0.1);
}
.collection-equipped-star {
  top: calc(2 * var(--pu));
  right: calc(-4 * var(--pu));
  width: max(22px, calc(26 * var(--pu)));
  height: max(22px, calc(26 * var(--pu)));
}
.collection-lock-art {
  display: block;
  width: max(18px, calc(20 * var(--pu)));
  height: max(18px, calc(20 * var(--pu)));
  object-fit: contain;
}
.collection-star-art {
  display: block;
  width: max(18px, calc(22 * var(--pu)));
  height: max(18px, calc(22 * var(--pu)));
  object-fit: contain;
}
.collection-art.is-fallback,
.collection-lock-art.is-fallback,
.collection-star-art.is-fallback {
  opacity: 0;
}
.collection-preview.is-art-fallback .collection-preview-stage,
.collection-preview.is-art-fallback {
  background: radial-gradient(circle at 50% 46%, rgba(255, 248, 236, 0.92), rgba(228, 216, 198, 0.42));
  border-radius: calc(28 * var(--pu));
}
.collection-name {
  margin: 0;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-size: calc(16 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #12384f;
}
.collection-source {
  margin: 0;
  font-size: calc(12.5 * var(--pu));
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: #5a7890;
}
.collection-equip,
.collection-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: calc(5 * var(--pu));
  width: auto;
  max-width: 100%;
  min-height: calc(30 * var(--pu));
  height: calc(30 * var(--pu));
  margin-top: calc(4 * var(--pu));
  padding: 0 calc(12 * var(--pu));
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: calc(10.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
}
.collection-equip {
  min-width: calc(96 * var(--pu));
  background: linear-gradient(180deg, #fff8ec 0%, #f6e2b8 52%, #efd29a 100%);
  color: #4a3518;
  cursor: pointer;
  box-shadow: 0 calc(4 * var(--pu)) calc(10 * var(--pu)) rgba(160, 122, 58, 0.1);
}
.collection-state--equipped {
  min-width: calc(118 * var(--pu));
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.98), rgba(244, 220, 168, 0.94));
  color: #5a3d12;
}
.collection-equipped-check {
  display: inline-grid;
  place-items: center;
  width: calc(15 * var(--pu));
  height: calc(15 * var(--pu));
  border-radius: 50%;
  background: linear-gradient(180deg, #f6e2b0, #e4c05a);
  color: #3d2a10;
  font-size: calc(10 * var(--pu));
  font-weight: 800;
  line-height: 1;
}
.collection-state--locked,
.collection-state--unlocked {
  background: rgba(255, 255, 255, 0.55);
  color: #6a879c;
}
.collection-state--unlocked {
  color: #3d6a48;
}
@keyframes collectionRecent {
  0%, 100% { box-shadow: 0 calc(8 * var(--pu)) calc(18 * var(--pu)) rgba(18, 42, 64, 0.07); }
  50% {
    box-shadow:
      0 0 0 calc(2 * var(--pu)) rgba(214, 168, 82, 0.34),
      0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(160, 122, 58, 0.12);
  }
}
.coming-art {
  width: min(100%, calc(280 * var(--pu)));
  height: auto;
  margin-bottom: calc(16 * var(--pu));
  object-fit: contain;
}
.coming-icon {
  width: calc(64 * var(--pu));
  height: calc(64 * var(--pu));
  margin-bottom: calc(14 * var(--pu));
  object-fit: contain;
}
.coming-heading,
.coming-title {
  margin: 0 0 calc(8 * var(--pu));
  font-size: calc(18 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1f3d56;
}
.coming-copy {
  margin: 0 0 calc(14 * var(--pu));
  max-width: calc(260 * var(--pu));
  font-size: calc(13.5 * var(--pu));
  font-weight: 600;
  line-height: 1.4;
  color: #4d6f86;
}
.coming-badge {
  display: inline-grid;
  place-items: center;
  min-height: calc(26 * var(--pu));
  padding: calc(5 * var(--pu)) calc(12 * var(--pu));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 236, 214, 0.96), rgba(255, 214, 176, 0.88));
  color: #6a3e24;
  font-size: calc(10.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.12em;
}
.coming-note {
  margin: calc(12 * var(--pu)) 0 0;
  font-size: calc(12 * var(--pu));
  font-weight: 600;
  color: #6a8498;
}
.settings-icon {
  display: none;
}
.settings-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: calc(8 * var(--pu));
  padding: 0;
  border-radius: calc(20 * var(--pu));
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(14 * var(--pu));
  min-height: calc(62 * var(--pu));
  padding: calc(16 * var(--pu)) calc(18 * var(--pu));
}
.settings-row + .settings-row {
  border-top: calc(1 * var(--pu)) solid rgba(30, 60, 90, 0.08);
}
.settings-label {
  min-width: 0;
  font-size: calc(15 * var(--pu));
  font-weight: 750;
  color: #12384f;
}
.settings-section {
  margin: calc(18 * var(--pu)) 0 calc(8 * var(--pu));
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #6a879c;
}
.settings-copy {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--pu));
  min-width: 0;
}
.settings-note {
  margin: 0;
  font-size: calc(12 * var(--pu));
  font-weight: 650;
  line-height: 1.3;
  color: #5d7c90;
}
.settings-row .pause-switch {
  flex: 0 0 auto;
}
.settings-help {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--pu));
  width: 100%;
  margin-top: calc(22 * var(--pu));
}
.settings-help-kicker {
  margin: 0;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6a879c;
}
.settings-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(52 * var(--pu));
  margin-top: 0;
  padding: calc(14 * var(--pu)) calc(16 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.94);
  border-radius: calc(16 * var(--pu));
  background: rgba(255, 250, 242, 0.94);
  box-shadow:
    0 calc(8 * var(--pu)) calc(16 * var(--pu)) rgba(18, 42, 64, 0.06),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
  color: #3d5f76;
  font: inherit;
  text-align: center;
  cursor: pointer;
  appearance: none;
}
.settings-feedback-label {
  font-size: calc(12 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.14em;
}
.settings-feedback:hover,
.settings-feedback:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.98);
  background: rgba(255, 252, 248, 0.86);
}
.settings-feedback:active {
  transform: scale(0.985);
}
.home-sub .main-menu-version {
  margin-top: auto;
  padding-top: calc(18 * var(--pu));
  padding-bottom: calc(6 * var(--pu));
  font-size: calc(10.5 * var(--pu));
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8aa0b0;
}
.main-menu-view--daily {
  --page-accent: transparent;
}
.main-menu-view--worlds {
  --page-accent: transparent;
}
.main-menu-view--hub {
  --page-accent: rgba(255, 236, 210, 0.14);
}
.main-menu-view--board {
  --page-accent: rgba(255, 228, 176, 0.16);
  gap: calc(4 * var(--pu));
  overflow: hidden;
}
.main-menu-view--board.lb-board--daily {
  --page-accent: rgba(255, 214, 228, 0.2);
}
.main-menu-view--board.lb-board--world {
  --page-accent: rgba(186, 226, 255, 0.18);
}
.main-menu-view--achievements {
  --page-accent: rgba(214, 236, 196, 0.16);
}
.main-menu-view.main-menu-view--collection {
  --page-accent: transparent;
  gap: 0;
  overflow: hidden;
}
.main-menu-view--collection .home-sub-head {
  margin: 0;
  text-align: center;
}
.main-menu-view--collection .home-sub-kicker {
  margin: 0;
  letter-spacing: 0.14em;
}
.main-menu-view--collection .home-sub-title {
  margin: calc(3 * var(--pu)) 0 0;
}
.main-menu-view--collection .home-sub-lead {
  margin: calc(7 * var(--pu)) 0 0;
  line-height: 1.25;
}
.main-menu-view .home-sub-head.subpage-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  text-align: center;
}
.subpage-header-art {
  display: block;
  width: min(100%, calc(220 * var(--pu)));
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  background: none;
}
.subpage-header .home-sub-lead {
  margin: calc(14 * var(--pu)) 0 0;
  line-height: 1.25;
}
.subpage-header + .settings-panel {
  margin-top: 0;
}
.main-menu-view--howto .home-sub-head.subpage-header {
  margin-top: calc(-36 * var(--pu));
  margin-bottom: calc(-12 * var(--pu));
}
.main-menu-view--worlds .home-sub-head.subpage-header {
  margin-top: calc(-15 * var(--pu));
  margin-bottom: calc(-2 * var(--pu));
}
.main-menu-view--collection .collection-wallet {
  margin: calc(13 * var(--pu)) 0 0;
}
.main-menu-view--collection .wallet-display .wallet-pill {
  height: calc(39 * var(--pu));
  min-width: calc(82 * var(--pu));
  padding: 0 calc(16 * var(--pu));
  gap: calc(7 * var(--pu));
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 6px 14px rgba(18, 42, 64, 0.07),
    0 0 0 1px rgba(214, 196, 150, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.main-menu-view--collection .wallet-icon {
  width: calc(19 * var(--pu));
  height: calc(19 * var(--pu));
}
.main-menu-view--collection .collection-wallet .wallet-amount {
  font-size: calc(17 * var(--pu));
}
.main-menu-view--collection .collection-tabs {
  margin-top: calc(17 * var(--pu));
  background: rgba(255, 252, 246, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: none;
}
.main-menu-view--collection .collection-tab {
  border: 0;
  background: transparent;
  color: #3a5870;
  font-weight: 800;
  box-shadow: none;
}
.main-menu-view--collection .collection-tab.is-on {
  background: linear-gradient(180deg, #fff8ec 0%, #f6e4bc 100%);
  color: #3d2a10;
  box-shadow:
    0 0 calc(12 * var(--pu)) rgba(226, 177, 90, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.main-menu-view--collection .collection-card.is-locked:not(.collection-card--trail) .collection-art {
  opacity: 0.82;
  filter: grayscale(0.16) saturate(0.9) brightness(0.99);
}
.main-menu-view--collection .collection-card.is-locked.collection-card--trail .collection-art {
  opacity: 0.92;
}
.main-menu-view--collection .collection-lock {
  top: calc(6 * var(--pu));
  right: calc(6 * var(--pu));
  bottom: auto;
  width: calc(22 * var(--pu));
  height: calc(22 * var(--pu));
  background: rgba(255, 252, 246, 0.7);
  box-shadow: 0 1px 4px rgba(18, 42, 64, 0.1);
}
.main-menu-view--collection .collection-lock-art {
  width: calc(13 * var(--pu));
  height: calc(13 * var(--pu));
  opacity: 0.84;
}
.main-menu-view--collection .collection-state--equipped {
  background: linear-gradient(180deg, #e8f8ee, #c9efd6);
  color: #1d6b45;
  border: 1px solid rgba(92, 176, 122, 0.4);
}
.main-menu-view--collection .collection-equipped-check {
  background: linear-gradient(180deg, #e7f8ee, #8ed4aa);
  color: #1d6b45;
}
.main-menu-view--collection .collection-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
.main-menu-view--collection .collection-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(3 * var(--pu));
  padding: calc(3 * var(--pu));
}
.main-menu-view--collection .collection-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: calc(36 * var(--pu));
  height: calc(36 * var(--pu));
  padding: 0 calc(2 * var(--pu));
  font-size: calc(10 * var(--pu));
  letter-spacing: 0.03em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.main-menu-view--collection .collection-list {
  gap: calc(10 * var(--pu));
  padding: calc(17 * var(--pu)) 0 calc(18 * var(--pu));
}
.main-menu-view--collection .collection-card {
  align-content: start;
  grid-template-rows: auto auto calc(2 * 1.28 * 11.5 * var(--pu)) auto;
  gap: calc(3 * var(--pu));
  padding: calc(8 * var(--pu)) calc(12 * var(--pu));
  border-radius: calc(20 * var(--pu));
  border: 1px solid rgba(232, 196, 154, 0.55);
  background: linear-gradient(180deg, rgba(255, 253, 250, 0.98) 0%, rgba(255, 248, 240, 0.96) 100%);
  box-shadow:
    0 calc(6 * var(--pu)) calc(14 * var(--pu)) rgba(120, 84, 48, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.main-menu-view--collection .collection-card.is-equipped {
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.98) 0%, rgba(255, 246, 230, 0.96) 100%);
  box-shadow:
    0 0 0 calc(1.4 * var(--pu)) rgba(214, 168, 82, 0.3),
    0 calc(6 * var(--pu)) calc(14 * var(--pu)) rgba(160, 122, 58, 0.08);
}
.main-menu-view--collection .collection-preview--paddle,
.main-menu-view--collection .collection-preview--trail {
  width: 100%;
  min-height: 0;
}
.main-menu-view--collection .collection-preview--paddle {
  height: calc(78 * var(--pu));
}
.main-menu-view--collection .collection-preview--paddle .collection-preview-frame,
.main-menu-view--collection .collection-preview--paddle .collection-preview-stage {
  width: 100%;
  height: calc(78 * var(--pu));
  min-height: 0;
}
.main-menu-view--collection .collection-preview--orb,
.main-menu-view--collection .collection-preview--badge {
  width: calc(96 * var(--pu));
  height: calc(96 * var(--pu));
  min-height: 0;
}
.main-menu-view--collection .collection-preview--orb .collection-preview-frame,
.main-menu-view--collection .collection-preview--orb .collection-preview-stage,
.main-menu-view--collection .collection-preview--badge .collection-preview-frame,
.main-menu-view--collection .collection-preview--badge .collection-preview-stage {
  width: calc(96 * var(--pu));
  height: calc(96 * var(--pu));
  min-height: 0;
  border-radius: calc(22 * var(--pu));
}
.main-menu-view--collection .collection-preview--orb .collection-preview-stage,
.main-menu-view--collection .collection-preview--badge .collection-preview-stage {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 253, 248, 0.98) 0%, rgba(255, 244, 228, 0.72) 58%, rgba(214, 228, 244, 0.38) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 236, 0.9);
}
.main-menu-view--collection .collection-preview--trail {
  width: calc(104 * var(--pu));
  height: calc(104 * var(--pu));
}
.main-menu-view--collection .collection-preview--trail .collection-preview-frame,
.main-menu-view--collection .collection-preview--trail .collection-preview-stage {
  width: calc(104 * var(--pu));
  height: calc(104 * var(--pu));
  min-height: 0;
  border-radius: calc(18 * var(--pu));
}
.main-menu-view--collection .collection-preview-stage {
  overflow: hidden;
}
.main-menu-view--collection .collection-art.is-norm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pv-w) * 1%);
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform: translate(-50%, -50%) translate(var(--pv-x), var(--pv-y));
  transform-origin: center;
}
.main-menu-view--collection .collection-preview--trail .collection-art {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.main-menu-view--collection .collection-card.is-tier-premium .collection-preview-stage {
  box-shadow: 0 0 calc(16 * var(--pu)) rgba(232, 204, 150, 0.72);
}
.main-menu-view--collection .collection-card.is-tier-diamond .collection-preview-stage {
  box-shadow: 0 0 calc(16 * var(--pu)) rgba(126, 198, 220, 0.62);
}
.main-menu-view--collection .collection-card.is-tier-premium.collection-card--trail .collection-preview-stage {
  box-shadow:
    inset 0 0 calc(18 * var(--pu)) rgba(118, 136, 176, 0.16),
    0 0 calc(16 * var(--pu)) rgba(232, 204, 150, 0.72);
}
.main-menu-view--collection .collection-card.is-tier-diamond.collection-card--trail .collection-preview-stage {
  box-shadow:
    inset 0 0 calc(18 * var(--pu)) rgba(118, 136, 176, 0.16),
    0 0 calc(16 * var(--pu)) rgba(126, 198, 220, 0.62);
}
.main-menu-view--collection .collection-name {
  width: 100%;
  font-size: calc(15 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.main-menu-view--collection .collection-source {
  width: 100%;
  min-height: calc(2 * 1.28 * 11.5 * var(--pu));
  font-size: calc(11.5 * var(--pu));
  font-weight: 500;
  line-height: 1.28;
  color: #7a93a6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.main-menu-view--collection .collection-equip,
.main-menu-view--collection .collection-state {
  margin-top: 0;
  min-height: calc(28 * var(--pu));
  height: calc(28 * var(--pu));
}
.main-menu-view--howto {
  --page-accent: transparent;
  position: relative;
  overflow: hidden;
}
.main-menu-view--settings,
.main-menu-view--feedback,
.main-menu-view--select {
  --page-accent: transparent;
}
.main-menu-view--create {
  --page-accent: rgba(186, 246, 228, 0.16);
}
.main-menu-view.is-active {
  background: linear-gradient(180deg, var(--page-accent, transparent), transparent 36%);
}
#main-menu-daily-page,
.main-menu-view--daily {
  gap: calc(14 * var(--pu));
  overflow-y: auto;
}
.daily-back {
  width: auto;
  align-self: flex-start;
  min-height: calc(44 * var(--pu));
  margin: 0;
  padding: calc(10 * var(--pu)) calc(12 * var(--pu));
  font-size: calc(11 * var(--pu));
}
/* Featured Daily card: ivory destination, calm Harmony Bounce. */
.daily-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: calc(20 * var(--pu)) calc(16 * var(--pu)) calc(20 * var(--pu));
  border-radius: calc(24 * var(--pu));
  background: rgba(255, 252, 248, 0.94);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(18, 42, 64, 0.08),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
}
.daily-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.daily-kicker {
  margin: 0;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6a879c;
}
.daily-weekday {
  margin: calc(10 * var(--pu)) 0 0;
  font-size: calc(12 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6a8498;
}
.daily-title {
  margin: calc(6 * var(--pu)) 0 0;
  font-family: Nunito, Quicksand, system-ui, sans-serif;
  font-size: calc(28 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.08;
  color: #12384f;
}
.daily-tagline {
  margin: calc(8 * var(--pu)) 0 0;
  max-width: 92%;
  font-size: calc(13.5 * var(--pu));
  font-weight: 600;
  line-height: 1.45;
  color: #3d5f76;
}
.daily-hero {
  margin: calc(16 * var(--pu)) calc(-8 * var(--pu)) 0;
  padding: 0;
  border-radius: calc(18 * var(--pu));
  overflow: hidden;
  background: rgba(236, 228, 218, 0.28);
  box-shadow: none;
}
.daily-preview {
  height: calc(148 * var(--pu));
  border-radius: calc(18 * var(--pu));
  background-color: #e8d4c4;
  background-size: cover;
  background-position: center;
  border: 0;
  box-shadow: none;
}
.daily-facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: calc(16 * var(--pu)) 0 0;
}
.daily-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(6 * var(--pu));
  margin: 0;
  max-width: 100%;
}
.daily-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(28 * var(--pu));
  padding: calc(5 * var(--pu)) calc(10 * var(--pu));
  border-radius: 999px;
  background: rgba(244, 234, 220, 0.92);
  border: calc(1 * var(--pu)) solid rgba(196, 176, 150, 0.55);
  box-shadow: inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.78);
  font-size: calc(11 * var(--pu));
  font-weight: 750;
  letter-spacing: 0.02em;
  color: #3a2618;
}
.daily-chip--blush {
  background: rgba(255, 226, 214, 0.88);
  border-color: rgba(210, 150, 140, 0.5);
  color: #6a302c;
}
.daily-chip--mint {
  background: rgba(210, 236, 224, 0.88);
  border-color: rgba(120, 176, 158, 0.5);
  color: #245248;
}
.daily-chip--lavender {
  background: rgba(232, 222, 246, 0.88);
  border-color: rgba(168, 148, 198, 0.5);
  color: #46365c;
}
.daily-chip--gold {
  background: rgba(255, 232, 186, 0.9);
  border-color: rgba(196, 164, 96, 0.5);
  color: #5a4418;
}
.daily-chip--cream {
  background: rgba(255, 244, 220, 0.92);
  border-color: rgba(196, 172, 132, 0.5);
  color: #5a4030;
}
.daily-chip--sky {
  background: rgba(206, 232, 244, 0.9);
  border-color: rgba(120, 176, 200, 0.5);
  color: #1c4c66;
}
.daily-chip--purple {
  background: rgba(226, 214, 246, 0.9);
  border-color: rgba(158, 138, 196, 0.5);
  color: #3e2c5c;
}
.daily-chip--flow {
  background: rgba(210, 230, 244, 0.9);
  border-color: rgba(128, 164, 196, 0.5);
  color: #2c4660;
}
.daily-chip.is-focus {
  font-weight: 750;
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.72),
    0 0 0 calc(1 * var(--pu)) rgba(255, 255, 255, 0.28);
}
.daily-pulse {
  margin: calc(10 * var(--pu)) 0 0;
  max-width: 28ch;
  font-size: calc(11 * var(--pu));
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  color: #3d6d78;
}
.daily-pulse[hidden],
.daily-lives,
.daily-lives[hidden] {
  display: none;
}
.daily-play {
  margin-top: calc(20 * var(--pu));
  width: 100%;
  min-height: calc(70 * var(--pu));
  padding: calc(18 * var(--pu)) calc(18 * var(--pu));
  text-align: center;
  background:
    linear-gradient(180deg, #fff6e6 0%, #efc48a 58%, #e0b06a 100%);
  border-color: rgba(196, 156, 88, 0.7);
  box-shadow:
    0 calc(10 * var(--pu)) calc(20 * var(--pu)) rgba(140, 88, 48, 0.16),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.92);
  color: #3a2618;
}
.daily-play::after {
  display: none;
}
.daily-panel[data-daily-day="monday"] .daily-hero {
  background: linear-gradient(180deg, rgba(236, 248, 255, 0.7) 0%, rgba(214, 236, 248, 0.28) 100%);
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86),
    0 0 calc(18 * var(--pu)) rgba(80, 180, 220, 0.14);
}
.daily-panel[data-daily-day="monday"] .daily-preview {
  background-position: center 12%;
  box-shadow:
    0 0 calc(16 * var(--pu)) rgba(90, 190, 230, 0.2),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 252, 244, 0.55);
}
.daily-panel[data-daily-day="tuesday"] .daily-hero {
  background: linear-gradient(180deg, rgba(255, 240, 244, 0.72) 0%, rgba(255, 220, 228, 0.28) 100%);
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86),
    0 0 calc(18 * var(--pu)) rgba(220, 110, 140, 0.14);
}
.daily-panel[data-daily-day="tuesday"] .daily-preview {
  background-position: center 12%;
  box-shadow:
    0 0 calc(16 * var(--pu)) rgba(230, 120, 150, 0.2),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 252, 244, 0.55);
}
.daily-panel[data-daily-day="wednesday"] .daily-hero {
  background: linear-gradient(180deg, rgba(236, 250, 244, 0.72) 0%, rgba(214, 240, 228, 0.28) 100%);
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86),
    0 0 calc(18 * var(--pu)) rgba(80, 180, 150, 0.14);
}
.daily-panel[data-daily-day="wednesday"] .daily-preview {
  background-position: center 12%;
  box-shadow:
    0 0 calc(16 * var(--pu)) rgba(90, 190, 160, 0.2),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 252, 244, 0.55);
}
.daily-panel[data-daily-day="thursday"] .daily-hero {
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.74) 0%, rgba(232, 242, 236, 0.3) 100%);
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86),
    0 0 calc(18 * var(--pu)) rgba(170, 160, 130, 0.14);
}
.daily-panel[data-daily-day="thursday"] .daily-preview {
  background-position: center 12%;
  box-shadow:
    0 0 calc(16 * var(--pu)) rgba(190, 180, 150, 0.2),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 252, 244, 0.55);
}
.daily-panel[data-daily-day="friday"] .daily-hero {
  background: linear-gradient(180deg, rgba(255, 246, 232, 0.74) 0%, rgba(255, 228, 204, 0.3) 100%);
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86),
    0 0 calc(18 * var(--pu)) rgba(220, 150, 90, 0.15);
}
.daily-panel[data-daily-day="friday"] .daily-preview {
  background-position: center 12%;
  box-shadow:
    0 0 calc(16 * var(--pu)) rgba(230, 160, 100, 0.2),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 252, 244, 0.55);
}
.daily-panel[data-daily-day="saturday"] .daily-hero {
  background: linear-gradient(180deg, rgba(255, 246, 230, 0.74) 0%, rgba(255, 228, 196, 0.3) 100%);
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86),
    0 0 calc(18 * var(--pu)) rgba(210, 150, 70, 0.16);
}
.daily-panel[data-daily-day="saturday"] .daily-preview {
  background-position: center 12%;
  box-shadow:
    0 0 calc(16 * var(--pu)) rgba(220, 160, 80, 0.22),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 252, 244, 0.55);
}
.daily-panel[data-daily-day="sunday"] .daily-hero {
  background: linear-gradient(180deg, rgba(236, 246, 255, 0.72) 0%, rgba(226, 232, 250, 0.3) 100%);
  box-shadow:
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86),
    0 0 calc(18 * var(--pu)) rgba(130, 160, 220, 0.14);
}
.daily-panel[data-daily-day="sunday"] .daily-preview {
  background-position: center 12%;
  box-shadow:
    0 0 calc(16 * var(--pu)) rgba(140, 170, 230, 0.2),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 252, 244, 0.55);
}
.daily-play .main-menu-card-label {
  font-size: calc(15.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.12em;
}
.daily-dev {
  margin-top: calc(18 * var(--pu));
  padding: calc(12 * var(--pu)) calc(12 * var(--pu)) calc(10 * var(--pu));
  border-radius: calc(16 * var(--pu));
  background: rgba(255, 252, 246, 0.72);
  border: calc(1 * var(--pu)) solid rgba(210, 190, 170, 0.42);
  box-shadow: inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.8);
  opacity: 1;
}
.daily-dev-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(4 * var(--pu));
}
.daily-dev-days button {
  min-height: calc(30 * var(--pu));
  padding: 0;
  border: calc(1 * var(--pu)) solid rgba(180, 150, 120, 0.28);
  border-radius: calc(10 * var(--pu));
  background: rgba(255, 255, 255, 0.62);
  color: #4a3a30;
  font-size: calc(9 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
}
.daily-dev-days button.is-on {
  background: rgba(255, 236, 210, 0.96);
  box-shadow: 0 0 0 calc(1 * var(--pu)) rgba(210, 160, 90, 0.35);
  color: #3a2618;
}
.daily-dev-seed,
.daily-dev-seed-id {
  margin: calc(8 * var(--pu)) 0 0;
  font-size: calc(10 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5a4436;
}
.daily-dev-seed-id {
  margin-top: calc(2 * var(--pu));
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7a6454;
}
.daily-dev-seeds {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(4 * var(--pu));
  margin-top: calc(8 * var(--pu));
}
.daily-dev-seeds button {
  min-height: calc(32 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(180, 150, 120, 0.3);
  border-radius: calc(10 * var(--pu));
  background: rgba(255, 255, 255, 0.78);
  color: #3a2618;
  font-size: calc(8.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.03em;
}
.main-menu-settings {
  margin-top: calc(12 * var(--pu));
  padding: calc(8 * var(--pu)) 0 0;
}
.nav-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--pu));
  width: 100%;
  flex: 0 0 auto;
  margin: 0 0 calc(2 * var(--pu));
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--pu));
  min-height: calc(36 * var(--pu));
  padding: 0 calc(12 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #15384f;
  font: inherit;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow:
    0 calc(6 * var(--pu)) calc(14 * var(--pu)) rgba(18, 42, 64, 0.08),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
}
.nav-pill--home {
  gap: calc(7 * var(--pu));
  min-height: calc(34 * var(--pu));
  padding: 0 calc(11 * var(--pu));
  background: rgba(255, 255, 255, 0.72);
  color: #1d3f58;
}
.nav-pill-icon {
  width: calc(25 * var(--pu));
  height: calc(25 * var(--pu));
  flex: 0 0 auto;
  object-fit: contain;
}
.nav-pill-text {
  line-height: 1;
}
.main-menu-view--hub .menu-back,
.main-menu-view--board .menu-back,
.home-sub .menu-back {
  align-self: start;
  margin: 0;
}
/* Shop BACK/HOME is the shared secondary-page nav. */
.subpage-nav {
  --subpage-nav-fill: rgba(255, 252, 246, .94);
  --subpage-nav-ink: #15384f;
  position: sticky;
  top: 0;
  z-index: 40;
  flex: 0 0 auto;
  pointer-events: auto;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.is-standalone-display .subpage-nav {
  --standalone-nav-safe-top: max(env(safe-area-inset-top, 0px), 40px);
  --standalone-nav-normal-top: max(calc(8 * var(--pu)), env(safe-area-inset-top, 0px));
  transform: translateY(calc(var(--standalone-nav-safe-top) + max(calc(8 * var(--pu)), 0px) - var(--standalone-nav-normal-top)));
}
/* Keep functional sticky navigation out of the subpage opacity animation's
   cached composition. Home's entrance animation remains independent. */
.main-menu.is-open .main-menu-view.subpage-frame.is-active {
  animation: none;
}
.subpage-nav .builder-back-btn,
.subpage-nav .builder-back-btn.has-graphic,
.subpage-nav .nav-pill--home {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  gap: var(--subpage-nav-gap);
  width: auto;
  height: auto;
  min-width: 0;
  min-height: var(--subpage-nav-height);
  padding: 0 var(--subpage-nav-pad-x);
  border-radius: 999px;
  border: 1px solid var(--subpage-nav-border);
  background: var(--subpage-nav-fill);
  box-shadow: var(--subpage-nav-shadow);
  color: var(--subpage-nav-ink);
  font-size: var(--subpage-nav-size);
  font-weight: var(--subpage-nav-weight);
  letter-spacing: var(--subpage-nav-track);
  line-height: 1;
}
.subpage-nav button {
  position: relative;
  isolation: isolate;
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 252, 246, .94);
  color: #15384f;
  text-shadow: none;
}
.subpage-nav button > span,
.subpage-nav button > .builder-back-arrow,
.subpage-nav button > .nav-pill-icon {
  position: relative;
  z-index: 1;
  opacity: 1;
  filter: none;
  transform: none;
  text-shadow: none;
  mix-blend-mode: normal;
}
.subpage-nav .builder-back-graphic,
.subpage-nav .builder-back-btn.has-graphic .builder-back-graphic {
  display: none;
}
.subpage-nav .builder-back-arrow,
.subpage-nav .builder-back-btn.has-graphic .builder-back-arrow {
  display: block;
  position: static;
  width: var(--subpage-nav-arrow);
  height: var(--subpage-nav-arrow);
  flex: 0 0 auto;
}
.subpage-nav .builder-back-text,
.subpage-nav .builder-back-btn.has-graphic .builder-back-text,
.subpage-nav .nav-pill-text,
.subpage-nav .nav-pill--home .nav-pill-text {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-size: var(--subpage-nav-size);
  font-weight: var(--subpage-nav-weight);
  letter-spacing: var(--subpage-nav-track);
  line-height: 1;
}
.subpage-nav .nav-pill-icon,
.subpage-nav .nav-pill--home .nav-pill-icon {
  width: var(--subpage-nav-icon);
  height: var(--subpage-nav-icon);
}
.subpage-frame--inset {
  --content-shift-x: calc(22 * var(--pu) - var(--subpage-nav-edge-x));
  --content-shift-top: max(0px, max(calc(28 * var(--pu)), env(safe-area-inset-top, 0px)) - var(--subpage-nav-edge-top));
  padding-left: var(--content-shift-x);
  padding-right: var(--content-shift-x);
}
.subpage-frame--inset > .subpage-nav {
  width: auto;
  align-self: stretch;
  margin-left: calc(-1 * var(--content-shift-x));
  margin-right: calc(-1 * var(--content-shift-x));
  margin-bottom: calc(2 * var(--pu) + var(--content-shift-top));
}
.main-menu-view--howto.subpage-frame--inset > .subpage-nav,
.main-menu-view--achievements.subpage-frame--inset > .subpage-nav,
.main-menu-view--settings.subpage-frame--inset > .subpage-nav {
  margin-bottom: calc(2 * var(--pu));
}
.main-menu-view--collection.subpage-frame--inset > .subpage-nav {
  margin-bottom: calc(14 * var(--pu));
}
.main-menu-view--worlds.subpage-frame--inset > .subpage-nav,
.main-menu-view--daily.subpage-frame--inset > .subpage-nav {
  margin-bottom: calc(2 * var(--pu));
}
.main-menu-view--create.is-builder > .subpage-nav {
  display: none;
}
#level-builder > .subpage-nav {
  width: auto;
  align-self: stretch;
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: calc(2 * var(--pu));
  margin-left: var(--subpage-nav-edge-x);
  margin-right: var(--subpage-nav-edge-x);
}
#level-builder .builder-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.main-menu-view--mylevels .builder-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-menu-view--mylevels .builder-top .nav-pill--home {
  justify-self: end;
  position: relative;
  z-index: 2;
}
.mylevels-new {
  display: inline-flex;
  align-self: start;
  align-items: center;
  justify-content: center;
  min-height: calc(32 * var(--pu));
  margin: calc(-4 * var(--pu)) 0 calc(4 * var(--pu));
  padding: 0 calc(12 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #2a4d66;
  font: inherit;
  font-size: calc(10.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.06em;
}
.main-menu-view--board .lb-chapter {
  margin: calc(2 * var(--pu)) 0 0;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6a879c;
}
.main-menu-view--board .lb-heading {
  margin: 0;
  font-size: calc(30 * var(--pu));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #12384f;
}
.main-menu-view--board .lb-meta,
.main-menu-view--board .lb-context {
  display: block;
  margin: calc(2 * var(--pu)) 0 0;
  font-size: calc(12 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #5a7c94;
}
.lb-sheet {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(12 * var(--pu)) calc(12 * var(--pu)) calc(10 * var(--pu));
  border-radius: calc(24 * var(--pu));
  background: rgba(255, 252, 248, 0.9);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(18, 42, 64, 0.08),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lb-sheet--hub {
  flex: 0 0 auto;
  padding-bottom: calc(16 * var(--pu));
}
.lb-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: calc(8 * var(--pu));
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lb-list {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  gap: calc(5 * var(--pu));
  margin: 0;
  overflow: auto;
  min-height: 0;
  padding: 0 calc(2 * var(--pu)) calc(6 * var(--pu));
}
.lb-daily-cta {
  flex: 0 0 auto;
  width: 100%;
  min-height: calc(52 * var(--pu));
  margin: calc(10 * var(--pu)) 0 0;
  padding: calc(14 * var(--pu)) calc(16 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(196, 156, 88, 0.7);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6e6 0%, #efc48a 58%, #e0b06a 100%);
  box-shadow:
    0 calc(8 * var(--pu)) calc(16 * var(--pu)) rgba(140, 88, 48, 0.14),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.92);
  color: #3a2618;
  font: inherit;
  font-size: calc(13.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.lb-daily-cta[hidden] {
  display: none;
}
.lb-sheet:has(.lb-daily-cta:not([hidden])) {
  padding-bottom: calc(16 * var(--pu));
}
.lb-row {
  display: grid;
  grid-template-columns: calc(40 * var(--pu)) minmax(0, 1fr) calc(74 * var(--pu));
  align-items: center;
  min-height: calc(40 * var(--pu));
  padding: calc(6 * var(--pu)) calc(10 * var(--pu));
  border-radius: calc(14 * var(--pu));
  background: rgba(255, 255, 255, 0.78);
  border: calc(1 * var(--pu)) solid rgba(255, 255, 255, 0.94);
  box-shadow: none;
}
.lb-row.is-gold,
.lb-row.is-silver,
.lb-row.is-bronze {
  min-height: calc(46 * var(--pu));
}
.lb-row.is-gold {
  background: linear-gradient(180deg, rgba(255, 246, 220, 0.96) 0%, rgba(255, 228, 176, 0.88) 100%);
  border-color: rgba(228, 192, 118, 0.55);
  box-shadow: 0 0 calc(12 * var(--pu)) rgba(216, 172, 82, 0.14);
}
.lb-row.is-silver {
  background: linear-gradient(180deg, rgba(244, 248, 252, 0.96) 0%, rgba(220, 232, 242, 0.88) 100%);
  border-color: rgba(176, 196, 214, 0.5);
  box-shadow: 0 0 calc(10 * var(--pu)) rgba(160, 184, 206, 0.12);
}
.lb-row.is-bronze {
  background: linear-gradient(180deg, rgba(255, 238, 224, 0.96) 0%, rgba(244, 214, 192, 0.88) 100%);
  border-color: rgba(220, 176, 148, 0.48);
  box-shadow: 0 0 calc(10 * var(--pu)) rgba(212, 150, 110, 0.12);
}
.lb-row.is-you {
  background: linear-gradient(180deg, rgba(255, 250, 236, 0.94) 0%, rgba(255, 232, 196, 0.58) 100%);
  border-color: rgba(232, 180, 96, 0.88);
  box-shadow:
    0 0 0 calc(1.5 * var(--pu)) rgba(232, 176, 86, 0.34),
    0 0 calc(16 * var(--pu)) rgba(232, 176, 86, 0.2),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.94);
}
.lb-row.is-you.is-gold,
.lb-row.is-you.is-silver,
.lb-row.is-you.is-bronze {
  box-shadow:
    0 0 0 calc(1.5 * var(--pu)) rgba(232, 176, 86, 0.36),
    0 0 calc(16 * var(--pu)) rgba(232, 176, 86, 0.22),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
}
.lb-rank-cell {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pu));
  min-width: 0;
}
.lb-rank {
  font-size: calc(12 * var(--pu));
  font-weight: 800;
  color: #5a7c94;
}
.lb-row.is-gold .lb-rank { color: #8a6418; }
.lb-row.is-silver .lb-rank { color: #4a6580; }
.lb-row.is-bronze .lb-rank { color: #8a5a38; }
.lb-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  padding-right: calc(8 * var(--pu));
  font-size: calc(13.5 * var(--pu));
  font-weight: 700;
  color: #1d4a66;
}
.lb-name-line {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--pu));
  min-width: 0;
  max-width: 100%;
}
.lb-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-progress {
  display: block;
  margin-top: calc(1 * var(--pu));
  font-size: calc(10.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6a879c;
}
.lb-row.has-progress {
  min-height: calc(48 * var(--pu));
}
.lb-row.is-gold.has-progress,
.lb-row.is-silver.has-progress,
.lb-row.is-bronze.has-progress {
  min-height: calc(50 * var(--pu));
}
.lb-score {
  width: 100%;
  font-size: calc(14.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: #12384f;
}
.lb-row.is-you .lb-name-text {
  font-weight: 800;
}
.lb-row.is-you .lb-score {
  font-size: calc(15.5 * var(--pu));
  font-weight: 800;
  color: #8a5a14;
}
.lb-you-star {
  flex: 0 0 auto;
  font-size: calc(11 * var(--pu));
  color: #d4a24a;
  opacity: 0.95;
}
.lb-medal {
  flex: 0 0 auto;
  width: calc(11 * var(--pu));
  height: calc(11 * var(--pu));
  border-radius: 50%;
}
.lb-medal.is-gold {
  background: linear-gradient(180deg, #f6d789, #e0a53a);
  box-shadow: 0 0 calc(8 * var(--pu)) rgba(224, 165, 58, 0.35);
}
.lb-medal.is-silver {
  background: linear-gradient(180deg, #f4f7fb, #c5d0db);
  box-shadow: 0 0 calc(8 * var(--pu)) rgba(180, 196, 210, 0.35);
}
.lb-medal.is-bronze {
  background: linear-gradient(180deg, #f3c4a6, #d48962);
  box-shadow: 0 0 calc(8 * var(--pu)) rgba(212, 137, 98, 0.28);
}
.lb-split {
  height: calc(1 * var(--pu));
  margin: calc(8 * var(--pu)) calc(8 * var(--pu));
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.tester-feedback,
.tester-feedback[hidden] {
  display: none;
}
.main-menu-view--feedback {
  overflow-x: hidden;
  overflow-y: auto;
  gap: calc(10 * var(--pu));
  padding-bottom: calc(12 * var(--pu));
}
.main-menu-view--feedback .nav-pair {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-bottom: 0;
  padding-bottom: calc(8 * var(--pu));
  background: linear-gradient(180deg, rgba(243, 238, 230, 0.98) 68%, rgba(243, 238, 230, 0));
}
.main-menu-view--feedback .home-sub-head {
  flex: 0 0 auto;
}
.feedback-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: calc(16 * var(--pu)) calc(14 * var(--pu)) calc(22 * var(--pu));
  overflow: visible;
  border-radius: calc(24 * var(--pu));
  background: rgba(255, 250, 242, 0.97);
}
.tester-feedback-kicker,
.tester-feedback-title {
  display: none;
}
.tester-feedback-body {
  display: grid;
  gap: calc(16 * var(--pu));
  min-width: 0;
  padding-bottom: calc(6 * var(--pu));
}
.select-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
  padding: calc(14 * var(--pu)) calc(12 * var(--pu)) calc(14 * var(--pu));
  border-radius: calc(24 * var(--pu));
}
.select-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8 * var(--pu));
  min-width: 0;
}
.select-tile {
  position: relative;
  min-width: 0;
  min-height: calc(58 * var(--pu));
  padding: calc(8 * var(--pu)) calc(6 * var(--pu)) calc(8 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(226, 216, 204, 0.7);
  border-radius: calc(16 * var(--pu));
  background: rgba(255, 248, 238, 0.88);
  color: #3d5f76;
  box-shadow: inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.86);
  font: inherit;
  cursor: pointer;
  appearance: none;
}
.select-tile-id {
  display: block;
  font-size: calc(16 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #12384f;
}
.select-tile-best {
  display: block;
  margin-top: calc(3 * var(--pu));
  font-size: calc(9.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6a8498;
}
.select-tile-best[hidden] {
  display: none;
}
.select-tile-lock {
  display: none;
  position: absolute;
  right: calc(7 * var(--pu));
  bottom: calc(7 * var(--pu));
  width: calc(11 * var(--pu));
  height: calc(13 * var(--pu));
  color: rgba(90, 110, 128, 0.45);
}
.select-tile-lock svg {
  display: block;
  width: 100%;
  height: 100%;
}
.select-tile-check {
  display: none;
  position: absolute;
  top: calc(7 * var(--pu));
  right: calc(7 * var(--pu));
  width: calc(14 * var(--pu));
  height: calc(14 * var(--pu));
  border-radius: 50%;
  background: linear-gradient(180deg, #f4e2b4, #e0c06a);
}
.select-tile-check::after {
  content: "";
  position: absolute;
  left: calc(4 * var(--pu));
  top: calc(3 * var(--pu));
  width: calc(6 * var(--pu));
  height: calc(3.5 * var(--pu));
  border-left: calc(1.7 * var(--pu)) solid #5a3e14;
  border-bottom: calc(1.7 * var(--pu)) solid #5a3e14;
  transform: rotate(-48deg);
}
.select-tile.is-completed .select-tile-check {
  display: block;
}
.select-tile.is-locked {
  cursor: default;
  opacity: 0.55;
  background: rgba(244, 240, 234, 0.72);
  color: #7a8c9a;
}
.select-tile.is-locked .select-tile-id {
  color: #6a7c8a;
}
.select-tile.is-locked .select-tile-lock {
  display: block;
}
.select-tile.is-selected {
  border-color: rgba(196, 148, 72, 0.92);
  background: rgba(255, 240, 208, 0.98);
  box-shadow:
    0 0 0 calc(2.2 * var(--pu)) rgba(210, 160, 80, 0.42),
    0 0 calc(18 * var(--pu)) rgba(216, 164, 80, 0.26),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
  color: #12384f;
}
.select-tile.is-selected.is-locked {
  opacity: 0.78;
  background: rgba(255, 240, 208, 0.9);
}
.select-tile.is-nudge {
  animation: pauseLevelNudge 220ms ease-out;
}
.select-preview {
  flex: 0 0 auto;
  margin-top: calc(14 * var(--pu));
  padding-top: calc(12 * var(--pu));
  border-top: calc(1 * var(--pu)) solid rgba(30, 60, 90, 0.08);
  text-align: center;
}
.select-preview-num {
  margin: 0;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6a879c;
}
.select-preview-name {
  margin: calc(5 * var(--pu)) 0 0;
  font-size: calc(20 * var(--pu));
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #12384f;
}
.select-preview-name.is-locked {
  font-size: calc(14 * var(--pu));
  font-weight: 650;
  color: #5a7384;
}
.select-preview-best {
  margin: calc(6 * var(--pu)) 0 0;
  font-size: calc(12 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5a7384;
}
.select-preview-best[hidden] {
  display: none;
}
.fb-q {
  margin: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  scroll-margin-top: calc(52 * var(--pu));
}
.fb-q.is-missing .fb-title {
  color: #8a4a4a;
}
.fb-title {
  margin: 0 0 calc(10 * var(--pu));
  padding: 0;
  font-size: calc(15.5 * var(--pu));
  font-weight: 700;
  line-height: 1.35;
  color: #123248;
}
.fb-optional {
  margin-left: calc(6 * var(--pu));
  font-size: calc(11 * var(--pu));
  font-weight: 650;
  letter-spacing: 0.04em;
  color: #7a96a8;
}
.fb-scale-row,
.fb-choices {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--pu));
}
.fb-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.fb-choices:has(.fb-choice:nth-child(3):last-child) {
  grid-template-columns: 1fr 1fr 1fr;
}
.fb-scale,
.fb-choice {
  min-height: calc(46 * var(--pu));
  padding: calc(10 * var(--pu)) calc(12 * var(--pu));
  border: calc(1.5 * var(--pu)) solid rgba(38, 78, 108, 0.34);
  border-radius: 999px;
  background: #ffffff;
  color: #123248;
  font: inherit;
  font-size: calc(14.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 calc(3 * var(--pu)) calc(8 * var(--pu)) rgba(40, 80, 120, 0.08);
  cursor: pointer;
}
.fb-scale {
  flex: 1 1 calc(46 * var(--pu));
  min-width: calc(46 * var(--pu));
}
.fb-choice {
  flex: 1 1 calc(96 * var(--pu));
}
.fb-scale.is-on,
.fb-choice.is-on {
  background: linear-gradient(180deg, #e7f4ff 0%, #cfe8f8 100%);
  border-color: #3d7fa3;
  color: #0d2a3d;
  box-shadow: 0 0 0 calc(2 * var(--pu)) rgba(90, 170, 210, 0.28);
}
.fb-scale-hints {
  display: flex;
  justify-content: space-between;
  margin-top: calc(6 * var(--pu));
  font-size: calc(11.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #3d6178;
}
.fb-note {
  width: 100%;
  min-height: calc(72 * var(--pu));
  padding: calc(10 * var(--pu)) calc(12 * var(--pu));
  border: calc(1.5 * var(--pu)) solid rgba(38, 78, 108, 0.28);
  border-radius: calc(16 * var(--pu));
  background: #ffffff;
  color: #123248;
  font: inherit;
  font-size: calc(13.5 * var(--pu));
  line-height: 1.4;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
  touch-action: manipulation;
}
.fb-note:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.96);
}
.fb-count {
  margin: calc(4 * var(--pu)) 0 0;
  text-align: right;
  font-size: calc(11 * var(--pu));
  font-weight: 650;
  color: #7a96a8;
}
.fb-send {
  width: 100%;
  min-height: calc(50 * var(--pu));
  margin-top: calc(4 * var(--pu));
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 247, 255, 0.92));
  color: #123248;
  font: inherit;
  font-size: calc(13.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 0 calc(10 * var(--pu)) calc(20 * var(--pu)) rgba(90, 150, 200, 0.18);
  cursor: pointer;
}
.fb-send:disabled {
  opacity: 0.7;
  cursor: wait;
}
.fb-status {
  margin: 0;
  font-size: calc(13 * var(--pu));
  font-weight: 650;
  line-height: 1.4;
  color: #7a4450;
}
.fb-done {
  display: grid;
  gap: calc(18 * var(--pu));
  padding: calc(12 * var(--pu)) 0 calc(6 * var(--pu));
}
.fb-done-title {
  margin: 0;
  font-size: calc(16.5 * var(--pu));
  font-weight: 700;
  line-height: 1.4;
  color: #15384f;
}

/* Build Your Own Level v1 */
.main-menu:has(#main-menu-create-page.is-builder.is-active),
.main-menu:has(#main-menu-mylevels-page.is-active) {
  padding-left: 0;
  padding-right: 0;
  padding-top: max(calc(8 * var(--pu)), env(safe-area-inset-top, 0px));
  padding-bottom: 0;
  overflow-x: hidden;
  background-color: #d4edff;
  background-image: url("assets/builder/Builder_Background_Studio_v1.webp?v=729");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.main-menu-view--create.is-builder {
  gap: 0;
  padding: 0;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
}
.main-menu-view--create.is-builder.is-active {
  background: none;
}
.builder {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0;
  min-height: 0;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
}
.builder-scroll {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--pu));
  min-height: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: calc(6 * var(--pu)) calc(8 * var(--pu)) calc(8 * var(--pu));
  scrollbar-width: none;
}
.builder-scroll::-webkit-scrollbar {
  display: none;
}
.builder-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: calc(4 * var(--pu)) 0 0;
  text-align: center;
}
.builder-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.builder-hero-title {
  width: 100%;
  margin: 0;
  background: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
}
.builder-hero-emblem {
  display: block;
  width: min(100%, calc(348 * var(--pu)));
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  transform: scale(1.2);
  transform-origin: 50% 36%;
  pointer-events: none;
  background: none;
}
.builder-hero-bar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 14px;
}
.builder-top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(6 * var(--pu));
  padding: calc(10 * var(--pu)) calc(4 * var(--pu)) calc(10 * var(--pu));
  background: linear-gradient(180deg, rgba(232, 246, 255, 0.62), rgba(232, 246, 255, 0.12) 78%, transparent);
}
.builder-title {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin: 0;
  min-width: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  font-size: clamp(calc(11 * var(--pu)), calc(12.5 * var(--pu)), calc(14 * var(--pu)));
  font-weight: 900;
  letter-spacing: 0.055em;
  color: #0b1f30;
  white-space: nowrap;
}
.builder-title-slot {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: calc(40 * var(--pu));
}
.builder-title-text {
  display: block;
  min-width: 0;
}
.builder-title.has-graphic .builder-title-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.builder-title-graphic {
  display: none;
  width: min(100%, clamp(136px, calc(189 * var(--pu)), 204px));
  height: auto;
  max-height: calc(40 * var(--pu));
  object-fit: contain;
  object-position: center;
}
.builder-title.has-graphic .builder-title-graphic {
  display: block;
}
.builder-back-btn {
  position: relative;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, calc(90 * var(--pu)), 96px);
  height: clamp(30px, calc(34 * var(--pu)), 38px);
  padding: 0;
  border: 0;
  background: none;
  color: #1d3f58;
  font: inherit;
  font-size: calc(10 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
}
.builder-back-graphic {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.builder-back-arrow {
  display: none;
  width: calc(22 * var(--pu));
  height: calc(22 * var(--pu));
  object-fit: contain;
}
.builder-back-text {
  display: block;
}
.builder-back-btn.has-graphic .builder-back-graphic {
  display: block;
}
.builder-back-btn.has-graphic .builder-back-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.builder-nav-btn {
  min-width: 0;
  min-height: calc(40 * var(--pu));
  padding: 0 calc(2 * var(--pu));
  border: 0;
  background: none;
  color: #2a4d66;
  font: inherit;
  font-size: calc(9.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: left;
  white-space: nowrap;
}
.builder-nav-btn--levels {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--pu));
  height: 35px;
  min-height: 35px;
  margin-right: 10px;
  padding: 0 11px 0 8px;
  border: 1px solid rgba(255, 248, 230, 0.96);
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.82);
  box-shadow:
    0 0 0 1px rgba(214, 176, 106, 0.42),
    0 4px 10px rgba(90, 120, 160, 0.12);
  color: #1a3f5c;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
}
.builder-mylevels-ico {
  width: calc(16 * var(--pu));
  height: calc(16 * var(--pu));
  object-fit: contain;
  flex: 0 0 auto;
}
.builder-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(3 * var(--pu));
  margin-top: 0;
  padding: calc(6 * var(--pu));
  overflow: visible;
  border-radius: calc(22 * var(--pu));
  background: rgba(255, 252, 248, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(8 * var(--pu)) calc(18 * var(--pu)) rgba(18, 42, 64, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.builder-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--pu));
  min-width: 0;
  min-height: calc(82 * var(--pu));
  padding: calc(5 * var(--pu)) 0 calc(6 * var(--pu));
  overflow: visible;
  border: 1px solid transparent;
  border-radius: calc(16 * var(--pu));
  background: rgba(255, 252, 248, 0.46);
  color: #3d5f76;
  font: inherit;
  font-size: clamp(7.5px, calc(8.2 * var(--pu)), 10px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 11px;
  white-space: nowrap;
}
.builder-tab.is-on {
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(214, 236, 246, 0.96));
  color: #12384f;
  box-shadow:
    inset 0 0 0 1.5px #3d94d4,
    0 0 calc(10 * var(--pu)) rgba(61, 148, 212, 0.34),
    0 calc(4 * var(--pu)) calc(8 * var(--pu)) rgba(40, 90, 130, 0.12);
}
.builder-tab-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  overflow: visible;
}
.builder-tab-ico {
  display: block;
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  object-position: center;
  transform-origin: center center;
  pointer-events: none;
}
.builder-tab[data-builder-tab="background"] .builder-tab-ico { transform: scale(1.39); }
.builder-tab[data-builder-tab="bricks"] .builder-tab-ico { transform: scale(1.27); }
.builder-tab[data-builder-tab="specials"] .builder-tab-ico { transform: scale(1.185); }
.builder-tab[data-builder-tab="mechanics"] .builder-tab-ico { transform: scale(1.23); }
.builder-tab[data-builder-tab="mission"] .builder-tab-ico { transform: scale(1.056); }
.builder-tab[data-builder-tab="powerups"] .builder-tab-ico { transform: scale(1.196); }
.builder-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: calc(8 * var(--pu));
  width: fit-content;
  max-width: calc(100% - 8px);
  margin: calc(1 * var(--pu)) auto calc(1 * var(--pu));
  min-height: calc(26 * var(--pu));
  padding: calc(4 * var(--pu)) calc(14 * var(--pu));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 252, 246, 0.94) 58%, rgba(244, 236, 224, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    0 calc(3 * var(--pu)) calc(8 * var(--pu)) rgba(70, 110, 150, 0.1),
    0 0 calc(10 * var(--pu)) rgba(255, 255, 255, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 calc(-1 * var(--pu)) 0 rgba(190, 214, 230, 0.28);
  color: #1f6ea8;
  font-size: calc(12 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}
.builder-hint::before,
.builder-hint::after {
  content: "✦";
  flex: 0 0 auto;
  color: #8ec4ef;
  font-size: calc(8 * var(--pu));
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 calc(4 * var(--pu)) rgba(150, 200, 240, 0.95);
}
.builder-hint[hidden] {
  display: none !important;
}
.builder-hint.is-portal {
  color: #5b4ad6;
  font-weight: 800;
}
.builder-hint.is-warn::before,
.builder-hint.is-warn::after,
.builder-hint.is-lane::before,
.builder-hint.is-lane::after,
.builder-hint.is-limit::before,
.builder-hint.is-limit::after {
  content: none;
}
.builder-hint.is-warn {
  width: fit-content;
  max-width: calc(100% - 8px);
  margin-left: auto;
  margin-right: auto;
  padding: calc(5 * var(--pu)) calc(12 * var(--pu));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 248, 236, 0.96), rgba(255, 236, 214, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 calc(4 * var(--pu)) calc(12 * var(--pu)) rgba(180, 120, 70, 0.12),
    0 0 calc(10 * var(--pu)) rgba(255, 220, 170, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: #5a3820;
  white-space: normal;
  animation: builder-hint-warn-in 180ms ease;
}
.builder-hint.is-lane,
.builder-hint.is-limit {
  color: #5a3820;
  font-weight: 800;
  white-space: normal;
}
@keyframes builder-hint-warn-in {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
.builder-editor {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--pu));
  min-width: 0;
  max-width: 100%;
  padding: calc(8 * var(--pu));
  border-radius: calc(24 * var(--pu));
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 calc(10 * var(--pu)) calc(22 * var(--pu)) rgba(70, 110, 150, 0.10);
}
.builder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--pu));
  min-width: 0;
}
.builder-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 1 1 auto;
  gap: calc(8 * var(--pu));
  min-width: 0;
}
.builder-name,
.builder-name-input {
  width: 100%;
  min-width: 0;
  min-height: calc(36 * var(--pu));
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #17364c;
  font: inherit;
  font-size: calc(15 * var(--pu));
  font-weight: 800;
  text-align: left;
}
.builder-name {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pu));
}
#builder-name-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-name[hidden],
.builder-name-input[hidden] {
  display: none !important;
}
.builder-toolbar.is-naming {
  flex-wrap: wrap;
}
.builder-toolbar.is-naming .builder-meta {
  flex: 1 0 100%;
  width: 100%;
}
.builder-toolbar.is-naming .builder-tools {
  margin-left: auto;
}
.builder-toolbar.is-naming .builder-name-input {
  flex: 1 1 auto;
  width: 100%;
}
.builder-name-input {
  box-sizing: border-box;
  padding: 0 calc(10 * var(--pu));
  border-radius: calc(12 * var(--pu));
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(61, 148, 212, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.builder-pencil {
  width: calc(16 * var(--pu));
  height: calc(16 * var(--pu));
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.82;
}
.builder-lives {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pu));
  color: #4d6578;
  font-size: calc(12 * var(--pu));
  font-weight: 800;
}
.builder-heart {
  width: calc(36 * var(--pu));
  height: calc(36 * var(--pu));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(156, 166, 178, 0.78);
  font-size: calc(27 * var(--pu));
  line-height: 1;
  text-shadow:
    0 calc(-1 * var(--pu)) 0 rgba(255, 255, 255, 0.7),
    0 calc(1 * var(--pu)) 0 rgba(120, 132, 146, 0.28);
}
.builder-heart.is-on {
  color: #f2546c;
  text-shadow:
    0 calc(-1 * var(--pu)) 0 #ffd5dc,
    0 calc(1 * var(--pu)) 0 #c43248,
    0 calc(2 * var(--pu)) calc(2 * var(--pu)) rgba(150, 28, 48, 0.28),
    0 0 calc(8 * var(--pu)) rgba(255, 110, 132, 0.55);
  filter: drop-shadow(0 calc(1 * var(--pu)) calc(1 * var(--pu)) rgba(176, 36, 58, 0.28));
}
.builder-tools {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: calc(8 * var(--pu));
  padding-left: calc(4 * var(--pu));
}
.builder-erase.is-on {
  box-shadow:
    0 0 0 3px #3d94d4,
    0 0 0 6px rgba(61, 148, 212, 0.26);
}
.builder-icon-btn {
  display: grid;
  place-items: center;
  width: clamp(42px, calc(44 * var(--pu)), 46px);
  height: clamp(42px, calc(44 * var(--pu)), 46px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.96),
    0 calc(4 * var(--pu)) calc(12 * var(--pu)) rgba(70, 130, 190, 0.26);
  opacity: 1;
}
.builder-icon-btn:disabled {
  opacity: 0.32;
  background: rgba(226, 234, 241, 0.58);
  box-shadow: none;
}
.builder-icon-img {
  width: clamp(30px, calc(33 * var(--pu)), 35px);
  height: clamp(30px, calc(33 * var(--pu)), 35px);
  object-fit: contain;
  opacity: 1;
  filter: brightness(0.78) saturate(1.28) hue-rotate(-8deg);
}
.builder-icon-btn:disabled .builder-icon-img {
  opacity: 0.72;
  filter: grayscale(0.28) saturate(0.55) brightness(1.05);
}
.builder-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: calc(18 * var(--pu));
  min-height: calc(200 * var(--pu));
  background: #d7eefe;
}
.builder-preview-bg {
  position: absolute;
  inset: -8% -4%;
  background: center 68% / cover no-repeat;
  filter: none;
}
.builder-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.builder-lane {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 72px;
  touch-action: none;
}
.builder-lane[hidden] { display: none; }
.builder-mechanics {
  position: absolute;
  inset: 0;
}
.builder-mechanic {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: center / contain no-repeat rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  touch-action: none;
}
.builder-mechanic.is-on {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(120, 196, 255, 0.85);
}
.builder-mechanic.is-bubble,
.builder-mechanic.is-fallingFlowers {
  background: none;
}
.builder-mechanic.is-bubble.is-on,
.builder-mechanic.is-fallingFlowers.is-on {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(120, 196, 255, 0.85);
}
.builder-special-thumb canvas,
.builder-mechanic canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.builder-special[data-bubble-tool] .builder-special-thumb {
  width: calc(40 * var(--pu));
  height: calc(40 * var(--pu));
  flex: 0 0 auto;
  margin-inline: auto;
}
.builder-special[data-bubble-tool] .builder-special-thumb canvas {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
}
.builder-bubbles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.builder-bubbles[hidden] { display: none; }
.builder-bubbles .builder-mechanic {
  pointer-events: auto;
  border-radius: 50%;
}
.builder-mechanic.is-reverse {
  transform: scaleX(-1);
}
.builder-mechanic.is-pulseGate,
.builder-mechanic.is-flowBreeze,
.builder-mechanic.is-flowVortex,
.builder-mechanic.is-slingField {
  background-color: rgba(186, 230, 255, 0.28);
}
.builder-paddle-mark {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 22%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  transform: translateX(-50%);
  pointer-events: none;
}
.builder-grid {
  position: relative;
  z-index: 1;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(5, var(--builder-brick-w, minmax(0, 1fr)));
  grid-template-rows: repeat(8, var(--builder-brick-h, auto));
  gap: var(--builder-gap-y, 9px) var(--builder-gap-x, 11px);
  justify-content: center;
  padding: var(--builder-inset-y, 10px) var(--builder-inset-x, 8px);
}
.builder-slot {
  position: relative;
  box-sizing: border-box;
  width: var(--builder-brick-w, 100%);
  height: var(--builder-brick-h, auto);
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(32, 68, 102, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.22);
}
.builder-slot-brick {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: center / contain no-repeat;
}
.builder-slot.is-shrink {
  z-index: 2;
  height: calc(var(--builder-brick-h, 28px) * 2 + var(--builder-gap-y, 9px));
  border-radius: 16px;
}
.builder-slot.is-shrink .builder-slot-brick {
  background-size: 100% 100%;
}
.builder-slot.is-shrink-foot {
  visibility: hidden;
  pointer-events: none;
}
.builder-slot.is-filled {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.builder-slot.is-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(72, 176, 220, 0.42);
  animation: builder-slot-pulse 0.75s ease-out 2;
}
@keyframes builder-slot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(72, 176, 220, 0.4);
    opacity: 1;
  }
  100% {
    box-shadow: 0 0 0 10px rgba(72, 176, 220, 0);
    opacity: 0;
  }
}
.builder-slot-badge {
  position: absolute;
  right: 4%;
  top: 50%;
  width: 38%;
  height: 78%;
  transform: translateY(-50%);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92) center / contain no-repeat;
  box-shadow: 0 1px 4px rgba(30, 50, 70, 0.18);
  font-size: 10px;
  font-weight: 800;
  color: #2a4d66;
  display: grid;
  place-items: center;
}
.builder-slot-badge[hidden] {
  display: none !important;
}
.builder-slot-badge.is-portal {
  width: auto;
  min-width: 26%;
  padding: 0 5%;
  font-size: calc(9 * var(--pu));
  letter-spacing: 0.04em;
  color: #3d2f8a;
}
.builder-slot.is-portal-a {
  box-shadow: 0 0 0 2px rgba(108, 86, 220, 0.55);
}
.builder-slot.is-portal-b {
  box-shadow: 0 0 0 2px rgba(46, 140, 196, 0.55);
}
.builder-slot.is-portal-wait {
  box-shadow: 0 0 0 2px #7b5cff;
}
.builder-slot.is-move-lane {
  background: rgba(118, 204, 220, 0.26);
  box-shadow: inset 0 0 0 1px rgba(62, 150, 172, 0.22);
}
.builder-slot.is-move-lane.is-filled {
  background: transparent;
  box-shadow: 0 0 0 2px rgba(78, 176, 196, 0.34);
}
.builder-slot-fall {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  transform: translate(-50%, -50%) scale(1.08);
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #072536;
  font-size: clamp(17px, calc(19 * var(--pu)), 21px);
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  -webkit-text-stroke: 1.35px rgba(255, 255, 255, 0.97);
  paint-order: stroke fill;
  text-shadow:
    0 0 5px rgba(255, 255, 255, 1),
    0 0 9px rgba(255, 252, 240, 0.8),
    0 1px 2px rgba(8, 28, 48, 0.3);
}
.builder-slot-fall[hidden] {
  display: none !important;
}
.builder-slot.is-falling .builder-slot-brick {
  box-shadow: 0 5px 8px rgba(36, 92, 140, 0.16);
}
.builder-status-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "lives dice status copy clear";
  align-items: center;
  column-gap: calc(6 * var(--pu));
  min-width: 0;
}
.builder-admin-open {
  grid-area: dice;
  width: calc(26 * var(--pu));
  height: calc(26 * var(--pu));
  padding: 0;
  border: 1px solid rgba(61, 148, 212, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 248, 0.7);
  color: #2a6f9e;
  font-size: calc(14 * var(--pu));
  line-height: 1;
}
.builder-admin-open[hidden] { display: none; }
.builder-status-row .builder-lives {
  grid-area: lives;
  justify-self: start;
  margin-left: 0;
}
.builder-status {
  grid-area: status;
  display: none;
  margin: 0;
  min-width: 0;
  font-size: calc(12 * var(--pu));
  font-weight: 800;
  text-align: center;
}
.builder-status.is-warn:not([hidden]) {
  display: block;
}
.builder-status.is-ready { color: #2f8a5a; }
.builder-status.is-warn {
  color: #c2410c;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.builder-status.is-saved { color: #1f8a4c; }
.builder-status-row:has(.builder-status.is-warn:not([hidden])) {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "lives dice copy clear"
    "status status status status status";
}
.builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-lives { grid-area: lives; }
.builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-admin-open { grid-area: dice; }
.builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-copy-data { grid-area: copy; }
.builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-clear { grid-area: clear; }
.builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-status { grid-area: status; }
.builder-clear {
  grid-area: clear;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: calc(5 * var(--pu));
  min-height: calc(36 * var(--pu));
  padding: 0 calc(6 * var(--pu));
  border: 0;
  background: none;
  color: #7b8b99;
  font: inherit;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  white-space: nowrap;
}
.builder-clear-ico {
  width: calc(15 * var(--pu));
  height: calc(15 * var(--pu));
  object-fit: contain;
  opacity: 0.78;
}
.builder-palette {
  max-width: 100%;
  min-width: 0;
  padding: calc(8 * var(--pu)) calc(10 * var(--pu));
  border-radius: calc(22 * var(--pu));
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 calc(8 * var(--pu)) calc(16 * var(--pu)) rgba(70, 110, 150, 0.09);
}
.builder-palette-label {
  margin: 0 0 calc(8 * var(--pu));
  color: #1f3a50;
  font-size: calc(11.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.builder-power-status {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.builder-swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(10 * var(--pu)) calc(12 * var(--pu));
}
.builder-swatches--bricks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  gap: calc(12 * var(--pu)) calc(10 * var(--pu));
}
.builder-swatch {
  width: calc(54 * var(--pu));
  height: calc(24 * var(--pu));
  border: 0;
  border-radius: 999px;
  background: center / contain no-repeat;
  box-shadow: 0 0 0 2px transparent;
}
.builder-swatches--bricks .builder-swatch {
  width: min(100%, calc(86 * var(--pu)));
  height: calc(34 * var(--pu));
}
.builder-swatch.is-on,
.builder-special.is-on,
.builder-power.is-on,
.builder-bg.is-on .builder-bg-thumb {
  box-shadow:
    0 0 0 3px #3d94d4,
    0 0 0 6px rgba(61, 148, 212, 0.26);
}
.builder-specials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(6 * var(--pu));
}
.builder-special {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--pu));
  min-height: calc(56 * var(--pu));
  padding: calc(6 * var(--pu)) calc(3 * var(--pu)) calc(7 * var(--pu));
  border: 0;
  border-radius: calc(14 * var(--pu));
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 0 2px transparent;
}
.builder-special.is-on {
  background: #fff;
}
.builder-special-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: calc(22 * var(--pu));
  background: center / contain no-repeat;
}
.builder-special-fall {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #072536;
  font-size: clamp(11px, 88%, 15px);
  font-weight: 900;
  display: grid;
  place-items: center;
  pointer-events: none;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.95);
  paint-order: stroke fill;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 7px rgba(255, 252, 240, 0.7);
}
.builder-special-label {
  color: #2a4d66;
  font-size: max(8px, calc(9.5 * var(--pu)));
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}
.builder-config,
.builder-mission-choices {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 * var(--pu));
  margin-top: calc(8 * var(--pu));
}
.builder-mission-group + .builder-mission-group {
  margin-top: calc(10 * var(--pu));
}
.builder-mission-choices {
  margin-top: 0;
  margin-bottom: 0;
  gap: calc(6 * var(--pu));
}
.builder-config-label {
  width: 100%;
  margin: calc(2 * var(--pu)) 0 0;
  color: #2a4d66;
  font-size: max(9px, calc(10 * var(--pu)));
  font-weight: 800;
  line-height: 1.2;
}
.builder-chip {
  min-height: calc(28 * var(--pu));
  padding: 0 calc(8 * var(--pu));
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #2a4d66;
  font: inherit;
  font-size: max(10px, calc(11 * var(--pu)));
  font-weight: 800;
  line-height: 1;
}
.builder-chip.is-on {
  background: #fff;
  box-shadow: 0 0 0 2px #3d94d4;
}
.builder-config-input {
  width: calc(64 * var(--pu));
  min-height: calc(28 * var(--pu));
  margin-left: calc(6 * var(--pu));
  border: 0;
  border-radius: calc(10 * var(--pu));
  background: #fff;
  color: #2a4d66;
  font: inherit;
  font-size: max(12px, calc(12 * var(--pu)));
  font-weight: 800;
  text-align: center;
}
.builder-portal-note {
  margin: calc(8 * var(--pu)) 0 0;
  color: #4a3cb8;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  text-align: center;
}
.builder-portal-note.is-wait {
  color: #5b4ad6;
}
.builder-powers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8 * var(--pu));
}
.builder-power {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--pu));
  min-height: calc(78 * var(--pu));
  padding: calc(6 * var(--pu)) calc(4 * var(--pu));
  border: 0;
  border-radius: calc(14 * var(--pu));
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 0 2px transparent;
}
.builder-power.is-on {
  background: #fff;
}
.builder-power-thumb {
  display: block;
  width: calc(64 * var(--pu));
  height: calc(34 * var(--pu));
  flex: 0 0 calc(34 * var(--pu));
  overflow: hidden;
  background: center / contain no-repeat;
}
.builder-powers [data-power="widePaddle"] .builder-power-thumb {
  background-size: calc(66.9 * var(--pu)) calc(22.3 * var(--pu));
  background-position: calc(-1.5 * var(--pu)) calc(6 * var(--pu));
}
.builder-powers [data-power="slowBall"] .builder-power-thumb {
  background-size: calc(31.4 * var(--pu)) calc(31.4 * var(--pu));
  background-position: calc(16.2 * var(--pu)) calc(1.5 * var(--pu));
}
.builder-powers [data-power="multiBall"] .builder-power-thumb {
  background-size: calc(50.6 * var(--pu)) calc(25.3 * var(--pu));
  background-position: calc(6.7 * var(--pu)) calc(4.2 * var(--pu));
}
.builder-powers [data-power="magnet"] .builder-power-thumb {
  background-size: calc(41.7 * var(--pu)) calc(31.2 * var(--pu));
  background-position: calc(10.8 * var(--pu)) calc(1.1 * var(--pu));
}
.builder-powers [data-power="extraLife"] .builder-power-thumb {
  background-size: calc(37.2 * var(--pu)) calc(37.2 * var(--pu));
  background-position: calc(12.4 * var(--pu)) calc(-1.7 * var(--pu));
}
.builder-powers [data-power="goldenBall"] .builder-power-thumb {
  background-size: calc(30.6 * var(--pu)) calc(28 * var(--pu));
  background-position: calc(16.7 * var(--pu)) calc(3 * var(--pu));
}
.builder-powers [data-power="happyBalls"] .builder-power-thumb {
  background-size: calc(39.9 * var(--pu)) calc(39.9 * var(--pu));
  background-position: calc(12.1 * var(--pu)) calc(-2.6 * var(--pu));
}
.builder-powers [data-power="mystery"] .builder-power-thumb {
  background-size: calc(35.1 * var(--pu)) calc(35.1 * var(--pu));
  background-position: calc(14.4 * var(--pu)) calc(-0.7 * var(--pu));
}
.builder-powers [data-power="guidingHelm"] .builder-power-thumb {
  background-size: calc(44.8 * var(--pu)) calc(44.8 * var(--pu));
  background-position: calc(9.2 * var(--pu)) calc(-5.5 * var(--pu));
}
.builder-powers [data-power="piercingOrb"] .builder-power-thumb {
  background-size: calc(44.6 * var(--pu)) calc(36.7 * var(--pu));
  background-position: calc(9.6 * var(--pu)) calc(-0.9 * var(--pu));
}
.builder-powers [data-power="rainbowRush"] .builder-power-thumb {
  background-size: calc(44.1 * var(--pu)) calc(44.1 * var(--pu));
  background-position: calc(10 * var(--pu)) calc(-4.9 * var(--pu));
}
.builder-powers [data-power="bubbleParade"] .builder-power-thumb {
  background-size: calc(44.4 * var(--pu)) calc(44.4 * var(--pu));
  background-position: calc(12.2 * var(--pu)) calc(-3 * var(--pu));
}
.builder-powers [data-power="giantOrb"] .builder-power-thumb {
  background-size: calc(34.9 * var(--pu)) calc(34.9 * var(--pu));
  background-position: calc(13.9 * var(--pu)) calc(0.2 * var(--pu));
}
.builder-powers [data-power="discoOrb"] .builder-power-thumb {
  background-size: calc(38.4 * var(--pu)) calc(38.4 * var(--pu));
  background-position: calc(12.9 * var(--pu)) calc(-2 * var(--pu));
}
.builder-powers [data-power="rainbowTwins"] .builder-power-thumb {
  background-size: calc(41.9 * var(--pu)) calc(33.5 * var(--pu));
  background-position: calc(11 * var(--pu)) calc(0.3 * var(--pu));
}
.builder-powers [data-power="jellyBall"] .builder-power-thumb {
  background-size: calc(34.1 * var(--pu)) calc(34.1 * var(--pu));
  background-position: calc(14.7 * var(--pu)) calc(0.1 * var(--pu));
}
.builder-powers [data-power="orbitOrb"] .builder-power-thumb {
  background-size: calc(44.7 * var(--pu)) calc(44.7 * var(--pu));
  background-position: calc(9.3 * var(--pu)) calc(-5.2 * var(--pu));
}
.builder-powers [data-power="bloomOrb"] .builder-power-thumb {
  background-size: calc(40.2 * var(--pu)) calc(40.2 * var(--pu));
  background-position: calc(11.3 * var(--pu)) calc(-2.7 * var(--pu));
}
.builder-powers [data-power="bigBubble"] .builder-power-thumb {
  background-size: calc(30.3 * var(--pu)) calc(30.3 * var(--pu));
  background-position: calc(16.2 * var(--pu)) calc(1.3 * var(--pu));
}
.builder-power-thumb.is-placeholder {
  display: grid;
  place-items: center;
  color: #2a4d66;
  font-size: calc(10 * var(--pu));
  font-weight: 800;
}
.builder-power-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2em;
  color: #2a4d66;
  font-size: max(8.5px, calc(9.5 * var(--pu)));
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.builder-bgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(8 * var(--pu)) calc(8 * var(--pu));
}
.builder-bg {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(5 * var(--pu));
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #2a4d66;
  font: inherit;
  font-size: calc(9 * var(--pu));
  font-weight: 800;
}
.builder-bg-thumb {
  display: block;
  width: 100%;
  height: calc(52 * var(--pu));
  border-radius: 12px;
  background: center / cover no-repeat;
  box-shadow: 0 0 0 2px transparent;
}
.builder-bg-name {
  line-height: 1.15;
  text-align: center;
}
.builder-bg.is-locked {
  opacity: 0.42;
}
.builder-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: calc(4 * var(--pu));
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding: calc(7 * var(--pu)) 14px max(10px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(212, 237, 255, 0), rgba(212, 237, 255, 0.72) 22%, rgba(212, 237, 255, 0.96));
}
.builder-copy-data {
  grid-area: copy;
  justify-self: end;
  min-height: calc(23 * var(--pu));
  padding: 0 calc(7 * var(--pu));
  border: 1px solid rgba(61, 148, 212, 0.22);
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.55);
  box-shadow: none;
  color: #6d8496;
  font: inherit;
  font-size: calc(8.5 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.builder-copy-data[hidden] {
  display: none;
}
.builder-mechanic-count {
  color: #1f6ea8;
  font-size: max(8px, calc(8 * var(--pu)));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}
.builder-admin {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.builder-admin[hidden] { display: none; }
.builder-admin-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(18, 42, 64, 0.28);
}
.builder-admin-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 6px;
  max-height: min(78vh, 640px);
  overflow: auto;
  padding: 12px;
  border-radius: 16px;
  background: #f4f7fb;
  color: #1d3f58;
  box-shadow: 0 12px 32px rgba(16, 42, 68, 0.28);
}
.builder-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.builder-admin-head h2 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.builder-admin-x,
.builder-admin-seed-new,
.builder-admin-go {
  border: 0;
  border-radius: 8px;
  background: #e7eef5;
  color: #1d3f58;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.builder-admin-x {
  width: 28px;
  height: 28px;
  font-size: 18px;
}
.builder-admin-kicker,
.builder-admin-label,
.builder-admin-note {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.builder-admin-note { text-transform: none; letter-spacing: 0; min-height: 14px; color: #1f6ea8; }
.builder-admin-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.builder-admin-chips button {
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #2a4d66;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}
.builder-admin-chips button.is-on { box-shadow: 0 0 0 2px #3d94d4; }
.builder-admin-worlds { display: grid; }
.builder-admin-worlds button {
  width: 100%;
  min-height: 32px;
  border-radius: 10px;
  text-align: left;
}
.builder-preview[data-world-bg] .builder-preview-bg {
  inset: 0;
  background-position: center top;
}
.builder-preview[data-world-bg]::after { background: none; }
.builder-admin-seed {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
}
.builder-admin-seed input {
  width: 110px;
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #1d3f58;
  font: inherit;
  font-weight: 800;
  text-align: center;
}
.builder-admin-seed-new,
.builder-admin-go { min-height: 32px; }
.builder-admin-go { background: #d7ebf8; }
.builder-actions-tray {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.builder-toast {
  margin: 0 auto;
  padding: calc(5 * var(--pu)) calc(12 * var(--pu));
  border-radius: 999px;
  background: rgba(47, 150, 88, 0.92);
  color: #fff;
  font-size: calc(12 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}
.builder-toast[hidden] { display: none; }
.builder-share {
  display: grid;
  gap: calc(4 * var(--pu));
  width: 100%;
  margin: 0 auto calc(6 * var(--pu));
}
.builder-share[hidden] { display: none; }
.builder-share-label,
.mylevels-import-label {
  margin: 0;
  color: #3d6d78;
  font-size: calc(10 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.builder-share-row,
.mylevels-import-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(6 * var(--pu));
}
.builder-share-code,
.mylevels-import-code,
.mylevels-share-code {
  min-width: 0;
  min-height: calc(36 * var(--pu));
  padding: calc(6 * var(--pu)) calc(10 * var(--pu));
  border: calc(1 * var(--pu)) solid rgba(90, 140, 170, 0.28);
  border-radius: calc(12 * var(--pu));
  background: rgba(255, 255, 255, 0.92);
  color: #1a3348;
  font: inherit;
  font-size: calc(11 * var(--pu));
}
.builder-share-copy,
.mylevels-import-load {
  min-height: calc(36 * var(--pu));
  padding: 0 calc(12 * var(--pu));
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #6ec7f2, #3aa0dc);
  color: #fff;
  font: inherit;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
}
.builder-test,
.builder-save {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 2172 / 724;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  transition: transform 100ms ease;
}
.builder-action-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.builder-test .builder-action-art {
  transform: scale(1.19);
}
.builder-save .builder-action-art {
  transform: scale(1.178);
}
.builder-test:active:not(.is-disabled),
.builder-save:active:not(.is-disabled) {
  transform: translateY(1px) scale(0.985);
}
.builder-test.is-disabled {
  opacity: 0.5;
  filter: saturate(0.55) brightness(0.95);
  transform: none;
}
.builder-save.is-disabled {
  opacity: 0.65;
  filter: saturate(0.7) brightness(0.96);
  transform: none;
}
.builder-save.is-saved {
  background: none;
  box-shadow: none;
}
.builder-dialog {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: calc(16 * var(--pu));
  background: rgba(20, 36, 52, 0.28);
}
.builder-dialog[hidden] { display: none; }
.builder-dialog-card {
  width: min(calc(300 * var(--pu)), 100%);
  max-width: 100%;
  padding: calc(20 * var(--pu));
  border-radius: calc(20 * var(--pu));
  background: rgba(255, 252, 248, 0.98);
  text-align: center;
}
.builder-dialog-copy {
  margin: 0 0 calc(16 * var(--pu));
  color: #17364c;
  font-size: calc(16 * var(--pu));
  font-weight: 800;
}
.builder-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(8 * var(--pu));
}
.builder-dialog-cancel,
.builder-dialog-ok {
  min-height: calc(44 * var(--pu));
  padding: 0 calc(8 * var(--pu));
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: calc(13 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}
.builder-dialog-cancel {
  background: #e6eef4;
  color: #1d3f58;
}
.builder-dialog-ok {
  background: linear-gradient(180deg, #ffb15a, #e8873a);
  color: #5a2a10;
}
@media (max-width: 340px) {
  #level-builder .builder-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: calc(4 * var(--pu));
    padding-left: calc(2 * var(--pu));
    padding-right: calc(2 * var(--pu));
  }
  .builder-title-graphic {
    width: min(100%, clamp(120px, calc(168 * var(--pu)), 176px));
    max-height: calc(36 * var(--pu));
  }
  .builder-nav-btn--levels {
    height: 32px;
    min-height: 32px;
    padding: 0 7px 0 6px;
    font-size: 8px;
  }
  .builder-back-btn,
  .builder-back-btn.has-graphic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.96),
      0 calc(4 * var(--pu)) calc(10 * var(--pu)) rgba(70, 130, 190, 0.18);
  }
  .builder-back-btn.has-graphic .builder-back-graphic {
    display: none;
  }
  .builder-back-btn.has-graphic .builder-back-arrow {
    display: block;
    width: 22px;
    height: 22px;
  }
  .main-menu-view--board .lb-heading,
  .home-sub-title,
  .daily-title {
    font-size: calc(26 * var(--pu));
  }
  .world-card {
    grid-template-columns: calc(88 * var(--pu)) minmax(0, 1fr) calc(36 * var(--pu));
    min-height: calc(136 * var(--pu));
  }
  .world-card.is-complete {
    min-height: calc(162 * var(--pu));
  }
  .world-card--soon {
    grid-template-columns: calc(88 * var(--pu)) minmax(0, 1fr) calc(36 * var(--pu));
    min-height: calc(124 * var(--pu));
  }
  .select-panel {
    padding: calc(12 * var(--pu)) calc(10 * var(--pu));
  }
  .select-tile {
    min-height: calc(50 * var(--pu));
    padding: calc(6 * var(--pu)) calc(4 * var(--pu));
    border-radius: calc(14 * var(--pu));
  }
  .select-preview-name {
    font-size: calc(17 * var(--pu));
  }
  .world-card-title {
    font-size: calc(15 * var(--pu));
  }
  .world-card-hint {
    font-size: calc(11.5 * var(--pu));
  }
  .howto-tabs {
    padding: calc(3 * var(--pu));
    border-radius: calc(16 * var(--pu));
  }
  .howto-tab {
    min-height: calc(36 * var(--pu));
    height: calc(36 * var(--pu));
    font-size: 9px;
    letter-spacing: 0.01em;
    padding: 0 2px;
  }
  .award-day {
    min-height: calc(26 * var(--pu));
    font-size: 8px;
    letter-spacing: 0;
  }
  .award-weekdays {
    gap: calc(2 * var(--pu));
  }
  .awards-section--daily {
    margin-top: calc(8 * var(--pu));
    padding-top: calc(16 * var(--pu));
  }
  .awards-section-label {
    font-size: calc(11 * var(--pu));
    letter-spacing: 0.14em;
  }
  .collection-tabs {
    padding: calc(4 * var(--pu));
    gap: calc(4 * var(--pu));
  }
  .collection-tab {
    min-height: calc(34 * var(--pu));
    height: calc(34 * var(--pu));
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .collection-preview--orb,
  .collection-preview--badge {
    min-height: calc(118 * var(--pu));
  }
  .collection-preview--orb .collection-preview-frame,
  .collection-preview--orb .collection-preview-stage,
  .collection-preview--badge .collection-preview-frame,
  .collection-preview--badge .collection-preview-stage {
    width: calc(108 * var(--pu));
    height: calc(108 * var(--pu));
  }
  .collection-art.is-padded-preview {
    width: 100%;
    height: 100%;
    transform: scale(2.28);
  }
  .collection-lock {
    width: 26px;
    height: 26px;
    right: -4px;
    bottom: 8px;
  }
  .collection-equipped-star {
    width: 22px;
    height: 22px;
  }
  .collection-lock-art,
  .collection-star-art {
    width: 18px;
    height: 18px;
  }
  .collection-equip,
  .collection-state {
    min-height: 28px;
    height: 28px;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 0 10px;
  }
  .collection-equipped-check {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }
  .howto-card {
    grid-template-columns: calc(44 * var(--pu)) minmax(0, 1fr);
    gap: calc(12 * var(--pu));
    padding: calc(11 * var(--pu)) calc(12 * var(--pu));
  }
  .howto-card.is-demo {
    grid-template-columns: calc(44 * var(--pu)) minmax(0, 1fr) auto;
    padding-right: calc(15 * var(--pu));
  }
  .howto-section[data-howto-panel="bricks"] .howto-card {
    padding-top: calc(8 * var(--pu));
    padding-bottom: calc(8 * var(--pu));
  }
  .howto-card-icon {
    width: calc(44 * var(--pu));
    height: calc(44 * var(--pu));
  }
  .feedback-panel {
    padding: calc(12 * var(--pu)) calc(10 * var(--pu)) calc(16 * var(--pu));
  }
  .settings-help {
    margin-top: calc(18 * var(--pu));
  }
  .daily-panel {
    padding: calc(16 * var(--pu)) calc(12 * var(--pu)) calc(16 * var(--pu));
  }
  .daily-chip {
    min-height: calc(26 * var(--pu));
    padding: calc(4 * var(--pu)) calc(8 * var(--pu));
    font-size: calc(10.5 * var(--pu));
  }
  .daily-play {
    min-height: calc(58 * var(--pu));
  }
  .lb-daily-cta {
    min-height: calc(46 * var(--pu));
    font-size: calc(12.5 * var(--pu));
  }
  .settings-row {
    min-height: calc(54 * var(--pu));
    padding: calc(12 * var(--pu)) calc(12 * var(--pu));
  }
  .settings-label {
    font-size: calc(14 * var(--pu));
  }
  .lb-row {
    grid-template-columns: calc(34 * var(--pu)) minmax(0, 1fr) calc(62 * var(--pu));
    padding: calc(6 * var(--pu)) calc(8 * var(--pu));
  }
  .lb-score {
    font-size: calc(13 * var(--pu));
  }
  .lb-row.is-you .lb-score {
    font-size: calc(13.5 * var(--pu));
  }
  .builder-tabs {
    gap: calc(3 * var(--pu));
    padding: calc(7 * var(--pu)) calc(6 * var(--pu));
  }
  .builder-tab {
    min-height: calc(74 * var(--pu));
    gap: calc(4 * var(--pu));
    font-size: 7.5px;
    line-height: 10px;
  }
  .builder-tab-icon-wrap {
    width: 38px;
    height: 38px;
  }
  .builder-tab-ico {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
  }
  .builder-status-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "lives dice status copy clear";
  }
  .builder-status-row:has(.builder-status.is-warn:not([hidden])) {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "lives dice copy clear"
      "status status status status status";
  }
  .builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-lives { grid-area: lives; }
  .builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-admin-open { grid-area: dice; }
  .builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-copy-data { grid-area: copy; }
  .builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-clear { grid-area: clear; }
  .builder-status-row:has(.builder-status.is-warn:not([hidden])) .builder-status { grid-area: status; }
  .builder-bgs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .builder-specials {
    gap: calc(5 * var(--pu));
  }
  .builder-special {
    min-height: calc(50 * var(--pu));
    padding: calc(4 * var(--pu)) calc(2 * var(--pu)) calc(5 * var(--pu));
  }
  .builder-special-thumb {
    height: calc(18 * var(--pu));
  }
  .builder-specials--mechanics .builder-special-thumb {
    width: calc(48 * var(--pu));
    height: calc(38 * var(--pu));
  }
  .builder-special-label {
    font-size: 8px;
  }
}
.builder-specials--mechanics .builder-special {
  min-height: calc(72 * var(--pu));
  gap: calc(4 * var(--pu));
}
.builder-specials--mechanics .builder-special-thumb {
  width: calc(48 * var(--pu));
  height: calc(38 * var(--pu));
  flex: 0 0 calc(38 * var(--pu));
  overflow: hidden;
  background-repeat: no-repeat;
}
.builder-specials--mechanics [data-mechanic="deflector"] .builder-special-thumb {
  background-size: calc(47.4 * var(--pu)) calc(47.4 * var(--pu));
  background-position: calc(0.1 * var(--pu)) calc(-4.4 * var(--pu));
}
.builder-specials--mechanics [data-mechanic="pulseGate"] .builder-special-thumb {
  background-size: calc(44.3 * var(--pu)) calc(44.3 * var(--pu));
  background-position: calc(2.4 * var(--pu)) calc(-2.9 * var(--pu));
}
.builder-specials--mechanics [data-mechanic="flowBreeze"] .builder-special-thumb {
  background-size: calc(48.1 * var(--pu)) calc(16 * var(--pu));
  background-position: calc(-0.2 * var(--pu)) calc(10.6 * var(--pu));
}
.builder-specials--mechanics [data-mechanic="flowVortex"] .builder-special-thumb {
  background-size: calc(38.5 * var(--pu)) calc(38.5 * var(--pu));
  background-position: calc(4.5 * var(--pu)) calc(-0.2 * var(--pu));
}
.builder-specials--mechanics [data-mechanic="energyCloud"] .builder-special-thumb {
  background-size: calc(36.3 * var(--pu)) calc(36.3 * var(--pu));
  background-position: calc(5.7 * var(--pu)) calc(0.6 * var(--pu));
}
.builder-specials--mechanics [data-mechanic="slingField"] .builder-special-thumb {
  background-size: calc(50.4 * var(--pu)) calc(50.4 * var(--pu));
  background-position: calc(-0.9 * var(--pu)) calc(-6 * var(--pu));
}
.builder-specials--mechanics [data-mechanic="moonCurrent"] .builder-special-thumb {
  background-size: calc(47.3 * var(--pu)) calc(6.4 * var(--pu));
  background-position: calc(0.3 * var(--pu)) calc(15.8 * var(--pu));
}
.builder-specials--mechanics [data-mechanic="flowBreeze"] .builder-special-thumb,
.builder-specials--mechanics [data-mechanic="moonCurrent"] .builder-special-thumb {
  z-index: 0;
  overflow: visible;
  filter: contrast(1.28) saturate(1.7) brightness(0.82);
}
.builder-specials--mechanics [data-mechanic="flowBreeze"] .builder-special-thumb::before,
.builder-specials--mechanics [data-mechanic="moonCurrent"] .builder-special-thumb::before,
.builder-specials--mechanics [data-mechanic="flowBreeze"] .builder-special-thumb::after,
.builder-specials--mechanics [data-mechanic="moonCurrent"] .builder-special-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  pointer-events: none;
}
.builder-specials--mechanics [data-mechanic="flowBreeze"] .builder-special-thumb::before,
.builder-specials--mechanics [data-mechanic="moonCurrent"] .builder-special-thumb::before {
  z-index: -1;
  filter:
    brightness(0.58)
    saturate(1.85)
    contrast(1.4)
    drop-shadow(0 0 0.55px rgba(28, 78, 132, 0.95));
}
.builder-specials--mechanics [data-mechanic="flowBreeze"] .builder-special-thumb::after,
.builder-specials--mechanics [data-mechanic="moonCurrent"] .builder-special-thumb::after {
  z-index: -2;
  opacity: 0.8;
  filter: blur(1.15px) saturate(1.9) brightness(1.08);
}
.main-menu-view--mylevels {
  position: relative;
  min-height: 100%;
  gap: calc(10 * var(--pu));
  padding: 0 calc(12 * var(--pu)) calc(16 * var(--pu));
  background: none;
}
.mylevels-import {
  display: grid;
  gap: calc(4 * var(--pu));
  margin: 0 0 calc(10 * var(--pu));
}
.mylevels-import-note {
  margin: 0;
  color: #2f6d4a;
  font-size: calc(11 * var(--pu));
  font-weight: 750;
}
.mylevels-import-note.is-warn { color: #9a3d4a; }
.mylevels-import-note[hidden] { display: none; }
.mylevels-share {
  display: grid;
  margin-top: calc(6 * var(--pu));
}
.mylevels-share[hidden] { display: none; }
.mylevels-list {
  display: grid;
  gap: calc(10 * var(--pu));
}
.mylevels-card {
  display: grid;
  grid-template-columns: calc(84 * var(--pu)) 1fr;
  gap: calc(10 * var(--pu));
  padding: calc(10 * var(--pu));
  border-radius: calc(18 * var(--pu));
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.84);
}
.mylevels-thumb {
  position: relative;
  overflow: hidden;
  width: calc(84 * var(--pu));
  height: calc(88 * var(--pu));
  border-radius: 12px;
  background: #9ec8e6 center / cover no-repeat;
}
.mylevels-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 42, 64, 0.26);
  pointer-events: none;
}
.mylevels-mechs {
  position: absolute;
  left: calc(6 * var(--pu));
  right: calc(6 * var(--pu));
  bottom: calc(4 * var(--pu));
  display: flex;
  gap: calc(3 * var(--pu));
  pointer-events: none;
}
.mylevels-mech {
  width: calc(7 * var(--pu));
  height: calc(7 * var(--pu));
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(32, 68, 102, 0.35);
}
.mylevels-mech.is-pulseGate,
.mylevels-mech.is-flowBreeze { border-radius: 2px; width: calc(12 * var(--pu)); }
.mylevels-mech.is-flowVortex { border-radius: 999px; }
.mylevels-mini {
  position: absolute;
  inset: calc(7 * var(--pu)) calc(6 * var(--pu));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: calc(1.6 * var(--pu));
  pointer-events: none;
}
.mylevels-mini-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: calc(2 * var(--pu));
  box-shadow:
    0 1px 2px rgba(12, 28, 40, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.mylevels-mini-cell.is-mint { background: #8fd4a8; }
.mylevels-mini-cell.is-yellow { background: #f4c56d; }
.mylevels-mini-cell.is-pink { background: #f3a6c2; }
.mylevels-mini-cell.is-peach { background: #f5c09a; }
.mylevels-mini-cell.is-blue { background: #8ec5f2; }
.mylevels-mini-cell.is-lavender { background: #c4b0f0; }
.mylevels-mini-cell.is-stone { background: #9aa3ad; }
.mylevels-mini-cell.is-armored { background: #d4b06a; }
.mylevels-mini-cell.is-moving { background: #6fd0d6; }
.mylevels-mini-cell.is-ghost { background: rgba(214, 228, 242, 0.62); }
.mylevels-mini-cell.is-portal-a { background: #7ec8ff; }
.mylevels-mini-cell.is-portal-b { background: #f3a6e0; }
.mylevels-mini-cell.is-regenerating { background: #7dce8a; }
.mylevels-mini-cell.is-gold { background: #e2b34a; }
.mylevels-mini-cell.is-diamond { background: #7ec8ff; }
.mylevels-mini-cell.is-key { background: #f0d36a; }
.mylevels-mini-cell.is-treasureChest { background: #d7a24a; }
.mylevels-mini-cell.is-crystal { background: #d7b4ff; }
.mylevels-mini-cell.is-shrink { background: #9fd7c8; }
.mylevels-mini-cell.is-falling::before {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -1px;
  color: #245a86;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
  pointer-events: none;
}
.mylevels-mini-cell.is-powerup::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: #fff6c8;
  box-shadow: 0 0 0 1px rgba(180, 130, 40, 0.35);
  transform: translate(-50%, -50%);
}
.mylevels-name {
  margin: 0;
  color: #17364c;
  font-size: calc(15 * var(--pu));
  font-weight: 800;
}
.mylevels-meta {
  margin: calc(4 * var(--pu)) 0 calc(8 * var(--pu));
  color: #5d7386;
  font-size: calc(12 * var(--pu));
  font-weight: 700;
}
.mylevels-actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--pu));
}
.mylevels-play,
.mylevels-edit,
.mylevels-duplicate,
.mylevels-share-btn,
.mylevels-delete {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pu));
  min-height: calc(36 * var(--pu));
  padding: 0 calc(8 * var(--pu));
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
}
.mylevels-act-ico {
  width: calc(14 * var(--pu));
  height: calc(14 * var(--pu));
  object-fit: contain;
  flex: 0 0 auto;
  pointer-events: none;
}
.mylevels-play { background: #3aa0dc; color: #fff; }
.mylevels-edit { background: #ffe08a; color: #5a3b10; }
.mylevels-duplicate { background: #c8eedd; color: #1d5a45; }
.mylevels-share-btn { background: #d9e8ff; color: #23486d; }
.mylevels-delete { background: #e8eef3; color: #5d7386; }
.mylevels-empty {
  margin: calc(24 * var(--pu)) 0;
  text-align: center;
  color: #5d7386;
  font-weight: 700;
}
.complete-custom-actions {
  display: grid;
  gap: calc(8 * var(--pu));
  margin-top: calc(8 * var(--pu));
}
.complete-custom-actions[hidden] {
  display: none !important;
}
.pause-return-editor {
  min-height: calc(44 * var(--pu));
  background: rgba(250, 247, 240, 0.78);
  border-color: rgba(255, 255, 255, 0.72);
  color: #2f5470;
  font-size: calc(12 * var(--pu));
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow:
    0 0 0 calc(1 * var(--pu)) rgba(176, 196, 228, 0.1),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.28);
}
.pause-return-editor[hidden],
.pause-daily[hidden],
.pause-levels-go[hidden] {
  display: none !important;
}
button.howto-card.is-demo {
  width: 100%;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, box-shadow 160ms ease;
}
button.howto-card.is-demo:active {
  transform: scale(0.98);
}
button.howto-card.is-demo:focus-visible {
  outline: calc(2 * var(--pu)) solid rgba(120, 176, 204, 0.72);
  outline-offset: calc(2 * var(--pu));
}
@media (hover: hover) and (pointer: fine) {
  button.howto-card.is-demo:hover {
    box-shadow:
      0 0 0 1px rgba(150, 196, 216, 0.42),
      0 0 calc(12 * var(--pu)) rgba(160, 206, 224, 0.28),
      0 calc(6 * var(--pu)) calc(14 * var(--pu)) rgba(18, 42, 64, 0.06),
      inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.95);
  }
}
.howto-scroll.is-demo-locked {
  touch-action: none;
  pointer-events: none;
}
.howto-demo {
  --pu: var(--world-unit);
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16 * var(--pu));
}
.howto-demo[hidden] {
  display: none !important;
}
.howto-demo-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(72, 112, 140, 0.18);
  cursor: pointer;
}
.howto-demo-panel {
  position: relative;
  z-index: 1;
  width: min(calc(340 * var(--pu)), 100%);
  margin: 0;
  padding: calc(14 * var(--pu)) calc(16 * var(--pu)) calc(16 * var(--pu));
  border-radius: calc(24 * var(--pu));
  background: linear-gradient(180deg, rgba(255, 252, 248, 0.98) 0%, rgba(246, 242, 252, 0.98) 46%, rgba(232, 244, 252, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow:
    0 calc(18 * var(--pu)) calc(40 * var(--pu)) rgba(40, 72, 102, 0.16),
    0 0 calc(24 * var(--pu)) rgba(170, 210, 230, 0.28),
    inset 0 calc(1 * var(--pu)) 0 rgba(255, 255, 255, 0.96);
  color: #12384f;
  font-family: inherit;
  outline: none;
}
.howto-demo-head {
  position: relative;
  min-height: calc(44 * var(--pu));
  display: flex;
  align-items: center;
  padding-right: calc(48 * var(--pu));
}
.howto-demo-head h2 {
  margin: 0;
  font-family: inherit;
  font-size: calc(16 * var(--pu));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  color: #12384f;
}
.howto-demo-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(44 * var(--pu));
  height: calc(44 * var(--pu));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(14 * var(--pu));
  background: transparent;
  color: #5d7a90;
  cursor: pointer;
}
.howto-demo-close svg {
  width: calc(16 * var(--pu));
  height: calc(16 * var(--pu));
}
.howto-demo-close:focus-visible {
  outline: calc(2 * var(--pu)) solid rgba(120, 176, 204, 0.8);
  outline-offset: calc(1 * var(--pu));
}
.howto-demo-panel p {
  margin: calc(2 * var(--pu)) 0 calc(12 * var(--pu));
  font-family: inherit;
  font-size: calc(12 * var(--pu));
  font-weight: 600;
  line-height: 1.35;
  color: #5d7a90;
}
.howto-demo-stage {
  position: relative;
  width: calc(300 * var(--pu));
  max-width: 100%;
  height: calc(196 * var(--pu));
  margin: 0 auto;
  overflow: hidden;
  border-radius: calc(16 * var(--pu));
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 255, 255, 0.72), transparent 58%),
    linear-gradient(180deg, #d9f3fc 0%, #b7e4f6 46%, #f6e4c4 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
}
.howto-demo-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 calc(18 * var(--pu)) rgba(70, 110, 140, 0.14);
}
.howto-demo-orb,
.howto-demo-paddle,
.howto-demo-finger,
.howto-demo-rail,
.howto-demo-trail,
.howto-demo-bubble,
.howto-demo-pop,
.howto-demo-loaded {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.howto-demo-orb {
  z-index: 1;
  left: 50%;
  width: calc(44 * var(--pu));
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 calc(3 * var(--pu)) calc(4 * var(--pu)) rgba(40, 80, 110, 0.18));
}
.howto-demo-bubble,
.howto-demo-pop,
.howto-demo-loaded {
  z-index: 3;
  left: 50%;
  width: calc(38 * var(--pu));
  height: auto;
  object-fit: contain;
}
.howto-demo-loaded {
  width: calc(54 * var(--pu));
  z-index: 2;
}
.howto-demo-paddle {
  z-index: 2;
  left: 50%;
  bottom: calc(30 * var(--pu));
  top: auto;
  width: calc(92 * var(--pu));
  height: auto;
  aspect-ratio: 500 / 166;
  transform-origin: center bottom;
  filter: drop-shadow(0 calc(3 * var(--pu)) calc(4 * var(--pu)) rgba(40, 80, 110, 0.16));
}
.howto-demo-finger {
  z-index: 4;
  width: calc(70 * var(--pu));
  height: auto;
  aspect-ratio: 1402 / 1122;
  opacity: 0.84;
  filter: drop-shadow(0 calc(4 * var(--pu)) calc(6 * var(--pu)) rgba(18, 42, 64, 0.12));
}
.howto-demo-rail,
.howto-demo-trail {
  z-index: 3;
  height: calc(1.5 * var(--pu));
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 252, 248, 0.7), transparent);
}
.howto-demo-trail {
  opacity: 0;
}
.howto-demo-tap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: calc(18 * var(--pu));
  height: calc(18 * var(--pu));
  border-radius: 50%;
  border: 1px solid rgba(255, 252, 248, 0.88);
  box-shadow: 0 0 0 1px rgba(150, 196, 214, 0.22);
  opacity: 0;
  pointer-events: none;
}
.howto-demo-aura {
  position: absolute;
  left: 50%;
  bottom: calc(36 * var(--pu));
  z-index: 0;
  width: calc(118 * var(--pu));
  height: calc(26 * var(--pu));
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(150, 220, 236, 0.42), rgba(230, 176, 214, 0.16) 58%, transparent 74%);
  opacity: 0;
  pointer-events: none;
}
.howto-demo-orb.is-golden {
  z-index: 5;
  left: 0;
  width: calc(36 * var(--pu));
  filter: drop-shadow(0 0 calc(5 * var(--pu)) rgba(255, 206, 110, 0.42));
}
.howto-demo-brick,
.howto-demo-coin,
.howto-demo-spark {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.howto-demo-brick {
  z-index: 4;
  width: calc(42 * var(--pu));
  height: auto;
}
.howto-demo-coin {
  z-index: 6;
  width: calc(20 * var(--pu));
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.howto-demo-pickup {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 6;
  width: calc(28 * var(--pu));
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 calc(2 * var(--pu)) calc(3 * var(--pu)) rgba(40, 80, 110, 0.16));
}
.howto-demo-spark {
  z-index: 7;
  width: calc(22 * var(--pu));
  height: calc(22 * var(--pu));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 186, 0.9), rgba(255, 196, 96, 0.18) 55%, transparent 72%);
  opacity: 0;
}
.howto-demo-gold {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  font-family: "Quicksand", "Nunito", "Avenir Next", sans-serif;
  font-size: calc(12.5 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #f6b93b;
  text-shadow:
    0 1px 0 #8a5a16,
    0 0 calc(6 * var(--pu)) rgba(246, 185, 59, 0.35);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.howto-demo-brick.is-feature {
  width: calc(56 * var(--pu));
}
.howto-demo-brick.is-shield {
  z-index: 5;
}
.howto-demo-shell {
  position: absolute;
  left: 50%;
  top: 16%;
  z-index: 4;
  width: 56%;
  max-width: 100%;
  max-height: 30%;
  height: auto;
  aspect-ratio: 1527 / 563;
  transform: translateX(-50%);
  pointer-events: none;
}
.howto-demo-stage[data-demo-type="move-paddle"] .howto-demo-paddle {
  bottom: calc(96 * var(--pu));
}
.howto-demo-stage[data-demo-type="move-paddle"] .howto-demo-zone {
  bottom: calc(62 * var(--pu));
}
.howto-demo-stage[data-demo-type="move-paddle"] .howto-demo-finger {
  opacity: 1;
}
.howto-demo-zone {
  position: absolute;
  left: 50%;
  bottom: calc(6 * var(--pu));
  z-index: 3;
  width: calc(168 * var(--pu));
  height: calc(22 * var(--pu));
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.34);
  border: 1px solid rgba(186, 214, 240, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  pointer-events: none;
}
.howto-demo-zone::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: calc(3 * var(--pu));
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 250, 240, 0), rgba(186, 228, 242, 0.95), rgba(214, 220, 255, 1), rgba(186, 228, 242, 0.95), rgba(255, 250, 240, 0));
}
.howto-demo-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: calc(16 * var(--pu));
  height: calc(16 * var(--pu));
  margin: calc(-8 * var(--pu)) 0 0 calc(-8 * var(--pu));
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #d7eef8 46%, #8ec4dc);
  box-shadow: 0 1px 3px rgba(40, 80, 110, 0.22);
  pointer-events: none;
}
.howto-demo-stage[data-demo-type="pause"] .howto-demo-pause {
  right: calc(24 * var(--pu));
}
.howto-demo-stage[data-demo-type="pause"] .howto-demo-finger {
  z-index: 9;
}
.howto-demo-pause {
  position: absolute;
  top: calc(8 * var(--pu));
  right: calc(8 * var(--pu));
  z-index: 8;
  display: grid;
  place-items: center;
  width: calc(28 * var(--pu));
  height: calc(28 * var(--pu));
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.92);
  box-shadow: 0 2px 6px rgba(40, 80, 110, 0.16);
  pointer-events: none;
}
.howto-demo-pause img {
  width: calc(16 * var(--pu));
  height: calc(16 * var(--pu));
  object-fit: contain;
}
.howto-demo-pause.is-on {
  box-shadow: 0 0 0 2px rgba(120, 176, 204, 0.85), 0 2px 8px rgba(40, 80, 110, 0.18);
}
.howto-demo-hearts {
  position: absolute;
  top: calc(8 * var(--pu));
  left: calc(8 * var(--pu));
  z-index: 8;
  display: flex;
  gap: calc(3 * var(--pu));
  pointer-events: none;
}
.howto-demo-heart {
  width: calc(16 * var(--pu));
  height: calc(14 * var(--pu));
  color: #f24f78;
}
.howto-demo-heart svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.howto-demo-heart.is-empty {
  color: rgba(255, 252, 248, 0.55);
  filter: none;
}
.howto-demo-heart.is-gain {
  filter: drop-shadow(0 0 4px rgba(255, 170, 196, 0.85));
}
.howto-demo-counter {
  position: absolute;
  left: 50%;
  top: calc(28 * var(--pu));
  z-index: 8;
  transform: translateX(-50%);
  padding: calc(2 * var(--pu)) calc(8 * var(--pu));
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.92);
  color: #12384f;
  font-family: "Quicksand", "Nunito", "Avenir Next", sans-serif;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.howto-demo-counter[hidden] {
  display: none;
}
.howto-demo-tag {
  position: absolute;
  left: 50%;
  top: calc(5 * var(--pu));
  z-index: 8;
  transform: translateX(-50%);
  margin: 0;
  padding: calc(2 * var(--pu)) calc(8 * var(--pu));
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.9);
  color: #12384f;
  font-family: "Quicksand", "Nunito", "Avenir Next", sans-serif;
  font-size: calc(9 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.howto-demo-ammo {
  position: absolute;
  top: calc(8 * var(--pu));
  right: calc(10 * var(--pu));
  z-index: 8;
  padding: calc(2 * var(--pu)) calc(6 * var(--pu));
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.88);
  color: #3f6d86;
  font-family: "Quicksand", "Nunito", "Avenir Next", sans-serif;
  font-size: calc(11 * var(--pu));
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  pointer-events: none;
}
.howto-demo-ray {
  position: absolute;
  z-index: 6;
  width: calc(3 * var(--pu));
  height: calc(22 * var(--pu));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 236, 160, 0.95), rgba(186, 140, 255, 0.2));
  opacity: 0;
  pointer-events: none;
  transform-origin: center top;
}
.howto-demo-ray[data-hue="1"] { background: linear-gradient(180deg, rgba(255, 150, 196, 0.95), rgba(255, 210, 150, 0.15)); }
.howto-demo-ray[data-hue="2"] { background: linear-gradient(180deg, rgba(140, 220, 255, 0.95), rgba(180, 160, 255, 0.15)); }
.howto-demo-ray[data-hue="3"] { background: linear-gradient(180deg, rgba(170, 240, 190, 0.95), rgba(255, 220, 140, 0.15)); }
.howto-demo-flower {
  position: absolute;
  z-index: 6;
  width: calc(18 * var(--pu));
  height: calc(18 * var(--pu));
  pointer-events: none;
}
.howto-demo-break {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: calc(64 * var(--pu));
  height: auto;
  pointer-events: none;
  opacity: 0;
}
.build-badge {
  position: fixed;
  left: 8px;
  bottom: max(6px, env(safe-area-inset-bottom, 0px));
  z-index: 80;
  margin: 0;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(16, 34, 50, 0.28);
  font: 700 9px/1 Nunito, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(255, 252, 248, 0.88);
  text-shadow: 0 1px 2px rgba(20, 30, 40, 0.45);
  pointer-events: none;
}
.build-badge[hidden] {
  display: none;
}
.howto-demo-stage[data-demo-type="shell-lock"] .howto-demo-orb,
.howto-demo-stage[data-demo-type="normal-brick"] .howto-demo-orb,
.howto-demo-stage[data-demo-type="stone-brick"] .howto-demo-orb,
.howto-demo-stage[data-demo-type="portal-brick"] .howto-demo-orb,
.howto-demo-stage[data-demo-type="ghost-brick"] .howto-demo-orb {
  z-index: 6;
  width: calc(52 * var(--pu));
  filter:
    drop-shadow(0 calc(3 * var(--pu)) calc(5 * var(--pu)) rgba(40, 80, 110, 0.28))
    drop-shadow(0 0 calc(6 * var(--pu)) rgba(255, 252, 248, 0.72));
}
/* Daily Boss v1 */
.home-card--boss { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(112deg,#492c72 0%,#775087 54%,#b9833d 100%); box-shadow:inset 0 1px 0 #fff4d966,inset 0 -1px 0 #e6b76966,0 4px 10px #34244126; min-height: 94px; grid-column: 1 / -1; grid-template-columns:34% minmax(0,1fr) 44px; }
.home-card--boss::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(180deg,#ffffff17,transparent 52%,#2b173512); box-shadow:inset 0 0 0 1px #f7d59566; }
.home-card--boss::after { content:""; position:absolute; inset:0 66% 0 0; pointer-events:none; background:linear-gradient(110deg,transparent 30%,#fff3cb22 48%,transparent 66%); transform:translateX(-120%); animation:boss-card-sweep 12s ease-in-out infinite; }
.home-boss-art { position:relative; grid-column:1; grid-row:1; justify-self:center; width:82px; height:82px; pointer-events:none; animation:boss-portrait-float 3.2s ease-in-out infinite; }
.home-boss-art::before { content:""; position:absolute; inset:-4px; border-radius:50%; background:radial-gradient(ellipse,#ffd16c55 0%,#f1aa3326 42%,transparent 70%); animation:boss-halo-breathe 4.8s ease-in-out infinite; }
.home-boss-art::after { content:""; position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse 5px 3px at 38% 47%,#fff6cb99,transparent),radial-gradient(ellipse 5px 3px at 62% 47%,#fff6cb99,transparent),radial-gradient(ellipse 6px 4px at 50% 85%,#fff0bb55,transparent); animation:boss-portrait-glint 10s ease-in-out infinite; }
.home-card--boss .home-card-copy { position: relative; z-index: 2; }
.home-card--boss .home-card-sub { display: flex; flex-direction: column; font-size: 11px; gap: 2px; }
.home-boss-portrait { position:relative; display:block; width:82px; height:82px; object-fit:contain; filter:drop-shadow(0 2px 3px #24162c44) drop-shadow(0 0 5px #edb85a44); pointer-events:none; }
/* Reserve the portrait space, but reveal its pixels and effects only after load. */
.home-boss-art:not(.is-loaded), .home-boss-art:not(.is-loaded) img { border: 0; outline: 0; background: transparent; box-shadow: none; filter: none; animation: none; }
.home-boss-art:not(.is-loaded)::before, .home-boss-art:not(.is-loaded)::after { content: none; animation: none; background: transparent; box-shadow: none; }
.home-boss-art .home-boss-portrait { opacity: 0; transition: opacity 150ms ease-out; }
.home-boss-art.is-loaded .home-boss-portrait { opacity: 1; }
@keyframes boss-portrait-float { 0%,100% { transform:translateY(1px); } 50% { transform:translateY(-1px); } }
@keyframes boss-halo-breathe { 0%,100% { opacity:.65; transform:scale(.97); } 50% { opacity:.9; transform:scale(1.03); } }
@keyframes boss-portrait-glint { 0%,76%,100% { opacity:0; } 84% { opacity:.35; } 92% { opacity:0; } }
@keyframes boss-card-sweep { 0%,80% { transform:translateX(-120%); opacity:0; } 83% { opacity:.5; } 97%,100% { transform:translateX(120%); opacity:0; } }
@keyframes boss-arrow-breathe { 0%,100% { box-shadow:0 0 3px #f8d78d22; } 50% { box-shadow:0 0 7px #f8d78d55; } }
.home-card--boss .home-card-arrow { animation:boss-arrow-breathe 4.8s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .home-boss-art,.home-boss-art::before,.home-boss-art::after,.home-card--boss::after,.home-card--boss .home-card-arrow { animation:none; } .home-boss-art::after,.home-card--boss::after { opacity:0; } }
/* Premium Daily Boss panels; all styling is scoped to this dialog. */
.daily-boss-dialog {
  --boss-ink: #493956;
  width: min(350px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  box-sizing: border-box; padding: 0; overflow-y: auto;
  color: var(--boss-ink); text-align: center; font-family: Nunito, Quicksand, system-ui, sans-serif;
  border: 0; border-radius: 30px; background: transparent;
  box-shadow: 0 20px 65px #30254155, -5px -2px 19px #b393db36, 5px 5px 22px #edba6540;
}
.daily-boss-dialog::backdrop { background: #29233f7a; backdrop-filter: blur(7px); }
/* Same Campaign card surface and pseudo-layer highlights; 1px makes its em layout portable. */
.daily-boss-panel.level-intro-card { font-size: 1px; width: 100%; box-sizing: border-box; padding: 22px 22px 20px; }
.daily-boss-panel p, .daily-boss-panel h2 { margin: 0; }
.daily-boss-kicker { font-size: 15px; font-weight: 900; letter-spacing: .12em; color: #776080; }
.daily-boss-portrait { display: grid; place-items: center; width: 158px; height: 150px; margin: 10px auto 8px; position: relative; isolation: isolate; }
.daily-boss-portrait::before { content: ''; position: absolute; inset: 5px -4px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #f5c66c99, #f5d99f50 44%, transparent 72%); }
.daily-boss-portrait img { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 7px 8px #75553d29); }
.daily-boss-panel h2 { font-size: 22px; font-weight: 900; line-height: 1.15; letter-spacing: .015em; }
.daily-boss-panel .daily-boss-variant { display: inline-block; padding: 7px 14px; margin-top: 12px; border: 1px solid #baa0cc66; border-radius: 999px; background: #e7d9ef7d; color: #745382; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.daily-boss-instructions { margin-top: 21px; }
.daily-boss-warning { color: #9c6930; font-size: 11px; font-weight: 900; letter-spacing: .035em; }
.daily-boss-panel .daily-boss-detail { margin-top: 7px; color: #7b707c; font-size: 12px; line-height: 1.45; }
.daily-boss-reward { display: flex; flex-direction: column; gap: 5px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 19px auto 20px; padding: 9px 21px; border: 1px solid #dfbb718c; border-radius: 999px; background: linear-gradient(180deg,#fff5da,#ffd88d99); box-shadow: inset 0 1px 0 #fffaf0, 0 0 18px #ffc65c30; color: #986829; }
.daily-boss-reward strong { font-size: 16px; font-weight: 900; }
.daily-boss-reward span { font-size: 10px; font-weight: 900; letter-spacing: .075em; }
.daily-boss-reward span:empty { display: none; }
.daily-boss-panel [data-error] { color: #9a4d51; font-size: 12px; }
.daily-boss-panel [data-error]:empty { display: none; }
.daily-boss-actions { display: grid; gap: 8px; }
.daily-boss-actions { width: 100%; }
.daily-boss-actions button { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; max-width: none; min-height: 49px; margin: 0; box-sizing: border-box; font-size: 14px; font-weight: 900; }
.daily-boss-actions .complete-cta { border: 1px solid #e6ac50; }
.daily-boss-actions .complete-cta.is-ready { animation: dailyBossCtaPulse 2.8s ease-in-out infinite; }
@keyframes dailyBossCtaPulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 12px 24px #a05a1e24, 0 0 14px #ffd68c59, inset 0 1px 0 #fffffff5; }
  50% { transform: translateY(0) scale(1.022); box-shadow: 0 12px 26px #d26e244d, 0 0 27px #ffc45085, inset 0 1px 0 #fff; }
}
.daily-boss-actions .complete-cta.is-ready:hover,
.daily-boss-actions .complete-cta.is-ready:focus-visible,
.daily-boss-actions .complete-cta.is-ready:active { animation: none; }
.daily-boss-actions .complete-secondary { min-height: 44px; background: #fff5e280; border-color: #fffaf0; color: #6c577b; }
.daily-boss-actions [data-button-icon] { display: inline-flex; align-items: center; font-size: 24px; line-height: 1; }
.daily-boss-actions svg { width: 21px; height: 21px; }
.daily-boss-actions .complete-cta.is-cta-speaking { outline: 2px solid #ffe4a1; outline-offset: 3px; }
.daily-boss-actions .complete-cta.is-cta-speaking::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; box-shadow: 0 0 22px #ffbd4977; pointer-events: none; }
.daily-boss-actions button { position: relative; }
.daily-boss-actions button:disabled { opacity: .6; cursor: wait; }
.daily-boss-actions button:focus-visible { outline: 3px solid #a58acb; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .daily-boss-actions .complete-cta.is-ready { animation: none; } }
.daily-boss-dialog[data-view="victory"] .daily-boss-portrait::before { inset: -10px -18px; background: radial-gradient(ellipse, #f1bc5ed9, #f5d99f70 45%, transparent 73%); }
.daily-boss-dialog[data-view="victory"] .daily-boss-kicker { color: #9b712f; }
.daily-boss-dialog[data-view="victory"] .daily-boss-reward { width: 100%; padding: 16px 14px; border-radius: 19px; }
.daily-boss-dialog[data-view="victory"] .daily-boss-reward strong { font-size: 28px; }
.daily-boss-dialog[data-view="replay"] .daily-boss-reward strong { font-size: 13px; font-weight: 700; }
@media (max-height: 650px) { .daily-boss-panel.level-intro-card { padding: 18px; } .daily-boss-portrait { height: 120px; margin: 4px auto; } .daily-boss-portrait img { width: 120px; height: 120px; } .daily-boss-instructions { margin-top: 13px; } }
.start-screen-stack { max-height:min(100%, 100dvh); overflow-y:auto; }
.home-card--boss .home-card-copy { grid-column:2; grid-row:1; padding:8px 3px 8px 4px; }
.home-card--boss .home-card-title { font-size:17px; font-weight:900; letter-spacing:.035em; color:#fffaf4; }
.home-card--boss .home-card-sub { margin-top:4px; color:#fff4d6; text-shadow:0 1px 3px #25113d; font-weight:600; }
.home-card--boss [data-boss-name] { font-size:12px; font-weight:700; line-height:1.15; letter-spacing:0; }
.home-card--boss [data-variant-name] { font-size:10.5px; line-height:1.2; }
.home-card--boss [data-boss-status] { font-size:10px; line-height:1.2; }
.home-card--boss [data-boss-status] { color:#ffdc85; }
.home-card--boss .home-card-arrow { grid-column:3; grid-row:1; background:linear-gradient(135deg,#b88bdf,#bf8d39); }

/* Compact Home rhythm; retain scrolling as a fallback on shorter screens. */
.start-screen-stack { padding-top:max(8px, calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 1%)); }
.start-logo { width:min(58cqi,64%); max-width:232px; }
.start-slogan { margin-top:1px; }
.home-nav { margin-top:5px; padding-bottom:10px; }
.home-card--continue { min-height:100px; }
.home-card--continue { grid-template-columns:34% minmax(0,1fr) 44px; }
.home-card--daily { min-height:82px; }
.home-card--create { min-height:80px; }
.home-card + .home-card { margin-top:7px; }
.home-row { gap:7px; margin-top:11px; }
.home-row + .home-row { margin-top:8px; }
.home-tile { min-height:56px; padding:5px 10px; }
.daily-boss-reward[hidden] { display:none; }
.daily-boss-dialog[data-view="retry"] h2 { font-size:20px; line-height:1.2; }
.daily-boss-panel .daily-boss-identity { margin-top:9px; font-size:14px; font-weight:700; }
.daily-boss-dialog[data-view="retry"] .daily-boss-actions { margin-top:22px; }
.daily-boss-test-settings { width: 100%; margin-top: calc(16 * var(--pu)); }
.daily-boss-test-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.daily-boss-test-heading .settings-section { margin: 0; }
#daily-boss-test-active { flex-shrink: 0; font-size: calc(10 * var(--pu)); font-weight: 900; color: #775087; }
#daily-boss-test-active[hidden] { display: none; }
.daily-boss-test-panel { padding: calc(14 * var(--pu)); gap: calc(12 * var(--pu)); box-sizing: border-box; }
#daily-boss-test-profile { width: 100%; min-width: 0; min-height: 44px; padding: 10px 8px; border: 1px solid #d7b980; border-radius: 12px; background: #fff8ed; color: #493956; font: inherit; font-size: calc(12 * var(--pu)); font-weight: 800; }
#daily-boss-test-profile:focus-visible { outline: 3px solid #a58acb; outline-offset: 2px; }
#daily-boss-test-reset { width: 100%; min-height: 44px; font-size: calc(12 * var(--pu)); }

/* Workshop power-down is a status capsule, never a second paddle. */
.hud-powerup.is-workshop-shrink { width:auto; min-width:0; padding:0 calc(9 * var(--world-unit)); }
.hud-powerup.is-workshop-shrink .hud-timed-face > img { display:none; }
.hud-powerup.is-workshop-shrink .hud-timer-name { display:block; font-size:calc(10 * var(--world-unit)); }
.hud-power-down-mark { display:inline-flex; align-items:center; justify-content:center; width:calc(17 * var(--world-unit)); height:calc(17 * var(--world-unit)); border-radius:50%; background:#ffe2ed; color:#a52d58; border:1px solid rgba(180,64,100,.4); font:800 calc(17 * var(--world-unit))/1 sans-serif; }
.hud-power-down-mark[hidden] { display:none; }

/* Workshop result decor sits in the dialog's backdrop plane, never above card content. */
.wacky-result-bubbles { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.wacky-result-bubbles[hidden] { display:none; }
.daily-boss-dialog[data-workshop-result="true"] > .daily-boss-panel { position:relative; z-index:1; }
.wacky-result-bubbles i { position:absolute; left:var(--x); bottom:-90px; width:var(--size); height:var(--size); border-radius:50%; opacity:0; background:radial-gradient(circle at 33% 27%,#ffffff99,transparent 30%),radial-gradient(circle,transparent 52%,var(--bubble-color) 69%,transparent 75%); animation:workshopResultFloat var(--duration) linear var(--delay) infinite; }
@keyframes workshopResultFloat { 0% { transform:translate(0,0); opacity:0; } 12% { opacity:.38; } 48% { transform:translate(14px,-55dvh); opacity:.32; } 88% { opacity:.2; } 100% { transform:translate(-10px,calc(-100dvh - 150px)); opacity:0; } }
@media(prefers-reduced-motion:reduce){.wacky-result-bubbles i { animation:none; bottom:var(--still-y); opacity:.25; transform:none; }}

/* Shared Wacky pre-start: keep the normal control rail geometry. */
.bottom-control-zone.is-wacky-prestart .bottom-control-hint {
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 7px 10px;
  font-size: 10px;
  letter-spacing: .025em;
  color: #24566c;
  background: rgba(244, 253, 255, .95);
  border-color: rgba(166, 235, 255, .85);
  box-shadow: 0 0 12px rgba(123, 222, 255, .25);
  animation: none;
}
.bottom-control-zone.is-wacky-prestart .bottom-control-hint::after { display: none; }
.bottom-control-zone.is-wacky-prestart .level1-drag-finger { width: 48px; }