/* ════════════════════════════════════════════
   SkorPadu – Tournament Public View
   assets/css/tournament-view.css
════════════════════════════════════════════ */

/* ── BANNER ── */
.tv-banner-wrap {
  width: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 320px;
  overflow: hidden;
  line-height: 0;
}
.tv-banner-img {
  width: 100%;
  max-width: 1200px;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── HERO ── */
.tv-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pc, #6C3CE1) 0%, #0f0f1a 60%, var(--sc, #00D4AA) 120%);
  padding: 90px 0 0;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
}
.tv-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .35;
  pointer-events: none;
}
.tv-hero-g1 {
  width: 440px; height: 440px;
  background: var(--pc, #6C3CE1);
  top: -120px; left: -80px;
}
.tv-hero-g2 {
  width: 360px; height: 360px;
  background: var(--sc, #00D4AA);
  bottom: -100px; right: -60px;
}
.tv-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 24px;
}
.tv-hero-icon {
  flex-shrink: 0;
  width: 68px; height: 68px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: #fff;
}
.tv-hero-text { flex: 1; min-width: 0; }
.tv-hero-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.tv-hero-cat {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 6px;
}
/* Small status chip — sits beside category label, above title */
.tv-status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--sc, #22c55e);
  color: rgba(255,255,255,.8);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.tv-status-chip .tv-status-dot {
  background: var(--sc, #22c55e);
}
.tv-hero-title {
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  background: linear-gradient(135deg, #fff 40%, var(--sc, #00D4AA));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 14px;
  word-break: break-word;
}
.tv-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .78rem;
  backdrop-filter: blur(6px);
}
.tv-status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sc, #22c55e);
}
.tv-pill-live {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.45);
  color: #fca5a5;
  font-weight: 700;
  letter-spacing: .05em;
}
.tv-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: tvPulse 1.2s ease-in-out infinite;
}
@keyframes tvPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(1.4); }
}

