/* ==========================================================================
   streamonsport — visual identity carried over from the original theme.

   Palette, typography and component shapes are the ones already in use
   (#070916 ground, Ropa Sans, the .map league sprite, the "Regarder en HD"
   button, the #0a0f27 .compz strip). What changed is the delivery: this file
   replaces Bootstrap 5 + the old stylesheet entirely.

   L'accent a été désaturé depuis : il n'est pas qu'une couleur de lien, c'est
   le fond plein du bouton « Regarder », et un ton vif y devient une surface
   qui éblouit. Chaque valeur est mesurée — encre sur accent et accent sur
   ligne dépassent 4.5:1, le seuil de lisibilité.
   ========================================================================== */

:root {
  --ground:        #070916;
  --panel:         rgba(0, 0, 0, .5);
  --panel-soft:    rgba(0, 0, 0, .3);
  --row:           #02040c;
  --row-border:    #0e163d;
  --row-hover:     rgba(47, 168, 161, .15);
  --strip:         #0a0f27;
  --accent:        #2fa8a1;
  --accent-hot:    #3dbdb5;
  --accent-ink:    #02040c;
  --text:          #ffffff;
  --muted:         #93a0bd;
  --live:          #e2606b;
  --radius:        6px;
  --gap:           10px;
  --max:           1100px;
  --font:          'Ropa Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hot); }

img { max-width: 100%; height: auto; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 8px; }

/* ------------------------------------------------------------------ header */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  background: var(--panel);
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: var(--radius);
}

.brand img { display: block; height: 52px; width: auto; }
.brand-text { font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: .5px; }

/* La recherche vit maintenant au-dessus de la liste, dans .list-toolbar ; le
   bandeau d'en-tête a pris sa place. Les deux règles sont gardées ensemble :
   c'est le même champ, déplacé. */
.ad-head { flex: 0 1 auto; margin-left: auto; line-height: 0; }
.list-search { display: flex; gap: 6px; }
.list-search .filter-input { flex: 1; min-width: 0; }
.list-search button {
  flex: 0 0 auto;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  /* L'encre du thème, pas un blanc en dur : sur un accent de ton moyen le
     blanc tombe sous le seuil de lisibilité, et chaque thème sait quelle
     encre se lit sur le sien. */
  color: var(--accent-ink);
  font-size: 18px;
  line-height: 1;
  padding: 0 14px;
  cursor: pointer;
}

