/* ===== global 2000s vibe ===== */
:root { --neon: #00ffea; --hot: #ff00ff; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  color: var(--neon);
  font-family: "Comic Sans MS", Impact, Arial, sans-serif;
  overflow-x: hidden;
  text-align: center;
  -webkit-text-size-adjust: 100%;        /* prevent iOS auto-zoom text */
  -webkit-tap-highlight-color: transparent;
}

/* glitter text header */
.bling {
  margin: 14px auto 24px;
  font-size: clamp(24px, 5vw, 56px);
  letter-spacing: 1px;
  text-transform: lowercase;
  text-shadow:
    0 0 6px #0ff,
    0 0 14px #0ff,
    0 0 24px #f0f;
  animation: hue 6s linear infinite;
}

/* ticker (fake <marquee/>) */
.top-banner {
  position: sticky; top: 0; z-index: 5;
  background: #111; border-bottom: 2px dashed #444;
  box-shadow: 0 0 20px #0ff inset;
}
.ticker {
  white-space: nowrap; overflow: hidden;
  font-weight: bold; padding: 6px 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px); /* iOS notch safe area */
}
.ticker span {
  display: inline-block; padding-left: 100%;
  animation: scroll 12s linear infinite;
}

/* ===== stage: image with lights behind ===== */
.stage {
  position: relative;
  width: min(80vw, 420px);
  margin: 8vh auto 0;
  aspect-ratio: 4 / 3;
}
.hero {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: contrast(1.5) saturate(1.8) brightness(1.05);
  border: 6px ridge #8ad;
  box-shadow:
    0 0 18px #0ff,
    0 0 36px #0ff,
    0 0 64px #f0f;
}

/* strobing light layer sits UNDER the image */
.strobe {
  position: absolute; inset: -4vmin; z-index: 1;
  filter: blur(2vmin) brightness(1.4);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* colored bulbs */
.dot {
  position: absolute;
  width: 22vmin; height: 22vmin; border-radius: 50%;
  opacity: 0;
  animation:
    strobe 0.12s infinite steps(1, end),
    jitter 3s infinite ease-in-out;
}
.d1 { top: 6%;  left: 10%; background: radial-gradient(circle, rgba(255,0,102,0.95), rgba(255,0,102,0) 60%); animation-delay: 0s; }
.d2 { top: 12%; right: 6%;  background: radial-gradient(circle, rgba(0,255,255,0.95), rgba(0,255,255,0) 60%); animation-delay: .03s; }
.d3 { top: 42%; left: 2%;   background: radial-gradient(circle, rgba(255,255,0,0.95), rgba(255,255,0,0) 60%); animation-delay: .06s; }
.d4 { top: 58%; right: 2%;  background: radial-gradient(circle, rgba(0,200,255,0.95), rgba(0,200,255,0) 60%); animation-delay: .09s; }
.d5 { bottom: 18%; left: 15%; background: radial-gradient(circle, rgba(255,0,255,0.95), rgba(255,0,255,0) 60%); animation-delay: .12s; }
.d6 { bottom: 10%; right: 18%; background: radial-gradient(circle, rgba(0,255,128,0.95), rgba(0,255,128,0) 60%); animation-delay: .15s; }
.d7 { top: 28%; left: 42%; background: radial-gradient(circle, rgba(255,128,0,0.95), rgba(255,128,0,0) 60%); animation-delay: .18s; }
.d8 { bottom: 38%; right: 40%; background: radial-gradient(circle, rgba(128,0,255,0.95), rgba(128,0,255,0,0) 60%); animation-delay: .21s; }

/* faint CRT scanlines */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0.15;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      transparent 2px,
      transparent 3px
    );
  animation: flicker 1.6s infinite steps(2, end);
}

/* ===== animations ===== */
@keyframes strobe { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jitter {
  0%   { transform: translate(-2vmin, -1vmin) scale(0.95); }
  50%  { transform: translate( 2vmin,  1vmin) scale(1.05); }
  100% { transform: translate(-2vmin, -1vmin) scale(0.95); }
}
@keyframes hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes flicker { 0% { opacity: 0.1; } 50% { opacity: 0.2; } 100% { opacity: 0.1; } }

/* reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; opacity: 0.25; }
  .scanlines, .bling, .ticker span { animation: none; }
}

/* Buttons & layout */
.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 14px;
  width: min(92vw, 560px);
  margin: 16px auto 28px;
}
.btn {
  display: inline-block; padding: 12px 16px; text-decoration: none;
  color: #000; background: #0ff; border: 3px ridge #f0f;
  box-shadow: 0 0 12px #0ff, 0 0 22px #f0f; font-weight: bold;
  touch-action: manipulation;             /* snappier taps */
}
.btn:hover { transform: translateY(-2px); }
.y2k { text-transform: uppercase; letter-spacing: .5px; }

