/* ---------- Fight boot (bootfx.mjs): the screen powers down and boots into a fight, the virus first ----------
   The one effect on the panels themselves (approved by the designer), for two seconds before the fight's first order;
   any key or click ends it. The panels' own flicker runs in bootfx.mjs; these are the layers it adds. */
.bootfx-black { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #050302; opacity: 0; }
.bootfx { position: absolute; inset: 0; z-index: 45; pointer-events: none; border-radius: inherit; overflow: hidden; }
.bootfx > div { position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
.bootfx-flare { box-shadow: inset 0 0 0 3px rgba(255, 91, 61, 0.9), inset 0 0 80px 10px rgba(255, 91, 61, 0.4); }
.bootfx-hold { position: absolute; z-index: 6; pointer-events: none; }
.bootfx-lock { position: absolute; pointer-events: none; }
.bootfx-lock i { position: absolute; width: 16px; height: 16px; border: 2px solid var(--hot); filter: drop-shadow(0 0 4px var(--hot)); }
.bootfx-lock i:nth-child(1) { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.bootfx-lock i:nth-child(2) { right: -6px; top: -6px; border-left: 0; border-bottom: 0; }
.bootfx-lock i:nth-child(3) { left: -6px; bottom: -6px; border-right: 0; border-top: 0; }
.bootfx-lock i:nth-child(4) { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.bootfx-noise { position: absolute; inset: 8px; z-index: 2; pointer-events: none; overflow: hidden; white-space: pre; font: 13px/15px var(--mono); color: var(--hot); text-shadow: 0 0 6px rgba(255, 91, 61, 0.8); opacity: 0; }
.bootfx-console { position: absolute; z-index: 4; pointer-events: none; overflow: hidden; padding: 18px 24px; font: 600 15px/24px var(--mono); color: var(--amber); text-shadow: 0 0 8px var(--sfx-glow, rgba(244, 180, 55, 0.55)); opacity: 0; }
.bootfx-console div { white-space: pre; overflow: hidden; text-overflow: clip; opacity: 0; }
.bootfx-console .hot { color: var(--hot); text-shadow: 0 0 8px rgba(255, 91, 61, 0.7); }
@media (min-width: 1100px) and (min-height: 720px) { body.cased .bootfx-black { position: absolute; border-radius: inherit; } }
/* Leaving a won fight (Channel cut): the teal line the page folds into, and the ring on your room. */
.bootfx > .bootfx-tline { inset: auto; height: 2px; background: #bff3ec; box-shadow: 0 0 12px 3px var(--you), 0 0 40px 8px rgba(127, 209, 199, 0.45); border-radius: 0; }
.bootfx > .bootfx-ring { inset: auto; border: 2px solid var(--you); border-radius: 6px; box-shadow: 0 0 14px 2px rgba(127, 209, 199, 0.7), inset 0 0 14px rgba(127, 209, 199, 0.4); }
/* Connecting to a server (Carrier): the line from HOME and its head, the ping where it lands, the circle's edge; all
   inside the page's own box. The glow and the readout below are the hang-up's. */
.bootfx-lock.you i { border-color: var(--you); filter: drop-shadow(0 0 5px var(--you)); }
.bootfx > .bootfx-page { inset: auto; opacity: 1; border-radius: 0; overflow: hidden; }
.bootfx-page > div { position: absolute; box-sizing: border-box; opacity: 0; }
.bootfx-wire { height: 2px; background: var(--you); box-shadow: 0 0 8px var(--you); transform-origin: 0 50%; }
.bootfx-dot { width: 8px; height: 8px; border-radius: 50%; background: #d9fffa; box-shadow: 0 0 12px 3px var(--you); }
.bootfx-ping { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--you); box-shadow: 0 0 12px var(--you); }
.bootfx-iris { border-radius: 50%; border: 2px solid var(--you); box-shadow: 0 0 14px rgba(127, 209, 199, 0.7), inset 0 0 14px rgba(127, 209, 199, 0.25); }
.bootfx-glow { box-shadow: inset 0 0 0 3px rgba(127, 209, 199, 0.85), inset 0 0 80px 10px rgba(127, 209, 199, 0.3); }
.bootfx > .bootfx-dial { inset: 38% 0 auto; display: flex; flex-direction: column; align-items: center; opacity: 1; border-radius: 0; overflow: visible; }
.bootfx-dial-name { display: grid; max-width: 92%; font: 700 clamp(22px, 4vw, 44px)/1.2 var(--mono); letter-spacing: .14em; color: var(--amber); text-shadow: 0 0 18px var(--sfx-glow, rgba(244, 180, 55, 0.55)); white-space: nowrap; }
.bootfx-dial-name > div { grid-area: 1 / 1; opacity: 0; }
.bootfx-dial-lines { margin-top: 22px; max-width: 92%; overflow: hidden; font: 600 15px/24px var(--mono); color: var(--amber); white-space: pre; }
.bootfx-dial-lines div { opacity: 0; }
.bootfx-dial-lines .you { color: var(--you); text-shadow: 0 0 10px var(--you); }