/* Greybox Sports — /sports view. Everything scoped under #sports-page /
 * .gxs-*, palette from css/tokens.css. Layout: player + channel directory on
 * the left, live score column on the right; single column under 1024px. */

.gx-sports-mode { background: #000; }

.gxs-page {
  padding: 132px 0 60px;
  min-height: calc(100vh - 74px);
  animation: gxsr-rise .4s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes gxsr-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- header ---------------- */
.gxs-intro { max-width: 760px; margin-bottom: 1.1rem; }

.gxs-kicker {
  font: 500 .74rem/1 "DM Mono", monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gx-accent);
  margin-bottom: .55rem;
}

.gxs-h1 {
  font: 700 clamp(1.9rem, 3.4vw, 2.7rem)/1.08 "Space Grotesk", sans-serif;
  color: var(--gx-text);
  letter-spacing: -.015em;
  margin-bottom: .5rem;
}

.gxs-sub { color: var(--gx-text-dim); font-size: .96rem; line-height: 1.55; }

.gxs-sub b { color: var(--gx-text); font-weight: 600; }

.gxs-cats {
  display: flex;
  gap: .5rem;
  margin: 1.15rem 0 1.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .2rem;
}
.gxs-cats::-webkit-scrollbar { display: none; }

.gxs-chip {
  flex: 0 0 auto;
  padding: .5rem .95rem;
  border-radius: var(--gx-radius-pill);
  background: var(--gx-glass);
  border: 1px solid var(--gx-border);
  box-shadow: var(--gx-glass-highlight);
  color: var(--gx-text-dim);
  font: 600 .84rem/1 "Manrope", sans-serif;
  cursor: pointer;
  transition: background var(--gx-transition), color var(--gx-transition), border-color var(--gx-transition);
}
.gxs-chip:hover { color: var(--gx-text); border-color: var(--gx-border-strong); }
.gxs-chip.is-on {
  background: var(--gx-accent-soft);
  border-color: var(--gx-accent-border);
  color: var(--gx-accent-strong);
}

/* ---------------- layout ---------------- */
.gxs-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 1.35rem;
  align-items: start;
}

.gxs-main { min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.gxs-side { min-width: 0; }

.gxs-h2 {
  font: 700 1.05rem/1.2 "Space Grotesk", sans-serif;
  color: var(--gx-text);
  margin: 0 0 .7rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.gxs-h2 .gxs-h2-hint {
  font: 500 .72rem/1 "DM Mono", monospace;
  color: var(--gx-text-faint);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------------- player ---------------- */
.gxs-player {
  background: #000;
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-pop);
  overflow: hidden;
  box-shadow: var(--gx-shadow-soft);
}

.gxs-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  border: 0;
  background: #000;
}

.gxs-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .7rem .95rem;
  background: var(--gx-glass-strong);
  border-top: 1px solid var(--gx-border);
}

.gxs-player-name { color: var(--gx-text); font-weight: 700; font-size: .92rem; }

.gxs-link {
  color: var(--gx-accent-strong);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.gxs-link:hover { text-decoration: underline; }

.gxs-player-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .55rem;
  padding: clamp(2rem, 6vw, 3.4rem) 1.4rem;
  min-height: 300px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%),
    var(--gx-glass);
}

.gxs-player-logo { width: 58px; height: 58px; border-radius: 14px; padding: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--gx-border); }

.gxs-player-title {
  font: 700 1.25rem/1.2 "Space Grotesk", sans-serif;
  color: var(--gx-text);
  margin: .3rem 0 0;
}

.gxs-player-note { color: var(--gx-text-dim); font-size: .9rem; max-width: 46ch; margin: 0; line-height: 1.5; }

.gxs-player-status {
  color: var(--gx-text-faint);
  font-size: .8rem;
  margin: .1rem 0 .4rem;
}

.gxs-btn {
  display: inline-block;
  padding: .62rem 1.1rem;
  border-radius: var(--gx-radius-pill);
  background: var(--gx-accent-soft);
  border: 1px solid var(--gx-accent-border);
  color: var(--gx-accent-strong);
  font: 700 .86rem/1 "Manrope", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gx-transition), transform var(--gx-transition);
}
.gxs-btn:hover { background: rgba(208, 162, 79, .22); transform: translateY(-1px); }

/* ---------------- channel directory ---------------- */
.gxs-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: .75rem; }

