/* Battlefield hub: 2×2 grid via display:contents. Banner/rated-toggle/password-shake
   hooks are load-bearing. Breakpoints 640/768/1024. */

.battlefield-screen {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* display:contents so children become direct grid items for explicit placement. */
/* `auto` sizes column 1 to the rail itself, so a collapsed rail hands its width back to the
   table. The rail carries .nl-rail-collapsed from railClass() at render time, so this is right
   on first paint — no JS, and no :has() (above the support floor). */
.bf-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
}
.bf-col, .bf-main { display: contents; }
/* (0,2,0) descendant selector out-ranks the later .nl-filters-rail (0,1,0). */
.bf-grid .bf-filters-rail { grid-column: 1; grid-row: 1; }
/* Scoped to the battlefield grid: tournaments reuses .bf-open as panel SKIN inside
   .tn-layout, and unscoped placement longhands override its grid-area: main. */
.bf-grid .bf-open { grid-column: 2; grid-row: 1; }
/* Collapsed rail, at every width: it leaves the grid altogether — its toggle moves to the panel
   head, left of the tools — so the column goes with it and the table takes the whole width.
   (0,3,0) out-ranks the ≤768 `display: flex` on .nl-filters-rail and the placement rules above. */
.bf-grid.is-rail-collapsed .bf-filters-rail { display: none; }
.bf-grid.is-rail-collapsed { grid-template-columns: minmax(0, 1fr); }
.bf-grid.is-rail-collapsed .bf-open { grid-column: 1; }
.bf-grid.is-rail-collapsed .nl-head-filters.is-collapsed { display: inline-flex; }
.bf-create-open  { font-weight: 700; }

.bf-filters-rail {
  display: flex; flex-direction: column; gap: 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 16px;
}
.bf-filters-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bf-filters-body { display: flex; flex-direction: column; gap: 16px; }
.bf-filter { display: flex; flex-direction: column; gap: 6px; }

.bf-search { position: relative; display: flex; align-items: center; }
.bf-search-ico { position: absolute; left: 9px; font-size: 0.95rem; color: var(--ink-3); pointer-events: none; }
.bf-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px 8px 28px;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  outline: none;
  transition: border-color 0.15s;
}
.bf-search input::placeholder { color: var(--ink-3); }

.bf-seg {
  display: flex;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}
.bf-seg.sm { padding: 3px; gap: 3px; }
.bf-seg.col { flex-direction: column; gap: 3px; padding: 4px; }
.bf-seg.col button { text-align: left; }
.bf-seg button {
  all: unset;
  cursor: pointer;
  flex: 1;
  text-align: center;
  min-width: 54px;
  padding: 7px 10px;
  border-radius: var(--radius-m);
  font-size: 0.84rem;
  color: var(--ink-2);
  transition: background 0.12s ease, color 0.12s ease;
}
.bf-seg.sm button { padding: 6px 10px; font-size: 0.8rem; }
.bf-seg button:hover { color: var(--ink); }
.bf-seg button.active {
  background: var(--bronze-gradient);
  color: var(--on-bronze);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
/* all:unset strips the native focus ring — restore a keyboard indicator. */
.bf-seg button:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: -2px; }

/* Native dropdown replacing segmented controls below BF_NARROW_MQ. */
.bf-filter-select {
  appearance: none; -webkit-appearance: none;
  width: 100%; box-sizing: border-box;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-m);
  color: var(--ink); font: inherit; font-size: 0.84rem; padding: 8px 28px 8px 10px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.create-field > .bf-filter-select { width: 100%; }

.bf-rating-val { font-size: 0.78rem; color: var(--bronze-2); font-variant-numeric: tabular-nums; }
.bf-slider-box { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 6px; }
.bf-slider { position: relative; height: 24px; margin: 4px 2px 0; }
/* Inset by half a thumb: a native range thumb's centre stops that far short of the input's
   edge, so a full-width rail leaves bronze fill sticking out past both handles. */
.bf-slider-track { position: absolute; top: 10px; left: 8px; right: 8px; height: 4px; }
.bf-slider-rail { position: absolute; inset: 0; border-radius: 4px; background: var(--bg-3); border: 1px solid var(--border); }
.bf-slider-fill { position: absolute; top: 0; height: 4px; border-radius: 4px; background: var(--bronze-gradient); }
.bf-slider input[type=range] {
  position: absolute; top: 0; left: 0; width: 100%; height: 24px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.bf-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer;
  width: 16px; height: 16px; border-radius: 50%; background: var(--gold);
  border: 2px solid var(--bronze-deep); box-shadow: var(--shadow-1);
}
.bf-slider input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bronze-deep);
}
.bf-slider input[type=range]::-moz-range-track { background: none; }

/* Full width like every other screen; the fields grid below is what keeps it from stretching. */
.bf-create-view {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%;
}
.bf-create-switches {
  display: flex; flex-wrap: wrap; gap: 18px 40px;
  padding-top: 20px; border-top: 1px solid var(--divider);
}
.bf-switch-field { display: flex; flex-direction: column; gap: 8px; }

