/* ============================================================
   shredder-stunts.css — long-wait stunt layer for The Shredder
   Companion to shredder-stunts.js (which injects every node at
   runtime — zero markup changes needed). Ship next to style.css.

   Stunts: mutterings, coffee break, log backlog, jam & whack,
   overheat + vent, blade break (whole-screen ricochet + scars).
   ============================================================ */

/* ---- Fizzwick's speech bubble ------------------------------------ */
.tl-quip {
  position: absolute; top: 8px; right: 10px; z-index: 5;
  max-width: 176px;
  font-family: var(--font-gob, "Oswald", "Arial Narrow", sans-serif);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.35;
  text-transform: uppercase;
  color: var(--ink, #38280f);
  background: linear-gradient(160deg, var(--parch, #ecd9a8), var(--parch-2, #e2c98e));
  border: 2px solid #1c130b;
  border-radius: 6px;
  padding: 7px 10px 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  transform-origin: 85% 100%;
  animation: tl-quip-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.tl-quip::after {
  /* tail pointing down at the cockpit window */
  content: ""; position: absolute; bottom: -7.5px; right: 20px;
  width: 11px; height: 11px;
  background: var(--parch-2, #e2c98e);
  border-right: 2px solid #1c130b; border-bottom: 2px solid #1c130b;
  transform: rotate(45deg);
}
.tl-quip.tl-yell { color: var(--blood, #b0322a); }
.tl-quip.tl-out { animation: tl-quip-out 0.22s ease-in both; }
@keyframes tl-quip-pop { from { transform: scale(0.4) translateY(8px); opacity: 0; } }
@keyframes tl-quip-out { to { transform: scale(0.6) translateY(6px); opacity: 0; } }

/* ---- Screen shake (applied to #app) ------------------------------ */
#app.tl-quake { animation: tl-quake 0.28s linear; }
#app.tl-quake-hard { animation: tl-quake-hard 0.42s linear; }
@keyframes tl-quake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, -1px); }
}
@keyframes tl-quake-hard {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-4px, 2px) rotate(-0.2deg); }
  40% { transform: translate(4px, -3px) rotate(0.2deg); }
  60% { transform: translate(-3px, -2px) rotate(-0.15deg); }
  80% { transform: translate(3px, 2px) rotate(0.1deg); }
}

/* ---- Blade scars (splintered wood gouges) ------------------------ */
.tl-scar {
  position: fixed; z-index: 996; height: 18px; pointer-events: none;
  transform: rotate(var(--rot, 0deg));
  animation: tl-scar-pop 0.16s ease-out both;
}
.tl-scar::before {
  /* dark gash */
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #140a03 14%, #241105 50%, #140a03 86%, transparent);
}
.tl-scar::after {
  /* splinter highlight along the top lip */
  content: ""; position: absolute; left: 9%; right: 9%; top: 5px; height: 2px;
  border-radius: 2px; opacity: 0.85;
  background: linear-gradient(90deg, transparent, #e8c98e 30%, #f4dfae 50%, #e8c98e 70%, transparent);
}
.tl-scar i {
  position: absolute; display: block; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, #1a0e05 45%, transparent);
}
.tl-scar i:first-child { left: 20%; top: 3px; width: 36%; transform: rotate(16deg); }
.tl-scar i:last-child { right: 16%; bottom: 3px; width: 32%; transform: rotate(-13deg); }
.tl-scar.tl-heal { animation: tl-scar-heal 0.9s ease-in both; }
@keyframes tl-scar-pop {
  from { transform: rotate(var(--rot, 0deg)) scaleX(0.2); opacity: 0; }
  to   { transform: rotate(var(--rot, 0deg)) scaleX(1); opacity: 1; }
}
@keyframes tl-scar-heal {
  to { transform: rotate(var(--rot, 0deg)) scaleX(1.04) scaleY(0.05); opacity: 0; }
}

/* ---- Bounce debris ------------------------------------------------ */
.tl-debris {
  position: fixed; z-index: 998; width: 7px; height: 4px; border-radius: 1px;
  pointer-events: none;
  animation: tl-debris 0.65s ease-in both;
}
@keyframes tl-debris {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to { transform: translate(var(--dx, 30px), var(--dy, 60px)) rotate(var(--dr, 160deg)); opacity: 0; }
}

/* ---- The runaway blade -------------------------------------------- */
.tl-blade-fly {
  position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}
.tl-blade-fly svg { display: block; width: 100%; height: 100%; animation: tl-spin 0.3s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }

/* Blade seizing up before it pops, and re-bolting after */
#blade-group.tl-wobble { animation: tl-wobble 1.05s linear both !important; }
@keyframes tl-wobble {
  0% { transform: rotate(0) translate(0, 0); }
  15% { transform: rotate(52deg) translate(1px, -1px); }
  30% { transform: rotate(96deg) translate(-1.5px, 1px); }
  45% { transform: rotate(128deg) translate(2px, 1.5px); }
  60% { transform: rotate(146deg) translate(-2.5px, -1.5px); }
  75% { transform: rotate(158deg) translate(3px, -2px); }
  90% { transform: rotate(164deg) translate(-3.5px, 2.5px); }
  100% { transform: rotate(166deg) translate(0, 0); }
}
#blade-group.tl-rebolt { animation: tl-rebolt 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both !important; }
@keyframes tl-rebolt { from { transform: rotate(-30deg) scale(0.9); } to { transform: rotate(0) scale(1); } }

/* Goblin reactions */
#goblin.tl-panic { animation: tl-gob-panic 0.2s linear infinite !important; }
@keyframes tl-gob-panic {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.6px, 1.2px); }
  75% { transform: translate(1.6px, -1.2px); }
}
#goblin.tl-slack { animation: tl-slack 4.2s ease-in-out 1 !important; }
@keyframes tl-slack {
  0%, 100% { transform: rotate(0) translateY(0); }
  15%, 80% { transform: rotate(-5deg) translateY(1.5px); }
}

/* ---- Jam & whack --------------------------------------------------- */
#app.stunt-jam #blade-group,
#app.stunt-jam #feed-log-grp,
#app.stunt-jam #lever,
#app.stunt-jam .smoke-puff,
#app.stunt-jam .machine-stage { animation-play-state: paused !important; }
#app.stunt-jam #goblin { animation: tl-gob-panic 0.22s linear infinite !important; }

.tl-stuck-log { animation: tl-stuck 0.5s ease-in-out infinite; transform-origin: 0 0; }
@keyframes tl-stuck { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }

.tl-wrench-in { animation: tl-fade-in 0.3s ease-out both; }
.tl-out2 { animation: tl-fade-out 0.3s ease-in both; }
@keyframes tl-fade-in { from { opacity: 0; } }
@keyframes tl-fade-out { to { opacity: 0; } }

.tl-swing-g { transform-origin: 0 0; }
.tl-swing-g.tl-swing { animation: tl-whack 0.55s cubic-bezier(0.5, -0.3, 0.5, 1.3) 3; }
@keyframes tl-whack {
  0% { transform: rotate(8deg); }
  45% { transform: rotate(-38deg); }
  62% { transform: rotate(14deg); }
  100% { transform: rotate(8deg); }
}

.tl-star { transform-origin: 0 0; animation: tl-star 0.32s ease-out both; }
@keyframes tl-star {
  0% { transform: scale(0.2); opacity: 1; }
  70% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Blade spools back up gradually after a stall clears */
#blade-group.tl-spinup { animation: tl-spinup 1.6s cubic-bezier(0.55, 0, 0.9, 0.45) both !important; }
@keyframes tl-spinup { from { transform: rotate(0); } to { transform: rotate(1080deg); } }

/* ---- Gauge tap ------------------------------------------------------- */
.tl-tap-g { transform-origin: 0 0; }
.tl-tap-g.tl-tap { animation: tl-tap 0.5s ease-in-out 3; }
@keyframes tl-tap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }

/* ---- Loose bolt ------------------------------------------------------- */
.tl-bolt { transform-origin: 0 0; animation: tl-bolt 1.1s cubic-bezier(0.3, 0, 0.7, 1) both; }
@keyframes tl-bolt {
  0% { transform: translate(0, 0) rotate(0); }
  22% { transform: translate(14px, -14px) rotate(140deg); }
  45% { transform: translate(26px, 18px) rotate(300deg); }
  62% { transform: translate(34px, 8px) rotate(420deg); }
  76% { transform: translate(40px, 18px) rotate(520deg); }
  88% { transform: translate(43px, 15px) rotate(580deg); }
  100% { transform: translate(45px, 18px) rotate(600deg); }
}
.tl-bolt-back { transform-origin: 0 0; animation: tl-bolt-back 0.6s cubic-bezier(0.4, -0.2, 0.5, 1) both; }
@keyframes tl-bolt-back {
  0% { transform: translate(45px, 18px) rotate(600deg); }
  100% { transform: translate(0, 0) rotate(1320deg); }
}

/* ---- Oil leak ---------------------------------------------------------- */
.tl-puddle { transform-origin: 0 0; animation: tl-puddle 2.4s ease-out both; }
@keyframes tl-puddle { from { transform: scale(0.15, 0.3); } to { transform: scale(1, 1); } }

/* the leak trickles down over the activity log, then slowly disappears */
.tl-oil-run {
  position: absolute; width: 68px; height: 160px; z-index: 2;
  pointer-events: none; overflow: visible;
  transition: opacity 3.8s ease;
}
.tl-oil-run i {
  position: absolute; top: 0; display: block; height: 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, rgba(20, 13, 4, 0.95), #241105 70%, #140d04);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
  opacity: 0.88;
  transition: height 2.6s cubic-bezier(0.4, 0, 0.8, 0.4);
}
.tl-oil-run i::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 24px; height: 10px; margin-left: -12px; border-radius: 50%;
  background: #140d04; opacity: 0.9;
}
.tl-oil-run.tl-oil-fade { opacity: 0; }

