:root{
  --char:#1b1512; --ivory:#f6ecd8; --ember:#ff7a1a; --ember2:#ffc233;
  --red:#b3220f; --shadow-red:#6b1408;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:clip}
body{
  background:#0d0806;color:var(--ivory);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  opacity:0;transition:opacity .4s ease;
  -webkit-font-smoothing:antialiased;
}
body.ready{opacity:1}

#plate{position:absolute;left:0;top:0;z-index:0;
  background:#0d0806 url('assets/L0_bleed_plate.jpg') 0 0/100% 100% no-repeat}

#viewport{position:fixed;inset:0;overflow:clip;background:#0d0806}
#stage{position:absolute;left:0;top:0}
#scene{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 50%}

.layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;user-select:none}
.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}
.charred{opacity:0}

#elmoClip,#elmo,#elmoWiggle{position:absolute;left:0;top:0;width:100%;height:100%}
#elmoClip{overflow:hidden}
#elmo{transform-origin:50% 78.1%;animation:breathe 3s ease-in-out infinite}
#elmoWiggle{transform-origin:50% 78.1%;will-change:transform}
#armL{transform-origin:42.84% 68.17%}
#armR{transform-origin:56.84% 62.27%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}

#shadow{
  position:absolute;z-index:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);
}
#glow{
  position:absolute;z-index:5;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,170,60,.55),rgba(255,120,20,.18) 55%,transparent);
}
#flame{
  position:absolute;z-index:6;mix-blend-mode:screen;transform-origin:50% 88%;
  transition:transform 150ms ease;will-change:transform,filter;
}
#smoke{position:absolute;left:0;top:0;z-index:4;pointer-events:none}
#fx{position:absolute;left:0;top:0;z-index:7;pointer-events:none}
#fireball{
  position:absolute;z-index:8;mix-blend-mode:screen;opacity:0;pointer-events:none;
  transform-origin:50% 50%;will-change:transform,opacity;
}

#hits{position:absolute;left:0;top:0;width:100%;height:100%;z-index:9;pointer-events:none}
.hit{position:absolute;pointer-events:auto}
#hitBody,#hitArmL,#hitArmR,#tickle{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M27 3c-6 0-14 6-18 12-2 3-3 6-3 8 0 2 2 4 4 4 2 0 5-1 8-3 6-4 12-12 12-18 0-2-1-3-3-3z' fill='%23ff7a1a' stroke='%23f6ecd8' stroke-width='1.5'/></svg>") 2 2,pointer;
}

#hud{position:absolute;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  transform-origin:0 0;pointer-events:none}
#tickle{
  position:relative;width:440px;height:92px;border-radius:999px;
  border:3px solid var(--ivory);background:var(--char);overflow:hidden;
  font-family:'Luckiest Guy',Impact,sans-serif;font-size:44px;letter-spacing:2px;
  color:var(--ivory);box-shadow:0 8px 0 var(--shadow-red),0 0 40px rgba(255,110,20,.35);
  pointer-events:auto;transition:transform 80ms ease,box-shadow 80ms ease,opacity 120ms ease;
  padding:0;appearance:none;
}
#tickle .fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,var(--red),var(--ember),var(--ember2));
  transition:width 150ms ease;
}
#tickle .t{position:relative;display:block;padding-top:6px;text-shadow:0 3px 0 rgba(0,0,0,.55)}
#tickle .heat{
  position:absolute;right:26px;top:50%;transform:translateY(-50%);
  font:700 12px 'Space Grotesk',sans-serif;letter-spacing:2px;opacity:.85;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#tickle.pressed{transform:translateY(4px);box-shadow:0 4px 0 var(--shadow-red),0 0 30px rgba(255,110,20,.3)}
#tickle.hot{animation:wobble 300ms ease-in-out infinite alternate}
#tickle.hot .fill{animation:pulse 300ms ease-in-out infinite alternate}
#tickle.hotread .heat{color:#1b1512;text-shadow:0 1px 0 rgba(255,246,224,.75)}
#tickle.locked{opacity:.55}
#tickle:focus-visible{outline:3px solid var(--ember2);outline-offset:4px}

.hint{
  font:500 14px 'Space Grotesk',sans-serif;letter-spacing:2px;text-transform:uppercase;
  opacity:.75;margin-top:10px;
}

#bubbles{position:absolute;left:0;top:0;width:100%;height:100%;z-index:10;pointer-events:none}
.bubble{
  position:absolute;font-family:'Luckiest Guy',Impact,sans-serif;
  color:#fff3c4;text-shadow:0 3px 0 var(--red);white-space:nowrap;
  transform-origin:50% 50%;will-change:transform,opacity;
}

#flash{
  position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;
  background:#fff6d8;will-change:opacity,background;
}

header{
  position:fixed;left:0;right:0;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:clamp(16px,1.6vw,36px);pointer-events:none;
}
header .brand,header .util{pointer-events:auto}
.logo{
  font-family:'Luckiest Guy',Impact,sans-serif;font-size:clamp(28px,2.2vw,48px);
  line-height:1;letter-spacing:1px;color:var(--ivory);
  text-shadow:0 3px 0 var(--red),0 0 18px rgba(255,120,30,.5);
}
.subline{
  font:700 clamp(10px,0.8vw,12px) 'Space Grotesk',sans-serif;
  letter-spacing:3px;color:var(--ember2);margin-top:4px;
}
.util{display:flex;gap:8px;align-items:center}
.pill{
  font:700 clamp(12px,0.75vw,16px) 'Space Grotesk',sans-serif;letter-spacing:1px;color:var(--ivory);
  background:rgba(27,21,18,.82);border:1px solid rgba(246,236,216,.18);
  padding:clamp(7px,0.6vw,11px) clamp(10px,0.9vw,18px);border-radius:999px;text-decoration:none;cursor:pointer;
  appearance:none;line-height:1;
}
.pill:hover{background:rgba(27,21,18,.95)}
.pill.ca{border-color:var(--ember);color:var(--ember2)}
.pill.ca[disabled]{opacity:.4;cursor:not-allowed}
.pill.icon{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(30px,1.9vw,44px);height:clamp(28px,1.8vw,42px);padding:0}
.pill.icon svg{width:clamp(15px,0.95vw,19px);height:clamp(15px,0.95vw,19px);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill[hidden]{display:none}
.status{min-width:70px;text-align:right;font:500 12px 'Space Grotesk',sans-serif;color:var(--ember2)}

#counter{
  position:fixed;right:32px;bottom:26px;z-index:20;text-align:right;pointer-events:none;
}
#counter .clabel{
  font:700 clamp(11px,0.7vw,16px) 'Space Grotesk',sans-serif;letter-spacing:2px;opacity:.9;
}
#counter b{
  display:block;font-family:'Luckiest Guy',Impact,sans-serif;font-size:clamp(40px,2.6vw,72px);
  color:var(--ember2);letter-spacing:1px;transform-origin:100% 100%;
  text-shadow:0 3px 0 var(--red);
}

@keyframes wobble{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes pulse{from{filter:brightness(1)}to{filter:brightness(1.25)}}

@media (prefers-reduced-motion:reduce){
  #tickle.hot{animation:none}
  #tickle.hot .fill{animation:none}
  body{transition:none}
}