@charset "UTF-8";
/* ============================================================
   LOBBY REDESIGN — topbar + 3-col grid + quick-play hero
   Loaded AFTER style.css and theme.css; overrides their lobby rules.
   ============================================================ */

/* ── Reset original flex-row layout ─────────────────────────── */
#lobby.active {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: hidden;
}
#lobby {
  position: relative;
}
#lobby::before { display: none !important; }

/* Soft ambient floor (felt-glow) */
#lobby::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 30% 110%, rgba(var(--neon-1-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% -10%, rgba(var(--neon-2-rgb), 0.16) 0%, transparent 60%);
  z-index: 0;
}

/* ── TOPBAR ─────────────────────────────────────────────────── */
#lp-topbar {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 24px;
  background: linear-gradient(180deg, rgba(8,4,16,0.92) 0%, rgba(8,4,16,0.62) 100%);
  border-bottom: 1px solid var(--line-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
}
#lp-topbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--neon-1-rgb), 0.55) 25%,
    rgba(var(--accent-warm-rgb), 0.5) 50%,
    rgba(var(--neon-2-rgb), 0.55) 75%,
    transparent 100%);
}

/* Back button — override the lobby-back-btn align-self:flex-start from style.css */
#lp-topbar #lobby-back-btn {
  align-self: center !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* Brand block (replaces #lp-logo) */
#lp-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 8px;
  border-left: 1px solid var(--line-1);
  margin-left: 4px;
  padding-left: 18px;
}
#lp-brand h1 {
  font-family: var(--display-font);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 5px;
  line-height: 1;
  margin: 0;
  background: linear-gradient(180deg, #fff 0%, var(--neon-1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(var(--neon-1-rgb), 0.35);
}
#lp-brand h1 .lp-brand-dot {
  color: var(--accent-warm);
  -webkit-text-fill-color: var(--accent-warm);
  margin: 0 4px 0 6px;
  filter: drop-shadow(0 0 8px rgba(var(--accent-warm-rgb), 0.6));
  letter-spacing: 0;
}
#lp-brand .lp-sub {
  font-size: 0.6rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  font-weight: 600;
}

/* Live stats — right side */
#lp-livestats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.lp-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-stat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px var(--good);
  animation: lpDotPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lpDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.78); }
}
.lp-stat-body {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}
.lp-stat-val {
  font-family: var(--display-font-2);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: 0.5px;
}
.lp-stat-key {
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.lp-stat-sep {
  width: 1px;
  height: 22px;
  background: var(--line-1);
}

/* ── BODY: 3-col grid ───────────────────────────────────────── */
#lp-body {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 14px;
  padding: 14px 20px 18px;
  overflow: hidden;
}

#lp-body > aside, #lp-body > main {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Left rail — override style.css width: 300px, padding etc. */
#lp-body > #lp-left {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  overflow-y: auto;
}

#lp-body > #lp-center {
  overflow-y: auto;
}

#lp-body > #lp-right {
  width: auto !important;
  flex: none !important;
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow-y: auto;
}

/* Independent scroll on each column */
#lp-body > aside::-webkit-scrollbar,
#lp-body > main::-webkit-scrollbar { width: 6px; }
#lp-body > aside::-webkit-scrollbar-thumb,
#lp-body > main::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}

/* ── Panels — reuse .lp-panel but tweak ─────────────────────── */
.lp-panel {
  padding: 14px 16px !important;
}
.lp-panel-title {
  justify-content: space-between;
  font-size: 0.65rem !important;
}

/* Online players panel — tighter */
#lp-online-panel {
  flex: none;
}
#lobby-players-list {
  max-height: none;
}
.lobby-player-entry {
  padding: 7px 8px;
}
.lpe-avatar { width: 32px; height: 32px; font-size: 0.82rem; }

/* Lobby chat (now in right rail under "Nasıl Çalışır") */
#lp-right #lobby-chat {
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
#lp-right #lobby-chat #lc-messages {
  flex: 1;
  min-height: 120px;
  max-height: none !important;
}

