html, body {
    /* Sondakı Noto şriftləri — niklərdəki xüsusi simvollar üçün ehtiyat (index.html-də qoşulur). */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Math", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Javanese", "Noto Sans Egyptian Hieroglyphs", "Noto Sans Canadian Aboriginal", "Noto Sans Cherokee", "Noto Sans Balinese", "Noto Sans Tai Viet", "Noto Sans Vai", "Noto Sans Runic", "Noto Sans Tifinagh", "Noto Sans Ethiopic", "Noto Sans Old Italic", "Noto Sans Gothic", "Noto Sans Glagolitic", "Noto Sans Coptic", "Noto Sans Linear B", "Noto Sans Bamum", "Noto Sans Lisu", "Noto Sans Ol Chiki", "Noto Sans Mongolian", "Noto Sans Georgian", "Noto Sans Armenian", "Noto Sans Thai", "Noto Sans Lao", "Noto Sans Khmer", "Noto Sans Myanmar", "Noto Sans Sinhala", "Noto Sans Tamil", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Sans";
    font-size: 14px;
    padding: 0;
    margin: 0;
    color: #333;
	line-height: 20px;
    overflow: hidden;
}


#root, #splash-root, body, html {
    height: 100%;
    width: 100%;
}


.youtube-player,
.youtube-player > div,
.youtube-player iframe{
    width:100% !important;
    height:100% !important;
}
/* sağdan çıxır */
@keyframes toastInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* sola yığılır və yox olur */
@keyframes toastOutLeft {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(-30px) scale(0.7);
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes shake {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  25% { transform: translate(-50%, -50%) rotate(3deg); }
  50% { transform: translate(-50%, -50%) rotate(-3deg); }
  75% { transform: translate(-50%, -50%) rotate(2deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes flash {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}


@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}


* {
  -webkit-touch-callout: default;
  user-select: text !important;
}

/* ===================================================================
   iOS-da YAZI SAHELERI
   ===================================================================
   Problem: bezi iPhone-larda butulka oyununda ve canli yayimda
   inputa toxunanda klaviatura acilmir / kursor gorunmur.

   Sebeb: yuxaridaki qayda yalniz STANDART `user-select`-i qaytarir.
   iOS Safari / WKWebView ise `-webkit-user-select`-e baxir. Ana
   qablarda (`.bottle`, `.message`) `-webkit-user-select: none` var ve
   o, `<input>`-a IRSEN kecir — iOS-da bu, kursoru ve yazmagi tamamile
   bloklayir (Android/masaustu Chrome-da bele olmur, ona gore problem
   "yalniz bezilerinde" gorunurdu).

   Ona gore burada form elementleri ucun HEM prefiksli, HEM standart
   variant acilir. */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  /* `touch-action: none` olan qablarin icinde toxunuw fokusu
     udulurdu — `manipulation` toxunuwu buraxir, amma ikiqat
     toxunuwla zoom-u sondurur. */
  touch-action: manipulation !important;
  pointer-events: auto !important;
}

.message {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.tw-animate-slideUp {
  animation: slideUp 0.25s ease-out;
}

.tw-overflow-x-auto {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* iOS üçün */
}


.swal2-container {
  z-index: 999999 !important;
}

.tw-scrollbar-none::-webkit-scrollbar {
  display: none;
}
.tw-scrollbar-none {
  scrollbar-width: none;
}


html, body, #root {
  font-family: system-ui;
}

/* Progress animation */
@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}

/* Mobile keyboard fix */
input, textarea {
  outline: none;
}

/* Hide scrollbar */
::-webkit-scrollbar {
  display: none;
}



h3 {
    margin: 0px 2px;
    cursor: pointer;
    padding: 4px;
    font-weight: bold;
    color: #E91E63;
    background: rgb(247, 245, 247);
    border-radius: 10px;
    font-size: 12px;
}


.rsize {
	position: relative;
    min-width: 305px;
    margin: 0 auto;
    background: #141212;
    max-width: 550px;
    width: 100%;
    text-align: center;
    height: 100dvh; 
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.live-item .menu-icon img {
  width: 25px !important;
  height: 30px !important;
  cursor: pointer;
  margin-left: 5px;
}


.installButton {
    background-color: #009688;
    color: #ffffff;
    padding: 7px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    flex: 0.3;
    margin-right: 20px;
    cursor: pointer;
}

.livePpage {
margin-top: 40px;	
overflow: hidden;
}

.tw-bottom-shadow {
  box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
}


.live-item {
    display: flex;
    padding: 5px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgb(204, 204, 204);
    margin-bottom: 10px;
    transform: scale(1);
    flex-direction: row;
    align-items: center;
    background: #607D8B;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
    color: rgb(156, 39, 176);
    transition: transform 0.2s, box-shadow 0.2s;
    max-width: 90%;
    text-align: center;
    margin: 10px auto;
}


.ust_line {
    box-shadow: 0 1px 9px rgba(0, 0, 0, .5);
}

.bar {
    background: linear-gradient(-45deg, #ca4246, #3d4351, #ca4246, #3e4140);
    background-size: 400% 400%;
    animation: gradient 15sease infinite;
    color: #fff;
    padding: 5px;
    position: relative;
    z-index: 0;
}

.highlight {
    font-weight: bold;
    color: #0259bd;
    background: #e7e7e7;
    padding: 2px 7px;
    border-radius: 7px;
}



.absolute {
    height: 45% !important;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
	background-color: #0000001f;
}


.bottom-container {
    left: 50% !important;
    max-width: 550px !important;
    position: fixed !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
}


.bottom-container {
    bottom: 0 !important;
}

.bottom-container {
    height: auto;
    width: 100%;
    z-index: 16;
}

/* Domino aktiv olduqda ekranı dinamik bölmək üçün */
.main-content.domino-mode {
    height: auto !important;
    flex: 6 !important;
}

.bottom-container.domino-mode {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 4 !important;
    height: 100% !important;
}

/* 🃏 Durak: masaya (əl + düymələr) daha çox yer — 7 : 3 */
.main-content.domino-mode.durak-mode {
    flex: 7 !important;
}
.bottom-container.domino-mode.durak-mode {
    flex: 3 !important;
}


/* ==================================================
   🔥 VIP DOMİNO OYUN MASASI (TAXTALI VƏ MƏXMƏRİ FON)
===================================================== */

.container-app.domino-premium-bg {
    /* Əsas məxməri tünd zümrüd (oyun masası) rəngi */
    background-color: #0d4027 !important; 
    
    /* 
      1. Mərkəzi işıq (spotlight) və kənarlara doğru qaranlıq
      2 & 3. Məxmər teksturası yaradan incə çarpaz xətlər (CSS noise/felt effekti)
    */
    background-image: 
        radial-gradient(circle at 50% 40%, rgba(26, 188, 116, 0.3) 0%, rgba(8, 61, 37, 0.8) 60%, rgba(2, 22, 12, 0.95) 100%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 2px, transparent 2px, transparent 4px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 2px, transparent 2px, transparent 4px) !important;
    
    background-size: cover, 60px 60px, 60px 60px !important;
    background-position: center !important;
    
    transition: background 0.6s ease-in-out, box-shadow 0.6s ease-in-out !important;
}

/* Chat paneli masanın ruhunu pozmasın deyə ona da yüngül gradient və duman effekti (blur) veririk */
.domino-premium-bg .bottom-container {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 60%, transparent 100%);
    border-radius: 20px 20px 0 0;
    backdrop-filter: blur(3px); /* Arxasındakı masanı yüngülcə bulandırır */
    padding-bottom: env(safe-area-inset-bottom); /* İOS üçün alt boşluq */
}

/* Header (Üst panel) taxta kənara yapışmasın deyə azca aşağı çəkirik */
.domino-premium-bg .videoHeader {
    top: 0px !important;
    /* Oyunda da yan boşluq kiçik — əvvəl 15px idi və düymələr sığmayıb ikinci sıraya düşürdü */
    padding: 4px 6px !important;
}

@supports (padding-bottom:env(safe-area-inset-bottom)) {
    .bottom-container {
        bottom: env(safe-area-inset-bottom, 0);
    }
}
@media (max-width: 768px) {
    .bottom-container {
        gap: 5px;
    }
}
.chat-area, .bottom-container {
    display: flex;
    flex-direction: column;
}
.chat-container {
    background: none;
    bottom: 0;
    gap: 5px;
    position: absolute;
    z-index: 3;
}


.videoHeader {
    background: rgb(255 255 255 / 0%);
    padding: 3px 0px;
    justify-content: space-between;
    height: 50px;
    color: white;
    display: flex;
    font-size: 14px;
    top: 0;
    width: 100%;
    z-index: 9990;
    max-width: 550px;
    position: relative;
    flex-direction: row;
    align-items: center;
}

@media (max-width: 480px) {
    .videoHeader {
        padding: 4px 6px;
    }
}
@media (max-width: 768px) {
    .videoHeader {
        padding: 4px 8px;
    }
}

.videoHeader {
    align-items: center;
    background-color: #00000080;
    display: flex;
    height: 50px;
    justify-content: space-between;
    padding: 4px 8px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 16;
}

.main-content .video_flex {
    flex: 1;
    position: relative;
    padding-top: 1px;
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.main-content {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
    flex-grow: 1;
    min-height: 0;
    margin-top: 60px;
    height: calc(-60px + 100vh);
    flex-direction: column;
	z-index: 4;
}


.fixed-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    height: 40px;
}

.events{
	width:100%;
	border-collapse:collapse;
	border-spacing:0
	}
	
.events td{
	border-left:1px solid #fff
	}

.events td:first-child{
	border-left:none
	}

.events td a{
	display:block;
	text-align:center;
	padding: 9px 13px;
	cursor:pointer
	}

.events td.main.f3{
	font-weight:700;
	text-align:center;
	min-width:100px
	}
	@media only screen and (min-width:650px){
		.events td.main.f3{
			min-width:140px
			}
			}

.menu{border:1px solid #D2D2D2;box-shadow:none;border-top:none;background:#FFFFFF;padding:8px 8px 6px 6px}
.events a 
span{border-radius:2px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.7);background-color:#dc0d17;background-image:-webkit-linear-gradient(top,#fa3c45 0,#dc0d17 100%);color:#fff;min-width:6px;padding:1px 2px;text-shadow:0 -1px 0 rgba(0,0,0,.4);-webkit-background-clip:padding-box;display:inline-block;font-size:9px;-webkit-font-smoothing:subpixel-antialiased;line-height:normal;position:absolute;margin-left:-5px}


.line-menu {
    background: #cd5555;
    padding: 8px;
    border-left: 1px solid #D3E0D0;
    border-right: 1px solid #D3E0D0;
    color: #ffffff;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid #C1C1C1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.line-menu p {
flex: 1;
width: 100%;	
}

.menu-border {
    background: #EAEAEA;
    padding: 0 5px;
}

.menu {
    border: 1px solid #D2D2D2;
    box-shadow: none;
    border-top: none;
    background: #FFFFFF;
    padding: 8px 8px 6px 6px;
  height: 100vh;  /* Ekranın tam hündürlüyü */
  align-items: center;  
  justify-content: center;  
  background-color: #f0f0f0; /* Arxa fon üçün */
}

#ileft {
    text-align: left;
    padding-bottom: 50px;
    position: relative;
	font-size: 14px;
}

.live-button-container {
  position: fixed;
  bottom: 20px; /* Yəni ekranın altından 20px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000; /* Digər elementlərin üzərində olmaq üçün */
}

.live-button {
    background-color: #9C27B0;
    color: white;
    padding: 9px 14px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.live-button:hover {
  background-color: #d32f2f;
}

.blur_video {
    width: 100%;
    height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  z-index:9;
}


.overlay_msg {
    color: #e7e2e2;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    flex-direction: column;
    justify-content: center;
	z-index:9999;

}

.overlay_msg h1{
 font-size: 22px;
 margin: 5px;
}

#chat_and_gift {
	 flex: 1; 
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100vh;
    scroll-behavior: smooth;
    background: transparent;
    position: relative;
    margin: 0 auto;
	z-index: 99;
	width: 100%;
	padding-bottom: 50px;
}


.message.myMsg {
    align-self: flex-start; /* Başqa istifadəçinin mesajı sol tərəfə düzülür */
}

.message.myRply {
    align-self: flex-start; /* Başqa istifadəçinin mesajı sol tərəfə düzülür */
}


.message.usMsg {
    align-self: flex-start; /* Başqa istifadəçinin mesajı sol tərəfə düzülür */
}

.message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 2px 5px;
    border-radius: 8px;
    width: fit-content;
    clear: both;
    background: #61616124;
    color: white;
    font-size: 12px;
}

.chat-joined-user,
.chat-messages,
.stream-start-footer {
    max-width: 550px;
    width: 100%;
}

.chat-messages {
    height: calc(var(--app-height) / 100 * 35 - 50px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    contain: paint;
    box-sizing: border-box;
    color: #fff;
    font-size: .9rem;
    padding: 12px;
    width: 100%;
    background: transparent;
}

.chat-messages,
.chat-container {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .chat-messages {
        padding: 6px;
    }
}

form {
    flex: 1;
    display: flex;
    align-items: center;
}

input[type="text"] {
    flex: 1 1;
}

input[type="submit"] {
    margin-left: 10px;
    padding: 5px 10px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
}

 form .sendBtn {
	margin-left: 10px;
    margin-right: 15px;

}

.loading_liveStart {
   width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgb(41 38 38 / 80%);
    flex-direction: column;
    z-index: 99999;
}



.error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #121212;
  color: #ffffff;
  text-align: center;
}

.error-title {
  font-size: 48px;
  font-weight: bold;
  color: #ff4d4d;
}

.error-message {
  font-size: 20px;
  margin-top: 10px;
  color: #bbbbbb;
}

.error-back-btn {
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 18px;
  color: white;
  background-color: #ff4d4d;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.error-back-btn:hover {
  background-color: #cc0000;
}

 .resize #license {
    position: fixed;
    bottom: 0px;
    padding: 0px 5px;
    background: rgb(239 225 225 / 12%);
    width: 100%;
}



