/* The co-op lobby, and the join-code field that leads into it.
 *
 * Before this existed there was no place that answered "who is in this game,
 * am I the host, what is the code, and what makes it start" — a key was
 * generated before anyone had asked to host, "Generate key" did not read as
 * "open a game", and the only feedback about the other players was a sentence
 * of status text with their names comma-joined into it.
 */

/* ------------------------------------------------------------------ lobby */
.lobby-online-chip {
  margin: 0 auto 10px;
  max-width: 36rem;
  color: #c08a48;
  font: 600 12px/1.4 var(--font-mono);
  letter-spacing: .04em;
  text-align: center;
}
.lobby-online-chip[hidden] { display: none !important; }

.lobby-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 6px;
}

.lobby-code-block {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 18px 18px;
  background: linear-gradient(168deg, rgba(26,29,34,.92), rgba(8,10,12,.97));
  border: 1px solid rgba(190,170,135,.24);
  border-radius: 4px;
}
.lobby-key {
  color: var(--paper-mute);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.lobby-code {
  /* The code gets read out loud over voice chat, so it is the largest thing on
     the page and uses a face where 8 and B cannot be confused. */
  color: var(--paper-bright);
  font: 700 clamp(30px, 6vw, 46px)/1.1 var(--font-mono);
  letter-spacing: .16em;
  text-shadow: 0 2px 6px var(--ink);
  user-select: text;
  -webkit-user-select: text;
}
.lobby-note {
  min-height: 14px;
  color: var(--tone-8fbb84);
  font: 700 11px/1.2 var(--font-mono);
  letter-spacing: .1em;
}

.lobby-facts {
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  align-content: center;
  margin: 0;
  padding: 16px 18px;
  background: rgba(6,9,12,.72);
  border: 1px solid rgba(190,170,135,.16);
  border-radius: 4px;
  text-align: left;
}
.lobby-facts div { min-width: 0; }
.lobby-facts dt {
  color: var(--paper-mute);
  font: 700 10px/1.2 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lobby-facts dd {
  margin: 3px 0 0;
  color: var(--cream-600);
  font: 700 15px/1.2 var(--font-ui);
  overflow-wrap: anywhere;
}
.lobby-facts dd.warn { color: var(--tone-e8b473); }
.lobby-facts dd.bad  { color: var(--tone-d8837a); }
.lobby-facts dd.good { color: var(--rot-green); }

.lobby-sub {
  margin: 18px 0 8px;
  color: var(--paper-mute);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
}
.lobby-site {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 8px;
}
.lobby-guest {
  width: 100%;
  max-width: 820px;
  margin: 0 auto 10px;
  color: var(--tone-e8b473);
  font: 700 12px/1.35 var(--font-ui);
}

.lobby-roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.lobby-player {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  background: rgba(10,13,16,.78);
  border: 1px solid rgba(150,150,150,.16);
  border-left: 3px solid rgba(150,150,150,.3);
  border-radius: 3px;
  text-align: left;
}
.lobby-player.is-self { border-left-color: var(--denied); background: rgba(30,16,14,.78); }
.lobby-player.is-empty {
  opacity: .55;
  border-style: dashed;
  border-color: rgba(190,170,135,.18);
  background:
    repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,255,255,.02) 6px 7px),
    rgba(8,10,12,.55);
}
.lobby-player.is-empty .lp-name {
  color: var(--tone-7a756a);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .06em;
  opacity: .78;
}
.lp-slot {
  color: var(--paper-faint);
  font: 700 13px/1 var(--font-mono);
  letter-spacing: .06em;
}
.lp-name {
  color: var(--cream-600);
  font: 700 15px/1.25 var(--font-ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(220px, 52vw);
}
.lp-persona {
  display: block;
  margin-top: 2px;
  color: var(--paper-mute);
  font: 700 11px/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lp-badge {
  padding: 4px 9px;
  border: 1px solid rgba(201,164,92,.5);
  border-radius: 2px;
  color: var(--tone-d9b878);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lp-ready {
  padding: 4px 9px;
  border: 1px solid rgba(150,150,150,.28);
  border-radius: 2px;
  color: var(--paper-mute);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lp-ready.on { border-color: rgba(120,180,110,.6); color: var(--rot-green); }

#lobby-listed-row {
  max-width: 820px;
  margin: 14px auto 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
#btn-ready[aria-pressed="true"] { color: var(--tone-d5f0cd); }
/* Start is host-only; a joiner sees why rather than a dead button. */
#btn-start-match[disabled], #btn-ready[disabled] { opacity: .4; pointer-events: none; }
/* .mbtn sets display:flex, which outranks the user-agent's [hidden] rule — so
   `hidden` alone left the host looking at a Ready button they are not for. */
#btn-start-match[hidden], #btn-ready[hidden],
#lobby-listed-row[hidden] { display: none !important; }

/* -------------------------------------------------- join code field/errors */
.cc-help {
  margin: 4px 0 0;
  color: var(--tone-7f796d);
  font: 400 11.5px/1.45 var(--font-ui);
  font-style: italic;
}
.cc-error {
  margin: 5px 0 0;
  min-height: 15px;
  color: var(--tone-d8837a);
  font: 700 11.5px/1.35 var(--font-mono);
  letter-spacing: .04em;
}
.cc-error:empty { min-height: 0; margin: 0; }
.cc-input[aria-invalid="true"] { border-color: var(--tone-a5483c); }
.cc-input:focus-visible { outline: 3px solid var(--amber-hot); outline-offset: 2px; }

@media (max-width: 560px) {
  .lobby-head { gap: 12px; }
  .lobby-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 13px; }
  .lobby-player { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 6px; padding: 10px 12px; }
  /* The ready pip drops to its own row rather than squeezing the callsign. */
  .lp-ready { grid-column: 2 / -1; justify-self: start; }
}
@media (max-height: 460px) {
  .lobby-code { font-size: clamp(24px, 5vw, 32px); }
  .lobby-code-block { padding: 10px 12px 12px; }
  .lobby-facts { padding: 10px 12px; gap: 6px 12px; }
  .lobby-sub { margin: 10px 0 6px; }
  .lobby-player { padding: 8px 11px; }
}