:root {
  --bg1: #0c1022;
  --bg2: #1d1241;
  --hot: #ff3cac;
  --neon: #2bffd9;
  --ink: #e9f2ff;
  --radius: 14px;
  --space-1: .4rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --site-bg: radial-gradient(circle at 20% 10%, #2f1e66, var(--bg1) 50%), linear-gradient(120deg, var(--bg1), var(--bg2));
  --site-bg-funk: radial-gradient(circle at 10% 0%, #ff00a8, transparent 40%), radial-gradient(circle at 100% 20%, #00f5ff, transparent 45%), radial-gradient(circle at 20% 100%, #ffe600, transparent 35%), linear-gradient(120deg, #1a0145, #2e0159, #0b2455);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ink);
  background: var(--site-bg);
  min-height: 100vh;
  transition: background 400ms ease, transform 300ms ease;
}
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .08;
  background-image: radial-gradient(#fff 0.4px, transparent 0.5px);
  background-size: 3px 3px; z-index: 1;
}
#funkOverlay {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 60, 172, .4), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(43, 255, 217, .35), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(255, 214, 10, .25), transparent 35%);
  transition: opacity .3s ease;
}
.sticky-title-bar {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .3rem .8rem .2rem;
  opacity: 0;
  transform: translateY(-120%);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
body.show-sticky-title .sticky-title-bar {
  opacity: 1;
  transform: translateY(0);
}
.sticky-title-bar::before { content: none; }
.sticky-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'Bungee', cursive;
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  color: var(--neon);
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(43,255,217,.45);
}

.hero { text-align: center; padding: 2.15rem 1rem 2rem; position: relative; z-index: 3; }
.topbar {
  position: fixed;
  right: max(.9rem, env(safe-area-inset-right));
  bottom: max(.9rem, env(safe-area-inset-bottom));
  z-index: 85;
  margin: 0;
}
.hero h1,
.hero-title {
  font-family: 'Bungee', cursive;
  font-size: clamp(2.2rem, 8vw, 5rem);
  margin: .6rem 0;
  color: var(--neon);
  text-shadow: 0 0 20px rgba(43,255,217,.5);
}
.badge { display:inline-block; background: #111a; border:1px solid #ffffff30; border-radius:999px; padding:.4rem .8rem; }
.tag { opacity: .92; }
.cta-row { display:flex; gap:var(--space-2); justify-content:center; flex-wrap:wrap; margin-top:var(--space-3); align-items:stretch; }

/* Shared button system (Apple Liquid Glass) */
:where(.btn, .filter-chip, .challenge-btn) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  background:
    radial-gradient(170% 220% at 0% 0%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.26) 52%, rgba(255,255,255,.05) 100%),
    linear-gradient(118deg, rgba(255,60,172,.54), rgba(120,75,160,.45), rgba(43,255,217,.44));
  color: #ffffff;
  text-shadow: 0 0 16px rgba(255,255,255,.46), 0 0 14px rgba(43,255,217,.36);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(22px) saturate(240%) contrast(132%);
  -webkit-backdrop-filter: blur(22px) saturate(240%) contrast(132%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 16px 34px rgba(5, 10, 28, .42),
    0 0 44px rgba(255,60,172,.56),
    0 0 36px rgba(43,255,217,.46);
  transition: transform .18s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease, filter .24s ease;
}
:where(.btn, .filter-chip, .challenge-btn)::before {
  content: "";
  position: absolute;
  inset: -46% -128%;
  background: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 60%, transparent 74%);
  transform: translateX(-55%) rotate(8deg);
  transition: transform .45s ease;
  pointer-events: none;
}
:where(.btn, .filter-chip, .challenge-btn):hover {
  transform: translateY(-1px) scale(1.014);
  border-color: rgba(255,255,255,1);
  background:
    radial-gradient(170% 220% at 0% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.34) 52%, rgba(255,255,255,.06) 100%),
    linear-gradient(118deg, rgba(255,60,172,.62), rgba(120,75,160,.5), rgba(43,255,217,.52));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.36),
    0 20px 38px rgba(5, 10, 28, .46),
    0 0 52px rgba(255,60,172,.66),
    0 0 42px rgba(43,255,217,.54);
}
:where(.btn, .filter-chip, .challenge-btn):hover::before {
  transform: translateX(58%) rotate(8deg);
}
:where(.btn, .filter-chip, .challenge-btn):active {
  transform: translateY(0) scale(.995);
  filter: brightness(1.1);
}

.btn {
  padding: .72rem 1.05rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:46px;
  line-height:1.1;
}
.cta-row .btn { min-width: 224px; }

