@charset "utf-8";
/*
 * Duel tournament page (tournament/view.index.php), desktop and phones. Loaded only on that page (controller.tournament.php).
 * Same look as the rest of the template: sharp neon panels, Cinzel names, Chakra Petch figures; the accent follows the
 * realm (body.d-realm-<server>), gold marks winners and the champion, red marks knocked out players.
 *
 * Winner bracket tree: every round column has the same height, its matches are spread with space-around, so the match
 * of the next round sits exactly between the two matches it comes from. Each pair of matches (.t-pair) draws a bracket
 * line on its right ("]" from the centre of one match to the other), the next round's match a short line on its left.
 */

.t-page {
  --t-acc: 0, 226, 255;
  --t-gold: 255, 196, 64;
  --t-gold-text: #f2d488;
  --t-out: 255, 92, 92;
  --t-text: #e6eef7;
  --t-label: #9aa8c2;
  --t-dim: #7f8ca6;
  --t-panel: rgba(9, 13, 25, 0.74);
  --t-line: rgba(var(--t-acc), 0.3);
  --t-line-soft: rgba(var(--t-acc), 0.12);
  --t-wire: rgba(var(--t-acc), 0.45);
  --t-font-game: "Cinzel", "Times New Roman", Times, serif;
  --t-font-ui: "Chakra Petch", "Segoe UI", Arial, sans-serif;
  --t-col: 200px;
  --t-gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 24px;
  color: var(--t-text);
  font: 400 14px/1.4 var(--t-font-ui);
  text-align: left;
}

.d-realm-NEON2 .t-page {
  --t-acc: 112, 250, 196;
}

.d-realm-NEON3 .t-page {
  --t-acc: 255, 104, 116;
}

.t-page *,
.t-page *:before,
.t-page *:after {
  box-sizing: border-box;
}

.t-page a {
  text-decoration: none;
}

/* Head: realm, tournament name, state and dates.
---------------------------------------------------------------------------*/
.t-head {
  margin: 0 0 22px;
  padding: 6px 4px 18px;
  border-bottom: 1px solid rgba(var(--t-acc), 0.16);
  text-align: center;
}

.t-eyebrow {
  color: var(--t-label);
  font: 600 11px/1.3 var(--t-font-ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.m-ready .t-page .t-title {
  margin: 8px 0 12px;
  padding: 0;
  color: #f4f8fc;
  font: 900 34px/1.15 var(--t-font-game);
  letter-spacing: 0.08em;
  text-shadow: 0 0 22px rgba(var(--t-acc), 0.25);
}

.t-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  color: var(--t-label);
  font: 400 13px/1.3 var(--t-font-ui);
}

.t-meta b {
  color: var(--t-text);
  font-weight: 600;
}

.t-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--t-line);
  background: rgba(var(--t-acc), 0.08);
  color: rgb(var(--t-acc));
  font: 700 11px/1.2 var(--t-font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Group and bracket stages are running: a pulsing dot. */
.t-state-3:before,
.t-state-4:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--t-acc));
  box-shadow: 0 0 8px rgb(var(--t-acc));
  animation: t-pulse 1.6s ease-in-out infinite;
}

.t-state-5 {
  border-color: rgba(var(--t-gold), 0.55);
  background: rgba(var(--t-gold), 0.1);
  color: var(--t-gold-text);
}

/* Podium: runner-up, champion (raised, gold) and third place.
---------------------------------------------------------------------------*/
.t-podium {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  margin: 0 0 24px;
}

.t-podium-place {
  --t-place: 205, 222, 240;
  position: relative;
  display: flex;
  flex: 0 1 170px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 16px 12px 14px;
  border: 1px solid rgba(var(--t-place), 0.45);
  background: linear-gradient(180deg, rgba(var(--t-place), 0.14), rgba(var(--t-place), 0.02)), var(--t-panel);
  box-shadow: 0 0 16px rgba(var(--t-place), 0.14);
}

.t-podium-place.t-place-1 {
  --t-place: var(--t-gold);
  flex-basis: 200px;
  padding-top: 24px;
  box-shadow: 0 0 24px rgba(var(--t-place), 0.28), inset 0 0 18px rgba(var(--t-place), 0.08);
}

.t-podium-place.t-place-3 {
  --t-place: 226, 138, 74;
}

.t-podium-rank {
  position: absolute;
  top: 8px;
  left: 10px;
  color: rgb(var(--t-place));
  font: 700 13px/1 var(--t-font-ui);
}

.t-podium-class {
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(var(--t-place), 0.7);
}

