/*
 * Livesuomi multiview.
 *
 * Sääntö joka näkyy koko tiedostossa: soittimen päälle ei tule mitään.
 * Otsikkorivit ovat soittimen yläpuolella eivätkä sen päällä, eikä yhtään
 * position:absolute -elementtiä ole .ls-mv__frame -laatikon sisällä.
 * Tämä ei ole tyylivalinta vaan alustojen upotusehto.
 */

.ls-mv {
  --ls-mv-gap: 10px;
  --ls-mv-bg: #101214;
  --ls-mv-fg: #e9edf1;
  --ls-mv-dim: #9aa4ae;
  --ls-mv-line: #2a3037;
  --ls-mv-accent: #0f4c5c;
  --ls-mv-live: #e0245e;

  color: var(--ls-mv-fg);
  background: var(--ls-mv-bg);
  padding: 16px;
  border-radius: 10px;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ palkki */

.ls-mv__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ls-mv__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ls-mv-fg);
}

.ls-mv__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ls-mv__layouts {
  display: inline-flex;
  border: 1px solid var(--ls-mv-line);
  border-radius: 7px;
  overflow: hidden;
}

.ls-mv__layout,
.ls-mv__chattoggle,
.ls-mv__share {
  appearance: none;
  border: 1px solid var(--ls-mv-line);
  background: transparent;
  color: var(--ls-mv-dim);
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.ls-mv__layout {
  border: 0;
  border-radius: 0;
}

.ls-mv__layout + .ls-mv__layout {
  border-left: 1px solid var(--ls-mv-line);
}

.ls-mv__layout:hover,
.ls-mv__chattoggle:hover,
.ls-mv__share:hover {
  color: var(--ls-mv-fg);
  background: #1a1f24;
}

.ls-mv__layout.is-on,
.ls-mv__chattoggle[aria-pressed="true"] {
  background: var(--ls-mv-accent);
  color: #fff;
}

/* ------------------------------------------------------------------- lava */

.ls-mv__stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ls-mv-gap);
  margin-bottom: 18px;
}

/*
 * Chat on toistorivin rinnalla, ei koko lavan. Korkeus tulee siis gridin
 * rivistä eli toistorivistä — aiemmin chat venyi esikatseluseinän mukana
 * satojen pikselien mittaiseksi palkiksi, jota ei voi lukea.
 */
.ls-mv__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ls-mv-gap);
  min-width: 0;
}

.ls-mv__stage.has-chat .ls-mv__top {
  grid-template-columns: minmax(0, 1fr) 320px;
}

/* Ruudukko on kaksi aluetta allekkain: toistorivi ja esikatseluseinä. */
.ls-mv__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ls-mv-gap);
  min-width: 0;
}

/*
 * Vähimmäisleveys on 400 eikä 540 pikseliä.
 *
 * 540 tuli siitä, että 16:9-kuvassa se antaa Twitchin vaatiman 300 pikselin
 * korkeuden. Se oli kuitenkin liian tiukka: kun chat vie 320 pikseliä,
 * kahta 540:tä ei mahdu rinnakkain kuin hyvin leveällä näytöllä, ja
 * ruudut putosivat allekkain juuri silloin kun ruudukkoa eniten tarvitaan.
 *
 * Ehto täytetään nyt korkeuden kautta: .ls-mv__frame saa min-height: 300px,
 * jolloin 400 pikselin levyinen ruutu on 400 × 300 ja soitin sovittaa
 * kuvan siihen. Leveämmällä ruudulla 16:9 ottaa vallan normaalisti.
 */
.ls-mv__play {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: var(--ls-mv-gap);
  align-content: start;
}

.ls-mv__play:empty {
  display: none;
}

/*
 * Hero: iso ruutu vie toistorivin koko leveyden. Se on aina se jolla on
 * ääni — yksi tila, ei kahta erillistä käsitettä joita pitäisi pitää
 * synkassa.
 */
.ls-mv__grid.is-hero .ls-mv__tile.is-hero {
  grid-column: 1 / -1;
}

/*
 * Esikatseluseinä. Tähän sarakemäärä tulee asettelusta, koska esikatselu
 * on kuva eikä upotus — vähimmäiskoko ei koske sitä, ja juuri siksi
 * 32 ruudun seinä on ylipäätään mahdollinen.
 */
.ls-mv__wall {
  --ls-mv-cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--ls-mv-cols), minmax(0, 1fr));
  gap: var(--ls-mv-gap);
  min-width: 0;
}

