/* Terminal games */
.term-game { margin: 4px 0; font: inherit; line-height: 1.15; color: #e8e8e8; }

/* `explode` */
.boom-stage { position: fixed; inset: 0; z-index: 40000; pointer-events: none; overflow: hidden; }
.boom-bar {
  position: absolute; left: 0; right: 0; height: 11vh; background: #000; z-index: 5;
  transform: scaleY(0); transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.boom-bar.top { top: 0; transform-origin: top; }
.boom-bar.bottom { bottom: 0; transform-origin: bottom; }
.boom-stage.cine .boom-bar { transform: none; }
.boom-tag {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 20px; text-align: center;
  color: #f3dfb0; font: 600 clamp(12px, 1.9vw, 22px)/1.2 "Trajan Pro", Cinzel, Georgia, serif; letter-spacing: .28em;
}
.boom-count {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); opacity: 0; z-index: 4;
  font: 900 clamp(120px, 24vw, 320px)/1 Impact, "Arial Black", sans-serif; color: #ff2a1a;
  text-shadow: 0 0 30px #f00, 0 0 90px #f40;
}
.boom-count.tick { animation: boom-tick .68s ease-out forwards; }
@keyframes boom-tick {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
}
.boom-flash { position: absolute; inset: 0; background: #fff6dc; z-index: 3; }
.boom-fire {
  position: absolute; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle, #fffbe2 0, #ffe066 16%, #ff8a00 38%, #d81c00 58%, rgba(90,0,0,.6) 66%, rgba(40,0,0,0) 72%);
  filter: blur(5px); transform: scale(0);
}
.boom-ring {
  position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; z-index: 2;
  border: 5px solid rgba(255, 238, 200, .9); box-shadow: 0 0 30px rgba(255, 190, 110, .9), inset 0 0 20px rgba(255, 190, 110, .6);
}
.boom-spark {
  position: absolute; width: 10px; height: 3px; margin: -1px 0 0 -5px; border-radius: 2px; z-index: 3;
  background: linear-gradient(90deg, #fff7c4, #ff9a1a); box-shadow: 0 0 8px #ffb84a;
}
.boom-chunk {
  position: absolute; width: 14px; height: 11px; margin: -5px 0 0 -7px; z-index: 3;
  background: linear-gradient(#5a5a5a, #222); clip-path: polygon(0 20%, 60% 0, 100% 40%, 80% 100%, 20% 90%);
}
.boom-smoke {
  position: absolute; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(60, 52, 48, .9), rgba(30, 26, 24, 0) 70%); filter: blur(10px);
}
.boom-walker {
  position: absolute; left: -110px; bottom: calc(11vh - 4px); width: 72px; height: 144px; z-index: 4;
  filter: drop-shadow(0 0 14px rgba(255, 120, 20, .85));
}
.boom-walker svg { width: 100%; height: 100%; overflow: visible; }
.boom-walker .limb { transform-box: fill-box; transform-origin: 50% 6%; animation: boom-stride .55s ease-in-out infinite alternate; }
.boom-walker .l2, .boom-walker .a1 { animation-direction: alternate-reverse; }
.boom-walker .arm { animation-name: boom-swing; }
@keyframes boom-stride { from { transform: rotate(20deg); } to { transform: rotate(-20deg); } }
@keyframes boom-swing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

/* The hacker terminal and the figure typing at it */
.boom-term {
  left: 50%; top: 50%; width: min(660px, 84vw); height: min(46vh, 380px); min-height: 0; z-index: 3;
  opacity: 0; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.7), 0 0 80px rgba(255,120,30,.35);
}
.boom-code {
  flex: 1; min-height: 0; margin: 0; padding: 10px 12px; overflow: hidden; white-space: pre-wrap; word-break: break-all;
  background: #030803; color: #39ff6a; font: 12px/1.45 var(--mono);
  text-shadow: 0 0 6px rgba(57, 255, 106, .7);
  background-image: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.28) 2px 3px);
}
.boom-walker.typing .limb { animation: none; }
.boom-walker.typing .a1 { animation: boom-type-l .11s ease-in-out infinite alternate; }
.boom-walker.typing .a2 { animation: boom-type-r .13s ease-in-out infinite alternate; }
@keyframes boom-type-l { from { transform: rotate(30deg) scaleY(.7); } to { transform: rotate(24deg) scaleY(.64); } }
@keyframes boom-type-r { from { transform: rotate(-30deg) scaleY(.7); } to { transform: rotate(-24deg) scaleY(.64); } }