#screen-menu:not(.hidden) {
  display: block;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

#screen-menu .bg-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  z-index: var(--z-bg);
}

.cove-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-parallax);
  pointer-events: none;
  will-change: transform;
}
.cove-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.menu-stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-stage);
}

.menu-logo {
  position: absolute;
  top: clamp(8px, 2vh, 24px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 26vw, 360px);
  pointer-events: none;
}
.menu-logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.menu-logo--text {
  width: auto;
  max-width: min(72vw, 640px);
  top: clamp(10px, 2.4vh, 28px);
}
.menu-logo--text .menu-logo-text {
  position: static;
  inset: auto;
  padding: clamp(7px, 1.4vh, 13px) clamp(18px, 3vw, 34px);
  gap: clamp(2px, 0.6vh, 5px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 12, 28, .34), rgba(10, 8, 18, .2));
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .12);
  backdrop-filter: blur(2px);
}
.menu-logo--text .ml-eyebrow {
  font-size: clamp(11px, 1.5vw, 17px);
  letter-spacing: .14em;
  opacity: .92;
}
.menu-logo-text {
  position: absolute;
  inset: 6% 15% 20% 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-head);
  color: var(--cream);
  text-align: center;
}
.menu-logo-text .ml-eyebrow {
  font-weight: 600;
  font-size: clamp(9px, 1vw, 13px);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .82;
  color: var(--cream-warm);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.menu-logo-text .ml-eyebrow b { color: var(--gold); font-weight: 700; }
.menu-logo-text .ml-name {
  font-weight: 700;
  font-size: clamp(16px, 2.1vw, 28px);
  line-height: 1;
  letter-spacing: .005em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gold-hot);
  text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 16px rgba(240,168,48,.45);
}

.settings-stack {
  position: absolute;
  top: clamp(12px, 3vh, 30px);
  left: clamp(14px, 3vw, 42px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 16px);
}
.knob-btn {
  position: static;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.5vh, 6px);
}
.knob-btn img { width: clamp(50px, 6vw, 74px); height: auto; display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); transition: transform var(--zen-dur) var(--zen-ease); }
.knob-btn:hover img { transform: rotate(-8deg) scale(1.06); }
.knob-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: .02em;
  color: var(--cream);
  text-shadow: 0 2px 5px rgba(0,0,0,.6), 0 0 12px rgba(240,168,48,.3);
  white-space: nowrap;
}
.theme-btn {
  position: relative;
  width: clamp(116px, 14vw, 172px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  transition: transform var(--engine-dur) var(--engine-ease);
}
.theme-btn .plank-bg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.theme-btn .theme-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-head);
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
.theme-btn .theme-label {
  font-weight: 700;
  font-size: clamp(9px, 1vw, 12px);
  line-height: 1.04;
  text-align: center;
  padding: 0 8px;
}
.theme-btn .theme-sub {
  font-weight: 800;
  font-size: clamp(8px, 0.85vw, 10px);
  letter-spacing: .04em;
  color: var(--gold-hot);
  opacity: .92;
}
.theme-btn:hover { transform: translateY(-2px); }
.theme-btn:active { transform: translateY(0); }

/* Track-map theme: show the live 3D lagoon behind the menu */
#screen-menu.theme-track .cove-layer { display: none; }
#bg-dim.light { opacity: .5; }

