:root{
  --bg:#0a0b14;
  --ink:#0e1022;
  --text:#f7fbff;
  --muted:#d6def3;
  --primary:#7cf5ff;
  --lime:#9aff7a;
  --pink:#ff6ad5;
  --yellow:#fdbf00;
  --yellow-text:#0a0a0a;
  --card: var(--yellow); /* all boxes now yellow */
  --glass: rgba(255,255,255,.06);
  --radius: 20px;
  --shadow: 0 14px 30px rgba(2,6,23,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font-family:'Comic Sans MS','Trebuchet MS','Segoe UI',Inter,system-ui,Arial,sans-serif}
/* Apply hero gradient to entire page */
.alt-bg{
  background:
    radial-gradient(900px 600px at 10% -20%,rgba(124,245,255,.2),transparent 60%),
    radial-gradient(900px 600px at 90% 10%,rgba(253,191,0,.25),transparent 60%),
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.05) 0 6px, rgba(255,255,255,0) 6px 12px),
    var(--bg);
}
img{max-width:100%;height:auto;display:block}

.container{width:min(1100px,92%);margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(10,11,20,.95),rgba(10,11,20,.5));backdrop-filter:saturate(160%) blur(10px)}
.funky-border{border-bottom:6px solid #000; box-shadow: inset 0 -6px 0 #000, 0 6px 0 rgba(0,0,0,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;gap:1rem}
.brand{font-weight:900;letter-spacing:1px;text-decoration:none;color:#000;background:var(--yellow);padding:.3rem .6rem;border-radius:12px;box-shadow:var(--shadow)}
nav{display:flex;gap:1rem;align-items:center}
nav a{color:#eaeaea;text-decoration:none;font-weight:800}
nav a:hover{color:#fff;transform:rotate(-1deg)}

.hamburger{display:none;flex-direction:column;gap:4px;background:transparent;border:none}
.hamburger span{width:24px;height:2px;background:#fff;display:block}

.meme-title{display:none} /* replaced by title graphic */
.title-graphic{width:min(520px,78vw);margin: .5rem auto 0;display:block;filter: drop-shadow(0 8px 0 #000) drop-shadow(0 20px 40px rgba(0,0,0,.4))}

.subtitle{color:#dbe6ff;font-weight:800}

.btn{background:var(--glass);border:3px solid #000;padding:.8rem 1.1rem;border-radius:18px;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;font-weight:900;box-shadow:var(--shadow);cursor:pointer;transform:translateY(0);transition:.15s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--lime));color:#031014;border:3px solid #000}
.btn.ghost{background:linear-gradient(135deg,transparent,transparent);border:3px dashed #000}
.thicc{font-size:1.05rem}

.hero{position:relative;overflow:hidden;padding: 5rem 0 3rem}
.hero-inner{text-align:center;position:relative;z-index:1}
.hero-art-wrap{position:relative;display:grid;place-items:center}
.mascot{width:min(420px,60vw);margin:0 auto 1rem;filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));animation:bob 5s ease-in-out infinite}
.sticker{image-rendering:auto;}
.speech{position:absolute;right:8%;top:0;background:#fff;color:#111;border:4px solid #000;border-radius:18px;padding:.6rem .8rem;max-width:240px;
  transform:rotate(2deg);box-shadow:3px 3px 0 #000}
.speech.bubble:after{content:"";position:absolute;left:20px;bottom:-16px;border:10px solid transparent;border-top-color:#000;filter:drop-shadow(0 2px 0 #000)}
.speech span{display:block;font-weight:900}
.wobble{animation:wobble 2.4s ease-in-out infinite}



.badges{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.badge{padding:.4rem .7rem;border-radius:999px;background:#fff;border:3px solid #000;font-weight:900;color:#000;box-shadow:var(--shadow)}

.section{padding:4rem 0}
.section.alt{background:transparent} /* page already has gradient */
.grid.two{display:grid;grid-template-columns: 1.1fr .9fr;gap:2rem}

.outlined{font-size:2rem;font-weight:900;text-transform:uppercase;letter-spacing:1px;text-shadow: -2px 2px 0 #000, 2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000}

.card{background:var(--card);border:3px solid #000;border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;color:var(--yellow-text)}
.fun-cards .card.pop{transform:rotate(-.8deg)}
.fun-cards .card.pop:nth-child(2){transform:rotate(.6deg)}
.fun-cards .card.pop:nth-child(3){transform:rotate(-.4deg)}
.fun-cards .card.pop:nth-child(4){transform:rotate(.9deg)}
.cards{display:grid;grid-template-columns: repeat(4,1fr);gap:1rem}
.big{font-size:2rem;font-weight:900;color:#000}

.sticker-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;transform:rotate(-1deg)}
.sticker-wall img{border-radius:14px;border:3px solid #000;box-shadow:var(--shadow);background:#fff}

/* Steps: inherit color so they show on dark background */
.steps{counter-reset:step;list-style:none;padding:0;margin:0}
.steps li{position:relative;padding-left:2.6rem;margin:1rem 0}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:.1rem;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:#fff;color:#031014;font-weight:900;border:3px solid #000;box-shadow:var(--shadow)}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.t-item{background:var(--card);padding:1rem;border-radius:var(--radius);border:3px solid #000;box-shadow:var(--shadow);color:#111}
.t-item span{display:inline-block;font-weight:900;color:#000;background:#fff;padding:.1rem .5rem;border:3px solid #000;border-radius:8px;margin-bottom:.25rem}

/* details/faq boxes also yellow */
details{background:var(--card);border-radius:var(--radius);border:3px solid #000;padding:.8rem;margin:.6rem 0;color:#111}
details summary{cursor:pointer;font-weight:900;color:#000}

/* Lore comic panel */
.comic-panel{ position:relative; background: var(--card); color:#111; transform: rotate(-.4deg); }
.comic-panel:before{ content:""; position:absolute; inset:10px; border:3px dashed #000; border-radius:14px; pointer-events:none; opacity:.3 }
.comic-panel h3{ margin-top:1rem; font-weight:900; color:#000 }
blockquote.quip{ margin:1rem 0; padding:.7rem 1rem; background:#fff; color:#111; border:3px solid #000; border-radius:14px;
  box-shadow: 3px 3px 0 #000; transform: rotate(-1deg); font-weight:900 }
.hashtags{ color:#111; font-weight:800; margin-top:1rem }

/* Featured 3 */
.featured-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.featured-3 img{ width:100%; height:auto; border:3px solid #000; border-radius:14px; background:#fff; box-shadow: var(--shadow); }
@media (max-width: 820px){ .featured-3{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .featured-3{ grid-template-columns:1fr; } }

/* Spread-out snap cards */
.snap-card{ display:grid; place-items:center; transform: rotate(-.6deg); }
.snap-card img{ width: min(820px, 100%); border:3px solid #000; border-radius:14px; background:#fff; box-shadow: var(--shadow); transform: rotate(.6deg); }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }
.gallery-grid img{ width:100%; height:auto; border:3px solid #000; border-radius:14px; background:#fff; box-shadow: var(--shadow); }
@media (max-width: 1000px){ .gallery-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 680px){ .gallery-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 420px){ .gallery-grid{ grid-template-columns: 1fr;} }

.site-footer{padding:2rem 0;background:rgba(0,0,0,.2); color:#eaeaea}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.socials{display:flex;gap:.7rem}
.socials a{color:#fff;text-decoration:none;opacity:.9;font-weight:900}
.socials a:hover{opacity:1;transform:rotate(-4deg)}

/* Responsive general */
@media (max-width: 900px){
  .grid.two{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr)}
  nav{display:none}
  .hamburger{display:flex}
}
@media (max-width: 520px){
  .cards{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
}

/* Animations */
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes wobble{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2deg)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}


/* ===== Mobile improvements (v8) ===== */
:root{ --header-h: 64px; }

section { scroll-margin-top: var(--header-h); }

@media (max-width: 900px){
  header nav{
    display:none;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(10,11,20,.97);
    backdrop-filter: blur(8px) saturate(140%);
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    z-index: 60;
  }
  header nav.open{ display:flex; }
  body.menu-open{ overflow: hidden; }
  .nav{ padding: .6rem 0; }
}

@media (max-width: 540px){
  .speech{ display:none; }
  .title-graphic{ width: min(420px, 86vw); }
  .mascot{ width: min(360px, 72vw); }
}

@media (max-width: 360px){
  .btn{ padding: .7rem .9rem; font-size: .95rem; }
  .badge{ font-size: .9rem; }
}

.featured-3 img{ object-fit: cover; aspect-ratio: 4/3; }
.gallery-grid img{ object-fit: cover; }

.card, details, .t-item{ color: #111; }

/* ===== Seamless, non-overlapping ticker ===== */
:root{
  --ticker-h: 42px;
  --ticker-gap: 2rem;
  --ticker-speed: 120;      /* px per second */
  --ticker-distance: 0px;   /* set by JS to content width */
  --yellow: #fdbf00;        /* keep your brand yellow */
}

/* Kill any old marquee animations */
.ticker span { animation: none !important; }

.ticker{
  overflow: hidden;
  height: var(--ticker-h);
  border: 3px solid #000;
  border-radius: 999px;
  background: var(--yellow);
  margin: 1rem auto;
  position: relative;
}

.ticker__belt{
  display: flex;
  width: max-content;    /* belt is as wide as needed */
  will-change: transform;
  animation: ticker-scroll linear infinite;
  animation-duration: var(--ticker-duration, 20s); /* set by JS */
}

.ticker__content{
  display: inline-flex;
  white-space: nowrap;
  gap: var(--ticker-gap);
  flex-shrink: 0;        /* critical: no shrinking */
}

.ticker__item{
  flex: 0 0 auto;
  font-weight: 900;
  color: #000;
  padding: 0 .8rem;
  line-height: calc(var(--ticker-h) - 8px);
}

/* The belt moves left exactly one content-width, then loops */
@keyframes ticker-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--ticker-distance))); }
}

/* Optional edge fade */
.ticker::before,
.ticker::after{
  content: "";
  position: absolute; top: 0; bottom: 0; width: 30px; pointer-events: none;
}
.ticker::before{ left: 0; background: linear-gradient(90deg, var(--yellow), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--yellow), transparent); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker__belt{ animation: none; }
}

/* Seamless, non-overlapping ticker (CSS-only) */
:root{
  --ticker-h: 42px;
  --ticker-gap: 2rem;
  --ticker-speed: 28s;   /* adjust faster/slower */
  --yellow: #fdbf00;     /* your brand yellow */
}

/* neutralize any old marquee rules */
.ticker span { animation: none !important; }

.ticker{
  position: relative;
  overflow: hidden;
  height: var(--ticker-h);
  border: 3px solid #000;
  border-radius: 999px;
  background: var(--yellow);
  margin: 1rem auto;
}

.ticker__belt{
  display: flex;
  width: max-content;              /* as wide as content */
  will-change: transform;
  animation: ticker-scroll var(--ticker-speed) linear infinite;
  animation-play-state: running !important;  /* force on */
}

.ticker__content{
  display: inline-flex;
  white-space: nowrap;
  gap: var(--ticker-gap);
  flex-shrink: 0;                  /* critical */
}

.ticker__item{
  flex: 0 0 auto;
  font-weight: 900;
  color: #000;
  padding: 0 .8rem;
  line-height: calc(var(--ticker-h) - 8px);
}

@keyframes ticker-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* moves by one content-width */
}

/* soft edge fades (optional) */
.ticker::before,
.ticker::after{
  content:"";
  position:absolute; top:0; bottom:0; width:30px; pointer-events:none;
}
.ticker::before{ left:0;  background:linear-gradient(90deg, var(--yellow), transparent); }
.ticker::after { right:0; background:linear-gradient(270deg, var(--yellow), transparent); }