/* ============================================================
   BombTimer character-bomb engine — styles (extracted from lab)
   ============================================================ */

/* stage / art / fuse / spark (from lab head <style>) */
.stage{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 18%, #2a2018 0%, #1a130d 60%, #120d08 100%);
  isolation:isolate;
}
.stage::after{ /* explosion flash */
  content:"";position:absolute;inset:-20%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%, #fff 0%, #ffd27a 18%, #ff7a1f 34%, transparent 60%);
}
.stage.boom{animation:bt-shake .5s ease}
.stage.boom::after{animation:bt-flash .65s ease-out}
@keyframes bt-flash{0%{opacity:0;transform:scale(.5)}12%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes bt-shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-2px)}80%{transform:translate(2px,2px)}}

.art{position:absolute;inset:0;width:100%;height:100%}
canvas.art{display:block}

.fuse-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.fuse-line{fill:none;stroke:#cf9a4f;stroke-width:2.6;stroke-linecap:round;}
.fuse-core{fill:none;stroke:#e8c178;stroke-width:1;stroke-linecap:round;opacity:.8}
.spark{transition:opacity .1s}
.spark .flick{animation:bt-flick .14s steps(2) infinite}
.spark .em{animation:bt-ember 1s ease-out infinite}
@keyframes bt-flick{0%{transform:scale(1);opacity:1}100%{transform:scale(1.35);opacity:.7}}
@keyframes bt-ember{0%{transform:translate(0,0);opacity:.9}100%{transform:translate(0,-9px);opacity:0}}
/* offscreen / behind the open timer takeover: freeze the CSS spark animations to save GPU */
.bt-anim-paused .spark .flick,.bt-anim-paused .spark .em{animation-play-state:paused}

/* character layers (from lab second <style>) */
.led2{position:absolute;left:50%;top:59%;transform:translate(-50%,-50%);z-index:2;
  background:linear-gradient(#220303,#3a0707);border:1.5px solid #5a0d0d;border-radius:5px;
  padding:2.5px 7px;box-shadow:inset 0 0 6px rgba(0,0,0,.85), 0 1px 2px rgba(0,0,0,.5);
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;color:#ff3b2a;
  text-shadow:0 0 7px rgba(255,59,42,.95);font-size:clamp(11px,3.6vw,16px);letter-spacing:1.5px;line-height:1.1}
.charinner{position:absolute;inset:0;transform-origin:50% 88%;will-change:transform}
.gshadow{position:absolute;left:50%;bottom:9%;width:40%;height:7%;transform:translateX(-50%);transform-origin:center center;border-radius:50%;background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));z-index:0;pointer-events:none}
.emotion{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---- overrides for mounted (homepage) bombs: transparent, overflow-visible,
        LED scales with the stage container instead of the viewport ---- */
.bomb-stage-mounted{
  background:none !important;border-radius:0 !important;overflow:visible !important;
  aspect-ratio:auto !important;width:100%;height:100%;
  container-type:size;
}
.bomb-stage-mounted svg{overflow:visible}
.bomb-stage-mounted .led2{
  font-size:6.6cqmin;letter-spacing:.14em;padding:.18em .5em;border-radius:.34em;
  border-width:.09em;line-height:1.1;
}
/* hide the built-in ground shadow by default (homepage controls its own); opt back in with .with-shadow */
.bomb-stage-mounted .gshadow{display:none}
.bomb-stage-mounted.with-shadow .gshadow{display:block}