.gxs-channel {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  text-align: left;
  padding: .8rem .85rem;
  border-radius: var(--gx-radius-pop);
  background: var(--gx-glass);
  border: 1px solid var(--gx-border);
  box-shadow: var(--gx-glass-highlight);
  cursor: pointer;
  transition: border-color var(--gx-transition), background var(--gx-transition), transform var(--gx-transition);
}
.gxs-channel:hover { border-color: var(--gx-border-strong); background: var(--gx-glass-strong); transform: translateY(-1px); }
.gxs-channel.is-active { border-color: var(--gx-accent-border); background: var(--gx-glass-strong); }

.gxs-ch-logo {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--gx-border-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gxs-ch-logo img { width: 26px; height: 26px; object-fit: contain; }

.gxs-ch-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .16rem; }

.gxs-ch-name {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--gx-text);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.25;
}

.gxs-ch-note {
  color: var(--gx-text-dim);
  font-size: .78rem;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gxs-ch-kind {
  color: var(--gx-text-faint);
  font: 500 .68rem/1 "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gxs-ch-go { color: var(--gx-text-faint); font-size: 1rem; flex: 0 0 auto; }
.gxs-channel.is-active .gxs-ch-go { color: var(--gx-accent-strong); }

.gxs-live {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .45rem;
  border-radius: var(--gx-radius-pill);
  background: rgba(239, 68, 68, .16);
  border: 1px solid rgba(239, 68, 68, .45);
  color: #fca5a5;
  font: 700 .62rem/1 "DM Mono", monospace;
  letter-spacing: .1em;
}

.gxs-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .6);
  animation: gxsr-pulse 1.6s ease-out infinite;
}

@keyframes gxsr-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); }
  70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ---------------- scores column ---------------- */
.gxs-scores { display: flex; flex-direction: column; gap: .8rem; }

.gxs-league {
  background: var(--gx-glass);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-pop);
  box-shadow: var(--gx-glass-highlight);
  overflow: hidden;
}

.gxs-league-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .68rem .85rem;
  font: 700 .82rem/1.2 "Manrope", sans-serif;
  color: var(--gx-text);
  background: rgba(255, 255, 255, .035);
  border-bottom: 1px solid var(--gx-border-faint);
}

.gxs-league-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gx-accent); flex: 0 0 auto; }

.gxs-league-count {
  margin-left: auto;
  color: var(--gx-text-faint);
  font: 500 .68rem/1 "DM Mono", monospace;
}

.gxs-league-matches { display: flex; flex-direction: column; }

.gxs-match {
  display: block;
  padding: .68rem .85rem;
  text-decoration: none;
  border-bottom: 1px solid var(--gx-border-faint);
  transition: background var(--gx-transition);
}
.gxs-match:last-child { border-bottom: 0; }
a.gxs-match:hover { background: rgba(255, 255, 255, .045); }

.gxs-match-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .42rem; }

.gxs-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .14rem .42rem;
  border-radius: 6px;
  font: 700 .62rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gxs-badge-live { background: rgba(239, 68, 68, .15); border: 1px solid rgba(239, 68, 68, .4); color: #fca5a5; }
.gxs-badge-pre { background: var(--gx-glass-wash); border: 1px solid var(--gx-border); color: var(--gx-text-dim); }
.gxs-badge-ft { background: var(--gx-glass-wash); border: 1px solid var(--gx-border-faint); color: var(--gx-text-faint); }

.gxs-match-clock { color: var(--gx-text-faint); font: 500 .68rem/1 "DM Mono", monospace; }

.gxs-match-row { display: flex; align-items: center; gap: .55rem; padding: .16rem 0; }
.gxs-tlogo { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.gxs-tname { color: var(--gx-text-dim); font-size: .86rem; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gxs-tscore { color: var(--gx-text); font: 700 .92rem/1 "DM Mono", monospace; min-width: 1.4em; text-align: right; }

/* ---------------- states ---------------- */
.gxs-empty { color: var(--gx-text-faint); font-size: .84rem; line-height: 1.55; padding: .6rem .2rem; }
.gxs-error { color: #fca5a5; }

.gxs-skel-league {
  height: 92px;
  border-radius: var(--gx-radius-pop);
  background: linear-gradient(100deg, var(--gx-glass) 30%, rgba(255, 255, 255, .09) 50%, var(--gx-glass) 70%);
  background-size: 220% 100%;
  animation: gxsr-shimmer 1.3s linear infinite;
  border: 1px solid var(--gx-border-faint);
}

@keyframes gxsr-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -40% 0; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 1024px) {
  .gxs-body { grid-template-columns: minmax(0, 1fr); }
  .gxs-side { order: 3; }
}

@media (max-width: 640px) {
  .gxs-page { padding: 116px 0 48px; }
  .gxs-channels { grid-template-columns: minmax(0, 1fr); }
  .gxs-frame { min-height: 200px; }
}