/* Multiplayer: friends hub, create and join a room, the lobby, and the extras in an online game (connection
   line, away bar, quick messages, countdown). Same look as the rest: ink and paper, 2px lines, block edges. */

/* ---------- start page: new version hint ---------- */

.stale, .lob-stale {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin: 1.25rem 0 0;
  padding: 0.75rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.stale p, .lob-stale p { margin: 0; }

/* ---------- forms ---------- */

.lob-menu { margin-top: 1.25rem; }
.lob-label { font: 700 1.25rem/1.2 var(--font-head); }
.lob-h { margin: 0; font: 700 1.25rem/1.2 var(--font-head); }
.lob-rules-head { padding-bottom: 0; border-bottom: 0; }
.lob-rules-head .row-line { margin-bottom: 0; }
.lob-rules-head + .rules-form .row:first-child { border-top: 0; }

.lob-input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 500 1.125rem/1.3 var(--font);
}
.lob-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lob-input[aria-invalid="true"] { border-color: var(--accent); }
.lob-input[readonly] { color: var(--muted); font-size: 0.9375rem; }
.lob-code-input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  padding-left: 1.3em;
  font: 700 2rem/1.2 var(--font-head);
}

.lob-error {
  margin: 1rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 600;
}
.lob-form .primary { margin-top: 1.25rem; }
.lob-form[aria-busy="true"] .primary { opacity: 0.7; cursor: progress; }

/* the rules block closes with the line the old setup form had under its last row */
.setup-form .rules-form > .row:last-child {
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.lob-rules .rules-form > .row:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- lobby ---------- */

.lob-status {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 600;
}
.lob-note { min-height: 1.45em; margin: 0.5rem 0 0; font-weight: 600; }
.lob-note:empty { min-height: 0; margin: 0; }

.lob-code {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.75rem;
}
.lob-code-label { color: var(--muted); }
.lob-code-text {
  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: 700 2.5rem/1.15 var(--font-head);
  letter-spacing: 0.25em;
}
.lob-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.lob-link { margin-top: 0.5rem; }

.lob-seats { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.lob-seat {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  min-height: 3rem;
  padding: 0.375rem 0.75rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.lob-seat[data-presence="away"], .lob-seat[data-presence="offline"] { border-style: dashed; }
.lob-seat-name { flex: 1 1 6rem; min-width: 0; overflow-wrap: anywhere; font: 600 1.125rem/1.2 var(--font-head); }
.lob-seat[data-me="true"] .lob-seat-name { text-decoration: underline; text-underline-offset: 3px; }
.lob-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.lob-tag {
  padding: 0 0.4375rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font: 600 0.875rem/1.45 var(--font-head);
}
.lob-tag-host { background: var(--ink); color: var(--paper); }
.lob-tag-away { border-style: dashed; color: var(--muted); }
.lob-kick { min-height: 2.75rem; margin-bottom: 0; box-shadow: none; }
.lob-count { margin: 0.625rem 0 0; }

.lob-rename { margin-top: 0.5rem; }
.lob-rename .lob-label { display: block; margin-bottom: 0.25rem; font-size: 1.0625rem; }
.lob-rename-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.lob-rename-row .act { margin-bottom: 0; flex: none; }

.lob-sum { margin: 0; }
.lob-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4375rem 0.125rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.lob-sum dt { color: var(--muted); }
.lob-sum dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.lob-foot { margin-top: 1.25rem; }
.lob-wait {
  margin: 0;
  padding: 0.75rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
  font-weight: 600;
}
.lob-message .row-line { margin-top: 0; }

@media (min-width: 52rem) {
  .lob-wide { max-width: 58rem; }
  .lob-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .lob-cols > .lob-rules { border-bottom: 0; }
}
@media (max-width: 51.99rem) {
  .lob-cols > .lob-left > .row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); padding-bottom: 1rem; }
}

/* ---------- in an online game ---------- */

.g-banners { grid-area: notice; display: grid; align-content: start; }
.g-banners > .g-notice { grid-area: auto; }
.game[data-view="3d"] .g-banners { position: relative; z-index: 4; }

.g-net { display: grid; margin: 0 0.75rem; }
.g-net-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0.25rem 0 0;
  padding: 0.375rem 0.625rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.g-net-text { margin: 0; flex: 1 1 10rem; }
.g-net-line .act { min-height: 2.75rem; margin-bottom: 0; }
.g-net-conn { border: 2px dashed var(--accent); font-weight: 600; }
.g-net-conn[data-state="connecting"] { border-color: var(--line); }
.g-net-away, .g-net-stale { border-color: var(--accent); }
.g-toast {
  position: absolute;
  z-index: 7;
  top: calc(env(safe-area-inset-top) + 3.5rem);
  left: 0.75rem;
  max-width: calc(100% - 1.5rem);
  margin: 0;
  padding: 0.375rem 0.625rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: 600 1rem/1.3 var(--font-head);
  pointer-events: none;
}

.g-quick-btn { display: grid; place-items: center; min-width: 2.75rem; padding: 0 0.5rem; }
.g-quick {
  position: absolute;
  z-index: 7;
  top: calc(env(safe-area-inset-top) + 3.75rem);
  left: 0.75rem;
  right: 0.75rem;
  max-width: 28rem;
  max-height: calc(100dvh - env(safe-area-inset-top) - 5rem);
  overflow-y: auto;
  padding: 0.25rem 0.875rem 0.875rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 var(--edge-h) 0 var(--line);
}
.g-quick-title { margin: 0.5rem 0 0; font: 700 1.125rem/1.2 var(--font-head); }
.g-quick-note { min-height: 1.3em; margin: 0.125rem 0 0; font-size: 0.9375rem; color: var(--muted); }
.g-quick-h { margin: 0.5rem 0 0.375rem; font: 700 0.9375rem/1.2 var(--font-head); color: var(--muted); }
.g-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.g-quick-signs { grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr)); }
.g-quick-item {
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 600 1rem/1.2 var(--font-head);
  cursor: pointer;
  touch-action: manipulation;
}
.g-quick-sign { font-size: 1.375rem; }
.g-quick-item:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.g-quick-item:disabled { border-style: dashed; color: var(--muted); cursor: not-allowed; }

