*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --R:#FF0000; --Y:#FFFF00; --M:#FF00FF; --C:#00FFFF;
  --B:#0000FF; --G:#00FF00; --O:#FF8800; --P:#9900CC;
  --K:#000000; --W:#FFFFFF;
  --FLOOR:#080808;
  --GAP:5px;

  /* The next four are set by app.js from content.js (SETTINGS + GRID) */
  --cycle:1000ms;     /* one full tile pulse = 2 beats */
  --shimmer:2000ms;   /* light sweep across a tile */
  --cols:5;
  --rows:6;

  /* Once the grid has more rows than fit on screen, tiles stop shrinking
     and the page scrolls instead. Raise for bigger tiles, lower for smaller. */
  --min-floor:560px;
}

body{
  background:var(--FLOOR);color:var(--W);
  font-family:'Black Han Sans',sans-serif;
  min-height:100vh;overflow-x:hidden;
}

/* ---------- page system ---------- */
.page{display:none;min-height:100vh;flex-direction:column;}
.page.active{display:flex;}

.back-btn{
  position:fixed;top:.9rem;left:.9rem;z-index:300;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.2em;font-size:.82rem;
  color:var(--K);background:var(--W);
  padding:.45rem 1.1rem;text-decoration:none;display:inline-block;
}
.back-btn[hidden]{display:none;}
.back-btn:hover{background:var(--Y);}
.back-btn::before{content:'← ';}

/* ===============================
   HOME -- DANCEFLOOR
=============================== */
#page-home{align-items:center;justify-content:center;padding:.5rem 0;}

.ceiling{
  position:fixed;top:0;left:0;right:0;height:45vh;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 14% 60% at  8% 0%,rgba(255,0,0,.16)   0%,transparent 65%),
    radial-gradient(ellipse 14% 60% at 24% 0%,rgba(255,255,0,.14) 0%,transparent 65%),
    radial-gradient(ellipse 14% 60% at 40% 0%,rgba(255,0,255,.14) 0%,transparent 65%),
    radial-gradient(ellipse 14% 60% at 56% 0%,rgba(0,255,255,.14) 0%,transparent 65%),
    radial-gradient(ellipse 14% 60% at 72% 0%,rgba(0,0,255,.16)   0%,transparent 65%),
    radial-gradient(ellipse 14% 60% at 88% 0%,rgba(0,255,0,.14)   0%,transparent 65%),
    radial-gradient(ellipse 14% 60% at 100%0%,rgba(255,136,0,.13) 0%,transparent 65%);
  animation:sweep 9s ease-in-out infinite alternate;
}
@keyframes sweep{
  0%  {opacity:.65;transform:scaleX(1) scaleY(1);}
  50% {opacity:1;  transform:scaleX(1.06) scaleY(1.12);}
  100%{opacity:.6; transform:scaleX(.96) scaleY(.94);}
}

.dancefloor{
  position:relative;z-index:2;
  /* Fits the screen while the grid is short; stops shrinking at --min-floor
     as rows get added, and the page scrolls. */
  width:min(98vw, max(calc(98vh * var(--cols) / var(--rows)), var(--min-floor)));
  margin:0 auto;padding:.5rem;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:var(--GAP);
}
.dancefloor::before{
  content:'';position:absolute;
  inset:.4rem .9rem 1.8rem;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:calc(100% / var(--cols)) calc(100% / var(--rows));
  pointer-events:none;z-index:-1;
}

/* ---------- tile ---------- */
.tile{
  position:relative;
  display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:1/1;width:100%;min-width:0;min-height:0;
  overflow:hidden;text-decoration:none;
  container-type:inline-size;           /* lets text scale with tile width (cqw) */
  outline:4px solid rgba(0,0,0,.7);outline-offset:-2px;
  background:var(--tile-bg);
  transition:transform .13s,filter .13s,outline-color .13s;

  /* pulse is offset per tile (--p, set by app.js) so the floor ripples */
  animation:pulse var(--cycle) ease-in-out infinite;
  animation-delay:calc(var(--cycle) * var(--p,0) * -1);
}
a.tile{cursor:pointer;}
a.tile:hover{transform:scale(1.07);filter:brightness(1.18) saturate(1.15);z-index:10;outline-color:rgba(255,255,255,.9);}

