/* BB All-Stars, final cartoon site. Mobile-first. Brand: ink #0B0B14, blue #2E7BFF, navy #0A2A6B, yellow #FFC400. */
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka-var.woff2") format("woff2");font-weight:300 700;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Luckiest Guy";src:url("../fonts/luckiest-guy.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --ink:#0B0B14; --blue:#2E7BFF; --blue-d:#1A56D6; --navy:#0A2A6B; --night:#0B1A45; --yel:#FFC400; --yel-l:#FFF4CC;
  --paper:#F4F8FF; --white:#fff; --muted:#4A5370;
  --line:3px; --r:22px; --sh:5px; --shadow:var(--sh) var(--sh) 0 var(--ink);
  --gap:clamp(64px, 10vw, 112px); --pad:clamp(20px, 5vw, 32px);
  --display:"Luckiest Guy", "Fredoka", system-ui, sans-serif; --body:"Fredoka", system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--paper);overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--yel);border:var(--line) solid var(--ink);border-radius:12px;padding:8px 14px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--pad)}

/* ---------- type ---------- */
.h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem, 6vw, 3rem);line-height:1;letter-spacing:.01em;text-align:center;color:var(--ink)}
.h2--light{color:var(--white)}
.h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem, 5vw, 2.2rem);line-height:1.05;letter-spacing:.01em;color:var(--ink)}
.kicker{font-family:var(--display);font-size:.85rem;letter-spacing:.08em;color:var(--blue);margin-bottom:6px}
.lede{margin:14px auto 0;max-width:40ch;text-align:center;font-size:1.0625rem;color:inherit;opacity:.85}

/* ---------- buttons ---------- */
.btn{color:var(--ink);display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:var(--line) solid var(--ink);border-radius:999px;font-weight:700;font-size:1.0625rem;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn--yellow{background:var(--yel)}
.btn--white{background:var(--white)}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.brand__star{width:44px;height:44px;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand__star{transform:rotate(72deg)}
.brand__name{font-family:var(--display);font-size:1.45rem;line-height:1;padding-top:4px;color:var(--blue);text-shadow:2px 2px 0 var(--ink)}
.topbar__social{display:flex;gap:10px}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;background:var(--white);border:var(--line) solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s, box-shadow .15s}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(24px, 5vw, 48px) 0 clamp(56px, 8vw, 88px);text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(46,123,255,.13) 1.4px, transparent 1.9px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 45%, #000 30%, transparent 75%);mask-image:radial-gradient(ellipse 70% 75% at 50% 45%, #000 30%, transparent 75%)}
.hero__inner{display:flex;flex-direction:column;align-items:center}
.sticker{display:inline-block;font-family:var(--display);font-size:1rem;letter-spacing:.04em;padding:8px 18px 4px;background:var(--yel);border:var(--line) solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-3deg)}
.hero__title{margin-top:clamp(18px, 4vw, 28px);width:min(560px, 100%)}
.wm-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:16px;-webkit-tap-highlight-color:transparent}
.wordmark{width:100%;height:auto;overflow:visible}
.wm-star{transform-box:fill-box;transform-origin:50% 50%;transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.wm-btn:hover .wm-star,.wm-btn:focus-visible .wm-star{transform:rotate(144deg) scale(1.08)}
.wm-btn.is-pop .wordmark{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04) rotate(-1deg)}100%{transform:scale(1)}}
.pitch{margin-top:clamp(20px, 4vw, 28px);max-width:36ch;font-size:clamp(1.0625rem, 2.6vw, 1.25rem);font-weight:500}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.fine{margin-top:20px;font-size:.875rem;color:var(--muted)}
/* ---------- sections ---------- */
.section{padding-top:var(--gap)}
.section--flush{padding-top:var(--gap)}
main > .section:last-child{padding-bottom:var(--gap)}

