/* ——— the story card (over the map) ——— */
.card-layer { z-index: 20; pointer-events: none !important; transition: opacity .3s; }
.card-layer.is-hidden { opacity: 0; }
.card-layer.is-hidden .story-card {
  pointer-events: none !important; }
.story-card {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: calc(26px + var(--sar));
  width: min(420px, 37vw);
  padding: 0;
  border-radius: 20px 18px 22px 19px;
  pointer-events: auto;
  transform: translate(calc(100% + 80px), -50%) rotate(5deg);
  transition: transform .6s var(--spring);
  touch-action: none;
}
.card-layer.is-open .story-card { transform: translateY(-50%) rotate(-1.2deg); }
.card-layer.is-out .story-card { transition-duration: .42s; transition-timing-function: cubic-bezier(.5, 0, .9, .5); }

.card-cover-wrap { position: relative; }
.card-cover {
  position: relative;
  aspect-ratio: 16 / 11;
  border-bottom: var(--line) solid var(--ink);
  border-radius: 17px 15px 0 0;
  overflow: hidden;
  background: var(--sky-pale);
}
.card-cover.is-loading { background: repeating-linear-gradient(-45deg, var(--sky-pale) 0 18px, #b9ddf8 18px 36px); }
.card-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-year {
  position: absolute; top: 10px; right: 10px;
  padding: 1px 10px;
  font-family: var(--font-title); font-weight: 700; font-size: 18px;
  color: var(--cream); background: var(--red);
  border: 2.5px solid var(--ink); border-radius: 10px;
}
.card-body { display: grid; gap: 10px; padding: 14px 18px 22px 84px; }
.card-title {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  min-width: 0;
  overflow-wrap: anywhere;
}
.card-play {
  position: absolute; top: 100%; left: 12px; translate: 0 -50%;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--red);
  box-shadow: var(--flat);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .09s;
  outline: none;
}
.card-play > svg { width: 58%; height: 58%; margin-left: 8%; pointer-events: none; }
.card-close { position: absolute; top: -20px; left: -20px; z-index: 2; }
.card-dad { position: absolute; top: -62px; right: 26px; width: 84px; height: 84px; z-index: 1; animation: peek .9s var(--spring) both .35s; }
.card-dad > svg { width: 100%; height: 100%; }
.card-dad-bubble {
  position: absolute; top: 6px; right: 92px;
  white-space: nowrap; padding: 4px 12px;
  font-size: 15px; font-weight: 700;
  background: var(--white); border: 2.5px solid var(--ink); border-radius: 16px 16px 4px 16px;
  box-shadow: var(--flat);
  animation: pop-in .5s var(--spring) both .9s;
}
@keyframes peek { from { transform: translateY(40px) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* portrait: keep the same illustrated card near the bottom of the map */
.card-layer.is-portrait .story-card {
  top: auto;
  right: auto;
  left: 50%;
  bottom: calc(16px + var(--sab));
  width: min(420px, calc(100% - 52px));
  transform: translate(-50%, calc(100% + 60px)) rotate(2deg);
}
.card-layer.is-portrait.is-open .story-card { transform: translateX(-50%) rotate(-.6deg); }
.card-layer.is-portrait .card-dad { top: -64px; }

/* ——— floating stories rail, rising from the stories button ——— */
.menu-layer { z-index: 9; }
.menu-panel {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--gap) + var(--sab) + var(--hud) * 1.38 + 18px);
  display: flex; flex-direction: column;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: translateY(48px) scale(.96);
  transform-origin: bottom right;
  opacity: 0;
  transition: transform .5s var(--spring), opacity .25s;
  pointer-events: none;
}
.menu-layer.is-open .menu-panel { transform: none; opacity: 1; pointer-events: auto; }
.menu-head { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 70px; }
.menu-dad { width: 78px; height: 78px; margin-bottom: -10px; transform: rotate(-6deg); }
.ribbon {
  position: relative;
  margin: 0;
  padding: 8px 46px 10px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(24px, 3.2vmin, 34px);
  color: var(--ink);
  background: var(--cream);
  border: var(--line) solid var(--ink);
  border-radius: 6px;
  box-shadow: var(--flat);
}
.ribbon::before, .ribbon::after {
  content: ''; position: absolute; top: 12px; width: 34px; height: 100%;
  background: var(--paper-deep); border: var(--line) solid var(--ink); z-index: -1;
}
.ribbon::before { right: -26px; clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%); }
.ribbon::after { left: -26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28% 50%); }
.ribbon > span { position: relative; }