.btn-primary,
.filter-chip.active {
  background:
    radial-gradient(150% 185% at 0% 0%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.26) 62%, transparent 100%),
    linear-gradient(92deg, #ff1f97 0%, #cc35ff 35%, #2c89ff 66%, #14ffe6 100%);
  border-color: rgba(255,255,255,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 18px 38px rgba(53, 18, 95, .62),
    0 0 56px rgba(255,60,172,.72),
    0 0 46px rgba(43,255,217,.56);
}
.btn-ghost {
  background:
    radial-gradient(140% 180% at 0% 0%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.09) 58%, rgba(255,255,255,.03) 100%),
    linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,.07));
}

main { width:min(1100px, 92vw); margin:auto; position: relative; z-index: 3; }
.section { margin: var(--space-4) 0; padding: var(--space-4); }
.glass { background: #ffffff10; backdrop-filter: blur(8px); border:1px solid #ffffff28; border-radius: 16px; }
h2 { margin:0 0 var(--space-2); color:#fff; line-height:1.2; }
.grid { display:grid; gap:1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.card { background:#0b0f24b3; border:1px solid #ffffff1e; border-radius:16px; overflow:hidden; }
.card img { width:100%; height:200px; object-fit:cover; display:block; }
.card h3, .card p { padding: 0 .9rem; }
.house-link { color: var(--neon); font-weight: 700; }
.timeline { display:grid; gap:.5rem; padding-left:1.2rem; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chips span {
  background:#ffffff12;
  border:1px solid #ffffff30;
  border-radius:999px;
  padding:.5rem .85rem;
  text-align:center;
}
.challenge-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  min-height: 66px;
  line-height: 1.15;
  white-space: normal;
  width: 100%;
  padding: .55rem .85rem;
  text-align: center;
}
.challenge-btn .emoji { font-size: 1.05rem; line-height: 1; }
.challenge-btn .label { display: block; text-align: center; text-wrap: balance; }
.gallery-filters {
  position: sticky;
  top: calc(2.05rem + env(safe-area-inset-top));
  z-index: 60;
  display: grid;
  gap: .85rem;
  margin: 0 0 1rem;
  padding: .72rem .2rem .95rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
}
.gallery-filters > * {
  position: relative;
  z-index: 2;
}
.gallery-filters::before,
.gallery-filters::after { content: none; }
.gallery-filter-title {
  margin: 0 0 .35rem;
  padding-inline: .45rem;
  font-size: .88rem;
  opacity: .9;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.filter-chips {
  display:flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding-inline: .45rem;
}
.filter-chip {
  padding: .42rem .78rem;
  font-size: .9rem;
}
.gallery-grid {
  margin-top: .3rem;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #ffffff2e;
  background: #090d20;
  cursor: zoom-in;
}
.gallery-grid img.is-hidden { display: none; }
.lightbox-card {
  width: min(1100px, 94vw);
  margin-top: 3vh;
  text-align: center;
}
#lightboxImage {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid #ffffff33;
  background: #050816;
}
#lightboxCaption { margin: .6rem 0 0; opacity: .9; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.lightbox-nav.prev { left: .6rem; }
.lightbox-nav.next { right: .6rem; }
footer { text-align:center; opacity:.8; padding:2rem 1rem 3rem; position: relative; z-index: 3; }

.modal { position: fixed; inset: 0; display: none; z-index: 1000; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.modal-card {
  position: relative;
  z-index: 1;
  width: min(680px, 92vw);
  margin: 8vh auto 0;
  background: #10183add;
  border: 1px solid #ffffff4d;
  border-radius: 16px;
  padding: 1.1rem 1.1rem 1rem;
  backdrop-filter: blur(10px);
}
.modal-card h3 { margin-top: .2rem; margin-bottom: .8rem; }
.challenge-detail-grid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.challenge-detail {
  background: #ffffff0f;
  border: 1px solid #ffffff2e;
  border-radius: 12px;
  padding: .7rem .75rem;
  text-align: left;
}
.challenge-detail h4 {
  margin: 0 0 .35rem;
  font-size: .88rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .88;
}
.challenge-detail p {
  margin: 0;
  line-height: 1.35;
  font-size: .96rem;
}
.modal-close { float: right; padding: .35rem .65rem; }

/* MASSIVE FUNK MODE */
body.funk {
  animation: pulseBg 8s ease-in-out infinite;
  background: var(--site-bg-funk);
  background-size: 140% 140%;
}
body.funk #funkOverlay { opacity: 1; animation: spinOverlay 12s linear infinite, hue 2.2s linear infinite; }
body.funk .hero,
body.funk main,
body.funk footer { animation: floaty 3s ease-in-out infinite; }
body.funk .section,
body.funk .card,
body.funk .pill,
body.funk .badge,
body.funk .chips span,
body.funk .modal-card,
body.funk .challenge-detail {
  box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 18px rgba(255,255,255,.2), 0 0 30px rgba(255, 0, 191, .15);
  border-color: rgba(255,255,255,.55);
}
body.funk .sticky-title-bar::before,
body.funk .gallery-filters::before,
body.funk .gallery-filters::after {
  content: none;
}
body.funk img {
  filter: saturate(1.35) contrast(1.08) hue-rotate(16deg);
  transform: scale(1.01);
  animation: imageFunk 3.2s linear infinite;
}
body.funk #lightboxImage {
  filter: saturate(1.45) contrast(1.12) hue-rotate(22deg);
}
body.funk .gallery-grid img,
body.funk .card img,
body.funk #lightboxImage { animation: imageFunk 3.2s linear infinite, wobble 1.8s ease-in-out infinite; }
body.funk .chips span { animation: wobble 1.4s ease-in-out infinite; }
body.funk :is(.btn, .filter-chip, .challenge-btn) {
  animation: bounce 1.1s ease-in-out infinite;
  border-color: rgba(255,255,255,.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 0 38px rgba(255,60,172,.52),
    0 0 30px rgba(43,255,217,.46),
    0 12px 28px rgba(10, 8, 40, .45);
}
body.funk .modal-card h3,
body.funk .challenge-detail h4 { animation: glowText 1.2s ease-in-out infinite alternate; }
body.funk .challenge-detail p { color: #f7fbff; }
body.funk .modal-backdrop { background: rgba(20, 8, 35, .78); }
body.funk h1 { animation: glowText .9s ease-in-out infinite alternate; }
body.funk h2,
body.funk h3,
body.funk h4,
body.funk p,
body.funk li,
body.funk a,
body.funk span,
body.funk button { text-shadow: 0 0 10px rgba(126, 255, 242, .24); }

.modal.funky-active .modal-card,
.modal.funky-active .challenge-detail {
  background: linear-gradient(135deg, rgba(255, 60, 172, .22), rgba(43, 255, 217, .16), rgba(120, 75, 160, .22));
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 0 26px rgba(255, 60, 172, .3), 0 0 24px rgba(43, 255, 217, .2);
}
.modal.funky-active .modal-backdrop {
  background: radial-gradient(circle at center, rgba(41, 13, 66, .6), rgba(6, 5, 21, .88));
}
.modal.funky-active #lightboxImage,
.modal.funky-active .modal-card img {
  animation: imageFunk 2.2s linear infinite, wobble 1.8s ease-in-out infinite;
}
.modal.funky-active .modal-card h3,
.modal.funky-active .challenge-detail h4,
.modal.funky-active .challenge-detail p,
.modal.funky-active #lightboxCaption {
  text-shadow: 0 0 12px rgba(126,255,242,.35);
}
body.funk::before {
  content: "🦞 🌊 🪩 ⚡ 🎮 🍻 🏄";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .32;
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  display: grid;
  place-items: center;
  letter-spacing: .8rem;
  animation: drift 9s linear infinite;
}

@media (max-width: 620px) {
  .cta-row .btn { min-width: 100%; }
  .challenge-btn { white-space: normal; }
}

@keyframes hue { from { filter:hue-rotate(0deg);} to {filter:hue-rotate(360deg);} }
@keyframes pulseBg {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-3px);} }
@keyframes wobble { 0%,100%{ transform: rotate(0deg);} 25%{ transform: rotate(1deg);} 75%{ transform: rotate(-1deg);} }
@keyframes bounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} }
@keyframes glowText { from { text-shadow: 0 0 14px #00ffe0, 0 0 22px #ff00cc; } to { text-shadow: 0 0 24px #fff600, 0 0 35px #00e1ff; } }
@keyframes spinOverlay { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
@keyframes imageFunk {
  0% { filter: saturate(1.2) contrast(1.04) hue-rotate(0deg); }
  25% { filter: saturate(1.55) contrast(1.1) hue-rotate(90deg); }
  50% { filter: saturate(1.75) contrast(1.14) hue-rotate(180deg); }
  75% { filter: saturate(1.45) contrast(1.08) hue-rotate(270deg); }
  100% { filter: saturate(1.2) contrast(1.04) hue-rotate(360deg); }
}
@keyframes drift { 0% { transform: translateY(100vh);} 100% { transform: translateY(-100vh);} }