@font-face{
  font-family:'Bowlby One SC';
  src:url('assets/fonts/BowlbyOneSC-Regular.ttf') format('truetype');
  font-display:block;
}
@font-face{
  font-family:'Lilita One';
  src:url('assets/fonts/LilitaOne-Regular.ttf') format('truetype');
  font-display:block;
}

:root{
  --u: min(calc(100vw / 1536), calc(100vh / 864));
  --ink:#111;
  --cream:#FFF6CD;
  --terracotta:#D67A5C;
  --red:#E23A26;
  --gold:#F2B94A;
}

html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:#F1E29B;
}
body{
  font-family:'Lilita One',system-ui,sans-serif;
  -webkit-user-select:none;
  user-select:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ -webkit-user-drag:none; user-drag:none; }

/* ---------- stage (safe area) ---------- */
#stage{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:calc(1536 * var(--u));
  height:calc(864 * var(--u));
  z-index:0;
}

#plate{
  position:absolute;
  left:calc(-448 * var(--u));
  top:calc(-160 * var(--u));
  width:calc(2432 * var(--u));
  height:calc(1024 * var(--u));
  display:block;
  z-index:1;
  pointer-events:none;
}

/* ---------- pot (body + heat + column + lid) ---------- */
#pot{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:2;
  transform-origin:calc(766 * var(--u)) calc(643 * var(--u));
  isolation:isolate;
  will-change:transform;
}
.layer{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  display:block;
  pointer-events:none;
}
#body-rage{ opacity:0; }

.heat{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  background:var(--red);
  opacity:0;
  mix-blend-mode:multiply;
  pointer-events:none;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:0 0;     mask-position:0 0;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
}
#heat-idle{
  -webkit-mask-image:url('assets/L1_body_idle_heat.webp');
  mask-image:url('assets/L1_body_idle_heat.webp');
}
#heat-rage{
  -webkit-mask-image:url('assets/L3_body_rage_heat.webp');
  mask-image:url('assets/L3_body_rage_heat.webp');
}
#heat-lid{
  -webkit-mask-image:url('assets/L2_lid_heat.webp');
  mask-image:url('assets/L2_lid_heat.webp');
}

#column{
  position:absolute;
  left:calc(766 * var(--u));
  bottom:calc(626 * var(--u));
  width:calc(1107 * var(--u));
  height:calc(1921 * var(--u));
  transform:translateX(-50%) scale(1,0);
  transform-origin:50% 100%;
  display:block;
  visibility:hidden;
  pointer-events:none;
}

#lid{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  transform-origin:calc(768 * var(--u)) calc(184 * var(--u));
  will-change:transform;
}

/* ---------- cup ---------- */
#cup{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:3;
  transform-origin:calc(1151 * var(--u)) calc(617 * var(--u));
  will-change:transform;
  pointer-events:none;
}

/* ---------- fx ---------- */
#fx{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:4;
  pointer-events:none;
}
/* puffs that must sit BEHIND the lid: emitted from under the lid flange while charging */
#fx-back{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
}
#fx .puff,#fx-back .puff{
  position:absolute;
  left:0; top:0;
  display:block;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

#motionlines{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:4;
  opacity:0;
  pointer-events:none;
}
#motionlines line{
  stroke:var(--ink);
  stroke-width:5;
  stroke-linecap:round;
}

/* ---------- payoff text ---------- */
#payoff{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:6;
  opacity:0;
  pointer-events:none;
  transform:translateZ(0);
}
#payoff svg{ width:100%; height:100%; display:block; }
#payoff text{
  font-family:'Bowlby One SC',sans-serif;
  font-size:90px;
  text-anchor:middle;
  dominant-baseline:central;
}
#payoff .pt{
  fill:#fff;
  stroke:var(--ink);
  stroke-width:14;
  paint-order:stroke;
}
#payoff .pt-shadow{
  fill:var(--ink);
  transform:translate(7px,7px);
}
#payoff .grp{
  transform-box:view-box;
  transform:rotate(var(--rot)) scale(var(--pop,1));
}
#payoff .g1{ --rot:6deg; }
#payoff .g2{ --rot:-6deg; opacity:0; }

/* ---------- flash ---------- */
#flash{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  z-index:7;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle at calc(766 * var(--u)) calc(184 * var(--u)),
              rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 55%);
}

/* ---------- CTA ---------- */
#cta{
  position:absolute;
  left:calc(768 * var(--u));
  top:calc(668 * var(--u));
  transform:translateX(-50%);
  width:calc(560 * var(--u));
  height:calc(84 * var(--u));
  z-index:10;
  box-sizing:border-box;
  padding:0;
  background:var(--cream);
  border:calc(4 * var(--u)) solid var(--ink);
  border-radius:calc(18 * var(--u));
  box-shadow:calc(7 * var(--u)) calc(7 * var(--u)) 0 var(--ink);
  cursor:pointer;
  overflow:hidden;
  font-family:'Bowlby One SC',sans-serif;
  color:var(--ink);
  touch-action:none;
}
#cta .fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:var(--gold);
  z-index:1;
}
#cta .label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(30 * var(--u));
  letter-spacing:calc(0.5 * var(--u));
  z-index:2;
  white-space:nowrap;
}
#cta .pct{
  position:absolute;
  right:calc(14 * var(--u));
  top:0; bottom:0;
  display:flex;
  align-items:center;
  font-family:'Lilita One',sans-serif;
  font-size:calc(22 * var(--u));
  z-index:2;
}
#cta:hover:not(.loading):not([aria-disabled="true"]){
  transform:translateX(-50%) translateY(calc(-2 * var(--u)));
  box-shadow:calc(9 * var(--u)) calc(9 * var(--u)) 0 var(--ink);
}
#cta:active:not(.loading):not([aria-disabled="true"]){
  transform:translateX(-50%) translateY(calc(3 * var(--u)));
  box-shadow:calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink);
}
#cta[aria-disabled="true"]{ cursor:default; }
#cta.loading{ cursor:progress; opacity:.9; }

