/* Champ Can't Lose! — character-brand styles. Colors come from the character art. */
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --ink:#2a1a12; --paper:#fff8ec; --cream:#f5e7cf; --white:#fffdf8;
  --sky:#9ee3ff; --sky-2:#cdf1ff; --gold:#fdc556; --gold-2:#ffe39a; --red:#eb2f01; --orange:#ff8a1f;
  --blue:#1e7fd8; --pink:#f7a9f2; --green:#8fd86a; --yellow:#ffe066; --purple:#6a4bc4;
  --muted:#6b5446;
  --head:"Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:"Nunito", ui-rounded, system-ui, sans-serif;
  --line:3px solid var(--ink); --pop:0 5px 0 var(--ink); --r:22px;
}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
body{margin:0;font:400 18px/1.6 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.1;margin:0 0 .4em;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(34px,6vw,60px)}
h2{font-size:clamp(28px,4.4vw,44px)}
h3{font-size:24px}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--gold);padding:8px 12px;border:var(--line);border-radius:12px}
.center{text-align:center}
.lede{font-size:20px;color:var(--muted);max-width:54ch}
.center .lede{margin-left:auto;margin-right:auto}

/* header */
.top{position:sticky;top:0;z-index:30;background:var(--white);border-bottom:var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:72px}
.brand img{height:50px;width:auto;transition:transform .2s}
.brand:hover img{transform:rotate(-3deg) scale(1.05)}
.nav{margin-left:auto;display:flex;gap:6px}
.nav a{font:600 18px/1 var(--head);color:var(--ink);text-decoration:none;padding:10px 16px;border-radius:99px;border:3px solid transparent}
.nav a:hover{background:var(--sky-2)}
.nav a[aria-current=page]{background:var(--gold);border-color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.menu-btn{display:none;margin-left:auto;font:700 16px var(--head);background:var(--gold);color:var(--ink);border:var(--line);border-radius:99px;box-shadow:0 3px 0 var(--ink);padding:9px 18px}
@media (max-width:820px){
  .top .wrap{height:64px}.brand img{height:42px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;background:var(--white);border-bottom:var(--line);padding:10px 16px 18px}
  .nav.open{display:flex}
  .nav a{font-size:22px;padding:14px 16px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 20px/1 var(--head);text-decoration:none;color:var(--ink);background:var(--gold);
  padding:15px 26px;border:var(--line);border-radius:99px;box-shadow:var(--pop);transition:transform .1s,box-shadow .1s;cursor:pointer}
.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}
.btn.blue{background:var(--blue);color:#fff}
.btn.white{background:var(--white)}
.btn.big{font-size:24px;padding:18px 32px}
a:focus-visible,button:focus-visible{outline:3px dashed var(--blue);outline-offset:4px}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* tag + bubble */
.tag{display:inline-block;align-self:flex-start;font:700 14px/1 var(--head);letter-spacing:.06em;text-transform:uppercase;background:var(--red);color:#fff;padding:7px 12px;border:var(--line);border-radius:99px;margin-bottom:14px;transform:rotate(-2deg)}
.tag.gold{background:var(--gold);color:var(--ink)}.tag.sky{background:var(--sky);color:var(--ink)}.tag.white{background:var(--white);color:var(--ink)}
.bubble{position:relative;display:inline-block;font:600 19px/1.25 var(--head);background:var(--white);border:var(--line);border-radius:18px;padding:9px 16px;margin:2px 0 14px}
.bubble::after{content:"";position:absolute;left:22px;bottom:-12px;width:16px;height:16px;background:var(--white);border-right:var(--line);border-bottom:var(--line);transform:rotate(45deg) skew(8deg,8deg)}

section{padding:80px 0;position:relative}
.panel{background:var(--white);border:var(--line);border-radius:var(--r);box-shadow:var(--pop);padding:28px}

/* wavy edges */
.wave{display:block;width:100%;height:46px}
.sky-bg{background:var(--sky)}
.gold-bg{background:var(--gold)}
.blue-bg{background:var(--blue);color:#fff}

/* hero */
.hero{background:var(--sky);overflow:hidden;padding:48px 0 0}
.hero::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 68% 62%,#ffffff2e 0 7deg,transparent 7deg 18deg);pointer-events:none}
.cloud{position:absolute;background:#fff;border-radius:99px;opacity:.9;pointer-events:none}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud.c1{width:150px;height:44px;left:4%;top:12%}.cloud.c1::before{width:70px;height:70px;left:22px;top:-34px}.cloud.c1::after{width:52px;height:52px;left:78px;top:-22px}
.cloud.c2{width:120px;height:36px;right:6%;top:9%;opacity:.8}.cloud.c2::before{width:56px;height:56px;left:18px;top:-28px}.cloud.c2::after{width:42px;height:42px;left:62px;top:-18px}
.hero-grid{position:relative;display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:center}
.hero-copy{padding-bottom:60px}
.hero-logo{width:min(380px,80%);margin:0 0 6px -10px;filter:drop-shadow(0 6px 0 #2a1a1240);animation:bob 3.4s ease-in-out infinite}
.hero-copy p{font:600 clamp(20px,2.4vw,25px)/1.35 var(--head);margin:0 0 26px;max-width:22ch}
.hero-art{align-self:end;margin-bottom:-6px}
.hero-art img{width:100%;filter:drop-shadow(0 8px 0 #2a1a1226)}
@keyframes bob{50%{transform:translateY(-8px) rotate(1deg)}}
@media (max-width:860px){
  .hero{padding-top:28px}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-copy{padding-bottom:0;order:1}
  .hero-art{order:2;margin-top:6px}
  .hero-logo{margin:0 auto 4px;width:min(300px,76vw)}
  .hero-copy p{margin-left:auto;margin-right:auto}
  .hero .cta{justify-content:center}
}

/* crew strip */
.crew{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
@media (max-width:980px){.crew{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.crew{grid-template-columns:repeat(2,1fr)}}
.mate{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);background:var(--c,var(--white));border:var(--line);border-radius:var(--r);box-shadow:var(--pop);padding:14px 10px 12px;transition:transform .15s}
.mate:hover{transform:translateY(-6px) rotate(var(--tilt,-2deg))}
.mate .face{height:120px;display:flex;align-items:center;justify-content:center}
.mate .face img{max-height:120px;width:auto}
.mate b{font:700 20px/1 var(--head);margin-top:8px}

/* split rows */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.split.rev > :first-child{order:2}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:30px}.split.rev > :first-child{order:0}}
.frame{border:var(--line);border-radius:var(--r);box-shadow:var(--pop);overflow:hidden;background:var(--white)}
.frame.tilt{transform:rotate(1.5deg)}
.frame.tilt-l{transform:rotate(-1.5deg)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.card{display:grid;grid-template-columns:42% 1fr;text-decoration:none;color:var(--ink);background:var(--white);border:var(--line);border-radius:var(--r);box-shadow:var(--pop);overflow:hidden;transition:transform .15s}
.card:hover{transform:translateY(-5px) rotate(-.6deg)}
.card .pic{background:var(--sky) center/cover no-repeat;border-right:var(--line);min-height:230px}
.card .body{padding:22px;display:flex;flex-direction:column}
.card .body p{color:var(--muted);flex:1}
.card .go{font:700 19px var(--head);color:var(--red)}
@media (max-width:460px){.card{grid-template-columns:1fr}.card .pic{border-right:0;border-bottom:var(--line);min-height:210px}}

/* theme song player */
.song{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;max-width:900px;margin:0 auto}
@media (max-width:720px){.song{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}}
.champ-btn{position:relative;width:250px;height:250px;border-radius:50%;border:var(--line);box-shadow:0 7px 0 var(--ink);cursor:pointer;padding:0;
  background:radial-gradient(circle at 50% 40%,var(--sky-2),var(--sky) 70%);display:grid;place-items:center;transition:transform .12s}
.champ-btn:hover{transform:scale(1.04) rotate(-2deg)}
.champ-btn:active{transform:scale(.97)}
.champ-btn::before{content:"";position:absolute;inset:14px;border-radius:50%;border:3px dashed #2a1a1230}
.champ-btn .spr{width:212px;height:216px;margin-top:6px;background:url(img/hb_laugh.png) 0 0/1908px 216px no-repeat;image-rendering:pixelated}
.champ-btn.playing .spr{animation:laugh .9s steps(9) infinite}
@keyframes laugh{to{background-position:-1908px 0}}
.champ-btn .hint{position:absolute;right:-18px;top:6px;font:700 17px/1.1 var(--head);background:var(--red);color:#fff;border:var(--line);border-radius:99px;padding:8px 14px;transform:rotate(8deg);box-shadow:0 3px 0 var(--ink);animation:nudge 1.6s ease-in-out infinite}
.champ-btn.playing .hint{display:none}
@keyframes nudge{50%{transform:rotate(8deg) translateY(-5px)}}
.notes{position:absolute;inset:0;pointer-events:none}
.notes i{position:absolute;bottom:60%;font:700 30px var(--head);font-style:normal;opacity:0;color:var(--ink)}
.champ-btn.playing .notes i{animation:float 2.4s ease-out infinite}
.notes i:nth-child(1){left:6%;animation-delay:0s!important}
.notes i:nth-child(2){left:78%;animation-delay:.8s!important;color:var(--red)}
.notes i:nth-child(3){left:20%;animation-delay:1.6s!important;color:var(--blue)}
@keyframes float{0%{opacity:0;transform:translateY(0) rotate(-10deg)}20%{opacity:1}100%{opacity:0;transform:translateY(-120px) rotate(15deg)}}
.song-info h2{margin-bottom:.15em}
.song-info .by{color:var(--ink);opacity:.75;font-weight:800;margin-bottom:18px}
.track{display:flex;align-items:center;gap:12px;font:600 16px var(--head)}
.bar{flex:1;height:16px;background:var(--white);border:var(--line);border-radius:99px;overflow:hidden;cursor:pointer;min-width:160px}
.bar span{display:block;height:100%;width:0;background:var(--red)}
@media (prefers-reduced-motion:reduce){.champ-btn.playing .spr{animation-duration:1.8s}.notes{display:none}.hero-logo,.champ-btn .hint{animation:none}}

/* characters */
.cast{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
@media (max-width:860px){.cast{grid-template-columns:1fr}}
.who{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;background:var(--white);border:var(--line);border-radius:var(--r);box-shadow:var(--pop);padding:20px;scroll-margin-top:90px}
.who .stage{height:220px;border:var(--line);border-radius:18px;background:var(--c,var(--sky));display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.who .stage img{max-height:196px;width:auto;transform:rotate(var(--tilt,-3deg));transition:transform .2s}
.who:hover .stage img{transform:rotate(0) scale(1.06)}
.who .stage .px{height:176px;width:auto;max-height:none}
.who p{color:var(--muted);margin:0}
.who h2{font-size:34px;margin-bottom:.2em}
.who .tag{margin-bottom:8px}
@media (max-width:520px){.who{grid-template-columns:1fr}.who .stage{height:240px}}
.rivals{margin-top:20px}
.pig{width:144px;height:162px;background:url(img/pigeon_cookie_sw.png) 0 0/720px 162px no-repeat;image-rendering:pixelated;animation:munch 1s steps(5) infinite}
@keyframes munch{to{background-position:-720px 0}}

/* stickers */
.sticker-board{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 10px;padding:10px 0 0}
.stk{width:170px;height:170px;display:flex;align-items:center;justify-content:center;transform:rotate(var(--r,-4deg));transition:transform .18s cubic-bezier(.3,1.6,.5,1);cursor:pointer;background:none;border:0;padding:0}
.stk img{max-width:100%;max-height:100%;filter:drop-shadow(0 5px 0 #2a1a1230)}
.stk:hover{transform:rotate(0) scale(1.14);z-index:2}
.stk.boing{animation:boing .5s}
@keyframes boing{30%{transform:scale(1.25) rotate(6deg)}60%{transform:scale(.92) rotate(-4deg)}}
@media (max-width:560px){.stk{width:132px;height:132px}}
.corner{position:absolute;width:120px;pointer-events:none;filter:drop-shadow(0 5px 0 #2a1a1225)}
@media (max-width:860px){.corner{display:none}}

/* video */
.player{display:grid;grid-template-columns:minmax(0,.8fr) 1fr;gap:40px;align-items:center}
@media (max-width:820px){.player{grid-template-columns:1fr}}
.poster{position:relative;display:block;width:100%;padding:0;border:var(--line);border-radius:var(--r);box-shadow:var(--pop);overflow:hidden;cursor:pointer;background:var(--sky);transform:rotate(-1.5deg);transition:transform .15s}
.poster:hover{transform:rotate(0) scale(1.02)}
.poster img{width:100%}
.play-dot{position:absolute;left:72%;top:80%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--red);border:var(--line);box-shadow:var(--pop);display:grid;place-items:center}
.play-dot::after{content:"";border-left:30px solid #fff;border-top:19px solid transparent;border-bottom:19px solid transparent;margin-left:8px}
.video{position:relative;aspect-ratio:16/9;background:#000;border:var(--line);border-radius:var(--r);box-shadow:var(--pop);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.small{font-size:15px;color:var(--muted)}

/* controls table */
.keys{width:100%;border-collapse:collapse;font-size:16px}
.keys th,.keys td{text-align:left;padding:10px 8px;border-bottom:2px dashed #2a1a1222;vertical-align:top}
.keys th{font:700 16px var(--head)}
kbd{font:700 14px var(--head);background:var(--paper);border:2px solid var(--ink);border-bottom-width:4px;border-radius:8px;padding:2px 8px;white-space:nowrap}

/* faq */
details{background:var(--white);border:var(--line);border-radius:18px;margin-bottom:14px;box-shadow:0 3px 0 var(--ink)}
summary{cursor:pointer;padding:16px 20px;font:600 20px var(--head);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-block;width:28px;color:var(--red);font-weight:700}
details[open] summary::before{content:"–"}
details > div{padding:0 20px 6px 48px;color:var(--muted)}

/* page heads */
.page-head{background:var(--sky);padding:56px 0 0;text-align:center;overflow:hidden}
.page-head.gold{background:var(--gold)}
.page-head .wave{margin-top:36px}

/* footer */
footer{background:var(--ink);color:var(--cream);padding:44px 0 50px;font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
footer strong{font:700 22px var(--head);color:var(--gold)}
footer nav a{color:var(--cream);margin-right:16px}
.socials{display:flex;gap:10px}
.socials a{width:48px;height:48px;display:grid;place-items:center;background:var(--gold);border:3px solid var(--cream);border-radius:50%;color:var(--ink);transition:transform .15s}
.socials a:hover{transform:translateY(-3px) rotate(-8deg)}
.socials svg{width:22px;height:22px;fill:currentColor}
.grown{font-size:13px;opacity:.75;flex-basis:100%;margin:0}
@keyframes munch-sm{to{background-position:-480px 0}}
.mate .pig{animation:munch-sm 1s steps(5) infinite}
footer nav a{display:inline-block;padding:12px 4px}
.panel li a{display:inline-block;padding:8px 0}
/* phone: logo, then the crew art, then tagline + buttons */
@media (max-width:860px){
  .hero-copy{display:contents}
  .hero-logo{order:1}
  .hero-art{order:2;margin:0 -8px}
  .hero-copy p{order:3;margin-top:4px}
  .hero .cta{order:4;padding-bottom:30px}
  .hero-grid{display:flex;flex-direction:column;align-items:center}
}
@media (max-width:560px){
  .crew{grid-template-columns:repeat(2,1fr)}
  .crew .mate:last-child{grid-column:span 2}
  .mate .face{height:100px}.mate .face img{max-height:100px}
}