:root {
  --bg: #0c1612;          /* dumpf grün, fast schwarz — Rasen-Anmutung */
  --bg-edge: #04080a;     /* noch dunkler für Vignette */
  --fg: #f5f5f7;
  --dim: #9aa39e;
  --accent: #ffffff;
  --gap: 4vmin;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Film-grain noise — grünlich getönt, deutlich sichtbar (gröber für TV-Sitzabstand) */
.bg-noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='720'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.55  0 0 0 0 0.46  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 720px 720px;
}

/* Radial vignette — dunkle Ecken, leichte grüne Mitte */
.bg-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 80% 80% at center,
      rgba(20, 40, 30, 0.0) 0%,
      rgba(8, 16, 12, 0.55) 55%,
      rgba(0, 0, 0, 0.92) 100%);
}

.board {
  position: relative;
  z-index: 3;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  /* Horizontal padding = 0: Teams hängen via justify-self: start/end am
     linken/rechten Spaltenrand, also bündig am Bildschirmrand. Vertikales
     Padding bewusst knapp, damit die Match-Clock möglichst weit unten sitzt
     (Wunsch des Operators für die Outdoor-Variante). */
  padding: 1vmin 0;
}
/* Teams werden um ~10 % der Bildschirmhöhe nach oben verschoben, damit der
   nun deutlich größere Score nicht in der Mitte des Bildes hängt. transform
   hält das Grid-Layout unverändert, beeinflusst nur die optische Position. */
.teams { grid-row: 2; align-self: center; transform: translateY(-5vh); }
/* Match-Clockline aus dem Grid herausgelöst: die größere Spielzeit-Schrift
   würde sonst Row-3 sprengen und in die Teams-Reihe drücken. Absolut am
   unteren Bildrand verankert; die Phase-Beschriftung ("Halbzeit", "2. Hälfte"
   etc.) sitzt unverändert direkt darüber. */
.match-clockline {
  position: absolute;
  left: 50%;
  bottom: 1vmin;
  transform: translateX(-50%);
}

/* Status bar — schwebt absolut oben unter der Wand-Uhr, beeinflusst nicht das vertikale Layout */
.status {
  position: fixed;
  top: clamp(6rem, 10vmin, 12rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  text-align: center;
  font-size: clamp(2rem, 4vmin, 6rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg);
  padding: 1.2vmin 4vmin;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status[hidden] { display: none; }

/* Teams + score row — alle drei Spalten vertikal mittig zueinander */
.teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(2rem, 6vmin, 10rem);
  min-width: 0;
  width: 100%;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vmin;
  min-width: 0;
}
/* Push each team block (crest + name together) to the outer edge of its
   grid column. justify-self collapses .team to its content width and anchors
   it left/right within the 1fr column — the crest and the name below stay
   vertically aligned to each other, just shifted outward as a unit. */
.team--home { justify-self: start; }
.team--away { justify-self: end; }

.crest {
  position: relative; /* anchor for the .placeholder centering trick below */
  height: clamp(14rem, 38vmin, 44rem);
  width: clamp(20rem, 45vmin, 60rem);
  display: block;
  /* Bewusst KEIN overflow:hidden — sonst clippt der drop-shadow-Filter auf .crest img
     oben und unten an der Box-Kante. Der Filter ist rein visuell und ändert die
     Layout-Box nicht, also bleibt der Name darunter exakt an seiner Position.
     Img nutzt object-fit:contain und .placeholder ist absolut auf inset:0 mit
     height:92 % gesetzt — beides läuft von Haus aus nicht über. */
}
.crest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 4px 14px rgba(0,0,0,0.65))
    drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}
