:root{--red:#D7262E;--red-d:#8E1218;--silver:#D9DDE3;--ink:#2B1A12;--cream:#FFF4DC;--sand:#E9B56B;--green:#5DB52A;--hud:1}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#E9C48A;font-family:Rubik,sans-serif;color:var(--ink)}
#world{position:fixed;inset:0;overflow:hidden}
#plate,#stage{position:absolute;transform-origin:0 0}
#plate{width:2560px;height:1024px;background:url(assets/plate.jpg) 0 0/100% 100%;will-change:transform}
#stage{width:1536px;height:864px;will-change:transform}
.L{position:absolute;inset:0;width:1536px;height:864px;pointer-events:none}
#mario,#pram,#pramSag,#pramBob,#pramSquash{position:absolute;inset:0;width:1536px;height:864px;pointer-events:none}

.shadow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(92,52,20,.42),rgba(92,52,20,0))}
#mshadow{left:416px;top:680px;width:264px;height:32px}
#pshadowPos{position:absolute;left:802.4px;top:662.1px;width:280px;height:51px;pointer-events:none}
#pshadowWeight,#pshadowBob{position:absolute;inset:0;transform-origin:50% 50%}
#pshadow{inset:0;width:280px;height:51px}
#pshadowBob{animation:pshadowBob 2.6s ease-in-out infinite}
@keyframes pshadowBob{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.8}}

#pramSag{transition:transform 400ms ease}
#pramBob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#pramSquash{transform-origin:833.6px 422px}
.pram-img{transition:opacity 80ms linear;will-change:opacity}
#pshadowWeight{transition:transform 400ms ease,opacity 400ms ease}
body.booting #pramSag,body.booting #pshadowWeight,body.booting .pram-img{transition:none!important}
body.booting #pramBob,body.booting #pshadowBob{animation:none}

#helmet{transform-origin:578px 398px}
#clone{transform-origin:558.8px 278px;opacity:0}
#tongue{display:none}
#shine{background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 58%);background-size:220% 100%;background-position:170% 0;opacity:0;
  -webkit-mask-image:url(assets/h1_helmet.webp);mask-image:url(assets/h1_helmet.webp);
  -webkit-mask-size:1536px 864px;mask-size:1536px 864px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
#stars{transform-box:view-box;transform-origin:558.8px 278px;opacity:0}

#pop{position:absolute;left:880px;top:236px;font:400 44px/1 Bungee;color:var(--green);transform:rotate(8deg);opacity:0;
  text-shadow:0 3px 0 #1d4d0c,0 6px 0 rgba(0,0,0,.2)}

#headline{position:absolute;left:268px;width:1000px;top:78px;text-align:center;white-space:nowrap;font:400 46px/1 Bungee;color:var(--cream);
  transform-origin:center;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;
  text-shadow:0 4px 0 var(--red-d),0 7px 0 var(--ink),0 0 18px rgba(43,26,18,.35)}
#sub{position:absolute;left:268px;width:1000px;top:132px;text-align:center;font:800 15px Rubik;letter-spacing:.32em;color:#5a2e10;
  text-shadow:0 0 6px rgba(255,244,220,.95),0 0 12px rgba(255,244,220,.8)}
#cta{position:absolute;left:578px;top:722px;width:380px;height:76px;border-radius:40px;border:4px solid var(--silver);
  background:linear-gradient(#EC3B40,var(--red));box-shadow:0 7px 0 var(--red-d),0 12px 24px rgba(60,20,0,.35);
  font:400 30px Bungee;color:var(--cream);letter-spacing:.02em;cursor:pointer;display:flex;align-items:center;justify-content:center;
  animation:ctaPulse 1600ms ease-in-out infinite;will-change:transform}
#cta:hover{transform:translateY(-2px)}
#cta:active{transform:translateY(5px)}
#cta:focus-visible{outline:3px solid var(--cream);outline-offset:5px}
#cta.busy{animation:none}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 7px 0 var(--red-d),0 12px 24px rgba(60,20,0,.35),0 0 0 0 rgba(255,244,220,0)}
  50%{box-shadow:0 7px 0 var(--red-d),0 12px 24px rgba(60,20,0,.35),0 0 0 10px rgba(255,244,220,.22)}}
#hint{position:absolute;left:578px;width:380px;top:806px;text-align:center;font:800 12px Rubik;letter-spacing:.25em;color:#7a4a22}

#hdr{position:fixed;left:0;right:0;top:0;height:calc(76px * var(--hud));display:flex;align-items:center;justify-content:space-between;padding:0 calc(32px * var(--hud));z-index:5}
.brand{display:flex;align-items:baseline;gap:calc(14px * var(--hud))}
.brand b{font-family:Bungee;font-weight:400;font-size:calc(30px * var(--hud));color:var(--red);text-shadow:0 2px 0 var(--cream),0 4px 0 rgba(43,26,18,.3)}
.brand i{font-family:Rubik;font-weight:800;font-size:calc(16px * var(--hud));font-style:normal;color:var(--ink);background:var(--cream);padding:calc(4px * var(--hud)) calc(10px * var(--hud));border-radius:calc(12px * var(--hud))}
.links{display:flex;gap:calc(10px * var(--hud))}
.pill{font-family:Rubik;font-weight:800;font-size:calc(15px * var(--hud));letter-spacing:.06em;padding:calc(10px * var(--hud)) calc(18px * var(--hud));border-radius:calc(22px * var(--hud));background:var(--cream);border:calc(3px * var(--hud)) solid var(--ink);box-shadow:0 calc(4px * var(--hud)) 0 var(--ink);color:var(--ink);text-decoration:none;cursor:pointer}
.pill.ca{background:var(--green);color:#fff}
.pill[aria-disabled="true"]{opacity:.5;filter:grayscale(.35);cursor:not-allowed;border-style:dashed;box-shadow:0 calc(4px * var(--hud)) 0 rgba(43,26,18,.45)}
#toast{position:fixed;top:calc(88px * var(--hud));right:calc(32px * var(--hud));z-index:7;background:var(--ink);color:var(--cream);font-family:Rubik;font-weight:800;font-size:calc(13px * var(--hud));letter-spacing:.08em;
  padding:calc(9px * var(--hud)) calc(14px * var(--hud));border-radius:calc(12px * var(--hud));border:calc(3px * var(--hud)) solid var(--cream);box-shadow:0 calc(4px * var(--hud)) 0 rgba(0,0,0,.35);opacity:0;transform:translateY(-6px);
  transition:opacity .18s,transform .18s;pointer-events:none}
#toast.show{opacity:1;transform:translateY(0)}
#counter{position:fixed;left:calc(32px * var(--hud));bottom:calc(32px * var(--hud));z-index:5;background:rgba(255,244,220,.92);border:calc(3px * var(--hud)) solid var(--ink);border-radius:calc(18px * var(--hud));padding:calc(10px * var(--hud)) calc(18px * var(--hud)) calc(8px * var(--hud));box-shadow:0 calc(5px * var(--hud)) 0 var(--ink)}
#counter span{display:block;font-family:Rubik;font-weight:800;font-size:calc(12px * var(--hud));letter-spacing:.2em}
#counter b{font-family:Bungee;font-weight:400;font-size:calc(40px * var(--hud));line-height:1;color:var(--red);display:inline-block;transform-origin:center}
#cnt.bump{animation:bump 220ms ease}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1)}}
#sound{position:fixed;right:calc(32px * var(--hud));bottom:calc(32px * var(--hud));z-index:5}
@media (prefers-reduced-motion: reduce){#cta{animation:none}#pramBob,#pshadowBob{animation:none}}