/* ===== CRICTAKKAR TOURNAMENTS — "MATCH POSTER" (Day 96 redesign) ===== */
/* Page-exclusive file (only tournament.html loads it), loaded AFTER
   quiz.css and multiplayer.css in tournament.html's <head> — so every
   rule below safely OVERRIDES those shared base classes
   (.quiz-wrapper/.quiz-card/.btn-primary/.mp-*) with zero risk to any
   other page: quiz.html/speedround.html/multiplayer.html never include
   this file, so nothing here ever reaches them. Same "page-exclusive
   override" approach already used by leaderboard.html/stats.html/etc.
   in the SITE-WIDE DESIGN REVAMP PROJECT. */

:root {
  --tn-gold-1: #f4a900;
  --tn-gold-2: #e07b00;
  --tn-win: #39d98a;
  --tn-lose: rgba(255,255,255,0.35);
}

/* ================================================================
   POSTER SHELL — applies to every screen (loading/login/entry/join/
   lobby/group-stage/bracket/final/abort), since every one of them
   shares .quiz-wrapper > .quiz-card as its outer chrome.
   ================================================================ */
.quiz-wrapper {
  background: radial-gradient(circle at 50% -10%, #2a1a55 0%, #150c33 55%, #0a0620 100%);
}

.quiz-card {
  background: rgba(255,255,255,0.06);
  border: 2px solid var(--tn-gold-1);
  border-radius: 22px;
  backdrop-filter: blur(3px);
  position: relative;
}

/* The poster's hazard-stripe corner ribbon — a small self-contained
   pseudo-element, deliberately NOT relying on .quiz-card{overflow:hidden}
   (which would also clip the bracket screen's own horizontally-scrolling
   .bracket-scroll child), so it stays purely cosmetic with zero layout risk. */
.quiz-card::before {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 84px; height: 84px;
  background: repeating-linear-gradient(45deg, var(--tn-gold-1) 0 9px, #1a0f3a 9px 18px);
  clip-path: polygon(38% 0, 100% 0, 100% 58%);
  border-radius: 0 20px 0 0;
  pointer-events: none;
}

.quiz-start-icon { font-size: 2.3rem; filter: drop-shadow(0 0 12px rgba(244,169,0,0.45)); }

.quiz-start-title {
  color: #fff;
  font-family: 'Oswald', 'Baloo 2', sans-serif;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-shadow: 0 0 22px rgba(244,169,0,0.4);
}

.quiz-start-sub { color: rgba(255,255,255,0.68); }

.btn-primary {
  background: linear-gradient(135deg, var(--tn-gold-1), var(--tn-gold-2));
  color: #1a1200;
  font-weight: 800;
  border: none;
  box-shadow: 0 0 14px rgba(244,169,0,0.45);
}
.btn-primary:disabled { opacity: 0.5; box-shadow: none; cursor: default; }

.btn-secondary {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(244,169,0,0.4);
  color: #fff;
}
.btn-secondary:hover { background: rgba(244,169,0,0.1); }

/* ===== 3-PART ENTRY SCREEN GROUPING (Day 56) ===== */
.tn-section {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(244,169,0,0.2);
  border-radius: 16px;
  padding: 18px 16px 14px;
  margin: 20px 0;
}

.tn-section-heading {
  font-family: 'Oswald', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--tn-gold-1);
  text-align: center;
  margin-bottom: 4px;
}

.tn-section-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-bottom: 4px;
}

.tn-size-heading {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  margin: 22px 0 12px;
}

.tn-size-row {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}

.tn-size-btn {
  flex: 1;
  padding: 16px 8px;
  border-radius: 14px;
  border: 2px solid rgba(244,169,0,0.35);
  background: rgba(255,255,255,0.05);
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  line-height: 1.3;
}

.tn-size-btn span {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tn-size-btn:hover {
  border-color: var(--tn-gold-1);
  background: rgba(244,169,0,0.12);
  box-shadow: 0 0 14px rgba(244,169,0,0.3);
}

.tn-size-btn:disabled { opacity: 0.5; cursor: default; }

.tn-league-btn {
  width: 100%;
  padding: 16px 8px;
  border-radius: 14px;
  border: 2px solid rgba(244,169,0,0.45);
  background: rgba(244,169,0,0.1);
  color: #ffffff;
  font-family: 'Oswald', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.3;
  margin-bottom: 6px;
}

.tn-league-btn span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.2px;
  margin-top: 4px;
}

.tn-league-btn:hover { border-color: var(--tn-gold-1); background: rgba(244,169,0,0.18); }
.tn-league-btn:disabled { opacity: 0.5; cursor: default; }

/* ===== SCHEDULED SIGN-UP (Day 47) ===== */
.tn-scheduled-card {
  border-radius: 14px;
  border: 2px solid rgba(244,169,0,0.25);
  background: rgba(255,255,255,0.04);
  padding: 16px;
  margin-bottom: 12px;
}

.tn-scheduled-card-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.0rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.tn-scheduled-card-status {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
  line-height: 1.4;
}