/* Left rail: expand online panel to fill column since chat moved out */
#lp-body > #lp-left {
  flex-direction: column;
}
#lp-body > #lp-left #lp-online-panel {
  flex: 1;
  min-height: 0;
}
#lp-body > #lp-left #lp-online-panel #lobby-players-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  max-height: none !important;
}

/* ── CENTER: HERO QUICK-PLAY ───────────────────────────────── */
#lp-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(var(--neon-1-rgb), 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(var(--accent-warm-rgb), 0.16) 0%, transparent 65%),
    linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 100%);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
#lp-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-1), var(--accent-warm), var(--neon-2), transparent);
}
#lp-hero::after {
  content: '♠ ♥ ♣ ♦';
  position: absolute;
  font-family: serif;
  font-size: 7.5rem;
  letter-spacing: 24px;
  color: rgba(255,255,255,0.025);
  bottom: -36px;
  right: 240px;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transform: rotate(-8deg);
}

.lp-hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lp-hero-key {
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-warm);
  font-weight: 800;
  text-shadow: 0 0 12px rgba(var(--accent-warm-rgb), 0.5);
}
.lp-hero-text h2 {
  font-family: var(--display-font-2);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 0;
  color: var(--ink-1);
}
.lp-hero-text p {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin: 0;
  max-width: 36ch;
}

.lp-hero-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.lp-hero-btn {
  font-family: var(--display-font-2);
  font-size: 0.78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  transition: transform 0.15s, box-shadow 0.18s, border-color 0.18s;
  white-space: nowrap;
  border: none;
}
/* Hızlı Eşleş = primary action: bigger, louder */
#btn-quick-match.lp-hero-btn {
  font-size: 0.98rem;
  padding: 16px 26px;
  letter-spacing: 3px;
}
/* Yeni Masa Aç = secondary, smaller */
#btn-create-room.lp-hero-btn,
#btn-create-room.lp-hero-btn-ghost {
  font-size: 0.7rem;
  padding: 8px 18px;
  opacity: 0.85;
}
.lp-hero-btn:hover { transform: translateY(-1px); }
.lp-hero-btn:active { transform: translateY(0); }

#btn-quick-match.lp-hero-btn {
  background: linear-gradient(135deg, var(--neon-1) 0%, var(--accent-warm) 60%, #ffb84a 100%);
  color: #2a0a18;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.2),
    0 10px 28px rgba(var(--neon-1-rgb), 0.45),
    0 0 36px rgba(var(--accent-warm-rgb), 0.28),
    inset 0 1px 0 rgba(255,255,255,0.45);
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}
#btn-quick-match.lp-hero-btn:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.28),
    0 14px 36px rgba(var(--neon-1-rgb), 0.6),
    0 0 48px rgba(var(--accent-warm-rgb), 0.4),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
#btn-quick-match.lp-hero-btn:disabled {
  background: rgba(255,255,255,0.05);
  color: var(--ink-4);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.lp-hero-btn-ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2);
}
.lp-hero-btn-ghost:hover {
  border-color: var(--neon-2) !important;
  color: var(--neon-2);
  box-shadow: 0 0 22px rgba(var(--neon-2-rgb), 0.25);
}
.lp-hero-btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--line-1) !important;
  color: var(--ink-4);
  transform: none;
  box-shadow: none;
}

/* ── ROOMS PANEL ───────────────────────────────────────────── */
#lp-rooms-panel {
  flex: 1;
  min-height: 0;
  max-width: none !important;
  display: flex !important;
  flex-direction: column;
}
.lp-rooms-title {
  font-size: 0.7rem !important;
}
.lp-legend {
  display: flex;
  gap: 14px;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  font-weight: 700;
}
.lp-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-3);
}
.lp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.lp-dot-active { background: rgba(120,200,140,0.7); box-shadow: 0 0 6px rgba(120,200,140,0.6); }
.lp-dot-hot    { background: var(--neon-1); box-shadow: 0 0 8px rgba(var(--neon-1-rgb), 0.7); }
.lp-dot-full   { background: rgba(255,255,255,0.18); }

