/* ============ ANGRY NERDS — static site styles ============ */

@font-face{
  font-family:"Lilita One";
  font-style:normal; font-weight:400; font-display:block;
  src:url("assets/fonts/LilitaOne-Regular.woff2") format("woff2");
}

:root{
  --k:1;
  --sky:#8ecdf0;
  --ink:#141414;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; background:var(--sky); }
body{
  font-family:"Lilita One","Arial Black",system-ui,sans-serif;
  color:#fff; user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}
img{ -webkit-user-drag:none; user-select:none; }
.sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* chunky Angry-Birds-ish text: white fill + thick black stroke + soft drop */
.chunky{
  font-family:"Lilita One","Arial Black",system-ui,sans-serif;
  color:#fff; letter-spacing:.01em; line-height:1;
  -webkit-text-stroke:calc(3.4px * var(--k)) var(--ink);
  paint-order:stroke fill;
  text-shadow:0 calc(3px * var(--k)) 0 rgba(0,0,0,.25);
}

/* ============================ LOADER ============================ */
#loader{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:calc(18px * var(--k));
  background:var(--sky); transition:opacity .3s ease; opacity:1;
}
#loader img{ height:max(96px, calc(220px * var(--k))); filter:drop-shadow(0 6px 0 rgba(0,0,0,.2)); }
#loader .loading-txt{ font-size:calc(30px * var(--k)); -webkit-text-stroke-width:calc(2.6px * var(--k)); }
#loader.gone{ opacity:0; pointer-events:none; }
body.ready #loader{ display:none; }

/* ============================ STAGE ============================ */
#stage{
  position:fixed; left:0; top:0; width:1536px; height:864px;
  transform-origin:top left; z-index:1;
}
#world{ position:absolute; left:0; top:0; width:1536px; height:864px; will-change:transform; }
.layer{ position:absolute; display:block; }
#bg{ left:-384px; top:-160px; width:2304px; height:1024px; transform-origin:1152px 592px; }

/* soft ground shadows */
.shadow{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(12,38,8,.55), rgba(12,38,8,.28) 55%, rgba(12,38,8,0) 78%);
}
#shSling{ left:276px; top:596px; width:170px; height:62px; }
#shNerd1{ left:62px;  top:692px; width:112px; height:34px; }
#shNerd2{ left:186px; top:686px; width:104px; height:32px; }
#shTower{ left:1052px; top:764px; width:392px; height:74px; }

/* ============================ BANDS / POUCH ============================ */
.bandsvg{ position:absolute; left:0; top:0; width:1536px; height:864px; pointer-events:none; overflow:visible; }
.band-outline{ fill:none; stroke:#141414; stroke-linecap:round; }
.band-fill{ fill:none; stroke:#6b3f1d; stroke-linecap:round; }
#bandBack{ z-index:3; }
#bandBack.snap{ animation:bandsnap .2s ease-out 1; transform-origin:352px 418px; }
@keyframes bandsnap{ 0%{ transform:scale(.92); } 55%{ transform:scale(1.05); } 100%{ transform:scale(1); } }
#pouch{
  position:absolute; width:40px; height:26px; z-index:3; pointer-events:none;
  left:-20px; top:-13px;
  background:linear-gradient(#5a3415,#3c2109); border:3px solid #141414; border-radius:12px / 9px;
}

/* ============================ HERO ============================ */
#heroWrap{
  position:absolute; left:277px; top:282px; width:150px; height:170px;
  transform-origin:50% 50%; z-index:4; will-change:transform;
}
#hero{ display:block; width:150px; height:170px; transform-origin:75px 136px; }
#rage{
  position:absolute; inset:0; background:#ff2f22; mix-blend-mode:multiply; opacity:0;
  -webkit-mask:url("assets/hero.png") center / 150px 170px no-repeat;
  mask:url("assets/hero.png") center / 150px 170px no-repeat;
  pointer-events:none; transition:opacity .08s linear;
}

/* idle tremble (on the img so it composes with the wrapper transform) */
.tremble{ animation:tremble 1.6s ease-in-out infinite; }
@keyframes tremble{
  0%,100%{ transform:scale(1) translate(0,0); }
  25%{ transform:scale(1.015) translate(.6px,-.6px); }
  50%{ transform:scale(1.02) translate(-.6px,.4px); }
  75%{ transform:scale(1.01) translate(.4px,.6px); }
}
/* replay drop-in */
.drop{ animation:drop .35s cubic-bezier(.2,1.5,.4,1) 1; }
@keyframes drop{
  0%{ transform:translateY(-120px) scale(.9); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}

/* ============================ NERDS / PIGS ============================ */
#nerdCurly{ z-index:6; animation:nbob 2.2s ease-in-out infinite; transform-origin:50% 100%; }
#nerdSpiky{ z-index:6; animation:nbob 2.7s ease-in-out infinite -1.1s; transform-origin:50% 100%; }
@keyframes nbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
#nerdCurly.hop{ animation:hop .26s ease-in-out 2 !important; }
#nerdSpiky.hop{ animation:hop .26s ease-in-out .12s 2 !important; }
@keyframes hop{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-18px); } }
.lean{ animation:none !important; transform:skewX(-9deg) translateY(2px); }
.blink{ animation:blink .16s ease-in-out 1 !important; }
@keyframes blink{ 50%{ transform:scaleY(.72); } }
#nerdCurly.whoa{ animation:whoa .5s ease-out 1 !important; }
@keyframes whoa{ 0%{transform:scaleY(1)}30%{transform:scaleY(.78) translateY(4px)}100%{transform:scaleY(1)} }