.head-search { display: flex; gap: 6px; flex: 0 1 340px; }
.head-search input {
  flex: 1;
  min-width: 0;
  background: var(--row);
  border: 1px solid var(--row-border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
}
.head-search input::placeholder { color: var(--muted); }
.head-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.head-search button {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  padding: 0 16px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.head-search button:hover { background: var(--accent-hot); }

/* --------------------------------------------------------------- navigation */

.primary-navigation {
  background: rgba(150, 150, 150, .31);
  margin-top: 10px;
  border-radius: var(--radius);
  padding: 4px;
}
.primary-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-navigation .nav-link {
  display: block;
  color: #fff;
  background: rgba(0, 0, 0, .7);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
}
.primary-navigation .nav-link:hover { background: #000; color: var(--accent); }
.primary-navigation .nav-link.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* --------------------------------------------------------------------- grid */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
  gap: var(--gap);
  margin-top: 10px;
  align-items: start;
}
.main-content { min-width: 0; }
.layer { background: var(--panel-soft); border-radius: var(--radius); padding: 6px; }
.box {
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: var(--gap);
}
.box:last-child { margin-bottom: 0; }

.sidebar { position: sticky; top: 10px; }
.chat-box { padding: 8px; }
/* Held back until app.js decides the viewport is wide enough — see initChat. */
.chat-box[hidden] { display: none; }
.chat-inner, .chat-inner iframe { width: 100%; min-height: 640px; border: 0; }

.ad { text-align: center; margin: 0 0 var(--gap); overflow: hidden; }
.ad-leaderboard { padding: 4px 0; }

/* ----------------------------------------------------------------- headings */

.page-h1 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 10px;
  font-weight: 700;
}

.breadcrumb {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb .crumb-sep { color: #3a4568; }
.crumb-current { color: var(--text); }

.compz {
  font-weight: 600;
  text-align: center;
  background: var(--strip);
  font-size: 18px;
  padding: 7px 10px;
  border-radius: 4px;
  margin: 10px 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.compz .counts { font-size: 13px; font-weight: 400; color: var(--muted); }

.day-heading {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--row-border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.day-heading:first-child { margin-top: 4px; }
.day-count {
  background: var(--row-border);
  color: var(--text);
  border-radius: 10px;
  padding: 0 8px;
  font-size: 12px;
}

/* -------------------------------------------------------------- quick links */

.quick-leagues { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--row);
  border: 1px solid var(--row-border);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 32px;
  font-size: 14px;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill-count { color: var(--muted); font-size: 12px; }

.list-toolbar { margin-bottom: 4px; }
.filter-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.filter-input::placeholder { color: var(--muted); }
.filter-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------------- event rows */

.events { display: block; }

/* ------------------------------------------------------------------ la porte
   Le lecteur inerte d'un site-porte : même cadre, même bouton, mais rien à
   lire — le lien vers le site qui diffuse apparaît une fois l'annonce ouverte. */
.gate-hint { text-align: center; }

/* Le lien prend la place exacte du bouton de lecture — même centre, même
   lecteur — parce que c'est le même geste, poursuivi. */
.gate-go {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 86%;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.gate-go:hover { background: var(--accent-hot); }
.gate-go[hidden] { display: none; }

/* La ligne n'est plus un <a> : elle en contient un, étiré sur toute sa surface,
   pour que le bouton « Regarder » puisse être un lien à son tour — deux <a>
   imbriqués n'existent pas. Le lien étiré reste le seul que suit un robot. */
.event { position: relative; }
.event-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.event .button-regarder { position: relative; z-index: 2; }

/* Visible pour un lecteur d'écran, invisible à l'œil : le lien étiré est vide
   et a besoin d'un nom. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.event {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 8px;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 3px;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease;
}
.event:hover { background: var(--row-hover); border-color: var(--accent); color: var(--text); }
.event[hidden] { display: none; }

.event-logo { display: flex; justify-content: center; align-items: center; min-height: 44px; }

.event-details { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-width: 0; }

.game-name {
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
  line-height: 1.2;
  word-break: break-word;
}

.houre { font-size: 13px; color: var(--muted); margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.houre .sep { opacity: .6; margin: 0 3px; }
.league-name { color: var(--muted); }
.event:hover .league-name { color: var(--accent); }

/* The competition sits on the kickoff line, straight from the code map. */
.meta-cat {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
}
.meta-country { color: var(--muted); }
.meta-league { color: #cdd6ea; font-weight: 600; }
.meta-sep { color: #39456b; }

.event-langs { display: inline-flex; gap: 3px; align-items: center; }
.lang-flag { width: 16px; height: 12px; border-radius: 2px; display: block; }

/* --- Channel directory ------------------------------------------------- */

.channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }

.channel-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--text);
  transition: background .15s ease, border-color .15s ease;
}
.channel-card:hover { background: var(--row-hover); border-color: var(--accent); color: var(--text); }
.channel-card[hidden] { display: none; }

.channel-flag { display: flex; align-items: center; justify-content: center; }
.channel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-name { font-weight: 600; font-size: 15px; line-height: 1.2; word-break: break-word; }
.channel-meta { font-size: 12px; color: var(--muted); display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.channel-lang { color: var(--accent); font-weight: 700; letter-spacing: .4px; }
.channel-card .button-regarder { grid-column: 1 / -1; min-width: 0; width: 100%; }

.button-regarder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-transform: uppercase;
  min-width: 160px;
  height: 20px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 10px;
  margin-top: 3px;
}
.button-regarder::before { content: '\25BA'; font-size: 12px; }
.event:hover .button-regarder { background: var(--accent-hot); }

.clock-container {
  text-align: center;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-height: 26px;
}
.event.is-live .scdw, .scdw.is-live { color: var(--live); font-weight: 700; text-transform: uppercase; }
.event.is-live { border-color: rgba(226, 96, 107, .45); }

.empty, .no-results { color: var(--muted); padding: 18px 4px; text-align: center; }

/* ------------------------------------------------------------ league header */

.league-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.league-sub { color: var(--muted); font-size: 14px; margin: 2px 0 0; }

/* -------------------------------------------------------------- match page */

.match-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 8px;
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  padding: 10px 8px;
  margin-bottom: 10px;
}
.match-title { text-align: center; }
.match-title .game-name { font-size: 20px; display: block; }

#kakarotvideo {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 6px -1px rgba(7, 10, 25, .5), 0 6px 12px -6px rgba(7, 10, 25, .6);
}

/* Status bar above the server row: which mirror is playing, plus tools. */
.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #12182f;
  border-bottom: 1px solid var(--row-border);
  padding: 7px 10px;
  font-size: 13px;
}
.player-now { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.player-now b { color: var(--text); }
.player-now .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(255, 59, 59, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}
.player-tools { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.server-count { color: var(--muted); font-size: 12px; }
.ptool {
  background: var(--row);
  border: 1px solid var(--row-border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ptool:hover { border-color: var(--accent); color: var(--accent); }

.lang-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 8px 0;
  background: #1a1a1a;
}
.lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #222;
  border: 1px solid transparent;
  color: #cfd6e6;
  border-radius: 20px;
  padding: 3px 11px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.lang-chip:hover { border-color: var(--accent); }
.lang-chip.is-on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.chip-n { opacity: .7; font-size: 11px; }

.player-help {
  margin: 0;
  padding: 8px 10px;
  background: #12182f;
  border-top: 1px solid var(--row-border);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.servideo {
  display: flex;
  gap: 6px;
  padding: 8px 6px;
  background: #1a1a1a;
  overflow-x: auto;
  scrollbar-width: thin;
}
.change-video[hidden] { display: none; }
.servideo::-webkit-scrollbar { height: 8px; }
.servideo::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

.change-video {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #222;
  color: #eee;
  border: 0;
  border-radius: 4px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s;
}
.change-video img { width: 16px; height: 12px; border-radius: 2px; display: block; }
.change-video:hover, .change-video.bactive { background: var(--accent); color: #222; }
.change-video.bactive::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.vi-on {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.vi-on img, .vi-on iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vi-on img { object-fit: cover; opacity: .55; }

.player-caption {
  position: absolute;
  top: 12%;
  width: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #ffe100;
  text-shadow: 2px 2px 4px #000;
  z-index: 2;
  padding: 0 10px;
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  background: rgba(0, 0, 0, .7);
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.25, 1, .3, 1), background .3s;
}
.play:hover { transform: translate(-50%, -50%) scale(1.12); background: var(--accent); }
.play span { border: 14px solid transparent; border-left-color: #fff; margin-left: 16px; }
.play:hover span { border-left-color: var(--accent-ink); }

.player-empty {
  background: var(--row);
  border: 1px dashed var(--row-border);
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
}
.player-empty .muted { color: var(--muted); font-size: 14px; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; justify-content: center; }
.share-label { color: var(--muted); font-size: 14px; }
.share a {
  background: var(--row);
  border: 1px solid var(--row-border);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 14px;
}
.share a:hover { border-color: var(--accent); }

.see-all { text-align: center; margin: 10px 0 0; }

/* ------------------------------------------------------------------- prose */

.prose { font-size: 15px; line-height: 1.6; }
.prose h1 { font-size: 20px; margin: 0 0 8px; }
.prose h2 { font-size: 17px; margin: 16px 0 6px; color: var(--accent); }
.prose p { margin: 0 0 10px; }
.prose ul { margin: 0 0 10px; padding-left: 20px; }
.prose li { margin-bottom: 4px; }
.prose strong { color: #fff; }

/* ------------------------------------------------------------------ footer */

.site-foot { margin: var(--gap) 0; }
.site-foot .box { text-align: center; }
.disclaimer { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 8px; }
.copy { color: var(--muted); font-size: 12px; margin: 0; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 992px) {
  .grid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .chat-inner, .chat-inner iframe { min-height: 420px; }
}

@media (max-width: 640px) {
  /* One column on a phone, for a row of the programme and for the header of a
     match or a channel alike — they are the same three-cell grid. Dropping to
     a single track stacks the cells in source order (badge, then the match,
     then the countdown) instead of squeezing them into 360px side by side.
     The cells keep stretching to the full width: all three already centre
     their own content, and "Regarder en HD" is sized as a share of the cell. */
  .event,
  .match-head {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 8px;
  }
  .event-logo,
  .clock-container { min-height: 0; }

  .game-name { font-size: 15px; }
  .match-title .game-name { font-size: 17px; }
  .clock-container { font-size: 15px; }
  .button-regarder { min-width: 0; width: 100%; max-width: 200px; }
  .page-h1 { font-size: 19px; }
  .player-caption { font-size: 15px; }
  .head-search { flex: 1 1 100%; }
  .site-head { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}