/* footyup/lineup-board.css — the tactical map's board (lineup-board.jsx): the pitch, each side's bench, «Next on»,
   «Not placed», the players as shirts, the drag's ghost and the glide. Shared by the public map (footyUP.dev.html,
   after styles-2.css, which keeps the form around it: the modal, its head, the formations, the save bar) and the
   admin (admin.dev.html). Each side's colour comes in as --side, set by the board from its sides prop. */
.lu-meta, .lu-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--bone-dim); max-width: 64ch; }
.lu-board { display: grid; gap: 20px; }
.lu-bar { flex: none; width: 3px; height: 14px; background: var(--side); }
/* The pitch. It keeps its geometry in every language (dir="ltr" on .lu-field), its words isolate with <bdi>. */
.lu-field { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "t1 t1" "pitch rail" "t0 t0"; justify-items: start; }
.lu-field > .is-s1 { grid-area: t1; }
.lu-field > .is-s0 { grid-area: t0; }
.lu-tag { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--bone); } /* type: .t-label; bone, the colour on its square: blue text on ink is 4.46:1 */
.lu-tag::before { content: ''; width: 8px; height: 8px; background: var(--side); }
.lu-pitch { grid-area: pitch; justify-self: center; position: relative; width: min(100%, 440px); aspect-ratio: 2 / 3; background: var(--pitch-ground); }
.lu-half { position: absolute; left: 0; right: 0; height: 50%; }
.lu-half.is-top { top: 0; background: color-mix(in srgb, var(--side) 7%, transparent); } /* the board sets each half's --side */
.lu-half.is-bot { bottom: 0; background: color-mix(in srgb, var(--side) 6%, transparent); }
.lu-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--bone) 22%, transparent); stroke-width: 1.5; }
.lu-lines * { vector-effect: non-scaling-stroke; }
.lu-lines.is-h, .lu-lines.is-p { display: none; }
.lu-side { list-style: none; margin: 0; padding: 0; }
.lu-pitch .lu-side { display: contents; }
.lu-pitch .lu-slot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: min(96px, calc(var(--span) * 1% - 6px)); display: grid; }
/* A player is his team's shirt over an ink label (owner's reference, 2026-10-03), the two one control: the box
   (≥ 44 px) takes the drag, the pick, the focus and the drop, the label overlaps the shirt's hem. --shirt-w is
   the shirt's width, set per breakpoint on the tile itself (below) — so a ghost or a glide, outside the pitch,
   keeps it; every look here hangs on the tile's own classes for the same reason. */
.lu-tile {
  --shirt-w: 24px;
  width: 100%; min-height: 44px; padding: 0; display: grid; align-content: center; justify-items: center;
  background: none; color: var(--bone); border: 0; font: inherit; cursor: grab;
}
.lu-tile-in { display: contents; }
.lu-shirt { display: block; width: var(--shirt-w); height: auto; overflow: visible; }
.lu-shirt path { vector-effect: non-scaling-stroke; }
.lu-body { fill: var(--shirt, var(--side)); }
.lu-collar { fill: none; stroke: var(--ink); stroke-width: 1.5px; }
.lu-tile.is-gk { --shirt: var(--team-keeper); }
.lu-lab { position: relative; width: fit-content; max-width: 100%; min-width: min(100%, calc(var(--shirt-w) + 16px)); margin-top: calc(var(--shirt-w) * -0.17); padding: 3px 4px; display: grid; justify-items: center; gap: 2px; background: var(--ink); }
.lu-rts { display: flex; justify-content: center; gap: 4px; }
.lu-lab .lu-rt { color: var(--bone-dim); }
.lu-gk { font: 500 10px/1 var(--font-mono); color: var(--team-keeper); }
/* «Play with» on his own map (lineup-wishes.jsx; the owner's mockup): YOU — an accent armband over his shirt and
   his label framed in the accent, the site's «this is you» colour, never a team's (the picked tile's outline is
   bone, the focus ring sits outside the tile); WITH YOU — his picks, a bone tag under the rating on an accent
   hairline. Words, not colour alone: both are said to the ear too. */
