/* ====================================================================
   Standardansicht: Wappen + Namen links/rechts, Spielstand mittig,
   Spielzeit mit Phasen-Beschriftung am unteren Bildrand.
   Gerendert von public/js/views/standard-view.js in #view-root.
   ==================================================================== */
standard-view {
  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%);
}

/* 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);
}
.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);
}

.match-clockline .match-clock {
  /* 31vmin = 22vmin × 1.4 (vorheriger scale-Faktor jetzt im font-size). */
  font-size: clamp(10rem, 31vmin, 41rem);
}

/* 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);
  }
}

/* Hell-Modus: die durchscheinende Wappen-Platzhalterfläche war auf dunklen
   Grund abgestimmt und muss auf Weiß gespiegelt werden. */
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);
}