/* ═══════════════ Trivia Rumble — the player chip ═══════════════ */
/* From PlayerChip.dc.html. Sizes and modifiers only. A screen positions a chip
   inside its own row; it never restyles what a chip is made of. */

.chip {
  display: inline-flex; align-items: center; min-width: 0;
  font-weight: 800; color: var(--ink);
}
.chip-tile {
  flex: none; background: var(--bg-sink);
  display: grid; place-items: center;
}
/* Cut hard at the edge, no ellipsis. An ellipsis costs a character and buys
   nothing: at this size nobody recovers the name from three dots.

   The 3ch floor is the board's, and it is what stops the suffixes from taking
   everything: they are flex: none, so without a floor a narrow enough box
   leaves the name at zero width, which is not a name. Three characters is
   enough to tell two people in a room apart. */
.chip-name { min-width: 3ch; overflow: hidden; white-space: nowrap; }
/* A floor can overflow its box, so the chip clips rather than pushing the row
   wide. The floor decides what a name is worth; this decides who pays. */
.chip { overflow: hidden; }
.chip-glyph, .chip-word { flex: none; }
.chip-word { font-weight: 600; color: var(--ink-dim); }
.chip-check { flex: none; color: var(--ink-dim); }

/* ─── S: a pill, in a roster or a strip ─── */
.chip--s {
  gap: 7px; background: var(--bg-raise); border-radius: 999px;
  padding: 6px 13px 6px 6px; font-size: 0.875rem;
  box-shadow: inset 0 0 0 2px var(--line);
}
.chip--s .chip-tile { width: 24px; height: 24px; border-radius: 8px; font-size: 0.875rem; }
.chip--s .chip-glyph { font-size: 0.75rem; }
.chip--s .chip-word { font-size: 0.7rem; }

/* ─── M: bare, in a row ─── */
.chip--m { gap: 10px; font-size: 0.94rem; }
.chip--m .chip-tile { width: 36px; height: 36px; border-radius: 11px; font-size: 1.25rem; }
.chip--m .chip-glyph { font-size: 0.85rem; }
.chip--m .chip-word { font-size: 0.78rem; }

/* ─── L: stacked, standing alone ─── */
.chip--l { flex-direction: column; gap: 6px; font-size: 0.94rem; text-align: center; }
.chip--l .chip-tile { width: 64px; height: 64px; border-radius: 18px; font-size: 2.125rem; }
/* Standing alone there is room to wrap, and a name that stands alone should
   never lose its ending. */
.chip--l .chip-name { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.15; }
.chip--l .chip-glyph { font-size: 0.85rem; }

/* ─── modifiers ─── */
/* Host is a crown after the name and nothing else. The ring means you. */
.chip--s.is-you { background: oklch(0.33 0.05 85); box-shadow: inset 0 0 0 2px var(--gold); }
.chip--m.is-you .chip-tile, .chip--l.is-you .chip-tile { box-shadow: inset 0 0 0 2px var(--gold); }

/* Sides carry no colour of their own: left is cream, right is gold, by
   position. In teams mode this replaces the You ring, because your side is
   your identity and two rings would be arguing about the same thing. */
.chip--s.side-a { box-shadow: inset 0 0 0 2px var(--ink); }
.chip--s.side-b { box-shadow: inset 0 0 0 2px var(--gold); }
.chip--m.side-a .chip-tile, .chip--l.side-a .chip-tile { box-shadow: inset 0 0 0 2px var(--ink); }
.chip--m.side-b .chip-tile, .chip--l.side-b .chip-tile { box-shadow: inset 0 0 0 2px var(--gold); }

.chip.is-away { opacity: 0.5; animation: chip-pulse 2s var(--ease) infinite; }
@keyframes chip-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.3; } }

.chip.is-empty .chip-tile {
  background: transparent; border: 2px dashed var(--line); color: var(--ink-dim);
}

/* Out of room: the glyphs go before the name loses characters. A name is who
   somebody is; a crown is something the lobby also tells you.

   The away word and the account check stay, and the board argues both cases
   itself. Away is the only signal of a held seat once motion is reduced, which
   its own caption says, and the check is what separates a person from somebody
   who typed their name, which matters most on exactly the long names that
   trigger this. */
.chip.is-trimmed .chip-glyph,
.chip.is-trimmed .chip-word-you { display: none; }

.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 360px) {
  /* Only S moves. M and L are already sized to what they sit in. */
  .chip--s { gap: 6px; padding: 6px 11px 6px 6px; font-size: 0.8125rem; }
  .chip--s .chip-tile { width: 22px; height: 22px; border-radius: 7px; font-size: 0.8125rem; }
  .chip--s .chip-glyph { font-size: 0.6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* The word "away" was always carrying this. The pulse was decoration. */
  .chip.is-away { animation: none; }
}