/* A grade da Twitch usa a mesma estrutura visual da GridLives do app.
   Os players mantêm a área útil mínima de 400×300 exigida pela Twitch. */
:root {
  color-scheme: dark;
  --bg: #0d0d14; --surface: #15151f; --surface-2: #1d1d29; --surface-3: #262636;
  --border: #2a2a38; --border-strong: #3a3a4c; --text: #e8e8ef;
  --text-dim: #a8a8bb; --text-faint: #707086; --purple: #7c3aed;
  --purple-bright: #a78bfa; --green: #34d399; --danger: #fb7185;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden; color: var(--text);
  background: radial-gradient(900px 520px at 85% -20%, rgba(124,58,237,.12), transparent 60%), var(--bg);
}
button { font: inherit; }
.painel { width: 100%; height: 100%; padding: 14px; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(0,0,0,.24);
}
.grid-card {
  height: 100%; min-height: 0; display: flex; flex-direction: column;
  gap: 8px; padding: 12px 14px;
}
.grid-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex: 0 0 auto;
}
.grid-card-head h2 { margin: 0; font-size: 14.5px; line-height: 30px; font-weight: 700; }
.grid-card-head-right { min-width: 0; display: flex; align-items: center; gap: 8px; }
.chip-count {
  min-width: 0; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface-2); color: var(--text-dim); font-size: 11.5px; white-space: nowrap;
}
.estado { max-width: min(42vw, 520px); overflow: hidden; text-overflow: ellipsis; }
.grid-card.ativo .estado { color: var(--green); border-color: rgba(52,211,153,.34); }
.live-dot {
  width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%;
  background: #ff5c5c; box-shadow: 0 0 6px rgba(255,92,92,.8);
}
.tool-btn {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-dim); cursor: pointer;
}
.tool-btn:hover { color: var(--text); border-color: var(--border-strong); }
.btn-ver-kick {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface-2); color: var(--text-dim); font-size: 11.5px; font-weight: 600;
  cursor: pointer;
}
.btn-ver-kick:hover { color: #fff; background: var(--purple); border-color: var(--purple); }
.tool-btn.fechar { font-size: 20px; line-height: 1; }
.tool-btn.fechar:hover { color: var(--danger); border-color: rgba(251,113,133,.45); }
.corte {
  margin: 0; padding: 8px 11px; flex: 0 0 auto;
  border: 1px solid rgba(139,92,246,.28); border-radius: var(--r-sm);
  background: rgba(139,92,246,.09); color: #c4b5fd; font-size: 11.5px;
}
.tiles-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.grid-section {
  flex: 1; min-width: 0; min-height: 0; display: flex;
  flex-direction: column; gap: 12px;
}
.grid-section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 12px;
  margin: 0; padding: 0 2px 9px; flex: 0 0 auto; border-bottom: 1px solid var(--border);
}
.grid-section-head h3 { margin: 0; color: var(--text); font-size: 15px; line-height: 1.15; }
.grid-section-head > span { color: var(--purple-bright); font-size: 11px; font-weight: 700; }
.tiles-grid {
  flex: 1; min-width: 0; min-height: 0; display: grid;
  /* 0377: até 2 colunas × 2 linhas; `--cols` vem do painel.js. As telas
     crescem para ocupar a janela em vez de ficarem presas em 350px. */
  grid-template-columns: repeat(var(--cols, 2), minmax(402px, 1fr));
  grid-auto-rows: minmax(350px, 1fr); align-content: stretch; gap: 10px; overflow: hidden;
}
.grid-live-card {
  position: relative; min-width: 0; min-height: 350px;
  display: flex; flex-direction: column; gap: 8px;
}
.tile {
  position: relative; min-width: 400px; min-height: 300px; flex: 1 1 auto;
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md);
  background: #000; contain: paint style; transform: translateZ(0);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.grid-live-card.tocando .tile { border-color: rgba(52,211,153,.52); }
.grid-live-card.bloqueado .tile { border-color: rgba(251,113,133,.58); }
.grid-live-card.com-som .tile { box-shadow: 0 0 0 2px var(--purple-bright); }
.player, .player iframe { width: 100%; height: 100%; min-height: 300px; display: block; border: 0; }
.grid-live-profile {
  min-width: 0; height: 42px; display: flex; align-items: center;
  gap: 9px; padding: 0 2px;
}
.grid-live-avatar {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  overflow: hidden; border: 2px solid rgba(255,255,255,.14); border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 800;
}
.grid-live-identidade { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.grid-live-identidade strong, .grid-live-identidade span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grid-live-identidade strong { color: var(--text); font-size: 12.5px; line-height: 1.15; }
.grid-live-identidade span { color: var(--text-dim); font-size: 11px; }
.badge-live {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: 100px; background: rgba(0,0,0,.48);
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.badge-live .live-dot { width: 6px; height: 6px; }
.grid-live-audio {
  width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-2); color: var(--text-dim); cursor: pointer;
}
.grid-live-audio:hover, .grid-live-audio.is-on { color: #fff; border-color: var(--purple); background: var(--purple); }
.grid-live-audio svg { width: 13px; height: 13px; fill: currentColor; }
.grid-sem-lives {
  position: absolute; top: 45%; left: 10%; right: 10%; margin: 0;
  text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.6;
}
.grid-sem-lives small { color: var(--text-faint); }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .estado { display: none; }
  .painel { padding: 8px; }
  .grid-card { padding: 10px; }
}