/* Tournaments hub + detail. Table chrome reused from battlefield's .bf-*;
   only tournament-specific pieces (toolbar, pills, hero, stats, dialogs) here. */

.tournaments-screen { position: relative; }

.tn-kpis { width: 100%; margin-bottom: 16px; }

/* Grid is ONE definition in components/list-screen.css (.tn-layout in its
   selector list); only the cells below belong to this sheet. */
.tn-toolbar-wrap { grid-area: toolbar; }
.tn-main-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
}
.tn-toolbar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .tn-main-toolbar { align-items: stretch; }
  .tn-toolbar-left { justify-content: space-between; }
}

.tn-panel { background: transparent; }
.tn-pad { padding: 16px 18px; }
/* Shell's `> * + *` stack rule is (0,2,0); use padding-top, don't fight it. */
.tn-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 8px; margin-bottom: 10px;
}
.tn-eyebrow-laurel { color: var(--laurel-2); }

/* 780px squeezed the name and action columns on a phone: .tn-namecell is min-width:0, so the
   table happily compressed it until the pills wrapped under the name. The floor is the row's
   comfortable width instead, and .bf-table-scroll carries the overflow. */
.tn-table { min-width: 940px; }
.tn-table .tn-num { text-align: right; }
.tn-table th.tn-actions-col, .tn-table td.tn-actions-col { text-align: right; }
/* Two buttons plus their gap — the one cell that must never give ground. */
.tn-table th.tn-actions-col, .tn-table td.tn-actions-col { min-width: 190px; }
/* Compact hides columns; it does NOT narrow the table. The floor stays, so what is left gets
   the room the hidden columns gave up and the row scrolls sideways on a phone. */
.tn-table.is-compact .tourn-hide-sm { display: none; }
/* Double-classed to out-rank battlefield.css regardless of load order. `nowrap`: the cell is
   the widest thing in the row and the pair must read as one control group, not a stack. */
.tn-actions { display: inline-flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
/* The battlefield's own-row bronze edge is that screen's cue; here every registered row would
   carry it and the column reads as a stripe down the table. Registration is already named by
   the Withdraw button in the same row. */
.tn-table tbody tr.is-mine td:first-child { box-shadow: none; }
.tn-table td .btn { min-width: 78px; justify-content: center; }
/* Icon-only below 640 (.nl-act-lbl hides); the desktop floor width would keep the empty space. */
@media (max-width: 640px) { .tn-table td .btn { min-width: 0; } }
.tn-prize { color: var(--bronze-2); }

.tn-name { font-weight: 600; white-space: nowrap; }

.tn-emblem {
  flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-grid; place-items: center;
  font-size: 0.86rem; line-height: 1;
  background: var(--bg-2); border: 1px solid var(--border);
}
.tn-emblem.is-bronze { background: var(--bronze-gradient); border-color: transparent; color: var(--on-bronze); }

.tn-champ { display: inline-flex; align-items: center; gap: 6px; }
.tn-crown { font-size: 0.9rem; }
.tn-player { color: var(--ink); }
.tn-player-link {
  all: unset; cursor: pointer;
  color: var(--ink); font-weight: 600;
  border-bottom: 1px solid transparent;
}
.tn-player-link:hover { color: var(--bronze-2); border-bottom-color: currentColor; }
.tn-player-link:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }
.tn-bot {
  margin-left: 6px; padding: 1px 5px; border-radius: 4px;
  background: var(--bg-3); border: 1px solid var(--border);
  color: var(--ink-3); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* A pill ROW: pills are inline-flex, so siblings with no separator butt up against each other.
   One wrapper with a gap, used by every cell that can hold more than one. */
.tn-pills { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tn-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--ink-2); font-size: 0.72rem; font-weight: 600;
  white-space: nowrap;
}
.tn-pill-bronze { background: color-mix(in srgb, var(--bronze) 16%, transparent); border-color: color-mix(in srgb, var(--bronze) 45%, transparent); color: var(--bronze-2); }
.tn-pill-laurel { background: color-mix(in srgb, var(--lapis) 18%, transparent);  border-color: color-mix(in srgb, var(--lapis) 45%, transparent);  color: var(--lapis-2); }
.tn-pill-live   { background: color-mix(in srgb, var(--laurel) 14%, transparent); border-color: color-mix(in srgb, var(--laurel) 40%, transparent); color: var(--laurel-2); }
.tn-pill-decap  { background: color-mix(in srgb, var(--porphyry-2) 12%, transparent); border-color: color-mix(in srgb, var(--porphyry-2) 45%, transparent); color: var(--porphyry-2); }
.tn-pill-empty  { color: var(--ink-3); }
.tn-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--laurel-2);
  animation: tn-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes tn-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .tn-dot { animation: none; } }

