/* ── LOCAL FONTS (ZERO EXTERNAL CDN REQUESTS) ─────────────────── */
@font-face {
  font-family: 'Bebas Neue';
  src: url('./fonts/bebas-neue.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('./fonts/space-mono.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./fonts/plus-jakarta-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('./fonts/plus-jakarta-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── GSMCS OFFICIAL BUSINESS COLOR SYSTEM ─────────────────── */
  --color-canvas-base: #040811;
  --color-canvas-deep: #070E1A;
  --color-primary-navy: #0C2240;
  --color-footer-navy: #0C1E3D;
  --color-accent-blue: #39A7FF;
  --color-accent-light: #E0F4FF;
  --color-sky-light: #87C4FF;
  --color-sapphire: #1954EC;
  --color-warm-cream: #FFEED9;
  --color-pure-white: #FFFFFF;

  /* Glows */
  --glow-accent: rgba(57, 167, 255, 0.45);
  --glow-sapphire: rgba(25, 84, 236, 0.35);

  /* Fonts */
  --font-display: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at center, #0B1E38 0%, #060E1C 55%, var(--color-canvas-base) 100%);
  color: var(--color-warm-cream);
  font-family: var(--font-sans);
  position: fixed;
  inset: 0;
  user-select: none;
}

/* Container */
.broadcast-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Subtle Vignette */
.noise-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 25%, rgba(4, 8, 17, 0.88) 100%);
  z-index: 5;
}

/* ── EXACTLY 6 CONCENTRIC FULL-SCREEN RINGS (UNIFIED WITH BADGE ORBITS) ── */
.radar-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.radar-ring.solid {
  border-style: solid;
}

.radar-ring.dashed {
  border-style: dashed;
}

/* 1.5x Increased Rotational Speeds (Desktop Base) */
.ring-1 {
  width: 32vmax;
  height: 32vmax;
  min-width: 380px;
  min-height: 380px;
  border-width: 1.5px;
  border-color: rgba(57, 167, 255, 0.60);
  animation: spin-cw 38s linear infinite;
}

.ring-2 {
  width: 58vmax;
  height: 58vmax;
  min-width: 660px;
  min-height: 660px;
  border-width: 1.8px;
  border-color: rgba(57, 167, 255, 0.48);
  animation: spin-ccw 52s linear infinite;
}

.ring-3 {
  width: 86vmax;
  height: 86vmax;
  min-width: 980px;
  min-height: 980px;
  border-width: 1.5px;
  border-color: rgba(57, 167, 255, 0.38);
  animation: spin-cw 70s linear infinite;
}

.ring-4 {
  width: 118vmax;
  height: 118vmax;
  min-width: 1320px;
  min-height: 1320px;
  border-width: 2px;
  border-color: rgba(57, 167, 255, 0.30);
  animation: spin-ccw 92s linear infinite;
}

.ring-5 {
  width: 154vmax;
  height: 154vmax;
  min-width: 1720px;
  min-height: 1720px;
  border-width: 1.6px;
  border-color: rgba(57, 167, 255, 0.22);
  animation: spin-cw 116s linear infinite;
}

.ring-6 {
  width: 194vmax;
  height: 194vmax;
  min-width: 2150px;
  min-height: 2150px;
  border-width: 2.2px;
  border-color: rgba(57, 167, 255, 0.16);
  animation: spin-ccw 144s linear infinite;
}

@keyframes spin-cw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-ccw {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* ── ORBIT ARM (POSITIONS BADGES MATHEMATICALLY ON THE RING LINE) ── */
.orbit-arm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}

/* Badge holder centered directly on the top border of the ring */
.badge-holder {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* ── REFINED BADGE SIZE (CRISP, ACCENT SQUARES SITTING ON THE LINE) ── */
.glyph-badge {
  width: clamp(22px, 1.8vw, 28px);
  height: clamp(22px, 1.8vw, 28px);
  background: linear-gradient(135deg, var(--color-accent-blue) 0%, var(--color-sapphire) 100%);
  border: 1px solid rgba(224, 244, 255, 0.45);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 14px var(--glow-accent), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  cursor: default;
}

.glyph-badge:hover {
  transform: scale(1.3);
  box-shadow: 0 0 22px rgba(57, 167, 255, 0.95), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.glyph-badge svg {
  display: block;
  width: clamp(12px, 1vw, 15px);
  height: clamp(12px, 1vw, 15px);
  fill: var(--color-pure-white);
  stroke: none;
}

.glyph-badge.stroke-svg svg {
  fill: none;
  stroke: var(--color-pure-white);
}

/* ── COUNTER-ROTATIONS (KEEP ICONS UPRIGHT AT 1.5x MATCHED SPEED) ── */
.ring-1 .counter-spin { animation: counter-spin-cw 38s linear infinite; }
.ring-2 .counter-spin { animation: counter-spin-ccw 52s linear infinite; }
.ring-3 .counter-spin { animation: counter-spin-cw 70s linear infinite; }
.ring-4 .counter-spin { animation: counter-spin-ccw 92s linear infinite; }
.ring-5 .counter-spin { animation: counter-spin-cw 116s linear infinite; }
.ring-6 .counter-spin { animation: counter-spin-ccw 144s linear infinite; }

@keyframes counter-spin-cw {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes counter-spin-ccw {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── CENTRAL HUB (ENLARGED MONUMENTAL TYPOGRAPHY) ──────────── */
.content-hub {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1200px;
  width: 96%;
  padding: 0 8px;
  gap: clamp(14px, 2.6vh, 34px);
}

/* Enlarged Brand Siteline */
.brand-siteline {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.6vw, 54px);
  color: var(--color-accent-light);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  text-shadow: 0 0 24px var(--glow-accent);
}

.brand-siteline::before,
.brand-siteline::after {
  content: "";
  display: inline-block;
  width: clamp(20px, 5vw, 64px);
  height: clamp(2px, 0.4vw, 4px);
  background: linear-gradient(90deg, transparent, var(--color-accent-blue));
}

.brand-siteline::after {
  background: linear-gradient(90deg, var(--color-accent-blue), transparent);
}

/* Enlarged Display Headline */
.poster-headline {
  font-family: var(--font-display);
  color: var(--color-warm-cream);
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.95), 0 0 60px rgba(12, 34, 64, 0.6);
}

.poster-headline .line-1 {
  font-size: clamp(65px, 17vw, 230px);
}

.poster-headline .line-2 {
  font-size: clamp(58px, 15.5vw, 210px);
}

.poster-headline .line-3 {
  font-size: clamp(55px, 14.5vw, 195px);
}

/* ── DIRECT CANVAS COUNTDOWN (SINGLE LINE, ZERO WRAPPING) ── */
.mission-clock-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.4vh, 16px);
  margin-top: clamp(6px, 1.4vh, 18px);
  width: 100%;
}

