/* 2026-09-08: one authoritative cross-browser layer for product steam,
   mobile viewport sizing, shop interaction, and the night-walk scene. */

.scene,
.shop-section {
  min-height: 100vh;
  min-height: 100svh;
}

.video-top {
  background: #050303 url("assets/tsubasa-top-poster-pc.webp") center/cover no-repeat;
}

/* Do not expose the decorative echo as duplicated heading text to assistive
   technology (and avoid a browser-dependent generated-text shadow). */
.hero-copy h1 em::after { content: "" !important; }

.qr-restore {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid #33251d;
}

.qr-restore img { width: 132px; height: auto; background: #fff; padding: 5px; }
.qr-restore div { font: 400 14px/1.6 "Yu Mincho", serif; }
.qr-restore small { display: block; color: var(--gold); letter-spacing: .18em; font-size: 9px; }

.limited-pending {
  background-image: url("assets/spicy-miso-limited.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

.signature .media {
  filter: brightness(.72) contrast(1.08) saturate(1.03) !important;
}

.shop-section .steam-shop {
  display: block !important;
  opacity: .18 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}

.walk-start,
.food-card > div {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.night-walk-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .72;
  transition: opacity .9s ease, transform 7s cubic-bezier(.2,.7,.2,1);
  transform: scale(1.015);
}

.night-walk-preview picture,
.night-walk-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.night-walk-preview img {
  object-fit: cover;
  object-position: center 72%;
  filter: brightness(.68) contrast(1.14) saturate(.92);
}

.night-walk-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #030303 0, rgba(3,3,3,.76) 31%, rgba(3,3,3,.16) 67%),
    linear-gradient(0deg, #030303 0, transparent 40%);
}

.night-route-preview {
  position: absolute;
  z-index: 2;
  right: 8vw;
  bottom: 12vh;
  width: min(34vw, 420px);
  color: #f2e9dc;
  font: 400 12px "Yu Mincho", serif;
  letter-spacing: .12em;
}

.night-route-preview i {
  display: block;
  position: relative;
  height: 1px;
  margin: 14px 0;
  overflow: visible;
  background: rgba(240,193,103,.34);
}

.night-route-preview i::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 72%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f0c167, #ff155e);
  box-shadow: 0 0 16px rgba(255,21,94,.7);
  animation: routePulse 3.2s ease-in-out infinite alternate;
}

.night-route-preview strong {
  display: block;
  color: #f0c167;
  text-align: right;
  font-weight: 500;
}

.night-map { z-index: 2; }
.night-walk.is-active .night-walk-preview { opacity: .12; transform: scale(1.06); }
.night-walk.is-active .night-map { opacity: .92; }

@keyframes routePulse {
  from { width: 18%; opacity: .48; }
  to { width: 100%; opacity: 1; }
}

@media (max-width:700px) {
  .video-top { background-image: url("assets/tsubasa-top-poster-mobile.webp"); }
  .hero {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
  }

  @supports (height: 100dvh) {
    .hero { height: 100dvh !important; }
  }

  .hero-logo {
    top: calc(env(safe-area-inset-top, 0px) + 3svh) !important;
    height: 24svh !important;
    max-width: 28vw !important;
  }

  .hero-copy,
  .hero-copy.reveal.in {
    left: 5vw !important;
    bottom: max(2.2svh, env(safe-area-inset-bottom, 0px)) !important;
    width: 90vw !important;
    max-width: 90vw !important;
  }

  .signature { min-height: 100vh; min-height: 100svh; }
  .signature-copy,
  .signature-copy.right {
    bottom: max(5svh, env(safe-area-inset-bottom, 0px));
  }

  .night-walk {
    min-height: 100vh;
    min-height: 100svh;
  }

  .night-walk-preview { opacity: .8; }
  .night-walk-preview img { object-position: center 60%; }
  .night-walk-preview::after {
    background:
      linear-gradient(180deg, #030303 0, rgba(3,3,3,.82) 25%, rgba(3,3,3,.1) 52%),
      linear-gradient(0deg, #030303 0, rgba(3,3,3,.16) 35%, transparent 58%);
  }

  .night-route-preview {
    right: 20px;
    bottom: 31%;
    width: calc(100% - 40px);
  }

  .night-map.maplibregl-map {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .night-walk.is-active .night-map { opacity: .9; }
  .night-walk.is-active .night-map-shell::after {
    background:
      linear-gradient(180deg, #030303 0, rgba(3,3,3,.72) 22%, transparent 46%),
      linear-gradient(0deg, #030303 0, transparent 34%);
  }

  .menu-panel.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .menu-panel.active .menu-sheet-card { order: 1; position: static; width: 100%; }
  .menu-panel.active .menu-text-list { order: 2; width: 100%; }
  .shop-section .steam-shop { opacity: .14 !important; }
  .qr-restore { gap: 14px; margin-top: 22px; }
  .qr-restore img { width: 116px; }
}

@media (prefers-reduced-motion:reduce) {
  .night-route-preview i::after { animation: none; width: 100%; }
  .night-walk-preview { transition: none; }
}