.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Arial', sans-serif;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; /* Yalnız şaquli kaydırma */
}

.form-container {
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}


.input-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.input-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
  text-align: left;  /* Label'ı sola düzürük */
}

.select-field {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: auto;  /* Genişliyi avtomatik tənzimləmək */
  max-width: 250px; /* Genişliyi müəyyənləşdirmək */
  margin-bottom: 10px; /* Aralıq yaratmaq */
}

.input-group select {
  margin-top: 5px;
}

.input-field:focus {
  border-color: #0077ff;
  background-color: #e8f4ff;
}

.file-input {
  display: block;
  margin: 10px 0;
}

/* Şəkil preview üçün tərtibat */
.image-preview {
  margin-top: 10px;
  position: relative;
}

.image-preview img {
  max-width: 100%;
  max-height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ddd;
}

.remove-image-btn {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.remove-image-btn:hover {
  background-color: darkred;
}

.no-image {
  color: gray;
  font-size: 14px;
}

.select-field {
  padding: 8px;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}



.back-btn {
  background: linear-gradient(45deg, #2ecc71, #27ae60);  /* Yaşıl tonları ilə gradient */
  color: white;
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;  /* Keçid effekti */
}

.back-btn:hover {
  background: linear-gradient(45deg, #27ae60, #2ecc71);  /* Hover zamanı əks keçid */
  transform: scale(1.05);  /* Hover zamanı böyütmə effekti */
}


.button-group {
  position: fixed;  /* Sabitləşdiririk */
  bottom: 20px;     /* Ekranın altından 20px məsafə */
  left: 50%;        /* Ekranın ortasında yerləşdirmək */
  transform: translateX(-50%);  /* Tam ortalamaq üçün */
  display: flex;
  gap: 15px;        /* Düyümlər arasında boşluq */
}

.start-btn, .back-btn {
  padding: 12px 20px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.start-btn {
  background-color: #f44336;
  color: white;
}

.start-btn:hover {
  background-color: #d32f2f;
}

.back-btn {
  background-color: #009688;
  color: white;
}

.back-btn:hover {
  background-color: #757575;
}

 .local-name img {
    vertical-align: middle;
    border: 0px;
    margin-right: 1px;
    margin-left: 5px;
}


img {
    vertical-align: middle;
    border: 0px;
    margin-right: 3px;
}

.container-app, .layout-content {
    box-sizing: border-box;
    overflow-y: auto;
}

.container-app {
    align-items: flex-start;
    background-color: #000;
    display: flex;
    font-family: Poppins, sans-serif;
    height: 100vh;
    justify-content: center;
    margin: 0;
    padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 60px);
    width: 100vw;
	z-index: 20;
}


.layout-content {
    margin: 0 auto;
    max-width: 550px;
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
    width: 100%;
}

@supports (padding:env(safe-area-inset-top)) {
    .stream-container {
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        padding-top: env(safe-area-inset-top, 0) !important;
    }
}
.stream-container {
    bottom: 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
    left: 0 !important;
    margin: 0 auto !important;
    max-width: 550px !important;
    overflow: hidden !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
	padding: 0!important;
    color: #fff;
    display: flex;
    flex-direction: column;

}





	.container-header, .container-coin, .container-lives{
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
	}

	.live{
		border-top: 2px solid #ffae00;
		background: red;
		padding: 8px 10px;
		border-radius: 3px;
		display: block;
	}
	.coin-balance{
		border-top: 2px solid #ffae00;
		background: blue;
		padding: 5px 4px;
		border-radius: 5px;
	}
	.lives{
		border-top: 2px solid #ffae00;
		background: yellow;
		padding: 5px 4px;
		border-radius: 3px;
		color: black;
	}
	.container-lives{
		padding: 3px 0;
	}
	a{
		text-decoration: none;
		color: white;
	}
	.info_message{
		display: block;
		background: #333131;
		padding: 8px 0;
		color: #ffdd00;
		text-align: left;
		padding-left: 10px;
	}
	.warning_message{
		display: block;
		background: #333131;
		padding: 8px 0;
		color: red;
		padding-left: 10px;
		display: none;
	}
	.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: DodgerBlue;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 56;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.container-live_settings{
	display: flex;
}
.container-live_settings > div{
	width: 50%;
}

.video_position_real {
  flex: 1; 
  background-color: #ffffff00; 
  display: none;
  justify-content: center;
  align-items: center;
  height: 100%; 
  position: relative;
}


.video_position_real.peka {
    height: 50% !important;
	display: flex;
}

.video_position_real video {
  height: 100% !important;
  width: 100% !important;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  object-fit: cover;
  background: #000000bd;
}


	
.video-src1, .video-src2 {
  height: 100% !important;
  width: 100% !important;
  
    object-fit: cover;
    z-index: 2;
    position: absolute;
    left: 0%;
    top: 0%;
    opacity: 0.8;
}

.change_media {
    background: #837d83a6;
    border-radius: 5px;
    display: block;
    padding: 5px;
    position: absolute;
    width: auto;
    z-index: 99;
    margin: 0 auto 2px auto;
}


#local-video-src, #remote-video-src {
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
}
      .change_media2{
      	position: absolute; bottom: 30px; width: 100%; z-index: 11; left: 10px;
      }
      .change_media_in, .change_media_in2{
      	width: 100%; display: flex;
      }




   
      .margin_left_10{
      	margin-left: 10px;
      }

      .chat_gift_users_list{
      	padding: 15px 0; background: black;display: flex;justify-content: space-between;border-bottom: 0.5px solid white;
      }

      .chat_gift_users_list_in{
      	margin: 0 10px;background: #f1e6e6;padding: 10px 10px;border-radius: 10px;font-size: 13px;font-weight: 600;cursor: pointer;
      }
      .chat_gift_users_list_in_image{
      	border-radius: 10px; vertical-align: text-bottom;
      }
      ::-webkit-scrollbar {
			    display: none;
			}
			.button_accept{
				padding: 8px 9px;
		    background: green;
		    color: white;
		    border: none;
		    font-weight: 600;
		    cursor: pointer;
		    margin: 5px 5px;
			}
			.button_reject{
				padding: 8px 9px;
		    background: #c71717;
		    color: white;
		    cursor: pointer;
		    font-weight: 600;
		    border: none;
		    margin: 5px 5px;
			}
			
/* 1. İNPUTLARIN NORMAL (STANDART) VƏZİYYƏTİ */
input[type=text], 
input[type=password],  
input[type=email], 
input[type=number], 
select {
    width: 90%;
    padding: 8px 12px; /* Bir az genişlətdik ki, daha səliqəli görünsün */
    margin: 5px;
    display: inline-block;
    border: 1px solid #ccc;
    background-color: #B0BEC5; /* Normal halda tam ağ və təmiz arxa fon */
    color: #222222; /* Normal halda tünd oxunaqlı yazı */
    box-sizing: border-box;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease-in-out; /* Rənglərin səlis keçməsi üçün çox vacibdir! */
}

/* 2. İNPUTUN ÜZƏRİNƏ VURANDA (FOCUS) - NEON EFFEKTİ */
input[type=text]:focus, 
input[type=password]:focus,  
input[type=email]:focus, 
input[type=number]:focus, 
select:focus {
    background-color: #0b1221; /* Vuranda arxa fon tündləşir */
    color: #22d3ee; /* Yazının rəngi Neon Mavi olur */
    border: 1px solid #22d3ee; /* Çərçivə Neon Mavi olur */
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.5), inset 0 0 5px rgba(34, 211, 238, 0.2); /* Çöldən və içdən parıltı (Neon Glow) */
    outline: none; /* Brauzerin standart eybəcər qara/göy xəttini ləğv edir */
}

/* 3. İNPUTUN İÇİNDƏ YAZINI SEÇƏNDƏ (HIGHLIGHT) RƏNGİ DEYİŞSİN */
input::selection {
    background-color: #22d3ee;
    color: #0b1221;
}

/* 4. DÜYMƏNİN DİZAYNI */
input[type=submit] {
    width: 90%;
    padding: 10px 15px;
    margin: 10px 0;
    border: none;
    border-radius: 10px;
    background-color: #38bdf8;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

input[type=submit]:hover {
    background-color: #0ea5e9;
    box-shadow: 0 5px 15px rgba(14, 165, 233, 0.4);
    transform: translateY(-1px); /* Üzərinə gələndə cüzi yuxarı qalxır */
}

#live-list {
    max-height: 100vh;
    overflow-y: auto;
    padding: 10px;
    padding-bottom: 100px;
    box-sizing: border-box;
    background: #131414;
    height: 100vh;
}


.disableSelection{
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
outline: 0;
}

.local-name {
  font-weight: 600;
  padding: 2px;
  margin: 1px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 9;
  color: #3F51B5
}

.remote-name{
	background: blue;
    padding: 2px 11px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 16px;
	z-index: 9;
}

.bottom_abs{
	position: absolute;
	bottom: 5px;
	
}


.custom-chat-and-gift {
  background: black;
  position: relative;
  display: block;
}

/* Animasiya üçün CSS */
.modal-enter {
  opacity: 0;
  transform: translateY(100%);
}

.modal-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
}