.crest .placeholder {
  /* Centred in the (wider-than-tall) .crest box. Without this, the square
     placeholder defaults to the top-left because .crest is display: block. */
  position: absolute;
  inset: 0;
  margin: auto;
  aspect-ratio: 1 / 1;
  height: 92%;
  border-radius: 18%;
  display: grid;
  place-items: center;
  font-family: "Teko", "Manrope", sans-serif;
  font-size: clamp(2rem, 14vmin, 14rem);
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  background: rgba(255,255,255,0.08);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.55),
    0 1px 2px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.name {
  font-size: clamp(2rem, 4vmin, 6rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score {
  font-family: "Teko", "Manrope", sans-serif;
  font-weight: 600;
  /* 77vmin = 70vmin × 1.1 (vorheriger scale-Faktor wird ins font-size
     eingerechnet, weil scale entfernt wurde). Clamp begrenzt Mini-/Maxi-
     Viewports, sonst greift der vmin-Anteil. */
  font-size: clamp(12rem, 77vmin, 99rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: clamp(1.5rem, 4vmin, 6rem);
  color: var(--accent);
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
  min-width: 0;
}
.score-num { min-width: 1ch; text-align: center; }
.score-sep {
  opacity: 0.4;
  font-size: 0.7em;
  transform: translateY(-0.15em);
}

.match-clockline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.2vmin, 2rem);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.match-clock {
  font-family: "Teko", "Manrope", sans-serif;
  font-weight: 400;
  /* 31vmin = 22vmin × 1.4 (vorheriger scale-Faktor jetzt im font-size). */
  font-size: clamp(10rem, 31vmin, 41rem);
  color: var(--fg);
  letter-spacing: 0.02em;
  line-height: 1;
}
.match-clock .match-clock-gap {
  display: inline-block;
  width: 0.6em;
}
.phase {
  font-size: clamp(1.8rem, 4vmin, 6rem);
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
}

/* Nav icons unten rechts — fast unsichtbar */
.nav-icons {
  position: fixed;
  bottom: 1.5vmin;
  right: 1.5vmin;
  display: flex;
  gap: 1vmin;
  z-index: 10;
}
.nav-icons a {
  width: 2.6vmin;
  height: 2.6vmin;
  min-width: 22px;
  min-height: 22px;
  color: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: color 200ms;
  padding: 0.4vmin;
}
.nav-icons a:hover,
.nav-icons a:focus { color: rgba(255,255,255,0.55); outline: none; }

/* Wand-Uhr oben rechts — gedämpft, mit Icon klar als Uhrzeit erkennbar */
.wall-clock {
  position: fixed;
  top: 1.5vmin;
  right: 1.5vmin;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.2vmin;
  color: rgba(255, 255, 255, 0.55);
  font-family: "Manrope", ui-sans-serif, sans-serif;
  /* +30 % direkt via font-size, damit die Layout-Box mitwächst und nichts
     in den Nachbarbereich hineinragt (kein transform). */
  font-size: clamp(3rem, 5.85vmin, 8.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.wall-clock svg {
  width: clamp(3rem, 5.85vmin, 8rem);
  height: clamp(3rem, 5.85vmin, 8rem);
  opacity: 0.7;
}
.wall-time { display: inline-block; }

/* Connection indicator — auch fast unsichtbar */
.conn-dot {
  position: fixed;
  bottom: 1.5vmin;
  left: 1.5vmin;
  width: 0.8vmin;
  height: 0.8vmin;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  z-index: 10;
  transition: background 200ms;
}
.conn-dot.live   { background: rgba(74, 222, 128, 0.35); }
.conn-dot.stale  { background: rgba(251, 191, 36, 0.7); }
.conn-dot.error  { background: rgba(239, 68, 68, 0.8); }

/* Portrait fallback: score on its own row above teams */
@media (orientation: portrait) {
  .teams {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .score {
    grid-column: 1 / -1;
    order: -1;
    justify-self: center;
    justify-content: center;
  }
  .crest {
    height: min(38vw, 22rem);
    width: min(55vw, 30rem);
  }
}

/* ----- Bildschirm-Überblendung (Overlay) ----- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 1000;
  pointer-events: none;
}
.overlay[hidden] { display: none; }
.overlay svg {
  width: 100%;
  height: 100%;
  display: block;
}
.overlay text {
  fill: #fff;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ----- Celebration overlay (goal animation) ----- */
.celebration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.cel-ball {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}
.cel-trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.cel-img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ====================================================================
   Inverted display mode (body.inverted): black-on-white for sunlight.
   Activated server-side via state.displayMode === 'light'. Reversion is
   a single class removal — all overrides live in this block, no original
   rule has been mutated. Crests (<img>) are intentionally NOT inverted.
   ==================================================================== */
body.inverted {
  --bg: #ffffff;
  --bg-edge: #ffffff;
  --fg: #111111;
  --dim: #3d3d3d;
  --accent: #111111;
}
/* Greenish noise + radial vignette make no sense on pure white. */
body.inverted .bg-noise,
body.inverted .bg-vignette { display: none; }

/* Translucent panels were tuned to sit on dark; flip them to sit on white. */
body.inverted .status {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
}
body.inverted .crest .placeholder {
  color: rgba(0,0,0,0.85);
  background: rgba(0,0,0,0.08);
  text-shadow: 0 2px 8px rgba(0,0,0,0.10);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(0,0,0,0.06);
}
body.inverted .nav-icons a { color: rgba(0,0,0,0.45); }
body.inverted .nav-icons a:focus { color: rgba(0,0,0,0.65); }
body.inverted .wall-clock { color: rgba(0,0,0,0.55); }
body.inverted .conn-dot { background: rgba(0,0,0,0.1); }
/* Overlay text was fill: #fff — invert. The dark backdrop scrim keeps the
   text legible by absorbing its surrounding pixels regardless. */
body.inverted .overlay text { fill: #111; }

/* Celebration: balls + speed-line trail are rendered in white. A single
   filter on the container inverts all of them in one cheap pass, so the
   balls stay visible on the now-white background. */
body.inverted .celebration { filter: invert(1) hue-rotate(180deg); }