.tile::after{
  content:'';position:absolute;inset:0;width:30%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  animation:shimmer var(--shimmer) linear infinite;
  animation-delay:calc(var(--shimmer) * var(--sp,0) * -1);
  pointer-events:none;z-index:3;
}

.lbl{
  font-size:clamp(.8rem,2.6cqw,1.6rem);
  letter-spacing:.02em;line-height:1.65;
  padding:.4rem .3rem;
  position:relative;z-index:2;
  overflow:hidden;max-width:100%;
}
.lbl-big{
  font-size:clamp(.9rem,2.6cqw,1.6rem);
  letter-spacing:.4em;line-height:1.15;
  padding:.4rem .2rem;
}

.lbl-small{font-size:clamp(.55rem,1.6cqw,1rem);}
.lbl-fill{font-size:75cqw;line-height:1;letter-spacing:0;padding:0;overflow:visible;}

/* ---------- tile colors: background + glow, and text ---------- */
.bg-R{--tile-bg:var(--R);--glow:255,0,0;}
.bg-Y{--tile-bg:var(--Y);--glow:255,255,0;}
.bg-M{--tile-bg:var(--M);--glow:255,0,255;}
.bg-C{--tile-bg:var(--C);--glow:0,255,255;}
.bg-B{--tile-bg:var(--B);--glow:0,0,255;}
.bg-G{--tile-bg:var(--G);--glow:0,255,0;}
.bg-O{--tile-bg:var(--O);--glow:255,136,0;}
.bg-P{--tile-bg:var(--P);--glow:153,0,204;}
.bg-K{--tile-bg:var(--K);--glow:255,255,255;}

.fg-R{color:var(--R);} .fg-Y{color:var(--Y);} .fg-M{color:var(--M);} .fg-C{color:var(--C);}
.fg-B{color:var(--B);} .fg-G{color:var(--G);} .fg-O{color:var(--O);} .fg-P{color:var(--P);}
.fg-K{color:var(--K);} .fg-W{color:var(--W);}

/* flash tile: swaps purple <-> orange every two pulses */
.flash{
  --glow:153,0,204;
  animation:flash-bg calc(var(--cycle) * 2) ease-in-out infinite, pulse var(--cycle) ease-in-out infinite;
  animation-delay:calc(var(--cycle) * var(--p,0) * -1);
}
@keyframes flash-bg{
  0%,45%  {background:var(--P);}
  50%,95% {background:var(--O);}
  100%    {background:var(--P);}
}

/* rainbow tile: background walks through the whole palette */
.rainbow{
  --glow:255,255,255;
  animation:rainbow calc(var(--cycle) * 8) linear infinite, pulse var(--cycle) ease-in-out infinite;
  animation-delay:calc(var(--cycle) * var(--sp,0) * -8), calc(var(--cycle) * var(--p,0) * -1);
}
@keyframes rainbow{
  0%,100%{background:var(--R);} 12.5%{background:var(--O);} 25%{background:var(--Y);} 37.5%{background:var(--G);}
  50%{background:var(--C);} 62.5%{background:var(--B);} 75%{background:var(--P);} 87.5%{background:var(--M);}
}

/* fast: pulse at double speed */
.tile.fast{animation-duration:calc(var(--cycle) / 2);}
.tile.fast.rainbow{animation-duration:calc(var(--cycle) * 8), calc(var(--cycle) / 2);}

/* still: no pulse, no shimmer, no glow */
.tile.still{animation:none;filter:none;box-shadow:none;}
.tile.still::after{display:none;}

