/* ---------------------------------------------------------------------------
   Lineup page — a top-down field with the starters on it (src/lineup_view.js).
   In the room (src/room.css): one window on the locker room, the field in an
   ink frame, every token drawn as pixel plates. Solid colours only, nothing
   at regular weight. Pixel faces show at exactly 48px or 32px.
--------------------------------------------------------------------------- */
.lu-dcwrap { display: contents; }
.lu-packs { margin: -4px 0 14px; }

.lu-wrap { container: lufield / inline-size; max-width: 1000px; margin: 0 auto; padding: 3px; overflow-x: auto; }
.lu-field {
  position: relative; width: 100%; aspect-ratio: 9 / 7;
  box-shadow: var(--frame);
}
.lu-turf { position: absolute; inset: 0; overflow: hidden; background: #23863f; }
.lu-side { position: absolute; inset: 0; border: 4px solid #fff; pointer-events: none; }
.lu-band { position: absolute; left: 0; right: 0; }
.lu-band.a { background: #23863f; }
.lu-band.b { background: #1c7236; }
.lu-band.ez { background: var(--tm); }
.lu-eztxt {
  position: absolute; left: 0; right: 0; transform: translateY(-50%); text-align: center;
  color: var(--on-tm); font-size: 44px; letter-spacing: 8px; text-transform: uppercase;
}
.lu-yl { position: absolute; left: 0; right: 0; height: 3px; margin-top: -1px; background: #fff; }
.lu-yl.gl { height: 6px; margin-top: -3px; }
.lu-hash { position: absolute; width: 2.4%; height: 2px; margin-top: -1px; background: #fff; }
.lu-num { position: absolute; transform: translateY(-50%); color: #fff; font-size: 30px; }
.lu-num.l { left: 7%; }
.lu-num.r { right: 7%; }
.lu-los { position: absolute; left: 0; right: 0; height: 4px; margin-top: -2px; background: var(--sky); }
.lu-first { position: absolute; left: 0; right: 0; height: 4px; margin-top: -2px; background: var(--gold); }
.lu-ball {
  position: absolute; width: 16px; height: 10px; transform: translate(-50%, -100%);
  background: #7a3b12; box-shadow: 0 0 0 2px var(--ink); z-index: 1;
  clip-path: polygon(4px 0, 12px 0, 16px 4px, 16px 6px, 12px 10px, 4px 10px, 0 6px, 0 4px);
}
.lu-post {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 12%; height: 6px; background: var(--gold); border: 2px solid var(--ink);
}
.lu-post i {
  position: absolute; left: 50%; top: 100%; width: 6px; height: 10px; transform: translateX(-50%);
  background: var(--gold); border: 2px solid var(--ink); border-top: 0;
}

/* --- a player token ---------------------------------------------------------- */
.lu-tok {
  position: absolute; z-index: 2; width: 84px;
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: var(--ink);
}
.lu-tok.lu-at, .lu-tok.lu-ab { transform: translateX(-50%); }
.lu-tok.lu-ac { transform: translate(-50%, -50%); }
a.lu-tok:hover .lu-nm { background: var(--gold); color: var(--ink); }
/* the spot on an ink tag, the face on the club colour in a white ring and
   an ink frame (the window's own edge), the name on a white plate */
.lu-slot {
  position: relative; z-index: 1; margin-bottom: -2px;
  background: var(--ink); color: #fff; border: 2px solid var(--ink);
  padding: 0 6px; font: 900 11px/15px var(--sans); letter-spacing: 0.5px;
}
.lu-face {
  position: relative; width: 54px; height: 52px; box-sizing: border-box;
  background: var(--tm); border: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ink);
}
.lu-face .pxface { position: absolute; left: 3px; bottom: 0; top: auto; }
/* the face is drawn at 48px (lineup_view.js): shown at 48, never scaled */
.lu-face .f64 { width: 48px; height: 48px; }
.lu-face .f32 { width: 32px; height: 32px; display: none; }
.lu-face .ovr {
  position: absolute; right: -12px; bottom: -8px; min-width: 28px; padding: 1px 4px;
  font: 400 16px/1.1 var(--disp); letter-spacing: .3px;
}
.lu-nm {
  margin-top: 8px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink);
  padding: 1px 5px 0; font: 900 11px/15px var(--sans); text-transform: uppercase;
}
.lu-tag {
  margin-top: 4px; background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px var(--ink);
  padding: 0 5px; font: 900 10px/14px var(--sans); text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
}
.lu-tag.lim { background: var(--orange); color: var(--ink); }
/* nobody there: the spot waits in violet, never grey */
.lu-tok.lu-empty .lu-face { background: var(--ink-2); }
.lu-tok.lu-empty .lu-nm { background: var(--violet); color: #fff; }

/* --- offense / defense: big cards ------------------------------------------------
   One side of the ball per view, so the players get the room. The field height
   is fixed per size tier and token heights are fixed px, so rows never touch;
   the width only sets the lanes (nine across on offense). Faces at exactly
   64px (>= 700px field) or 32px (narrower). */
.lu-field.main { aspect-ratio: auto; height: 660px; }
.lu-field.main.off { height: 520px; }
.lu-field.main .lu-tok { width: calc(100% / 9 - 14px); max-width: 76px; }
.lu-field.main .lu-tok.lu-ab { padding-bottom: 10px; }
.lu-field.main .lu-slot { font-size: 11px; line-height: 15px; padding: 0 6px; }
.lu-field.main .lu-face { width: 54px; height: 52px; }
.lu-field.main .lu-face .f64 { width: 48px; height: 48px; }
.lu-field.main .lu-face .ovr {
  right: -13px; bottom: -8px; min-width: 28px; padding: 1px 4px; font-size: 16px;
}
.lu-field.main .lu-nm { margin-top: 9px; max-width: 100%; font-size: 11px; line-height: 15px; padding: 1px 4px 0; }

@container lufield (max-width: 700px) {
  .lu-field.main { height: 470px; }
  .lu-field.main.off { height: 380px; }
  .lu-field.main .lu-tok { width: calc(100% / 9 - 2px); }
  .lu-field.main .lu-tok.lu-ab { padding-bottom: 12px; }
  .lu-field.main .lu-face { width: 36px; height: 34px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
  .lu-field.main .lu-face .pxface { left: 2px; }
  .lu-field.main .lu-face .f64 { display: none; }
  .lu-field.main .lu-face .f32 { display: block; }
  .lu-field.main .lu-slot { font-size: 10px; line-height: 13px; padding: 0 3px; margin-bottom: -3px; border-width: 1px; }
  .lu-field.main .lu-face .ovr {
    right: auto; left: 50%; bottom: -13px; transform: translateX(-50%);
    min-width: 24px; padding: 0 3px; font-size: 14px; border-width: 2px;
  }
  .lu-field.main .lu-nm { margin-top: 15px; max-width: 100%; padding: 0 3px; font-size: 10px; line-height: 12px; }
  .lu-field.main .lu-bk { margin-top: 3px; max-width: 100%; gap: 2px; padding: 0 3px 0 0; font-size: 10px; line-height: 12px; }
  .lu-field.main .lu-bk i { padding: 0 2px; }
  .lu-field.main .lu-nm, .lu-field.main .lu-bk { text-overflow: clip; letter-spacing: -0.2px; }
  .lu-num { font-size: 22px; }
  .lu-eztxt { font-size: 30px; }
}
@container lufield (max-width: 480px) {
  /* a phone: the field is drawn 620px wide and swipes, so a token is 67px and
     a name fits on it at 10px. Nine 37px tokens with 8px names did not. */
  .lu-field.main { width: 620px; max-width: none; }
  /* the dark chip itself says 2nd string */
  .lu-field.main .lu-bk i { display: none; }
  .lu-field.main .lu-bk { padding: 0 2px; }
  .lu-field.main .lu-nm, .lu-field.main .lu-bk { padding: 0 1px; font-size: 10px; white-space: normal; line-height: 11px; max-height: 24px; overflow: hidden; }
  .lu-num { font-size: 18px; }
}

/* --- special teams: two fields side by side, stacked on a phone ----------------- */
.lu-st2 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; max-width: 1000px; margin: 0 auto;
}
.lu-h.rm-sec { margin: 0 3px 10px; }

/* --- depth chart on the field ------------------------------------------------------
   Under every starter, the 2nd-string man at that spot (Madden's formation
   view). Tapping a spot opens that position's full order — the help button
   in the board's corner says so, so the screen itself does not. */
.lu-bk {
  margin-top: 5px; max-width: 100%; display: inline-flex; align-items: center; gap: 4px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--ink-2); color: #fff; box-shadow: 0 0 0 2px var(--ink);
  padding: 0 5px; font: 800 11px/15px var(--sans); text-transform: uppercase;
}
/* the backup: one solid dark chip, "2 · NAME", the 2 in gold */
.lu-bk i { flex: none; font-style: normal; font-weight: 900; color: var(--gold); }
.lu-field.main .lu-bk { font-size: 12px; line-height: 17px; }
.lu-tok.lu-dc { cursor: pointer; }
.lu-tok.lu-dc:hover .lu-face, .lu-tok.lu-dc:focus-visible .lu-face { box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px var(--ink); }
.lu-tok.lu-dc:hover .lu-nm, .lu-tok.lu-dc:focus-visible .lu-nm { background: var(--gold); color: var(--ink); }
.lu-tok.lu-dc:focus-visible { outline: none; }
.lu-tok.lu-dc.on .lu-face { box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px var(--ink); }
.lu-tok.lu-dc.on .lu-slot { background: var(--gold); color: var(--ink); }
.lu-tok.lu-dc.on .lu-nm { background: var(--gold); color: var(--ink); }

/* the editor: a window over the field — a title bar in the club colour,
   the order as tiles (the men who start in the club colour), chunky buttons */
.dc-back { position: fixed; inset: 0; z-index: 50; background: rgba(7, 13, 28, 0.84); }
.dc-box {
  position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--win); color: #fff; border: 2px solid #fff; box-shadow: var(--frame), var(--drop);
}
.dc-head { flex: none; }
.dc-sub { margin: 6px 3px; }
.dc-list { overflow-y: auto; padding: 8px 10px; display: grid; gap: 5px; align-content: start; }
.dc-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 2px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame-2); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.dc-row:hover { background: var(--card-hov); color: var(--card-ink); }
.dc-row.st, .dc-row.st:hover { background: var(--tm); color: var(--on-tm); }
.dc-row.st .dc-nm, .dc-row.st .dc-nm small { color: var(--on-tm); }
.dc-row.inj, .dc-row.inj:hover { background: var(--ink); color: #fff; --soft: #fff; }
.dc-row.inj .dc-nm, .dc-row.inj .dc-nm small { color: #fff; }
.dc-n { width: 24px; flex: none; text-align: center; font: 400 24px/1 var(--disp); color: var(--card-ink); }
.dc-row.inj .dc-n { color: var(--gold); }
.dc-row.st .dc-n { color: var(--tm-acc); text-shadow: 2px 2px 0 var(--tm-sh); }
.dc-face { flex: none; width: 36px; height: 36px; margin: 2px; background: var(--tm); box-shadow: var(--frame-2); overflow: hidden; display: grid; place-items: end center; }
.dc-row.st .dc-face { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.dc-face .pxface { width: 32px; height: 32px; display: block; }
.dc-nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: inherit; text-decoration: none; font: 400 20px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase;
}
.dc-nm:hover { color: inherit; text-decoration: underline; }
.dc-row.st .dc-nm:hover { text-decoration: underline; }
.dc-nm small { display: block; margin-top: 2px; font: 800 11px var(--sans); letter-spacing: 0; text-transform: none; color: var(--soft); }
.dc-role, .dc-inj {
  flex: none; margin: 2px; box-shadow: var(--frame-2); padding: 3px 6px 2px;
  font: 900 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.dc-role.st { background: var(--ink); color: #fff; }
.dc-role.b2 { background: var(--gold); color: var(--ink); }
.dc-role.el { background: var(--sky); color: var(--ink); }
.dc-inj { background: var(--red); color: #fff; }
.dc-inj.lim { background: var(--orange); color: var(--ink); }
.dc-row .ovr { flex: none; min-width: 32px; margin: 2px; text-align: center; font: 400 18px/1.2 var(--disp); }
.dc-ctl { flex: none; display: flex; gap: 5px; }
.dc-b {
  min-width: 30px; height: 30px; margin: 2px 2px 5px; cursor: pointer; padding: 0 7px; border: 0;
  background: #fff; color: var(--ink); box-shadow: var(--frame-2), 0 4px 0 0 var(--ink), inset 0 -3px 0 0 var(--steel);
  font: 400 17px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase;
}
.dc-b.go { background: var(--gold); box-shadow: var(--frame-2), 0 4px 0 0 var(--ink), inset 0 -3px 0 0 var(--gold-dk); }
.dc-b:hover:not(:disabled) { background: var(--gold-hi); color: var(--ink); }
.dc-b:active:not(:disabled) { transform: translateY(2px); box-shadow: var(--frame-2), 0 2px 0 0 var(--ink); }
.dc-b:disabled { cursor: default; background: #6b7280; color: #fff; box-shadow: var(--frame-2), 0 4px 0 0 var(--ink), inset 0 -3px 0 0 #4b5563; }
.dc-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px 8px; border-top: 3px solid var(--ink); background: var(--win); }
@media (max-width: 560px) {
  .dc-row { gap: 5px; padding: 5px; flex-wrap: wrap; }
  .dc-nm { flex-basis: calc(100% - 110px); font-size: 18px; }
  .dc-role, .dc-inj { order: 5; }
  .dc-ctl { order: 6; margin-left: auto; }
  .dc-face { display: none; }
}

/* the three sides of the ball: the room's tabs (.rm-tabi); the packages
   under them are the room's chips (.rm-chip) */
.lu-sides { margin-bottom: 10px; }

/* --- his own position, and the bill for playing somewhere else ---------------
   src/systems/positions.js. On the field a man carries his designated spot;
   when it is not the one he is standing in, the chip turns and carries the
   drop in his rating. On the depth chart the fill-ins sit under a line so
   the choice is made with eyes open. */
.lu-pos {
  margin-top: 3px; background: var(--ink); color: #fff;
  border: 2px solid var(--ink); border-radius: 0; padding: 0 5px;
  font: 900 10px/14px var(--sans); letter-spacing: 0.5px; text-transform: uppercase;
  white-space: nowrap;
}
.lu-pos.out { background: var(--orange); color: var(--ink); }
.lu-pos i, .lu-pos b { font-style: normal; font-weight: 900; }
.lu-pos b { margin-left: 3px; }
.lu-field.main .lu-pos { font-size: 10px; line-height: 14px; }
/* A phone gives each man about 34px. The drop is the part he needs to see
   there, so the position letters step aside and stay in the tooltip. */
@container lufield (max-width: 520px) {
  .lu-field.main .lu-pos { padding: 0 3px; letter-spacing: 0; }
  .lu-field.main .lu-pos.out i { display: none; }
  .lu-field.main .lu-pos.out b { margin-left: 0; }
}

.dc-cost {
  flex: none; margin: 2px; background: var(--orange); color: var(--ink); box-shadow: var(--frame-2);
  padding: 3px 6px 2px; font: 900 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.dc-row.out .dc-n { color: var(--orange); }
@media (max-width: 560px) {
  .dc-cost { order: 5; }
}

/* the depth chart window: name on top, his tags under it, so a row never
   runs off the side — no sideways scrolling (owner, 2026-09-26) */
.dc-box { width: min(720px, calc(100vw - 24px)); }
.dc-list { overflow-x: hidden; }
.dc-row { min-width: 0; }
.dc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dc-who .dc-nm { flex: none; }
.dc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dc-tags .dc-role, .dc-tags .dc-inj, .dc-tags .dc-cost { margin: 0; }
@media (max-width: 560px) {
  .dc-row { flex-wrap: nowrap; }
  .dc-who { flex-basis: auto; }
  .dc-b { padding-left: 6px; padding-right: 6px; }
}
.dc-who > * { align-self: flex-start; max-width: 100%; }