#waiting-rooms-list {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)) !important;
  max-height: none !important;
  flex: 1;
  align-content: start;
  gap: 8px !important;
  overflow-y: auto;
}
.wr-card {
  padding: 10px 6px 8px !important;
}

/* ── RIGHT RAIL ─────────────────────────────────────────────── */
#lp-body > #lp-right .lp-panel {
  width: 100% !important;
  max-width: none !important;
}

/* House info / how-to-play panel (default state) */
#lp-house-panel {
  background:
    linear-gradient(160deg, rgba(var(--accent-warm-rgb), 0.05) 0%, var(--glass-1) 100%) !important;
}
.lp-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  counter-reset: lpstep;
}
.lp-howto li {
  position: relative;
  padding-left: 32px;
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.4;
  counter-increment: lpstep;
}
.lp-howto li::before {
  content: counter(lpstep);
  position: absolute;
  left: 0; top: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-1), var(--accent-warm));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display-font-2);
  font-weight: 800;
  font-size: 0.7rem;
  box-shadow: 0 4px 12px rgba(var(--neon-1-rgb), 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.lp-howto li strong {
  color: var(--accent-warm);
  font-weight: 700;
}
.lp-house-meta {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line-1);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.3px;
  text-align: center;
}
.lp-house-meta strong {
  color: var(--ink-1);
  font-family: var(--display-font-2);
  font-weight: 800;
  font-size: 0.95rem;
  margin: 0 2px;
}

/* Join form / room panel — slim tweaks (rules already in theme.css) */
#lp-body > #lp-right #lp-join-form,
#lp-body > #lp-right #lp-room {
  width: 100% !important;
  max-width: none !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  #lp-body { grid-template-columns: 240px 1fr 300px; gap: 16px; padding: 18px; }
  #lp-hero { padding: 18px 20px; gap: 18px; }
  .lp-hero-text h2 { font-size: 1.4rem; }
}

/* Drop right rail to bottom when cramped */
@media (max-width: 980px) {
  #lp-body {
    grid-template-columns: 240px 1fr;
    grid-template-areas:
      "left   center"
      "right  right";
  }
  #lp-body > #lp-left   { grid-area: left; }
  #lp-body > #lp-center { grid-area: center; }
  #lp-body > #lp-right  { grid-area: right; flex-direction: row !important; gap: 14px; }
  #lp-body > #lp-right .lp-panel { flex: 1; }
}

/* Full mobile stack — override style.css mobile rules */
@media (max-width: 760px) {
  #lp-topbar {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 10px;
  }
  #lp-brand { padding-left: 12px; margin-left: 0; }
  #lp-brand h1 { font-size: 1.3rem; letter-spacing: 4px; }
  #lp-livestats {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: space-around;
    padding: 6px 12px;
    gap: 8px;
  }
  .lp-stat-val { font-size: 0.92rem; }

  #lp-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 14px !important;
    gap: 14px !important;
    overflow-y: auto;
  }
  #lp-body > aside, #lp-body > main {
    width: 100% !important;
    overflow: visible !important;
    flex: none !important;
  }
  #lp-hero {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 14px;
  }
  .lp-hero-text h2 { font-size: 1.25rem; }
  .lp-hero-text p { font-size: 0.78rem; }
  .lp-hero-actions { flex-direction: row; }
  .lp-hero-btn { flex: 1; padding: 13px 14px; font-size: 0.78rem; letter-spacing: 2px; }
  #lp-hero::after { display: none; }

  #waiting-rooms-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lp-rooms-title { flex-wrap: wrap; gap: 8px; }
  .lp-legend { gap: 8px; }
}