/* --------------------------------------------------------------------------
   THE ROOM — a drawer, not a column
   --------------------------------------------------------------------------
   Below 62rem this is an ordinary block under the board and the handle is not
   rendered at all: on a phone the board is already small, and a panel sliding
   over it mid-round would cover the only thing being played.

   Above 62rem it becomes an overlay pinned to the right. OVERLAY, not a
   column: `--wc-tile` is computed from the viewport, so a panel that occupied
   horizontal space would shrink every tile the moment it opened. The board
   must not move by one pixel when this is pulled. */
.wf-live { width: 100%; }
.wf-live-tab { display: none; }

/* 68rem, not 62: the drawer opens OUTWARD into the margin beside the stage,
   so it only appears once that margin is genuinely wide enough to hold it —
   the 520px stage, plus the handle, plus the panel, plus air. Narrower than
   that and the stacked block below the board is the better answer anyway. */
@media (min-width: 68rem) {
  .wf-live {
    position: absolute;
    top: 0;
    left: 100%;                 /* just past the board, never over it */
    width: auto;
    display: flex;
    align-items: flex-start;
    gap: 0;
    z-index: 6;
    pointer-events: none;       /* the arena beneath stays clickable */
  }
  .wf-live > * { pointer-events: auto; }

  /* The handle. A tall thin strip with its label on its side, so it reads as
     an edge to pull rather than a button someone forgot to finish. */
  .wf-live-tab {
    display: flex;
    flex-direction: column;      /* label, then the caret, both in flow */
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 26px;
    min-height: 116px;
    padding: 12px 0;
    border: 1px solid var(--rule);
    border-radius: 9px;
    background: var(--chip);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .wf-live-tab:hover { color: var(--accent-text); border-color: var(--accent); }
  .wf-live-tab:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .wf-live-tab-text {
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
  }
  /* A caret that turns, so the handle says which way it goes: pointing left
     when closed (pull), right when open (push back). In flow under the label
     — absolutely positioned it resolved against .wf-live, which is itself
     absolute, and landed on top of the text. */
  .wf-live-tab::after {
    content: "";
    flex: none;
    width: 5px; height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(135deg);
    transition: transform 0.2s ease;
  }
  .wf-live[data-open="1"] .wf-live-tab::after { transform: rotate(-45deg); }

  /* square where it meets the handle, once there is a handle to meet */
  .wf-live[data-open="1"] .wf-live-tab { border-radius: 9px 0 0 9px; border-right-color: transparent; }

  .wf-live-panel {
    width: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 0 10px 10px 0;
    background: var(--chip);
    transition: width 0.22s ease, padding 0.22s ease, border-color 0.22s ease;
  }
  .wf-live[data-open="1"] .wf-live-panel {
    /* As wide as the margin allows, up to a cap. The margin beside a 520px
       stage, less the handle and some air, so the drawer can never run off the
       right of the window. */
    width: min(24rem, calc((100vw - 520px) / 2 - 58px));
    padding: 12px 14px;
    border-color: var(--rule);
    box-shadow: var(--shadow-1);
  }
  /* A GRID, not a column. Sixteen players is the documented cap and a single
     column needs about 1400px to show them — eleven of the sixteen fell below
     the fold, which is a worse answer than the block it replaced. auto-fill
     lets the same rule serve three players and sixteen: it takes as many
     columns as the panel is wide enough for, so a big room packs and a small
     one does not stretch. */
  .wf-live[data-open="1"] #opps-list {
    display: grid;
    /* 80px, measured rather than chosen: it is the widest column that still
       fits FOUR across the 384px panel, and four columns is what puts all
       sixteen players — the documented cap — on screen at once on a normal
       laptop. At 92px it took three columns and six rows, and the sixteenth
       player fell below the fold at 1440x900. */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px 10px;
    align-content: start;
    overflow-x: visible;
    overflow-y: auto;
    max-height: min(70vh, 34rem);
  }
  /* Smaller cells INSIDE the drawer only — the stacked layout under the board
     keeps the 9px ones. Six rows of 9px is 64px of height per player, and
     with sixteen players that height is what pushes the last row out of view. */
  .wf-live[data-open="1"] .mini .mrow { grid-template-columns: repeat(5, 8px); }
  .wf-live[data-open="1"] .mini i { width: 8px; height: 8px; }

  /* a long nickname must truncate rather than widen its column */
  /* AND WIDER ONES WHEN THE BOARDS CARRY WORDS. The 80px above is measured
     against a 9px tile; a spectator's lettered board is five 18px tiles and
     four gaps — 98px — which overflowed its track and printed straight over
     the player in the next column. Three columns rather than four, which is
     the right trade for the one reader who is watching rather than playing. */
  .wf-live[data-open="1"] #opps-list.has-letters {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }

  .wf-live[data-open="1"] .opp { min-width: 0; }
  .wf-live[data-open="1"] .opp .who b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wf-live .wf-opps h3, .wf-live > .wf-live-panel > h3 { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-live-panel, .wf-live-tab::after { transition: none; }
}
.opp { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
.opp .who b { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.opp .who small { font-size: 9px; letter-spacing: 0.14em; color: var(--muted); }
.mini { display: grid; gap: 2px; }
.mini .mrow { display: grid; grid-template-columns: repeat(5, 9px); gap: 2px; }
.mini i { width: 9px; height: 9px; border-radius: 2px; background: transparent; border: 1px solid var(--tile-bd); }
.mini i.c { background: var(--correct); border-color: var(--correct); }
.mini i.p { background: var(--present); border-color: var(--present); }
.mini i.a { background: var(--absent);  border-color: var(--absent); }

/* A SPECTATOR'S COPY, which carries the words. Only ever drawn for somebody
   who is out or watching — see room-state.js for why they get the letters and
   why there is nothing in it to exploit. The tiles have to grow to hold a
   character at all: at 9px they are dots, and a letter in one would be a smear.
   Specific enough to beat the compact override in the media query above, which
   shrinks these to 8px when the drawer is open beside the board. */
.mini.lettered .mrow,
.wf-live[data-open="1"] .mini.lettered .mrow { grid-template-columns: repeat(5, 18px); }
.mini.lettered i,
.wf-live[data-open="1"] .mini.lettered i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  font-style: normal;          /* <i>, so the UA would italicise it */
  color: var(--muted);
}
.mini.lettered i.c { color: var(--on-correct); }
.mini.lettered i.p { color: var(--on-present); }
.mini.lettered i.a { color: var(--on-absent); }