.modal-exit {
  opacity: 1;
  transform: translateY(0);
}

.modal-exit-active {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
}


.modal {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #232425;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 9993;
    min-height: 350px;
    max-width: 550px;
    height: 50%;
    border-radius: 10px 10px 0px 0px;
    flex-direction: column;
}

.modal.open {
  transform: translateY(0); /* Modal yuxarıya hərəkət edir */
}


/* Modal açıldıqda */
.modal-enter {
  transform: translateY(100%);
}


/* Başlıq */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.title {
    font-size: 18px;
    font-weight: bold;
    color: blanchedalmond;
}

/* Bağlama düyməsi */
.closeButton {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    background: #acb1b1;
    border-radius: 10px;
    padding: 5px;
    font-size: small;
    color: #002d33;
}

.userRow {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin: 20px 20px 10px 10px;
    background: #607D8B;
    padding: 5px;
    border-radius: 20px;
    color: gold;
}

.userImageContainer {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  margin-left: 5px;

  display: flex;
  align-items: center;     /* vertikal ortala */
  justify-content: center; /* horizontal ortala */
}


.user-score {
  max-width: 550px;  /* Maksimum genişlik 550px olacaq */
  overflow: hidden;  /* Genişlikdən artıq olan hissə gizlədilir */
}

.userName {
    font-size: 14px;
    margin-left: 5px;
    margin-right: 20px;
    text-align: left;
	}