.ls-mv__wall[hidden] {
  display: none;
}

/*
 * Esikatseluruutu. Ei soitinta, vaan pikkukuva ja luvut. Tämä on se mikä
 * tekee isoista seinistä mahdollisia: 32 soitinta ei mahdu mihinkään
 * koneeseen, 32 pikkukuvaa mahtuu mihin tahansa.
 */
.ls-mv__tile--preview .ls-mv__preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #11151a;
  cursor: pointer;
  overflow: hidden;
}

.ls-mv__previewimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.82;
  transition: opacity 0.12s, transform 0.12s;
}

.ls-mv__previewblank {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, #151a20 0 8px, #11151a 8px 16px);
}

.ls-mv__preview:hover .ls-mv__previewimg,
.ls-mv__preview:focus-visible .ls-mv__previewimg {
  opacity: 1;
  transform: scale(1.02);
}

.ls-mv__previewmeta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 0.75rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
}

.ls-mv__previewviewers::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #e2483d;
  vertical-align: middle;
}

.ls-mv__previewplay {
  opacity: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ls-mv-accent);
  transition: opacity 0.12s;
}

.ls-mv__preview:hover .ls-mv__previewplay,
.ls-mv__preview:focus-visible .ls-mv__previewplay {
  opacity: 1;
}

/* Tiheissä seinissä nimirivi veisi enemmän tilaa kuin itse kuva. */
.ls-mv__grid[data-layout="4x4"] .ls-mv__wall .ls-mv__tilebar,
.ls-mv__grid[data-layout="4x8"] .ls-mv__wall .ls-mv__tilebar {
  font-size: 0.72rem;
  padding: 3px 6px;
}

.ls-mv__layoutwrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: var(--ls-mv-dim);
}

