/* ==============================================
   MasaKeyfi - Lobi Stilleri
   81okey ve 101okey için ortak
   ============================================== */

#lobby-butonlar {
  width: min(1320px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 15px;

    padding: 112px 10px 8px;
}

.lb-kart-grup {
  min-width: 0;
}

.lb-btn {
  position: relative;

  width: 100%;
  min-height: 190px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  overflow: hidden;
  padding: 14px;

  border: 3px solid #e5bd45;
  border-radius: 26px;

  background: rgba(0, 0, 0, 0.68);
  color: #fff;

  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 9px rgba(229, 189, 69, 0.22);

  cursor: pointer;
  user-select: none;

  transition:
    transform 0.18s,
    filter 0.18s,
    box-shadow 0.18s;
}

.lb-btn.lb-elmas {
  border: 3px solid #6fd6ff;

  background:
    linear-gradient(
      180deg,
      rgba(10, 38, 68, 0.82),
      rgba(5, 22, 42, 0.82)
    );

  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(170, 235, 255, 0.18),
    0 0 10px rgba(90, 200, 255, 0.28),
    0 0 22px rgba(50, 150, 255, 0.20);
}

.lb-btn.lb-elmas:hover {
  box-shadow:
    0 18px 29px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(190, 245, 255, 0.22),
    0 0 16px rgba(100, 210, 255, 0.42),
    0 0 30px rgba(45, 145, 255, 0.28);
}

.lb-btn.lb-elmas::before {
  background:
    radial-gradient(
      circle at 50% 17%,
      rgba(180, 240, 255, 0.18),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      transparent 0%,
      rgba(255,255,255,0.10) 38%,
      transparent 62%
    );
}

.lb-elmas .lb-btn-ikon {
  border-color: #6fd6ff;
  box-shadow:
    0 5px 9px rgba(0, 0, 0, 0.34),
    0 0 10px rgba(80, 190, 255, 0.30);
}

.lb-elmas .lb-ac-btn {
  border-color: #6fd6ff;
  box-shadow:
    0 5px 0 #0f5f8f,
    0 8px 12px rgba(0, 0, 0, 0.25),
    0 0 10px rgba(95, 210, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.lb-btn::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 17%,
      rgba(255, 255, 255, 0.10),
      transparent 35%
    );

  pointer-events: none;
}

.lb-btn:hover {
  transform: translateY(-4px);
  filter: brightness(1.07);

  box-shadow:
    0 18px 29px rgba(0, 0, 0, 0.44),
    0 0 14px rgba(229, 189, 69, 0.34);
}

.lb-btn.aktif {
  transform: translateY(-4px);

  border-color: #ffe676;

  box-shadow:
    0 0 0 2px rgba(255, 218, 88, 0.28),
    0 18px 29px rgba(0, 0, 0, 0.44),
    0 0 17px rgba(255, 210, 67, 0.42);
}

.lb-salon-logo {
  position: relative;
  z-index: 2;

  width: 84%;
  height: 75px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 8px;
}

.lb-elmas .lb-salon-logo,
.lb-puan .lb-salon-logo {
  width: 112%;
  height: 130px;
  margin-bottom: -12px;
}

.lb-salon-logo img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  filter:
    drop-shadow(0 9px 7px rgba(0, 0, 0, 0.48));
}

.lb-btn-ikon {
  position: absolute;
  top: 11px;
  left: 12px;
  z-index: 3;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #e5bd45;
  border-radius: 50%;

  background: rgba(0, 0, 0, 0.66);

  font-size: 21px;

  box-shadow:
    0 5px 9px rgba(0, 0, 0, 0.34);
}

.lb-btn-baslik {
  position: relative;
  z-index: 2;

  margin-top: 2px;

  color: #fff2a6;

  font-size: 14px;
  font-weight: 1000;
  letter-spacing: 0.4px;
  text-align: center;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.68);
}

