/* host.css — big-screen styles for the multi-match grid, scoreboard, and bracket.
   Loaded AFTER style.css; reuses its CSS variables (--bg, --panel, --accent, …). */

/* Round header (title + actions) ----------------------------------------- */
.round-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1em; margin-bottom: 1em;
}
.round-head h1 { font-size: 2.2em; margin: 0; }
.round-actions { display: flex; gap: .6em; }

.bye-note {
  background: var(--panel); border: 1px solid var(--accent2);
  color: var(--accent2); border-radius: .6em;
  padding: .5em 1em; margin-bottom: 1em; display: inline-block; font-weight: 600;
}

/* Live grid of match canvases -------------------------------------------- */
.match-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 1em; margin: 1em 0;
}
.match-cell {
  background: var(--panel); border: 1px solid #30363d;
  border-radius: .8em; padding: .6em; display: flex; flex-direction: column;
}
.cell-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6em;
  font-weight: 700; font-size: 1.1em; margin-bottom: .4em;
}
.cell-head .ch-a { color: var(--teamA); text-align: right; }
.cell-head .ch-b { color: var(--teamB); text-align: left; }
/* BIG live score in the middle of each cell's header */
.cell-head .ch-score {
  font-family: ui-monospace, monospace; font-weight: 900;
  font-size: 2.4em; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.cell-head .ch-score .cs-a { color: var(--teamA); }
.cell-head .ch-score .cs-b { color: var(--teamB); }
.cell-head .ch-score .cs-dash { color: var(--muted); margin: 0 .12em; }
.cell-head.scored .ch-score { animation: scorepop .45s ease-out; }
@keyframes scorepop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* Pitch wrapper holds the canvas + a per-cell GOAL! pop. */
.cell-pitch { position: relative; }
.match-cell canvas {
  display: block; width: 100%; height: auto;
  background: var(--pitch); border-radius: .5em;
}
.match-cell.cell-goal { animation: cellgoal .8s ease-out; }
@keyframes cellgoal {
  0% { box-shadow: 0 0 0 0 rgba(247,185,85,.0); }
  20% { box-shadow: 0 0 0 4px rgba(247,185,85,.9); }
  100% { box-shadow: 0 0 0 0 rgba(247,185,85,0); }
}
/* GOAL! pop — overlays ONLY this match's pitch, not the whole screen. */
.cell-goalpop {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
  text-align: center;
}
.cell-goalpop.show { opacity: 1; }
.cell-goalpop.show .gp-big { animation: goalpop .45s cubic-bezier(.2,1.4,.4,1); }
.cell-goalpop .gp-big {
  font-size: clamp(1.6rem, 5vw, 3.2rem); font-weight: 900; letter-spacing: .03em;
  color: var(--accent); text-shadow: 0 3px 16px rgba(0,0,0,.85), 0 0 18px rgba(247,185,85,.6);
}
.cell-goalpop .gp-cel {
  display: block; font-size: clamp(.8rem, 1.6vw, 1.2rem); font-style: italic; color: #fff;
  margin-top: .2em; text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
@keyframes goalpop { 0% { transform: scale(.5) rotate(-4deg); } 60% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }

.cell-ticker {
  display: flex; align-items: center; justify-content: center;
  margin-top: .4em; font-family: ui-monospace, monospace;
}
.cell-ticker .ct-clock { color: var(--muted); font-size: 1.1em; }

/* Champion celebration pop-up (host, end of tournament) ------------------- */
.champ-banner {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(247,185,85,.22), rgba(13,17,23,.9) 75%);
}
.champ-banner.hidden { display: none; }
.champ-card {
  text-align: center; padding: 2em 3em;
  animation: champpop .6s cubic-bezier(.2,1.5,.4,1);
}
.champ-trophy { font-size: clamp(4rem, 12vw, 9rem); line-height: 1; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); }
.champ-label {
  font-size: clamp(1rem, 3vw, 2rem); letter-spacing: .4em; color: var(--muted);
  font-weight: 700; margin: .4em 0 .1em;
}
.champ-name {
  font-size: clamp(2.5rem, 9vw, 7rem); font-weight: 900; color: var(--accent);
  text-shadow: 0 4px 30px rgba(0,0,0,.6), 0 0 28px rgba(247,185,85,.5); line-height: 1.05;
}
.champ-card .btn { margin-top: 1.4em; }
@keyframes champpop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

#revealResults, #nextRound { margin-top: .5em; }

/* Review: final scores + MVP --------------------------------------------- */
.results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1em; margin: 1em 0;
}
.result-card {
  background: var(--panel); border: 1px solid #30363d;
  border-radius: .8em; padding: 1em 1.2em;
}
.result-teams {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1em; font-size: 1.15em;
}
.result-teams .rt-a { text-align: right; color: var(--teamA); }
.result-teams .rt-b { text-align: left; color: var(--teamB); }
.result-teams .rt-score {
  font-family: ui-monospace, monospace; font-weight: 800; font-size: 1.4em;
}
.result-teams .win { font-weight: 800; }
.result-teams .win::after { content: " ✓"; color: var(--accent2); }
.result-mvp {
  margin-top: .6em; color: var(--accent); font-family: ui-monospace, monospace;
  font-size: .95em; text-align: center;
}

/* Scoreboard table with cumulative team comp ----------------------------- */
table.standings { width: 100%; border-collapse: collapse; margin: 1em 0; }
table.standings th, table.standings td {
  padding: .5em .7em; text-align: left; border-bottom: 1px solid #21262d;
}
table.standings th { color: var(--muted); font-weight: 500; font-size: .9em; }
table.standings td.rank { color: var(--muted); font-family: ui-monospace, monospace; }
table.standings td.team { font-weight: 600; }
table.standings td.comp {
  display: flex; flex-wrap: wrap; gap: .3em; align-items: center;
}
.comp-chip {
  background: #0d1117; border: 1px solid #30363d; border-radius: 1em;
  padding: .1em .55em; font-size: .8em; font-family: ui-monospace, monospace;
  color: var(--ink);
}
.comp-total {
  background: rgba(247,185,85,.15); border: 1px solid var(--accent);
  color: var(--accent); border-radius: 1em; padding: .1em .55em;
  font-size: .8em; font-family: ui-monospace, monospace; font-weight: 700;
}

/* Bracket tree ----------------------------------------------------------- */
.bracket { display: flex; gap: 1.2em; margin: 1.5em 0; overflow-x: auto; }
.bracket-col { display: flex; flex-direction: column; gap: 1em; min-width: 180px; }
.bracket-col h3 { margin: 0 0 .3em; color: var(--muted); font-size: 1em; font-weight: 600; }
.bracket-match {
  background: var(--panel); border: 1px solid #30363d;
  border-radius: .6em; padding: .5em .7em; display: flex; flex-direction: column; gap: .25em;
}
.bm-team {
  display: flex; justify-content: space-between; gap: .8em;
}
.bm-team.win { color: var(--accent2); font-weight: 700; }
.bm-team .bm-score { font-family: ui-monospace, monospace; color: var(--muted); }
.bm-team.win .bm-score { color: var(--accent2); }
.bm-bye { color: var(--muted); font-size: .85em; font-style: italic; }
.bracket-champ {
  margin-top: 1em; font-size: 1.6em; font-weight: 800; color: var(--accent);
}

/* Offline player chip ---------------------------------------------------- */
.player-list li.offline { opacity: .5; }