.ls-mv__layoutsel {
  appearance: none;
  border: 1px solid var(--ls-mv-line);
  background: transparent;
  color: var(--ls-mv-fg);
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 28px 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ ruutu */

.ls-mv__tile {
  min-width: 0;
  background: #000;
  border: 1px solid var(--ls-mv-line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ls-mv__tile.is-audio {
  border-color: var(--ls-mv-accent);
  box-shadow: 0 0 0 1px var(--ls-mv-accent);
}

.ls-mv__tilebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #16191d;
  border-bottom: 1px solid var(--ls-mv-line);
  font-size: 0.8rem;
}

.ls-mv__tilename {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.ls-mv__audio,
.ls-mv__close {
  appearance: none;
  border: 1px solid var(--ls-mv-line);
  background: transparent;
  color: var(--ls-mv-dim);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 5px;
  cursor: pointer;
  flex: 0 0 auto;
}

.ls-mv__audio.is-on {
  background: var(--ls-mv-accent);
  border-color: var(--ls-mv-accent);
  color: #fff;
}

.ls-mv__close {
  font-size: 1rem;
  padding: 3px 9px;
}

.ls-mv__audio:hover,
.ls-mv__close:hover { color: var(--ls-mv-fg); }

/* Soitinlaatikko. Tänne ei sijoiteta mitään muuta. */
.ls-mv__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Twitchin upotusehdon alaraja. Leveillä ruuduilla 16:9 ylittää tämän
     itsestään; kapeimmalla sallitulla ruudulla tämä pitää ehdon voimassa. */
  min-height: 300px;
  background: #000;
}

.ls-mv__frame > iframe,
.ls-mv__frame > div,
.ls-mv__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ls-mv__error {
  margin: 0;
  padding: 16px;
  color: var(--ls-mv-dim);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------- chat */

.ls-mv__chat {
  min-width: 0;
  background: #16191d;
  border: 1px solid var(--ls-mv-line);
  border-radius: 8px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.ls-mv__chat iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 420px;
  border: 0;
  display: block;
}

.ls-mv__chatnone {
  margin: 0;
  padding: 16px;
  color: var(--ls-mv-dim);
  font-size: 0.85rem;
}

/*
 * Ulos vievä linkki on aina näkyvissä. Kickin popout-chat ei ole
 * dokumentoitu rajapinta, joten se voi lakata toimimasta ilman varoitusta —
 * silloin käyttäjällä on jo reitti eteenpäin eikä tyhjä laatikko.
 */
.ls-mv__chatfoot {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--ls-mv-line);
  color: var(--ls-mv-dim);
  font-size: 0.78rem;
  flex: 0 0 auto;
}

.ls-mv__chatlink { color: #6fb3c4; }

/* --------------------------------------------------------------- valitsin */

.ls-mv__pickheading {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ls-mv-dim);
}

.ls-mv__picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.ls-mv__pick {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: #16191d;
  border: 1px solid var(--ls-mv-line);
  border-radius: 8px;
  color: var(--ls-mv-fg);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.ls-mv__pick:hover { background: #1c2126; }

.ls-mv__pick.is-on {
  border-color: var(--ls-mv-accent);
  background: #14262c;
}

.ls-mv__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  object-fit: cover;
}

.ls-mv__pickmeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ls-mv__pickname {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-mv__picksub {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--ls-mv-dim);
}

.ls-mv__src { font-weight: 600; }
.ls-mv__src--twitch { color: #a970ff; }
.ls-mv__src--kick { color: #53fc18; }
.ls-mv__src--youtube { color: #ff5a5a; }

.ls-mv__viewers::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--ls-mv-live);
  vertical-align: middle;
}

/* ------------------------------------------------------------------- muut */

.ls-mv__empty,
.ls-mv__none {
  margin: 0 0 18px;
  color: var(--ls-mv-dim);
  font-size: 0.88rem;
}

.ls-mv__notice {
  margin: 0 0 12px;
  padding: 9px 12px;
  background: #1c2126;
  border-left: 3px solid var(--ls-mv-accent);
  border-radius: 4px;
  color: var(--ls-mv-fg);
  font-size: 0.85rem;
  min-height: 0;
}

.ls-mv__notice:empty { display: none; }

.ls-mv [hidden] { display: none !important; }

/* ---------------------------------------------------------------- mobiili */

/*
 * Ruudukko on työpöytäominaisuus. Mobiilissa yksi lähetys kerrallaan:
 * äänessä oleva näkyy, muut kutistuvat vaihtajariviksi. Tämä on konseptin
 * luvun 5.2 kohta 7, ja se on tietoinen päätös eikä puute.
 */
@media (max-width: 720px) {
  .ls-mv { padding: 12px; }

  .ls-mv__stage,
  .ls-mv__stage.has-chat .ls-mv__top {
    grid-template-columns: 1fr;
  }

  /* Kapealla näytöllä 300 px pakottaisi mustat palkit kuvan ylle ja alle. */
  .ls-mv__frame {
    min-height: 0;
  }

  /*
   * Soittimia on mobiilissa yksi: äänessä oleva. Esikatselut säilyvät,
   * koska ne eivät maksa mitään — ne vain latistuvat kahteen sarakkeeseen,
   * jolloin seinä on edelleen selattava mutta ei syö akkua.
   */
  /*
   * Sarakemäärä asetetaan tässä suoraan eikä muuttujan kautta.
   * Syy: JS kirjoittaa --ls-mv-cols:n elementin omaan style-attribuuttiin,
   * ja inline-muuttuja voittaa aina tyylitiedostossa asetetun muuttujan.
   * Mediakysely, joka yrittäisi asettaa --ls-mv-cols: 2, häviäisi siis
   * hiljaa — ja 32 saraketta puhelimessa tuottaa vaakavierityksen, joka
   * on juuri se vika jota koko täysleveystyö yrittää välttää.
   */
  .ls-mv__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .ls-mv__play {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ls-mv__grid .ls-mv__tile--play:not(.is-audio) .ls-mv__frame {
    display: none;
  }

  .ls-mv__grid .ls-mv__tile--play:not(.is-audio) {
    background: #16191d;
  }

  .ls-mv__grid .ls-mv__tile.is-audio,
  .ls-mv__grid.is-hero .ls-mv__tile.is-hero {
    grid-column: 1 / -1;
  }

  .ls-mv__layoutwrap { font-size: 0.8rem; }

  .ls-mv__picker { grid-template-columns: 1fr; }
}

.ls-mv__actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.ls-mv__actions[hidden] {
  display: none;
}

/* Tallennemerkintä ja alustalinkki ruudun otsikkorivillä. */
.ls-mv__badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--ls-mv-line);
  border-radius: 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ls-mv-dim);
}

.ls-mv__out {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--ls-mv-line);
  border-radius: 5px;
  color: var(--ls-mv-dim);
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1;
}

.ls-mv__out:hover {
  color: var(--ls-mv-fg);
  border-color: var(--ls-mv-dim);
}

.ls-mv__pickheading--video {
  margin-top: 22px;
}

.ls-mv__pick--video .ls-mv__pickname {
  font-weight: 550;
}