/* tank.tektology.com - the tournament page at /tournament/.

   Layered on app.css, which owns the bar, the notched panel, the leaderboard
   rows and the banner that points here. What is local: the hero with the
   prize beside it, the phase line, the two-column board-and-FAQ grid, and
   the FAQ list itself.

   GOLD. It is a reserved colour - "a built-in gun or a champion" - and the
   prize is the one thing on this page that is the champion's, so the prize
   figure and the outright leader's row take it and nothing else does. */

.tourney { max-width: 1060px; }

/* ------------------------------------------------------------------ hero */

.t-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.t-hero-main { min-width: 0; }
.t-hero .eyebrow { display: block; margin-bottom: 5px; }
.t-hero h1 { font-size: clamp(30px, 6vw, 40px); }

.t-lede {
  margin: 10px 0 0;
  font-size: 16px;
  color: var(--fg-2);
  max-width: 52ch;
}

/* Upcoming / live / finished. The dot carries it: cyan waiting, green running,
   steel done. */
.t-phase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 16px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

.t-phase-dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--accent);
}

.t-phase[data-phase="live"] .t-phase-dot { background: var(--ok); box-shadow: 0 0 8px rgba(79, 212, 138, 0.7); }
.t-phase[data-phase="over"] .t-phase-dot { background: var(--fg-3); }

.t-phase-sub {
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

.t-phase-sub:empty { display: none; }

/* The prize. A notched plate with a gold edge - the same recipe as .card, with
   the edge token set rather than `border-color`, so the diagonals follow. */
.t-prize {
  --panel-fill: rgba(255, 200, 97, 0.06);
  --panel-edge: rgba(255, 200, 97, 0.55);
  --cut: 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 200px;
  padding: 16px 24px 18px;
  background-color: var(--panel-fill);
  background-image: var(--notch-lines);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  background-size: var(--cut) var(--cut), var(--cut) var(--cut);
  background-origin: border-box;
  border: 1px solid var(--panel-edge);
  clip-path: var(--notch);
}

.t-prize-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.t-prize-amount {
  font-family: var(--mono);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.t-prize-sub { font-size: 13px; color: var(--fg-2); }

@media (max-width: 620px) {
  .t-hero { grid-template-columns: 1fr; align-items: start; }
  .t-prize { min-width: 0; }
}

/* --------------------------------------------------------- board and FAQ */

.t-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 1180px) {
  .t-grid { grid-template-columns: 1fr; }
}

/* Three columns, not the leaderboard's four: no captures here. The head and
   the rows share the template, same as app.css's. */
.t-cols.hiscores-head,
.t-cols.hiscores-list li { grid-template-columns: 34px 1fr 62px; }

.t-board .hiscores-list {
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.faq { margin: 0; }

.faq-i {
  padding: 13px 0 14px;
  border-top: 1px solid var(--line-soft);
}

.faq-i:first-child { padding-top: 2px; border-top: 0; }
.faq-i:last-child { padding-bottom: 0; }

.faq dt {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

.faq dd {
  margin: 4px 0 0;
  color: var(--fg-2);
  max-width: 62ch;
}