/* Dəvət et düyməsi */
.inviteButton {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 5px;
}

/* Modal boş mesajı */
.emptyMessage {
    font-size: 16px;
    color: #888;
    text-align: center;
    height: 100%;
    margin-top: 20px;
}

.userListContainer {
    max-height: 45vh; /* Ekranın yarısı qədər hündürlük */
    overflow-y: auto; /* Dikey sürüşdürmə */
    width: 100%;
}

.giftListContainer {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 6px;
    max-height: 40vh;
    overflow-y: auto;
}


.userProfile {
    display: flex;
    align-items: center;
    padding: 2px;
    background-color: rgb(181 177 177 / 99%);
    border-radius: 10px;
    position: relative;
    left: 5px;
    z-index: 10;
}

.userAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 2px;
  
}

.userInfo {
    display: flex;
    flex-direction: column;
    padding: 0 5px;
}

.userNames {
    display: block;
    align-items: center;
    font-size: 14px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	    color: #0f6eb9;
}

.micIcon {
  width: 14px;
  margin-left: 5px;
}

.likes {
  display: flex;
  align-items: center;
}

.likeIcon {
  width: 13px;
  height: 13px;
  margin-right: 4px;
}

.likeCount {
    font-size: 12px;
    color: #673AB7;
}

.giftCard {
    width: 40px;
    border-radius: 15px;
    padding: 5px;
    text-align: center;
    position: relative;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px;
}

.giftCard:hover {
  transform: translateY(-5px);
}

/* Gift Image */
.giftImageContainer {
  margin-bottom: 6px;
}

.giftImage {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

/* Gift Info */
.giftInfo {
    padding: 10px;
    display: flex;
    flex-direction: row;
}

.giftName {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.giftCoins {
  font-size: 12px;
  color: #888;
}

.giftListContainers {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    top: 30%;
}

.giftContainer {
    background-color: rgb(77 71 71 / 75%);
    color: white;
    padding: 10px;
    border-radius: 20px;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: slideIn 1s ease-out;
	z-index: 
}


.hediyye {
    font-weight: bold;
    margin-right: 7px;
    color: #ffffff;
    margin-right: 15px;
}

.giftContainer img {
  max-width: 35px !important;
  max-height: 35px !important;
  vertical-align: middle;
  object-fit: contain;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateY(0);
  }
}




.gift-amount {
  font-size: 14px;
  color: #ffcc00;  /* Sayı vurğulamaq üçün sarı rəng */
}

.pk-match-container {
    flex: 0;
    display: flex;
    font-family: Arial, sans-serif;
    width: 100%;
    position: relative;
    max-width: 550px;
    height: 20px;
}

.user-score {
  width: 100%; 
  text-align: left;
}

.bonuce {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.3s ease;
    right: -10px;
    height: 35px;
}

.match-timer {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    color: #333;
    background-color: #eddbdb;
    padding: 5px 10px 2px 10px;
    border-radius: 0px 0px 10px 10px;
    font-weight: 700;
    border: 0.5px solid #e38282;
    z-index: 9999;
}

.user-xal {
    font-weight: bold;
    color: white;
    font-size: 13px;
    margin-left: 7px;
    margin-right: 7px;
  transition: left 0.3s ease, right 0.3s ease; /* Hər iki tərəf üçün keçid təyin edin */
}



.startPKBtn {
    margin-right: 10px !important;
    margin-left: 10px !important;
    background-color: #fff4f4 !important;
}





.message-header {
  display: flex;
  align-items: center;
}

.userImage {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.user-name {
  font-weight: bold;
margin-right: 7px;
}

.message-content {
  font-size: 14px;
}


/* 3 nöqtə düyməsinin vertikal düzülüşü */
.three-dots-button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    margin-right: 10px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #2196F3;
    border-radius: 50%;
    margin: 1px 0;
}

/* Hover zamanı düymənin rəngini dəyişdiririk */
.three-dots-button:hover .dot {
  background-color: #333;
}

.popup-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 18%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.popup {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
}

.popup-header {
  font-size: 18px;
  margin-bottom: 10px;
}

.popup-body {
  margin-bottom: 20px;
}

.popup-footer {
  display: flex;
  flex-direction: column;  /* Düymələri şaquli düz */
  gap: 10px;  /* Düymələr arasında məsafə */
  align-items: center;
}

.popup-footer-buttons button {
    padding: 10px;
    background-color: #0e7ed7;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    max-width: 120px;
    margin-bottom: 7px;
}

.popup-footer-buttons button:hover {
  background-color: #0b5fa7;
}

.gift_video {
    position: fixed;
    z-index: 5;
    /* Hədiyyə videosu tam ekrandır — altdakı çat / düymələr işləsin. */
    pointer-events: none;
    background: transparent;
    margin: 0 auto;
    justify-content: center;
    align-items: flex-end;
    display: flex;
    overflow: hidden;
    width: 100%;
    max-width: 550px; /* 📌 Maksimum en 500px */
    height: 100%;
    right: 0;
    bottom: 0;
    left: 0;

}

.gift_video_inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.gift_video_inner video {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: absolute;
    left: 0;
    right: 0;
	bottom: 0;

}

/* 🫧 Şəffaf video hədiyyə (sol rəng | sağ maska): video gizli oynayır,
   görüntü kətanda — `utils/alphaVideo.js`. */
.gift_video_inner video.gift-alpha-src { opacity: 0; }
/* TikTok kimi TAM EKRAN: kənarlarda boşluq qalmır (`cover`). Videonun
   nisbəti ekrandan fərqlidirsə yanlardan bir az kəsilir — orası adətən
   şəffaf fondur. Kadr 80vh-ə sıxılmır (TiktokLive → maxHeight none). */
.gift_video_inner canvas.gift-alpha {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


.guest_count {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    align-self: center;
    background: #e5dede;
    padding: 5px;
    border-radius: 10px;
    margin-right: 5px;
    margin-left: 5px;
	position: relative;
}

.sendComboButton {
  background-color: #2196F3;
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
}

.sendComboButton:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.invite-container {
	position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(255, 255, 255);
    padding: 15px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px;
    text-align: center;
	z-index: 9994;
	
}


.chat-divider {
    background-color: #fff6;
    height: 1px;
    margin: 0;
    width: 100%;
}


@media (max-width: 480px) {
    .chat-joined-user {
        font-size: .75rem;
    }
}
@media (max-width: 768px) {
    .chat-joined-user {
        font-size: .8rem;
    }
}

.chat-joined-user {
    font-size: 0.85rem;
    line-height: 1.2;
    align-items: center;
    box-sizing: border-box;
    color: #f5f4f7;
    overflow-y: auto;
    padding: 0px 8px;
    width: 100%;
    font-weight: bold;
    background: #607d8bb5;
    padding: 5px 15px;
    width: 40% !important;
    margin-left: 10px;
    border-radius: 10px;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 91%);
    display: flex
;
    justify-content: center;
    align-items: center;
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #ffffff;
  border-top: 5px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-text {
  color: white;
  margin-top: 10px;
  font-size: 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.stream-pk-connect {
    font-weight: 200;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #9b9b9b42;
    margin: 0px 5px;
    padding: 2px 3px;
    border-radius: 5px;
    color: #ffffff;
}




}
@media (max-width: 480px) {
    .chat-footer {
        gap: 4px;
        padding: 2px 4px 5px;
    }
}

@media (max-width: 768px) {
    .chat-footer {
        gap: 6px;
        padding: 2px 6px 5px;
    }
}
.chat-footer {
    align-items: center;
    display: flex;
    gap: 8px;
    padding: 2px 8px 5px;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 22;
    background: #1414140;
}


.heart-container {
  position: fixed;
  bottom: 60px; /* Mesaj inputun üstündə qalsın */
  right: 35px;
  pointer-events: none;
  z-index: 1000;
}

.heart {
  position: absolute;
  font-size: 24px;
  animation: flyUp 2s ease-out forwards;
  opacity: 0.9;
}

@keyframes flyUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-60px) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-120px) scale(0.8);
    opacity: 0;
  }
}



