/* 곱절 — 대기실.
 *
 * 방에 사람이 하나씩 들어와 자리를 채우고, 다 준비되면 방장이 시작한다.
 * 빈자리를 점선으로 남겨두는 게 핵심이다 — "누가 더 올 수 있다"가 보여야 기다린다. */

/* ── ② 대기실 ───────────────────────────────────
   방에 사람이 하나씩 들어와 자리를 채우고, 다 준비되면 방장이 시작한다.
   빈자리를 점선으로 남겨두는 게 핵심이다 — "누가 더 올 수 있다"가 보여야 기다린다. */

.room{
  flex:1; min-height:0; width:100%;
  display:flex; flex-direction:column; gap:14px;
  animation:lobbyIn .28s ease-out;
}

.roomcode{flex:1; text-align:center; line-height:1.15}

.rclab{display:block; font-size:10.5px; font-weight:700; color:var(--dim); letter-spacing:.06em}

.rccode{
  display:block; font-size:27px; font-weight:800; letter-spacing:.22em;
  color:var(--goldtext); font-variant-numeric:tabular-nums; margin-left:.22em;
}

/* 자리를 위에 몰아두면 아래가 통째로 빈다 — 남는 세로를 줄들이 나눠 갖는다. */

.seats{
  flex:1; min-height:0; overflow-y:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:9px; align-content:stretch;
}

.seat{
  background:var(--panel); border:1.5px solid var(--line); border-radius:14px;
  padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:7px;
  min-height:96px; justify-content:center; text-align:center;
}

.seat .who{font-size:14.5px; font-weight:800; letter-spacing:-.02em;
           max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.seat .state{font-size:11px; font-weight:700; color:var(--dim)}

.seat.on{border-color:var(--ok); background:var(--oktint)}

.seat.on .state{color:var(--okfg)}

.seat.me{box-shadow:0 0 0 2px var(--accentring)}

.seat .crown{font-size:10px; font-weight:800; color:var(--goldtext); letter-spacing:.04em}

/* 빈자리 — 점선으로 남겨둬야 "더 올 수 있다"가 읽힌다 */

.seat.empty{border-style:dashed; border-color:var(--seatline); background:transparent}

.seat.empty .who{color:var(--seatfg)}

.roomfoot{flex:none; position:relative; z-index:2; display:flex; flex-direction:column; gap:11px}

.roomnote{font-size:12px; font-weight:700; color:var(--dim); text-align:center; min-height:16px}

.start{width:100%; max-width:none}

.start.wait{background:var(--panel); color:var(--dim); box-shadow:none; border:1.5px solid var(--line)}

/* ⚠ 이름을 'go' 로 쓰면 안 된다 — 시작 신호 덮개(.go)와 같은 이름이라
   준비 버튼이 화면 전체를 덮는 투명막이 돼서 아무것도 못 누르게 된다(실측). */

.start.can{background:var(--ok); color:var(--okon); box-shadow:0 3px 0 var(--oksh)}

@media (min-width:768px){
  .seats{grid-template-columns:repeat(4,1fr); align-content:center}
  .roomfoot{flex-direction:row; align-items:flex-end; gap:16px}
  .roomfoot .pick{flex:1}
  .roomnote{flex:1; text-align:left}
  .start{width:auto; min-width:220px; flex:none}
  .rccode{font-size:32px}
}