.t-place-1 .t-podium-class {
  width: 72px;
  height: 72px;
  box-shadow: 0 0 14px rgba(var(--t-place), 0.45);
}

.t-podium-place .t-crown {
  position: absolute;
  top: -15px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
}

.t-podium-name {
  max-width: 100%;
  overflow: hidden;
  color: rgb(var(--t-place));
  font: 700 17px/1.25 var(--t-font-game);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(var(--t-place), 0.45);
}

.t-place-1 .t-podium-name {
  color: var(--t-gold-text);
  font-size: 20px;
}

.t-podium-label {
  color: var(--t-label);
  font: 600 10px/1.2 var(--t-font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Recent tournaments: a scrollable row of chips.
---------------------------------------------------------------------------*/
.t-history {
  display: flex;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0 0 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.t-chip {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
  max-width: 210px;
  padding: 8px 12px;
  border: 1px solid var(--t-line);
  background: var(--t-panel);
  color: var(--t-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Centred while the chips fit; auto margins (unlike justify-content: center) keep the first chip reachable
   when the row overflows and scrolls. */
.t-chip:first-child {
  margin-left: auto;
}

.t-chip:last-child {
  margin-right: auto;
}

.t-chip:hover {
  border-color: rgba(var(--t-acc), 0.7);
  box-shadow: 0 0 12px rgba(var(--t-acc), 0.2);
}

.t-chip.is-active {
  border-color: rgba(var(--t-gold), 0.7);
  box-shadow: 0 0 14px rgba(var(--t-gold), 0.2), inset 0 0 12px rgba(var(--t-gold), 0.06);
}

.t-chip-date {
  color: var(--t-label);
  font: 600 11px/1.2 var(--t-font-ui);
  letter-spacing: 0.08em;
}

.t-chip-name,
.t-chip-result {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-chip-name {
  color: var(--t-text);
  font: 600 12px/1.3 var(--t-font-ui);
}

.t-chip-result {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--t-gold-text);
  font: 700 12px/1.3 var(--t-font-game);
  letter-spacing: 0.04em;
}

.t-chip-result .t-crown {
  width: 13px;
  height: 13px;
}

/* Sections.
---------------------------------------------------------------------------*/
.t-section {
  margin: 0 0 30px;
}

.t-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

.m-ready .t-page .t-section-title {
  margin: 0;
  padding: 0;
  color: #e3ebf4;
  font: 700 18px/1.2 var(--t-font-game);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.t-section-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--t-acc), 0.5), rgba(var(--t-acc), 0));
}

.t-empty {
  max-width: 760px;
  margin: 0 auto 26px;
  padding: 22px 18px;
  border: 1px solid var(--t-line);
  background: var(--t-panel);
  color: var(--t-label);
  font: 400 14px/1.5 var(--t-font-game);
  letter-spacing: 0.06em;
  text-align: center;
}

/* Brackets: horizontally scrollable, centred while they fit.
---------------------------------------------------------------------------*/
.t-scroll {
  padding: 12px 2px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.t-bracket {
  display: flex;
  align-items: stretch;
  width: max-content;
  margin: 0 auto;
}

.t-round {
  display: flex;
  flex: 0 0 var(--t-col);
  flex-direction: column;
  width: var(--t-col);
}

.t-round + .t-round {
  margin-left: var(--t-gap);
}

.t-round-title {
  margin: 0 0 6px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--t-line-soft);
  color: var(--t-label);
  font: 600 11px/1.2 var(--t-font-ui);
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.t-round.is-final .t-round-title,
.t-round-grand .t-round-title {
  color: var(--t-gold-text);
}

.t-round-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-around;
}

.t-pair {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-around;
}

/* Loser bracket: no connector lines, so its rounds wrap onto new rows instead of scrolling sideways
   (all rounds in one row on wide screens, two or three per row on phones). */
.t-fit {
  padding: 12px 0 4px;
}

.t-bracket.t-plain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 16px;
  width: auto;
}

.t-plain .t-round {
  flex: none;
  width: auto;
  min-width: 0;
}

.t-plain .t-round + .t-round {
  margin-left: 0;
}

/* Connector lines of the winner bracket tree. */
.t-tree .t-pair:after {
  content: "";
  position: absolute;
  top: 25%;
  right: calc(var(--t-gap) / -2);
  bottom: 25%;
  width: calc(var(--t-gap) / 2);
  border: 1px solid var(--t-wire);
  border-left: 0;
  pointer-events: none;
}

.t-tree .t-round + .t-round .t-match:before,
.t-tree .t-round.is-final .t-match:after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--t-gap) / 2);
  border-top: 1px solid var(--t-wire);
  pointer-events: none;
}