/* ---------- 120 BPM pulse + shimmer ---------- */
@keyframes pulse{
  0%   {box-shadow:0 0 4px 2px rgba(var(--glow),.15),  inset 0 0 8px rgba(255,255,255,.02); filter:brightness(.82);}
  35%  {box-shadow:0 0 12px 4px rgba(var(--glow),.4),  inset 0 0 20px rgba(255,255,255,.06); filter:brightness(.94);}
  50%  {box-shadow:0 0 45px 16px rgba(var(--glow),.95),inset 0 0 55px rgba(255,255,255,.28); filter:brightness(1.45);}
  65%  {box-shadow:0 0 18px 6px rgba(var(--glow),.5),  inset 0 0 25px rgba(255,255,255,.08); filter:brightness(.96);}
  100% {box-shadow:0 0 4px 2px rgba(var(--glow),.15),  inset 0 0 8px rgba(255,255,255,.02); filter:brightness(.82);}
}
@keyframes shimmer{
  0%   {transform:translateX(-130%) skewX(-10deg); opacity:0;}
  15%  {opacity:.35;}
  85%  {opacity:.35;}
  100% {transform:translateX(230%) skewX(-10deg);  opacity:0;}
}

.home-footer{
  position:relative;z-index:2;text-align:center;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.45em;font-size:.58rem;
  color:rgba(255,255,255,.13);padding:.8rem 2rem 1.4rem;
}

/* ===============================
   SUB-PAGES
   Colors come from each page's bg/fg in content.js
=============================== */
.sub-page{
  flex:1;padding-top:3.8rem;min-height:100vh;
  background:var(--page-bg);color:var(--page-fg);
}
.sub-hero{text-align:left;padding:3.5rem 2.5rem 2rem;}
.sub-hero::after{content:'';display:block;width:48px;height:5px;margin-top:1.8rem;opacity:.85;background:currentColor;}
.sub-eyebrow{font-size:clamp(1rem,3vw,1.4rem);letter-spacing:.08em;opacity:.85;margin-bottom:.8rem;display:block;}
.sub-title{font-size:clamp(3.2rem,11vw,7rem);line-height:.95;letter-spacing:.02em;font-weight:400;}
.sub-body{width:100%;max-width:680px;margin:0 auto;padding:1rem 2.5rem 4rem;}

.sfooter{
  padding:2rem 2.5rem;
  font-family:'Bebas Neue',sans-serif;letter-spacing:.3em;font-size:.58rem;
  opacity:.3;border-top:1px solid rgba(0,0,0,.12);
}

/* label / value rows (when, where, map, theme, check-in...) */
.ev-fields{display:flex;flex-direction:column;margin-bottom:2.5rem;border-top:1px solid rgba(0,0,0,.12);}
.ev-field{display:flex;align-items:baseline;gap:2rem;padding:1.1rem 0;border-bottom:1px solid rgba(0,0,0,.12);}
.ev-label{letter-spacing:.08em;font-size:clamp(.85rem,2vw,1.1rem);opacity:.85;min-width:100px;flex-shrink:0;}
.ev-value{font-size:clamp(1rem,2.5vw,1.3rem);letter-spacing:.02em;}
.ev-link{text-decoration:underline;opacity:.7;color:inherit;transition:opacity .15s;}
.ev-link:hover{opacity:1;}

.ev-section{margin-bottom:3rem;}
.ev-section > .ev-label{display:block;margin-bottom:1rem;min-width:0;}
.ev-body{font-size:clamp(1.1rem,2.8vw,1.5rem);line-height:1.75;opacity:.9;letter-spacing:.01em;}

