/* ============================================================
   KH-7 TRIVIAL — shared styles
   Brand-faithful to kh7.es: Rubik + Open Sans on a clean light
   canvas, with KH-7 blue (#001689), orange (#FF5000) and green
   (#65BC46). Energetic, sporty motion (KH-7 = Dakar / racing).
   ============================================================ */

:root {
  /* Brand */
  --kh-blue: #001689;
  --kh-blue-700: #0b249e;
  --kh-blue-300: #5b6cd6;
  --kh-orange: #ff5000;
  --kh-orange-600: #e64800;
  --kh-green: #65bc46;
  --kh-green-600: #4e9e34;

  /* Light canvas */
  --bg: #eef1fb;
  --surface: #ffffff;
  --surface-2: #f4f6fd;
  --ink: #0d1233;
  --ink-soft: #3b4270;
  --muted: #7b82a8;
  --muted-dim: #aab0cf;
  --line: #e2e6f5;
  --line-strong: #cdd3ee;

  --good: var(--kh-green);
  --good-600: var(--kh-green-600);

  /* Team colours (from Equipos.png) */
  --t-degreaser: #ea5a1f;
  --t-stain: #36a9e1;
  --t-oxy: #d94f9c;
  --t-oven: #c2161b;

  --display: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 2px 6px rgba(0, 22, 137, 0.06);
  --shadow-md: 0 14px 30px -12px rgba(0, 22, 137, 0.22);
  --shadow-lg: 0 30px 70px -24px rgba(0, 22, 137, 0.32);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Animated brand backdrop: drifting orange + green blobs on light */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 110% -10%, rgba(255, 80, 0, 0.1), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(101, 188, 70, 0.12), transparent 60%),
    linear-gradient(180deg, #f3f5fe 0%, var(--bg) 100%);
}
.bg-fx::before,
.bg-fx::after {
  content: "";
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.5;
  will-change: transform;
}
.bg-fx::before {
  top: -16vmax;
  right: -10vmax;
  background: radial-gradient(circle at 30% 30%, rgba(255, 80, 0, 0.5), transparent 65%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.bg-fx::after {
  bottom: -18vmax;
  left: -12vmax;
  background: radial-gradient(circle at 60% 40%, rgba(0, 22, 137, 0.35), transparent 65%);
  animation: drift2 32s ease-in-out infinite alternate;
}
@keyframes drift1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-8vmax, 6vmax) scale(1.12); }
}
@keyframes drift2 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(7vmax, -5vmax) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-fx::before,
  .bg-fx::after { animation: none; }
}

button {
  font-family: var(--body);
  cursor: pointer;
  border: none;
  color: inherit;
  background: none;
}

/* ===== Brand lockup (real KH-7 logo) ===== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.brand img {
  height: 52px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0, 22, 137, 0.18));
}
.brand .tag {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--kh-blue);
}
.brand .tag small {
  display: block;
  font-weight: 600;
  font-size: 0.62em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kh-orange);
}

/* ===== Connection pill ===== */
.conn {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}
.conn .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted-dim);
}
.conn.online {
  color: var(--kh-green-600);
}
.conn.online .dot {
  background: var(--kh-green);
  box-shadow: 0 0 0 0 rgba(101, 188, 70, 0.6);
  animation: livePulse 2s ease-out infinite;
}
.conn.offline {
  color: var(--kh-orange-600);
}
.conn.offline .dot {
  background: var(--kh-orange);
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(101, 188, 70, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(101, 188, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(101, 188, 70, 0); }
}

/* Speed ticks — small sporty accent */
.speedline {
  display: inline-flex;
  gap: 5px;
}
.speedline i {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--kh-orange);
  transform: skewX(-18deg);
  opacity: 0.85;
}
.speedline i:nth-child(2) { background: var(--kh-blue); }
.speedline i:nth-child(3) { background: var(--kh-green); }