/**
 * VANTAGE Master Display — Future-Noir surface, asymmetric zero-margin grid, 16:9 stage.
 */

:root {
  --teovt-bg: var(--veov-obsidian, #050505);
  --teovt-green: var(--veov-vantage-green, #1db954);
  --teovt-gold: var(--veov-liquid-gold, #ffcc00);
  --teovt-line: var(--veov-vantage-green-dim, rgba(29, 185, 84, 0.35));
  --teovt-text: #e8e8e8;
  --teovt-grid-gap: var(--veov-grid-gap, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body.teovt-body {
  margin: 0;
  min-height: 100vh;
  background: var(--teovt-bg);
  color: var(--teovt-text);
  font-family: var(--teovt-font-body, system-ui, sans-serif);
}

.teovt-master-display {
  overflow-x: hidden;
}

.teovt-shell {
  min-height: 100vh;
  padding: 0 0 4.25rem;
  position: relative;
  overflow-x: hidden;
}

/* 16:9 signage canvas — letterboxed on non-16:9 */
.teovt-display-stage {
  position: relative;
  width: var(--teovt-stage-max-w, min(100vw, calc(100vh * 16 / 9)));
  height: var(--teovt-stage-max-h, min(100vh, calc(100vw * 9 / 16)));
  max-width: 100%;
  margin-inline: auto;
  isolation: isolate;
}

.teovt-header {
  padding: 0.85rem 1.25rem 0.35rem;
  border-bottom: 1px solid var(--veov-liquid-gold-dim, rgba(255, 204, 0, 0.12));
  position: relative;
}

.teovt-brand {
  font-family: var(--teovt-font-display, "Archivo Black", sans-serif);
  font-size: clamp(1.35rem, 2.6vw, 2.85rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teovt-gold);
}

.teovt-tagline {
  margin-top: 0.2rem;
  font-family: var(--teovt-font-display, "Archivo Black", sans-serif);
  font-size: clamp(0.55rem, 1.1vw, 0.8rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232, 232, 232, 0.5);
}

/* Asymmetric zero-margin grid (no mascot cell — 3D floats above) */
.teovt-grid--asymmetric {
  display: grid;
  gap: var(--teovt-grid-gap);
  grid-template-columns: 1.12fr 0.92fr 1fr 0.88fr 1.08fr;
  grid-template-rows: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "a b c c e"
    "a b d d e";
  width: 100%;
  min-height: calc(var(--teovt-stage-max-h, 100vh) - 6.5rem);
  padding: 0;
}

@media (max-width: 900px) {
  .teovt-grid--asymmetric {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "a b"
      "c c"
      "d d"
      "e e";
    min-height: auto;
  }
}

.teovt-panel {
  padding: clamp(0.65rem, 1.1vw, 1.15rem) clamp(0.75rem, 1.2vw, 1.25rem);
  border: 1px solid var(--teovt-line);
  background: var(--veov-panel-fill, radial-gradient(120% 80% at 10% 0%, rgba(29, 185, 84, 0.08), transparent 55%)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  position: relative;
}

.teovt-panel--a {
  grid-area: a;
}
.teovt-panel--b {
  grid-area: b;
}
.teovt-panel--c {
  grid-area: c;
}
.teovt-panel--d {
  grid-area: d;
}
.teovt-panel--e {
  grid-area: e;
}

.teovt-title {
  margin: 0 0 0.45rem;
  font-family: var(--teovt-font-display, "Archivo Black", sans-serif);
  font-size: clamp(0.65rem, 1vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teovt-green);
}

@keyframes teovt-flicker {
  0%,
  100% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(29, 185, 84, 0.45);
  }
  45% {
    opacity: 0.92;
    text-shadow: 0 0 2px rgba(29, 185, 84, 0.2);
  }
  46% {
    opacity: 1;
    text-shadow: 0 0 14px rgba(29, 185, 84, 0.65);
  }
  48% {
    opacity: 0.88;
  }
}

.teovt-flicker {
  animation: teovt-flicker 3.2s ease-in-out infinite;
}

.teovt-leader-line {
  height: 1px;
  margin: 0.3rem 0 0.65rem;
  background: repeating-linear-gradient(90deg, var(--teovt-line) 0 6px, transparent 6px 12px);
  opacity: 0.9;
  animation: teovt-dash 1.2s linear infinite;
}

.teovt-leader-line--delay {
  animation-delay: 0.35s;
}

@keyframes teovt-dash {
  from {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.35);
  }
  to {
    filter: brightness(1);
  }
}

.teovt-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: clamp(1.35rem, 3.2vw, 2.95rem);
  font-weight: 800;
}

.teovt-stat__label {
  font-family: var(--teovt-font-mono, monospace);
  font-size: clamp(0.55rem, 0.75vw, 0.72rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 232, 232, 0.55);
  font-weight: 600;
}

.teovt-stat__value {
  font-family: var(--teovt-font-display, "Archivo Black", sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--teovt-gold);
}

.teovt-leader-name {
  margin: 0;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  color: rgba(232, 232, 232, 0.88);
  font-family: var(--teovt-font-body, sans-serif);
}

.teovt-copy {
  margin: 0;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  line-height: 1.45;
  color: rgba(232, 232, 232, 0.68);
}

.teovt-mascot-float {
  position: fixed;
  left: 50%;
  top: 44%;
  width: min(118vw, 168vh);
  height: min(88vh, 124vw);
  transform: translate(-50%, -50%);
  z-index: var(--veov-mascot-z, 14000);
  pointer-events: none;
  overflow: visible;
}

.teovt-mascot-float canvas {
  pointer-events: none !important;
}

.teovt-mascot-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 204, 0, 0.28);
  color: rgba(232, 232, 232, 0.5);
  text-align: center;
  gap: 0.35rem;
  pointer-events: none;
}

.teovt-mascot-placeholder__label {
  font-family: var(--teovt-font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teovt-gold);
}

.teovt-sequence__viewport {
  position: relative;
  min-height: calc(var(--teovt-stage-max-h, 100vh) - 8rem);
}

.teovt-ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  padding: 0.5rem 0;
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.96), rgba(29, 185, 84, 0.12), rgba(5, 5, 5, 0.96));
  border-top: 1px solid rgba(255, 204, 0, 0.22);
  overflow: hidden;
}

.teovt-ticker__inner {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  padding-left: 100%;
  animation: teovt-ticker-scroll var(--teovt-ticker-duration, 22s) linear infinite;
  font-size: clamp(0.62rem, 0.95vw, 0.88rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 232, 232, 0.9);
  font-family: var(--teovt-font-mono, monospace);
}

.teovt-ticker__tag {
  color: var(--teovt-green);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(29, 185, 84, 0.45);
}

.teovt-ticker__sep {
  color: var(--teovt-green);
  opacity: 0.75;
}

.teovt-ticker--breaking .teovt-ticker__inner {
  animation-duration: 18s;
}

@keyframes teovt-ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes teovt-glitch {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
  25% {
    clip-path: inset(0 0 0 0);
    transform: translate(-1px, 0);
  }
  50% {
    clip-path: inset(10% 0 5% 0);
    transform: translate(1px, 0);
  }
  75% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
  }
}

.teovt-ticker--glitch .teovt-ticker__inner {
  animation: teovt-ticker-scroll var(--teovt-ticker-duration, 22s) linear infinite,
    teovt-glitch var(--teovt-glitch-cycle-ms, 3s) steps(2, end) infinite;
}