/* =========================================================
   KEYİFBİZDE.COM - OKEY & 101 VIP SALONU TAM TASARIM MOTORU
   RESİM 2'DEKİ FERAH MASA + OK İŞARETLİ (▼) GİZLİ ÜST ÇEKMECE
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    min-height: 100%;
    background: radial-gradient(circle at 50% 20%, #0d2b1a 0%, #05140b 65%, #020804 100%) !important;
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* =========================================================
   1. İNCECİK TEK SATIR ÜST BAR & OKLA (▼) AÇILAN GİZLİ MENÜ
   ========================================================= */
.master-navbar.slim-pro-header {
    position: relative !important;
    background: linear-gradient(180deg, #0d2b1a 0%, #041009 100%) !important;
    border-bottom: 1.5px solid #f59e0b !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.85) !important;
    padding: 5px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    z-index: 210 !important;
}

.slim-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.btn-drawer-toggle {
    background: linear-gradient(135deg, #fde047 0%, #d97706 100%) !important;
    color: #1c0a00 !important;
    border: 1.5px solid #ffffff !important;
    padding: 5px 11px !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5) !important;
}

/* Ok İşaretine (▼) Basınca Aşağı Doğru Açılan Cam Çekmece */
.top-expand-drawer {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 6px !important;
    right: 6px !important;
    margin-top: 4px !important;
    background: linear-gradient(180deg, rgba(11, 36, 22, 0.98) 0%, rgba(4, 15, 9, 0.99) 100%) !important;
    border: 2px solid #f59e0b !important;
    border-radius: 16px !important;
    padding: 12px 10px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.95), 0 0 20px rgba(245, 158, 11, 0.35) !important;
    z-index: 300 !important;
}

.top-expand-drawer.open {
    display: block !important;
    animation: slideDownDrawer 0.18s ease-out forwards;
}

