/* The battle roster (src/panels/roster_sheet.rs, docs/pvp/roster.md): a frame held up over a battlefield,
   your team on the left in jade, theirs on the right in vermilion. It takes no clicks (the
   fight goes on under it); the mouse points at it (src/panels/roster_panel.rs): the page's cursor
   while the mouse is captured (#cursor, page.css), and by the cursor the tip (a pop) of what it is
   over: a skill's is its card (.skill-card, ui.css). */
#roster {
  position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
  &[hidden] { display: none; }
  .roster-sheet { display: contents; }
  .tip { display: none; }
  .roster-tip[hidden] { display: none; }
  .roster-tip {
    position: fixed; left: 0; top: 0; z-index: 1; display: flex; flex-direction: column; gap: 3px;
    max-width: 340px; font-variant-numeric: tabular-nums;
    > small { margin-bottom: 3px; }
  }
  .roster-board { width: min(1260px, 96vw); padding: 20px 28px 22px; font-variant-numeric: tabular-nums; }
  .roster-score {
    display: flex; justify-content: center; align-items: center; gap: 18px; margin: 0 0 12px;
    font: 700 30px/1 var(--face);
    .ours { color: var(--jade); }
    .theirs { color: var(--vermilion); }
  }
  .crossed {
    width: 22px; height: 22px; fill: none; stroke: var(--paper-muted); stroke-width: 2; stroke-linecap: round;
    .guard { stroke-width: 1.6; }
  }
  .roster-halves {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px;
    &::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
      background: linear-gradient(transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); }
  }
  .roster-team { display: flex; flex-direction: column; }
  .roster-row {
    position: relative; display: grid; grid-template-columns: 52px max-content minmax(84px, 1fr) 76px; align-items: center;
    column-gap: 16px; height: 72px; padding: 0 12px; border-radius: 2px;
    &:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); }
    &.you { background: var(--paper-wash); }
    &.gone { opacity: 0.4; }
  }
  .roster-face { position: relative; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden;
    border-radius: 50%; border: 2px solid var(--jade); background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 12px -3px var(--jade-glow); }
  .theirs .roster-face { border-color: var(--vermilion); box-shadow: 0 0 0 2px var(--ink), 0 0 12px -3px var(--vermilion-glow); }
  .roster-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; transform: scale(1.4); }
  .theirs .roster-face img { transform: scale(-1.4, 1.4); }
  .down .roster-face img { filter: grayscale(1) brightness(0.45); }
  .roster-face b { position: relative; font: 700 24px/1 var(--face); color: var(--paper-bright); text-shadow: 0 1px 3px var(--shadow); }
  .roster-who { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  .roster-name { width: 0; min-width: 100%; font: 600 18px/1.15 var(--face); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .you .roster-name { color: var(--paper-bright); }
  .roster-kit {
    display: flex; gap: 10px;
    > span { display: flex; gap: 3px; }
  }
  /* The weapon in steel, Setup in jade, Surge techniques in gold, so the groups read apart at a glance. */
  .tile { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none;
    background: linear-gradient(var(--plate-lit), var(--ink)); border: 1px solid var(--jade-deep); border-radius: 3px; }
  .surge .tile { border-color: var(--gold-deep); }
  .weapon .tile { border-color: var(--paper-muted); }
  .tile {
    img { width: 84%; height: 84%; }
    &.empty { background: transparent; border: 1px dashed var(--line); }
    /* A rival's technique not seen yet: sealed, in the hidden ink. */
    &.sealed { background: transparent; border: 1px dashed var(--violet-deep); }
    .seal-mark { width: 52%; height: 52%; fill: color-mix(in srgb, var(--violet) 30%, transparent); stroke: var(--violet); stroke-width: 2; }
  }
  .roster-kda {
    font: 700 21px/1 var(--face); text-align: center; white-space: nowrap;
    s { text-decoration: none; color: var(--faint); margin: 0 4px; }
  }
  .roster-chakra {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px; font: 700 24px/1 var(--face);
    color: var(--paper-bright);
    i { width: 8px; height: 8px; rotate: 45deg; background: var(--azure); box-shadow: 0 0 8px var(--azure-glow); }
  }
  .down .roster-name, .down .roster-kda, .down .roster-chakra { opacity: 0.55; }
}