/* jk-sync.css — Styles lobby/overlay pour le SDK sync temps réel.
 * Popup salon : même recette que .jk-game-over-card. Ne pas retirer
 * display:flex/gap/min-height:min-content : la carte se réduirait à une ligne
 * dans certaines WebView Android. Le scroll est sur la carte.
 */

.jkn-lobby {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); overflow-y: auto;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.jkn-lobby-card {
  background: var(--jk-bg, #fff); color: var(--jk-fg, #222);
  border-radius: 16px; padding: clamp(18px,5vw,32px) clamp(14px,4.5vw,26px);
  max-width: min(94vw, 520px); width: 94%; font-size: 17px;
  height: auto; min-height: min-content;
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25); text-align: center;
}
body.sombre .jkn-lobby-card { background: #1e1e2e; color: #e0e0e0; }

.jkn-lobby-card h2 { margin: 0 0 4px; font-size: 1.3rem; }
.jkn-sub { margin: 0; opacity: .65; font-size: .9rem; }

.jkn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px; border-radius: 10px; border: none;
  font-size: .95rem; font-weight: 600; cursor: pointer; transition: .15s;
}
.jkn-btn-primary { background: #3b82f6; color: #fff; }
.jkn-btn-primary:hover { background: #2563eb; }
.jkn-btn-primary:disabled { opacity: .5; cursor: default; }
.jkn-btn-ghost { background: transparent; border: 1.5px solid #888; color: inherit; }
.jkn-btn-ghost:hover { border-color: #3b82f6; color: #3b82f6; }

.jkn-join-form { display: flex; gap: 8px; }
.jkn-join-input {
  flex: 1; padding: 10px; border: 1.5px solid #ccc; border-radius: 10px;
  font-size: 1.1rem; text-align: center; text-transform: uppercase;
  letter-spacing: 4px; font-weight: 700; background: transparent; color: inherit;
}
body.sombre .jkn-join-input { border-color: #555; }

.jkn-room-code {
  font-size: 2.4rem; font-weight: 800; letter-spacing: 8px;
  margin: 16px 0 4px; cursor: pointer; user-select: all;
  color: #3b82f6;
}
.jkn-room-code-hint { font-size: .8rem; opacity: .5; margin: 0 0 14px; cursor: pointer; }

.jkn-seats { display: flex; justify-content: center; gap: 16px; margin: 12px 0; }
.jkn-seat {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; border: 2.5px dashed #aaa; transition: .2s;
}
.jkn-seat.jkn-taken { border-style: solid; border-color: #3b82f6; background: rgba(59,130,246,.1); }
.jkn-seat-label { font-size: .75rem; text-align: center; margin-top: 4px; opacity: .7; }

.jkn-status { margin: 0; font-size: .85rem; min-height: 1.2em; }
.jkn-error { color: #ef4444; }

@media (prefers-color-scheme: dark) {
  .jkn-lobby-card { background: #1e1e2e; color: #e0e0e0; }
  .jkn-join-input { border-color: #555; }
}