/* ============================================================================
 * oops.css — the backend-down veil (#down-overlay in index.html): the whole
 * window while the server does not answer, on the frame's tokens; it lifts
 * by itself (app.js) the moment a ping answers.
 * ==========================================================================*/

.k-overlay.k-veil { z-index: 80; place-items: center; padding: 24px; background: var(--k-bg); }
.k-veil-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 30rem; text-align: center; }

/* a slow-breathing ring around a heartbeat that draws itself */
.k-veil-mark { width: 112px; height: 112px; margin-bottom: 4px; }
.k-veil-ring { fill: none; stroke: var(--k-line); stroke-width: 2; transform-origin: 50% 50%; animation: k-veil-breathe 3s ease-in-out infinite; }
.k-veil-pulse {
  fill: none;
  stroke: var(--k-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: k-veil-beat 3s linear infinite;
}
@keyframes k-veil-breathe { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes k-veil-beat {
  0%   { stroke-dashoffset: 150; opacity: 0; }
  10%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.k-veil-title { margin: 0; color: var(--k-ink); font-size: clamp(1.25rem, 4.5vw, 1.6rem); font-weight: 650; letter-spacing: -0.01em; }
.k-veil-sub { margin: 0; color: var(--k-ink-2); }
.k-veil-status { display: flex; align-items: baseline; justify-content: center; margin: 8px 0 0; color: var(--k-ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.k-veil-count { min-width: 2.5ch; color: var(--k-ink); text-align: left; }
.k-veil-dot { align-self: center; width: 0.55em; height: 0.55em; margin-right: 0.5em; border-radius: 50%; background: var(--k-warn); animation: k-veil-blink 1s ease-in-out infinite; }
@keyframes k-veil-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .k-veil-ring, .k-veil-pulse, .k-veil-dot { animation: none; }
  .k-veil-pulse { stroke-dashoffset: 0; opacity: 1; }
}