/* =========================================================================
   Theme tokens — structure from closerouter.dev, repaletted to red
   ========================================================================= */

:root, .dark {
  --palette-primary: #ffdada;     /* light red-tinted white (text) */
  --palette-secondary: #b5676f;   /* muted red (grid / log / captions) */
  --tertiary: #ff1f3d;            /* vivid red accent */
  --neutral: #000000;
  --surface: #0d0000;

  --on-primary: #fff5f5;

  /* canvas tuning — pushes the dither palette deep into red */
  --theme-canvas-opacity: .95;
  --theme-canvas-brightness: .9;
  --theme-canvas-saturation: 1.15;
  --theme-canvas-base-mix: .18;
  --theme-canvas-accent-low-mix: .5;
  --theme-canvas-accent-mid-mix: .8;
  --theme-canvas-foreground-mix: .75;
}

:root, .dark {
  --background: var(--surface);
  --foreground: var(--palette-primary);
  --card: var(--neutral);
  --popover: var(--neutral);
  --primary: var(--tertiary);
  --primary-foreground: var(--on-primary);
  --muted-foreground: var(--palette-secondary);
  --border: var(--palette-primary);
}
@supports (color: color-mix(in lab, red, red)) {
  :root, .dark {
    --border: color-mix(in srgb, var(--palette-primary) 14%, transparent);
    --muted: color-mix(in srgb, var(--palette-primary) 8%, var(--neutral));
  }
}

/* =========================================================================
   Base
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dashboard-theme {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--background);
}

/* =========================================================================
   Background layers
   ========================================================================= */

.bg-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--background);
}

.bg-solid {
  position: absolute;
  inset: 0;
  background: var(--background);
}

.bg-grid {
  position: absolute;
  inset: 0;
  opacity: .08;
  background-image:
    linear-gradient(color-mix(in srgb, var(--muted-foreground) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--muted-foreground) 14%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
}

.bg-diagonal {
  position: absolute;
  inset: 0;
  opacity: .032;
  background-image: repeating-linear-gradient(
    45deg,
    var(--muted-foreground) 0,
    var(--muted-foreground) 1px,
    transparent 1px,
    transparent 24px
  );
}

canvas#pixel-dither-background {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  height: 100vh;
  width: 100vw;
  transform: scale(1.04) translateZ(0);
  opacity: var(--theme-canvas-opacity);
  filter: blur(5px) brightness(var(--theme-canvas-brightness)) saturate(var(--theme-canvas-saturation));
}

/* =========================================================================
   Redirect content
   ========================================================================= */

.content {
  position: relative;
  z-index: 10;
  padding: 2rem 1.25rem;
  text-align: center;
}

.redirect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  margin: 0;
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: #ff4d5e;
  text-shadow:
    0 0 12px rgba(255, 31, 61, .55),
    0 0 42px rgba(255, 31, 61, .3);
}

/* plain-text countdown digit — fixed tabular width so it never shifts */
.redirect .sec {
  position: relative;
  display: inline-block;
  min-width: 1.05em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #ff1f3d;
  text-shadow:
    0 0 14px rgba(255, 31, 61, .85),
    0 0 46px rgba(255, 31, 61, .5);
}

/* the wipe rectangle, sized exactly to the digit box */
.redirect .wipe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.dots {
  animation: dots-fade 1s ease-in-out infinite;
}

@keyframes dots-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .dots { animation: none !important; }
}