/* duel.css — the duel's banner over the brief (duel.js), and the name a
   challenge asks for in the result card's row of buttons (play.js).

   The banner is one box of fixed height in every state and every mode: a
   heading line and a row of chips that scrolls sideways rather than wraps.
   So a score landing from the re-dicing, the cook's own, a seventh cook in
   the duel or a trip to Play and back never moves the stage under it; only
   opening or forgetting a duel adds or takes away the box. */

.gm-duel {
  box-sizing: border-box; height: 88px; margin: 10px 0 0; padding: 8px 8px 8px 12px;
  display: grid; grid-template-rows: 32px 32px; row-gap: 6px; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(240, 196, 25, .38);
  background: linear-gradient(180deg, rgba(240, 196, 25, .10), rgba(240, 196, 25, .035));
}
.gm-duel[hidden] { display: none; }
.gm-duel-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* one line at any width: a long name ends in an ellipsis, never a second line */
.gm-duel-h {
  flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .88rem; font-weight: 650; color: #e8edf2;
}
.gm-duel-h b { color: var(--gold); }
/* Leave and Back to the duel are one button, its right edge fixed beside
   the ✕: Back is the wider, so wherever a thumb was on Leave it is on Back
   after the switch, and a second tap only goes back again */
.gm-duel-go, .gm-duel-x {
  flex: 0 0 auto; height: 32px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: #c3cdd8; background: var(--g-in-fill); border: 1px solid var(--g-line);
}
.gm-duel-go { padding: 0 12px; }
.gm-duel-go.back { color: #241c02; background: linear-gradient(180deg, #ffd955, var(--gold)); border-color: rgba(255, 230, 140, .7); }
.gm-duel-x { width: 32px; padding: 0; color: var(--muted); }

/* the standings: best first once re-diced, a Watch in each but the cook's */
.gm-duel-rows {
  display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.gm-duel-rows::-webkit-scrollbar { display: none; }
/* more chips past the edge: the row fades there, so it reads as one to scroll */
.gm-duel-rows.more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.gm-duel-chip {
  flex: 0 0 auto; height: 32px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; font: inherit; font-size: .8rem; font-weight: 650; color: #c3cdd8;
  background: var(--g-in-fill); border: 1px solid var(--g-line);
}
button.gm-duel-chip { cursor: pointer; }
button.gm-duel-chip:active { transform: translateY(1px); }
.gm-duel-chip i { font-style: normal; font: 650 .74rem var(--mono); color: var(--muted); }
.gm-duel-chip b { font: 700 .86rem var(--mono); color: var(--gold); }
.gm-duel-chip small { font-size: .72rem; color: var(--muted); }
.gm-duel-who { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.gm-duel-play { font-size: .62rem; color: var(--muted); }
.gm-duel-chip.you { color: var(--ink); border-color: rgba(240, 196, 25, .55); }
/* a cut that does not re-dice to what it was posted with: said in words in
   the chip, and warm, so it is seen without being read */
.gm-duel-chip.off { border-color: rgba(255, 140, 100, .6); }
.gm-duel-chip.off small { color: #ffab8f; }
/* a cut not made inside the duel's clock: still a chip to watch, its score
   greyed, since it counts for nothing */
.gm-duel-chip.late { border-style: dashed; }
.gm-duel-chip.late b { color: var(--muted); }
.gm-duel-chip .gm-duel-late { color: #ffab8f; white-space: nowrap; }

/* the name a challenge goes out under, asked for in the result card's own
   row, at that row's height */
.gm-ask { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; margin: 0; }
.gm-ask input {
  flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: .84rem;
  color: var(--ink); background: var(--g-well); border: 1px solid var(--g-line);
}
.gm-ask .gm-ask-go { flex: 0 0 auto; color: #241c02; background: linear-gradient(180deg, #ffd955, var(--gold)); border-color: rgba(255, 230, 140, .7); }

@media (max-width: 560px) {
  .gm-duel { padding-left: 10px; }
  .gm-duel-h { font-size: .84rem; }
  .gm-duel-go { padding: 0 10px; }
}