/* 1.3.9 / Night-sky menu, lifted tickets, and scattered self-twinkling stars. */
.menu-dialog {
  color: #f6e8ce;
  border: 1px solid #bca06a99;
  background-color: #100d27;
  background-image: url('../img/hero-starfield.svg'),
    radial-gradient(ellipse at 88% 40%, #713c6d66, transparent 64%),
    radial-gradient(ellipse at 10% 85%, #40327580, transparent 58%),
    linear-gradient(165deg, #0c102a, #231331 63%, #0a0a20);
  background-size: 1000px 625px, auto, auto, auto;
  box-shadow: inset 0 0 0 6px #0c0a211a, inset 0 0 0 7px #d2b17b26, 0 24px 80px #030212b3;
  isolation: isolate;
  scrollbar-color: #aa875c #15102b;
  overscroll-behavior: contain;
}
.menu-dialog::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 85% 18%, #fff3d5b3 0 1px, #c9b8f533 2px, transparent 9px),
    radial-gradient(circle at 12% 47%, #fff0cb99 0 1px, #e7b97b26 2px, transparent 10px),
    radial-gradient(circle at 78% 80%, #fff2daa6 0 1px, #d6c8ff26 2px, transparent 8px);
  opacity: .6;
}
.menu-dialog[open]::before { animation: menu-sky-glimmer 5s ease-in-out infinite alternate; }
.menu-dialog .dialog-top {
  min-height: 68px; padding: 12px 25px; color: #f3d9a5;
  background: #100e28ed; border-bottom: 1px solid #cab07b40;
}
.menu-dialog .dialog-top::before { content: 'MENU'; font: 13px/1.6 var(--roman); letter-spacing: .3em; }
.menu-dialog .icon-button:hover { background: #d8b97b1a; }
.menu-dialog .icon-button:focus-visible { outline-color: #f2d3a0; }
.menu-dialog nav { padding: 14px 26px 24px; }
.menu-dialog nav > a {
  position: relative; isolation: isolate; padding: 16px 13px;
  border-bottom: 1px solid #c9ac7845; color: #f4e6d1;
  transition: color .18s ease, text-shadow .18s ease;
}
.menu-dialog nav > a::before {
  content: ''; position: absolute; inset: 3px -3px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 35% 50%, #e6c17e2e, #c19ce614 58%, transparent 92%);
  box-shadow: inset 2px 0 #e5c88c, inset 0 0 22px #f9dca20d;
  opacity: 0; transition: opacity .18s ease;
}
.menu-dialog nav > a > strong { color: inherit; font-weight: 400; }
.menu-dialog nav > a > small { color: #d3c5d6; }
.menu-dialog nav > a > span, .menu-dialog nav > a > .icon { color: #d7b77d; }
.menu-dialog nav > a:is(:hover, :focus-visible, :active, .is-selecting, [aria-current="location"]) {
  color: #ffe7b3; text-shadow: 0 0 14px #eec67c66;
}
.menu-dialog nav > a:is(:hover, :focus-visible, :active, .is-selecting, [aria-current="location"])::before { opacity: 1; }
.menu-dialog nav > a:focus-visible { outline: 1px solid #f3d396; outline-offset: 3px; }
.menu-dialog .social-links--menu { color: #edd2a1; padding-top: 8px; }
@keyframes menu-sky-glimmer { from { opacity: .35; } to { opacity: .9; } }

/* A soft shadow below the paper keeps its printed surface flat and readable. */
.tour-card, .fukuoka-card {
  border-bottom: 5px solid #b49362;
  box-shadow: 0 2px 4px #30202b0a, 0 12px 16px -10px #30202b40, 0 23px 25px -22px #30202b29,
    inset 0 0 0 5px #fffcf2, inset 0 0 0 6px #c6aa7740;
}

/* Keep portrait sizing; light belongs to the sky rather than the photo. */
.cast .cast-member__portrait {
  position: relative; display: block; width: 216px; max-width: 100%; flex: 0 0 auto;
}
.cast .cast-member__portrait > .cast-member__photo {
  position: relative; width: 100%; z-index: 1;
  box-shadow: 0 10px 24px #04031145;
}
.cast .cast-pair .cast-member__portrait { width: 192px; }

/* No blurred halos: each small star has its own bright centre and fine rays. */
.cast .cast-stars {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: none; opacity: 1; mask-image: none; -webkit-mask-image: none;
}
/* Match the KV's fine-star density without restoring portrait halos. */
.cast .cast-stars::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('../img/hero-starfield.svg') center top / 1600px 1000px repeat;
  opacity: .86;
}
.cast .cast-sky-star {
  position: absolute; left: var(--star-x); top: var(--star-y);
  width: var(--star-size); height: var(--star-size); opacity: .38;
  animation: cast-sky-twinkle var(--star-cycle) ease-in-out var(--star-delay) infinite paused;
}
.cast .cast-sky-star::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, #fffef4 0 12%, #f8dc9e 28%, #b99ad2 100%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
.cast .cast-sky-star::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff8df;
  box-shadow: 0 0 4px #fff0c06b;
}
.cast .cast-sky-star.is-twinkling { animation-play-state: running; }
@keyframes cast-sky-twinkle {
  0%, 100% { opacity: .16; transform: scale(.65) rotate(0deg); }
  38% { opacity: .38; transform: scale(.88) rotate(0deg); }
  52% { opacity: 1; transform: scale(1.22) rotate(8deg); }
  69% { opacity: .3; transform: scale(.8) rotate(0deg); }
}
@media (max-width: 767px) {
  .menu-dialog { width: calc(100% - 24px); max-width: 540px; max-height: calc(100dvh - 24px); }
  .menu-dialog .dialog-top { min-height: 60px; padding: 8px 18px; }
  .menu-dialog nav { padding: 9px 17px 22px; }
  .menu-dialog nav > a { padding: 14px 10px; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 0 10px; }
  .menu-dialog nav > a > strong { font-size: clamp(20px, 5.8vw, 26px); }
  .menu-dialog nav > a > small { font-size: 12px; }
  .cast .cast-member__portrait { width: 180px; }
  .cast .cast-pair .cast-member__portrait { width: 156px; }
  .cast .cast-stars::before { background-size: 800px 500px; opacity: .88; }
  .cast .cast-sky-star { left: var(--star-mobile-x); width: calc(var(--star-size) * .8); height: calc(var(--star-size) * .8); }
}
html[data-motion="off"] .menu-dialog::before,
html[data-motion="off"] .cast .cast-sky-star { animation: none; }
html[data-motion="off"] .menu-dialog nav > a,
html[data-motion="off"] .menu-dialog nav > a::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .menu-dialog::before, .cast .cast-sky-star { animation: none !important; }
  .menu-dialog nav > a, .menu-dialog nav > a::before { transition: none; }
}