@keyframes slideDownDrawer {
    0%   { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.drawer-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.nav-radio {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 1.5px solid #f59e0b !important;
    padding: 2px 7px 2px 4px !important;
    border-radius: 99px !important;
}

.btn-radio {
    background: linear-gradient(135deg, #fde047 0%, #d97706 100%) !important;
    color: #1c0a00 !important;
    border: none !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    border-radius: 99px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
}

.radio-bars {
    display: inline-flex !important;
    align-items: flex-end !important;
    height: 11px !important;
    gap: 2px !important;
}

.radio-bars i {
    width: 3px;
    height: 4px;
    background: #10b981;
    border-radius: 2px;
    display: inline-block;
}

.btn-online-blinking {
    background: linear-gradient(135deg, #059669 0%, #064e3b 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid #34d399 !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    gap: 5px !important;
    border-radius: 99px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

.green-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px #4ade80;
    display: inline-block;
}

.btn-lux-nav {
    background: linear-gradient(180deg, #1b3526 0%, #08150e 100%) !important;
    color: #fef08a !important;
    border: 1.5px solid #f59e0b !important;
    border-bottom: 2px solid #b45309 !important;
    padding: 5px 10px !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
    cursor: pointer !important;
}

.btn-vip-ultra {
    background: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid #fde68a !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    border-radius: 99px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.btn-admin-top {
    background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%) !important;
    border-color: #c084fc !important;
    border-bottom: 2px solid #7e22ce !important;
    color: #f3e8ff !important;
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.45) !important;
}

.rh-badge {
    background: linear-gradient(135deg, #fde047 0%, #d97706 100%) !important;
    color: #1c0a00 !important;
    border: 1.5px solid #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

.btn-rh {
    padding: 5px 10px !important;
    border-radius: 99px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

.btn-start-room {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
}

.btn-owner-tools {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}

.btn-reveal-hands {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important;
}

.btn-treat {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
}

/* =========================================================
   2. RESİM 2'DEKİ GİBİ TAM EKRANA OTURAN FERAH MASA (.casino-table)
   ========================================================= */
.game-screen {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 4px 6px 6px 6px !important;
    display: flex;
    flex-direction: column;
    gap: 5px !important;
}

.table-viewport {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.casino-table {
    position: relative !important;
    width: 100% !important;
    height: 345px !important;
    background:
        radial-gradient(circle at 50% 50%, #11422a 0%, #092919 62%, #04160d 100%) !important;
    border: 4px solid #d97706 !important;
    border-radius: 26px !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.92),
        inset 0 0 38px rgba(0, 0, 0, 0.85) !important;
    overflow: hidden !important;
}

.table-inner-trim {
    position: absolute !important;
    inset: 8px !important;
    border: 1px solid rgba(251, 191, 36, 0.32) !important;
    border-radius: 20px !important;
    pointer-events: none !important;
}

/* Sol Üst Masa Adı Etiketi */
.table-corner-emblem {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 1px solid rgba(245, 158, 11, 0.65) !important;
    color: #fde68a !important;
    padding: 3px 8px !important;
    border-radius: 99px !important;
    font-family: 'Cinzel', serif !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    max-width: 105px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    z-index: 6 !important;
}

.table-center-watermark {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: rgba(253, 230, 138, 0.08) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* MASA İÇİ KONUŞMA BALONCUKLARI (SOL ÜSTE YAPIŞMAYI ÖNLER, HER OYUNCUNUN KENDİ YERİNDE ÇIKAR) */
.floating-bubbles-layer {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 35 !important;
}

.Quick-bubble {
    position: absolute !important;
    background: linear-gradient(135deg, #065f46 0%, #022c22 100%) !important;
    border: 1.5px solid #fde047 !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 99px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9) !important;
    max-width: 240px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 36 !important;
}

.Quick-bubble strong {
    color: #fde047 !important;
    margin-right: 4px !important;
}

.Quick-bubble.pos-bottom {
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.Quick-bubble.pos-top {
    top: 48px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.Quick-bubble.pos-left {
    left: 52px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.Quick-bubble.pos-right {
    right: 52px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Gösterge ve Süre'nin Üstünü Kapatan Büyük Oyuncu Kartlarını ve "Sıra:..." Kutusunu Gizle */
.seat-top .player-badge,
.seat-left .player-badge,
.seat-right .player-badge,
.seat-bottom .player-badge,
#statusToastText,
.table-status-toast {
    display: none !important;
}

/* ÜST OYUNCU YATAY AHŞAP ISTAKASI */
.seat-top {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 12 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.seat-top .mini-wood-rack {
    min-width: 142px !important;
    height: 31px !important;
    background: linear-gradient(180deg, #6b3410 0%, #3d1b06 100%) !important;
    border: 1.5px solid #f59e0b !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85) !important;
    cursor: pointer !important;
}

/* SOL OYUNCU DİKEY AHŞAP ISTAKASI */
.seat-left {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 12 !important;
    display: flex !important;
    align-items: center !important;
}

.seat-left .mini-wood-rack {
    width: 33px !important;
    min-height: 128px !important;
    background: linear-gradient(90deg, #6b3410 0%, #3d1b06 100%) !important;
    border: 1.5px solid #f59e0b !important;
    border-radius: 10px !important;
    padding: 10px 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85) !important;
    cursor: pointer !important;
}

/* SAĞ OYUNCU DİKEY AHŞAP ISTAKASI */
.seat-right {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 12 !important;
    display: flex !important;
    align-items: center !important;
}

.seat-right .mini-wood-rack {
    width: 33px !important;
    min-height: 128px !important;
    background: linear-gradient(270deg, #6b3410 0%, #3d1b06 100%) !important;
    border: 1.5px solid #f59e0b !important;
    border-radius: 10px !important;
    padding: 10px 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.85) !important;
    cursor: pointer !important;
}

.mini-wood-rack span {
    font-size: 11.5px !important;
    font-weight: 900 !important;
    color: #fef08a !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 3px #000000 !important;
}

.seat-area.active-turn-seat .mini-wood-rack {
    border: 2px solid #fde047 !important;
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.95), 0 0 35px rgba(245, 158, 11, 0.65) !important;
}

/* 4 KÖŞE TAŞ ATMA (DISCARD) YUVALARI */
.discard-zone {
    position: absolute !important;
    width: 45px !important;
    height: 60px !important;
    border: 1.5px dashed rgba(251, 191, 36, 0.55) !important;
    background: rgba(0, 0, 0, 0.28) !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.dz-top-left {
    top: 52px !important;
    left: 66px !important;
}

.dz-top-right {
    top: 52px !important;
    right: 66px !important;
}

.dz-bottom-left {
    bottom: 22px !important;
    left: 66px !important;
    cursor: pointer !important;
}

.dz-bottom-right {
    bottom: 22px !important;
    right: 66px !important;
    cursor: pointer !important;
}

.discard-zone.active-draw {
    border: 2px solid #34d399 !important;
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.85) !important;
}

/* MASA ORTASI: GÖSTERGE - DESTE - BİTİR - SÜRE */
.table-center-zone {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 15 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.center-action-tray {
    background: rgba(4, 18, 10, 0.92) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.65) !important;
    border-radius: 16px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85) !important;
}

.tray-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.tray-box.clickable {
    cursor: pointer !important;
}

.tray-lbl {
    font-size: 9.5px !important;
    font-weight: 900 !important;
    color: #fde68a !important;
    letter-spacing: 0.4px !important;
}

.mini-slot {
    width: 42px !important;
    height: 56px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px dashed rgba(251, 191, 36, 0.45) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.deck-pile {
    width: 44px !important;
    height: 58px !important;
    background: linear-gradient(180deg, #fde047 0%, #f59e0b 55%, #b45309 100%) !important;
    border: 2px solid #ffffff !important;
    border-bottom: 4px solid #78350f !important;
    border-radius: 9px !important;
    color: #1c0a00 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.75) !important;
}

.finish-cup {
    width: 44px !important;
    height: 58px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1.5px dashed #f59e0b !important;
    border-radius: 9px !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.timer-circle {
    width: 44px !important;
    height: 58px !important;
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%) !important;
    border: 1.5px solid #f59e0b !important;
    border-radius: 9px !important;
    color: #fde047 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.timer-circle.urgent-5s {
    background: linear-gradient(180deg, #dc2626 0%, #7f1d1d 100%) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.95) !important;
}

/* =========================================================
   3. ISTAKA ÜSTÜ BUTONLAR (TEK SATIRDA TOPLU & ZARİF)
   ========================================================= */
.player-dock {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 100% !important;
}

.cue-controls-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.cue-btns {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
}

.btn-cue {
    flex: 1 !important;
    background: linear-gradient(180deg, #162436 0%, #09111a 100%) !important;
    color: #f8fafc !important;
    border: 1.5px solid rgba(251, 191, 36, 0.55) !important;
    padding: 6px 6px !important;
    border-radius: 10px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.65) !important;
}

.btn-cue.btn-lux-invite {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border-color: #7dd3fc !important;
    color: #ffffff !important;
}

.btn-cue.gold {
    background: linear-gradient(135deg, #fde047 0%, #d97706 100%) !important;
    color: #1c0a00 !important;
    border-color: #ffffff !important;
}

.btn-cue.danger {
    background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%) !important;
    border-color: #fda4af !important;
    color: #ffffff !important;
}

/* =========================================================
   4. BÖLMESİZ AHŞAP ISTAKA VE GERÇEKÇİ 3D OKEY TAŞLARI
   ========================================================= */
.pro-wooden-cue {
    background: linear-gradient(180deg, #5c2c10 0%, #3d1b07 48%, #4e240c 52%, #260f03 100%) !important;
    border: 2.5px solid #d97706 !important;
    border-bottom: 5px solid #1a0901 !important;
    border-radius: 14px !important;
    padding: 5px 8px 4px 8px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.9), inset 0 2px 5px rgba(253, 230, 138, 0.28) !important;
}

.my-cue-front-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 2px 10px;
    background: linear-gradient(90deg, rgba(20, 8, 2, 0.85), rgba(68, 30, 9, 0.92), rgba(20, 8, 2, 0.85));
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: 99px;
    font-size: 11px;
    color: #fde68a;
}

.my-cue-score-pill {
    background: rgba(16, 185, 129, 0.22);
    border: 1px solid #34d399;
    color: #a7f3d0;
    padding: 1px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
}

.my-cue-round-pill {
    background: rgba(245, 158, 11, 0.22);
    border: 1px solid #fbbf24;
    color: #fde047;
    padding: 1px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
}

.turn-finger-inline {
    display: inline-block;
    font-size: 14px;
    filter: drop-shadow(0 0 6px #fde047);
    animation: fingerBounce 0.65s infinite alternate ease-in-out;
}

@keyframes fingerBounce {
    0%   { transform: translateY(2px) scale(1); }
    100% { transform: translateY(-3px) scale(1.15); }
}

.cue-row-13 {
    display: grid !important;
    grid-template-columns: repeat(13, 1fr) !important;
    gap: 0px !important;
    background: linear-gradient(180deg, rgba(18, 6, 1, 0.78) 0%, rgba(42, 17, 5, 0.35) 75%, rgba(92, 44, 16, 0.5) 100%) !important;
    border-radius: 7px !important;
    padding: 3px 3px 1px 3px !important;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(251, 191, 36, 0.22) !important;
    min-height: 45px !important;
    align-items: end !important;
}

.cue-slot {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 0.5px !important;
    height: 42px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

.tile {
    width: 31px !important;
    height: 42px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf2 78%, #e6dec8 100%) !important;
    border: 1px solid #d6d3c4 !important;
    border-bottom: 4px solid #8c8573 !important;
    border-radius: 6px !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7), inset 0 1px 1px #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 3px 0 4px 0 !important;
    position: relative !important;
    user-select: none !important;
    cursor: pointer !important;
}

.cue-slot .tile {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
}

.tile.selected {
    transform: translateY(-7px) !important;
    border-color: #f59e0b !important;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.85), 0 0 10px rgba(245, 158, 11, 0.8) !important;
}

.cue-slot .tile.valid-meld-tile {
    background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 80%, #a7f3d0 100%) !important;
    border-color: #10b981 !important;
    border-bottom: 3.5px solid #059669 !important;
}

.tile-num {
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.tile.color-red .tile-num    { color: #dc2626 !important; }
.tile.color-black .tile-num  { color: #0f172a !important; }
.tile.color-blue .tile-num   { color: #0284c7 !important; }
.tile.color-yellow .tile-num { color: #d97706 !important; }
.tile.color-fake .tile-num   { color: #7c3aed !important; }

.tile-indent {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 35%, #d6d1c4 0%, #fcfaf2 80%) !important;
    box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.45) !important;
}

.tile-badge {
    position: absolute !important;
    top: 1px !important;
    right: 2px !important;
    font-size: 8px !important;
    font-weight: 900 !important;
    color: #b45309 !important;
}

.tile.flipped-kb {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.kb-back-logo {
    font-family: 'Cinzel', serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #78350f !important;
}

.cue-middle-beam {
    height: 5px !important;
    margin: 3px 0 !important;
    background: linear-gradient(90deg, #78350f, #f59e0b 50%, #78350f) !important;
    border-radius: 99px !important;
}

.cue-brand-engrave {
    text-align: center !important;
    font-family: 'Great Vibes', cursive !important;
    font-size: 14px !important;
    color: #fde68a !important;
    margin-top: 1px !important;
    text-shadow: 0 1px 2px #000000 !important;
}

/* =========================================================
   MASA ALTI SOHBET ÇUBUĞU (ARADAKİ BOŞLUK TAMAMEN KAPATILDI, MESAJ KUTUSU SOHBET YAZISINA KADAR UZATILDI)
   ========================================================= */
.premium-chat-bar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(90deg, #06150d 0%, #10301e 50%, #06150d 100%) !important;
    border: 1.5px solid #f59e0b !important;
    border-radius: 12px !important;
    padding: 5px 8px !important;
    width: 100% !important;
}

.chat-badge-tag {
    background: rgba(245, 158, 11, 0.2) !important;
    border: 1px solid #f59e0b !important;
    color: #fde68a !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Aradaki gereksiz yazı logunu gizle ki "💬 SOHBET" ile "Mesajınızı yazın..." arasında hiç boşluk kalmasın */
.premium-chat-bar .chat-log,
.lobby-chat-dock .chat-log {
    display: none !important;
}

.premium-chat-bar .chat-send {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
}

.premium-chat-bar .chat-send input {
    flex: 1 !important;
    width: 100% !important;
    height: 32px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 1px solid rgba(245, 158, 11, 0.55) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    outline: none !important;
}

.premium-chat-bar .chat-send button {
    height: 32px !important;
    padding: 0 14px !important;
    background: linear-gradient(135deg, #fde047, #d97706) !important;
    color: #1c0a00 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* =========================================================
   5. LOBİ EKRANI, MASA KARTLARI VE DİĞER MODALLAR
   ========================================================= */
.lobby-screen {
    max-width: 980px;
    margin: 0 auto;
    padding: 8px 8px 65px 8px;
}

.lobby-bar {
    background: linear-gradient(90deg, #06170e 0%, #0f2e1c 50%, #06170e 100%) !important;
    border: 1.5px solid #f59e0b !important;
    padding: 6px 7px !important;
    border-radius: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.category-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex: 1 !important;
    gap: 5px !important;
}

.cat-tab {
    height: 34px !important;
    background: linear-gradient(180deg, #162436 0%, #0b131e 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.45) !important;
    color: #cbd5e1 !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
}

#tabCatOkey.active {
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 55%, #b45309 100%) !important;
    color: #1c0a00 !important;
    border: 1.5px solid #ffffff !important;
}

#tabCat101.active {
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 55%, #881337 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid #fde047 !important;
}

.btn-refresh-3d {
    height: 34px !important;
    background: linear-gradient(135deg, #34d399 0%, #059669 55%, #064e3b 100%) !important;
    color: #ffffff !important;
    border: 1.5px solid #a7f3d0 !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.tables-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
}

.lobby-table-card {
    background: linear-gradient(165deg, #0b2618 0%, #05130b 100%) !important;
    border: 2px solid #f59e0b !important;
    border-radius: 18px !important;
    padding: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85) !important;
}

.lobby-table-card.table-101-theme {
    background:
        radial-gradient(circle at center, rgba(239, 68, 68, 0.16) 0%, transparent 70%),
        linear-gradient(165deg, #3b0a14 0%, #24070d 55%, #120307 100%) !important;
    border: 2px solid #f59e0b !important;
}

.lt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.lt-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lt-title {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 900;
    color: #fde047;
}

.status-badge-waiting { font-size: 10px; color: #cbd5e1; }
.status-badge-playing { font-size: 10px; color: #4ade80; font-weight: 800; }

.lt-actions {
    display: flex;
    gap: 4px;
}

.btn-watch-table, .btn-arrow-specs {
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid #f59e0b;
    color: #fde68a;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.lt-specs-drawer {
    display: none;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 8px;
    font-size: 11px;
}

.lt-specs-drawer.open { display: block; }
.spec-row { display: flex; justify-content: space-between; padding: 2px 0; }

.real-mini-table-wrap {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.real-mini-felt {
    width: 72%;
    height: 92px;
    background: radial-gradient(circle, #14532d 0%, #062e16 100%);
    border: 2.5px solid #d97706;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mini-table-center-logo {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 900;
    color: #fde68a;
}

.ottoman-corner {
    position: absolute;
    font-size: 10px;
    color: rgba(253, 230, 138, 0.45);
}
.ottoman-corner.tl { top: 3px; left: 5px; }
.ottoman-corner.tr { top: 3px; right: 5px; }
.ottoman-corner.bl { bottom: 3px; left: 5px; }
.ottoman-corner.br { bottom: 3px; right: 5px; }

.chair-btn {
    position: absolute;
    background: linear-gradient(180deg, #1e293b, #0f172a);
    border: 1.5px solid #f59e0b;
    color: #fde68a;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    z-index: 4;
}

.chair-btn.real-player {
    background: linear-gradient(135deg, #059669, #064e3b);
    border-color: #fde047;
    color: #ffffff;
}

.chair-bottom { bottom: 2px; left: 50%; transform: translateX(-50%); }
.chair-top    { top: 2px; left: 50%; transform: translateX(-50%); }
.chair-left   { left: 0px; top: 50%; transform: translateY(-50%); }
.chair-right  { right: 0px; top: 50%; transform: translateY(-50%); }

/* =========================================================
   6. SOHBET BALONCUKLARI, PROFİL, ÖZEL MESAJ VE ONLINE LİSTESİ
   ========================================================= */
.lobby-bubbles-stage {
    position: fixed !important;
    inset: 52px 10px 65px 10px !important;
    pointer-events: none !important;
    z-index: 160 !important;
    overflow: hidden !important;
}

.lobby-floating-bubble {
    position: absolute !important;
    padding: 8px 16px !important;
    border-radius: 99px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.85) !important;
    border: 2px solid #ffffff !important;
    max-width: 280px !important;
    animation: popAndFade3s 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;
}

.lobby-floating-bubble strong {
    color: #fde047 !important;
    margin-right: 5px !important;
}

@keyframes popAndFade3s {
    0%   { opacity: 0; transform: scale(0.4) translateY(20px); }
    12%  { opacity: 1; transform: scale(1.04) translateY(0); }
    85%  { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.85) translateY(-15px); }
}

.lobby-chat-dock {
    position: fixed !important;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 16px);
    max-width: 980px;
    height: 46px !important;
    background: linear-gradient(90deg, #06150d 0%, #10301e 50%, #06150d 100%) !important;
    border: 2px solid #f59e0b !important;
    border-radius: 14px !important;
    padding: 6px 10px !important;
    z-index: 170;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lobby-chat-dock .chat-send {
    display: flex !important;
    flex: 1 !important;
    gap: 6px !important;
    width: 100% !important;
}

.lobby-chat-dock .chat-send input {
    flex: 1 !important;
    width: 100% !important;
    height: 32px !important;
    font-size: 12px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border: 1.5px solid #f59e0b !important;
    color: #ffffff !important;
    padding: 2px 10px !important;
    border-radius: 8px !important;
    outline: none !important;
}

.lobby-chat-dock .chat-send button {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    color: #000000 !important;
    border: none !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.vip-profile-card {
    width: 100%;
    max-width: 455px;
    max-height: 91vh;
    overflow-y: auto;
    background:
        radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.22) 0%, transparent 60%),
        linear-gradient(165deg, #0d291a 0%, #06140c 60%, #030a06 100%);
    border: 2.5px solid #f59e0b;
    border-radius: 24px;
    padding: 18px;
    color: #ffffff;
    position: relative;
}

.prof-header-banner { display: flex; flex-direction: column; align-items: center; gap: 7px; padding-bottom: 12px; border-bottom: 1px solid rgba(245, 158, 11, 0.3); margin-bottom: 12px; }
.prof-avatar-ring { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; background: rgba(0, 0, 0, 0.65); border: 3px solid #f59e0b; overflow: hidden; cursor: pointer; position: relative; }
.prof-avatar-ring.has-wa-story { border: 3.5px solid #10b981 !important; outline: 2px dashed #fde047 !important; outline-offset: 3px !important; }
.prof-avatar-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoom-hint-pill { font-size: 10px; color: #fde68a; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(245, 158, 11, 0.45); padding: 3px 10px; border-radius: 99px; cursor: pointer; }
.prof-nick-title { font-family: 'Cinzel', serif; font-size: 21px; font-weight: 900; color: #fde68a; }
.prof-role-pill  { background: linear-gradient(135deg, #fde047, #d97706); color: #1c0a00; font-size: 10px; font-weight: 900; padding: 3px 14px; border-radius: 99px; border: 1px solid #fff; }

.wa-status-showcase { width: 100%; background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(6, 78, 59, 0.35) 100%); border: 1.5px solid #34d399; border-radius: 16px; padding: 11px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.wa-status-head { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 900; color: #a7f3d0; }
.wa-status-body { font-size: 13px; font-weight: 800; color: #ffffff; line-height: 1.4; }
.wa-status-img, .wa-status-video { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1.5px solid rgba(253, 230, 138, 0.45); cursor: pointer; }
.wa-status-audio-wrap { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, 0.55); padding: 6px 10px; border-radius: 10px; border: 1px solid #a855f7; font-size: 11px; font-weight: 800; color: #e9d5ff; }
.wa-status-audio-wrap audio { height: 30px; flex: 1; }

.story-social-bar { display: flex; gap: 5px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.btn-story-act { flex: 1; border: none; padding: 6px 8px; border-radius: 8px; font-size: 10px; font-weight: 900; color: #ffffff; cursor: pointer; white-space: nowrap; }
.btn-story-act.like  { background: linear-gradient(135deg, #ec4899, #be185d); }
.btn-story-act.share { background: linear-gradient(135deg, #0284c7, #0369a1); }
.btn-story-act.insta { background: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%); border: 1px solid #fde68a; }

.story-comments-list { max-height: 85px; overflow-y: auto; background: rgba(0, 0, 0, 0.45); border-radius: 9px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.sc-row { font-size: 11px; color: #f1f5f9; }
.sc-row strong { color: #fde047; }
.sc-row small  { color: #94a3b8; font-size: 9.5px; }

.story-comment-form { display: flex; gap: 5px; }
.story-comment-form input { flex: 1; height: 30px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(52, 211, 153, 0.5); border-radius: 8px; color: #fff; padding: 0 9px; font-size: 11px; }
.story-comment-form button { height: 30px; background: linear-gradient(135deg, #34d399, #059669); color: #000; border: none; padding: 0 12px; border-radius: 8px; font-size: 11px; font-weight: 900; cursor: pointer; }

.wa-status-creator-box { background: rgba(0, 0, 0, 0.5); border: 1.5px dashed rgba(52, 211, 153, 0.65); border-radius: 14px; padding: 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 7px; }
.wa-status-creator-box h5 { font-size: 11.5px; color: #6ee7b7; font-weight: 900; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; }

.prof-info-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.prof-stat-box  { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 12px; padding: 8px 6px; text-align: center; }
.prof-stat-box span   { display: block; font-size: 10px; color: #94a3b8; }
.prof-stat-box strong { font-size: 13.5px; color: #fde68a; }
.prof-bio-box { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 12px; padding: 10px; font-size: 12px; color: #e2e8f0; text-align: center; font-style: italic; margin-bottom: 12px; }
.prof-actions-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.btn-like-profile { background: linear-gradient(135deg, #ec4899, #be185d); color: #ffffff; border: 1px solid #f9a8d4; padding: 8px 13px; border-radius: 9px; font-size: 11px; font-weight: 900; cursor: pointer; }
.btn-nudge-vibrate { background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%); color: #ffffff; border: 1.5px solid #e9d5ff; padding: 8px 13px; border-radius: 9px; font-size: 11px; font-weight: 900; cursor: pointer; }

.msn-card-shake { animation: msnSafeShake 0.55s ease-in-out; }
@keyframes msnSafeShake {
    0%, 100% { transform: none; }
    15% { transform: translate(-7px, -4px); }
    30% { transform: translate(7px, 4px); }
    45% { transform: translate(-6px, 4px); }
    60% { transform: translate(6px, -4px); }
    75% { transform: translate(-4px, 2px); }
    90% { transform: translate(4px, -2px); }
}

.pm-voice-card { max-width: 500px !important; max-height: 94vh !important; }
.btn-voice-call { background: linear-gradient(135deg, #10b981, #047857); color: #ffffff; border: 1px solid #34d399; padding: 8px 11px; border-radius: 8px; font-size: 11px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.btn-voice-hangup { background: linear-gradient(135deg, #ef4444, #991b1b); color: #ffffff; border: 1.5px solid #fca5a5; padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.voice-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(16, 185, 129, 0.18); border: 1.5px solid #10b981; color: #a7f3d0; padding: 8px 12px; border-radius: 10px; font-size: 11px; font-weight: 800; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #10b981; box-shadow: 0 0 10px #10b981; display: inline-block; }

.pm-partner-tabs-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 4px 2px; border-bottom: 1px solid rgba(245, 158, 11, 0.3); }
.pm-partner-tab { background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(245, 158, 11, 0.4); color: #cbd5e1; padding: 5px 11px; border-radius: 99px; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.pm-partner-tab.active { background: linear-gradient(135deg, #10b981, #047857); border-color: #fde047; color: #ffffff; }
.pm-unread-dot { background: #ef4444; color: #ffffff; font-size: 9.5px; font-weight: 900; padding: 1px 5px; border-radius: 99px; }

.pm-messages-box { height: 350px !important; max-height: 52vh !important; overflow-y: auto; background: rgba(0, 0, 0, 0.58); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column; gap: 9px; }
.pm-line { padding: 8px 12px; border-radius: 12px; font-size: 12.5px; max-width: 86%; position: relative; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.pm-line.mine   { align-self: flex-end; background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(4, 120, 87, 0.42)); border: 1px solid rgba(52, 211, 153, 0.6); color: #ecfdf5; }
.pm-line.theirs { align-self: flex-start; background: linear-gradient(135deg, rgba(245, 158, 11, 0.24), rgba(180, 83, 9, 0.34)); border: 1px solid rgba(251, 191, 36, 0.5); color: #fef3c7; }
.pm-meta-row { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 10px; color: #cbd5e1; }
.pm-tick { font-weight: 900; font-size: 12px; letter-spacing: -2px; margin-left: 2px; }
.pm-tick.unread { color: #94a3b8; }
.pm-tick.read-blue { color: #38bdf8 !important; text-shadow: 0 0 8px rgba(56, 189, 248, 0.95); }

.pm-longpress-popup { position: absolute; top: -38px; right: 6px; background: linear-gradient(180deg, #1e293b, #0f172a); border: 1.5px solid #fde047; border-radius: 99px; padding: 3px 8px; display: flex; align-items: center; gap: 5px; z-index: 50; }
.pm-line.theirs .pm-longpress-popup { right: auto; left: 6px; }
.pm-longpress-popup button { background: transparent; border: none; font-size: 16px; cursor: pointer; padding: 2px; }
.pm-saved-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pm-react-pill { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(253, 230, 138, 0.5); padding: 1px 7px; border-radius: 99px; font-size: 11px; color: #fde68a; cursor: pointer; }

.msn-toast-popup { position: fixed; right: 12px; bottom: 58px; width: 215px; background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%); border: 1.5px solid #0284c7; border-radius: 12px; color: #0c4a6e; z-index: 350; overflow: hidden; }
.msn-header { background: linear-gradient(90deg, #0369a1, #0284c7); color: #ffffff; font-size: 10px; font-weight: 800; padding: 4px 9px; display: flex; justify-content: space-between; align-items: center; }
.msn-header button { background: transparent; border: none; color: #ffffff; font-weight: 900; font-size: 11px; cursor: pointer; }
.msn-body { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.msn-icon { font-size: 16px; }
.msn-text { font-size: 11.5px; line-height: 1.25; }

.online-users-list { display: flex !important; flex-direction: column !important; gap: 8px !important; max-height: 360px; overflow-y: auto; }
.online-user-row { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(245, 158, 11, 0.3); padding: 8px 10px; border-radius: 10px; gap: 6px !important; }
.ou-info { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: #fde68a; cursor: pointer; }
.ou-room-tag { font-size: 10px; color: #86efac; font-weight: 600; }
.ou-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.btn-ou { border: none; padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; cursor: pointer; color: #ffffff; }
.btn-ou.invite { background: #0284c7; }
.btn-ou.friend { background: #059669; }
.btn-ou.pm     { background: #d97706; color: #000000; }
.btn-ou.block  { background: #dc2626; }

.prof-insights-panel { margin-top: 12px; background: rgba(0, 0, 0, 0.55); border: 1.5px solid rgba(245, 158, 11, 0.45); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.insight-block h5 { font-size: 11px; color: #fde68a; margin-bottom: 5px; }
.insight-badges { display: flex; flex-wrap: wrap; gap: 5px; max-height: 75px; overflow-y: auto; }
.visitor-pill { background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(16, 185, 129, 0.5); color: #ecfdf5; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; cursor: pointer; }
.liker-pill { background: rgba(236, 72, 153, 0.22); border: 1px solid rgba(244, 114, 182, 0.6); color: #fce7f3; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; cursor: pointer; }

.photo-lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 450; display: flex; align-items: center; justify-content: center; padding: 18px; }
.photo-lightbox-box { position: relative; max-width: 360px; width: 100%; background: #07170f; border: 3px solid #f59e0b; border-radius: 22px; padding: 12px; text-align: center; }
.photo-lightbox-box img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 14px; }
.lightbox-close { position: absolute; top: -12px; right: -12px; background: #dc2626 !important; border: 2px solid #ffffff !important; width: 32px !important; height: 32px !important; }
.lightbox-caption { margin-top: 8px; font-family: 'Cinzel', serif; font-size: 15px; font-weight: 900; color: #fde68a; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 250; display: flex; align-items: center; justify-content: center; padding: 12px; }
.modal-card { width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; background: #081c12; border: 2px solid #f59e0b; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; color: #fde68a; }
.btn-close  { background: rgba(255, 255, 255, 0.12); color: #ffffff; border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-weight: 900; }
.vip-plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vip-plan-box   { background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(245, 158, 11, 0.45); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.vip-plan-box.special { background: rgba(16, 185, 129, 0.15); border-color: #10b981; }
.vp-title { font-size: 12px; font-weight: 800; color: #fde68a; }
.vp-price { font-size: 18px; font-weight: 900; color: #ffffff; }
.vip-plan-box small { font-size: 10px; color: #94a3b8; }
.form-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.form-row input, .form-row select { flex: 1; background: #04100a; border: 1px solid rgba(245, 158, 11, 0.45); color: #ffffff; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.btn-gold, .btn-gold-full { background: linear-gradient(135deg, #fbbf24, #d97706); color: #000000; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 900; font-size: 12px; cursor: pointer; }
.btn-gold-full { width: 100%; padding: 10px; }
.owner-banner { background: rgba(16, 185, 129, 0.18); border: 1px solid #10b981; color: #a7f3d0; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; }
.admin-block  { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.admin-block h4 { font-size: 12px; color: #fde68a; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.user-tag { background: rgba(245, 158, 11, 0.2); border: 1px solid #f59e0b; padding: 3px 8px; border-radius: 99px; font-size: 11px; display: flex; align-items: center; gap: 5px; }
.user-tag button { background: transparent; border: none; color: #f87171; font-weight: 900; cursor: pointer; }
.btn-danger-full { background: linear-gradient(135deg, #ef4444, #991b1b); color: #ffffff; border: none; padding: 9px; border-radius: 8px; font-weight: 800; cursor: pointer; width: 100%; }
.treats-grid-25 { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 7px; }
.treat-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.treat-emoji { font-size: 20px; }
.treat-title { font-size: 10px; font-weight: 700; text-align: center; }
.treat-tag { font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 99px; }
.treat-tag.free { background: #10b981; color: #000000; }
.treat-tag.vip  { background: #f59e0b; color: #000000; }