.bf-create-view .bf-filter-select,
.bf-create-view .bf-create-pw { padding-top: 10px; padding-bottom: 10px; font-size: 0.9rem; }
/* Tighter segments so the create row stays single-line on desktop. */
.bf-create-view .bf-seg button { flex: 0 0 auto; min-width: 0; padding: 6px 9px; }
.bf-create-password { min-width: 200px; }
.bf-create-pw {
  padding: 8px 10px;
  font-size: 0.86rem;
  background: var(--bg-input);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; height: 34px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch > span:empty {
  position: relative; flex: 0 0 auto;
  width: 38px; height: 20px; border-radius: 999px;
  background: var(--bg-input); border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.switch > span:empty::before {
  content: ''; position: absolute; top: 1px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-3);
  transition: transform 0.18s ease, background 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.switch input:checked + span:empty { background: var(--bronze-deep); border-color: var(--bronze); }
.switch input:checked + span:empty::before { transform: translateX(18px); background: var(--gold); }
.switch input:focus-visible + span:empty { outline: 2px solid var(--bronze-2); outline-offset: 2px; }
.switch-lbl { font-size: 0.82rem; color: var(--ink-2); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .switch, .switch > span:empty, .switch > span:empty::before,
  .bf-seg button { transition: none; }
}

.bf-open-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px;
  min-height: var(--panel-head-h);
  box-sizing: border-box;
  padding: 16px 18px;
  border-bottom: 1px solid var(--divider);
}
.bf-open-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Wide tables scroll inside their own wrapper — never squeeze columns. */
.bf-table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.bf-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
/* Scoped to battlefield-only column classes so the shared .bf-table base can't leak this to other tables. */
/* Compact keeps host, rating and stakes; only format and decap drop out. */
.bf-table.is-compact .bf-col-format,
.bf-table.is-compact .bf-col-decap { display: none; }
/* They shrink rather than drop: stars without the number, ★/☆ without the word. */
.bf-ico { display: none; }
.bf-table.is-compact .bf-col-rating .bf-elo-num { display: none; }
.bf-table.is-compact .bf-col-stakes .bf-txt { display: none; }
.bf-table.is-compact .bf-col-stakes .bf-ico { display: inline; }

.bf-format-pill {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}
.bf-format-pill.bf-format-hist {
  color: var(--bronze-2);
  border-color: color-mix(in srgb, var(--bronze-2) 45%, transparent);
  background: color-mix(in srgb, var(--bronze-2) 10%, transparent);
}
.bf-col-decap { width: 1%; white-space: nowrap; text-align: center; }
.bf-td-decap { text-align: center; }
/* Instant victory uses THE shared .decap-mark icon (layout.css). */
.bf-table thead th {
  text-align: left;
  padding: 10px 18px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.bf-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}

/* THE actions column. It is always last and its buttons sit right, so the header label has
   to follow or it floats away from what it names. Seven screens spell the class
   differently for historical reasons — one rule covers them all, rather than seven edits
   and an eighth spelling next time. Deliberately NOT `th:last-child`: plenty of tables end
   in a date or a score, and right-aligning those would be wrong. */
.bf-table th.bf-actions-col,  .bf-table td.bf-actions-col,
.bf-table th.tn-actions-col,  .bf-table td.tn-actions-col,
.bf-table th.na-col-actions,  .bf-table td.na-col-actions,
.bf-table th.fb-col-actions,  .bf-table td.fb-col-actions,
.bf-table th.ra-td-act,       .bf-table td.ra-td-act,
.bf-table th.cl-td-act,       .bf-table td.cl-td-act,
.bf-table th.ta-r,            .bf-table td.ta-r,
.data-table th.na-col-actions, .data-table td.na-col-actions,
.data-table th.fb-col-actions, .data-table td.fb-col-actions,
.bf-table th.tu-col-act,     .bf-table td.tu-col-act,
.data-table th.ra-td-act,      .data-table td.ra-td-act,
.data-table th.cl-td-act,      .data-table td.cl-td-act,
.data-table th.ta-r,           .data-table td.ta-r {
  text-align: right;
  white-space: nowrap;
}
.bf-table tbody tr:last-child td { border-bottom: 0; }
.bf-table tbody tr.is-bot td { background: transparent; }
.bf-table tbody tr.is-mine td { background: transparent; }
.bf-table tbody tr.is-mine td:first-child { box-shadow: inset 3px 0 0 var(--bronze); }
.bf-table tbody tr.is-bot .battlefield-game-hostname { color: var(--ink-2); }

.bf-host { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.battlefield-game-hostname {
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.bf-lock { font-size: 0.8rem; }
.bf-td-rating { white-space: nowrap; color: var(--ink-2); }
.bf-td-map { color: var(--ink-2); white-space: nowrap; }
.bf-td-tc { white-space: nowrap; }
.bf-tc-cell { white-space: nowrap; }
.bf-tc-unit { color: var(--ink-3); font-size: 0.8rem; }
.bf-actions-col { text-align: right; }
.bf-table th.bf-actions-col { text-align: right; }
.bf-table td .btn { min-width: 84px; justify-content: center; }

/* Bot play-style tag + stakes pills */
.bf-bot-tag {
  display: inline-flex; align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  /* One bronze for all three temperaments — they play at equal strength, and three hues read
     as three tiers. The tag's own text is what names the temperament. */
  background: color-mix(in srgb, var(--bronze) 14%, transparent);
  color: var(--bronze-2);
  border: 1px solid color-mix(in srgb, var(--bronze) 40%, transparent);
}
/* Geometry from the .pill primitive (theme.css); only the colour tint differs here. */
.bf-pill-rated  { background: color-mix(in srgb, var(--laurel) 14%, transparent); color: var(--laurel-2); border: 1px solid color-mix(in srgb, var(--laurel) 35%, transparent); }
.bf-pill-casual { background: color-mix(in srgb, var(--bronze) 12%, transparent); color: var(--bronze-2); border: 1px solid color-mix(in srgb, var(--bronze) 30%, transparent); }
/* Weight stated for BOTH, since neither skin sets one and this sheet outranks layout.css's
   mobile rule. One declaration, so the pair cannot drift. */
.battlefield-join-btn,
.battlefield-cancel-btn { white-space: nowrap; flex-shrink: 0; font-weight: 600; }
/* Icon-only ≤640: reset the label-sized width/min so the button isn't over-wide. */
@media (max-width: 640px) {
  .bf-table td .btn { min-width: 0; }
  .bf-table td .battlefield-join-btn,
  .bf-table td .battlefield-cancel-btn,
  .bf-open-tools .bf-create-open {
    width: auto; padding: 6px 14px; font-size: 1rem;
  }
  .bf-table td .battlefield-join-btn .nl-act-ico,
  .bf-table td .battlefield-cancel-btn .nl-act-ico,
  .bf-open-tools .bf-create-open .nl-act-ico { font-size: 0.85rem; }
}
.bf-open-foot { padding: 12px 18px; border-top: 1px solid var(--divider); }

.bf-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 56px 24px;
  color: var(--ink-3);
}
.bf-empty-ico { font-size: 2.2rem; color: var(--bronze-2); opacity: 0.7; }
.bf-empty-t { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.bf-empty .muted { font-size: 0.85rem; }
.bf-empty .btn { margin-top: 6px; }

.battlefield-queue-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--bronze) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--bronze) 45%, transparent);
  border-radius: var(--radius-l);
}
.battlefield-queue-spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--bg-hover);
  border-top-color: var(--bronze-2);
  border-radius: 50%;
  animation: battlefield-spin 0.9s linear infinite;
  flex: 0 0 auto;
}
.battlefield-queue-text { display: flex; align-items: baseline; gap: 10px; flex: 1 1 auto; min-width: 0; }
.battlefield-queue-label { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) {
  .battlefield-queue-spinner { animation: none; }
}

