/* ⚔ The versus rail (js/versus.js, 2026-09-03): the challenge inbox, the
   picker, the card that can arrive over any screen, and the live waiting
   room. The house UI sans and the menu's own palette — this is chrome, not
   a place in the world, so nothing here borrows the quest book's parchment. */

/* ------------------------------------------------------------- the inbox */
.vs-list { display: flex; flex-direction: column; gap: 18px; width: 100%; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.vs-sec { display: flex; flex-direction: column; gap: 8px; }
.vs-sech {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: #c9a227; opacity: .9; text-align: left;
}
.vs-empty { color: #9aa0aa; font-size: 14px; line-height: 1.5; text-align: left; }
.vs-foot { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }

.vs-match {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px; padding: 10px 12px;
}
/* the one that wants an answer is the one that is lifted */
.vs-match.in { border-color: rgba(201, 162, 39, .55); background: rgba(201, 162, 39, .1); }
.vs-match.turn { border-color: rgba(90, 170, 255, .45); background: rgba(90, 170, 255, .08); }
.vsm-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.vsm-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vsm-body b { font-size: 15px; }
.vsm-game { font-size: 12px; color: #9aa0aa; }
.vsm-body small { font-size: 12px; color: #8a909a; }
.vsm-note { font-style: italic; color: #b3a06a; }
.vsm-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.vsm-wait, .vsm-when { font-size: 11px; color: #7f858f; white-space: nowrap; }
.vsm-verdict { font-size: 11px; letter-spacing: .1em; font-weight: 700; padding: 3px 8px; border-radius: 100px; }
.vsm-verdict.won { background: rgba(80, 190, 120, .18); color: #6fd08c; }
.vsm-verdict.lost { background: rgba(220, 90, 80, .16); color: #e08074; }
.vsm-verdict.drew { background: rgba(255, 255, 255, .1); color: #b6bcc6; }
.vs-match.done { opacity: .85; }

/* ------------------------------------------------------------ the picker */
/* A challenge can start from ANY screen — the piece page, a mini-game's bar,
   the profile page (z-index 42), the ledger's People tab — and every .overlay
   is z-index 10 in DOM order, so the picker (early in the page) used to open
   UNDERNEATH whatever asked for it. Above those, below the card (60) and the
   match call (70); the piece picker one higher still, since the piece sheet
   opens it. */
#versus-screen, #versus-pick, #versus-piece, #versus-wait { z-index: 44; }
#piece-picker { z-index: 45; }
/* The arcade (#arcade-screen, z-index 110) opens the picker and a table's
   lobby from its own setup sheet, and a card can arrive while one of its
   games is up — all three went on UNDER it, where nothing could be pressed
   (found 2026-09-29 with the Scrabble tables). Over it while it is open. */
body:has(#arcade-screen:not(.hidden)) #versus-pick,
body:has(#arcade-screen:not(.hidden)) #versus-wait { z-index: 115; }
body:has(#arcade-screen:not(.hidden)) .versus-card { z-index: 116; }
.vsp-kind { margin: 6px auto 2px; }
.vsp-kindnote { margin: 0 0 6px; font-size: 12.5px; min-height: 2.4em; }
.vsp-list {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
  max-height: 34vh; overflow-y: auto; margin: 6px 0;
}
.vsp-h { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a909a; text-align: left; margin-top: 4px; }
.vsp-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px; padding: 8px 10px; color: inherit; cursor: pointer;
  font: inherit; touch-action: manipulation;
}
.vsp-row:hover, .vsp-row:focus-visible { background: rgba(201, 162, 39, .14); border-color: rgba(201, 162, 39, .4); }
/* offline is not a refusal — an async challenge is exactly for them */
.vsp-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px; font-style: normal;
  background: rgba(255, 255, 255, .07); color: #b6bcc6;
}
.vsp-dot.on { background: rgba(80, 190, 120, .2); color: #6fd08c; }
.vsp-n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vsp-n b { font-size: 14px; }
.vsp-n small { font-size: 11.5px; color: #8a909a; }
.vsp-go { font-size: 15px; color: #c9a227; flex: 0 0 auto; }
.vsp-empty { color: #9aa0aa; font-size: 13.5px; text-align: left; margin: 8px 0; }
.vsp-typed { display: flex; gap: 8px; width: 100%; align-items: center; }
.vsp-typed .pvp-input { flex: 1 1 auto; }
/* choosing a GAME for a known person: the person is already settled, so the
   search box and the type-a-name row have nothing left to do */
#versus-pick.games #versus-pick-search,
#versus-pick.games .vsp-typed { display: none; }

/* a TABLE's guest list (2026-09-29): the rows are a choice of several, the
   chosen ride as chips over the one button that sends them all */
.vsp-row.on { background: rgba(201, 162, 39, .16); border-color: rgba(201, 162, 39, .55); }
.vsp-row.on .vsp-go { color: #6fd08c; }
.vsp-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 0; }
#versus-pick:not(.multi) .vsp-chosen { display: none; }
#versus-pick.multi .vsp-chosen { margin: 4px 0 2px; }
.vsp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px;
  background: rgba(201, 162, 39, .16); border: 1px solid rgba(201, 162, 39, .45);
  color: inherit; font: inherit; font-size: 13px; cursor: pointer; touch-action: manipulation;
}
.vsp-chip span { opacity: .7; }
.vsp-chip:hover, .vsp-chip:focus-visible { background: rgba(201, 162, 39, .28); }
.vsp-count { font-size: 12px; color: #8a909a; }
#versus-pick-go { display: block; margin: 8px auto 2px; }
/* a table is always live, and the picker's own line says so */
#versus-pick.multi .vsp-kindnote { display: none; }
#versus-pick-go:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------ the piece sheet (2026-09-12) */
/* the chosen piece reads as a row of the picker's own kind, and the speed as
   the game's segmented chips; a shut arrangement is shown and cannot be hit */
.vsp-piece { margin: 6px 0 2px; }
.vsp-piece .vsp-n b { font-size: 15px; }
.vsp-speed { margin: 6px auto 2px; }
.vsp-speed button:disabled { opacity: .4; cursor: not-allowed; }
#vs-result #versus-again { margin-top: 8px; }

/* ------------------------------------------------- the card, over anything */
.versus-card {
  position: fixed; right: 18px; top: 18px; z-index: 60; max-width: 340px;
  background: #1b1e25; border: 1px solid rgba(201, 162, 39, .5);
  border-radius: 10px; box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
  animation: vsc-in .28s ease both;
}
@media (prefers-reduced-motion: reduce) { .versus-card { animation: none; } }
@keyframes vsc-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.vsc-in { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.versus-card b { font-size: 15px; }
.vsc-sub { font-size: 12.5px; color: #9aa0aa; display: flex; flex-direction: column; gap: 3px; }
.vsc-note { font-style: italic; color: #b3a06a; }
.vsc-terms { font-size: 11.5px; color: #7f858f; }
.vsc-acts { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.vsc-acts .mode-btn { flex: 0 0 auto; padding: 7px 14px; font-size: 13px; }
@media (max-width: 560px) {
  .versus-card { right: 10px; left: 10px; max-width: none; }
}

/* ------------------------------------------------------- the live wait */
.vsw-dots { display: flex; gap: 7px; justify-content: center; margin: 14px 0 4px; }
.vsw-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c9a227; opacity: .35; animation: vsw 1.2s ease-in-out infinite; }
.vsw-dots i:nth-child(2) { animation-delay: .18s; }
.vsw-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes vsw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vsw-dots i { animation: none; opacity: .7; } }

/* a table's lobby: one row per seat, lit when that person is in the room */
.vsw-seats { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 360px; margin: 8px auto 0; }
.vsw-seats:empty { display: none; }
.vsw-seat {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px; padding: 7px 10px;
}
.vsw-seat b { font-size: 14px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsw-seat em { font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #c9a227; }
.vsw-seat small { margin-left: auto; font-size: 12px; color: #8a909a; white-space: nowrap; }
.vsw-seat.here { border-color: rgba(80, 190, 120, .4); }
.vsw-seat.here small { color: #6fd08c; }
.vsw-seat.declined, .vsw-seat.left, .vsw-seat.missed { opacity: .55; }
#versus-wait-start { margin: 10px auto 2px; }
#versus-wait-start:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------- what a duel adds to a game's bar */
/* the exercises belong to the row in a duel, so the setup reads as fixed
   rather than merely refusing to move */
.sc-versus .gb-setup select:disabled,
.sc-versus .gb-setup input:disabled { opacity: .45; cursor: not-allowed; }
.sc-vsnote {
  font-size: 12px; color: #c9a227; padding: 2px 8px; border-radius: 100px;
  background: rgba(201, 162, 39, .12); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}