.t-tree .t-round + .t-round .t-match:before {
  left: calc(var(--t-gap) / -2 - 1px);
}

.t-tree .t-round.is-final .t-match:after {
  right: calc(var(--t-gap) / -2 - 1px);
}

/* Bracket reset: only the first grand final match is wired to the winner bracket final. */
.t-tree .t-round-grand .t-match ~ .t-match:before {
  display: none;
}

.t-gf-stack {
  display: flex;
  flex-direction: column;
}

.t-gf-label {
  margin: 4px 0 -2px;
  color: var(--t-gold-text);
  font: 600 10px/1.2 var(--t-font-ui);
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

/* Matches and their two sides.
---------------------------------------------------------------------------*/
.t-match {
  position: relative;
  margin: 8px 0;
  border: 1px solid var(--t-line);
  background: var(--t-panel);
  box-shadow: 0 0 10px rgba(var(--t-acc), 0.08);
}

.t-match.is-placeholder {
  border-style: dashed;
  background: rgba(9, 13, 25, 0.4);
  box-shadow: none;
  opacity: 0.55;
}

.t-match.has-bye {
  opacity: 0.72;
}

.t-match.is-live {
  border-color: rgba(var(--t-acc), 0.85);
  animation: t-live-glow 1.8s ease-in-out infinite;
}

.t-round-grand .t-match {
  border-color: rgba(var(--t-gold), 0.55);
  box-shadow: 0 0 18px rgba(var(--t-gold), 0.16);
}

.t-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-width: 0;
  padding: 0 8px 0 6px;
}

.t-slot + .t-slot {
  border-top: 1px solid var(--t-line-soft);
}

.t-class {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(var(--t-acc), 0.35);
  object-fit: cover;
}

.t-class.is-empty {
  border-style: dashed;
  border-color: rgba(154, 168, 194, 0.25);
}

.t-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--t-text);
  font: 700 14px/1.2 var(--t-font-game);
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-page a.t-name:hover {
  color: #fff;
}

.t-mark {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 3px 4px;
  border: 1px solid rgba(154, 168, 194, 0.35);
  color: var(--t-label);
  font: 700 11px/1 var(--t-font-ui);
  text-align: center;
}

.t-crown {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: var(--t-gold-text);
  filter: drop-shadow(0 0 4px rgba(var(--t-gold), 0.8));
}

/* Match winner: gold bar, gold name, gold W. */
.t-slot.is-winner {
  background: linear-gradient(90deg, rgba(var(--t-gold), 0.18), rgba(var(--t-gold), 0) 80%);
  box-shadow: inset 2px 0 0 rgb(var(--t-gold));
}

.t-slot.is-winner .t-name {
  color: var(--t-gold-text);
  text-shadow: 0 0 8px rgba(var(--t-gold), 0.45);
}

.t-slot.is-winner .t-mark,
.t-legend-item.is-winner .t-mark {
  border-color: rgba(var(--t-gold), 0.7);
  background: rgba(var(--t-gold), 0.15);
  color: var(--t-gold-text);
}

/* Lost the match but still in the tournament (dropped to the loser bracket, the grand final bracket reset). */
.t-slot.is-loser .t-name {
  color: var(--t-label);
}

.t-slot.is-loser .t-class {
  opacity: 0.7;
}

/* Knocked out by this match: red bar, struck through name, grey portrait. */
.t-slot.is-out {
  background: linear-gradient(90deg, rgba(var(--t-out), 0.1), rgba(var(--t-out), 0) 80%);
  box-shadow: inset 2px 0 0 rgba(var(--t-out), 0.7);
}

.t-slot.is-out .t-name {
  color: rgba(230, 190, 190, 0.6);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--t-out), 0.8);
}

.t-slot.is-out .t-class {
  border-color: rgba(var(--t-out), 0.4);
  filter: grayscale(1) brightness(0.6);
}

.t-slot.is-out .t-mark,
.t-legend-item.is-out .t-mark {
  border-color: rgba(var(--t-out), 0.6);
  background: rgba(var(--t-out), 0.1);
  color: #ff8a8a;
}

/* Champion: brighter gold and the crown next to the name. */
.t-slot.is-champion.is-winner {
  background: linear-gradient(90deg, rgba(var(--t-gold), 0.32), rgba(var(--t-gold), 0.04) 85%);
  box-shadow: inset 3px 0 0 rgb(var(--t-gold)), 0 0 12px rgba(var(--t-gold), 0.2);
}

.t-slot.is-champion .t-name {
  color: var(--t-gold-text);
}