.lu-you { padding: 3px 5px 2px; margin-bottom: 3px; background: var(--accent); color: var(--accent-text); font: 800 9px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.lu-tile.is-you .lu-lab { outline: 1.5px solid var(--accent); }
.lu-with { margin-top: 1px; padding-top: 3px; border-top: 1px solid var(--accent); color: var(--bone); font: 700 9px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.lu-top { position: relative; display: grid; justify-items: center; } /* the armband and the shirt it is worn over */
.lu-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 10px/1.1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; }
/* On the pitch a name may take two lines, broken only BETWEEN words (each word is its own .lu-w box): never
   inside one, no hyphens. A word too long for the tile ellipsizes on its own line. */
.lu-pitch .lu-nm, .lu-next .lu-nm, .lu-bench .lu-nm, .lu-glide .lu-nm, .lu-ghost .lu-nm { white-space: normal; text-overflow: clip; text-align: center; hyphens: none; max-height: 2.2em; }
.lu-w { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
.lu-rt, .lu-ln { font: 500 10px/1 var(--font-mono); }
span.lu-tile { cursor: default; }
/* An open place: a dashed shirt in the half's colour, its line under it in --bone-dim (crimson and blue text sit
   under 4.5:1 on the grass); solid, and tinted, while a picked player can go there. «Gone» keeps its box. */
.lu-tile.is-empty { gap: 2px; color: var(--bone-dim); cursor: pointer; }
.lu-tile.is-empty .lu-body { fill: none; stroke: var(--side); stroke-width: 1px; stroke-dasharray: 3 2; }
.lu-tile.is-empty .lu-collar { stroke: var(--side); stroke-width: 1px; }
.lu-tile.is-gone { padding: 4px 6px; border: 1px dashed var(--side); } /* ui-allow-frame: a place whose player left is a drop target and a button */
span.lu-tile.is-empty { cursor: default; }
.lu-slot.is-target .lu-tile.is-empty .lu-body { fill: color-mix(in srgb, var(--side) 16%, transparent); stroke-dasharray: none; }
.lu-slot.is-target .lu-tile.is-gone { border-style: solid; }
.lu-slot.is-over .lu-tile, .lu-bp.is-over { outline: 2px solid var(--bone); outline-offset: 3px; }
.lu-tile.is-lifted, .lu-bp.is-lifted { opacity: .35; } /* the empty mould while its ghost is carried */
.lu-tile:focus-visible, .lu-bp:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lu-tile.is-picked, .lu-bp.is-picked { outline: 3px solid var(--bone); outline-offset: 3px; }
[data-drag] { touch-action: none; user-select: none; -webkit-user-select: none; }
.lu-ghost { position: fixed; left: 0; top: 0; z-index: 5; margin: 0; pointer-events: none; box-sizing: border-box; outline: 2px solid var(--bone); outline-offset: 2px; }

/* Next on (a third side; owner, 2026-10-05): its own half of a pitch, at the main pitch's scale, its bench beside
   it as the main pitch's rail is — the same grid as .lu-field. The half's places are the full pitch's side-0
   places, its own half: a place at --y (50–100 % of the pitch from the far goal) stands at (y − 50) × 2 of it. */
.lu-next { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "h h" "pitch rail"; justify-items: start; padding-top: 16px; border-top: 1px solid var(--bone-faint); }
.lu-next-h { grid-area: h; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--bone); } /* type: .t-label; blue text on ink is 4.46:1, so the bar carries the colour */
.lu-pitch.is-half { aspect-ratio: 4 / 3; }
.lu-pitch.is-half .lu-slot { top: calc((var(--y) - 50%) * 2); }
.lu-half.is-one { inset: 0; height: auto; background: color-mix(in srgb, var(--side) 6%, transparent); }
.lu-next > .lu-bench { grid-area: rail; contain: size; align-self: stretch; justify-self: stretch; min-width: 0; }
/* Each team's bench beside its own half, along the pitch's long side (owner: «выводи запасных игроков сбоку
   поля», then «сделай две скамейки — у каждой из команд»): beside the vertical pitch the rail splits — the red
   bench by the red top half, the yellow by the yellow bottom; under the landscape pitch the strip splits —
   yellow left, red right. The third side's bench sits beside its own half, in its «Next on» block. A bench's players wear their
   team's colour muted (edge + tint) against the pitch's filled tiles; each bench scrolls on its own. */
.lu-rail-col { grid-area: rail; contain: size; align-self: stretch; justify-self: stretch; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lu-rail-col > .lu-bench.is-s1 { order: 0; } /* the red bench by the red (top) half */
.lu-rail-col > .lu-bench.is-s0 { order: 1; }
.lu-bench { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* A bench player: the same shirt outlined in his team's colour over a 16 % tint — the pitch filled, the bench
   muted. A suggestion («Not saved», «Older lineup») keeps its dashed edge round the whole player. */
.lu-bp .lu-body { fill: color-mix(in srgb, var(--side) 16%, var(--ink)); stroke: var(--side); stroke-width: 1px; }
.lu-bp .lu-collar { stroke: var(--side); stroke-width: 1px; }
.lu-bp.is-suggested { border: 1px dashed var(--side); } /* ui-allow-frame: a suggested bench player is a control; the dashed edge says not saved yet */
.lu-sug { font: 600 9px/1.15 var(--font-sans); color: var(--bone-dim); text-transform: none; letter-spacing: 0; max-width: 100%; }
.lu-unplaced { --side: var(--bone-faint); display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--bone-faint); }
.lu-unplaced .lu-bench-row { flex-direction: row; flex-wrap: wrap; }
.lu-unplaced .lu-tile { width: 96px; }
/* The pool (Match control's coordinator map: «Without a side»): a strip like «Next on»'s bench in neutral bone —
   one scrolling line on a phone (a finger along it scrolls, across it drags), rows under the landscape pitch. */
.lu-pool { --side: var(--bone-dim); }
.lu-pool .lu-tile { width: 96px; flex: none; }
@media (max-width: 899px) {
  .lu-pool { flex-direction: row; align-items: center; gap: 8px; overflow: auto hidden; padding-block: 4px 8px; }
  .lu-pool .lu-bench-row { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .lu-pool .lu-tile { width: 80px; }
  .lu-pool [data-drag] { touch-action: pan-x; }
}
.lu-bench:focus { outline: none; } /* takes the focus after «Back to bench» removes the button that had it */
.lu-bench.is-over { background: var(--surface-hover); }
.lu-bench-h { margin: 0; flex: none; display: flex; align-items: flex-start; gap: 6px; color: var(--bone-dim); white-space: normal; } /* type: .t-label */
.lu-bench .lu-bench-h::before { content: ''; flex: none; width: 3px; height: 12px; background: var(--side); }
/* On the phone's rail (56 px) a bench says «Red · 2» and an empty one «—»; the full words stay for the ear. */
.lu-bench-short { display: none; }
@media (max-width: 899px) {
  :is(.lu-rail-col, .lu-next) .lu-bench-short { display: inline; }
  :is(.lu-rail-col, .lu-next) .lu-bench-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :is(.lu-rail-col, .lu-next) .lu-bench-h { gap: 4px; letter-spacing: .06em; }
  /* A bench that scrolls keeps its heading in view at its top; its players pass under it, on the form's own
     ground. */
  .lu-bench > .lu-bench-h { position: sticky; top: 0; inset-inline-start: 0; z-index: 1; padding-block-end: 2px; background: var(--ink); }
  .lu-bench.is-over > .lu-bench-h { background: linear-gradient(var(--surface-hover), var(--surface-hover)) var(--ink); }
}
.lu-bench .lu-tobench { flex: none; white-space: normal; padding-inline: 6px; }
.lu-bench-row { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lu-bench .lu-tile { width: 100%; }
/* The shirt's size, measured: 24 px on a phone (its 58 px rows hold a 56 px player; the 56 px rail shows 4 whole
   players at 0–24 px alike), 34 on the 440 px pitch (rows 72 px apart), 52 on the landscape pitch (a line's
   places ≥ 95 px apart hold a 75 px player) and 40 on the strips under it. On the bench's own class, so a
   carried bench player keeps his. */
@media (min-width: 641px) { .lu-tile { --shirt-w: 34px; } }
@media (min-width: 900px) { .lu-tile { --shirt-w: 52px; } .lu-bp { --shirt-w: 40px; } }
.lu-bench .lu-note { font-size: 11px; }
.lu-bench [data-drag] { touch-action: pan-y; } /* a finger along the rail scrolls it; across it, drags */

/* Arabic and Devanagari: Latin tracking pulls their letters apart. */
:root:is([lang="ar"], [lang="hi"]) :is(.lu-who, .lu-tag, .lu-next-h, .lu-bench-h, .lu-nm) { letter-spacing: normal; }

@media (min-width: 900px) {
  /* The pitch (and its benches under it) as wide as the form allows, as far as the screen's height lets a 3:2 pitch
     stay whole in view under the form's head and save bar (owner, 2026-10-03: «используй весь размер экрана»). */
  .lu-field { grid-template-areas: "t0 t1" "pitch pitch" "rail rail"; grid-template-columns: 1fr 1fr; width: 100%; max-width: calc((var(--vhu) * 100 - 240px) * 1.5); justify-self: center; }
  .lu-rail-col { contain: none; flex-direction: row; gap: 16px; }
  .lu-rail-col > .lu-bench.is-s0 { order: 0; } /* yellow under the yellow (left) half, red under the red */
  .lu-rail-col > .lu-bench.is-s1 { order: 1; }
  /* Under the landscape pitch every bench wraps into rows (owner: every player in reach of a drag) — no
     sideways scroll, so a tile there drags in any direction, as on the pitch. */
  .lu-bench { min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px; padding-block: 4px 8px; overflow: visible; }
  .lu-bench-h { white-space: nowrap; }
  .lu-bench > .lu-bench-h { min-height: 44px; align-items: center; } /* as tall as «To this bench»: a pick never resizes the strip */
  .lu-bench-row { flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .lu-bench > .lu-note { flex: 1 0 100%; margin: 0; } /* the players, or nobody, on the line under the heading */
  .lu-bench .lu-tile { width: 96px; flex: none; }
  .lu-bench [data-drag] { touch-action: none; }
  .lu-field > .is-s1 { justify-self: end; }
  .lu-pitch { width: 100%; aspect-ratio: 3 / 2; }
  .lu-half { height: auto; top: 0; bottom: 0; }
  .lu-half.is-top { left: 50%; right: 0; }
  .lu-half.is-bot { left: 0; right: 50%; }
  .lu-lines.is-v { display: none; }
  .lu-lines.is-h { display: block; }
  .lu-pitch .lu-slot { left: calc(100% - var(--y)); top: var(--x); width: min(96px, calc(11% - 6px)); } /* rows are ≥ 11 % apart (LU_ROW_Y) */
  /* «Next on» at the field's own width and scale: its half is half the field wide (3:4, its goal on the left), its
     bench wraps beside it. */
  .lu-next { grid-template-columns: 1fr 1fr; width: 100%; max-width: calc((var(--vhu) * 100 - 240px) * 1.5); justify-self: center; }
  .lu-next > .lu-bench { contain: none; align-self: start; }
  .lu-pitch.is-half { aspect-ratio: 3 / 4; }
  .lu-pitch.is-half .lu-slot { left: calc((100% - var(--y)) * 2); top: var(--x); width: min(96px, calc(22% - 6px)); }
}
@media (min-width: 1200px) {
  .lu-board { grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 32px; align-items: start; }
  .lu-ctl { grid-column: 1; grid-row: 1; }
  .lu-field { grid-column: 2; grid-row: 1 / span 2; }
  .lu-next { grid-column: 2; grid-row: 3; }
  .lu-pool { grid-column: 1; grid-row: 2; align-self: start; } /* under the controls, beside the pitch */
}
@media (max-width: 640px) {
  .lu-board { gap: 8px; }
  /* A phone's rows are 58 px apart and a two-line player is 56 px tall: a mark must not add height (measured —
     in flow, a marked player overlapped his neighbour at 360 and 390). YOU sits over his shirt's chest, WITH YOU
     on his label's top edge, over the hem. */
  .lu-top > .lu-you { position: absolute; top: 50%; left: 50%; z-index: 1; margin: 0; padding: 2px 3px 1px; font-size: 8px; letter-spacing: .1em; transform: translate(-50%, -60%); }
  .lu-with { position: absolute; bottom: calc(100% - 3px); left: 50%; margin: 0; padding: 2px 3px 0; background: var(--ink); font-size: 7.5px; letter-spacing: .05em; white-space: nowrap; transform: translateX(-50%); } /* the mockup's own size */
  /* Room for the rail: a narrower, taller pitch (1:2, its own lines), the rail 56 px. Rows stay ≥ 11 % apart
     (58 px at 264 × 528), a five-man line's tiles 44 px wide. */
  .lu-field, .lu-next { grid-template-columns: minmax(0, 1fr) 56px; }
  .lu-pitch { width: 100%; aspect-ratio: 1 / 2; }
  .lu-pitch.is-half { aspect-ratio: 1 / 1; }
  .lu-lines.is-v { display: none; }
  .lu-lines.is-p { display: block; }
}
/* The glide (game-lineup-motion.jsx): a clone above everything, travelling from where a player was to where
   he is. Where a glide cannot be followed (reduced motion, an end off screen), a short highlight instead. */
.lu-glide { position: fixed; z-index: 6; margin: 0; pointer-events: none; box-sizing: border-box; }
.lu-tile[data-lu-moved] { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .lu-tile, .lu-bp { transition: background-color .15s, outline-color .15s; } }