/* Esitystila (esitys.js) */

/* Hyvin luettava kirjasin heikkoihin katseluoloihin (videotykki).
   Selain lataa kirjasintiedostot vasta, kun esitystila ottaa ne käyttöön. */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");

.vihje {
  font-size: 0.85em;
  opacity: 0.75;
}

kbd {
  font-family: inherit;
  font-size: 0.9em;
  padding: 0 0.35em;
  border: 1px solid currentColor;
  border-radius: 0.25em;
}

/* Ohjaimet näkyvät vain esitystilassa. */
.esitys-palkki,
.esitys-laskuri,
.esitys-ohje {
  display: none;
}

/* ---------- teemat ----------
   Tumma: hämärä tila. Korostusväri on tavallista sivua kirkkaampi oranssi,
   koska videotykki haalistaa tummia sävyjä (kontrasti mustaa vasten ~10:1).
   Vaalea: valoisa tila; tummempi oranssi (~7:1 valkoista vasten).
   Raidat ovat tavallista voimakkaammat, jotta ne erottuvat videotykiltä. */
body.esitys {
  --tausta: #000000;
  --teksti: #ffffff;
  --korostus: #ff9a1f;
  --raita: rgba(255, 255, 255, 0.13);
  --ohjeen-tausta: rgba(0, 0, 0, 0.85);
}

body.esitys.esitys-vaalea {
  --tausta: #ffffff;
  --teksti: #000000;
  --korostus: #8f4000;
  --raita: rgba(0, 0, 0, 0.09);
  --ohjeen-tausta: rgba(255, 255, 255, 0.9);
}

body.esitys {
  margin: 0;
  overflow: hidden;
  cursor: none;
  background-color: var(--tausta);
  color: var(--teksti);
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Taustalogo pois: se häiritsisi tekstiä heikolla kontrastilla. */
body.esitys::before {
  display: none;
}

body.esitys header {
  display: none;
}

/* Kaikki sarjat samaan ruutuun päällekkäin; vain .nakyva näkyy.
   minmax(0, 1fr): leveä sarja ei saa levittää ruudukkoa ikkunaa leveämmäksi. */
body.esitys .tulokset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

body.esitys .tulokset .sarja {
  grid-area: 1 / 1;
  align-self: start;                  /* ei venytetä korkeimman sarjan mittaan */
  margin: 0;
  padding: 0.75em 1em 1em;
  transform-origin: top left;
  /* Odottava sarja on piilossa hieman alempana. translate on oma
     ominaisuutensa, joten se ei sotke mahdollista transform-skaalausta. */
  opacity: 0;
  visibility: hidden;
  translate: 0 0.6em;
  transition: none;
}

/* Siirtymä kahdessa vaiheessa, ilman päällekkäisyyttä:
   1) poistuva sarja liukuu ylös ja häipyy (0,45 s, HAIVYTYS esitys.js:ssä)
   2) uusi sarja nousee alhaalta paikalleen ja tulee esiin (0,6 s). */
body.esitys .tulokset .sarja.poistuva {
  translate: 0 -0.6em;
  transition: opacity 0.45s ease-in, translate 0.45s ease-in,
              visibility 0s linear 0.45s;
}

body.esitys .tulokset .sarja.nakyva {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.6s ease-out 0.45s, translate 0.6s ease-out 0.45s,
              visibility 0s linear 0.45s;
}

/* Vain siirtymässä olevat sarjat omille kerroksilleen (sulava animaatio
   ilman, että kaikki sarjat varaavat näytönohjaimen muistia). */
body.esitys .tulokset .sarja.nakyva,
body.esitys .tulokset .sarja.poistuva {
  will-change: opacity, translate;
}

body.esitys .tulokset .sarja h2 {
  font-size: 1.6em;
}

/* Taulukot: ei mustia reunaviivoja (ne näkyisivät raitojen läpi), vaan
   väli tehdään soluvälistyksellä; joka toinen rivi raidoitettu. */
body.esitys .tulokset td,
body.esitys .tulokset th {
  border: 0;
  padding: 0.35em 0.9em 0.35em 0.45em;
}

body.esitys .tulokset tbody tr:nth-child(even) td {
  background-color: var(--raita);
}

body.esitys .tulokset th {
  font-weight: bold;
  opacity: 0.75;
}

/* Joukkueiden nimet tekstin värisinä ilman alleviivausta: linkeistä ei ole
   videotykiltä hyötyä, ja oranssi säästetään korostuksille. */
body.esitys .tulokset a:link,
body.esitys .tulokset a:visited {
  color: inherit;
  text-decoration: none;
}

/* Huom.-sarake pois; puutteet näkyvät P-merkkinä rastikoodin perässä. */
body.esitys .tulokset .huom {
  display: none;
}

body.esitys .tulokset .esitysmerkki {
  display: inline;
  margin-inline-start: 0.3em;
  font-weight: bold;
  color: var(--korostus);
}

/* Aikapalkki ikkunan alareunassa; oletuksena piilossa (A-näppäin) */
body.esitys.esitys-palkki-nakyvissa .esitys-palkki {
  display: block;
  position: fixed;
  inset-inline-start: 0;
  inset-block-end: 0;
  block-size: 0.3em;
  inline-size: 100%;
  background-color: var(--korostus);
  transform-origin: left center;
  transform: scaleX(0);
}

body.esitys .esitys-palkki.kay {
  animation: esitys-edistyminen var(--kesto, 15s) linear forwards;
}

body.esitys-tauko .esitys-palkki.kay {
  animation-play-state: paused;
}

@keyframes esitys-edistyminen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Sarjan numero ja päivitysaika oikeassa yläkulmassa */
body.esitys .esitys-laskuri {
  display: block;
  position: fixed;
  inset-block-start: 0.75em;
  inset-inline-end: 1em;
  font-size: 0.9em;
  opacity: 0.75;
}

/* Näppäinohje, joka häipyy muutaman sekunnin päästä */
body.esitys .esitys-ohje {
  display: block;
  position: fixed;
  inset-block-end: 1em;
  inset-inline-end: 1em;
  padding: 0.5em 0.8em;
  font-size: 0.85em;
  white-space: pre;
  background-color: var(--ohjeen-tausta);
  border-radius: 0.3em;
}

body.esitys .esitys-ohje.piilossa {
  animation: esitys-haivy 1s ease 4s forwards;
}

@keyframes esitys-haivy {
  to { opacity: 0; visibility: hidden; }
}

/* Kun käyttäjä toivoo vähemmän liikettä, liukuminen jätetään pois mutta
   häivytys säilyy (pelkkä läpinäkyvyyden muutos ei ole liikettä). */
@media (prefers-reduced-motion: reduce) {
  body.esitys .tulokset .sarja,
  body.esitys .tulokset .sarja.nakyva,
  body.esitys .tulokset .sarja.poistuva {
    translate: none;
  }
}