.lb-btn-alt {
  position: relative;
  z-index: 2;

  margin-top: 2px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.lb-ac-btn {
  position: relative;
  z-index: 2;

  width: 88%;
  margin-top: 2px;
  padding: 6px 8px;

  border: 3px solid #e5bd45;
  border-radius: 17px;

  background:
    linear-gradient(
      180deg,
      #85df24,
      #43a707 55%,
      #277802
    );

  color: #fff;

  font-size: 12px;
  font-weight: 1000;
  text-align: center;

  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.42);

  box-shadow:
    0 5px 0 #195d02,
    0 8px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.lb-panel {
  margin: 12px 0 18px;
  overflow: hidden;

  border: 2px solid #e5bd45;
  border-radius: 16px;

  background: rgba(0, 0, 0, 0.70);

  animation: lbSlide 0.25s ease;
}

@keyframes lbSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

      .lb-panel { border-radius:16px; margin:0 10px 20px; overflow:hidden; animation:lbSlide .25s ease; }
      @keyframes lbSlide { from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:translateY(0);} }

      .lb-panel-ust { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; font-size:14px; font-weight:800; }
      .lb-panel-ust-tek { background:linear-gradient(90deg,#6b0000,#c0392b); color:#fff; }
      .lb-panel-ust-elmas { background:linear-gradient(90deg,#0a1f5e,#1565c0); color:#fff; }
      .lb-panel-ust-puan { background:linear-gradient(90deg,#5a3a00,#c8a820); color:#fff; }

      .lb-kapat { background:rgba(255,255,255,.15); border:none; color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px; line-height:1; font-weight:900; }
      .lb-kapat:hover { background:rgba(255,255,255,.35); }

      .lb-tek-icerik { background:rgba(100,0,0,.2); border:1px solid rgba(255,80,80,.15); border-top:none; border-radius:0 0 16px 16px; padding:24px; text-align:center; }
      .lb-tek-icerik p { color:rgba(255,255,255,.7); font-size:13px; margin-bottom:18px; }
      .lb-tek-btn { background:linear-gradient(135deg,#c0392b,#8b0000); color:#fff; border:none; padding:13px 36px; border-radius:12px; font-size:15px; font-weight:900; cursor:pointer; transition:all .2s; font-family:'Nunito',sans-serif; }
      .lb-tek-btn:hover { transform:scale(1.05); box-shadow:0 6px 20px rgba(192,57,43,.5); }

      .lb-masalar-ust {
  width: min(1320px, 100%);
  margin: 0 auto 12px;
  padding: 88px 12px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lb-lobi-geri {
  padding: 9px 16px;

  border: 2px solid #e5bd45;
  border-radius: 12px;

  background: rgba(0, 0, 0, 0.72);
  color: #fff4af;

  font-family: inherit;
  font-size: 12px;
  font-weight: 1000;

  cursor: pointer;

  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.34);
}

#lb-masalar-baslik {
  color: #fff1a0;

  font-size: 17px;
  font-weight: 1000;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.70);
}

.lb-yatay-alan {
  width: min(1400px, 100%);
  margin: 92px auto 0;

  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;

  padding: 0 8px 14px;
}

#lb-masa-kaydirici {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scrollbar-width: none;

  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

#lb-masa-kaydirici::-webkit-scrollbar {
  display: none;
}

.lb-masa-grid {
  width: max-content;
  min-width: 100%;

  display: flex;
  align-items: center;
  gap: 22px;

  padding: 18px 12px 24px;

  border: 2px solid #e5bd45;
  border-radius: 18px;

  background: rgba(0, 0, 0, 0.68);

  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.lb-masa-wrapper {
  flex: 0 0 220px;
  width: 220px;
  height: 220px;
}

.lb-kaydir-ok {
  width: 46px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 3px solid #e5bd45;
  border-radius: 16px;

  background: rgba(0, 0, 0, 0.76);
  color: #ffe879;

  font-family: Arial, sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 7px 13px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lb-kaydir-ok:active {
  transform: scale(0.94);
}
      .lb-masa-wrapper { position:relative; width:220px; height:220px; display:flex; align-items:center; justify-content:center; }
      .lb-masa-board { width:120px; height:120px; border-radius:20px; border:4px solid #5a3508; box-shadow:0 10px 20px rgba(0,0,0,0.6),inset 0 0 15px rgba(0,0,0,0.3); display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; position:relative; z-index:2; padding: 8px 6px; }
      .lb-masa-board span { color:#fff; font-weight:900; font-size:11px; text-shadow:1px 1px 2px #000; }
      .lb-masa-bilgi {
  margin-top: 4px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.lb-masa-bilgi-ust,
.lb-masa-bilgi-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.lb-mini-chip {
  padding: 2px 7px;

  border-radius: 8px;

  color: #fff;
  font-size: 7px;
  font-weight: 1000;
  line-height: 1.1;
  white-space: nowrap;

  box-shadow:
    0 1px 3px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12);

  text-shadow:
    0 1px 1px rgba(0,0,0,.35);
}

.lb-mini-text {
  color: rgba(255,255,255,.88);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.lb-chip-red {
  background: linear-gradient(180deg, #e24f4f, #b52626);
}

.lb-chip-blue {
  background: linear-gradient(180deg, #43a4ff, #1d63c7);
}

.lb-chip-gold {
  background: linear-gradient(180deg, #f2c44b, #b88208);
  color: #fffceb;
}
      .lb-izle-btn { background:rgba(0,0,0,0.65); border:1.5px solid; padding:5px 14px; border-radius:8px; font-size:11px; font-weight:800; cursor:pointer; transition:all 0.2s; text-transform:uppercase; box-shadow:0 4px 8px rgba(0,0,0,0.5); font-family:'Nunito',sans-serif; }
      .lb-izle-btn:hover { transform:scale(1.05); }
      .lb-oyna-btn { position:absolute; font-weight:800; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s ease; font-size:12px; box-shadow:0 4px 10px rgba(0,0,0,0.5); z-index:3; font-family:'Nunito',sans-serif; }
      .lb-oyna-btn:hover { transform:scale(1.15); }
      .lb-seat-top { top:0; left:50%; transform:translateX(-50%); }
      .lb-seat-top:hover { transform:translateX(-50%) scale(1.15); }
      .lb-seat-bottom { bottom:0; left:50%; transform:translateX(-50%); }
      .lb-seat-bottom:hover { transform:translateX(-50%) scale(1.15); }
      .lb-seat-left { top:50%; left:0; transform:translateY(-50%); }
      .lb-seat-left:hover { transform:translateY(-50%) scale(1.15); }
      .lb-seat-right { top:50%; right:0; transform:translateY(-50%); }
      .lb-seat-right:hover { transform:translateY(-50%) scale(1.15); }

      .lb-yukleniyor { color:rgba(255,255,255,.35); font-size:12px; text-align:center; padding:20px; grid-column:1/-1; }
    

/* Tek başına: kırmızı */
.lb-tek .lb-ac-btn {
  background:
    linear-gradient(
      180deg,
      #f14f4f,
      #c51f1f 55%,
      #7d0909
    );
}

/* Elmaslı: parlamento mavisi */
.lb-elmas .lb-ac-btn {
  background:
    linear-gradient(
      180deg,
      #4b55df,
      #2732ad 55%,
      #161d72
    );
}

/* Puanlı: koyu turkuaz / yeşil */
.lb-puan .lb-ac-btn {
  background:
    linear-gradient(
      180deg,
      #22bda9,
      #087b70 55%,
      #034941
    );
}


/* =====================================================
   MOBiL: LOBI SAYFASINDA DİKEY KAYDIRMA KİLİDİ
   Ana sayfa kaydırmayi engelle, sadece
   acilan kutucuklarda kaydirma devam etsin.
   ===================================================== */
#lobby-ana {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  touch-action: auto !important;
  overscroll-behavior: none !important;
}

#lobby-secim-ekrani {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  touch-action: none !important;
}

#lobby-masalar-ekrani {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  touch-action: pan-x !important;
}

/* Yatay masa kaydırıcı: ok + parmakla sağ-sol kaydırma */
#lb-masa-kaydirici {
  touch-action: pan-x !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  cursor: grab;
}

#lb-masa-kaydirici,
#lb-masa-kaydirici *,
.lb-masa-grid,
.lb-masa-wrapper {
  touch-action: pan-x !important;
}

#lb-masa-kaydirici.is-dragging {
  cursor: grabbing;
}
/* Acilan kutu/modal/panel icerisinde dikey kaydirma calissin */
.setup-modal,
#game-modal-card,
#ps-stats,
.lb-panel {
  touch-action: pan-y !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
#lobby-account-area {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}