.tn-detail-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.tn-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tn-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 20px;
  background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}
.tn-hero .tn-emblem { width: 64px; height: 64px; border-radius: 14px; font-size: 1.9rem; }
.tn-hero-main { flex: 1 1 260px; min-width: 0; }
.tn-hero-name { font-family: var(--font-display); font-size: 2rem; line-height: 1.05; margin: 3px 0 0; }
.tn-hero-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tn-hero-prize { text-align: right; flex: none; }
.tn-hero-prize-v { font-family: var(--font-display); font-size: 1.8rem; color: var(--bronze-2); line-height: 1; }
@media (max-width: 768px) {
  .tn-hero-prize { text-align: left; }
  /* All four collapse to their glyph here (.nl-act-* in list-screen.css), so they need no
     stretching — four icon buttons fit any phone on one line. */
}

.tn-stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 20px;
}
/* Inside a .tn-panel the stat row is the panel's first child, so it needs its own breathing
   room top and bottom — the shell's `> * + *` rule only spaces SCREEN-level children. */
.tn-panel > .tn-stats { margin: 4px 0 20px; }
/* A stat row FOLLOWING a section sits flush against that panel: .tn-stats has a bottom margin
   only, and the shell's stack rule does not reach here. Not on .tn-stats itself — the live
   detail opens with one and must not be pushed off the top. */
.tn-panel + .tn-stats { margin-top: 20px; }
.tn-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 14px; }
.tn-stat {
  padding: 14px 12px; text-align: center;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-m);
}
.tn-stat-v { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); line-height: 1.1; }
.tn-stat-k { margin-top: 4px; font-size: 0.68rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }
@media (max-width: 1024px) { .tn-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tn-stats, .tn-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 900px) { .tn-two { grid-template-columns: 1fr; } }

/* Key/value rows, not a bulleted list: the values are short and comparable, so they line up on
   the right the way the prize panel beside this one does. */
.tn-rule-rows { margin: 12px 0 0; display: flex; flex-direction: column; }
.tn-rule-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--divider);
  font-size: 0.88rem;
}
.tn-rule-row:last-child { border-bottom: 0; }
.tn-rule-row dt { color: var(--ink-3); }
.tn-rule-row dd { margin: 0; color: var(--ink); text-align: right; }

.tn-prize-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 14px; }
.tn-prize-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--ink-2); }
.tn-prize-row b { color: var(--bronze-2); }
.tn-prize-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--divider);
}

.tn-confirmed { display: flex; gap: 18px; padding: 20px 22px; margin-bottom: 20px; }
.tn-confirmed-badge {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--laurel) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--laurel) 50%, transparent);
  color: var(--laurel-2); font-weight: 700;
}
.tn-confirmed-main { flex: 1; min-width: 0; }
.tn-confirmed-main h2 { font-size: 1.3rem; margin: 2px 0 6px; }
.tn-steps { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 0.86rem; }