/* ---- Spring pops (whole-screen ricochet) --------------------------------- */
.tl-spring-fly {
  position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none;
  width: 26px; height: 38px; will-change: transform;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45));
}
.tl-spring-fly svg { display: block; width: 100%; height: 100%; }

/* ---- Machine hiccups ---------------------------------------------------- */
#shredder-svg.tl-hiccups { animation: tl-hic 0.8s ease-in-out 4; }
@keyframes tl-hic {
  0%, 100% { transform: translateY(0); }
  12% { transform: translateY(-4px); }
  24% { transform: translateY(0); }
}
.tl-sign-quick { animation-duration: 2s; }

/* ---- Rejected log --------------------------------------------------------- */
.tl-reject { transform-origin: 0 0; animation: tl-reject-out 1.1s cubic-bezier(0.3, 0, 0.6, 1) both; }
@keyframes tl-reject-out {
  0% { transform: translate(332px, 166px) rotate(0); }
  40% { transform: translate(352px, 148px) rotate(-40deg); }
  75% { transform: translate(362px, 190px) rotate(-70deg); }
  88% { transform: translate(358px, 184px) rotate(-76deg); }
  100% { transform: translate(360px, 190px) rotate(-80deg); }
}
.tl-reject.tl-reject-walk { animation: tl-reject-walk 3.2s ease-in-out both; }
@keyframes tl-reject-walk {
  0% { transform: translate(360px, 190px) rotate(-80deg); opacity: 1; }
  12% { transform: translate(340px, 183px) rotate(-60deg); }
  24% { transform: translate(320px, 190px) rotate(-45deg); }
  36% { transform: translate(300px, 183px) rotate(-30deg); }
  48% { transform: translate(276px, 190px) rotate(-16deg); }
  60% { transform: translate(252px, 184px) rotate(-6deg); }
  70% { transform: translate(228px, 190px) rotate(0deg); }
  82% { transform: translate(206px, 110px) rotate(18deg); opacity: 1; }
  92% { transform: translate(193px, 32px) rotate(6deg) scale(0.85); opacity: 1; }
  100% { transform: translate(192px, 40px) rotate(0deg) scale(0.4); opacity: 0; }
}