.battlefield-matchfound-banner {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 65%, transparent);
  animation: battlefield-matchfound-pulse 1.4s ease-in-out infinite;
}
.battlefield-matchfound-banner .battlefield-queue-spinner { border-top-color: var(--gold); }
.battlefield-matchfound-sub { color: var(--ink); font-size: 0.9rem; opacity: 0.9; }
.battlefield-matchfound-sub strong { color: var(--bronze-2); }
@keyframes battlefield-matchfound-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .battlefield-matchfound-banner { animation: none; }
}

/* Mirrors BF_NARROW_MQ (1600) in battlefield-screen.js; drop margin-left:auto in dropdown mode. */
@media (max-width: 1600px) {
  .bf-create-btn { margin-left: 0; }
}
@media (max-width: 1024px) {
  .bf-grid { gap: 14px; }
}
@media (max-width: 768px) {
  .bf-grid { grid-template-columns: 1fr; }
  .bf-grid > .bf-filters-rail,
  .bf-grid > .bf-filters-rail.nl-rail-collapsed { width: auto; }
  /* (0,2,0) to match the desktop .bf-grid .bf-open placement — at (0,1,0) this override
     loses and the grid never stacks. */
  .bf-grid .bf-filters-rail,
  .bf-grid .bf-open {
    grid-column: 1; grid-row: auto; align-self: auto;
  }
  .bf-filters-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
  .bf-filters-body .bf-filter:first-child { grid-column: 1 / -1; }
  .bf-create-btn { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  .bf-create-view .bf-seg { flex-wrap: wrap; }
  .bf-filters-body { grid-template-columns: 1fr; }
  .bf-table { min-width: 480px; }
}

/* The idle cap beside the clock: same muted weight as .bf-tc-unit, so the clock stays the figure
   the eye lands on and this reads as a qualifier. Hidden in the compact row like the unit. */
.bf-tc-idle { font-size: 0.72rem; color: var(--ink-3); margin-left: 4px; white-space: nowrap; }

/* The anchor .field-info-pop measures from — off the ⓘ itself it starts mid-caption and hangs
   over the next column. Scoped, so the shared .create-field is untouched. */
.bf-create-bar .create-field > label { position: relative; }