.t-slot.is-bye .t-name,
.t-slot.is-tbd .t-name {
  color: var(--t-dim);
  font: italic 400 11px/1.2 var(--t-font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.t-live {
  position: absolute;
  top: -9px;
  right: 8px;
  z-index: 1;
  padding: 2px 6px;
  background: rgb(var(--t-acc));
  color: #051018;
  font: 700 9px/1.2 var(--t-font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: t-pulse 1.6s ease-in-out infinite;
}

/* Groups: standings and the round robin results.
---------------------------------------------------------------------------*/
.t-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.t-group {
  border: 1px solid var(--t-line);
  background: var(--t-panel);
  box-shadow: 0 0 14px rgba(var(--t-acc), 0.08);
}

.t-group-title {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--t-line);
  background: linear-gradient(180deg, rgba(var(--t-acc), 0.1), rgba(var(--t-acc), 0.02));
  color: #dff6ff;
  font: 700 13px/1.2 var(--t-font-game);
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.t-st-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 26px 26px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--t-line-soft);
}

.t-st-head {
  padding-top: 8px;
  padding-bottom: 6px;
  color: var(--t-dim);
  font: 600 10px/1.2 var(--t-font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.t-st-head span:nth-child(n+3),
.t-st-head span:first-child,
.t-st-num,
.t-st-pos {
  text-align: center;
}

.t-st-pos {
  color: var(--t-label);
  font: 700 13px/1 var(--t-font-ui);
}

.t-st-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.t-st-player .t-name {
  font-size: 13px;
}

.t-st-num {
  color: var(--t-text);
  font: 700 14px/1 var(--t-font-ui);
  font-variant-numeric: tabular-nums;
}

/* Advanced to the bracket: gold; out after the group stage: struck through. */
.t-st-row.is-advanced {
  background: linear-gradient(90deg, rgba(var(--t-gold), 0.12), rgba(var(--t-gold), 0) 70%);
  box-shadow: inset 2px 0 0 rgb(var(--t-gold));
}

.t-st-row.is-advanced .t-name {
  color: var(--t-gold-text);
}

.t-st-row.is-out {
  box-shadow: inset 2px 0 0 rgba(var(--t-out), 0.5);
}

.t-st-row.is-out .t-name {
  color: var(--t-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--t-out), 0.7);
}

.t-st-row.is-out .t-class {
  filter: grayscale(1) brightness(0.6);
}

.t-group-matches {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px 12px;
}

.t-gm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--t-label);
  font: 400 12px/1.3 var(--t-font-ui);
}

.t-gm-player {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-gm-player:first-child {
  text-align: right;
}

.t-gm-player.is-winner {
  color: var(--t-gold-text);
  font-weight: 700;
}

.t-gm-player.is-loser {
  color: var(--t-dim);
}

.t-gm-vs {
  color: var(--t-dim);
  font: 600 10px/1 var(--t-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.t-gm.is-live .t-gm-vs {
  color: rgb(var(--t-acc));
}

/* Registration: the registered players. */
.t-registered {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.t-registered-player {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--t-line);
  background: var(--t-panel);
}

/* Legend.
---------------------------------------------------------------------------*/
.t-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  padding: 16px 0 0;
  border-top: 1px solid var(--t-line-soft);
  color: var(--t-label);
  font: 400 12px/1.3 var(--t-font-ui);
}

.t-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.t-legend .t-live {
  position: static;
}

@keyframes t-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes t-live-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--t-acc), 0.2); }
  50% { box-shadow: 0 0 20px rgba(var(--t-acc), 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .t-state-3:before,
  .t-state-4:before,
  .t-live,
  .t-match.is-live {
    animation: none;
  }
}

/* Phones: narrower columns (the brackets scroll sideways), smaller head, one group per row. */
@media (max-width: 900px) {
  .t-page {
    --t-col: 168px;
    --t-gap: 22px;
  }

  .m-ready .t-page .t-title {
    font-size: 22px;
  }

  .t-name {
    font-size: 13px;
  }

  .t-podium {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .t-podium-place {
    flex: 1 1 0;
    padding: 14px 6px 12px;
  }

  .t-podium-place.t-place-1 {
    flex: 1.15 1 0;
  }

  .t-podium-class {
    width: 44px;
    height: 44px;
  }

  .t-place-1 .t-podium-class {
    width: 56px;
    height: 56px;
  }

  .t-podium-name,
  .t-place-1 .t-podium-name {
    font-size: 14px;
  }

  .t-podium-label {
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  .m-ready .t-page .t-section-title {
    font-size: 15px;
  }

  .t-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}