/* MatchIQ lineup: fixed-size cards, full-width pitch and a single detail overlay. */
.squad-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lineup-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; }
.lineup-actions[hidden] { display: none; }
.lineup-optimizer { margin: 16px 0 20px; padding: 16px 18px; border: 1px solid #d9ff4335; border-radius: 18px; background: linear-gradient(105deg, #d9ff430c, transparent 70%), var(--bg-raised); }
.lineup-optimizer-copy { display: flex; align-items: center; gap: 14px; }
.lineup-optimizer-copy > span { font-size: 30px; color: var(--lime); }
.lineup-optimizer-copy strong { display: block; font-size: 15px; font-weight: 750; }
.lineup-optimizer-copy small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.lineup-optimize-button { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; margin-left: auto; padding: 0 22px; font-size: 13px; border: 1px solid #e9ff9c; box-shadow: 0 5px 22px #d9ff4314; transition: background .2s, box-shadow .2s; }
.lineup-optimize-button > span:last-child { font-size: 23px; transition: transform .2s; }
.lineup-optimize-button:hover { box-shadow: 0 6px 24px #d9ff4328; }
.lineup-optimize-button:hover > span:last-child { transform: translate(2px, -2px); }
.lineup-optimize-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.pitch-panel { padding: 20px; }
.pitch-panel, .table-panel { container-type: inline-size; }
.lineup-workspace-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.lineup-mode-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border: 1px solid var(--line-strong); border-radius: 16px; background: #0c1712; }
.lineup-mode-switch::before { content: ''; position: absolute; z-index: -1; inset: 5px auto 5px 5px; width: calc(50% - 5px); border-radius: 11px; background: #203735; box-shadow: 0 4px 16px #0003; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s; }
[data-mode="editor"] .lineup-mode-switch::before { transform: translateX(100%); background: #304021; }
.lineup-mode-switch button { padding: 12px 18px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 800; cursor: pointer; }
.lineup-mode-switch button[aria-pressed="true"] { color: var(--cyan); }
[data-mode="editor"] .lineup-mode-switch button[aria-pressed="true"] { color: var(--lime); }
.lineup-mode-switch small { margin-left: 6px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 5px; font-size: 8px; vertical-align: middle; opacity: .7; }
.lineup-save-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.lineup-save-status > i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
[data-mode="editor"] .lineup-save-status > i { background: var(--lime); }
.lineup-save-status.has-error, .lineup-notice { color: #ffc58c; }
.lineup-context { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.lineup-context h2 { margin: 0 0 7px; font-size: clamp(20px, 3cqi, 25px); letter-spacing: -.6px; }
.lineup-context p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.lineup-editor-tools { display: flex; align-items: center; gap: 14px; }
.lineup-editor-tools[hidden], .formation-picker [hidden] { display: none !important; }
.lineup-editor-tools button { font-size: 11px; white-space: nowrap; }
.lineup-editor-tools button:disabled { opacity: .4; cursor: default; }
.lineup-notice { margin: 14px 0; font-size: 12px; line-height: 1.7; }
.formation-picker > strong { color: var(--cyan); font-size: 26px; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
[data-mode="app"] .lineup-controlbar .formation-picker { border-color: #58d9ff30; background: #58d9ff08; }
[data-mode="app"] .pitch-shell { border-color: #58d9ff24; }
[data-mode="app"] .bench-chip { padding-right: 14px; }
[data-mode="editor"] .pitch-shell { border-color: #d9ff4345; }
[data-mode="editor"] .empty-lineup-slot { border-color: #d9ff4340; }
.pitch-player-slot { position: relative; flex: 0 0 120px; width: 120px; height: 154px; }
.pitch-remove { position: absolute; z-index: 5; right: 7px; top: 7px; width: 30px; height: 30px; border: 1px solid #ffffff25; border-radius: 9px; background: #15261d; color: var(--muted); font-size: 21px; cursor: pointer; transition: color .18s, background .18s; }
.pitch-remove:hover { color: #ffbec1; background: #49292b; }
.pitch-remove:focus-visible, .lineup-mode-switch button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.lineup-controlbar { margin-bottom: 12px; display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 2fr); gap: 16px; }
.lineup-controlbar .formation-picker { min-width: 0; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(217,255,67,.2); border-radius: 16px; background: var(--lime-soft); }
.lineup-controlbar .formation-picker > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.lineup-controlbar .formation-picker select { min-width: 112px; margin: 0; padding: 10px 30px 10px 12px; color: #f1f6f2; background-color: #14231c; color-scheme: dark; border-color: rgba(217,255,67,.4); border-radius: 10px; font-size: 22px; }
.lineup-controlbar .formation-picker select option { color: #f1f6f2; background-color: #14231c; }
.lineup-controlbar .formation-picker select option:checked { color: #10170f; background-color: #d9ff43; }
.lineup-controlbar .formation-picker select:focus-visible { outline: 2px solid #d9ff43; outline-offset: 3px; }
@media (forced-colors: active) {
  .lineup-controlbar .formation-picker select, .lineup-controlbar .formation-picker select option { color: CanvasText; background: Canvas; }
  .lineup-controlbar .formation-picker select option:checked { color: HighlightText; background: Highlight; }
}
.lineup-kpis { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lineup-kpis > span { min-width: 0; padding: 11px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.018); }
.lineup-kpis small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.lineup-kpis strong { margin-top: 6px; font-size: clamp(15px, 2cqi, 20px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineup-kpis .lineup-score strong { color: var(--lime); }
.pitch-panel .rule-status { margin: 14px 0 18px; padding: 0 4px; min-height: 24px; border: 0; background: none; }
.pitch-panel .rule-status p { font-size: 11px; line-height: 1.6; }
.pitch-panel .rule-status > span { background: none; width: auto; }
.pitch-shell { padding: 8px; border: 1px solid rgba(217,255,67,.12); border-radius: 26px; background: #0b1913; }
.pitch-viewport { overflow-x: auto; border-radius: 20px; scrollbar-color: #466244 #12251b; scrollbar-width: thin; }
.pitch-viewport:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.pitch {
  --lineup-columns: 4;
  position: relative;
  min-width: calc(var(--lineup-columns) * 120px + (var(--lineup-columns) - 1) * 12px + 40px);
  min-height: 724px;
  padding: 24px 20px;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 20px;
  overflow: hidden;
  border: 1px solid rgba(231,255,238,.12);
  border-radius: 20px;
  background:
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(232,255,238,.12) 50%, transparent calc(50% + .5px)),
    radial-gradient(ellipse at 50% 0, rgba(130,200,113,.12), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 12.5%, transparent 12.5% 25%),
    #10291e;
}
.pitch::before { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(240,255,246,.13); border-radius: 3px; pointer-events: none; }
.pitch::after { content: ""; position: absolute; left: 50%; top: 50%; width: 144px; height: 144px; border: 1px solid rgba(240,255,246,.13); border-radius: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.formation-row { position: relative; z-index: 2; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 20px; transition: background .18s ease, box-shadow .18s ease; }
.formation-row.is-dragover { background: rgba(217,255,67,.065); box-shadow: inset 0 0 0 1px rgba(217,255,67,.3); }
.pitch-player, .empty-lineup-slot { flex: 0 0 120px; width: 120px; height: 154px; min-width: 120px; border-radius: 15px; }
.empty-lineup-slot { display: grid; place-items: center; border: 1px dashed rgba(234,245,237,.2); color: rgba(234,245,237,.5); background: rgba(6,20,12,.2); }
.empty-lineup-slot i { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(234,245,237,.12); border-radius: 50%; font-size: 22px; font-style: normal; font-weight: 400; }
.pitch-player { position: relative; padding: 12px 8px 8px; display: flex; flex-direction: column; align-items: center; overflow: hidden; border: 1px solid rgba(222,242,228,.18); color: var(--text); background: linear-gradient(155deg, #223c30, #12221a 78%); box-shadow: 0 10px 22px rgba(0,0,0,.23); text-align: center; cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.pitch-player:hover, .pitch-player[aria-expanded="true"] { z-index: 4; transform: translateY(-5px); border-color: var(--lime); box-shadow: 0 18px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(217,255,67,.08); }
.pitch-player:focus-visible, .bench-chip:focus-visible, .bench-add:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.pitch-player[draggable="true"]:active { cursor: grabbing; }
.pitch-player.is-dragging { opacity: .45; transform: scale(.96); }
.pitch-player.is-kickbase-locked { border-color: rgba(88,217,255,.4); }
.lineup-card-club { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 24px; height: 26px; font-size: 9px; color: var(--muted); }
.lineup-card-club .club-badge { width: 24px; height: 26px; object-fit: contain; }
.lineup-card-indicator { position: absolute; right: 9px; top: 10px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid rgba(234,245,237,.18); border-radius: 50%; color: var(--muted); font-size: 11px; }
.is-kickbase-locked .lineup-card-indicator { color: var(--cyan); border: 0; }
.lineup-card-indicator svg { width: 17px; height: 17px; }
.pitch-player .player-avatar.medium { flex: 0 0 54px; width: 54px; height: 54px; margin: 0 auto 6px; border-radius: 50%; font-size: 20px; box-shadow: 0 7px 16px rgba(0,0,0,.2); }
.lineup-card-name { width: 100%; display: block; min-height: 34px; }
.lineup-card-name small, .lineup-card-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-card-name small { color: #afc3b7; font-size: 11px; line-height: 15px; }
.lineup-card-name strong { color: #fff; font-size: 14px; line-height: 19px; letter-spacing: -.2px; }
.lineup-card-score { width: 100%; margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: center; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.lineup-card-score b { font-size: 13px; }
.lineup-card-score small { color: var(--muted); font-size: 10px; }
.pitch-player.warning, .pitch-player.yellow-card, .pitch-player.yellow-red-card { border-color: rgba(255,197,94,.5); }
.pitch-player.unavailable, .pitch-player.red-card { border-color: rgba(255,95,104,.6); }
.pitch-legend { padding: 13px 10px 5px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.pitch-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.legend-dot.locked { background: var(--cyan); }
.bench { margin-top: 18px; padding: 16px; display: block; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.012); transition: border-color .18s ease, background .18s ease; }
.bench.is-dragover { border-color: rgba(217,255,67,.35); background: rgba(217,255,67,.035); }
.bench-heading { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bench-heading small, .bench-heading strong { display: block; }
.bench-heading small { color: var(--muted); font-size: 10px; }
.bench-heading strong { margin-top: 4px; font-size: 15px; }
.bench-heading > b { padding: 7px 10px; border-radius: 8px; color: var(--lime); background: var(--lime-soft); font-size: 11px; }
.bench > div:last-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.bench-player { position: relative; min-width: 0; }
.bench-chip { width: 100%; min-width: 0; min-height: 80px; padding: 12px 48px 12px 12px; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: rgba(255,255,255,.025); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.bench-chip:hover, .bench-chip[aria-expanded="true"] { border-color: rgba(217,255,67,.4); background: rgba(217,255,67,.04); }
.bench-chip > span { min-width: 0; }
.bench-chip .player-avatar.medium { width: 46px; height: 46px; border-radius: 50%; }
.bench-chip strong, .bench-chip small, .bench-chip em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-chip strong { font-size: 13px; }
.bench-chip small, .bench-chip em { margin-top: 5px; color: var(--muted); font-size: 10px; font-style: normal; }
.bench-add { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #0c160f; background: var(--lime); font-size: 22px; font-style: normal; }
.bench-add:hover { background: #e6ff91; }
.bench-empty { padding: 22px; color: var(--muted); text-align: center; font-size: 12px; }

/* Outside the pitch scroller: edge cards and six-player rows cannot clip it. */
.lineup-player-popover { position: fixed; z-index: 150; width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 22px; border: 1px solid #415c46; border-radius: 22px; color: var(--text); background: #14231c; box-shadow: 0 24px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(217,255,67,.05); animation: lineup-preview-in .18s ease both; }
.lineup-player-popover[hidden] { display: none; }
.lineup-preview-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); background: transparent; font-size: 24px; }
.lineup-preview-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.lineup-preview-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-right: 14px; }
.lineup-preview-heading > div { min-width: 0; }
.lineup-preview-heading .player-avatar { flex-shrink: 0; }
.lineup-preview-heading small { display: block; color: var(--muted); font-size: 11px; }
.lineup-preview-heading strong { display: block; margin-top: 5px; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.lineup-preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 18px 0; border-block: 1px solid var(--line); }
.lineup-preview-stats small, .lineup-preview-fixture > small { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; }
.lineup-preview-stats b { display: block; margin-top: 5px; font-size: 16px; font-variant-numeric: tabular-nums; }
.lineup-preview-fixture { margin-top: 16px; }
.lineup-preview-fixture .next-opponent.is-fixture { margin-top: 7px; width: 100%; }
.lineup-player-popover .kb-status { margin-top: 14px; font-size: 11px; padding: 7px 9px; }
.lineup-player-popover .secondary-button { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; }
@container (max-width: 760px) {
  .lineup-controlbar { grid-template-columns: 1fr; }
  .lineup-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .lineup-optimizer { padding: 18px; }
  .lineup-optimize-button { width: 100%; }
  .pitch-panel { padding: 12px; }
  .lineup-workspace-head { gap: 12px; margin-bottom: 20px; }
  .lineup-mode-switch { width: 100%; }
  .lineup-mode-switch button { padding: 12px 8px; }
  .lineup-context { align-items: flex-start; flex-direction: column; gap: 12px; }
  .pitch-shell { padding: 6px; }
  .pitch-legend { justify-content: flex-start; font-size: 10px; }
  .bench { padding: 12px; }
  .bench > div:last-child { grid-template-columns: 1fr; }
  .bench-heading strong { font-size: 13px; }
}
@keyframes lineup-preview-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .lineup-optimize-button, .lineup-optimize-button > span:last-child { transition: none; }
  .pitch-player, .bench-chip, .formation-row, .pitch-remove, .lineup-mode-switch::before { transition: none; }
  .lineup-player-popover { animation: none; }
}