#pigLeft{ z-index:7; animation:pigbob 2.4s ease-in-out infinite; transform-origin:50% 90%; }
#pigRight{ z-index:7; animation:pigbob 2.4s ease-in-out infinite -1.2s; transform-origin:50% 90%; }
@keyframes pigbob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.pop{ animation:pigpop .06s ease-out 1 forwards !important; }
@keyframes pigpop{ from{ transform:scale(1); } to{ transform:scale(1.15); } }

/* ============================ TOWER ============================ */
#tower{ z-index:6; }
#towerWreck{ z-index:6; display:none; }
#towerWreck.on, #tower.wreck-hidden{ }
#towerWreck.on{ display:block; }

/* ============================ HERO CRASH ============================ */
#heroCrash{ z-index:7; display:none; transform-origin:50% 100%; }
#heroCrash.on{ display:block; }
#heroCrash.squash{ animation:squash .32s cubic-bezier(.3,1.4,.5,1) 1; }
@keyframes squash{ 0%{ transform:scale(1.18); } 55%{ transform:scale(.92); } 100%{ transform:scale(1); } }

/* ============================ FX LAYER ============================ */
#fx{ position:absolute; inset:0; z-index:8; pointer-events:none; }
#fx img, #fx .dot, #fx .dust, #fx .pop1, #fx .impact-txt{ position:absolute; }
.traildot{ border-radius:50%; background:#fff; box-shadow:0 0 0 1.5px rgba(40,40,40,.25); }
.dust{ border-radius:50%; background:#d9b98a; opacity:.9; }
.pop1{ font-size:44px; color:#7bd83a; -webkit-text-stroke:5px #141414; paint-order:stroke fill; text-shadow:0 3px 0 rgba(0,0,0,.3); }
.impact-txt{ font-size:74px; color:#ffce28; -webkit-text-stroke:7px #141414; paint-order:stroke fill; text-shadow:0 5px 0 rgba(0,0,0,.35); transform-origin:50% 50%; white-space:nowrap; }

/* ============================ BUBBLES ============================ */
.bubble{
  position:absolute; left:400px; top:206px; max-width:420px; padding:14px 24px;
  background:#fff; border:6px solid var(--ink); border-radius:24px; color:#111;
  font-size:calc(30px); line-height:1.05; z-index:9; display:none;
  transform-origin:6% 130%; animation:bubblepulse 1.8s ease-in-out infinite;
}
.bubble.show{ display:block; }
.bubble span{ -webkit-text-stroke:0; }
@keyframes bubblepulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
.bubble .tail{
  position:absolute; left:24px; bottom:-20px; width:0; height:0;
  border-left:15px solid transparent; border-right:15px solid transparent; border-top:22px solid var(--ink);
}
.bubble .tail::after{
  content:""; position:absolute; left:-9px; top:-22px; width:0; height:0;
  border-left:9px solid transparent; border-right:9px solid transparent; border-top:16px solid #fff;
}
.bubble.big{ font-size:38px; }
.bubble.big span{ color:#e0241a; }
#crashBubble{ left:1096px; top:356px; width:310px; max-width:310px; font-size:28px; text-align:center; transform-origin:50% 130%; }
#crashBubble .tail{ left:50%; margin-left:-15px; }

/* aim dots */
.aimdot{ position:absolute; width:9px; height:9px; border-radius:50%; background:#fff; opacity:.95; box-shadow:0 0 0 2px rgba(20,20,20,.6); }

/* grab ring */
#ring{ position:absolute; left:352px; top:367px; width:236px; height:236px; margin:-118px 0 0 -118px; z-index:5; pointer-events:none; animation:spin 26s linear infinite; }
#ring .rd{ position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(20,20,20,.55); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================ FLASH ============================ */
#flash{ position:absolute; inset:0; background:#fff; opacity:0; z-index:12; pointer-events:none; }

/* ============================ PANEL ============================ */
#panel{ position:absolute; left:566px; top:150px; width:404px; height:398px; z-index:11; display:none; }
#panel.show{ display:block; animation:paneldrop .38s cubic-bezier(.2,1.5,.4,1) 1; }
@keyframes paneldrop{ 0%{ transform:translateY(-140px); opacity:0; } 60%{ opacity:1; } 100%{ transform:translateY(0); opacity:1; } }
#panel.up{ animation:panelup .25s ease-in 1 forwards; }
@keyframes panelup{ to{ transform:translateY(-140px); opacity:0; } }
.panel-sign{
  position:absolute; inset:0; border-radius:26px; border:7px solid var(--ink);
  background:
    repeating-linear-gradient(#c98a4d 0 42px, #b3763f 42px 46px, #c98a4d 46px 88px, #a9692f 88px 92px),
    #b3763f;
  box-shadow: inset 0 0 0 6px rgba(255,236,200,.5), 0 12px 0 rgba(0,0,0,.22);
  display:flex; flex-direction:column; align-items:center; padding:22px 20px 6px;
}
.panel-title{ font-size:46px; color:#ffce28; margin-top:2px; }
.panel-name{ font-size:40px; margin-top:8px; }
.panel-sub{ font-size:24px; margin-top:4px; }
.stars{ display:flex; align-items:center; gap:6px; margin-top:14px; }
.star{ width:74px; height:74px; opacity:0; transform:scale(.4); }
.star.s2{ width:94px; height:94px; }
.star polygon{ fill:#ffce28; stroke:var(--ink); stroke-width:6; stroke-linejoin:round; }
.star .glint{ fill:#fff; stroke:none; opacity:.85; }
.star.in{ animation:starin .32s cubic-bezier(.2,1.6,.4,1) 1 forwards; }
@keyframes starin{ to{ opacity:1; transform:scale(1); } }
.panel-btns{ display:flex; gap:22px; margin-top:16px; }
.pbtn{
  width:62px; height:62px; border-radius:50%; border:5px solid var(--ink);
  background:#111; color:#fff; font-family:inherit; font-size:24px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  opacity:0; transform:scale(.3);
}
.pbtn.in{ animation:starin .3s cubic-bezier(.2,1.6,.4,1) 1 forwards; }
.pbtn svg{ width:30px; height:30px; fill:#fff; }
.pbtn-pump{ background:#8ed44a; color:#0d2a06; font-size:17px; }
.pbtn-ca{ background:#ffce28; color:#3a2a00; font-size:24px; }
.pbtn[aria-disabled="true"]{ opacity:.45 !important; filter:grayscale(.7); cursor:default; }
.panel-status{ margin-top:10px; font-size:22px; min-height:26px; color:#fff; }
#replay{
  /* panel-relative: absolute stage centre = (566+156+46, 150+388+46) = (768, 584) */
  position:absolute; left:156px; top:388px; width:92px; height:92px; padding:0;
  border-radius:50%; border:7px solid var(--ink); cursor:pointer; z-index:12;
  background:radial-gradient(circle at 38% 32%, #ffe27a, #ffce28 55%, #f0a900);
  box-shadow:0 8px 0 rgba(0,0,0,.25);
  opacity:0; transform:scale(.3);
}
#replay.in{ animation:starin .28s cubic-bezier(.2,1.6,.4,1) 1 forwards; }
#replay svg{ width:60px; height:60px; }

/* ============================ HUD ============================ */
.hud{ position:fixed; z-index:60; }
.logo-wrap{ position:fixed; left:calc(20px * var(--k)); top:calc(12px * var(--k)); display:block; z-index:60; }
#logo{ display:block; height:max(88px, calc(152px * var(--k))); width:auto; filter:drop-shadow(0 6px 0 rgba(0,0,0,.18)); }
.logo-wrap{ animation:logowobble 4.5s ease-in-out infinite; transform-origin:20% 80%; }
@keyframes logowobble{ 0%,100%{ transform:rotate(-1.4deg); } 50%{ transform:rotate(1.4deg); } }

#headerRight{ position:fixed; right:calc(20px * var(--k)); top:calc(12px * var(--k)); display:flex; flex-direction:column; align-items:flex-end; gap:calc(8px * var(--k)); z-index:60; }
#headerRow{ display:flex; align-items:center; gap:calc(10px * var(--k)); }

.pill{
  display:inline-flex; align-items:center; gap:calc(10px * var(--k));
  font-family:inherit; font-size:calc(24px * var(--k)); color:#fff; cursor:pointer;
  border:calc(4px * var(--k)) solid var(--ink); border-radius:999px;
  padding:calc(6px * var(--k)) calc(16px * var(--k));
  background:linear-gradient(#7a4a24,#5a3316); box-shadow:inset 0 calc(5px * var(--k)) 0 rgba(255,255,255,.18);
}
.pill-brand{ color:#ffd43a; }
.pill-ca{ color:#f4e4cf; font-size:calc(22px * var(--k)); }
.copy-ic{ width:calc(24px * var(--k)); height:calc(24px * var(--k)); fill:#f4e4cf; flex:0 0 auto; }
.pump-pill{ background:linear-gradient(#8ed44a,#5aa72a); color:#0d2a06; }
.rbtn{
  width:calc(52px * var(--k)); height:calc(52px * var(--k)); border-radius:50%;
  border:calc(4px * var(--k)) solid var(--ink); background:#111; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:inset 0 calc(5px * var(--k)) 0 rgba(255,255,255,.16);
}
.rbtn svg{ width:calc(30px * var(--k)); height:calc(30px * var(--k)); fill:#fff; }
.sound-btn .wave{ stroke:#fff; }
.rbtn.muted .wave{ display:none; }
.rbtn.muted{ opacity:.6; }
.pill[aria-disabled="true"], .rbtn[aria-disabled="true"], .pbtn[aria-disabled="true"]{
  opacity:.45; filter:grayscale(.75); cursor:default; pointer-events:none;
}

#score{ text-align:right; margin-top:calc(4px * var(--k)); }
.score-label{ font-size:calc(24px * var(--k)); -webkit-text-stroke-width:calc(2.4px * var(--k)); }
.score-num{ font-size:calc(70px * var(--k)); -webkit-text-stroke-width:calc(4px * var(--k)); margin-top:calc(2px * var(--k)); }
.score-num.bump{ animation:bump .28s ease-out 1; }
@keyframes bump{ 0%{ transform:scale(1);} 40%{ transform:scale(1.28);} 100%{ transform:scale(1);} }

/* toast under the CA pill */
.toast{
  position:fixed; right:calc(20px * var(--k)); top:calc(84px * var(--k)); z-index:70;
  font-size:calc(22px * var(--k)); background:#141414; color:#ffd43a; padding:calc(6px * var(--k)) calc(14px * var(--k));
  border-radius:calc(12px * var(--k)); opacity:0; transform:translateY(-6px); transition:opacity .2s, transform .2s; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* ============================ BOTTOM HUD ============================ */
#bottomBar{
  position:fixed; left:50%; bottom:calc(16px * var(--k)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:calc(10px * var(--k)); z-index:60;
}
#cta{
  font-family:inherit; font-size:calc(32px * var(--k)); color:#fff; cursor:pointer;
  padding:calc(15px * var(--k)) calc(46px * var(--k)); border-radius:999px;
  border:calc(6px * var(--k)) solid var(--ink);
  background:linear-gradient(#ffa24a,#ff5f22 46%,#e23a12);
  -webkit-text-stroke:calc(3px * var(--k)) var(--ink); paint-order:stroke fill;
  text-shadow:0 calc(3px * var(--k)) 0 rgba(0,0,0,.3);
  box-shadow:inset 0 calc(7px * var(--k)) calc(12px * var(--k)) rgba(255,255,255,.6), 0 calc(6px * var(--k)) 0 rgba(0,0,0,.22);
  transition:opacity .2s, filter .2s, transform .06s;
}
#cta:active{ transform:translateY(calc(2px * var(--k))); }
#cta.dim{ opacity:.4; filter:grayscale(.6); pointer-events:none; }
#status{ font-size:calc(26px * var(--k)); -webkit-text-stroke-width:calc(2.6px * var(--k)); }

#footerNote{
  position:fixed; right:calc(14px * var(--k)); bottom:calc(6px * var(--k)); z-index:60;
  font-family:inherit; font-size:calc(15px * var(--k)); color:rgba(255,255,255,.92);
  -webkit-text-stroke:calc(1.6px * var(--k)) rgba(20,20,20,.85); paint-order:stroke fill;
}

/* focus ring */
:focus{ outline:none; }
:focus-visible{ outline:calc(5px * var(--k)) solid #ffd43a; outline-offset:calc(3px * var(--k)); border-radius:8px; }

/* ============================ INTERACTION TARGET ============================ */
#hit{
  position:absolute; left:240px; top:260px; width:230px; height:380px;
  background:transparent; border:0; padding:0; cursor:grab; z-index:13;
  border-radius:40%;
  -webkit-tap-highlight-color:transparent;
}
#hit:focus-visible{ outline:none; box-shadow:0 0 0 calc(2px * var(--k)) #141414, 0 0 0 calc(6px * var(--k)) #ffd43a; }
#hit:active, body.dragging #hit{ cursor:grabbing; }
#hit[disabled]{ display:none; }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  .logo-wrap,.tremble,#nerdCurly,#nerdSpiky,#pigLeft,#pigRight,#ring,.bubble{ animation:none !important; }
  #hero{ animation:none !important; }
  #stage.shake #world{ transform:none !important; }
}