.ev-ext-link{
  display:block;font-size:clamp(1rem,2.5vw,1.3rem);letter-spacing:.02em;
  color:inherit;text-decoration:none;padding:.75rem 0;
  border-bottom:1px solid rgba(0,0,0,.12);transition:opacity .15s;
}
.ev-ext-link:first-of-type{border-top:1px solid rgba(0,0,0,.12);}
.ev-ext-link:hover{opacity:.55;}

/* day pages: list of events */
.day-event{
  display:block;color:inherit;text-decoration:none;
  padding:1.4rem 0;border-bottom:1px solid rgba(0,0,0,.12);transition:opacity .15s;
}
.day-event:first-child{border-top:1px solid rgba(0,0,0,.12);}
.day-event:hover{opacity:.65;}
.day-event-title{display:block;font-size:clamp(1.5rem,5vw,2.2rem);letter-spacing:.02em;margin-top:.3rem;}

.codebox{letter-spacing:.25em;font-size:2.2rem;margin:1.2rem 0 1.6rem;opacity:.9;}
.abtn{
  display:inline-block;font-family:'Bebas Neue',sans-serif;letter-spacing:.2em;font-size:.95rem;
  padding:.75rem 2.2rem;background:rgba(0,0,0,.55);color:var(--W);
  text-decoration:none;transition:background .15s;
}
.abtn:hover{background:rgba(0,0,0,.8);}
.pnote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;font-weight:300;line-height:1.9;opacity:.7;padding:1.5rem 0;}
.page-img{width:100%;max-width:480px;display:block;margin:0 auto;border-radius:4px;}

/* recommendations (3 columns) */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:.5rem;}
@media(max-width:520px){.rgrid{grid-template-columns:1fr;}}
.rcol h3{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.25em;font-size:.72rem;font-weight:400;
  opacity:.85;padding-bottom:.5rem;margin-bottom:.8rem;border-bottom:1px solid rgba(0,0,0,.15);
}
.rcol ul{list-style:none;}
.rcol li{font-size:.98rem;padding:.35rem 0;border-bottom:1px solid rgba(0,0,0,.12);line-height:1.4;}
.rec-link{color:inherit;text-decoration:none;display:flex;justify-content:space-between;align-items:center;transition:opacity .15s;}
.rec-link:hover{opacity:.6;}

/* live Google Sheet lists (cast, crew) */
.cast-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
.cast-count{font-size:clamp(1rem,2.5vw,1.3rem);opacity:.5;}
.cast-refresh{
  font-family:'Bebas Neue',sans-serif;letter-spacing:.2em;font-size:.85rem;
  background:rgba(0,0,0,.3);color:inherit;border:1px solid rgba(0,0,0,.25);
  padding:.45rem 1.1rem;cursor:pointer;transition:background .15s;
}
.cast-refresh:hover{background:rgba(0,0,0,.55);}
.cast-card{padding:.9rem 0;border-top:1px solid rgba(0,0,0,.15);display:flex;flex-direction:column;gap:.15rem;}
.cast-name{font-size:clamp(1rem,2.2vw,1.25rem);letter-spacing:.02em;line-height:1.2;}
.cast-detail{font-size:clamp(1rem,2.2vw,1.25rem);letter-spacing:.02em;line-height:1.2;opacity:.6;}
.cast-updated{font-family:'Bebas Neue',sans-serif;letter-spacing:.2em;font-size:.62rem;opacity:.35;margin-top:1rem;}

/* entrance */
@keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.page.active .dancefloor{animation:fu .45s .05s ease both;}
.page.active .sub-hero  {animation:fu .38s ease both;}
.page.active .sub-body  {animation:fu .38s .07s ease both;}

@media(max-width:560px){.dancefloor{--GAP:3px;padding:.3rem;}}
@media(max-width:400px){.dancefloor{--GAP:2px;padding:.2rem;}}

@media(prefers-reduced-motion:reduce){
  .tile,.tile::after,.ceiling{animation:none!important;}
  .page.active .dancefloor,.page.active .sub-hero,.page.active .sub-body{animation:none;}
}