.g-timer {
  margin: 0;
  font: 600 0.9375rem/1.2 var(--font-head);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.g-timer[data-low="true"] { color: var(--ink); font-weight: 700; text-decoration: underline wavy var(--accent); text-underline-offset: 3px; }
.game[data-view="3d"] .g-timer { padding: 0 0.5rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }

/* a person who is away, disconnected or gone: dashed plate and a word */
.opp[data-presence="away"], .opp[data-presence="offline"], .opp[data-presence="left"] { border-style: dashed; }
.opp-presence { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; line-height: 1.2; color: var(--muted); }
.opp-presence:empty { display: none; }

.result-wait { margin: 0; padding: 0.625rem 0.75rem; border: 2px dashed var(--line); border-radius: var(--radius); }

@media (orientation: landscape) and (max-height: 32rem) {
  .g-quick { top: calc(env(safe-area-inset-top) + 3.25rem); max-width: min(46rem, calc(100% - 1.5rem)); max-height: calc(100dvh - env(safe-area-inset-top) - 3.75rem); }
  .g-quick-grid { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  .game[data-view="3d"] .g-net { max-width: 22rem; }
}

/* Wide screens put the turn banner and hint into the header row (game.css): the lines of the online bar then
   stay in the left half so a message never covers whose turn it is. */
@media (min-aspect-ratio: 4/3) and (min-width: 40rem) and (min-height: 32.0625rem) {
  .game[data-view="3d"] .g-net { justify-self: start; width: calc(50% - 1.5rem); }
  .game[data-view="3d"] .g-toast { max-width: calc(50% - 1.5rem); }
}

/* Headings get focus when a screen opens (screen readers start there); no ring on a heading, nothing to press. */
.lob [tabindex="-1"]:focus { outline: none; }