.menu-foreground {
  position: absolute;
  inset: 0;
  z-index: var(--z-fore);
  pointer-events: none;
}
.swag-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(70px, 13vh, 138px);
}
.swag-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.leaf {
  position: absolute;
  top: -14px;
  width: clamp(110px, 12vw, 175px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.leaf-l { left: 29%; }
.leaf-r { right: 29%; transform: scaleX(-1); }

.water-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(54px, 10vh, 104px);
  background: linear-gradient(180deg, rgba(27,107,107,0) 0%, rgba(27,107,107,.55) 38%, var(--teal) 64%, var(--teal-lo) 100%);
}
.water-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 10px);
  opacity: .6;
}
.water-strip::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,248,231,.5), transparent);
  filter: blur(1px);
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

@media (max-width: 760px) {
  .capy-hero { width: clamp(180px, 40vw, 260px); right: 2%; left: auto; }
  .signpost { width: 52vw; left: 12px; right: auto; top: 16vh; transform: none; }
  .menu-logo { width: 200px; }
}

#screen-menu.grade-dusk .bg-plate { filter: saturate(1.05) brightness(1.02); }

.porthole-badge { filter: drop-shadow(0 0 14px rgba(var(--glow-warm), .42)); }

#menu-racer-chip.capy-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 64%;
  height: 13%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--aura), transparent 70%);
  filter: blur(5px);
  z-index: -1;
  pointer-events: none;
}

.plank:active { transform: translateX(-6px) scale(.99); }
.plank:active .plank-bg {
  filter: drop-shadow(0 0 22px rgba(245, 180, 60, .55)) drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}
.knob-btn:active img { transform: rotate(-8deg) scale(1.06); }
.daily-shelf:active { transform: translateY(-2px) rotate(.6deg); }

.settings-stack {
  top: max(clamp(12px, 3vh, 30px), env(safe-area-inset-top));
  left: max(clamp(14px, 3vw, 42px), env(safe-area-inset-left));
}
.porthole-badge {
  top: max(clamp(8px, 2.2vh, 26px), env(safe-area-inset-top));
  right: max(clamp(14px, 3vw, 42px), env(safe-area-inset-right));
}

.fx {
  position: absolute;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  overflow: hidden;
}
.fx-grade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 18% 6%, rgba(255, 225, 150, .20), transparent 55%),
    radial-gradient(150% 120% at 50% 122%, rgba(28, 12, 36, .42), transparent 60%),
    linear-gradient(180deg, rgba(58, 36, 68, .12), transparent 32%, transparent 74%, rgba(12, 40, 50, .26));
}

.lantern {
  position: absolute;
  width: clamp(14px, 1.8vw, 22px);
  aspect-ratio: 1;
  border-radius: 50% 50% 52% 52%;
  background: radial-gradient(circle at 50% 40%, var(--cream), var(--accent-cyan) 55%, var(--deep) 88%);
  box-shadow: 0 0 18px var(--accent-cyan), 0 0 42px rgba(0, 229, 255, .55);
  animation: lanternFlicker 3.2s var(--zen-ease) infinite;
}
.lantern::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -42px;
  width: 1px;
  height: 42px;
  transform: translateX(-50%);
  background: linear-gradient(var(--rope), transparent);
  opacity: .45;
}
.lantern::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 8px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(var(--brass-hi), var(--brass-lo));
}
.lantern-l { top: clamp(56px, 12vh, 120px); left: 8%; }
.lantern-r { top: clamp(72px, 15vh, 150px); right: 11%; animation-delay: -1.6s; }

.firefly {
  position: absolute;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--firefly);
  box-shadow: 0 0 8px 2px rgba(0, 229, 255, .85);
  opacity: 0;
  animation:
    fireflyDrift var(--fx-dur, 9s) ease-in-out var(--fx-delay, 0s) infinite,
    fireflyPulse var(--fx-pulse, 2.4s) ease-in-out var(--fx-delay, 0s) infinite;
}

.bio {
  position: absolute;
  bottom: clamp(8px, 2.6vh, 30px);
  width: clamp(60px, 12vw, 150px);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 229, 255, .38), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  animation: bioPulse 5s var(--zen-ease) infinite;
}
.bio-l { left: 16%; }
.bio-r { right: 22%; animation-delay: -2.4s; }

@keyframes lanternFlicker {
  0%, 100% { opacity: 1; box-shadow: 0 0 18px var(--accent-cyan), 0 0 42px rgba(0, 229, 255, .55); }
  45% { opacity: .82; box-shadow: 0 0 13px var(--accent-cyan), 0 0 30px rgba(0, 229, 255, .4); }
  70% { opacity: .95; }
}
@keyframes fireflyDrift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(var(--fx-dx, 12px), var(--fx-dy, -16px)); }
  50% { transform: translate(calc(var(--fx-dx, 12px) * -0.6), var(--fx-dy2, -26px)); }
  75% { transform: translate(var(--fx-dx2, -10px), calc(var(--fx-dy, -16px) * 0.4)); }
}
/* fireflyPulse moved to css/animations.css (B1.4 — shared cross-file) */
@keyframes bioPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.08); }
}
@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(-90deg); }
}

#rotate-prompt { display: none; }
@media (orientation: portrait) {
  #rotate-prompt {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    background: linear-gradient(160deg, var(--dusk-1), var(--deep-ui));
    color: var(--cream-warm);
    font-family: var(--font-head);
    font-weight: 600;
  }
  #rotate-prompt .rot-ico {
    font-size: clamp(44px, 14vw, 70px);
    animation: rotateHint 2.2s var(--zen-ease) infinite;
  }
  #rotate-prompt .rot-text { font-size: clamp(15px, 4.4vw, 21px); max-width: 18ch; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .menu-logo { width: clamp(150px, 18vw, 220px); top: 4px; }
  .knob-btn img { width: clamp(44px, 8vw, 60px); }
  .knob-label { font-size: clamp(12px, 3vw, 15px); }
  .porthole-badge { width: clamp(60px, 11vw, 84px); }
  .daily-shelf {
    top: clamp(92px, 25vh, 110px);
    right: max(12px, env(safe-area-inset-right));
    left: auto;
    width: clamp(150px, 27vw, 188px);
  }
  .signpost {
    top: clamp(140px, 38vh, 156px);
    left: max(12px, env(safe-area-inset-left));
    right: auto;
    transform: none;
    width: clamp(168px, 26vw, 196px);
    gap: clamp(2px, .6vh, 5px);
  }
  #menu-racer-chip.capy-hero { width: clamp(160px, 23vw, 280px); right: max(12px, env(safe-area-inset-right)); left: auto; bottom: 5vh; }
  .swag-wrap { height: clamp(44px, 9vh, 80px); }
  .lantern-l { top: 44px; }
  .lantern-r { top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .firefly, .lantern, .bio { animation: none !important; }
  .firefly { opacity: .5; }
}

/* ── Play.fun safe-area bridge: nudge the menu top row below the Play.fun header when embedded. 0px fallback = standalone. ── */
.settings-stack { top: max(clamp(12px, 3vh, 30px), env(safe-area-inset-top), var(--ogp-safe-top-inset, 0px)); }
.porthole-badge { top: max(clamp(8px, 2.2vh, 26px), env(safe-area-inset-top), var(--ogp-safe-top-inset, 0px)); }
.menu-logo--brand { top: calc(clamp(8px, 2vh, 24px) + var(--ogp-safe-top-inset, 0px)); }