/* ---- Brownout + hand-crank -------------------------------------------------- */
.tl-shade {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgba(4, 2, 0, 0.62);
  opacity: 0; transition: opacity 0.5s ease;
}
.tl-shade.tl-shade-on { opacity: 1; }
.tl-shade.tl-shade-on.tl-shade-half { opacity: 0.45; }
.tl-led-flicker { animation: tl-led-flick 0.22s steps(2) infinite; }
@keyframes tl-led-flick { 50% { opacity: 0.15; } }
#app.stunt-brownout #blade-group { animation: blade-spin 1.4s linear infinite !important; }
#app.stunt-brownout .smoke-puff { opacity: 0.15 !important; }
.tl-crank { transform-origin: 0 0; }
.tl-crank.tl-cranking { animation: tl-cranking 1.4s cubic-bezier(0.5, 0, 0.8, 0.5) 2; }
@keyframes tl-cranking { to { transform: rotate(720deg); } }

/* ---- Nap (idle) --------------------------------------------------------------- */
#goblin.tl-napping { animation: tl-napping 3.2s ease-in-out infinite !important; }
@keyframes tl-napping {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(2.5px) rotate(-4deg); }
}
#app.stunt-nap #blade-group { animation: blade-spin 7s linear infinite !important; }
#app.stunt-nap .status-led { opacity: 0.35; }
.tl-zzz { animation: tl-zzz 2.4s ease-out infinite; opacity: 0; }
@keyframes tl-zzz {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translate(10px, -26px); opacity: 0; }
}