.tn-confirm-backdrop {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, #000 62%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.tn-confirm, .tn-create {
  width: 100%; max-width: 420px;
  background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  padding: 20px 22px;
}
.tn-confirm-title { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; }
.tn-confirm-sub p { margin: 6px 0 0; }
/* The three numbers the decision turns on. A panel, not prose, so the amount is read not parsed. */
.tn-ledger {
  margin-top: 16px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-m);
  display: flex; flex-direction: column; gap: 7px;
}
.tn-ledger-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-size: 0.86rem; color: var(--ink-2);
}
.tn-ledger-row .mono { font-variant-numeric: tabular-nums; }
.tn-ledger-row.is-debit  .mono { color: var(--porphyry-2); font-weight: 600; }
.tn-ledger-row.is-credit .mono { color: var(--laurel-2); font-weight: 600; }
.tn-ledger-row.is-total {
  border-top: 1px solid var(--divider); padding-top: 8px; margin-top: 1px;
  color: var(--ink); font-size: 0.92rem;
}
.tn-ledger-row.is-total .mono { color: var(--ink); font-weight: 700; }
.tn-confirm-actions { display: flex; justify-content: flex-start; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.tn-create-body { padding: 16px 18px 18px; }
/* One choice per ROW — a create screen is a FORM, not a browse surface — with whatever that
   choice REVEALS beside it (Type + players per clan, Clock + its time control and increment).
   A fixed basis with no grow, so a row holding one field does not stretch it across the card. */
.tn-create-grid { display: flex; flex-direction: column; gap: 12px; }
.tn-create-row {
  --tn-field-w: 240px; --tn-col-gap: 14px;
  display: flex; flex-wrap: wrap; gap: 12px var(--tn-col-gap);
}
.tn-create-row > .tn-field { flex: 0 1 var(--tn-field-w); min-width: 0; margin-bottom: 0; }
/* Two fields across, gap included — derived, so it stays in step if either token moves. */
.tn-create-row > .tn-field-wide,
.tn-create-row > .tn-field-rank { flex-basis: calc(var(--tn-field-w) * 2 + var(--tn-col-gap)); }
@media (max-width: 480px) { .tn-create-row > .tn-field { flex: 1 1 100%; } }
.tn-create-err { color: var(--accent-red); font-size: 0.84rem; margin-top: 10px; }
/* The commit bar draws its own rule; the body is not a gapped flex, so without this the rule
   would sit flush against the last field. */
.tn-create-body > .create-actions { margin-top: 20px; }

.tn-create-view {
  width: 100%;
  background: transparent;
  border-radius: var(--radius-l);
  /* No border: the shadow alone carries the card edge, as on .create-card. Nothing bleeds past
     the corners, and `overflow: hidden` would clip a field's tooltip. */
  box-shadow: var(--shadow-2);
}
/* The anchor .field-info-pop measures from — this form's label elements. */
.tn-field > span,
.tn-rank-head > span { position: relative; }

.tn-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.tn-field > span { font-size: 0.72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.tn-field input, .tn-field select {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink); font: inherit; font-size: 0.88rem; padding: 8px 10px;
}
/* The rank range is a dual-handle .bf-slider (battlefield.css), so the field is a column with
   the caption beside the label rather than a label wrapping one control. Its width is set with
   .tn-field-wide above. */
.tn-field-rank { display: flex; flex-direction: column; gap: 5px; }
.tn-rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* .tn-field > span cannot reach a grandchild, so the caption restates the field-label look or
   this one row reads in sentence case at body size while every other label is a small cap. */
.tn-rank-head > span:first-child {
  font-size: 0.72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
}
/* Matches the height of the inputs beside it, so the row's baseline does not step. */
.tn-field-rank .bf-slider-box { margin-top: 0; padding: 4px 12px; border-radius: 8px; }
.tn-field-rank .bf-slider { margin-top: 0; }
.tn-rank-val { min-height: 1.2em; text-align: right; }

/* The bracket itself is components/bracket.css (.bkt-*), shared with clan wars. */
.tn-tie {
  border: 1px solid var(--border); border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--bg-2) 55%, transparent);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.tn-tie.is-live { border-color: color-mix(in srgb, var(--bronze) 45%, transparent); }
.tn-tie-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 4px 6px; border-bottom: 1px solid var(--divider);
}
.tn-tie-clan {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tn-tie-clan.side-a { color: var(--lapis-2); }
.tn-tie-clan.side-b { color: var(--porphyry-2); text-align: right; }
.tn-tie-score { flex: 0 0 auto; font-weight: 700; color: var(--ink); }

/* Page-tab row, not a filter segment: wears the shared page-tab style, not
   .bf-seg. Double-classed since battlefield.css links after and ties on specificity.
   `display` is deliberately absent — .bf-seg already supplies flex, and restating it here
   ties layout.css's =768px hide and ships the strip beside its own dropdown. */
.bf-seg.tn-tabs {
  gap: 8px; flex-wrap: wrap;
  padding: 0; background: none; border: 0; border-radius: 0;
}
.bf-seg.tn-tabs button {
  /* .bf-seg button is `flex: 1; min-width: 54px` — equal widths are the segmented-filter
     idiom. A page tab sizes to its own label, or a long one overflows its box and the
     centred text is pushed off-centre. */
  flex: 0 0 auto;
  min-width: 0;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-1);
  color: var(--ink-2);
  font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500;
}
.bf-seg.tn-tabs button:hover { border-color: var(--bronze); background: var(--bg-2); color: var(--ink); }
.bf-seg.tn-tabs button.active {
  /* Mirrors the shared page-tab selected fill (layout.css); scoped here only to out-rank
     .bf-seg button.active. Gold measured 3.64:1 on this fill, under the 4.5 floor for a
     ~13px label — white is 6.28:1. */
  background: var(--bronze-deep); border-color: var(--bronze); color: #fff;
}