/* panels */
.panel{padding:clamp(36px, 6vw, 56px) clamp(20px, 5vw, 56px);border:var(--line) solid var(--ink);border-radius:28px;box-shadow:6px 6px 0 var(--ink);color:var(--white);text-align:center}
.panel--night{background:var(--night);background-image:radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.6px);background-size:20px 20px}
.panel--blue{background:var(--blue)}

/* star field */
.field{display:grid;grid-template-columns:repeat(4, 1fr);gap:clamp(8px, 2vw, 16px);max-width:780px;margin:clamp(28px, 5vw, 40px) auto 0}
.seed{position:relative;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent}
.seed svg{width:100%;height:100%;fill:#1E3A80;stroke:#4C70C9;stroke-width:3.5;transition:transform .35s cubic-bezier(.3,1.6,.5,1), fill .2s}
.seed__num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-top:9%;font-family:var(--display);font-size:clamp(.85rem, 2.6vw, 1.05rem);line-height:1;color:#9DB4EE}
.seed__num small{font-size:.62em;margin-right:1px}
.seed:hover svg,.seed:focus-visible svg{transform:scale(1.1) rotate(-8deg);fill:#28499A}
.seed[aria-pressed="true"] svg{fill:var(--yel);stroke:var(--ink);stroke-width:5;filter:drop-shadow(2px 3px 0 var(--ink));transform:rotate(-8deg)}
.seed[aria-pressed="true"] .seed__num{color:var(--ink)}
.field__status{margin-top:24px;font-weight:600;color:#C9D6F7}
.field__status.is-full{color:var(--yel)}

/* signup */
.signup__form{max-width:520px;margin:28px auto 0;text-align:left}
.signup__label{display:block;font-weight:700;margin-bottom:8px}
.signup__row{display:flex;flex-direction:column;gap:12px}
.signup input{width:100%;min-height:54px;padding:0 18px;font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--white);border:var(--line) solid var(--ink);border-radius:14px;box-shadow:inset 2px 2px 0 rgba(11,11,20,.08)}
.signup input:focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.signup input[aria-invalid="true"]{border-color:#B00020}
.signup__msg{margin-top:10px;font-weight:600}
.signup__msg:empty{margin:0}
.signup__msg.is-error{display:inline-block;margin-top:12px;padding:4px 10px;background:var(--white);color:#B00020;border-radius:8px}
.signup__done{max-width:520px;margin:28px auto 0;padding:24px;background:var(--white);color:var(--ink);border:var(--line) solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink)}
.signup__done img{width:64px;height:64px;margin:0 auto 8px}
.signup__done strong{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--blue)}
.signup__done p{margin-top:6px}
.signup__soon{text-align:center}
.signup__soon a{color:var(--blue);font-weight:700}

/* socials */
.socials{display:grid;gap:16px;max-width:620px;margin:clamp(28px, 5vw, 40px) auto 0}
.social{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--white);border:var(--line) solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;transition:transform .15s, box-shadow .15s}
.social:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.social__icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:var(--yel);border:2px solid var(--ink);border-radius:12px}
.social__icon svg{width:20px;height:20px}
.social strong{display:block;font-size:1.1rem}
.social small{display:block;font-size:.9rem;color:var(--muted)}

/* footer */
.footer{background:var(--white);border-top:var(--line) solid var(--ink);padding:44px 0 36px}
.footer__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.footer__badge{width:230px;height:auto;margin-bottom:8px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.footer__badge:hover{transform:rotate(-3deg) scale(1.03)}
.footer__legal{font-weight:600}
.footer__small{font-size:.875rem;color:var(--muted)}

/* burst (tap) */
.burst-layer{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.burst-layer i{position:absolute;width:var(--s,22px);height:var(--s,22px);margin:calc(var(--s,22px) / -2) 0 0 calc(var(--s,22px) / -2);animation:fly .8s cubic-bezier(.2,.7,.3,1) forwards}
.burst-layer svg{width:100%;height:100%;fill:currentColor;stroke:var(--ink);stroke-width:7}
@keyframes fly{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r,180deg));opacity:0}}