/* ---- Blade sharpening (idle) ----------------------------------------------------- */
.tl-file-g { transform-origin: 0 0; }
.tl-file-g.tl-filing { animation: tl-filing 0.6s ease-in-out 7; }
@keyframes tl-filing {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-7px, -3px) rotate(-4deg); }
}

/* ---- Overheat + vent ------------------------------------------------ */
#app.stunt-hot #lever { animation: tl-lever-yank 0.45s ease-in-out infinite !important; }
@keyframes tl-lever-yank { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(42deg); } }

.tl-heatglow { animation: tl-heat 1s ease-in-out infinite; }
.tl-rivet-hot { animation: tl-heat 1s ease-in-out infinite; }
@keyframes tl-heat { 0%, 100% { opacity: 0.10; } 50% { opacity: 0.34; } }

.tl-gauge.tl-panic { animation: tl-gauge-shake 0.12s linear infinite; }
@keyframes tl-gauge-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(0.7px, -0.5px); }
  75% { transform: translate(-0.7px, 0.5px); }
}
.tl-needle { transition: transform 0.5s cubic-bezier(0.3, 0, 0.2, 1); }

.tl-steam { transform-origin: 0 0; animation: tl-steam-jet 0.6s ease-out both; }
@keyframes tl-steam-jet {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0.9; }
  100% { transform: translate(6px, -36px) scale(1.8); opacity: 0; }
}

/* ---- Coffee break / pocket watch ------------------------------------ */
.tl-prop { transform-origin: 0 0; animation: tl-prop 4.2s ease-in-out both; }
@keyframes tl-prop {
  0% { transform: translateY(14px); opacity: 0; }
  8% { transform: translateY(0); opacity: 1; }
  18% { transform: translateY(0) rotate(0deg); }
  28% { transform: translateY(-3px) rotate(-16deg); }
  38% { transform: translateY(0) rotate(0deg); }
  58% { transform: translateY(-3px) rotate(-16deg); }
  70% { transform: translateY(0) rotate(0deg); }
  90% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}
.tl-wisp { transform-origin: 0 0; animation: tl-wisp 1.3s ease-out infinite; }
@keyframes tl-wisp {
  0% { transform: translateY(0) scale(0.7); opacity: 0.55; }
  100% { transform: translateY(-9px) scale(1.3); opacity: 0; }
}

