/* LIVE multiplayer UI (MULTIPLAYER §5.3–§5.6, §8, §10.2). Owner: UI (workstream B). Party Night tokens only.
   Prefix .lv- (plus .home-live-slot, .inv-live, .net-toast / .net-dot, and the panel's .left rows).
   home: Live now card (one tap Join) · "Maya and Jay are here" line · lobby: joining state, late joiner's banner,
   live money on seats, the one access line while alone · invite sheet: the access line · Reconnecting… toast. */

/* ================================================================= shared bits */
.lv-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 4px var(--go-soft); flex: none; }
.lv-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--go); opacity: 0; animation: lvPing 1.8s var(--out) infinite; }
@keyframes lvPing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.lv-spin { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--grape-ink); animation: lvSpin .8s linear infinite; flex: none; }
@keyframes lvSpin { to { transform: rotate(360deg); } }

/* ================================================================= home: Live now */
.home-live-slot { display: none; }
.home-live-slot:not([hidden]) { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 981px) {
  /* first in the right column: the hero spans both rows on the left */
  .home.has-live { align-items: start; }
  .home.has-live .home-hero { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .home.has-live .home-live-slot { grid-column: 2; grid-row: 1; }
  .home.has-live .home-cards { grid-column: 2; grid-row: 2; }
}
@media (max-width: 980px) {
  .home-live-slot { max-width: 560px; width: 100%; margin: 0 auto; }
}

.lv-card { padding: 20px 22px 18px; border-color: rgba(43, 216, 129, .32); background: linear-gradient(180deg, rgba(43, 216, 129, .09), rgba(43, 216, 129, 0) 60%), var(--night-1); }
.lv-card[hidden] { display: none; }
.lv-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.lv-head .h2 { margin: 0; }
.lv-list { list-style: none; margin: 0; padding: 0; display: grid; }
.lv-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 0 0; }
.lv-row + .lv-row { margin-top: 12px; border-top: 1px solid var(--line); }
.lv-av { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--night-2); }
.lv-av .chip { width: 44px; height: 44px; }
.lv-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.lv-line { font: 700 15.5px/1.25 var(--f-ui); color: var(--ink-2); overflow-wrap: anywhere; }
.lv-name { color: var(--ink); font-weight: 800; }
.lv-t small { font: 700 13px/1.3 var(--f-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lv-row.is-on .lv-t small { color: var(--gold); }
.lv-join { flex: none; height: 44px; min-width: 84px; padding: 0 18px; font-size: 16px; border-radius: 14px; }
.lv-join:disabled { min-width: 72px; }

/* nobody hosts yet, but people are here: one quiet line */
.lv-here { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 20px; border: 1.5px dashed var(--line-2); font: 600 14px/1.4 var(--f-ui); color: var(--ink-3); }
.lv-here[hidden] { display: none; }
.lv-here b { color: var(--ink-2); font-weight: 800; }
.lv-faces { flex: none; }
.lv-faces > i { display: block; }

@media (max-width: 700px) {
  .lv-card { padding: 16px 16px 14px; }
  .lv-row { gap: 10px; }
  .lv-av { width: 44px; height: 44px; border-radius: 14px; }
  .lv-av .chip { width: 40px; height: 40px; }
  .lv-line { font-size: 15px; }
  .lv-join { min-width: 76px; padding: 0 14px; }
  .lv-here { padding: 10px 12px; font-size: 13.5px; }
}

/* ================================================================= lobby */
/* joining: the seats wait quietly until the room answers */
.lobby.is-joining .seats { opacity: .55; pointer-events: none; transition: opacity .3s; }
.lv-joining-pill { color: var(--ink-2); }

/* a late joiner: one banner, the players' live money on their seats */
.lv-spec { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--gold-soft); border: 1px solid rgba(255, 200, 61, .32); font: 700 14.5px/1.35 var(--f-ui); color: var(--ink-2); }
.lv-spec[hidden] { display: none; }
.lv-spec b { color: var(--gold); font-weight: 800; }
.lv-spec .num { font-variant-numeric: tabular-nums; color: var(--ink); }
.lv-spec-ic { flex: none; display: grid; place-items: center; width: 20px; }
.seat-status.lv-playing { color: var(--gold); }
.seat-status.lv-playing b { font-weight: 800; color: var(--ink); }
.seat-status.lv-next { color: var(--grape-ink); }

/* you're the only one seated: how friends get in (never blocks) */
.lv-alone { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--grape-soft); color: var(--grape-ink); font: 700 13.5px/1.4 var(--f-ui); }
.lv-alone[hidden] { display: none; }
.lv-alone .ic { flex: none; }

@media (max-width: 980px) {
  .lv-spec, .lv-alone { order: 2; }       /* the lobby's main column is display: contents here: sit with the seats */
}
@media (max-width: 700px) {
  .lv-spec { padding: 10px 12px; font-size: 13.5px; gap: 10px; }
  .lv-alone { padding: 9px 12px; font-size: 13px; }
  .seat-status.lv-playing, .seat-status.lv-next { font-size: 13px; }
  .seat-status.lv-playing { white-space: nowrap; }
  .lv-pl-w { display: none; }             /* the gold ▶ and the money say "playing" in a compact tile */
}

/* ================================================================= invite sheet (LIVE) */
.inv-live { margin: 12px 2px 0; font: 600 13.5px/1.45 var(--f-ui); color: var(--ink-3); text-align: center; }

/* ================================================================= game mode: a friend whose tab closed mid-round */
.row.left, .fr.left { opacity: .55; }
.gm-left { color: var(--ink-3); }

/* ================================================================= connection: Reconnecting… (never blocks a tap) */
.toast.net-toast { pointer-events: none; padding-block: 9px; font-size: 14px; }
.net-dot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; }
.net-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); animation: netBlink 1.1s ease-in-out infinite; }
@keyframes netBlink { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .lv-dot::after, .lv-spin, .net-dot i { animation: none; }
}