.tn-scheduled-card-status.tn-scheduled-live { color: var(--tn-win); font-weight: 700; }
.tn-scheduled-card-status.tn-scheduled-cancelled { color: #ff6b6b; }
.tn-scheduled-card-status.tn-scheduled-paused { color: var(--tn-gold-1); font-weight: 600; }

.tn-scheduled-join-btn { width: 100%; }
.tn-scheduled-join-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== GROUP STAGE (league) ===== */
.tn-group-tabs { display: flex; gap: 8px; margin: 18px 0 16px; }

.tn-group-tab {
  flex: 1;
  padding: 10px 8px;
  border-radius: 999px;
  border: 1px solid rgba(244,169,0,0.3);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

.tn-group-tab.tn-tab-active {
  border-color: var(--tn-gold-1);
  background: rgba(244,169,0,0.16);
  color: var(--tn-gold-1);
  box-shadow: 0 0 12px rgba(244,169,0,0.35);
}

.tn-standings-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 0.82rem;
  font-family: 'Oswald', sans-serif;
}

.tn-standings-table th {
  text-align: left;
  padding: 7px 6px;
  color: var(--tn-gold-1);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 2px solid rgba(244,169,0,0.4);
}

.tn-standings-table th:first-child, .tn-standings-table td:first-child { width: 26px; }

.tn-standings-table td {
  padding: 7px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  font-family: 'Nunito', sans-serif;
}

.tn-standings-table tr.tn-qualifying-row td { color: var(--tn-gold-1); font-weight: 700; }
.tn-standings-table tr.tn-my-row td { background: rgba(244,169,0,0.06); }

.tn-my-matches-list { margin-bottom: 10px; }

.tn-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(244,169,0,0.2);
  border-radius: 12px;
  margin-bottom: 8px;
}

.tn-match-opponent {
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tn-match-play-btn { padding: 8px 14px; font-size: 0.8rem; width: auto; flex-shrink: 0; }
.tn-match-status { font-size: 0.8rem; font-weight: 800; flex-shrink: 0; font-family: 'Oswald', sans-serif; }

.tn-status-won { color: var(--tn-win); }
.tn-status-lost { color: rgba(255,255,255,0.4); }
.tn-status-draw { color: var(--tn-gold-1); }

/* ================================================================
   LIVE BRACKET — the connecting "match poster" bracket-tree. Every
   round is a column of absolutely-positioned team boxes inside one
   shared coordinate frame computed by tournament.js's
   computeBracketLayout()/buildBracketHTML(); this file only styles
   the resulting markup. Works for any bracket size (4/8/16 players,
   2-4 rounds) since the layout math itself is generic.
   ================================================================ */
.tn-bracket-card { max-width: 760px; }

.tn-my-match {
  background: rgba(244,169,0,0.1);
  border: 1px solid rgba(244,169,0,0.4);
  border-radius: 14px;
  padding: 16px;
  margin: 16px 0 20px;
  text-align: center;
}
.tn-my-match p { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; color: #fff; }

.bracket-scroll { overflow-x: auto; overflow-y: hidden; margin: 8px -4px 4px; padding: 4px; }

.bracket-tree { position: relative; }

.bt-round-label {
  position: absolute;
  top: 0;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--tn-gold-1);
  text-shadow: 0 0 10px rgba(244,169,0,0.4);
}

.bt-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.bt-line { fill: none; stroke: var(--tn-gold-1); stroke-width: 2.5; stroke-linecap: round; }
.bt-line-gold { stroke-width: 3; filter: drop-shadow(0 0 3px rgba(244,169,0,0.7)); }

.bt-box {
  position: absolute;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(244,169,0,0.35);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2;
}
.bt-box.bt-box-tbd {
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-style: italic;
  font-size: 0.78rem;
  border-style: dashed;
}

.bt-row {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.bt-div { height: 1px; background: rgba(244,169,0,0.2); }

.bt-row.bt-win { color: var(--tn-gold-1); text-shadow: 0 0 8px rgba(244,169,0,0.4); }
.bt-row.bt-lose { color: var(--tn-lose); text-decoration: line-through; }
.bt-row.bt-bye { color: rgba(255,255,255,0.4); font-style: italic; font-weight: 600; font-size: 0.7rem; }

.bt-walkover-badge {
  position: absolute;
  top: 3px; right: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--tn-gold-1);
  opacity: 0.85;
}

.bt-trophy { position: absolute; width: 90px; text-align: center; z-index: 2; }
.bt-trophy-circle {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 6px;
  background: radial-gradient(circle, #ffe08a, var(--tn-gold-1) 70%);
  box-shadow: 0 0 26px rgba(244,169,0,0.7);
}
.bt-winner-pill {
  font-family: 'Oswald', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1a1200;
  background: var(--tn-gold-1);
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 10px rgba(244,169,0,0.5);
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== CHAMPION SCREEN'S BRACKET RECAP ===== */
#tnFinalBracket { margin: 12px 0 20px; text-align: left; }

@media (max-width: 480px) {
  .tn-size-btn { font-size: 1.15rem; padding: 14px 6px; }
}