/* ---------- status ---------- */
.status{
  position:absolute;
  left:calc(768 * var(--u));
  top:calc(778 * var(--u));
  transform:translateX(-50%);
  z-index:10;
  height:calc(36 * var(--u));
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  padding:0 calc(18 * var(--u));
  background:var(--cream);
  border:calc(2.5 * var(--u)) solid var(--ink);
  border-radius:calc(18 * var(--u));
  font-family:'Lilita One',sans-serif;
  font-size:calc(20 * var(--u));
  color:var(--ink);
  white-space:nowrap;
  box-shadow:calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--ink);
}

/* ---------- pot hit area ---------- */
#pothit{
  position:absolute;
  left:calc(455 * var(--u));
  top:calc(98 * var(--u));
  width:calc(608 * var(--u));
  height:calc(545 * var(--u));
  z-index:8;
  background:transparent;
  cursor:pointer;
  touch-action:none;
}

/* ---------- header ---------- */
#header{
  position:fixed;
  left:calc(32 * var(--u));
  right:calc(32 * var(--u));
  top:calc(30 * var(--u));
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
#header .brand,#header .nav{ pointer-events:auto; display:flex; align-items:center; }
#header .brand{ gap:calc(14 * var(--u)); }
.wordmark{
  font-family:'Bowlby One SC',sans-serif;
  font-size:calc(44 * var(--u));
  color:var(--ink);
  letter-spacing:calc(1 * var(--u));
  white-space:nowrap;
}
.chip{
  font-family:'Lilita One',sans-serif;
  font-size:calc(24 * var(--u));
  color:var(--cream);
  background:var(--terracotta);
  border:calc(3 * var(--u)) solid var(--ink);
  border-radius:calc(10 * var(--u));
  padding:calc(2 * var(--u)) calc(12 * var(--u));
  box-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 var(--ink);
  white-space:nowrap;
}
.nav{ gap:calc(16 * var(--u)); }
.pill{
  font-family:'Lilita One',sans-serif;
  font-size:calc(22 * var(--u));
  color:var(--ink);
  background:var(--cream);
  border:calc(3 * var(--u)) solid var(--ink);
  border-radius:calc(12 * var(--u));
  height:calc(44 * var(--u));
  padding:0 calc(16 * var(--u));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:calc(4 * var(--u)) calc(4 * var(--u)) 0 var(--ink);
  cursor:pointer;
  text-decoration:none;
  box-sizing:border-box;
  transition:transform .08s linear, box-shadow .08s linear;
}
.pill:hover{ transform:translate(calc(-2 * var(--u)),calc(-2 * var(--u))); box-shadow:calc(6 * var(--u)) calc(6 * var(--u)) 0 var(--ink); }
.pill:active{ transform:translate(calc(3 * var(--u)),calc(3 * var(--u))); box-shadow:calc(1 * var(--u)) calc(1 * var(--u)) 0 var(--ink); }
.pill[aria-disabled="true"]{ opacity:.5; cursor:default; pointer-events:none; }
.pill.sound{ width:calc(44 * var(--u)); padding:0; }
.pill.sound svg{ width:calc(26 * var(--u)); height:calc(26 * var(--u)); }
.sound svg path,.sound svg line{ fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.sound svg .spk{ fill:var(--ink); }
.sound svg .slash{ display:none; }
.sound.muted svg .wave{ display:none; }
.sound.muted svg .slash{ display:block; }

/* ---------- counter ---------- */
#counter{
  position:fixed;
  right:calc(32 * var(--u));
  bottom:calc(28 * var(--u));
  z-index:100;
  width:calc(236 * var(--u));
  height:calc(52 * var(--u));
  box-sizing:border-box;
  background:var(--cream);
  border:calc(3 * var(--u)) solid var(--ink);
  border-radius:calc(12 * var(--u));
  box-shadow:calc(5 * var(--u)) calc(5 * var(--u)) 0 var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(16 * var(--u));
}
#counter .cap{
  font-family:'Lilita One',sans-serif;
  font-size:calc(22 * var(--u));
  white-space:nowrap;
}
#counter .num{
  font-family:'Bowlby One SC',sans-serif;
  font-size:calc(28 * var(--u));
  color:var(--red);
  transform-origin:50% 50%;
}
#counter .num.bump{ animation:bump .3s ease-out; }
@keyframes bump{ 0%{transform:scale(1.25)} 100%{transform:scale(1)} }