/* HOPPA Boss War — presentation: glitching in / out, the war clock, the alert banner, the HUD's glitch jitter
   (src/social/warBlind.js · warClock.js · warGlitch.js). Calm dark glass; the logo's cyan / magenta the highlights [ui-colors]; crimson
   only for the danger states (the clock's last minute, the alerts). */

/* ------------------------------------------------------------------ glitching in / out (warBlind.js): the old world's
   last frame held over the 3D view (under the HUD), broken up on its own 2D canvas */
.pz-blind { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; display: block; }

/* ------------------------------------------------------------------ the war clock (right side) */
.pz-warclock { z-index: 16; }
.pz-warclock__dial { --d: calc(var(--u) * 6.4); --ring: var(--hp-cyan, #2de2e6);   /* [ui-colors] calm: the primary cyan */
  position: absolute; right: calc(var(--u) * 2.2); top: calc(var(--u) * 9.6);
  width: var(--d); height: var(--d); display: grid; place-items: center; opacity: 0; scale: .8;
  transition: width .5s cubic-bezier(.34, 1.56, .64, 1), height .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s, scale .4s; }
.pz-warclock.is-on .pz-warclock__dial { opacity: .9; scale: 1; }
.pz-warclock__dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.pz-warclock__face { fill: rgba(16, 14, 30, .62); stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.pz-warclock__ticks line { stroke: rgba(255, 255, 255, .28); stroke-width: 1.4; stroke-linecap: round; }
.pz-warclock__track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 5; }
.pz-warclock__ring { fill: none; stroke: var(--ring); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .4s;
  stroke-width: 3.5; filter: drop-shadow(2.5px 2.5px 0 var(--ring2, #ff2d8a)); }   /* [ui-colors] the logo's cut: a cyan ring with a hard magenta twin offset under it (no glow) */
.pz-warclock__num { position: relative; font: 400 calc(var(--d) * .27) / 1 'Titan One', 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.pz-warclock.is-soon .pz-warclock__dial { --d: calc(var(--u) * 8.2); }
.pz-warclock.is-soon.is-on .pz-warclock__dial { opacity: 1; }
.pz-warclock.is-last .pz-warclock__dial { --d: calc(var(--u) * 10.4); --ring: #ff3b52; --ring2: rgba(255, 59, 82, 0); }   /* [ui-colors] (the danger red alone) */
.pz-warclock.is-last.is-on .pz-warclock__dial { opacity: 1; animation: pz-clock-pulse 1s ease-in-out infinite; }
.pz-warclock.is-last .pz-warclock__ring { filter: drop-shadow(0 0 5px rgba(255, 59, 82, .8)); }
.pz-warclock.is-last .pz-warclock__face { fill: rgba(40, 10, 20, .7); stroke: rgba(255, 59, 82, .45); }
.pz-warclock.is-final .pz-warclock__num { color: #fff; }
.pz-warclock.is-final.is-beat .pz-warclock__num { animation: pz-clock-beat .5s ease-out; }
@keyframes pz-clock-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 59, 82, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(255, 59, 82, .7)); } }
@keyframes pz-clock-beat { 0% { scale: 1; } 18% { scale: 1.22; } 34% { scale: 1.04; } 50% { scale: 1.12; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .pz-warclock.is-last.is-on .pz-warclock__dial, .pz-warclock.is-final.is-beat .pz-warclock__num { animation: none; } }
/* one clock: the old top-centre time pill steps aside while the dial is up; the watch list moves under the dial */
.pz-war.has-clock .pz-war__time { display: none; }
.pz-war.has-clock .pz-war__list { top: calc(var(--u) * 22.5); max-height: calc(100dvh - var(--u) * 34); }

/* ------------------------------------------------------------------ the alert banner (1 MINUTE LEFT! · 10 SECONDS!) */
.pz-warclock-banner { z-index: 30; display: grid; place-items: start center; padding-top: calc(var(--u) * 17); }
.pz-warclock-banner__band { position: relative; padding: calc(var(--u) * .9) calc(var(--u) * 5); background: linear-gradient(90deg, rgba(40, 8, 18, 0), rgba(40, 8, 18, .82) 18%, rgba(40, 8, 18, .82) 82%, rgba(40, 8, 18, 0));
  animation: pz-wcb 2.4s cubic-bezier(.2, .8, .2, 1) both; }
.pz-warclock-banner__band::before, .pz-warclock-banner__band::after { content: ''; position: absolute; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, rgba(255, 59, 82, 0), #ff3b52 30%, #ff3b52 70%, rgba(255, 59, 82, 0)); }
.pz-warclock-banner__band::before { top: 0; } .pz-warclock-banner__band::after { bottom: 0; }
.pz-warclock-banner b { display: block; font: 400 calc(var(--u) * 3.8) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .08em; color: #fff; text-shadow: 0 0 22px rgba(255, 59, 82, .75), 0 2px 0 rgba(0, 0, 0, .4); white-space: nowrap; }
.pz-warclock-banner.is-ten b { font-size: calc(var(--u) * 4.4); }
@keyframes pz-wcb { 0% { opacity: 0; scale: 1.5; } 10% { opacity: 1; scale: .96; } 16% { scale: 1.02; } 22% { scale: 1; } 82% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .pz-warclock-banner__band { animation: pz-wcb-rm 2.4s linear both; } @keyframes pz-wcb-rm { 0%, 100% { opacity: 0; } 8%, 85% { opacity: 1; } } }

/* ------------------------------------------------------------------ the glitch: the war HUD only jitters 2 px */
.pz-war.is-glitch { animation: pz-war-jit .12s steps(2) infinite; }
@keyframes pz-war-jit { 0% { translate: 0 0; } 50% { translate: 2px -1px; } 100% { translate: -1px 1px; } }
@media (prefers-reduced-motion: reduce) { .pz-war.is-glitch { animation: none; } }