.flying-heart {
  position: fixed;
  z-index: 1000;
  font-size: 24px;
  pointer-events: none;
}



@media (max-width: 480px) {
    .videoBody-guests {
        gap: 8px;
        right: 5px;
        top: 52px;
    }
}
@media (max-width: 768px) {
    .videoBody-guests {
        gap: 10px;
        right: 5px;
        top: 54px;
    }
}
.videoBody-guests {
    display: flex
;
    flex-direction: column-reverse;
    gap: 12px;
    position: absolute;
    right: 10px;
    top: 60px;
    z-index: 99;
}



@media (max-width: 480px) {
    .videoBody-guest-container {
        height: 60px;
        width: 60px;
    }
}
@media (max-width: 768px) {
    .videoBody-guest-container {
        height: 70px;
        width: 70px;
    }
}

.videoBody-guest-container {
    background-color: #000c;
    border-radius: 4px;
    box-shadow: 0 2px 4px #0003;
    display: flex
;
    flex-direction: column;
    height: 60px;
    overflow: hidden;
    position: relative;
    width: 60px;
}


.videoBody-guest-name {
    color: #fff;
    font-size: 10px;
     line-height: 8px; 
    overflow: hidden;
    padding: 1px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
    border-radius: 5px;
}

@media (max-width: 480px) {
    .videoBody-guest-image {
        height: calc(100% - 18px);
    }
}
@media (max-width: 768px) {
    .videoBody-guest-image {
        height: calc(100% - 20px);
    }
}
.videoBody-guest-image {
    height: calc(100% - 24px);
    object-fit: cover;
    width: 100%;
    z-index: 1;
}


@media (max-width: 480px) {
    .videoBody-guest-overlay {
        height: calc(100% - 18px);
        padding: 0 4px;
        top: 18px;
    }
}
@media (max-width: 768px) {
    .videoBody-guest-overlay {
        height: calc(100% - 20px);
        padding: 0 5px;
        top: 20px;
    }
}
.videoBody-guest-overlay {
    align-items: center;
    background-color: #998e8e80;
    box-sizing: border-box;
    display: flex;
    height: calc(100% - 24px);
    justify-content: space-between;
    left: 0;
    opacity: 1;
    padding: 0 6px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    z-index: 2;
}

@media (max-width: 480px) {
    .videoBody-guest-icon {
        height: 16px;
        width: 16px;
    }
}
@media (max-width: 768px) {
    .videoBody-guest-icon {
        height: 18px;
        width: 18px;
    }
}
.videoBody-guest-icon {
    cursor: pointer;
    height: 20px;
    transition: opacity .3s;
    width: 20px;
}


@media (max-width: 600px) {
    .guest-audio-toggle-btn {
        font-size: 13px;
        height: 20px;
        width: 20px;
    }
}

.guest-audio-toggle-btn {
    align-items: center;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #ffffff26;
    border: 1px solid #ffffff40;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex
;
    font-size: 15px;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: 10px;
    bottom: 5px;
    transform: translateX(50%);
    transition: all .2s 
ease;
    width: 20px;
    z-index: 20;
}




.musafir-sidebar {
  position: absolute;     /* ekranda sabit sol tərəf üçün */
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column; /* alt-alta düzülmə */
  gap: 12px;
  z-index: 20;
}

.musafir-slot {
  width: 120px;
  height: 80px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 6px;
  color: white;
  transition: all 0.2s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.musafir-slot:hover {
  background: rgba(255, 255, 255, 0.15);
}

.musafir-avatar img {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.musafir-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.musafir-slot.empty {
  opacity: 0.4;
  justify-content: center;
  font-size: 13px;
  border: 1px dashed rgba(255,255,255,0.3);
}


.mafia-animate {
  animation: popIn 0.25s ease-out, floatGlow 2s infinite ease-in-out;
}

@keyframes popIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes floatGlow {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0px); }
}


@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(233,30,0,0.9); }
  50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(233,35,0,1); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(233,30,0,0.9); }
}

