/*
 * lobby.css
 * Lobby screen styles: room creation/join UI, player list pills, buttons, name input,
 * room code display, and lobby decorations.
 *
 * Reuse in another card game: keep all of this — the lobby system is generic.
 * Only the .lobby-logo font size and letter-spacing reflects the "Judgement" brand.
 */

/* ════════════════════════════════════════
   LOBBY
════════════════════════════════════════ */
#lobby {
  position: relative; z-index: 10;
  background: linear-gradient(145deg, rgba(8,18,20,.98) 0%, rgba(10,22,18,.97) 100%);
  border-radius: 24px;
  border: 1px solid rgba(201,150,14,.22);
  outline: 1px solid rgba(255,255,255,.03);
  padding: 44px 44px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  min-width: 360px; max-width: 760px; width: 95%;
  box-shadow:
    0 0 0 1px rgba(34,212,180,.04),
    0 2px 0 rgba(240,200,58,.12) inset,
    0 60px 120px rgba(0,0,0,.9);
  animation: lobbyIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes lobbyIn { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none} }

/* Decorative corner diamonds */
#lobby::before { content: '◆'; position: absolute; top: 18px; left: 22px; font-size: 11px; color: rgba(201,150,14,.3); letter-spacing: 0; }
#lobby::after  { content: '◆'; position: absolute; top: 18px; right: 22px; font-size: 11px; color: rgba(201,150,14,.3); }

/* Logo */
.lobby-logo {
  font-family: 'Playfair Display', serif;
  font-size: 56px; font-weight: 700;
  letter-spacing: 8px; line-height: 1.2;
  text-transform: uppercase;
  padding-bottom: 4px;
  background: linear-gradient(160deg, var(--gold3) 0%, var(--gold2) 40%, var(--gold) 80%, var(--gold-dim) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(201,150,14,.35));
  user-select: none;
}
.lobby-tagline {
  margin-top: -16px;
  font-size: 10px; font-weight: 600; letter-spacing: 6px; text-transform: uppercase;
  color: rgba(34,212,180,.45);
}

/* Suit strip decoration */
.lobby-suits {
  display: flex; gap: 16px; font-size: 20px; opacity: .15; user-select: none;
  margin-top: -8px;
}

#lobby-body { display: flex; gap: 28px; width: 100%; align-items: flex-start; }
#lobby-left  { display: flex; flex-direction: column; gap: 11px; flex: 1.1; min-width: 220px; }
#lobby-right { display: flex; flex-direction: column; gap: 9px; flex: .9; min-width: 180px; }
#lobby-right h3 {
  font-family: 'Playfair Display SC', serif;
  font-size: 11px; font-weight: 700; color: rgba(201,150,14,.6);
  letter-spacing: 4px; text-transform: uppercase;
}

/* Inputs */
.lobby-input {
  width: 100%;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.1);
  border-bottom-color: rgba(201,150,14,.2);
  border-radius: 10px; padding: 13px 18px;
  color: #e8dfc0; font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600; outline: none; text-align: center;
  transition: all .2s;
  caret-color: var(--gold2);
}
.lobby-input:focus {
  background: rgba(201,150,14,.05);
  border-color: rgba(201,150,14,.38);
  box-shadow: 0 0 0 3px rgba(201,150,14,.07), 0 1px 0 rgba(201,150,14,.15) inset;
  color: #fff;
}
.lobby-input::placeholder { color: rgba(255,255,255,.17); }

/* Rounds row */
.rounds-row { display: flex; align-items: center; gap: 14px; justify-content: center; }
.rounds-label { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,.3); }
.rounds-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55); font-size: 14px;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.rounds-btn:hover { background: var(--gold); color: #0a0a0a; border-color: var(--gold); transform: scale(1.12); box-shadow: 0 0 12px rgba(201,150,14,.4); }
#rounds-val { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--gold2); min-width: 28px; text-align: center; line-height: 1; }

/* Buttons */
.lbtn {
  width: 100%; padding: 12px 16px; border: none; border-radius: 10px;
  font-family: 'Playfair Display SC', serif;
  font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  cursor: pointer; transition: all .18s; position: relative; overflow: hidden;
}
.lbtn::after { content: ''; position: absolute; inset: 0; background: white; opacity: 0; transition: opacity .2s; }
.lbtn:hover::after { opacity: .05; }
.lbtn:active::after { opacity: .1; }
.lbtn:hover:not(:disabled) { transform: translateY(-2px); }
.lbtn:active:not(:disabled) { transform: translateY(0) scale(.98); }
.lbtn:disabled { opacity: .25; cursor: not-allowed; transform: none !important; }

.lbtn-gold {
  background: linear-gradient(135deg, var(--gold3) 0%, var(--gold2) 45%, var(--gold) 100%);
  color: #1a0e00;
  box-shadow: 0 4px 0 var(--gold-dim), 0 6px 20px rgba(201,150,14,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.lbtn-gold:hover:not(:disabled) {
  box-shadow: 0 4px 0 var(--gold-dim), 0 10px 32px rgba(201,150,14,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.lbtn-ghost {
  background: transparent; color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.12); font-size: 12px; padding: 10px 16px;
}
.lbtn-ghost:hover:not(:disabled) { border-color: rgba(34,212,180,.35); color: var(--teal); }

/* Players list */
#players-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.player-pill {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px; padding: 8px 13px;
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8);
  transition: all .15s;
}
.player-pill:hover { border-color: rgba(201,150,14,.18); background: rgba(201,150,14,.03); }
.player-pill .pdot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal); box-shadow: 0 0 8px var(--teal);
}
.player-pill.is-bot .pdot { background: #555; box-shadow: none; }
.player-pill.is-you .pdot { background: var(--gold2); box-shadow: 0 0 8px var(--gold); }
.player-pill .pname { flex: 1; }
.player-pill .ptype { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.25); letter-spacing: 2px; text-transform: uppercase; }
.player-pill .premove { background: none; border: none; color: rgba(255,60,60,.4); cursor: pointer; font-size: 13px; padding: 0 2px; transition: color .12s; }
.player-pill .premove:hover { color: var(--red2); }
.player-pill .pcrown { font-size: 12px; line-height: 1; }

#lobby-status { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.3); text-align: center; min-height: 15px; letter-spacing: .5px; }
#lobby-err    { font-size: 11px; font-weight: 600; color: var(--red2); text-align: center; min-height: 15px; }

.lobby-divider { display: flex; align-items: center; gap: 12px; width: 100%; }
.lobby-divider::before, .lobby-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
.lobby-divider span { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.22); }

#room-code-display {
  background: rgba(201,150,14,.06);
  border: 1px dashed rgba(201,150,14,.3);
  border-radius: 12px; padding: 16px; width: 100%; text-align: center;
  animation: pulseBox 2.5s ease-in-out infinite;
}
@keyframes pulseBox { 0%,100%{border-color:rgba(201,150,14,.3)} 50%{border-color:rgba(201,150,14,.55)} }
.rcode-val { font-family: 'Playfair Display SC', serif; font-size: 36px; font-weight: 700; color: var(--gold2); letter-spacing: 14px; }
.rcode-sub  { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 5px; letter-spacing: 1px; }