/* page shells */
.page { background:#000; color:#0ff; margin:0; padding:24px 16px 60px; min-height:100vh; }
.btn-back { margin: 0 0 16px; }

.card {
  background: #080808;
  border: 3px ridge #8ad;
  box-shadow: 0 0 14px #0ff, 0 0 24px #f0f;
  padding: 14px;
  width: min(92vw, 680px);
  margin: 12px auto;
}

.form label { display:block; text-align:left; color:#0ff; margin-bottom:10px; font-weight:bold; }
.form input, .form textarea {
  width: 100%; padding: 10px; margin-top: 6px; background:#000; color:#0ff; border:2px solid #0ff;
}
.form button { margin-top: 10px; }

.flash { width:min(92vw,680px); margin:10px auto; }
.flash p { background:#111; border-left:4px solid #0ff; padding:8px 12px; }

.list .entry header { display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.time { opacity: .7; font-size: .9em; }

.grid {
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  width:min(96vw, 900px); margin: 0 auto;
}
.product img {
  width:100%; height:160px; object-fit:cover;
  image-rendering:pixelated; filter:contrast(1.4) saturate(1.6);
}
.product .price { color:#fff; text-shadow:0 0 8px #0ff; font-weight:bold; }
.empty { opacity:.7; }

/* === Booking page === */
.booking .form { margin-right: min(32vw, 360px); }
.booking.two-dancers .form {
  margin-left:  min(32vw, 360px);
  margin-right: min(32vw, 360px);
}
.booking .booking-dancer {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: min(28vw, 320px);
  height: auto;
  z-index: 10;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0,255,255,0.35));
  animation: dancerPulse 3.2s ease-in-out infinite;
  right: clamp(12px, 4vw, 40px);
}
.booking .booking-dancer--right { right: clamp(12px, 4vw, 40px); left: auto; }
.booking .booking-dancer--left  { left:  clamp(12px, 4vw, 40px); right: auto; }
@keyframes dancerPulse {
  0% {
    filter:
      drop-shadow(0 0 8px rgba(0,255,255,0.35))
      drop-shadow(0 0 0px rgba(255,0,255,0.00));
  }
  50% {
    filter:
      drop-shadow(0 0 24px rgba(0,255,255,0.55))
      drop-shadow(0 0 48px rgba(255,0,255,0.35));
  }
  100% {
    filter:
      drop-shadow(0 0 8px rgba(0,255,255,0.35))
      drop-shadow(0 0 0px rgba(255,0,255,0.00));
  }
}

/* ====== MOBILE-ONLY IMPROVEMENTS (no desktop changes) ====== */

/* very small phones: ensure buttons don't overflow and taps are comfy */
@media (max-width: 480px) {
  .btn { padding: 14px 18px; }           /* bigger tap target */
  .grid { grid-template-columns: 1fr; }  /* safety on tiny widths */
}

/* landscape phones: reduce top whitespace so hero stays visible */
@media (max-height: 520px) and (max-width: 900px) {
  .stage { margin: 4vh auto 0; }
}

/* iOS Safari bottom safe area spacing when content reaches edges */
@supports (padding: max(0px)) {
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* booking page: let form take full width on tablets/phones; hide dancers */
@media (max-width: 900px) {
  .booking .form { margin-left: 0; margin-right: 0; }
  .booking .booking-dancer { display: none; }
}

/* accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .booking .booking-dancer { animation: none; }
}
 
/* -------- past page (our lore) -------- */
.past .btn-back{
  display:flex;
  justify-content:center;
  margin:6px 0 10px;
}
.past .card--left{ text-align:left; }
.past .card--left h2{ margin-top:0; }

/* two-up image rows that collapse to one on phones */
.past .photo-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:14px;
  margin-top:10px;
}
.past .photo{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow: 0 0 20px rgba(0,255,234,.14);
  object-fit:cover;
}
.past .gallery{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap:12px;
  margin-top:10px;
}
@media (max-width: 880px){
  .past .gallery{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 640px){
  .past .photo-row{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .past .gallery{ grid-template-columns: 1fr; }
}
/* keep it out of the way on tiny phones */
@media (max-width: 420px){
  .music-toggle{ right: 10px; bottom: 10px; padding: .5rem .7rem; }
}
/* ----- MOBILE title peekers (≤900px) ----- */
.booking-hero { position: relative; display: flex; justify-content: center; align-items: center; }
.booking-peek {
  position: absolute; top: 0; pointer-events: none; opacity: 0;
  transform: translateY(-120%); /* start above title */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition: transform 480ms cubic-bezier(.25,.9,.3,1.4), opacity 220ms ease-out;
  z-index: 3; /* form/cards stay above with z=10 below */
}
.booking-peek.show { opacity: 1; transform: translateY(-10%); }

/* positions/sizes only on phones/tablets */
@media (max-width: 900px) {
  .booking-peek--left  { left: clamp(8px, 5vw, 18px);  width: clamp(70px, 24vw, 120px); transform: translate(-12%, -10%); }
  .booking-peek--right { right: clamp(8px, 5vw, 18px); width: clamp(70px, 24vw, 120px); }
  /* keep interactive stuff above decoration */
  .booking .card, .booking .form, .booking .entry, .booking .btn-back { position: relative; z-index: 10; }
  /* keep your original rule: hide big side dancers on mobile */
  .booking .booking-dancer { display: none !important; }
}

/* mobile: hide big dancers and let form be full width */
@media (max-width: 900px) {
  .booking .booking-dancer { display: none !important; }
  .booking .form { margin: 0; }
}

/* --- Booking: dancer core --- */
.booking .booking-dancer {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: min(28vw, 320px);
  height: auto;
  pointer-events: none;      /* never block inputs */
  z-index: 2;                /* below the form (see below) */
  filter: drop-shadow(0 0 8px rgba(0,255,255,0.35));
  animation: dancerPulse 3.2s ease-in-out infinite;
}
.booking .booking-dancer--right { right: clamp(12px, 4vw, 40px); left: auto; }
.booking .booking-dancer--left  { left:  clamp(12px, 4vw, 40px); right: auto; }

/* keep interactive UI above dancers */
.booking .card, .booking .form, .booking .flash, .booking .btn-back {
  position: relative; z-index: 10;
}

/* --- Desktop spacing (no overlap even at half-screen) --- */
@media (min-width: 901px) {
  .booking { --dancerW: min(24vw, 260px); --dancerGap: clamp(12px, 2vw, 32px); }
  .booking .booking-dancer { width: var(--dancerW); }

  /* default: one dancer (right) */
  .booking .form { margin-right: calc(var(--dancerW) + var(--dancerGap)); }

  /* if BOTH dancers are present, reserve both sides automatically */
  .booking:has(.booking-dancer--left):has(.booking-dancer--right) .form {
    margin-left:  calc(var(--dancerW) + var(--dancerGap));
    margin-right: calc(var(--dancerW) + var(--dancerGap));
  }
}

/* --- Mobile: hide big dancers, form full width --- */
@media (max-width: 900px) {
  .booking .booking-dancer { display: none !important; }
  .booking .form { margin: 0; }
  /* prevent iOS zoom on focus */
  .booking .form input, .booking .form textarea, .booking .form button { font-size: 16px; }
}

/* optional: pause dancer animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .booking .booking-dancer { animation: none; }
}

/* --- BOOKING PAGE FIX --- */

/* make sure the page fills the screen and centers content */
.page.booking {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vh, 60px);
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

/* keep hero + form stacked neatly */
.booking-hero {
  margin-bottom: 1.5rem;
  z-index: 10;
}

/* center the booking card/form */
.booking .card.form {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  max-width: 500px;
  width: 90%;
  margin: 0 auto;
  padding: 1.8rem;
  box-sizing: border-box;
  z-index: 10;
  position: relative;
}

/* tidy up inputs */
.booking .form label {
  display: block;
  text-align: left;
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.booking .form input,
.booking .form textarea {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: none;
  outline: none;
  font-family: inherit;
}

/* button styles (match your Y2K vibe) */
.booking .form button.btn.y2k {
  margin-top: 0.6rem;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 1rem;
  padding: 0.8rem 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1));
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* dancers — fixed to sides only on desktop */
.booking .booking-dancer {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: min(26vw, 300px);
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}
.booking .booking-dancer--left  { left: clamp(8px, 4vw, 40px); }
.booking .booking-dancer--right { right: clamp(8px, 4vw, 40px); }

/* hide big dancers on mobile */
@media (max-width: 900px) {
  .booking .booking-dancer { display: none; }
  .booking .card.form { width: 92%; padding: 1.2rem; }
  .booking-hero h1 { font-size: clamp(1.6rem, 5vw, 2rem); }
}

/* Newsletter — mobile polish only */
@media (max-width: 640px) {
  /* nicer breathing room */
  .newsletter.page { padding: 14px 12px 72px; }

  /* keep the intro text readable and centered */
  .newsletter h1,
  .newsletter p { margin-left: auto; margin-right: auto; padding: 0 8px; }

  /* card fills width but stays comfy */
  .newsletter .card {
    width: 100%;
    max-width: 560px;
    margin: 12px auto;
    padding: 14px;
  }

  /* stack fields 1 per row */
  .newsletter .form-grid { grid-template-columns: 1fr; gap: 12px; }

  /* labels become vertical; left-align inside the card */
  .newsletter .form {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: left;
  }
  .newsletter .form > span {
    display: block;
    margin-bottom: 4px;
    line-height: 1.1;
  }

  /* comfy tap targets + avoid iOS zoom */
  .newsletter .form input[type="text"],
  .newsletter .form input[type="email"] {
    font-size: 16px;
    padding: 12px 14px;
    width: 100%;
  }

  /* checkbox row: icon + long text aligned */
  .newsletter .form[style*="grid-template-columns: 24px 1fr"] {
    grid-template-columns: 24px 1fr !important;
    align-items: start;
    gap: 10px;
    margin-top: 10px;
  }
  .newsletter .form input[type="checkbox"] {
    width: 20px; height: 20px;
    margin-top: 2px;
  }

  /* primary action full width */
  .newsletter .actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .newsletter .actions .btn {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
  }

  /* image keeps corners + spacing */
  .newsletter .card-img { border-radius: 12px; margin-top: 14px; }
}

/* tiny phones: a touch more padding */
@media (max-width: 420px) {
  .newsletter .card { padding: 12px; }
}