@keyframes toastInLeft {
  from {
    transform: translate(-170%, 0);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes toastOutLeft {
  from {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  to {
    transform: translate(-170%, 0);
    opacity: 0;
  }
}

@keyframes toastProgress {
  0% { width: 100%; }
  100% { width: 0%; }
}


    .effect-drop { 
          position: absolute; 
          top: -60px;
          animation: effectFall linear infinite; 
          user-select: none;
          will-change: transform, opacity;
        }

        .effect-drop.bomb { filter: drop-shadow(0 0 8px rgba(239,68,68,0.9)); }
        .effect-drop.money { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
        .effect-drop.gold { filter: drop-shadow(0 0 8px rgba(251,191,36,0.9)); }
        .effect-drop.star { filter: drop-shadow(0 0 8px rgba(56,189,248,0.8)); }
        .effect-drop.flower { filter: drop-shadow(0 0 8px rgba(244,63,94,0.8)); }
        .effect-drop.snow { filter: drop-shadow(0 0 5px rgba(255,255,255,0.9)); }
        .effect-drop.fire { filter: drop-shadow(0 0 8px rgba(239,68,68,0.9)); }
        .effect-drop.matrix { filter: drop-shadow(0 0 8px rgba(34,197,94,0.9)); }
        .effect-drop.mafia { filter: drop-shadow(0 0 8px rgba(168,85,247,0.8)); }
        
        /* 🍃 YENİ: PAYIZ YARPAQLARI SÜZÜLƏRƏK DÜŞÜR 🍃 */
        .effect-drop.leaf-fall {
          animation: leafSway 4s ease-in-out infinite;
          filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4));
        }
        @keyframes leafSway {
          0%, 100% { transform: translateX(0px) translateY(0) rotate(0deg); opacity: 0; }
          20% { opacity: 1; }
          50% { transform: translateX(40px) translateY(50vh) rotate(45deg); opacity: 1; }
          80% { opacity: 1; }
          95% { transform: translateX(-20px) translateY(100vh) rotate(90deg); opacity: 0; }
        }

        /* 🌸 YENİ: ÇİÇƏKLƏR FIRLANARAQ DÜŞÜR 🌸 */
        .effect-drop.flower-spin {
          animation: flowerSpinFall 4s linear infinite;
          filter: drop-shadow(0 0 10px rgba(236,72,153,0.6));
        }
        @keyframes flowerSpinFall {
          0% { transform: translateY(0) rotate(0deg); opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 1; }
          100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
        }

        /* 📿 YENİ: TƏSBEHLƏR 📿 */
        .effect-drop.tasbih-drop {
          filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
        }

        /* ⚡ YENİ: MİFİK ÜÇÜN XIRDA İLDIRIMLAR (SPARKS) ⚡ */
        .effect-drop.mythic-spark {
          color: #22d3ee;
          filter: drop-shadow(0 0 8px #22d3ee);
          animation: sparkFlash 1.5s infinite alternate;
        }
        @keyframes sparkFlash {
          0% { opacity: 0; transform: scale(0.8) translateY(0); }
          50% { opacity: 1; transform: scale(1.2) translateY(50vh); }
          100% { opacity: 0; transform: scale(0.8) translateY(100vh); }
        }

		/* 🦋 KƏPƏNƏKLƏRİN REAL UÇUŞ STİLİ 🦋 */
        .effect-drop.butterfly { 
          top: auto !important; /* Yuxarıdan düşməni ləğv edir */
          bottom: -10%; /* Ekranın altından başlayır */
          filter: drop-shadow(0 0 5px rgba(232, 121, 249, 0.8)); 
          animation-name: realButterflyFly1;
          animation-timing-function: ease-in-out; /* Qanad çırpma yumşaqlığı */
          animation-iteration-count: infinite;
        }

        /* Kəpənəklərin yarısı fərqli trayektoriya ilə uçacaq (Təbiilik qatmaq üçün) */
        .effect-drop.butterfly:nth-child(even) {
          animation-name: realButterflyFly2;
        }

        /* 1-ci Uçuş Yolu: Soldan sağa ziqzaq edərək yuxarı qalxır */
        @keyframes realButterflyFly1 {
          0% { transform: translate(0, 0) rotate(10deg) scale(0.8); opacity: 0; }
          15% { opacity: 1; transform: translate(120px, -20vh) rotate(-15deg) scale(1.1); }
          35% { transform: translate(-80px, -40vh) rotate(20deg) scale(0.9); }
          60% { transform: translate(140px, -70vh) rotate(-25deg) scale(1.2); }
          85% { opacity: 1; transform: translate(-60px, -95vh) rotate(15deg) scale(1); }
          100% { transform: translate(0, -120vh) rotate(0deg) scale(0.8); opacity: 0; }
        }

        /* 2-ci Uçuş Yolu: Sağdan sola ziqzaq edərək yuxarı qalxır */
        @keyframes realButterflyFly2 {
          0% { transform: translate(0, 0) rotate(-10deg) scale(0.8); opacity: 0; }
          20% { opacity: 1; transform: translate(-140px, -25vh) rotate(15deg) scale(1.1); }
          40% { transform: translate(100px, -50vh) rotate(-20deg) scale(0.9); }
          70% { transform: translate(-120px, -80vh) rotate(25deg) scale(1.2); }
          90% { opacity: 1; transform: translate(70px, -100vh) rotate(-15deg) scale(1); }
          100% { transform: translate(0, -120vh) rotate(0deg) scale(0.8); opacity: 0; }
        }
		
		/* 🦋 REAL QANAD ÇIRPMA (3D FLAP) EFFEKTİ 🦋 */
        .butterfly-flap {
          display: inline-block;
          transform-style: preserve-3d;
          /* Çox sürətli (0.12 saniyə) və davamlı açılıb-qapanma */
          animation: wingFlap 0.12s infinite alternate ease-in-out;
          transform-origin: center;
        }

        /* Təbiilik qatmaq üçün bəzi kəpənəklər qanadlarını fərqli ritmlə çırpacaq */
        .effect-drop.butterfly:nth-child(3n) .butterfly-flap {
          animation-duration: 0.16s;
        }
        .effect-drop.butterfly:nth-child(5n) .butterfly-flap {
          animation-duration: 0.10s;
        }

        @keyframes wingFlap {
          0% { transform: rotateY(0deg); }
          /* Qanadlar qapananda (75 dərəcə dönəndə) kəpənək vizual olaraq daralır */
          100% { transform: rotateY(75deg) scaleX(0.9); } 
        }
		
		
		
        .matrix-code-drop {
          position: absolute;
          top: -60px;
          color: #4ade80;
          font-family: monospace;
          font-weight: bold;
          text-shadow: 0 0 8px rgba(74,222,128,0.9);
          animation: matrixFall linear infinite;
          z-index: 5;
          will-change: transform, opacity;
        }

        @keyframes matrixFall {
          0% { transform: translateY(0); opacity: 0; }
          5% { opacity: 1; }
          85% { opacity: 1; }
          100% { transform: translateY(105vh); opacity: 0; }
        }

        @keyframes effectFall {
          0% { transform: translateY(0) rotate(0deg); opacity: 0; }
          5% { opacity: 1; }
          85% { opacity: 1; }
          100% { transform: translateY(105vh) rotate(360deg); opacity: 0; }
        }

        /* ⚡ YENİ: ÜFÜQİ (SAĞA VƏ SOLA) İLDIRIMLAR MİFİK ÜÇÜN ⚡ */
        .horizontal-lightning {
          position: absolute;
          height: 2px;
          background: #22d3ee;
          box-shadow: 0 0 10px #22d3ee, 0 0 20px #fff;
          opacity: 0;
          z-index: 10;
        }
        
        .top-lightning {
          top: 15%;
          left: -50%;
          width: 200%;
          animation: horizontalStrikeRight 1.5s infinite;
        }
        
        .bottom-lightning {
          bottom: 15%;
          right: -50%;
          width: 200%;
          animation: horizontalStrikeLeft 1.5s infinite 0.5s;
        }
        
        @keyframes horizontalStrikeRight {
          0%, 60% { opacity: 0; transform: translateX(-50%); }
          62% { opacity: 1; transform: translateX(0%); }
          65% { opacity: 0; transform: translateX(50%); }
          100% { opacity: 0; }
        }

        @keyframes horizontalStrikeLeft {
          0%, 60% { opacity: 0; transform: translateX(50%); }
          62% { opacity: 1; transform: translateX(0%); }
          65% { opacity: 0; transform: translateX(-50%); }
          100% { opacity: 0; }
        }

        .sky-strike { animation: boltFlash 2s 0s infinite; }
        @keyframes boltFlash {
          0%, 60% { opacity: 0; transform: scale(0.9); }
          63% { opacity: 1; transform: scale(1); }
          66% { opacity: 0.1; }
          70% { opacity: 1; transform: scale(1.05); }
          75% { opacity: 0.4; }
          82% { opacity: 0.8; }
          90%, 100% { opacity: 0; transform: scale(1); }
        }

        .lightning-screen-flash {
          position: absolute; inset: 0;
          background: #ffffff; pointer-events: none;
          animation: screenFlash 3s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
          z-index: 4;
        }
        @keyframes screenFlash {
          0%, 60% { opacity: 0; background: transparent; }
          62% { opacity: 0.4; background: #ffffff; }
          65% { opacity: 0; }
          69% { opacity: 0.3; background: #22d3ee; }
          80%, 100% { opacity: 0; background: transparent; }
        }
		
		
		/* 🍃 YENİ: YAZ MEHİ (Yaşıl Yarpaqlar) 🍃 */
        .effect-drop.spring-leaf {
          animation: springSway 4.5s ease-in-out infinite;
          filter: drop-shadow(0 2px 6px rgba(34, 197, 94, 0.6));
        }
        @keyframes springSway {
          0%, 100% { transform: translateX(0px) translateY(0) rotate(0deg); opacity: 0; }
          15% { opacity: 1; }
          45% { transform: translateX(-50px) translateY(40vh) rotate(-60deg); opacity: 1; }
          75% { opacity: 1; }
          95% { transform: translateX(30px) translateY(100vh) rotate(30deg); opacity: 0; }
        }

        /* 🫧 YENİ: OKEAN DƏRİNLİYİ (Aşağıdan yuxarı qalxan balonlar) 🫧 */
        .effect-drop.bubble-rise {
          top: auto !important; /* Yuxarıdan düşməni ləğv edirik */
          bottom: -10%; /* Ekranın altından başlayır */
          animation: bubbleUp 5s ease-in infinite;
          filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7));
        }
        @keyframes bubbleUp {
          0% { transform: translateX(0) translateY(0) scale(0.5); opacity: 0; }
          20% { opacity: 1; transform: translateX(20px) translateY(-20vh) scale(1); }
          50% { transform: translateX(-15px) translateY(-50vh) scale(1.2); }
          80% { opacity: 1; transform: translateX(10px) translateY(-80vh) scale(1.1); }
          100% { transform: translateX(0) translateY(-110vh) scale(0.8); opacity: 0; }
        }

        /* 💘 YENİ: SEVGİ OVSUNU (Döyünərək düşən ürəklər) 💘 */
        .effect-drop.love-pulse {
          animation: heartFall 4s linear infinite;
          filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.8));
        }
        @keyframes heartFall {
          0% { transform: translateY(0) scale(0.8); opacity: 0; }
          10% { opacity: 1; transform: translateY(10vh) scale(1.2); }
          20% { transform: translateY(20vh) scale(1); }
          40% { transform: translateY(40vh) scale(1.2); }
          50% { transform: translateY(50vh) scale(1); }
          70% { transform: translateY(70vh) scale(1.2); }
          80% { opacity: 1; transform: translateY(80vh) scale(1); }
          100% { transform: translateY(105vh) scale(0.8); opacity: 0; }
        }
		
		/* 👻 YENİ: LƏNƏTLƏNMİŞ RUHLAR (Xəyalət kimi süzülür, solur və yenidən peyda olur) 👻 */
        .effect-drop.ghost-float {
          animation: ghostFloat 6s ease-in-out infinite;
          filter: drop-shadow(0 0 12px rgba(167, 243, 208, 0.8)); /* Mistik solğun yaşıl/mavi parıltı */
          opacity: 0.8;
        }
        @keyframes ghostFloat {
          0% { transform: translateY(0) scale(0.8); opacity: 0; }
          20% { opacity: 0.9; transform: translateY(20vh) translateX(-30px) scale(1.2); }
          40% { opacity: 0.1; transform: translateY(40vh) translateX(20px) scale(0.9); } /* Görünməz kimi olur */
          60% { opacity: 0.9; transform: translateY(60vh) translateX(40px) scale(1.3); } /* Yenidən peyda olur */
          80% { opacity: 0.2; transform: translateY(80vh) translateX(-15px) scale(1.1); }
          100% { transform: translateY(110vh) scale(0.8); opacity: 0; }
        }

        /* 👹 YENİ: QARANLIQ CİNLƏR (Aqressiv, titrəyərək və hücum edərək düşən) 👹 */
        .effect-drop.demon-fly {
          animation: demonErratic 3.5s linear infinite;
          filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.9)); /* Qan qırmızı parıltı */
        }
        @keyframes demonErratic {
          0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 0; }
          10% { opacity: 1; transform: translateY(10vh) scale(1.5) rotate(-15deg); }
          30% { transform: translateY(30vh) translateX(50px) scale(0.8) rotate(25deg); }
          50% { transform: translateY(50vh) translateX(-40px) scale(1.4) rotate(-15deg); }
          70% { transform: translateY(70vh) translateX(30px) scale(0.9) rotate(20deg); }
          90% { opacity: 1; transform: translateY(90vh) translateX(-20px) scale(1.3) rotate(0deg); }
          100% { transform: translateY(110vh) scale(0.5); opacity: 0; }
        }

