/* public/room/room.css */
body { overflow: hidden; height: 100vh; display: flex; flex-direction: column; }

/* ── Profile overlay ─────────────────────────────────── */
.profile-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,6,5,.93);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
}
.profile-modal {
  text-align: center; padding: 2.5rem 2rem;
  max-width: 620px; width: 93%;
  animation: modalIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalIn { from { opacity:0; transform:translateY(24px) scale(.97); } to { opacity:1; transform:none; } }

.profile-modal-title {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 400;
  background: linear-gradient(180deg,#EDE0C4,#C39B5A);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.profile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 1rem;
}

.profile-card {
  background: var(--bg-card); border: 1px solid rgba(195,155,90,.14);
  padding: 1.4rem .75rem 1.1rem; cursor: pointer;
  transition: background .22s, border-color .22s, transform .22s;
  position: relative; overflow: hidden;
}
.profile-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(195,155,90,.07),transparent); opacity:0; transition:opacity .22s; }
.profile-card:hover { border-color: rgba(195,155,90,.5); transform: translateY(-3px); }
.profile-card:hover::after { opacity: 1; }
.profile-card img { border-radius:50%; width:64px; height:64px; object-fit:cover; display:block; margin:0 auto .7rem; border:1px solid var(--gold-dim); background:#1a3a22; }
.profile-card span { font-family:var(--font-serif); font-size:.95rem; display:block; }

/* ── Nav brand ───────────────────────────────────────── */
.nav-brand { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: .22em; background: linear-gradient(180deg,#EDE0C4,#C39B5A); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Lobby wrap ──────────────────────────────────────── */
.lobby-wrap { display: flex; flex-direction: column; height: 100vh; position: relative; z-index: 5; }

/* ── Game panels ─────────────────────────────────────── */
.game-panels { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 0; }

.game-panel {
  position: relative; cursor: pointer; overflow: hidden;
  border-right: 1px solid rgba(195,155,90,.1);
  display: flex; flex-direction: column;
  transition: flex-grow .35s cubic-bezier(.16,1,.3,1);
}
.game-panel:last-child { border-right: none; }
.game-panel.disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* Panel backgrounds */
.gp-poker    .gp-bg { background: radial-gradient(ellipse at 40% 30%, #1a4a2a 0%, #0a1a10 55%, #050a07 100%); }
.gp-blackjack .gp-bg { background: radial-gradient(ellipse at 60% 35%, #2a1a0a 0%, #14090400 55%, #080503 100%), radial-gradient(ellipse at 50% 80%, #1a100030 0%, transparent 60%), #080503; }
.gp-roulette  .gp-bg { background: radial-gradient(ellipse at 50% 30%, #1a0a2e 0%, #0c0616 55%, #060308 100%); }

.gp-bg { position: absolute; inset: 0; }
.gp-felt { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 9px); opacity: .6; }
.gp-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0,0,0,.5) 100%); }

/* Hover shimmer */
.gp-shimmer { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(195,155,90,.06),transparent 60%); opacity: 0; transition: opacity .3s; }
.game-panel:hover .gp-shimmer { opacity: 1; }

/* Bottom gold line on hover */
.gp-line { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,transparent,rgba(195,155,90,.55),transparent); opacity: 0; transition: opacity .3s; }
.game-panel:hover .gp-line { opacity: 1; }

/* Content */
.gp-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  height: 100%; padding: 32px 18px 24px;
}

.gp-top { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

.gp-suit {
  font-size: 72px; line-height: 1; color: rgba(195,155,90,.68);
  filter: drop-shadow(0 0 28px rgba(195,155,90,.22));
  transition: transform .4s cubic-bezier(.16,1,.3,1), filter .4s;
  user-select: none;
}
.game-panel:hover .gp-suit { transform: scale(1.07) translateY(-5px); filter: drop-shadow(0 0 42px rgba(195,155,90,.45)); }

.gp-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: .14em; text-align: center; }
.gp-desc { font-family: var(--font-serif); font-style: italic; font-size: .8rem; color: var(--text-dim); letter-spacing: .06em; text-align: center; }

.gp-divider { width: 38px; height: 1px; background: linear-gradient(90deg,transparent,rgba(195,155,90,.35),transparent); }

/* Players at table */
.gp-players-section { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; }
.gp-players-label { font-family: var(--font-display); font-size: 7.5px; letter-spacing: .28em; color: rgba(195,155,90,.45); }
.gp-avatars { display: flex; justify-content: center; }
.gp-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(195,155,90,.22);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 10px; color: rgba(237,224,196,.6);
  margin-left: -7px; transition: transform .22s;
  overflow: hidden;
}
.gp-avatar:first-child { margin-left: 0; }
.gp-avatar img { width:100%; height:100%; object-fit:cover; }
.gp-avatar.more { background: rgba(195,155,90,.12); color: var(--gold); font-size: 9px; }
.game-panel:hover .gp-avatar { transform: translateY(-2px); }

/* Stats row */
.gp-stats { display: flex; gap: 12px; justify-content: center; }
.gp-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gp-stat-val { font-family: var(--font-display); font-size: 13px; color: var(--gold); }
.gp-stat-lbl { font-size: 8px; letter-spacing: .15em; color: var(--text-dim); font-family: var(--font-display); }

/* Live badge */
.gp-live { display: flex; align-items: center; gap: 5px; font-family:var(--font-display); font-size:8px; letter-spacing:.15em; color:var(--green-live); }

/* Enter button */
.gp-enter {
  width: 100%; background: rgba(195,155,90,.07);
  border: 1px solid rgba(195,155,90,.22);
  color: rgba(195,155,90,.75);
  font-family: var(--font-display); font-size: 10px; letter-spacing: .25em;
  padding: 11px; text-align: center; cursor: pointer;
  transition: all .25s; position: relative; overflow: hidden;
}
.gp-enter::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(195,155,90,.1),transparent); opacity:0; transition:opacity .25s; }
.game-panel:hover .gp-enter { border-color: rgba(195,155,90,.5); color: var(--gold); }
.game-panel:hover .gp-enter::before { opacity:1; }

/* ── Who's here strip ────────────────────────────────── */
.whos-here {
  flex-shrink: 0;
  background: rgba(5,7,8,.92);
  border-top: 1px solid rgba(195,155,90,.1);
  padding: 10px 24px;
  display: flex; align-items: center; gap: 18px;
}
.wh-label { white-space: nowrap; }
.wh-players { display: flex; gap: 14px; overflow: hidden; flex: 1; }
.wh-player { display: flex; align-items: center; gap: 6px; }
.wh-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(195,155,90,.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 9px; color: rgba(237,224,196,.55);
  overflow: hidden; flex-shrink: 0;
}
.wh-av img { width:100%; height:100%; object-fit:cover; }
.wh-info { display: flex; flex-direction: column; gap: 1px; }
.wh-name { font-family: var(--font-serif); font-size: 12px; color: var(--text-mid); }
.wh-loc  { font-size: 9px; color: rgba(195,155,90,.4); letter-spacing: .07em; }
.wh-empty { font-family:var(--font-serif); font-style:italic; font-size:.8rem; color:var(--text-dim); }