/* Strictly non-wrapping single line */
.mission-clock {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

/* Unit and number sitting horizontally side-by-side */
.clock-segment {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(3px, 0.6vw, 8px);
  flex-shrink: 0;
}

.clock-num {
  font-family: var(--font-mono);
  font-size: clamp(22px, 4.5vw, 64px);
  font-weight: 700;
  color: var(--color-warm-cream);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(255, 238, 217, 0.45);
}

.clock-label {
  font-family: var(--font-sans);
  font-size: clamp(9px, 1.3vw, 18px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-accent-blue);
  text-transform: uppercase;
  text-shadow: 0 0 14px var(--glow-accent);
}

.clock-divider {
  font-family: var(--font-mono);
  font-size: clamp(18px, 3.6vw, 48px);
  color: var(--color-accent-blue);
  margin: 0 clamp(4px, 1.4vw, 18px);
  opacity: 0.9;
  animation: colon-pulse 1s steps(1) infinite;
  text-shadow: 0 0 14px var(--color-accent-blue);
  user-select: none;
  flex-shrink: 0;
}

@keyframes colon-pulse {
  0%, 49% { opacity: 0.95; }
  50%, 100% { opacity: 0.25; }
}

/* Clean System Status Bar (No Pulsing Dot) */
.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: clamp(10px, 1.2vw, 14px);
  color: var(--color-sky-light);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.9;
}

/* ── MOBILE VIEW OPTIMIZATION: RINGS CLOSE IN, TIMER PRESERVES 1 LINE ── */
@media (max-width: 600px) {
  /* Concentric rings close in so mobile screen is densely styled, not blank */
  .ring-1 {
    width: 56vw;
    height: 56vw;
    min-width: 220px;
    min-height: 220px;
    border-width: 1.2px;
  }

  .ring-2 {
    width: 84vw;
    height: 84vw;
    min-width: 320px;
    min-height: 320px;
    border-width: 1.4px;
  }

  .ring-3 {
    width: 114vw;
    height: 114vw;
    min-width: 440px;
    min-height: 440px;
    border-width: 1.4px;
  }

  .ring-4 {
    width: 148vw;
    height: 148vw;
    min-width: 570px;
    min-height: 570px;
    border-width: 1.6px;
  }

  .ring-5 {
    width: 186vw;
    height: 186vw;
    min-width: 710px;
    min-height: 710px;
    border-width: 1.6px;
  }

  .ring-6 {
    width: 228vw;
    height: 228vw;
    min-width: 870px;
    min-height: 870px;
    border-width: 1.8px;
  }

  /* Compact badges on mobile to sit cleanly on close-in rings */
  .glyph-badge {
    width: 18px;
    height: 18px;
    border-radius: 2px;
  }

  .glyph-badge svg {
    width: 10px;
    height: 10px;
  }

  /* Guaranteed single-line countdown sizing on smaller screens */
  .mission-clock {
    width: auto;
    max-width: 100%;
  }

  .clock-num {
    font-size: clamp(16px, 5vw, 22px);
  }

  .clock-label {
    font-size: clamp(8px, 2.2vw, 10px);
    letter-spacing: 0.1em;
  }

  .clock-divider {
    font-size: clamp(14px, 4vw, 18px);
    margin: 0 4px;
  }

  .clock-segment {
    gap: 2px;
  }

  .status-indicator {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}

/* Extra small screens (down to 320px) */
@media (max-width: 380px) {
  .clock-num {
    font-size: 14px;
  }
  .clock-label {
    font-size: 7px;
  }
  .clock-divider {
    margin: 0 2px;
    font-size: 12px;
  }
}