/* ============================================================
   ☠️ OLUM MELEYI (death_angel) — qirmizi nida + tehluke ikonu
   ============================================================ */
.effect-drop.death-drop {
  animation: deathFall 3.8s linear infinite;
  filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.95));
}
/* ===== TƏHLÜKƏ NİDASI (danger_alert) =====
   Xəbərdarlıq işarəsi düşərkən yanıb-sönür və sağa-sola titrəyir —
   real siqnal lampası hissi verir. */
.effect-drop.danger-drop {
  animation: dangerFall 3.4s linear infinite, dangerBlink 0.45s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.95))
          drop-shadow(0 0 6px rgba(245, 158, 11, 0.9));
}
@keyframes dangerFall {
  0%   { transform: translateY(0) translateX(0) scale(0.7) rotate(-10deg); opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translateY(25vh) translateX(16px) scale(1.15) rotate(10deg); }
  50%  { transform: translateY(50vh) translateX(-14px) scale(0.95) rotate(-12deg); }
  75%  { transform: translateY(75vh) translateX(12px) scale(1.2) rotate(8deg); }
  92%  { opacity: 1; }
  100% { transform: translateY(112vh) translateX(0) scale(0.7) rotate(0deg); opacity: 0; }
}
@keyframes dangerBlink {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.95)) brightness(1); }
  50%      { filter: drop-shadow(0 0 22px rgba(245, 158, 11, 1)) brightness(1.5); }
}

@keyframes deathFall {
  0%   { transform: translateY(0) scale(0.6) rotate(-8deg); opacity: 0; }
  12%  { opacity: 1; transform: translateY(12vh) scale(1.25) rotate(6deg); }
  35%  { transform: translateY(35vh) translateX(22px) scale(0.95) rotate(-10deg); }
  55%  { transform: translateY(55vh) translateX(-18px) scale(1.3) rotate(8deg); }
  78%  { transform: translateY(78vh) translateX(14px) scale(1.0) rotate(-6deg); }
  92%  { opacity: 1; }
  100% { transform: translateY(112vh) scale(0.6) rotate(0deg); opacity: 0; }
}

/* ============================================================
   🦇 YARASA SURUSU (bat_swarm) — qanad cirpma
   ============================================================ */
.bat-swarm-container .bat-unit svg { filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.55)); }

.bat-swarm-container .bat-wing {
  transform-box: view-box;
  animation: batFlapR 0.24s infinite alternate ease-in-out;
}
/* Ciyin noqteleri: sag qanad (5,-14), sol qanad (-5,-14) */
.bat-swarm-container .bat-wing-right { transform-origin: 54.8% 38.7%; }
.bat-swarm-container .bat-wing-left  { transform-origin: 45.2% 38.7%; animation-name: batFlapL; }

/* Tebiilik: her yarasa bir az ferqli ritmde qanad cirpir */
.bat-swarm-container .bat-unit:nth-child(3n) .bat-wing { animation-duration: 0.30s; }
.bat-swarm-container .bat-unit:nth-child(4n) .bat-wing { animation-duration: 0.19s; }
.bat-swarm-container .bat-unit:nth-child(5n) .bat-wing { animation-duration: 0.35s; }

@keyframes batFlapR {
  0%   { transform: rotate(26deg); }
  100% { transform: rotate(-32deg); }
}
@keyframes batFlapL {
  0%   { transform: rotate(-26deg); }
  100% { transform: rotate(32deg); }
}
}


/* ==========================================================
   YAYIM EFFEKTLƏRİ HEÇ BİR KLİKİ BLOKLAMIR
   Hədiyyə videosu / SVGA, ürəklər, giriş (qoşulma) kartı və onun
   ildırım / parıltı qatları — hamısı yalnız görüntüdür. Toxunuş altdakı
   çata, düymələrə, hədiyyə panelinə çatır.
   ========================================================== */
.gift_video, .gift_video *,
.heart-container, .heart-container *,
.lightning-screen-flash,
.mythic-lightning-container, .mythic-lightning-container *,
.horizontal-lightning,
.mythic-card-effect, .azn-card-effect, .win-card-effect {
    pointer-events: none !important;
}

/* Müsafirin öz mikrofon düyməsi — barmaqla basmaq asan olsun (görünüş eyni,
   toxunuş sahəsi böyük), iki toxunuşda brauzer böyütməsin. */
.guest-audio-toggle-btn { touch-action: manipulation; }
.guest-audio-self::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.videoBody-guest-container { touch-action: manipulation; }

/* Kiçik ekranda müsafir sütunu çat zonasına düşəndə (`TiktokLive` →
   `guest-gap`): çat bloku boş yerlərdə toxunuşu TUTMUR — müsafirin üstündəki
   zolaq boşdur, toxunuş müsafirə çatır. Yalnız çat, yazı sətri və aktiv
   zolaqlar (sabitlənmiş mesaj, aparıcı zolağı) toxunuşu qəbul edir. */
.bottom-container.guest-gap { pointer-events: none; }
.bottom-container.guest-gap > .bcc-auto,
.bottom-container.guest-gap > .chat-footer { pointer-events: auto; }

/* 💬 Canlıda çat düymələri (TiktokLive → chatControls): ekranın SAĞ
   kənarında, yazı sətrinin üstündə sütun — ⬇ (son mesajlara get / çatı aşağı
   sal / aç) və 💬 (çatı bağla / aç). Durakda çat aşağı salınanda /
   bağlananda masa böyüyür. */
