/* Tactics workspace: deliberately scoped to the manager's tactics view. */
.stadium-app .board > .main .tactics-page {
  --tactics-edge: var(--surface-border);
  --tactics-surface: var(--surface-card);
  color: var(--text);
}
.stadium-app .board > .main .tactics-page .tactics-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  margin-bottom: 18px; padding-bottom: 20px;
}
.tactics-page .tactics-heading-copy { min-width: 0; }
.tactics-page .tactics-kicker {
  display: block; margin-bottom: 7px; color: var(--color-accent); font-size: .69rem;
  letter-spacing: .13em; text-transform: uppercase; font-weight: 800;
}
.stadium-app .board > .main .tactics-page .tactics-heading h1 {
  margin: 0; color: #f1f8ee; font-size: clamp(1.7rem, 2.4vw, 2.35rem); line-height: 1.14;
}
.tactics-page .tactics-lead { margin: 9px 0 0; color: #bbd0c6; font-size: .91rem; line-height: 1.5; }
.tactics-page .tactics-heading-actions { display: flex; align-items: center; gap: 14px; }
.tactics-page .tactics-status { max-width: 260px; color: #e8c981; font-size: .81rem; line-height: 1.4; }
.tactics-page .tactics-heading-actions .btn.primary {
  min-height: 43px; padding: 10px 20px; border-radius: var(--space-2);
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 800; white-space: nowrap;
}
.tactics-page .tactics-heading-actions .btn.primary:disabled { opacity: .48; cursor: not-allowed; }
.tactics-page .tactics-strip {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  padding: 12px var(--space-4, 16px);
  margin-bottom: 18px;
  background: var(--tactics-surface);
  border: 1px solid var(--tactics-edge);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}
.tactics-page .tactics-strip-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-inline: var(--space-4, 16px);
}
.tactics-page .tactics-strip-col:first-child {
  padding-left: 0;
}
.tactics-page .tactics-strip-col + .tactics-strip-col {
  border-left: 1px solid var(--surface-border);
}
.tactics-page .tactics-strip-label {
  color: #c5d8ca;
  font-weight: 750;
  font-size: var(--text-xs, 0.75rem);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.tactics-page .tactics-strip-val strong {
  color: var(--text);
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.2;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.tactics-page .tactics-strip-note {
  font-size: .76rem;
  line-height: 1.4;
  color: #b6cebf;
}
.stadium-app .board > .main .tactics-page .tactics {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: stretch; gap: 18px;   /* row 1: Lineup | Players at one height; row 2: During the match | Strategy */
}
.tactics-page .tactics-field-panel,
.tactics-page .tactics-side > section,
.tactics-page .tactics-settings-panel {
  min-width: 0; padding: clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--tactics-edge); border-radius: 12px;
  background: var(--tactics-surface); box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
}
.tactics-page .tactics-field-panel { background: linear-gradient(160deg, #11332e, #0b262b); }
/* The Players card takes the height of the Lineup card (grid stretch) and its list scrolls inside; flex-basis 0 keeps the long list from stretching the row. */
.tactics-page .tactics-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tactics-page .tactics-side > .tactics-roster-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tactics-page .tactics-roster-panel .player-list { flex: 1 1 0; min-height: 260px; max-height: none; overflow-y: auto; }
.tactics-page .tactics-section-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 14px;
  margin-bottom: 14px; min-width: 0;
}
.stadium-app .board > .main .tactics-page .tactics-section-heading h2 {
  margin: 0; color: #f1f8ee; font-size: clamp(1.03rem, 1.4vw, 1.3rem); line-height: 1.2; font-weight: 780;
}
.tactics-page .tactics-field-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tactics-page .tactics-section-heading .pitch-tag {
  position: static; transform: none; padding: 2px 8px; border: 1px solid rgba(167, 216, 176, .35);
  background: rgba(6, 34, 30, .85); color: #e6f9e4; font-size: .7rem;
}
.tactics-page .tactics-preset { display: grid; gap: 4px; min-width: 150px; }
.tactics-page .tactics-preset span { color: #bcd3c4; font-size: .73rem; font-weight: 700; }
.tactics-page :is(.tactics-preset select, .tactic-controls select, .tactics-roster-filters input, .tactics-roster-filters select) {
  min-height: 40px; min-width: 0; border-radius: 7px; border: 1px solid #507769;
  background: #0b2427; color: var(--text); font-size: .9rem;
}
.tactics-page :is(select, input):focus-visible,
.tactics-page :is(.slot, .bench-slot, .player-row, button):focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 3px;
}
.tactics-page .tactics-instruction { margin: 0 0 14px; color: #bbd0c6; font-size: .83rem; line-height: 1.4; }
.tactics-page .pitch {
  width: min(100%, 510px); max-width: 510px;
  border: 3px solid #416b52; border-radius: var(--radius-md);
  background:
    linear-gradient(0deg, rgba(3, 39, 24, .15), rgba(2, 27, 25, .15)),
    repeating-linear-gradient(0deg, #164b35 0 10%, #18553a 10% 20%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .21), 0 8px 25px rgba(0, 0, 0, .14);
}
.tactics-page .pitch .marking { border-color: rgba(221, 246, 222, .39); }
.tactics-page .pitch-tag {
  top: 52%; background: rgba(6, 34, 30, .85); border: 1px solid rgba(167, 216, 176, .35);
  color: #e6f9e4; font-size: .78rem;
}
.tactics-page .slot.empty { opacity: .76; }
.tactics-page .slot.empty:is(:hover, :focus-visible) { opacity: 1; }
.tactics-page .slot.empty .shirt { border: 1px dashed rgba(232, 250, 232, .58); background: rgba(4, 30, 28, .68); }
.tactics-page .slot.filled .shirt { border: 2px solid #c1eac2; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.tactics-page .slot:is(:hover, :focus-visible) .shirt { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.tactics-page .slot .label { background: rgba(4, 31, 28, .91); color: #f1f8ee; }
.tactics-page .tactics-bench-heading { display: flex; justify-content: space-between; align-items: baseline; max-width: 510px; margin: 20px auto 8px; }
.tactics-page .tactics-bench-heading h3 { margin: 0; color: #eaf5e9; font-size: 1rem; }
.tactics-page .bench { max-width: 510px; margin-top: 0; }
.tactics-page .bench-slot {
  min-height: 68px; border: 1px dashed #557c6a; border-radius: var(--space-2);
  background: #0c2928; color: #d4e6db; font-size: .78rem; padding: 6px 4px;
}
.tactics-page .bench-slot .name-status { justify-content: center; max-width: 100%; }
.tactics-page .bench-slot .name-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tactics-page .bench-slot.filled { background: #21463a; border-style: solid; }
.tactics-page .bench-slot:is(:hover, :focus-visible, .selected) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.tactics-page .tactics-selection-bar {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  margin-top: 18px; padding: 12px 14px; border: 1px solid var(--surface-border);
  border-radius: var(--space-2); background: color-mix(in srgb, var(--color-accent) 7%, transparent); color: #d5e9d6;
  font-size: .82rem; line-height: 1.45;
}
.tactics-page .tactics-selection-bar button { white-space: nowrap; }
.tactics-page .tactics-selection-bar button[hidden] { display: none; }
/* The game plan card: one column that is exactly as wide as the card (minmax(0, 1fr)), every selector at the full width of it, nothing wider than its box. */
.tactics-page .tactics-settings-panel { box-sizing: border-box; }
.tactics-page .tactic-controls { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
.tactics-page .tactic-controls .field { display: grid; gap: 6px; min-width: 0; color: #c8dace; font-size: .81rem; font-weight: 750; }
.tactics-page .tactic-controls select { box-sizing: border-box; width: 100%; max-width: 100%; }
.tactics-page .tactics-roster-count { color: #b5cbbe; font-size: .75rem; white-space: nowrap; }
.tactics-page .tactics-roster-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .6fr); gap: 8px; margin-bottom: 12px; }
.tactics-page .tactics-roster-filters :is(input, select) { width: 100%; }
.tactics-page .player-list { max-height: 460px; border: 1px solid var(--tactics-edge); border-radius: var(--space-2); background: #0b2628; }
.tactics-page .player-row {
  min-height: 48px; height: auto; grid-template-columns: calc(var(--position-count, 2) * 2.4rem + 4px) minmax(0, 1fr) auto auto;
  gap: 10px; padding: 6px 10px; border-bottom-color: var(--tactics-edge);
  background: transparent; color: #e5f0e7;
}
.tactics-page .player-row .name { min-width: 0; font-size: .86rem; }
.tactics-page .player-row .name :is(.person, .name-status, .name-status-text) { min-width: 0; max-width: 100%; }
.tactics-page .player-row .name .name-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A player already on the pitch or on the bench: the whole row is greyed (text, avatar, stars fade; the background dims a little) but it stays clickable and draggable. */
.tactics-page .player-row.used { opacity: 1; background: rgba(0, 0, 0, .22); }
.tactics-page .player-row.used > * { opacity: .45; }
@media (max-width: 560px) {
  .tactics-page .player-row { grid-template-columns: calc(var(--position-count, 2) * 2.05rem + 2px) minmax(0, 1fr) auto auto; gap: 6px; padding: 6px 8px; }
  .tactics-page .player-row .stars { font-size: .66rem; letter-spacing: 0; }
}
.tactics-page .player-row:is(:hover, :focus-visible, .selected) { background: #1c4439; }
.tactics-page .player-row.selected { box-shadow: inset 3px 0 0 var(--color-accent); outline: 0; }
.tactics-page .player-row.unavailable { background: rgba(160, 66, 62, .07); }
.tactics-page .tactics-roster-empty { padding: 24px 14px; margin: 0; text-align: center; color: #c5dbcc; font-size: .89rem; }
.tactics-page .tactics-orders-panel { margin: 0; min-width: 0; box-sizing: border-box; }
.tactics-page .orders-card .order-form {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; white-space: normal;
}
.tactics-page .order-step-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }   /* the three steps one under the other, each as wide as the card */
.tactics-page .order-step {
  display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px;
  border: 1px solid var(--tactics-edge); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .16);
}
.tactics-page .order-step-title { margin: 0; color: #eaf5e9; font-size: .87rem; font-weight: 780; }
.tactics-page .order-step-fields { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; align-items: flex-end; }   /* the controls of a step side by side, wrapping when the card is narrow */
.tactics-page .order-step-fields > :is(.field, select, input, .order-params) { flex: 1 1 11rem; min-width: 0; }
.tactics-page .order-step-fields > .order-params { flex-basis: 16rem; }
.tactics-page .order-step-fields .field { display: grid; gap: 4px; min-width: 0; margin: 0; }
.tactics-page .order-step-fields .field[hidden] { display: none; }
.tactics-page .order-step-fields :is(input, select) { width: 100%; max-width: 100%; }
.tactics-page .order-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.tactics-page .order-params:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.tactics-page .order-params .order-col { min-width: 0; }
.tactics-page .order-submit-row { display: flex; justify-content: flex-end; }
.tactics-page .order-submit-row .btn { min-height: 44px; min-width: 120px; }
.tactics-page .order-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.tactics-page .order-trigger-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.tactics-page .order-trigger-row .field {
  display: flex; flex-direction: column; gap: 4px;
}
.tactics-page .order-timing-group {
  display: flex; gap: 6px; align-items: center;
}
.tactics-page .order-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px; align-items: end; padding: 12px 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--tactics-edge);
  border-radius: var(--radius-sm);
}
.tactics-page .order-action-row .order-params {
  display: contents;
}
.tactics-page .order-col {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.tactics-page .order-label {
  font-size: var(--text-xs, 0.75rem);
  color: #bcd3c4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tactics-page .order-btn-col {
  display: flex; align-items: flex-end;
}
.tactics-page .order-btn-col .btn {
  min-height: 40px; white-space: nowrap;
}
.tactics-page .orders-card :is(input, select) {
  width: auto; max-width: min(100%, 22rem); min-height: 38px;
}
.tactics-page .tactics-orders-list { padding-left: 18px; margin: 0 0 10px; }
.tactics-page .tactics-order-item { margin-bottom: 8px; line-height: 1.5; }
.tactics-page .tactics-sheet-handle { display: none; }
.tactics-page .slot.pending-target,
.tactics-page .bench-slot.pending-target {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 45%, transparent);
}
@media (max-width: 1180px) {
  /* Lineup and Players one under the other at full width; During the match | Strategy still side by side. */
  .tactics-page .tactics-field-panel, .tactics-page .tactics-side { grid-column: 1 / -1; }
  .stadium-app .board > .main .tactics-page .tactics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tactics-page .tactics-side > .tactics-roster-panel { flex: 0 0 auto; }
  .tactics-page .tactics-roster-panel .player-list { flex: 0 0 auto; min-height: 0; max-height: 380px; }
}
@media (max-width: 760px) {
  .tactics-page { position: relative; }
  .tactics-page .tactics { padding-bottom: 32px; }
  .tactics-page .tactics-field-panel { position: static; }
  .tactics-page .tactics-sheet-handle { display: none !important; }
  .tactics-page .tactics-roster-panel {
    position: static;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 16px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--tactics-edge);
    background: #0b232c;
    box-shadow: none;
  }
  .tactics-page .tactics-roster-panel .tactics-section-heading { display: flex; }
  .tactics-page .tactics-roster-panel .tactics-roster-filters { margin-top: 0; }
  .tactics-page .tactics-roster-panel .player-list {
    max-height: 420px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .stadium-app .board > .main .tactics-page .tactics-heading {
    flex-direction: column; align-items: center; gap: 14px;
    text-align: center; padding-bottom: 16px;
  }
  .tactics-page .tactics-heading-copy { width: 100%; }
  .tactics-page .tactics-lead { max-width: 38ch; margin: 9px auto 0; }
  .tactics-page .tactics-heading-actions {
    width: 100%; flex-direction: column; justify-content: center; gap: 8px;
  }
  .tactics-page .tactics-heading-actions .btn { width: 100%; max-width: 280px; margin: 0 auto; }
  .tactics-page .tactics-status { max-width: none; text-align: center; }
  .tactics-page .tactics-strip { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 8px; }
  .tactics-page .tactics-strip-col { padding-inline: 0; }
  .tactics-page .tactics-strip-col + .tactics-strip-col { padding-left: 8px; }
  .tactics-page .tactics-strip-label { font-size: .68rem; }
  .tactics-page .tactics-strip-note { font-size: .68rem; }
  .tactics-page .order-action-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tactics-page .order-btn-col { grid-column: 1 / -1; }
  .tactics-page .order-btn-col .btn { width: 100%; justify-content: center; }
  .stadium-app .board > .main .tactics-page .tactics { grid-template-columns: minmax(0, 1fr); }
  .tactics-page .tactics-field-panel, .tactics-page .tactics-side, .tactics-page .tactics-orders-panel, .tactics-page .tactics-settings-panel { grid-column: auto; }
  .tactics-page .order-params { grid-template-columns: minmax(0, 1fr); }
  .tactics-page .order-submit-row .btn { width: 100%; }
  .tactics-page .tactics-section-heading { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .tactics-page .tactics-instruction { text-align: center; }
  .tactics-page .tactics-preset { width: 100%; }
  .tactics-page .tactics-preset span { text-align: center; }
  .tactics-page .tactics-bench-heading { justify-content: center; gap: 12px; }
  .tactics-page .bench { gap: 5px; }
  .tactics-page .bench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tactics-page .bench-slot { min-height: 68px; font-size: .78rem; padding: 6px; }
  .stadium-app header.topbar { gap: 10px; }
  .stadium-app header.topbar > .topbar-left > .search { order: 4; flex: 1 1 100%; max-width: 100%; }
  .stadium-app header.topbar > .club-identity { margin-right: auto; }
  .stadium-app header.topbar > .topbar-actions { width: 100%; justify-content: center; gap: 10px; }
  .stadium-app header.topbar .club-chips { justify-content: center; flex-wrap: wrap; }
  .stadium-app header.topbar .user-links { justify-content: center; }
}
@media (max-width: 390px) {
  .tactics-page .tactics-strip { gap: 6px; padding: 8px 6px; }
  .tactics-page .tactics-strip-col + .tactics-strip-col { padding-left: 6px; }
  .tactics-page .tactics-strip-label { font-size: .64rem; }
  .tactics-page .tactics-strip-note { font-size: .64rem; }
  .tactics-page .tactics-roster-filters { grid-template-columns: 1fr; }
  .tactics-page .order-trigger-row .field { width: 100%; }
  .tactics-page .order-action-row { grid-template-columns: 1fr; padding: 10px; }
  .tactics-page .order-btn-col { grid-column: 1 / -1; }
  .tactics-page .orders-card :is(input, select) { width: 100%; max-width: 100%; }
}

/* Keep the mobile roster sheet fixed to the viewport, not to this animated view. */
@keyframes tactics-view-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .modern-shell .board > .main > .tactics-page { animation: tactics-view-arrive 190ms ease-out both; }
}

/* The pitch is a GRID: 5 columns x 6 rows (attack, attacking mids, mids, defensive mids, defence, keeper). A slot is a block in its own cell - disc (photo or position), the name chip BELOW
   it and the stars below that - so nothing is painted over anything else, whatever the width. The height follows the content (no fixed aspect ratio), the lines of the field are
   decoration behind the cells. Sizes follow the pitch width (container units): disc, name and stars shrink together on a phone. */
.tactics-page .pitch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  align-items: start;
  gap: clamp(8px, 2.6cqw, 14px) 0;
  padding: clamp(8px, 2.4cqw, 14px) clamp(2px, 0.8cqw, 6px);
  aspect-ratio: auto;
  width: 100%;
  max-width: 510px;
}
.tactics-page .pitch .slot {
  position: relative; z-index: 1;
  left: auto; top: auto; transform: none; width: auto; min-width: 0;
  display: grid; justify-items: center; align-content: start; gap: 3px;
  padding: 0 1px;
}
.tactics-page .pitch .slot .shirt { width: clamp(36px, 14cqw, 66px); height: clamp(36px, 14cqw, 66px); font-size: clamp(11px, 3.4cqw, 17px); }
.tactics-page .pitch .slot.empty .shirt { font-size: clamp(10px, 3cqw, 15px); }
.tactics-page .pitch .slot .shirt-number { right: -3px; bottom: -3px; font-size: clamp(8px, 2.1cqw, 11px); }
.tactics-page .pitch .slot .label {
  display: block; box-sizing: border-box; max-width: 100%; min-width: 0; padding: 1px 5px;
  font-size: clamp(10px, 2.9cqw, 13px); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tactics-page .pitch .slot .label .name-status { display: flex; justify-content: center; min-width: 0; max-width: 100%; }
.tactics-page .pitch .slot .label .name-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tactics-page .pitch .slot > div:last-child { max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 3px; white-space: nowrap; font-size: clamp(9px, 2.6cqw, 12px); line-height: 1.2; }
.tactics-page .pitch .slot .stars { font-size: clamp(8px, 2.6cqw, 12px); letter-spacing: 0; }
.tactics-page .pitch .slot .mood { font-size: clamp(8px, 2.4cqw, 11px); }
.tactics-page .pitch .marking { z-index: 0; }
.tactics-page .tactics-field-title-row { gap: 10px; }

/* The "i" button: a small round button on a chip that opens the player's detail panel (it never selects, moves or drags). */
.tactics-page .info-btn {
  display: inline-grid; place-items: center; width: 22px; height: 22px; min-width: 22px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(220, 245, 225, .55); background: rgba(5, 32, 29, .88); color: #eaf8ea; font: italic 700 .78rem/1 Georgia, serif; cursor: pointer;
}
.tactics-page .info-btn:is(:hover, :focus-visible) { background: var(--color-accent); color: #07211d; border-color: transparent; }
.tactics-page .info-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tactics-page .player-row .info-btn { width: 26px; height: 26px; min-width: 26px; }
.tactics-page .pitch .slot .shirt .info-btn { position: absolute; top: -4px; left: -4px; width: clamp(16px, 4.6cqw, 22px); height: clamp(16px, 4.6cqw, 22px); min-width: 0; font-size: clamp(.58rem, 1.9cqw, .78rem); z-index: 2; }
/* Bench card: the markers (status marks, then the "i") are a strip INSIDE the card, 6 px from its top and right edges, never over the name: the card reserves that strip with padding-top
   (6 + 20 + 6 = 32 px). Both marks at once (injured AND suspended) wrap to a second line and the card reserves one more line. */
.tactics-page .bench-slot { position: relative; overflow: hidden; }
.tactics-page .bench-slot.filled { padding-top: 32px; }
.tactics-page .bench-slot.filled.dual-status { padding-top: 56px; }
.tactics-page .bench-slot .bench-marks { position: absolute; top: 6px; right: 6px; left: 6px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; pointer-events: none; }
.tactics-page .bench-slot .bench-marks > * { pointer-events: auto; }
.tactics-page .bench-slot .bench-marks .status-icons { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }   /* shrinks and wraps (injured + suspended: two lines) instead of spilling out of the card */
.tactics-page .bench-slot .bench-marks .status-badge { gap: 2px; padding: 0 4px; font-size: .66rem; }
.tactics-page .bench-slot .bench-marks .status-badge .status-badge-icon, .tactics-page .bench-slot .bench-marks .status-badge .status-count { font-size: .66rem; }
.tactics-page .bench-slot .bench-marks .info-btn { position: static; flex: none; width: 20px; height: 20px; min-width: 20px; font-size: .72rem; }
.tactics-page .bench-slot .bench-body { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.tactics-page .bench-slot .bench-body > div { max-width: 100%; min-width: 0; }
@media (max-width: 560px) {   /* phones: smaller marks (18 px "i", 4 px inset), the reserved strip shrinks with them (4 + 18 + 4 = 26 px) */
  .tactics-page .bench-slot .bench-marks { top: 4px; right: 4px; left: 4px; gap: 3px; }
  .tactics-page .bench-slot .bench-marks .info-btn { width: 18px; height: 18px; min-width: 18px; font-size: .66rem; }
  .tactics-page .bench-slot .bench-marks .status-badge { padding: 0 4px; font-size: .64rem; }
  .tactics-page .bench-slot .bench-marks .status-badge .status-badge-icon, .tactics-page .bench-slot .bench-marks .status-badge .status-count { font-size: .64rem; }
  .tactics-page .bench-slot.filled { padding-top: 26px; }
  .tactics-page .bench-slot.filled.dual-status { padding-top: 26px; }   /* the phone card is wide enough for both marks on one line */
}

/* The player's detail panel (opened with the "i"): the drawer from the right on a desktop, a sheet from the bottom on a phone; the dark layer is light. It sits above the radio pill. */
.player-backdrop { z-index: 120; background: rgba(1, 9, 17, .45); backdrop-filter: none; }   /* above the slot sheet (110 / 111): opened from it, the drawer has its own dark layer and closing it leaves the sheet as it was */
.drawer.player-drawer { z-index: 121; }
@media (max-width: 760px) {
  .drawer.player-drawer { inset: auto 0 0 0; width: 100%; max-height: 86dvh; border-left: 0; border-top: 1px solid #527869; border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* Phone only: the "choose a player for this slot" sheet (slot-picker.mjs), opened by a tap on a position of the pitch. A bottom sheet over the page, at most 85% of the screen tall,
   with its own scrolling list; above the tabs and the player drawer's level. */
.slot-picker-backdrop { z-index: 110; background: rgba(1, 9, 17, .55); backdrop-filter: none; }
.slot-picker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 111;
  display: flex; flex-direction: column; box-sizing: border-box;
  max-height: 85vh; max-height: 85dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #0b232c; border: 1px solid var(--surface-border); border-bottom: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
  transform: translateY(var(--drag-y, 0px)); transition: transform 180ms ease-out;
  animation: slot-picker-in 200ms ease-out;
}
.slot-picker.dragging { transition: none; }
.slot-picker:focus { outline: none; }
@keyframes slot-picker-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .slot-picker { animation: none; transition: none; } }
@media (min-width: 761px) { .slot-picker, .slot-picker-backdrop { display: none; } }   /* the desktop keeps select / move / drag */
body:has(.slot-picker) { overflow: hidden; }
.slot-picker-grab { flex: none; padding: 8px 14px 6px; touch-action: none; cursor: grab; }
.slot-picker-grab .sheet-grab-bar { display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.slot-picker-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slot-picker-title h2 { margin: 0; font-size: 1.05rem; }
.slot-picker-close { flex: none; min-width: 40px; min-height: 40px; }
.slot-picker-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 10px 12px; }
.slot-picker-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 30px; align-items: center; gap: 8px;
  min-height: 52px; padding: 6px 8px; border-bottom: 1px solid rgba(143, 183, 154, .16); border-radius: 8px; cursor: pointer;
}
.slot-picker-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.slot-picker-row .name { min-width: 0; font-size: .9rem; }
.slot-picker-row .name :is(.person, .name-status, .name-status-text) { min-width: 0; max-width: 100%; }
.slot-picker-row .name .name-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-picker-row .player-positions { display: inline-flex; gap: 3px; }
.slot-picker-row.current { background: color-mix(in srgb, var(--color-accent) 16%, transparent); box-shadow: inset 3px 0 var(--color-accent); }
.slot-picker-row.used { background: rgba(0, 0, 0, .22); }   /* already on the pitch or the bench: the same grey as the squad list, still pickable (he is moved) */
.slot-picker-row.used > :not(.info-btn) { opacity: .45; }
/* The "i" at the end of each row (opens the player's attributes over the sheet): a round 30 px button, never dimmed, also on the disabled rows. */
.slot-picker .info-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(220, 245, 225, .55); background: rgba(5, 32, 29, .88); color: #eaf8ea; font: italic 700 .9rem/1 Georgia, serif; cursor: pointer;
}
.slot-picker .info-btn:is(:hover, :focus-visible) { background: var(--color-accent); color: #07211d; border-color: transparent; }
.slot-picker .info-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.slot-picker-row.unavailable { background: rgba(0, 0, 0, .3); cursor: not-allowed; }   /* injured or suspended: listed, not pickable; the status mark stays at full strength */
.slot-picker-row.unavailable :is(.person .avatar, .name-status-text, .player-positions, .stars) { opacity: .5; }