/* ── STATS BAR ── */
.tv-stats {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 14px 0;
  flex-wrap: wrap;
}
.tv-stat {
  flex: 1; min-width: 90px;
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 4px 12px;
}
.tv-stat-num {
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.tv-stat-lbl {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
}
.tv-stat-div {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* ── STICKY TABS ── */
.tv-tabs-wrap {
  background: var(--bg-card, #151520);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  z-index: 200;
  transition: box-shadow .25s;
}
.tv-tabs-sticky {
  position: sticky;
  top: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.tv-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 10px 4px;
  scrollbar-width: none;
}
.tv-tabs::-webkit-scrollbar { display: none; }
.tv-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary, rgba(255,255,255,.55));
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  position: relative;
}
.tv-tab:hover { background: rgba(255,255,255,.06); color: #fff; }
.tv-tab.active {
  background: rgba(108,60,225,.22);
  color: var(--primary-light, #a78bfa);
}
.tv-tab-live {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 0 5px;
}

/* ── BODY ── */
.tv-body { padding: 32px 0 60px; }
.tv-panel { animation: tvFadeIn .25s ease; }
@keyframes tvFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── EMPTY STATE ── */
.tv-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-secondary, rgba(255,255,255,.5));
}
.tv-empty-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
  opacity: .35;
}
.tv-empty h3 { color: var(--text-primary,#fff); margin: 0 0 8px; }
.tv-empty p  { font-size: .9rem; margin: 0; }

/* ── LIVE GRID ── */
.tv-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 16px;
}
.tv-live-card {
  background: var(--bg-card, #151520);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.tv-live-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 16px;
  border: 2px solid rgba(239,68,68,.3);
  animation: tvLiveBorder 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tvLiveBorder {
  0%,100% { opacity: 1; }
  50%      { opacity: .25; }
}
.tv-live-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tv-live-round { font-size: .75rem; color: var(--text-secondary,rgba(255,255,255,.5)); text-transform: uppercase; letter-spacing: .1em; }
.tv-live-badge  { display: flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; color: #f87171; letter-spacing: .1em; }
.tv-live-teams  { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 16px; }
.tv-live-team   { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tv-live-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 800; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  flex-shrink: 0;
}
.tv-live-tname  { font-size: .82rem; font-weight: 600; color: var(--text-primary,#fff); text-align: center; word-break: break-word; }
.tv-live-score  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tv-live-s {
  font-size: 2.6rem; font-weight: 900;
  color: #fff; line-height: 1;
  min-width: 40px; text-align: center;
}
.tv-live-sep { font-size: 1.6rem; color: rgba(255,255,255,.3); font-weight: 300; }
.tv-live-ht {
  text-align: center;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: #fbbf24;
  background: rgba(251,191,36,.1);
  padding: 6px;
  border-top: 1px solid rgba(251,191,36,.2);
}
.tv-auto-refresh { text-align: center; font-size: .78rem; color: var(--text-secondary,rgba(255,255,255,.4)); margin: 4px 0 0; }

/* ── SCHEDULE ── */
.tv-round { margin-bottom: 32px; }
.tv-round-label {
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--primary-light, #a78bfa);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.tv-round-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(167,139,250,.25), transparent);
}

.tv-fixture {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--bg-card, #151520);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  transition: border-color .2s, transform .15s;
}
.tv-fixture:hover { border-color: rgba(255,255,255,.15); transform: translateY(-1px); }
.tv-fixture.is-live { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.04); }
.tv-fixture.is-done { opacity: .75; }

.tv-fix-home, .tv-fix-away {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.tv-fix-away { flex-direction: row-reverse; text-align: right; }
.tv-fix-logo {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ct-group-code {
  flex-shrink: 0;
  min-width: 28px;
  text-align: center;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(135deg, #7C4CF5 0%, #b07cf8 100%);
  border: none;
  border-radius: 6px;
  padding: 3px 7px;
  box-shadow: 0 2px 8px rgba(124,76,245,.45);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.tv-fix-name {
  font-size: .88rem; font-weight: 600;
  color: var(--text-primary, #fff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}

.tv-fix-mid {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 100px;
}
.tv-fix-score {
  font-size: 1.2rem; font-weight: 800; color: #fff;
}
.tv-fix-score--sets {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.tv-sets-detail {
  font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.65);
  letter-spacing: .01em;
}
.tv-sets-total {
  font-size: 1rem; font-weight: 800; color: #fff;
}
.tv-fix-sep { color: rgba(255,255,255,.3); margin: 0 4px; }
.tv-fix-live-score {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.3rem; font-weight: 800; color: #fff;
}
.tv-fix-live-dot-wrap { display: flex; align-items: center; }
.tv-fix-date {
  display: flex; flex-direction: column; align-items: center;
  font-size: .78rem; color: var(--text-secondary,rgba(255,255,255,.5));
  gap: 2px;
}
.tv-fix-vs {
  font-size: .75rem; font-weight: 700;
  color: rgba(255,255,255,.3);
  letter-spacing: .1em;
}
.tv-fix-venue {
  font-size: .68rem; color: rgba(255,255,255,.35);
  display: flex; align-items: center; gap: 4px;
}

/* ── STANDINGS ── */
.tv-grp-title {
  font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--primary-light, #a78bfa);
  margin: 28px 0 10px;
}
.tv-standings-wrap {
  background: var(--bg-card, #151520);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  overflow: hidden;
  overflow-x: auto;
  margin-bottom: 20px;
}
.tv-table {
  width: 100%; border-collapse: collapse;
  white-space: nowrap;
  font-size: .88rem;
}
.tv-table thead tr {
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tv-table th {
  padding: 10px 14px;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary, rgba(255,255,255,.5));
  text-align: center;
}
.tv-th-left, .tv-td-team { text-align: left !important; }
.tv-th-pts, .tv-td-pts {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--primary-light, #a78bfa) !important;
}
.tv-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.tv-table tbody tr:hover      { background: rgba(255,255,255,.04); }
.tv-table tbody tr.tv-qualify { background: rgba(108,60,225,.1); border-left: 3px solid var(--primary-light,#a78bfa); }
.tv-table td { padding: 10px 14px; text-align: center; color: var(--text-primary,#fff); }
.tv-td-team { display: flex !important; align-items: center; gap: 10px; min-width: 180px; }
.tv-team-logo {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: #fff;
}
.tv-team-nm { font-weight: 600; color: var(--text-primary,#fff); }
.tv-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 6px;
  font-size: .78rem; font-weight: 700;
  background: rgba(255,255,255,.08);
  color: var(--text-secondary, rgba(255,255,255,.5));
}
.tv-rank-1 { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #1a1a2e; }
.tv-rank-2 { background: linear-gradient(135deg,#e2e8f0,#94a3b8); color: #1a1a2e; }
.tv-rank-3 { background: linear-gradient(135deg,#c97f3e,#a36030); color: #fff; }

/* ── TEAMS GRID ── */
.tv-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.tv-team-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card, #151520);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .2s, transform .15s;
}
.tv-team-card:hover { border-color: rgba(255,255,255,.15); transform: translateY(-2px); }
.tv-tc-logo {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.tv-tc-info { flex: 1; min-width: 0; }
.tv-tc-name {
  font-weight: 700; font-size: .92rem;
  color: var(--text-primary,#fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-tc-sub {
  font-size: .73rem; color: var(--text-secondary, rgba(255,255,255,.45));
  margin-top: 2px; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-tc-badge {
  flex-shrink: 0;
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
}
.tv-tc-registered { background: rgba(34,197,94,.12); color: #86efac; }
.tv-tc-confirmed  { background: rgba(59,130,246,.12); color: #93c5fd; }
.tv-tc-withdrawn  { background: rgba(239,68,68,.1);  color: #fca5a5; }

/* ── POWERED BY ── */
.tv-powered {
  padding: 28px 16px;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-size: .8rem;
  color: var(--text-secondary, rgba(255,255,255,.35));
  border-top: 1px solid rgba(255,255,255,.06);
}
.tv-powered-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.tv-powered-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #6C3CE1, #00D4AA);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: #fff;
}
.tv-powered-brand .text-gradient {
  font-weight: 800;
  background: linear-gradient(135deg, #6C3CE1, #00D4AA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: .95rem;
}

/* ── RESPONSIVE ── */
/* ── GROUP BLOCK ── */
.tv-group-block {
  margin-bottom: 36px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.tv-grp-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(108,60,225,.18), rgba(0,212,170,.10));
  border-bottom: 1px solid var(--border);
}
.tv-grp-block-badge {
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--primary-light, #9C6CF1);
}
.tv-grp-block-count {
  font-size: .78rem;
  color: var(--text-muted);
}
.tv-grp-sub-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  padding: 12px 18px 6px;
}
.tv-group-block .tv-fixture {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.tv-group-block .tv-standings-wrap {
  padding: 0 0 4px;
}
.tv-group-block .tv-table {
  border-radius: 0;
}

@media (max-width: 640px) {
  .tv-hero-inner  { flex-direction: column; align-items: center; text-align: center; }
  .tv-hero-icon   { align-self: center; }
  .tv-hero-cat-row { justify-content: center; }
  .tv-hero-pills  { justify-content: center; }
  .tv-hero-title  { font-size: 1.6rem; }
  .tv-fix-name    { font-size: .78rem; }
  .tv-fix-mid     { min-width: 80px; }
  .tv-live-s      { font-size: 2rem; }
  .tv-table th, .tv-table td { padding: 8px 10px; }
  .tv-tab         { padding: 8px 14px; font-size: .8rem; }
}