.menu-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; }
.menu-scroll::-webkit-scrollbar { display: none; }
.menu-shelf {
  display: flex;
  gap: clamp(18px, 2.4vw, 30px);
  padding: 16px calc(var(--gap) + var(--sar) + 12px) 18px calc(var(--gap) + var(--sal) + 12px);
  width: max-content;
  min-width: 100%;
  justify-content: flex-start;
}
.menu-card {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  width: clamp(190px, calc((100vw - 240px) / 4), 272px);
  padding: 0 0 14px;
  border: var(--line) solid var(--ink);
  border-radius: 20px 18px 22px 19px;
  background-color: var(--cream);
  background-image: var(--grain);
  box-shadow: var(--flat-big);
  rotate: var(--tilt, 0deg);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .1s;
  outline: none;
}
.menu-cover-wrap { position: relative; flex: none; }
.menu-cover { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-bottom: var(--line) solid var(--ink); border-radius: 17px 15px 0 0; background: var(--sky-pale); }
.menu-cover.is-loading { background: repeating-linear-gradient(-45deg, var(--sky-pale) 0 16px, #b9ddf8 16px 32px); }
.menu-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-year {
  position: absolute; top: 10px; right: 10px;
  padding: 1px 10px;
  font-family: var(--font-title); font-weight: 700; font-size: 18px;
  color: var(--cream); background: var(--red);
  border: 2.5px solid var(--ink); border-radius: 10px;
}
.menu-card-title { padding: 12px 18px 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.25; text-wrap: balance; }
.menu-story { padding-bottom: 18px; }
.menu-story .menu-card-title { padding-inline-end: 64px; min-height: 2.5em; display: flex; align-items: center; }
.menu-card-play {
  position: absolute; top: 100%; left: 12px; translate: 0 -50%;
  width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--red); border: 3px solid var(--ink); border-radius: 50%;
  box-shadow: var(--flat);
}
.menu-card-play > svg { width: 58%; height: 58%; margin-left: 8%; }
.menu-panel.entering .menu-card { animation: card-in .55s var(--spring) backwards; }
.menu-panel.entering .menu-card:nth-child(2) { animation-delay: .07s; }
.menu-panel.entering .menu-card:nth-child(3) { animation-delay: .14s; }
.menu-panel.entering .menu-card:nth-child(4) { animation-delay: .21s; }
.menu-panel.entering .menu-card:nth-child(5) { animation-delay: .28s; }
@keyframes card-in { from { transform: translateY(40px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

.menu-teaser { background-color: var(--paper-deep); width: clamp(170px, calc((100vw - 240px) / 4.6), 236px); align-self: flex-end; }
.menu-story { width: clamp(220px, calc((100vw - 200px) / 3.6), 320px); }
.teaser-art { aspect-ratio: 16 / 11; display: grid; place-items: center; padding: 10px; border-bottom: var(--line) dashed rgba(42, 33, 28, .45); }
.teaser-art > svg { width: 78%; height: 100%; }
.menu-teaser .teaser-art > svg { animation: float 4s ease-in-out infinite; }
.menu-teaser:nth-child(odd) .teaser-art > svg { animation-delay: -2s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
.teaser-title { color: var(--ink-soft); }
.teaser-lock {
  position: absolute; top: 16px; left: -12px;
  padding: 2px 14px;
  font-family: var(--font-title); font-weight: 700; font-size: 16px;
  color: var(--ink); background: var(--magic);
  border: 2.5px solid var(--ink); border-radius: 4px;
  rotate: -12deg;
  box-shadow: var(--flat);
}
.menu-teaser.jiggle { animation: jiggle .55s ease; }
@keyframes jiggle {
  0%, 100% { transform: none; }
  20% { transform: rotate(-5deg) scale(1.04); }
  40% { transform: rotate(4deg) scale(1.05); }
  60% { transform: rotate(-3deg); }
  80% { transform: rotate(1.5deg); }
}
.teaser-bubble {
  position: absolute; bottom: calc(100% - 8px); left: 50%;
  translate: -50% 0;
  white-space: nowrap; padding: 6px 14px;
  font-size: 16px; font-weight: 700;
  background: var(--white); border: 2.5px solid var(--ink); border-radius: 18px;
  box-shadow: var(--flat);
  opacity: 0; pointer-events: none;
}
.teaser-bubble.show { animation: bubble 2.2s ease both; }
@keyframes bubble {
  0% { opacity: 0; transform: translateY(10px) scale(.7); }
  12%, 82% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@media (max-width: 700px), (orientation: portrait) {
  .menu-shelf { justify-content: flex-start; }
}

@media (max-height: 520px) {
  .menu-panel { bottom: calc(var(--gap) + var(--sab) + var(--hud) * 1.2 + 8px); }
  .menu-shelf { padding-block: 10px 12px; }
  .menu-story { width: 180px; padding-bottom: 8px; }
  .menu-card-title { padding-top: 6px; font-size: 16px; }
  .menu-story .menu-card-title { padding-inline-end: 48px; }
  .menu-card-play { width: 46px; height: 46px; left: 8px; }
}