/* ==========================================================================
   Matchday - shared foundation

   The visual system is lifted directly from the Red Bull Media House "Graphic
   Design Guidelines" deck: a deep NAVY field, a single CRIMSON accent used for
   numbers, rules, dots and live states, WHITE for the loud things, GREY for
   structure - and a heavy CONDENSED headline face. Yellow is demoted to a rare
   highlight (the golden-goal chip only), the way the deck reserves it.

   The deck also states the type rules we follow: the face must be bold, iconic,
   simple, and legible on both hand-held screens and big screens (p.25/p.30);
   key content stays inside the action-/title-safe margins (p.39).
   ========================================================================== */

/* Oswald - a heavy condensed grotesque, the closest open (OFL) match to the
   deck's headline face. Bundled locally so the board works offline at a venue.
   Ships as one variable file covering the weight axis. */
@font-face {
  font-family: 'Oswald';
  src: url('/assets/fonts/oswald.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* RBMH deck palette. */
  --rb-red: #e1123d;        /* the deck crimson - the one accent */
  --rb-red-deep: #b10e30;
  --rb-red-glow: #ff3d63;
  --rb-yellow: #ffc906;     /* reserved: golden goal only */
  --rb-yellow-deep: #c28800;
  --rb-navy: #14294f;
  --rb-navy-mid: #0d1f42;
  --rb-navy-deep: #081733;
  --rb-navy-band: #16223f;  /* the header-bar navy from the deck */
  --rb-silver: #c7cad6;
  --rb-silver-dim: #808aa0;

  --ink: #16181d;
  --cream: #f6f4ee;
  --paper: #ffffff;

  --ok: #22c98a;
  --warn: #ffb020;
  --bad: #ff2e57;

  /* Heavy condensed display face for the scoreboard; Tahoma tail carries Arabic
     glyphs (Oswald has none - RTL swaps this whole var out, see per-screen CSS). */
  --font-display: 'Oswald', 'Arial Narrow', 'Segoe UI', Tahoma, sans-serif;
  --font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Tahoma, sans-serif;

  /* Title-/action-safe inset for the big screen (deck p.39). */
  --rb-safe: clamp(16px, 4.4vmin, 60px);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slam: cubic-bezier(0.34, 1.8, 0.64, 1);
}

/* --------------------------------------------------------------------------
   RBMH deck primitives - shared building blocks that give both screens the
   deck's signature chrome: navy bands with a crimson rule, condensed number +
   title lockups, thin letter-spaced kickers, crimson discs, the plus motif.
   -------------------------------------------------------------------------- */

/* Navy header band with the deck's crimson hairline along the bottom. */
.rb-band {
  background: var(--rb-navy-band);
  border-bottom: 3px solid var(--rb-red);
}

/* "3.1  IN-PROGRAM GRAPHICS" style lockup: a light section number, then a heavy
   condensed uppercase title. */
.rb-lockup { display: flex; align-items: baseline; gap: 0.5em; }
.rb-lockup__num {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--rb-silver);
  opacity: 0.85;
}
.rb-lockup__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--cream);
}

/* Thin, letter-spaced grey subtitle - the deck's caps kicker. */
.rb-kicker {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rb-silver-dim);
}

/* Crimson number disc (the deck's 1/2/3/4/5 markers). */
.rb-disc {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rb-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
}

/* A short crimson rule - the deck underlines its titles with one. */
.rb-rule {
  height: 3px;
  border-radius: 2px;
  background: var(--rb-red);
}

/* Crimson index tick set before a wordmark - the deck's "Red Bull" red block. */
.rb-tick {
  display: inline-block;
  width: 0.42em;
  height: 1.15em;
  flex: none;
  border-radius: 1px;
  background: var(--rb-red);
}

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

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

body {
  font-family: var(--font-ui);
  background: var(--rb-navy-deep);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--rb-yellow);
  outline-offset: 2px;
}

input,
select {
  font: inherit;
  color: inherit;
}

/* A class that sets `display` outranks the user-agent [hidden] rule, so any
   element given both stays visible. Settle it once, here. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Field backdrop - layered diagonal shards echoing the Red Bull energy marks.
   Kept low contrast so scores and the clock stay the loudest thing on screen.
   -------------------------------------------------------------------------- */

.field-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 34%, #0e2a6b 0%, var(--rb-navy-mid) 44%, var(--rb-navy-deep) 100%);
}

.field-bg::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: repeating-linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.045) 0px,
    rgba(255, 255, 255, 0.045) 3px,
    transparent 3px,
    transparent 26px,
    rgba(255, 255, 255, 0.022) 26px,
    rgba(255, 255, 255, 0.022) 62px,
    transparent 62px,
    transparent 104px
  );
  animation: shard-drift 46s linear infinite;
}

/* A slow warm sweep keeps the field alive without pulling focus. */
.field-bg::after {
  content: '';
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(
      from 210deg at 50% 50%,
      transparent 0deg,
      rgba(232, 17, 45, 0.07) 42deg,
      transparent 96deg,
      transparent 250deg,
      rgba(255, 201, 6, 0.055) 300deg,
      transparent 350deg
    );
  animation: sheen-turn 38s linear infinite;
  mix-blend-mode: screen;
}

.field-bg .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 78% at 50% 44%, transparent 46%, rgba(2, 5, 16, 0.82) 100%);
}

@keyframes shard-drift {
  to {
    transform: translate3d(-104px, -196px, 0);
  }
}

@keyframes sheen-turn {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Shared bits
   -------------------------------------------------------------------------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.9em;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: rgba(4, 10, 31, 0.68);
  border: 1px solid rgba(199, 202, 214, 0.22);
  backdrop-filter: blur(8px);
}

.status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rb-silver-dim);
  box-shadow: 0 0 0 0 currentColor;
}

.status-pill[data-status='live'] .dot {
  background: var(--ok);
  animation: pulse-dot 2s ease-out infinite;
  color: var(--ok);
}

.status-pill[data-status='reconnecting'] .dot {
  background: var(--warn);
  animation: pulse-dot 0.8s ease-out infinite;
  color: var(--warn);
}

.status-pill[data-status='connecting'] .dot {
  background: var(--rb-silver-dim);
}

@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 currentColor;
    opacity: 1;
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
    opacity: 0.8;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    opacity: 1;
  }
}

/* Reduced motion, done carefully.
   The old approach collapsed every animation to ~0ms. That broke the display:
   the takeover, goal and full-time animations animate IN and then OUT, so
   finishing them instantly parks each element on its hidden exit frame — the
   screen looks like nothing ever happened. That is almost certainly why the
   effects didn't show for one viewer: a machine with "reduce motion" on (a
   common corporate/accessibility default, and where software rendering is more
   likely) hit exactly this.
   So here we only silence the continuous ambient LOOPS. Every discrete event
   animation keeps running, because running is the only way its element becomes
   visible at all. */
@media (prefers-reduced-motion: reduce) {
  .field-bg::before,
  .field-bg::after,
  .status-pill .dot,
  .clock-block.is-urgent .clock,
  .event-hud.is-expiring,
  .chip--golden {
    animation: none !important;
  }
}