/* everything comic sans + loud colors + chaos (all lowercase text in markup) */
:root{
  --ink:#111;
  --dim:#444;
  --line:#e9e9e9;
  --a:#ff6bd6; --b:#4da3ff; --c:#38d39f; --d:#ffd84d; --e:#ff9a3f; --f:#a67cff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Comic Sans MS","Comic Sans","Comic Neue","Chalkboard SE",cursive;
  color:var(--ink);
  background:#fff;
}

/* sprinkle bg (subtle) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background:
    radial-gradient(8px 8px at 12% 14%, var(--a), transparent 40%),
    radial-gradient(8px 8px at 26% 80%, var(--b), transparent 40%),
    radial-gradient(8px 8px at 70% 18%, var(--c), transparent 40%),
    radial-gradient(8px 8px at 84% 66%, var(--f), transparent 40%),
    radial-gradient(8px 8px at 44% 54%, var(--d), transparent 40%);
}

/* ticker */
.ticker{overflow:hidden; border-bottom:2px solid var(--line); background:#fff}
.ticker-track{display:flex; gap:40px; white-space:nowrap; animation:scroll 22s linear infinite; padding:6px 0}
.ticker .ticker-track span{opacity:.9}
.ticker.mini .ticker-track{animation-duration:16s}
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* header bar */
.bar{
  position:sticky; top:0; z-index:9;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 10px; background:#fff; border-bottom:2px solid var(--line);
}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink); font-weight:700}
.brand img{width:42px; height:42px; border-radius:50%; border:2px solid var(--ink)}
.brand span{font-size:20px}
.links{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  display:inline-block; padding:6px 10px; border:2px solid var(--ink); border-radius:999px; text-decoration:none; color:var(--ink); background:#fff;
  transition:transform .08s ease;
}
.pill:hover{transform:translateY(-1px) rotate(-1deg)}
.pill.loud{background:linear-gradient(90deg,var(--d),var(--b),var(--a)); color:#111}

/* hero */
.hero{max-width:1000px; margin:16px auto 0; padding:10px 16px; text-align:center}
.fish{
  width:min(340px, 60vw);
  filter: drop-shadow(6px 6px 0 #00000018);
  animation: bob 3.5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.fish.spin{animation: spin 1.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.rainbow{
  font-size: clamp(36px, 8vw, 80px);
  margin:10px 0 6px; font-weight:800; letter-spacing:2px; line-height:1.0;
  background:linear-gradient(90deg,var(--b),var(--c),var(--d),var(--e),var(--a),var(--f));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:2px 2px 0 #0000001f;
}
.subtitle{color:var(--dim); margin:0 0 12px}

.cta{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:10px 0 0}
.btn{
  border:3px solid var(--ink); background:#fff; color:var(--ink); border-radius:14px; padding:10px 14px; cursor:pointer;
  text-decoration:none; transition:transform .08s ease, box-shadow .08s ease;
  box-shadow:0 0 0 6px #fff, 6px 6px 0 #00000010, 0 0 0 3px var(--ink);
}
.btn:hover{transform:translateY(-2px) rotate(.5deg)}
.btn.huge{font-size:18px; padding:14px 20px; background:linear-gradient(90deg,var(--d),var(--b),var(--a)); color:#111}

/* contract box */
.card{
  margin:16px auto; max-width:780px; padding:14px; border-radius:20px; background:#fff;
  border:3px solid var(--ink); box-shadow:0 0 0 6px #fff, 8px 8px 0 #00000012, 0 0 0 3px var(--ink);
}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.gap{gap:10px}
.label{font-weight:700}
.ca{background:#fff; border:3px solid var(--ink); padding:6px 10px; border-radius:12px; font-size:16px}
.mini{border:2px solid var(--ink); background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer}
.tiny{color:var(--dim); margin:6px 0 0}

/* panels */
.panel{max-width:1000px; margin:20px auto 28px; padding:0 16px}
.panel h2{font-size:28px; margin:0 0 6px}
.panel ol{margin:8px 0 0 20px}
.panel li{margin:6px 0}
.dots{margin:8px 0 0 20px}
.dots li{margin:6px 0}

/* meme board */
.meme-grid{
  position:relative; min-height:220px; border:3px dashed var(--ink); border-radius:18px;
  padding:18px; background:linear-gradient(180deg,#fff,#fff7e8);
}
.sticker{
  position:absolute; user-select:none;
  font-size:34px; filter:drop-shadow(2px 2px 0 #00000022);
  animation: plop .4s ease;
}
@keyframes plop{from{transform:scale(.4) rotate(-12deg); opacity:0}to{transform:scale(1) rotate(0); opacity:1}}

/* confetti burst */
.confetti{
  position:fixed; left:0; top:0; width:10px; height:10px; background:currentColor; border-radius:2px; pointer-events:none;
  color: hsl(calc(360*var(--h, .5)), 90%, 60%);
  transform: translate(0,0) rotate(0);
  animation: boom .9s ease-out forwards;
}
.confetti:nth-child(5n){color:var(--a)} .confetti:nth-child(5n+1){color:var(--b)}
.confetti:nth-child(5n+2){color:var(--c)} .confetti:nth-child(5n+3){color:var(--d)}
.confetti:nth-child(5n+4){color:var(--e)}
@keyframes boom{
  to{ transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity:0 }
}

/* fish rain droplets */
.drop{
  position:fixed; top:-40px; animation: fall 2.2s linear forwards; pointer-events:none; z-index:9;
}
@keyframes fall{
  to{ transform: translateY(110vh) rotate(360deg); opacity:.2 }
}

/* modes */
.vibe body, .vibe{ }
.vibe .btn.huge{filter:hue-rotate(45deg)}
.party .hero .rainbow{animation: hue 5s linear infinite}
.party .ticker-track{animation-duration: 10s}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.shake{animation: shake .6s ease}
@keyframes shake{10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)}}
.wiggle *{animation: wig .9s ease-in-out infinite}
@keyframes wig{0%,100%{transform:rotate(0)}50%{transform:rotate(.8deg)}}

/* footer */
.foot{padding:26px 12px; text-align:center; color:var(--dim); border-top:2px solid var(--line); margin-top:20px}

/* small screens */
@media (max-width:560px){
  .brand span{display:none}
  .btn.huge{font-size:16px}
}