/* ======================================================================
   v2: sticky header countdown, scroll effects, card teaser, easter eggs
   ====================================================================== */
:root{--hdr:64px}
@media (min-width:760px){:root{--hdr:76px}}
html{scroll-padding-top:calc(var(--hdr) + 12px)}
h1,h2,h3,h4,p,li,blockquote,figcaption,a,button,strong,small,em,.fine,.footer__legal{text-wrap:balance}
.kicker--center{text-align:center}

/* ---------- sticky topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:var(--line) solid transparent;transition:border-color .2s, box-shadow .2s}
.topbar.is-stuck{border-bottom-color:var(--ink);box-shadow:0 4px 0 rgba(11,11,20,.08)}
.sda .topbar{animation:hdr linear both;animation-timeline:scroll(root);animation-range:0px 60px}
@keyframes hdr{to{border-bottom-color:var(--ink);box-shadow:0 4px 0 rgba(11,11,20,.08)}}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:10px;height:var(--hdr);padding-inline:clamp(12px, 4vw, 32px)}
.brand{flex-shrink:0}
.brand__starwrap{position:relative;display:block}
.brand__crown{position:absolute;left:50%;top:-14px;width:28px;height:18px;margin-left:-14px;background:var(--yel);border:2px solid var(--ink);clip-path:polygon(0 100%,0 20%,25% 60%,50% 0,75% 60%,100% 20%,100% 100%);opacity:0;transform:translateY(-14px) scale(.6);transition:opacity .3s, transform .5s cubic-bezier(.3,1.6,.5,1)}
.is-hoh .brand__crown{opacity:1;transform:none}
.brand__name{display:none}
.icon-btn{width:38px;height:38px;border-radius:11px}
.topbar__social{gap:8px}
@media (min-width:560px){.brand__name{display:block}}
@media (min-width:760px){.icon-btn{width:42px;height:42px;border-radius:12px}.topbar__social{gap:10px}}
.nb{display:inline-block}
@media (max-width:479px){.topbar nav{display:none}.topbar__inner{justify-content:flex-start;gap:12px}.cd-wrap{margin-left:auto;margin-right:auto;translate:-12px 0}}

/* countdown pill */
.cd-wrap{position:relative;flex:0 1 auto;min-width:0}
.cd{display:flex;align-items:center;gap:6px;padding:4px 5px 4px 10px;background:var(--white);border:var(--line) solid var(--ink);border-radius:16px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .15s, box-shadow .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cd:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.cd:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.cd__label{display:flex;flex-direction:column;align-items:flex-start;line-height:1;text-align:left}
.cd__label b{font-family:var(--display);font-weight:400;font-size:1.05rem;color:var(--blue);text-shadow:1.5px 1.5px 0 var(--ink);padding-top:2px}
.cd__label small{font-size:.6rem;font-weight:700;color:var(--muted);white-space:nowrap;margin-top:2px;text-wrap:nowrap}
.cd__tiles{display:flex;gap:3px}
.cd__t{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:31px;padding:3px 3px 2px;background:var(--yel);border:2px solid var(--ink);border-radius:9px;line-height:1}
.cd__t b{font-family:var(--display);font-weight:400;font-size:1rem;padding-top:2px;font-variant-numeric:tabular-nums;min-width:2ch;text-align:center}
.cd__t i{font-style:normal;font-size:.5rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.cd__t:first-child{min-width:36px;background:var(--blue);color:var(--white)}
.cd__t:first-child b{text-shadow:1px 1px 0 var(--ink)}
.cd__t--s b.tick{animation:tick .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes tick{0%{transform:translateY(-3px) scale(1.15)}100%{transform:none}}
.cd.is-gold .cd__t{background:linear-gradient(135deg,#FFE27A,#FFC400 45%,#FF9E00);}
.cd.is-gold .cd__t:first-child{background:linear-gradient(135deg,#FFE27A,#FFC400);color:var(--ink)}
.cd__note{position:absolute;right:50%;transform:translateX(50%);top:calc(100% + 12px);width:min(300px, 86vw);padding:14px 16px;background:var(--white);border:var(--line) solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);font-size:.9rem;line-height:1.4;text-align:left}
.cd__note strong{display:block;font-family:var(--display);font-weight:400;font-size:1.05rem;color:var(--blue);margin-bottom:4px}
@media (min-width:430px){.cd__t{min-width:34px}.cd__t b{font-size:1.1rem}}
@media (min-width:760px){
  .cd{gap:10px;padding:5px 6px 5px 14px}
  .cd__label b{font-size:1.3rem}
  .cd__label small{font-size:.7rem}
  .cd__tiles{gap:5px}
  .cd__t{min-width:44px;padding:4px 5px 3px;border-radius:11px}
  .cd__t:first-child{min-width:50px}
  .cd__t b{font-size:1.35rem}
  .cd__t i{font-size:.55rem}
}
@media (max-width:374px){.cd__label small{display:none}.cd{padding-left:7px}}

/* ---------- hero parallax ---------- */
.hero{isolation:isolate}
.hero__deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.px{position:absolute;will-change:translate}
.px--a{width:clamp(54px, 9vw, 96px);left:5%;top:16%;rotate:-14deg}
.px--b{width:clamp(38px, 6vw, 66px);right:6%;top:10%;rotate:12deg}
.px--c{width:clamp(30px, 4.5vw, 50px);right:10%;bottom:22%;rotate:-6deg}
.px--d{width:clamp(26px, 3.6vw, 40px);left:11%;bottom:14%;rotate:20deg}
@media (max-width:640px){.px--a{top:5%;left:5%;width:46px}.px--b{top:6%}.px--c{bottom:10%}.px--d{display:none}}
.no-sda .px{translate:0 calc(var(--hp, 0) * var(--d, 120px) * -1)}
.no-sda .px-mark{translate:0 calc(var(--hp, 0) * 60px);scale:calc(1 - var(--hp, 0) * .06)}
.no-sda .px-soft{translate:0 calc(var(--hp, 0) * 30px)}
.px--a{--d:220px}.px--b{--d:160px}.px--c{--d:300px}.px--d{--d:120px}
.sda .px{animation:px-up linear both;animation-timeline:scroll(root);animation-range:0px 100vh}
.sda .px-mark{animation:px-mark linear both;animation-timeline:scroll(root);animation-range:0px 100vh}
.sda .px-soft{animation:px-soft linear both;animation-timeline:scroll(root);animation-range:0px 100vh}
@keyframes px-up{to{translate:0 calc(var(--d) * -1)}}
@keyframes px-mark{to{translate:0 60px;scale:.94}}
@keyframes px-soft{to{translate:0 30px}}
.wm-btn.is-spin .wm-star{animation:wmspin .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes wmspin{to{transform:rotate(720deg) scale(1)}}

/* ---------- pinned horizontal season strip ---------- */
.strip{position:relative;height:var(--strip-h, 300vh);margin-top:clamp(24px, 4vw, 40px);background:var(--navy);border-block:var(--line) solid var(--ink);color:var(--white)}
.strip__pin{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px, 4vh, 36px);background-image:radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.6px);background-size:20px 20px}
.strip .h2{color:var(--white)}
.strip__head{text-align:center}
.strip__hint{margin-top:8px;font-weight:700;color:var(--yel)}
.strip__hint span{display:inline-block;animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
.strip__viewport{overflow:visible}
.strip__track{display:flex;gap:clamp(10px, 2vw, 18px);width:max-content;margin:0;padding:12px clamp(20px, 6vw, 64px);list-style:none;will-change:translate}
.tile{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(96px, 15vw, 150px);aspect-ratio:4/5;border:var(--line) solid var(--ink);border-radius:20px;box-shadow:5px 5px 0 var(--ink);font-family:var(--display);line-height:.9;color:var(--ink)}
.tile:nth-child(odd){rotate:-2deg}.tile:nth-child(even){rotate:2deg}
.tile small{font-size:clamp(.9rem, 1.6vw, 1.2rem);letter-spacing:.06em}
.tile b{font-weight:400;font-size:clamp(2.6rem, 6vw, 4.2rem);padding-top:4px}
.tile em{position:absolute;bottom:-12px;left:50%;translate:-50% 0;white-space:nowrap;font-style:normal;font-family:var(--body);font-weight:700;font-size:.72rem;padding:3px 9px;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:999px}
.t-blue{background:var(--blue);color:var(--white)}.t-blue b{text-shadow:3px 3px 0 var(--ink)}
.t-yel{background:var(--yel)}
.t-white{background:var(--white)}.t-white b{color:var(--blue);text-shadow:3px 3px 0 var(--ink)}
.t-next{background:var(--night);border-style:dashed;border-color:var(--yel);color:var(--yel);box-shadow:5px 5px 0 rgba(255,196,0,.35);width:clamp(120px, 18vw, 180px)}
.t-next em{background:var(--yel)}
.strip__bar{height:10px;max-width:520px;margin:0 auto;background:rgba(255,255,255,.12);border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.strip__bar span{display:block;height:100%;width:100%;background:var(--yel);transform-origin:0 50%;transform:scaleX(var(--sp, 0))}
.no-sda .strip__track{translate:calc(var(--sp, 0) * var(--sx, 0px) * -1) 0}
.sda .strip{view-timeline:--strip block}
.sda .strip__track{animation:strip-x linear both;animation-timeline:--strip;animation-range:contain 0% contain 100%}
.sda .strip__bar span{animation:strip-bar linear both;animation-timeline:--strip;animation-range:contain 0% contain 100%}
@keyframes strip-x{from{translate:0 0}to{translate:calc(-100% + 100vw) 0}}
@keyframes strip-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- All-Stars card teaser ---------- */
.deck-sec{overflow:hidden}
.deck{margin-top:clamp(20px, 4vw, 36px)}
.deck__track{display:flex;gap:clamp(16px, 3vw, 28px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:13vw;padding:28px 13vw 36px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.deck__track::-webkit-scrollbar{display:none}
.deck__slide{flex:0 0 74vw;max-width:340px;scroll-snap-align:center;perspective:1100px}
@media (min-width:1000px){
  .deck__track{justify-content:center;padding-inline:var(--pad);scroll-padding-inline:0;overflow-x:visible}
  .deck__slide{flex:0 0 300px}
  .deck__slide:nth-child(1){rotate:-4deg;translate:0 14px}
  .deck__slide:nth-child(3){rotate:4deg;translate:0 14px}
  .deck__nav{display:none!important}
}
.acard{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:22px;-webkit-tap-highlight-color:transparent;touch-action:pan-x pan-y}
.acard__tilt{display:block;transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.acard.is-live .acard__tilt{transition:transform .08s linear}
.acard__inner{position:relative;display:block;aspect-ratio:4/5;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.25,.5,1)}
.acard[aria-pressed="true"] .acard__inner{transform:rotateY(180deg)}
.acard__face{position:absolute;inset:0;overflow:hidden;border-radius:20px;border:var(--line) solid var(--ink);box-shadow:6px 7px 0 var(--ink);background:var(--night);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.acard__face img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.acard__back{transform:rotateY(180deg)}
.acard__face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--shine, 0);transition:opacity .3s;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.55), rgba(255,255,255,0) 45%);mix-blend-mode:soft-light}
.acard[data-rarity="epic"] .acard__face::before,.allstars-mode .acard__face::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:calc(var(--shine, 0) * .55);transition:opacity .3s;mix-blend-mode:color-dodge;
  background:linear-gradient(115deg, transparent 20%, #ff6ad5 30%, #c774e8 38%, #94d0ff 46%, #8affc1 54%, #fff79a 62%, transparent 72%);background-size:220% 220%;background-position:var(--hx, 50%) var(--hy, 50%)}
.allstars-mode .acard{--shine:1}
.acard:hover,.acard.is-live{--shine:1}
.acard:hover .acard__face,.acard.is-live .acard__face{box-shadow:9px 11px 0 var(--ink)}
.deck__nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.deck__arrow{display:grid;place-items:center;width:48px;height:48px;font-size:1.3rem;font-weight:700;background:var(--white);border:var(--line) solid var(--ink);border-radius:50%;box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.deck__arrow:disabled{opacity:.35;cursor:default}
.deck__dots{display:flex;gap:8px}
.deck__dots i{width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:var(--white);transition:background .2s, transform .2s}
.deck__dots i.is-on{background:var(--yel);transform:scale(1.25)}

/* ---------- one week: clock + beats ---------- */
.week{display:grid;gap:28px;justify-items:center;text-align:center}
.clock{width:min(220px, 60vw);padding:0;border:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;filter:drop-shadow(5px 6px 0 var(--ink))}
.clock svg{width:100%;height:auto;overflow:visible}
.clock__hand{transform-origin:100px 100px;rotate:calc(var(--wp, 0) * 360deg)}
.sda .week-sec{view-timeline:--week block}
.sda .clock__hand{animation:hand linear both;animation-timeline:--week;animation-range:entry 20% exit 40%}
@keyframes hand{from{rotate:0deg}to{rotate:360deg}}
.clock.is-spin svg{animation:clockspin 1s cubic-bezier(.3,1.3,.5,1)}
@keyframes clockspin{30%{transform:rotate(-12deg) scale(1.06)}100%{transform:rotate(360deg)}}
.beats{display:grid;gap:12px;margin-top:22px;counter-reset:beat;text-align:left}
.beat{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:12px 16px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.22);border-radius:16px}
.beat::before{counter-increment:beat;content:counter(beat);grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;padding-top:3px;font-family:var(--display);color:var(--ink);background:var(--yel);border:2px solid var(--ink);border-radius:50%}
.beat b{font-family:var(--display);font-weight:400;font-size:1.25rem;letter-spacing:.02em;color:var(--yel)}
.beat span{color:#DCE5FF}
@media (min-width:860px){.week{grid-template-columns:auto 1fr;gap:56px;text-align:left;padding-inline:56px}.week .h2{text-align:left}.clock{width:260px}}
.counts{display:grid;grid-template-columns:repeat(2, 1fr);gap:14px;margin-top:28px}
.count{display:flex;flex-direction:column;align-items:center;padding:18px 10px 14px;background:var(--white);border:var(--line) solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);text-align:center}
.count b{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem, 7vw, 3.2rem);line-height:1;color:var(--yel);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);font-variant-numeric:tabular-nums}
.count span{margin-top:6px;font-weight:700;font-size:.95rem}
.count:nth-child(2) b{color:var(--blue)}
@media (min-width:760px){.counts{grid-template-columns:repeat(4, 1fr);gap:18px}}

/* ---------- scroll reveals: CSS scroll-driven first, IO fallback ---------- */
.sda .reveal{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
@keyframes rv{from{opacity:0;translate:0 28px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
.js.no-sda .reveal{opacity:0;translate:0 24px;transition:opacity .6s ease, translate .6s cubic-bezier(.2,.8,.3,1)}
.js.no-sda .reveal.is-in{opacity:1;translate:0 0}

/* ---------- easter eggs ---------- */
.toast{position:fixed;left:50%;bottom:max(18px, env(safe-area-inset-bottom));z-index:60;max-width:min(92vw, 440px);padding:12px 18px;translate:-50% 140%;opacity:0;background:var(--ink);color:var(--white);border:var(--line) solid var(--yel);border-radius:16px;box-shadow:4px 4px 0 var(--yel);font-weight:600;text-align:center;transition:translate .4s cubic-bezier(.3,1.4,.5,1), opacity .3s;pointer-events:none}
.toast.is-on{translate:-50% 0;opacity:1}
.toast:empty{display:none}
.confetti{position:fixed;inset:0;z-index:55;width:100%;height:100%;pointer-events:none}
.fx{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;place-items:center}
.fx:empty{display:none}
.medal{width:min(46vw, 220px);perspective:800px}
.medal svg{width:100%;height:auto;filter:drop-shadow(6px 8px 0 rgba(11,11,20,.9));animation:medal 2.4s cubic-bezier(.3,1.2,.5,1) forwards}
@keyframes medal{0%{transform:scale(.2) rotateY(0);opacity:0}15%{opacity:1}55%{transform:scale(1.1) rotateY(1080deg)}70%{transform:scale(1) rotateY(1080deg)}88%{transform:scale(1) rotateY(1080deg);opacity:1}100%{transform:scale(.6) rotateY(1080deg) translateY(-40px);opacity:0}}
.tape{position:absolute;left:-10%;width:120%;padding:10px 0 6px;background:repeating-linear-gradient(-45deg,var(--yel) 0 26px,var(--ink) 26px 52px);border-block:var(--line) solid var(--ink);overflow:hidden;white-space:nowrap}
.tape span{display:inline-block;padding:2px 14px 0;margin:0 12px;background:var(--yel);border:2px solid var(--ink);border-radius:8px;font-family:var(--display);font-size:clamp(1rem, 3vw, 1.6rem);letter-spacing:.06em}
.tape--a{top:38%;rotate:-6deg;animation:tape-a 2.6s cubic-bezier(.2,.8,.3,1) forwards}
.tape--b{top:52%;rotate:5deg;animation:tape-b 2.6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes tape-a{0%{translate:-110% 0}20%,80%{translate:0 0}100%{translate:110% 0}}
@keyframes tape-b{0%{translate:110% 0}20%,80%{translate:0 0}100%{translate:-110% 0}}
.slop{position:absolute;inset:0;background:rgba(170,160,100,.35);mix-blend-mode:multiply;animation:fade 2.8s ease forwards}
.stamp{position:relative;padding:10px 20px 4px;font-family:var(--display);font-size:clamp(1.6rem, 6vw, 3rem);color:#6B5B12;background:#EFE6B8;border:5px solid #6B5B12;border-radius:14px;rotate:-8deg;animation:stamp 2.8s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes stamp{0%{scale:2.4;opacity:0}12%{scale:1;opacity:1}85%{opacity:1}100%{opacity:0}}
@keyframes fade{0%,85%{opacity:1}100%{opacity:0}}
.rec{display:inline-grid;place-items:center;vertical-align:middle;width:22px;height:22px;margin-left:6px;padding:0;border:0;background:none;cursor:pointer;opacity:.55}
.rec i{width:8px;height:8px;border-radius:50%;background:#E5243B}
.rec:hover{opacity:1}
.dr{max-width:min(92vw, 460px);padding:28px 26px 24px;background:var(--ink);color:var(--white);border:var(--line) solid var(--ink);border-radius:24px;box-shadow:7px 7px 0 var(--blue);text-align:center}
.dr::backdrop{background:rgba(11,11,20,.65)}
.dr .h3{color:var(--yel);margin-top:6px}
.dr p{margin-top:10px}
.dr__rec{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.8rem;letter-spacing:.12em;color:#FF6B7D}
.dr__rec i{width:10px;height:10px;border-radius:50%;background:#E5243B;animation:blink 1s steps(2, start) infinite}
@keyframes blink{to{visibility:hidden}}
.dr__small{font-size:.9rem;color:#B9C3E6}
.dr form{margin-top:18px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js.no-sda .reveal{opacity:1;translate:none}
  .px,.px-mark,.px-soft{translate:none!important;scale:none!important}
  .wm-btn:hover .wm-star,.brand:hover .brand__star{transform:none}
  .strip{height:auto}
  .strip__pin{position:static;height:auto;padding:48px 0 40px}
  .strip__viewport{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .strip__track{translate:none!important}
  .strip__hint,.strip__bar{display:none}
  .clock__hand{rotate:0deg!important}
  .acard__tilt{transform:none!important}
  .medal svg{opacity:1}
}