.live-chat-ctrls {
    position: absolute;
    right: 10px;
    bottom: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 30;
    pointer-events: none;
}
.live-chat-btn {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(14, 10, 30, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, background 0.25s ease, border-color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.live-chat-btn:active { transform: scale(0.9); }
.live-chat-btn.is-up { background: linear-gradient(135deg, #0EA5E9, #7C3AED); border-color: transparent; }
.live-chat-btn.is-off { background: linear-gradient(135deg, #DB2777, #7C3AED); border-color: transparent; }
.live-chat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 99px;
    background: #EF4444;
    border: 2px solid #0b0816;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 13px;
    text-align: center;
    box-sizing: border-box;
}
.bottom-container.durak-mode.chat-low,
.bottom-container.durak-mode.chat-hidden { flex: 0 0 auto !important; height: auto !important; }
/* Domino: çat aşağı salınanda / bağlananda yazı sətri aşağıda qalsın
   (əvvəl `.domino-mode`-un `height: 100%`-i qalırdı — Durakda masa sıfıra
   düşür, yazı sətri və düymələr ekranın YUXARISINA qalxırdı). */
.bottom-container.domino-mode.chat-low,
.bottom-container.domino-mode.chat-hidden { justify-content: flex-end; }


/* ==================================================
   🎛 Canlı başlıq — BİR SIRA, yeniləmə düyməsi DƏQİQ ORTADA
   (TiktokLive `.live-head`). Sol / sağ tərəf yalnız öz yarısını tutur
   (ortadakı düymənin yarısı + boşluq çıxılır), dar telefonlarda kiçilir.
===================================================== */
/* Başlıq görüntünün ÜSTÜNDƏ üzür (absolute) — `relative` olanda 45 px yer tuturdu və
   yayım / oyun aşağı düşürdü (aşağıda qara zolaq). Ortadakı düymə üçün də kifayətdir. */
.videoHeader.live-head { position: absolute; top: 0; left: 0; right: 0; justify-content: space-between; gap: 0; }
/* Yeniləmə düyməsi bir az kiçik (34 → ≈30 px) — yan tərəflərə (profil) daha çox yer qalsın. */
.live-head-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.88); z-index: 3; display: flex; }
.live-head-side { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; max-width: calc(50% - 19px); }
.live-head-left { overflow: hidden; }
/* Profil öz yarısının HAMISINI tuta bilər — nik sabit enə (52–90 px) sıxılmır,
   yalnız yer çatmayanda "…" ilə kəsilir. */
.live-head-left .userProfile { min-width: 0; max-width: calc(100% - 4px); left: 0 !important; margin-left: 3px; }
.live-head-left .userInfo { min-width: 0; flex: 1 1 auto; }
.live-head-name { max-width: 100% !important; }
.live-head-right { margin-left: auto; justify-content: flex-end; gap: 4px; }
.live-head-gifters { display: flex; align-items: center; flex-shrink: 0; }
.live-head-btn { height: 30px; flex-shrink: 0; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,.5); box-sizing: border-box; }
.live-head-viewers { padding: 0 7px; gap: 4px; background: rgba(20,20,28,.75); border: 1px solid #444; border-radius: 14px; }
.live-head-exit { width: 30px; background: #2a2a2a; border: 1px solid #444; border-radius: 10px; }
.live-head [data-testid="live-tools"] { flex-shrink: 0; margin: 0 !important; }
@media (max-width: 400px) {
  .live-head-right { gap: 3px; }
  .live-head .userAvatar { width: 28px; height: 28px; }
}
@media (max-width: 360px) {
  /* Çox dar ekran: liderlərdən yalnız 1-ci yer, düymələr kiçik */
  .live-head-gifters [data-testid="live-top-gifters"] > button:nth-child(n+2) { display: none; }
  .live-head-btn, .live-head [data-testid="live-tools"] { height: 28px !important; }
  .live-head-exit { width: 28px; }
  .live-head-viewers { padding: 0 5px; }
}

/* ==================================================
   🎁 TikTok kimi hədiyyə zolağı (TiktokLive → .gift-combo)
   Solda, ekranın ortasından bir az aşağı; şəkil + ad + "göndərdi …",
   hədiyyənin şəkli zolaqdan kənara çıxır, ×N hər yeni hədiyyədə atılır.
===================================================== */
.giftListContainers.gift-combo-list { left: 8px; top: auto; bottom: 46%; gap: 8px; pointer-events: none; max-width: 70vw; }
.giftContainer.gift-combo {
  position: relative; padding: 3px 54px 3px 3px; border-radius: 999px; gap: 6px; font-size: 13px;
  background: linear-gradient(90deg, rgba(225, 29, 72, .78), rgba(124, 58, 237, .55) 70%, rgba(124, 58, 237, 0));
  box-shadow: 0 4px 14px rgba(0,0,0,.35); animation: giftComboIn .35s cubic-bezier(.2,.9,.3,1.2);
}
.gift-combo-avatar { width: 34px !important; height: 34px !important; max-width: none !important; max-height: none !important; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); flex-shrink: 0; }
.gift-combo-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.gift-combo-name { font-weight: 800; font-size: 12.5px; color: #fff; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-combo-sub { font-size: 11px; color: #FDE68A; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-combo-to { color: #F9A8D4; font-weight: 700; }
.giftContainer.gift-combo .gift-combo-thumb { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 50px !important; height: 50px !important; max-width: none !important; max-height: none !important; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.gift-combo-count { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); font-size: 26px !important; font-weight: 900; font-style: italic; color: #FDE047 !important;
  text-shadow: 0 2px 0 #B45309, 0 0 10px rgba(253,224,71,.7); animation: giftComboBump .35s ease-out; white-space: nowrap; }
@keyframes giftComboIn { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes giftComboBump { 0% { transform: translateY(-50%) scale(1.8); } 60% { transform: translateY(-50%) scale(.9); } 100% { transform: translateY(-50%) scale(1); } }

/* 🎁 Hədiyyə (video / SVGA) oynayanda çat bloku TAM ŞƏFFAF — oyunda (domino /
   durak) çatın tünd fonu və blur-u hədiyyəni örtürdü. Hədiyyə HƏR ŞEYİN
   ALTINDADIR, mesajlar şüşə kart kimi (ChatMessages `glass`) onun üstündə. */
.bottom-container.gift-on,
.domino-premium-bg .bottom-container.gift-on {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ==================================================
   📺 TikTok kimi tam ekran yayım (TiktokLive `fullBleed`): adi yayımda video /
   şəkil ekranın ƏN YUXARISINDAN başlayır, başlıq onun üstündə ŞƏFFAF durur —
   yalnız yuxarıda yüngül kölgə (yazılar oxunsun). PK və oyunlar olduğu kimi.
===================================================== */
.videoHeader.live-head.live-head-over {
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 65%, rgba(0,0,0,0) 100%);
  box-shadow: none;
}
/* 💰 Loto cekpotu — başlığın altında, yayımçının altında (TikTok-dakı reytinq yazısı kimi). */
.live-jp-slot { position: absolute; top: 47px; left: 8px; z-index: 50; max-width: calc(50% - 16px); pointer-events: none; display: flex; }
.live-jp-slot > * { pointer-events: auto; }

/* 🎱 Loto: girənlərin kartları çat blokunun YUXARISINDA (çat yerində), klikləri bloklamır */
.bottom-container .loto-join { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 2px 10px 4px; pointer-events: none; position: relative; z-index: 2; }

/* 👑 Canlı izləyicilər siyahısında aktiv VIP nişanı (UserListModal). */
.viewerVip {
  display: inline-flex; align-items: center; flex-shrink: 0;
  margin: 0 6px 0 -14px; padding: 1px 6px; border-radius: 6px;
  font-size: 9.5px; font-weight: 900; letter-spacing: .04em; line-height: 14px;
  color: #1a1206; background: linear-gradient(180deg, #fde68a, #f59e0b);
}