.porthole-badge {
  position: absolute;
  top: clamp(8px, 2.2vh, 26px);
  right: clamp(14px, 3vw, 42px);
  width: clamp(88px, 9vw, 120px);
  pointer-events: none;
}
.porthole-badge > img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.porthole-coin {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--gold-hot), #C89A36);
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 18px);
  color: #2A1A06;
  white-space: nowrap;
}
.porthole-rank {
  position: absolute;
  top: 104%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  color: var(--cream);
  opacity: .7;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

.daily-shelf {
  position: absolute;
  top: clamp(124px, 19vh, 150px);
  right: clamp(10px, 2.4vw, 34px);
  width: clamp(150px, 17vw, 224px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--zen-dur) var(--zen-ease);
}
.daily-shelf .plank-bg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.daily-shelf:hover { transform: translateY(-2px) rotate(.6deg); }

#menu-racer-chip.capy-hero {
  position: absolute;
  right: clamp(2%, 6vw, 11%);
  bottom: clamp(6vh, 9vh, 13vh);
  left: auto;
  width: clamp(240px, 26vw, 540px);
  text-align: right;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  cursor: pointer;
}
#menu-racer-chip.capy-hero::after { display: none; }
#menu-racer-chip .capy-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
  filter: drop-shadow(-3px 0 0 rgba(255,224,154,.4)) drop-shadow(0 18px 28px rgba(0,0,0,.5));
  transition: transform var(--zen-dur) var(--zen-ease);
}
#menu-racer-chip.capy-hero:hover .capy-hero-img { transform: translateY(-6px); }
.capy-name-row {
  position: absolute;
  left: 52%;
  bottom: 3%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
#menu-racer-chip .capy-poster {
  width: clamp(34px, 4vw, 48px);
  height: clamp(34px, 4vw, 48px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
  background: var(--teal-lo);
}
.capy-hero-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 34px);
  color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 18px rgba(240,168,48,.25);
}
.signpost {
  position: absolute;
  left: clamp(40px, 12vw, 230px);
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 33vw, 450px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(8px, 1.4vh, 16px);
}
.signpost-post {
  position: absolute;
  left: -10px;
  top: -14px;
  bottom: -14px;
  width: clamp(16px, 2vw, 26px);
  border-radius: 7px;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.14) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, var(--walnut-lo), var(--walnut-hi) 50%, var(--walnut-lo));
  box-shadow: 0 10px 22px rgba(0,0,0,.5), inset 0 0 0 1px var(--walnut-lo);
}
.signpost-post::before,
.signpost-post::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--rope), #8A6A30);
}
.signpost-post::before { top: 14%; }
.signpost-post::after { bottom: 14%; }

/* the glowing medallion orbs ("dots") — removed for a clean, even look */
.plank .gem,
.daily-shelf .gem { display: none; }

.plank {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 215;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  transition: transform var(--zen-dur) var(--zen-ease);
}
.plank-bg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  object-position: center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
  transition: filter var(--engine-dur) var(--engine-ease);
}
.plank-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 26%;
  right: 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}
.plank-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 23px);
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.plank-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(9px, .9vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 3px;
}
.plank:hover { transform: translateX(-6px); }
.plank:hover .plank-bg {
  filter: drop-shadow(0 0 22px rgba(245,180,60,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.45));
}

.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); }

.gem {
  --gem-c: var(--gem-gold);
  position: absolute;
  top: 50%;
  left: 12%;
  width: clamp(9px, 1.3vw, 15px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 6%, var(--gem-c) 55%, rgba(0, 0, 0, .45));
  box-shadow: 0 0 9px var(--gem-c), 0 0 20px var(--gem-c), inset 0 1px 2px rgba(255, 255, 255, .7);
  pointer-events: none;
  animation: gemShimmer 3.6s var(--zen-ease) infinite;
}
.plank.focal .gem {
  width: clamp(11px, 1.6vw, 18px);
  box-shadow: 0 0 13px var(--gem-c), 0 0 28px var(--gem-c), 0 0 44px var(--gem-c), inset 0 1px 2px rgba(255, 255, 255, .8);
}
.plank.focal .gem::after {
  content: '';
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  border: 1px solid var(--gem-c);
  opacity: .35;
  animation: gemHalo 3.6s var(--zen-ease) infinite;
}

.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%, #FFF1C0, var(--lantern) 55%, #C8761E 88%);
  box-shadow: 0 0 18px var(--lantern), 0 0 42px rgba(255, 194, 90, .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(255, 200, 90, .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(124, 252, 208, .42), 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 gemShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
@keyframes gemHalo {
  0%, 100% { opacity: .15; transform: scale(.9); }
  50% { opacity: .45; transform: scale(1.1); }
}
@keyframes lanternFlicker {
  0%, 100% { opacity: 1; box-shadow: 0 0 18px var(--lantern), 0 0 42px rgba(255, 194, 90, .55); }
  45% { opacity: .82; box-shadow: 0 0 13px var(--lantern), 0 0 30px rgba(255, 194, 90, .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)); }
}
@keyframes fireflyPulse {
  0%, 100% { opacity: .12; }
  50% { opacity: .9; }
}
@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, .gem, .bio, .plank.focal .gem::after { 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--text { top: calc(clamp(10px, 2.4vh, 28px) + var(--ogp-safe-top-inset, 0px)); }