/* Readymag Brutalist & Editorial Styles */
    body {
      background-color: #0a0b0d;
      color: #f4f5f7;
      font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
      overflow-x: hidden;
      selection-background-color: #d4ff00;
      selection-color: #0a0b0d;
    }
    ::selection {
      background: #d4ff00;
      color: #0a0b0d;
    }
    .text-outline {
      -webkit-text-stroke: 1.5px rgba(244, 245, 247, 0.25);
      color: transparent;
    }
    .text-outline-lime {
      -webkit-text-stroke: 1.5px #d4ff00;
      color: transparent;
    }
    .noise-bg {
      background-image: radial-gradient(rgba(212, 255, 0, 0.04) 1px, transparent 0);
      background-size: 24px 24px;
    }
    .readymag-sticker {
      box-shadow: 4px 4px 0px 0px #d4ff00;
      transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .readymag-sticker:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0px 0px #d4ff00;
    }
    .readymag-card {
      border: 1px solid #282c37;
      transition: border-color 0.2s, transform 0.2s;
    }
    .readymag-card:hover {
      border-color: #d4ff00;
    }
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    /* Tape style */
    .tape-badge {
      transform: rotate(-2deg);
      background: #d4ff00;
      color: #0a0b0d;
      font-weight: 800;
      font-family: 'Space Grotesk', monospace;
    }

/* Booking dialog accessibility and small-screen safeguards. */
body.modal-open { overflow: hidden; }
#bookingModal { overscroll-behavior: contain; }
#bookingModal [role="alert"] { line-height: 1.5; }
#toastContainer { max-width: min(90vw, 420px); }
#bookingResultCard { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .animate-marquee { animation: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* On narrow phones, keep the booking CTA and hamburger accessible, without wrapping sideways. */
@media (max-width: 640px) {
  .mobile-hidden-credential, #soundToggleBtn { display: none; }
  #navBookBtn, #mobileMenuBtn { flex-shrink: 0; }
  #navBookBtn { white-space: nowrap; padding: 0.6rem 0.65rem; font-size: 0.675rem; }
  header > div > a { min-width: 0; gap: 0.45rem; }
  header > div > a > div:nth-child(2) { min-width: 0; }
  header > div > a .font-display.text-xl { font-size: 1rem; }
  header > div > div:last-child { gap: 0.5rem; }
}
@media (max-width: 360px) {
  #navBookBtn { padding: 0.5rem; font-size: 0.625rem; }
  header > div > a .font-display.text-xl { font-size: 0.9rem; }
}


/* v2: Separate the hero's floating credential from its call-to-action on phones.
   The image, copy, and button remain fully visible instead of overlapping. */
@media (max-width: 767px) {
  .hero-master-badge {
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.65rem 0.75rem;
    max-width: calc(100% - 1.5rem);
    z-index: 2;
  }
  .hero-master-badge p:last-child {
    font-size: 0.625rem;
    line-height: 1.5;
  }
  .hero-message-panel {
    position: static;
    inset: auto;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: #171a21;
    border-top: 1px solid #282c37;
  }
  .hero-message-panel > div { min-width: 0; max-width: 100%; }
  .hero-message-panel h3 {
    font-size: clamp(1rem, 4.1vw, 1.125rem);
    line-height: 1.6;
    overflow-wrap: break-word;
  }
  #heroQuickBookBtn {
    max-width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}