:root{
  --s:0.5;
  --font-ui:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --font-display:'Luckiest Guy','Fredoka',system-ui,sans-serif;
  --red:#e3262b; --blue:#1f6fd6; --navy:#13233f; --yellow:#ffd23f; --cream:#faf3de; --brass:#b58c3a;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;}
body{
  /* insurance fill + out-of-range bleed fill (sky -> horizon -> fields -> gravel), sampled from the plate edges */
  background:
    linear-gradient(180deg,
      #bcd6ee 0%, #cfe3f1 28%, #ece7c8 44%, #cfc98a 52%,
      #8a9550 62%, #6b6a3a 74%, #45351f 88%, #2b2114 100%);
  background-color:#2b2114;
  color:#fff;
  font-family:var(--font-ui);
  cursor:default;
}

#viewport{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;}

/* ---------- stage / scene ---------- */
#stage{position:absolute;left:0;top:0;width:2560px;height:1440px;transform-origin:0 0;z-index:10;will-change:transform;}
#scene{position:absolute;left:0;top:0;width:2560px;height:1440px;transform-origin:1280px 1440px;will-change:transform;}
#plate{position:absolute;left:-640px;top:-224px;width:3840px;height:1664px;display:block;}
#plate img{display:block;width:100%;height:100%;}
#engine{position:absolute;left:0;top:0;width:2560px;height:1440px;transform-origin:597.6px 746.1px;will-change:transform;}
#engineBob{position:absolute;left:0;top:0;width:2560px;height:1440px;}
#engineBob.bob{animation:chugbob 220ms ease-in-out;}
@keyframes chugbob{0%{transform:translateY(0)}45%{transform:translateY(7px)}100%{transform:translateY(0)}}
.layer{position:absolute;left:0;top:0;width:2560px;height:1440px;display:block;}
#cheeksPuff{position:absolute;left:0;top:0;width:2560px;height:1440px;transform-origin:1352.5px 629.2px;will-change:transform;}
#cheeks{position:absolute;left:0;top:0;width:2560px;height:1440px;transform-origin:1352.5px 629.2px;animation:breathe 3.2s ease-in-out infinite;}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
#tint{position:absolute;left:-640px;top:-224px;width:3840px;height:1664px;background:rgb(160,200,50);opacity:0;pointer-events:none;}

/* ---------- HUD (scaled with the stage, never shaken) ---------- */
#hud{position:absolute;left:0;top:0;width:2560px;height:1440px;transform-origin:0 0;z-index:30;pointer-events:none;}
#hud button,#hud a{pointer-events:auto;}

#brand{position:absolute;left:0;top:0;width:1000px;height:800px;}
#logo{position:absolute;left:100px;top:175px;width:740px;height:auto;display:block;filter:drop-shadow(0 8px 0 rgba(0,0,0,.22));}
#tagline{position:absolute;left:140px;top:466px;display:flex;flex-direction:column;}
#tagline span{font-weight:700;font-size:64px;line-height:1.0;letter-spacing:1px;white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:12px var(--navy);filter:drop-shadow(0 6px 0 rgba(0,0,0,.22));}
#tagline .tl1{color:#fff;}
#tagline .tl2{color:var(--yellow);}
#tagsub{position:absolute;left:146px;top:642px;font-weight:600;font-size:40px;color:var(--navy);}

#status{position:absolute;left:0;top:0;width:600px;height:780px;}
#gauge{position:absolute;left:1980px;top:180px;width:420px;height:420px;}
#gaugeSvg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 0 rgba(0,0,0,.22));}
#counter{position:absolute;left:1958px;top:604px;width:464px;height:122px;background:var(--navy);border:6px solid var(--yellow);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 0 rgba(0,0,0,.25);}
.ctitle{color:#fff;font-weight:600;font-size:26px;letter-spacing:3px;line-height:1;}
.cdigits{display:block;margin-top:7px;text-align:center;white-space:nowrap;perspective:600px;}
.cdigit{display:inline-block;vertical-align:top;position:relative;width:44px;height:66px;margin:0 3px;border-radius:8px;background:linear-gradient(#20304a,#0d1c30);color:var(--cream);font-family:var(--font-display);font-size:46px;line-height:66px;text-align:center;overflow:hidden;box-shadow:inset 0 -4px 0 rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.07);backface-visibility:hidden;}
.cdigit::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(0,0,0,.55);}

#pop{position:absolute;left:1760px;top:800px;width:640px;height:280px;display:flex;align-items:center;justify-content:center;pointer-events:none;}
#popText{font-family:var(--font-display);font-size:150px;line-height:0.92;text-align:center;color:var(--yellow);-webkit-text-stroke:14px var(--navy);paint-order:stroke fill;transform-origin:50% 50%;opacity:0;will-change:transform,opacity;}

#cta{position:absolute;left:0;top:0;width:2560px;height:1440px;}
#fart{position:absolute;left:890px;top:1122px;width:780px;height:168px;padding:0;background:linear-gradient(#f2403e,#d41f24);border:8px solid var(--navy);border-radius:96px;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:transform .1s ease,filter .1s ease;box-shadow:0 12px 0 rgba(0,0,0,.28);}
#fart .fart-label{position:relative;z-index:2;font-family:var(--font-display);font-size:118px;line-height:1;letter-spacing:2px;color:#fff;-webkit-text-stroke:12px var(--navy);paint-order:stroke fill;display:block;transform:translateY(6px);}
.buf{position:absolute;top:50%;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4c4c4c,#0d0d0d 72%);border:8px solid var(--navy);transform:translateY(-50%);z-index:1;}
.buf-l{left:-14px;}
.buf-r{right:-14px;}
#fart.pressed{transform:translateY(6px);filter:brightness(.9);box-shadow:0 6px 0 rgba(0,0,0,.28);}
#fart.idle-pulse{animation:fartpulse 4s ease-in-out infinite;}
@keyframes fartpulse{0%,84%,100%{filter:drop-shadow(0 0 0 rgba(255,210,63,0))}90%{filter:drop-shadow(0 0 34px rgba(255,210,63,.8))}95%{filter:drop-shadow(0 0 18px rgba(255,210,63,.35))}}
#fart:focus-visible{outline:6px solid var(--yellow);outline-offset:8px;}
#hint{position:absolute;left:0;top:1300px;width:2560px;text-align:center;font-weight:700;font-size:40px;color:#fff;-webkit-text-stroke:8px var(--navy);paint-order:stroke fill;}

/* ---------- fx canvas ---------- */
#fx{position:absolute;left:0;top:0;z-index:20;pointer-events:none;}

/* ---------- header ---------- */
#top{position:absolute;left:0;right:0;top:0;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(var(--s)*46px) calc(var(--s)*48px) 0;pointer-events:none;}
#brandmini{display:flex;align-items:center;gap:calc(var(--s)*16px);pointer-events:auto;}
#badge{width:calc(var(--s)*92px);height:calc(var(--s)*92px);border-radius:50%;background:var(--blue) url(../assets/img/face.webp) center/cover no-repeat;border:calc(var(--s)*6px) solid var(--navy);box-shadow:0 calc(var(--s)*5px) 0 rgba(0,0,0,.25);}
#links{display:flex;align-items:center;gap:calc(var(--s)*14px);pointer-events:auto;}
.pill{font-family:var(--font-ui);font-weight:700;font-size:calc(var(--s)*34px);line-height:1;height:calc(var(--s)*74px);display:inline-flex;align-items:center;padding:0 calc(var(--s)*30px);border-radius:999px;border:calc(var(--s)*5px) solid var(--navy);color:#fff;text-decoration:none;white-space:nowrap;box-shadow:0 calc(var(--s)*5px) 0 rgba(0,0,0,.22);}
.pill.navy{background:var(--navy);color:var(--yellow);}
.pill.x{background:var(--yellow);color:var(--navy);}
.pill.pump{background:var(--blue);color:#fff;}
.pill.copy{background:var(--red);color:#fff;cursor:pointer;font-family:var(--font-ui);}
.pill.x:hover,.pill.pump:hover,.pill.copy:hover{filter:brightness(1.08);transform:translateY(calc(var(--s)*-2px));}
#feedback{background:var(--navy);color:var(--yellow);min-width:calc(var(--s)*250px);justify-content:center;font-size:calc(var(--s)*28px);opacity:0;transition:opacity .15s;box-shadow:none;}
#feedback.show{opacity:1;}

/* ---------- preload / reveal ---------- */
#loader{position:absolute;inset:0;z-index:90;background:#cfe3f1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .3s ease;}
.ld-logo{font-family:var(--font-display);font-size:96px;color:var(--red);-webkit-text-stroke:8px var(--navy);paint-order:stroke fill;}
.ld-sub{font-weight:600;font-size:22px;color:var(--navy);}
body.ready #loader{opacity:0;pointer-events:none;}
#stage,#hud,#top,#fx{opacity:0;transition:opacity .3s ease;}
body.ready #stage,body.ready #hud,body.ready #top,body.ready #fx{opacity:1;}

@media (prefers-reduced-motion: reduce){
  #cheeks{animation:none;}
  #fart.idle-pulse{animation:none;}
}