/* ---- Log backlog ------------------------------------------------------ */
.tl-qlog { animation: tl-qlog-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.1) both; }
@keyframes tl-qlog-in { from { transform: translateX(-90px); } }
.tl-qlog-bob { transform-origin: 0 0; animation: tl-qlog-bob 1.7s ease-in-out infinite; }
@keyframes tl-qlog-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2.5px) rotate(-2deg); }
}
.tl-eat {
  transform-origin: 0 0;
  animation: tl-qlog-eat 0.6s cubic-bezier(0.5, -0.2, 0.8, 0.6) both;
}
@keyframes tl-qlog-eat {
  60% { opacity: 1; }
  100% { transform: translate(var(--eatx, 60px), 26px) rotate(38deg) scale(0.5); opacity: 0; }
}

/* ---- Overheat smoke seep + goblin cough --------------------------- */
#goblin.tl-cough { animation: tl-cough 0.95s linear !important; }
@keyframes tl-cough {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-1px, 2px); }
  25% { transform: translate(0, 0); }
  40% { transform: translate(-1.5px, 2.6px); }
  52% { transform: translate(0, 0); }
  70% { transform: translate(-1px, 2px); }
  82% { transform: translate(0, 0); }
}

/* ---- Ambient fidgets (random, any time) ---------------------------- */
/* eyelids injected over Fizzwick's eyes; shown for a blink */
.tl-lid { opacity: 0; }
.tl-lid.tl-shut { opacity: 1; }

#goblin path.tl-ear { animation: tl-ear 0.5s ease-in-out; }
@keyframes tl-ear {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-9deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-3deg); }
}

#lever.tl-flick { animation: tl-flick 0.55s ease-in-out !important; }
@keyframes tl-flick {
  0%, 100% { transform: rotate(0); }
  40% { transform: rotate(16deg); }
  70% { transform: rotate(-4deg); }
}

.tl-ring { transform-origin: 0 0; animation: tl-ring 1.6s ease-out both; }
@keyframes tl-ring {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0.8; }
  100% { transform: translate(4px, -30px) scale(2.2); opacity: 0; }
}

/* ---- Answer hand-off: rolled parchment out the chute ---------------- */
.tl-scroll {
  position: fixed; left: -19px; top: -9px; z-index: 998; pointer-events: none;
  width: 38px; height: 18px;
  background: linear-gradient(180deg, #f2e3b6, #e2c98e 60%, #cfae6e);
  border: 2px solid #38280f; border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  will-change: transform;
}
.tl-scroll::before, .tl-scroll::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; width: 5px;
  background: #b08a4a; border: 2px solid #38280f; border-radius: 3px;
}
.tl-scroll::before { left: -4px; }
.tl-scroll::after { right: -4px; }
.tl-scroll i {
  position: absolute; left: 50%; top: -2px; bottom: -2px; width: 6px;
  margin-left: -3px; background: #b0322a; opacity: 0.85;
}
.tl-scroll.tl-scroll-pop { animation: tl-scroll-pop 0.35s ease-out both; }
@keyframes tl-scroll-pop { to { opacity: 0; } }

/* ---- "TAVERN'S PACKED" sign (rate-limit theater) --------------------- */
.tl-sign { transform-origin: 0 0; animation: tl-sign 5s ease-in-out both; }
@keyframes tl-sign {
  0% { transform: translateY(28px); opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  30% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(0) rotate(-3deg); }
  70% { transform: translateY(0) rotate(2deg); }
  90% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(28px); opacity: 0; }
}

/* ---- Mobile mini status strip (the rail is hidden ≤768px) ------------ */
#tl-mini {
  display: none; align-items: center; gap: 8px;
  margin: 0 14px 8px; padding: 7px 12px; border-radius: 4px;
  background: linear-gradient(180deg, #321f11, #22140a);
  border: 1.5px solid #11100e; border-top: 2px solid #f2c33d;
  font-family: var(--font-gob, "Oswald", "Arial Narrow", sans-serif);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green, #93cf45);
}
#tl-mini .tl-mini-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 768px) { #tl-mini { display: flex; } }