/* ========== Theme & globals ========== */
:root{
  --maxw: 1400px;
  --pad: 16px;
  --header-h: 56px;

  --bg: #0b0b0b;
  --fg: #e9e9e9;
  --muted: #9aa0a6;

  --accent: #ff3a3a;
  --card: #101214;
  --border: #202225;
}

html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: calc(var(--pad) + var(--header-h)) var(--pad) var(--pad); /* space for sticky header */
  overflow: auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ========== Sticky top bar ========== */
.topbar{
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  background: rgba(12,12,12,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}
.topbar-inner{
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--fg);
  font-weight: 700; letter-spacing: .2px; transition: opacity .15s ease;
}
.brand:hover { opacity: .85; }
.brand .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}

/* ========== Category grid (index) ========== */
.cat-grid-wrap{ width: 100%; display: grid; place-items: center; }
.cat-grid{
  width: min(100%, 900px);
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
  padding: 6px 0 0 0;
}
@media (max-width: 640px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-chip{
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #15181c, #0f1114);
  border: 1px solid var(--border);
  color: var(--fg);
  font-weight: 650;
  font-size: 15px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: transform .05s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.cat-chip:hover { border-color: #2c3138; background: #13161a; box-shadow: 0 8px 22px rgba(0,0,0,.33); }
.cat-chip:active { transform: translateY(1px); }
.cat-chip .left{ display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cat-chip .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.cat-chip .label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-chip .arrow{ opacity: .8; transform: translateX(0); transition: transform .15s ease, opacity .15s ease; font-size: 14px; }
.cat-chip:hover .arrow{ transform: translateX(2px); opacity: 1; }

/* ========== Schedule list (schedule.html) ========== */
.list{ width: 900px; max-width: 100%; padding: 6px 0 0 0; }

.game-row{
  width: 100%;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #15181c, #0f1114);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background .15s, border-color .15s, transform .05s;
  margin-bottom: 12px;
}
.game-row:hover{ background: #13161a; border-color: #2c3138; }
.game-row:active{ transform: translateY(1px); }
.sport{ font-size: 18px; opacity: .9; }
.name{ flex: 1; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag{ font-size: 12px; color: var(--muted); border: 1px solid #2a2d2f; padding: 2px 6px; border-radius: 999px; }
.chev{ opacity: .8; transition: transform .15s; }
.game-row.open .chev{ transform: rotate(180deg); }

.streams{
  display: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0e1014;
  padding: 12px; margin: 8px 0 14px;
}
.group{ display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.group-title{ font-size: 13px; color: var(--muted); letter-spacing: .2px; }
.btn-row{ display: flex; flex-wrap: wrap; gap: 8px; }

.mini-btn{
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--fg);
  font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid #2a2d33; background: #13161a;
  transition: background .15s, border-color .15s, transform .05s;
}
.mini-btn:hover{ background: #161a20; border-color: #343a42; }
.mini-btn:active{ transform: translateY(1px); }
.mini-btn .pill{ font-size: 11px; color: #c6c9ce; border: 1px solid #3a3f46; padding: 2px 6px; border-radius: 999px; }
.mini-btn.hd{ border-color: rgba(255,58,58,.6); box-shadow: 0 0 0 1px rgba(255,58,58,.15) inset; }

/* ========== Player page (player.html) ========== */
.title-wrap{
  width: min(100%, 1200px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0 0 0;
}
.title{ margin: 0; font-size: 25px; font-weight: 800; letter-spacing: .2px; }
.badge{ font-size: 12px; color: #cbd1d8; border: 1px solid #2a2d2f; padding: 3px 8px; border-radius: 999px; }

/* Player area shell */
.ratio{
  position: relative;
  width: min(100%, 1200px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  display: none; /* shown after iframe injection */
}
.ratio iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Loading + fallback */
.loading-circle-ply{
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(transparent, rgba(0,0,0,.35)); z-index: 2;
}
.msg{ color: #cbd1d8; font-size: 14px; opacity: .85; text-align: center; }