/* ==========================================================================
   3. GLOBAL BASE STYLES & RESET
   ========================================================================== */
html, body {
  background-color: var(--bg-0) !important;
  color: var(--text-1) !important;
  font-family: var(--font-ui) !important;
  margin: 0;
  padding: 0;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page subtle felt/noise ambiance */
body {
  background-image: radial-gradient(circle at 50% 20%, rgba(31, 107, 76, 0.04) 0%, transparent 60%) !important;
  background-attachment: fixed !important;
}

#PencereAna, .PencereAna {
  background-color: var(--bg-0) !important;
  color: var(--text-1) !important;
  font-family: var(--font-ui) !important;
  height: 100% !important;
  max-height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.SalonSolAna, #SalonSolAna {
  background-color: var(--bg-0) !important;
  color: var(--text-1) !important;
  font-family: var(--font-ui) !important;
}

/* Template skeletons & hidden elements */
.Gizli,
#IskeletSalon.Gizli,
#IskeletMasaOkey.Gizli,
#IskeletMasaBatak.Gizli,
#IskeletSalonMasaOkeyListe.Gizli,
#IskeletSalonMasaBatakListe.Gizli,
#IskeletSalonNickListe.Gizli,
.Mtr62Nick.Gizli,
[class*="Gizli"] {
  display: none !important;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-600);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Focus-visible on EVERY interactive element */
:focus-visible {
  outline: 1px solid var(--gold-500) !important;
  box-shadow: var(--ring) !important;
  outline-offset: 1px;
}

/* Micro-transitions */
button, .btn, .SalonOynaOrtak, .Mtr62Tekil, input, select, textarea, .tabButon, .tabButonOrtakAE {
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
button:hover, .btn:hover {
  transform: translateY(-1px);
}
button:active, .btn:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   4.1 TOP HEADER (User Block + Menu + Toolbar)
   ========================================================================== */
#AnaUstPanel, .AnaUstPanel {
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  height: 64px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 var(--sp-3) !important;
  box-shadow: var(--shadow-1) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 50 !important;
}

/* User block container */
#AnaUstPanel .drop,
#AnaUstPanel .butonSalonUstPanel,
#AnaUstPanel .AnaUstPanelHG {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

#AnaAvatarDiv {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  margin-right: var(--sp-2) !important;
}

#AnaAvatarImg {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--r-pill) !important;
  border: 2px solid var(--gold-500) !important;
  box-shadow: var(--shadow-1) !important;
  object-fit: cover !important;
}

#AnaAvatarDurumDiv {
  position: absolute !important;
  bottom: 1px !important;
  right: 1px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--success) !important;
  border: 2px solid var(--bg-1) !important;
}

#AnaUstHGExt {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin-right: var(--sp-3) !important;
  text-align: left !important;
}

/* the header name wears the same nick style as the player list (NickRenkN from
   colors.css: colour, banner picture, font); plain only without a style */
#AnaNickDiv {
  color: var(--text-1) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--fs-md) !important;
  line-height: 1.2 !important;
}
#AnaNickDiv > .AnaNickYazi[class*="NickRenk"] { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }

#AnaPingDiv {
  color: var(--text-3) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-xs) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 2px !important;
}
#AnaPingDiv::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
}

#AnaAvatarDivAsagiOk,
.AnaUstPanelButonOkAlt {
  color: var(--text-2) !important;
}

/* Back arrow button */
#AnaButonSalonlar {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-md) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  margin: 0 var(--sp-1) !important;
  cursor: pointer !important;
}
#AnaButonSalonlar:hover {
  background: var(--bg-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--gold-300) !important;
}

/* "Menü" button - Primary Gold */
#Amenu {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600)) !important;
  color: var(--text-on-gold) !important;
  border: 1px solid var(--gold-500) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: var(--fs-sm) !important;
  padding: 0 16px !important;
  height: 40px !important;
  box-shadow: var(--shadow-1) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 var(--sp-1) !important;
  cursor: pointer !important;
}
#Amenu:hover {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)) !important;
  box-shadow: var(--shadow-2) !important;
}

/* Notification Bell - Ghost Icon Button */
#AnaButonBildirimler {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-md) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  position: relative !important;
  margin: 0 var(--sp-1) !important;
  cursor: pointer !important;
}
#AnaButonBildirimler:hover {
  background: var(--bg-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--gold-300) !important;
}
#AnaButonBildirimlerYV {
  background: var(--live) !important;
  color: #FFFFFF !important;
  border-radius: var(--r-pill) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  min-width: 16px !important;
  height: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Fullscreen Button - Ghost Icon Button (NOT red) */
#AnaButonGenislet {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-md) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  margin: 0 var(--sp-1) !important;
  cursor: pointer !important;
}
#AnaButonGenislet:hover {
  background: var(--bg-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--gold-300) !important;
}

/* Counter "1" badge */
#AnaToplamDiv {
  background: var(--bg-3) !important;
  color: var(--gold-300) !important;
  border: 1px solid var(--gold-600) !important;
  border-radius: var(--r-pill) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  padding: 3px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  margin: 0 var(--sp-1) !important;
}

/* Boombox Button */
#AnaUstPanelExtButon {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-md) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  margin: 0 var(--sp-1) !important;
  cursor: pointer !important;
}
#AnaUstPanelExtButon:hover {
  background: var(--bg-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--gold-300) !important;
}

/* ==========================================================================
   4.2 QUICK-ACTION PILLS (Masa Görsel, Turnuva, Top 20, İstek Yap)
   ========================================================================== */
#RenkPanel,
.turnuvabuton,
.topon,
#IstekYap,
#IstekPanel {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important;
  height: 34px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: var(--shadow-1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

#RenkPanel:hover,
.turnuvabuton:hover,
.topon:hover {
  border-color: var(--gold-500) !important;
  color: var(--gold-300) !important;
  transform: translateY(-1px) !important;
}

/* Differentiate through a small 8px dot using tile colors */
#RenkPanel::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tile-blue);
  box-shadow: 0 0 4px var(--tile-blue);
}
.turnuvabuton::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tile-yellow);
  box-shadow: 0 0 4px var(--tile-yellow);
}
.topon::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tile-red);
  box-shadow: 0 0 4px var(--tile-red);
}

/* "İstek Yap" is the primary CTA of this group - filled gold pill */
#IstekYap {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600)) !important;
  color: var(--text-on-gold) !important;
  border: 1px solid var(--gold-500) !important;
  font-weight: 700 !important;
}
#IstekYap::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-on-gold);
}
#IstekYap:hover {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500)) !important;
  color: var(--text-on-gold) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   4.3 RADIO / MUSIC WIDGET (Top Right)
   ========================================================================== */
#RadioPlayer {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  height: 52px !important;
  padding: 4px 10px !important;
  box-shadow: var(--shadow-1) !important;
  box-sizing: border-box !important;
}

#RadioNowPlayingTicker {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  padding: 6px 12px !important;
  height: 38px !important;
  box-shadow: var(--shadow-1) !important;
  cursor: pointer !important;
}
#RadioNowPlayingTicker:hover {
  border-color: var(--border-strong) !important;
}

#RadioTickerBadge {
  background: var(--live) !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: var(--r-pill) !important;
  padding: 2px 6px !important;
}

#RadioTickerDot {
  animation: pulse-live 1.6s infinite ease-in-out !important;
  display: inline-block !important;
}

@keyframes pulse-live {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

#RadioTickerText,
#radio_song_title {
  color: var(--text-2) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-xs) !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

#baslat svg {
  color: var(--gold-400) !important;
}
#durdur svg {
  color: var(--live) !important;
}

#seskontrol {
  accent-color: var(--gold-500) !important;
}
#seskontrol::-webkit-slider-runnable-track {
  background: var(--bg-3) !important;
  border-radius: var(--r-pill) !important;
  height: 6px !important;
}
#seskontrol::-webkit-slider-thumb {
  background: var(--gold-300) !important;
  border: 1px solid var(--gold-500) !important;
  border-radius: 50% !important;
}
#seskontrol:hover::-webkit-slider-thumb {
  box-shadow: var(--ring) !important;
}

/* ==========================================================================
   4.4 LOBBY TAB BAR ("Lobi")
   ========================================================================== */
#AnaTabPanel, .AnaTabPanel {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  align-items: center !important;
}

.tabButon, .tabButonOrtak {
  color: var(--text-2) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-sm) !important;
  border: none !important;
  background: transparent !important;
  padding: 6px 16px !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  cursor: pointer !important;
}

.tabButon.tabAktif,
.tabAktif,
.tabButonOrtak.tabAktif {
  background: var(--bg-2) !important;
  border-top: 2px solid var(--gold-500) !important;
  color: var(--text-1) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

#AnaTabButonEksi,
#AnaTabButonArti,
.tabButonOrtakAE {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-md) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
#AnaTabButonEksi:hover,
#AnaTabButonArti:hover,
.tabButonOrtakAE:hover {
  background: var(--bg-3) !important;
  color: var(--gold-300) !important;
  border-color: var(--border-strong) !important;
}

#AnaTabicerik, .AnaTabicerik {
  background: var(--bg-1) !important;
  color: var(--text-1) !important;
  height: calc(100vh - 104px) !important;
  display: flex !important;
  flex-direction: column !important;
}

.IskeletSalon:not(.Gizli), #AktifSalon, #IskeletSalon:not(.Gizli) {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
}

#SalonSolAna, .SalonSolAna {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#SalonOrtaKisim, .SalonOrtaKisim {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#SalonMasaContainer {
  flex: 1 1 auto !important;
  min-height: 140px !important;
  overflow-y: auto !important;
}

#SalonMesajContainer {
  height: 250px !important;
  min-height: 140px !important;
  max-height: 40vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#SalonYaziAlani {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#SalonYaziTahtasi {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

#SalonSagAna, .SalonSagAna {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#SalonNickContainer {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ==========================================================================
   4.5 TABLE TOOLBAR ("Yeni Masa", "Filtrle", "MasaNo Ara...")
   ========================================================================== */
#SalonUstMenu, .SalonUstMenu {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--sp-3) !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
  box-sizing: border-box !important;
}

/* "Yeni Masa" - Primary Action Green */
#SalonMasaYeniButonDiv {
  background: var(--action) !important;
  color: var(--text-on-action) !important;
  border: 1px solid var(--action) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  height: 38px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: var(--shadow-1) !important;
  cursor: pointer !important;
  margin-right: var(--sp-2) !important;
}
#SalonMasaYeniButonDiv:hover {
  background: var(--action-hover) !important;
  border-color: var(--action-hover) !important;
  transform: translateY(-1px) !important;
}
#SalonMasaYeniButonDiv:active {
  background: var(--action-press) !important;
}

/* "Filtrle" - Secondary Brass Border */
#SalonMasaFiltreleButonDiv {
  background: transparent !important;
  border: 1px solid var(--gold-600) !important;
  color: var(--gold-300) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  height: 38px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  margin-right: var(--sp-2) !important;
}
#SalonMasaFiltreleButonDiv:hover {
  background: rgba(212, 162, 76, 0.12) !important;
  border-color: var(--gold-500) !important;
  transform: translateY(-1px) !important;
}

/* Search input */
#SalonMasaFiltreInp,
.InpFiltrele {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-md) !important;
  height: 38px !important;
  padding: 0 14px !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-sm) !important;
  box-sizing: border-box !important;
}
#SalonMasaFiltreInp::placeholder,
.InpFiltrele::placeholder {
  color: var(--text-3) !important;
  opacity: 1 !important;
}
#SalonMasaFiltreInp:focus,
.InpFiltrele:focus {
  border-color: var(--gold-500) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}

/* Chevron scroll buttons */
#SalonYukariButonDiv,
#SalonAsagiButonDiv {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-md) !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
  margin-right: var(--sp-1) !important;
}
#SalonYukariButonDiv:hover,
#SalonAsagiButonDiv:hover {
  background: var(--bg-3) !important;
  color: var(--gold-300) !important;
  border-color: var(--border-strong) !important;
}

/* ==========================================================================
   4.6 TABLE CARD (Most Important Component)
   ========================================================================== */
#SalonMasalar {
  background: transparent !important;
  padding: var(--sp-3) !important;
}

/* Card container */
.Mtr62Tekil {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--sp-3) !important;
  margin: var(--sp-3) !important;
  box-shadow: var(--shadow-1) !important;
  box-sizing: border-box !important;
  display: block !important;
  width: auto !important;
}
.Mtr62Tekil:hover {
  border-color: var(--gold-600) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-2) !important;
}

/* Flex wrapper holding felt table and info panel */
#Mtr62mcs,
.Mtr62mcs {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  gap: var(--sp-3) !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* Felt table (left ~55%) */
.Mtr621 {
  width: 55% !important;
  min-width: 200px !important;
  height: 195px !important;
  border-radius: var(--r-lg) !important;
  background: radial-gradient(circle at 50% 40%, var(--felt-1), var(--felt-2) 60%, var(--felt-3)) !important;
  border: 3px solid var(--felt-edge) !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45), 0 0 0 3px #2A1D12, 0 0 0 5px #3B2A1C !important;
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px !important;
  margin: 0 !important;
}

/* Table number badge (circle 28px in top-left) */
#Mtr62BilgiMasaNoStr,
.Mtr62BilgiMasaNoStr {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--gold-500) !important;
  color: var(--text-on-gold) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
  border: 1px solid var(--gold-300) !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  z-index: 10 !important;
}

/* 4 Table seats tables inside felt */
#SalonMasaUstDiv {
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  border: none !important;
}
#SalonMasaUstDiv td {
  text-align: center !important;
  vertical-align: middle !important;
  border: none !important;
}

.Mtr62OrtaDiv {
  width: 100% !important;
  margin: auto 0 !important;
  border-collapse: collapse !important;
  border: none !important;
}
.Mtr62OrtaDiv td {
  vertical-align: middle !important;
  text-align: center !important;
  border: none !important;
}
#SalonMasaSolDiv {
  text-align: left !important;
  padding-left: 2px !important;
}
.Mtr62IzleDiv {
  text-align: center !important;
  width: 50px !important;
}
#SalonMasaSagDiv {
  text-align: right !important;
  padding-right: 2px !important;
}

#SalonMasaAltDiv {
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  border-collapse: collapse !important;
  border: none !important;
}
#SalonMasaAltDiv td {
  text-align: center !important;
  vertical-align: middle !important;
  border: none !important;
}

/* Center eye / spectator icon button */
#Mtr62IzleButon,
.Mtr62IzleButon {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--r-md) !important;
  background: rgba(16, 26, 22, 0.85) !important;
  border: 1px solid var(--gold-600) !important;
  color: var(--gold-300) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
  cursor: pointer !important;
  margin: auto !important;
}
#Mtr62IzleButon:hover,
.Mtr62IzleButon:hover {
  border-color: var(--gold-400) !important;
  box-shadow: var(--ring) !important;
  transform: scale(1.05) !important;
}

/* Free seat buttons "Oyna" - Ivory Tile Look */
.SalonOynaOrtak,
#SalonMasaUstButon,
#SalonMasaSolButon,
#SalonMasaSagButon,
#SalonMasaAltButon {
  background: linear-gradient(180deg, var(--ivory-100) 0%, var(--ivory-200) 100%) !important;
  color: var(--tile-ink) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: var(--fs-xs) !important;
  border-radius: var(--r-pill) !important;
  border: 1px solid var(--ivory-300) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  padding: 3px 12px !important;
  cursor: pointer !important;
  text-align: center !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}
.SalonOynaOrtak:hover,
#SalonMasaUstButon:hover,
#SalonMasaSolButon:hover,
#SalonMasaSagButon:hover,
#SalonMasaAltButon:hover {
  background: var(--action) !important;
  color: var(--text-on-action) !important;
  border-color: var(--action-hover) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important;
  transform: scale(1.04) !important;
}

/* Occupied seat avatar/name chip */
.Mtr62Nick {
  background: var(--bg-1) !important;
  color: var(--gold-300) !important;
  border: 1px solid var(--gold-500) !important;
  border-radius: var(--r-pill) !important;
  padding: 3px 10px !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
}
.Mtr62Nick:not(.Gizli) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.Mtr62Nick.Gizli,
.Gizli {
  display: none !important;
}

/* Disabled seat */
.SalonOynaOrtak:disabled{
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Info Panel (Right ~45%) */
.Mtr622,
body.Mtr5896842 .Mtr622 {
  flex: 1 !important;
  width: 45% !important;
  min-width: 140px !important;
  height: 195px !important;
  background: rgba(22, 36, 30, 0.65) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border-subtle) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Stake badge ("5000 Sayı" etc.) */
#Mtr62BilgiPuan,
.Mtr62BilgiPuan {
  background: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 100%) !important;
  color: var(--text-on-gold) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: var(--r-pill) !important;
  padding: 3px 12px !important;
  text-align: center !important;
  margin: 0 auto 6px auto !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5) !important;
  border: 1px solid var(--gold-400) !important;
  width: fit-content !important;
  letter-spacing: 0.02em !important;
  display: block !important;
}

.Mtr62BilgiDiv {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  width: 100% !important;
}

/* Rule list rows */
.Mtr62Bilgi:not(#Mtr62BilgiPuan) {
  height: 20px !important;
  line-height: 20px !important;
  border-bottom: 1px dashed var(--border-subtle) !important;
  color: var(--text-2) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-xs) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}
.Mtr62Bilgi:last-child {
  border-bottom: none !important;
}
.Mtr62Bilgi b,
.Mtr62Bilgi strong {
  color: var(--text-1) !important;
  font-weight: 600 !important;
}

/* Hide empty duello row on non-duel tables */
.Mtr62Tekil:not(.Mtr62Kirmizi) #Mtr62BilgiDuello,
.Mtr62Tekil:not(.Mtr62Kirmizi) #Mtr62BilgiD {
  display: none !important;
}

/* ==========================================================================
   4.7 RIGHT SIDEBAR (Tabs + User List)
   ========================================================================== */
#SalonSagAna, .SalonSagAna {
  background: var(--bg-1) !important;
  border-left: 1px solid var(--border-subtle) !important;
  box-sizing: border-box !important;
}

/* 3 Icon Tabs on top */
#SalonListeButonAlani {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
}

#SalonListeRumuzlarButonDis,
#SalonListeArkadasButonDis,
#SalonListeAramaButonDis {
  flex: 1 !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-2) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--text-3) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#SalonListeRumuzlarButonDis.aktif,
#SalonListeArkadasButonDis.aktif,
#SalonListeAramaButonDis.aktif,
#SalonListeRumuzlarButonDis.SalonListeAktifButon,
#SalonListeArkadasButonDis.SalonListeAktifButon,
#SalonListeAramaButonDis.SalonListeAktifButon {
  border-bottom: 2px solid var(--gold-500) !important;
  color: var(--gold-300) !important;
  background: var(--bg-2) !important;
}

/* Counter pill */
#Mtr9874 {
  background: var(--bg-3) !important;
  color: var(--gold-300) !important;
  border: 1px solid var(--gold-600) !important;
  border-radius: var(--r-pill) !important;
  font-size: var(--fs-xs) !important;
  padding: 1px 6px !important;
  margin-left: 4px !important;
}

/* User Row */
.SalonNickListeTekil {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  margin: 4px 6px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}
.SalonNickListeTekil:hover {
  background: var(--bg-3) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-1px) !important;
}

/* User Avatar with status ring */
.SalonNickListeAvatar,
.SalonNickListeAvatar img,
#SalonNickListeImg {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid var(--success) !important;
  object-fit: cover !important;
}

/* User Nick */
.SalonNickListeNickStr {
  color: var(--text-1) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  margin-left: var(--sp-2) !important;
}

/* Score / chips with gold color */
#SalonNickListePuanStr {
  color: var(--gold-300) !important;
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  font-size: var(--fs-xs) !important;
  margin-left: var(--sp-2) !important;
}

/* Own user row accent */
.SalonNickListeTekil.SalonNickListeBize,
.SalonNickListeTekil.bize {
  border-left: 3px solid var(--gold-500) !important;
}

/* Floating expand button */
#SalonNicklerSagButonDiv {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--gold-300) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-1) !important;
  cursor: pointer !important;
}
#SalonNicklerSagButonDiv:hover {
  border-color: var(--gold-500) !important;
  transform: scale(1.05) !important;
}

/* ==========================================================================
   4.8 CHAT AREA
   ========================================================================== */
#SalonMesajContainer, .SalonMesajContainer {
  background: var(--bg-1) !important;
}

#SalonYaziTahtasi, .SalonArkaPanelYaziGorun {
  background: var(--bg-1) !important;
  padding: var(--sp-4) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-md) !important;
  line-height: 1.5 !important;
  color: var(--text-1) !important;
  box-sizing: border-box !important;
}

/* Announcement Banner / Topic */
#SalonOdaTopicDiv {
  background: var(--bg-2) !important;
  border: 1px solid var(--gold-600) !important;
  border-radius: var(--r-md) !important;
  height: 38px !important;
  padding: 0 var(--sp-3) !important;
  box-shadow: var(--shadow-1) !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: var(--sp-2) !important;
}

#SalonOdaTopic {
  color: var(--gold-300) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: var(--fs-sm) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* "Kaydır" Checkbox & Broom Clear Icon */
.SalonScrollIslev {
  color: var(--text-2) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-xs) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.SalonScrollIslev input[type="checkbox"] {
  accent-color: var(--gold-500) !important;
}

#TemizleButonDiv {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-sm) !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
#TemizleButonDiv:hover {
  background: var(--bg-3) !important;
  color: var(--gold-300) !important;
  border-color: var(--border-strong) !important;
}

/* System Messages (*** lines) */
.RenkSistemMesaji {
  color: var(--gold-300) !important;
  font-style: italic !important;
  border-left: 3px solid var(--gold-600) !important;
  padding-left: var(--sp-2) !important;
  margin: 4px 0 !important;
  background: rgba(212, 162, 76, 0.05) !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  display: block !important;
}

/* DJ / Host announcements */
.RenkYayinciBilgi {
  color: var(--info) !important;
  font-weight: 600 !important;
}

/* Radio bot messages */
.RenkIstekBilgi {
  background: rgba(212, 162, 76, 0.08) !important;
  border-left: 3px solid var(--gold-500) !important;
  color: var(--text-1) !important;
  border-radius: var(--r-sm) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  margin: 4px 0 !important;
  display: block !important;
}

/* Rotating readable user names palette on dark (minimum 4.5:1 contrast) */
.NickRenk0 { color: #7CC4A0 !important; font-weight: 600 !important; }
.NickRenk1 { color: #8FB8E8 !important; font-weight: 600 !important; }
.NickRenk2 { color: #E0A97A !important; font-weight: 600 !important; }
.NickRenk3 { color: #C8A4E8 !important; font-weight: 600 !important; }
.NickRenk4 { color: #E8C26B !important; font-weight: 600 !important; }
.NickRenk5 { color: #E08A8A !important; font-weight: 600 !important; }

/* Timestamps */
.FontK {
  color: var(--text-3) !important;
  font-size: var(--fs-xs) !important;
}

/* ==========================================================================
   4.9 CHAT INPUT BAR (Bottom)
   ========================================================================= */
#YaziKutusuSalon, .YaziKutusuGenel {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  box-sizing: border-box !important;
  position: relative !important;
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
}

#YaziKutusuSalon .FormAyarLbl {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  width: 100% !important;
  margin: 0 !important;
  height: 40px !important;
}

#YaziKutusuSalon .FGenXIc {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  order: 1 !important;
  margin: 0 !important;
}

#YaziKutusuSalon .FGenXIc form {
  flex: 1 1 auto !important;
  margin: 0 !important;
  display: flex !important;
  width: 100% !important;
}

/* Text Input */
#SalonYaziInp,
.Mtr23974 {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-1) !important;
  height: 40px !important;
  padding: 0 14px !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-md) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
#SalonYaziInp::placeholder,
.Mtr23974::placeholder {
  color: var(--text-3) !important;
  opacity: 1 !important;
}
#SalonYaziInp:focus,
.Mtr23974:focus {
  border-color: var(--gold-500) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}

/* Send Button - Action Green */
#GonderButonDiv {
  background: var(--action) !important;
  color: var(--text-on-action) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--shadow-1) !important;
  cursor: pointer !important;
  order: 6 !important;
  flex-shrink: 0 !important;
}
#GonderButonDiv::before {
  content: '➤';
  font-size: 16px;
  color: var(--text-on-action);
  display: inline-block;
}
#GonderButonDiv:hover {
  background: var(--action-hover) !important;
  transform: translateY(-1px) !important;
}
#GonderButonDiv:active {
  background: var(--action-press) !important;
  transform: translateY(0) !important;
}

#GonderButonMobilDiv {
  background: var(--action) !important;
  color: var(--text-on-action) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  display: none !important;
}

/* Action Ghost Buttons */
#IsmarlaButonDiv,
#ResuploadDiv,
#GulButonDiv,
#NickTabButonDiv,
#SalonNicklerSolButonDiv {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--gold-300) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  font-size: 16px !important;
}
#IsmarlaButonDiv { order: 2 !important; }
#IsmarlaButonDiv::before { content: '☕'; }
#ResuploadDiv { order: 3 !important; }
#ResuploadDiv::before { content: '📷'; }
#GulButonDiv { order: 4 !important; }
#GulButonDiv::before { content: '😊'; }
#NickTabButonDiv { order: 5 !important; }
#NickTabButonDiv::before { content: '👥'; }
#SalonNicklerSolButonDiv { order: 7 !important; }

#IsmarlaButonDiv:hover,
#ResuploadDiv:hover,
#GulButonDiv:hover,
#NickTabButonDiv:hover,
#SalonNicklerSolButonDiv:hover {
  border-color: var(--gold-500) !important;
  color: var(--gold-300) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   5. ELEVATION & DEPTH (Surfaces, Cards, Modals)
   ========================================================================== */
.card, .panel, .OdaTekil, .AdminPencere {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-1) !important;
}

/* ==========================================================================
   6. MODALS / DROPDOWNS / TOOLTIPS / FORMS
   ========================================================================== */
.modal-content,
.ui-dialog,
.dropdown-menu,
.dropdownnotifyButton,
#AnaUstBildirimDlgAlt,
.FTarget,
#Mtr6587 .FTarget,
#PencereKullKayit .FTarget,
#PencereKullUnuttum .FTarget,
#PencereFacebookNick .FTarget {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-2) !important;
  color: var(--text-1) !important;
  font-family: var(--font-ui) !important;
}

.modal-backdrop,
.ui-widget-overlay {
  background: rgba(5, 10, 8, 0.75) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--border-subtle) !important;
  background: transparent !important;
}

.modal-body {
  background: transparent !important;
  color: var(--text-1) !important;
}

.progress {
  background-color: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
}

.progress-bar {
  background-color: var(--gold-500) !important;
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent) !important;
}

.modal-title,
.ui-dialog-title,
.FormBaslik {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  position: relative !important;
  padding-bottom: 8px !important;
}
.modal-title::after,
.ui-dialog-title::after,
.FormBaslik::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--gold-500);
}

/* Modal Form Tabs (Giris Yap / Kayit Ol) */
.FTarget .FGenY50 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--sp-2) !important;
  font-weight: 600 !important;
  font-size: var(--fs-md) !important;
  box-sizing: border-box !important;
  transition: all 150ms ease !important;
}
.FTarget .FGenY50:first-child {
  border-top-left-radius: var(--r-lg) !important;
}
.FTarget .FGenY50:nth-child(2) {
  border-top-right-radius: var(--r-lg) !important;
}
.FTarget .FGenY50[style*="background-color:gray"],
.FTarget .FGenY50[style*="background-color: gray"] {
  background: var(--bg-1) !important;
  color: var(--text-3) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.FTarget .FGenY50:not([style*="background-color:gray"]):not([style*="background-color: gray"]) {
  background: var(--bg-2) !important;
  color: var(--gold-300) !important;
  border-bottom: 2px solid var(--gold-500) !important;
}

/* Modal / Form Body & Inputs */
.FFooter {
  background: transparent !important;
  padding: var(--sp-4) !important;
  box-sizing: border-box !important;
}

.Mtr54Text {
  color: var(--text-2) !important;
  font-weight: 500 !important;
  font-size: var(--fs-sm) !important;
  display: flex !important;
  align-items: center !important;
}

.modal input,
.modal select,
.modal textarea,
.FTarget input,
.FTarget select,
.FTarget textarea,
input.FGenY,
input.Mtr54,
.fbox input {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-1) !important;
  padding: 8px 12px !important;
  font-family: var(--font-ui) !important;
  font-size: var(--fs-sm) !important;
  box-sizing: border-box !important;
}
.modal input::placeholder,
.FTarget input::placeholder,
input.FGenY::placeholder {
  color: var(--text-3) !important;
}
.modal input:focus,
.FTarget input:focus,
input.FGenY:focus {
  border-color: var(--gold-500) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}

/* Modal & Form Buttons */
.btn-success,
#KullGirisButonGirisYap{
  background: var(--action) !important;
  border: none !important;
  color: var(--text-on-action) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-1) !important;
  transition: all 150ms ease !important;
}
.btn-success:hover,
#KullGirisButonGirisYap:hover {
  background: var(--action-hover) !important;
  transform: translateY(-1px) !important;
}
.btn-success:active,
#KullGirisButonGirisYap:active {
  background: var(--action-press) !important;
  transform: translateY(0) !important;
}

.btn-primary,
#KullFaceNickKaydetButon {
  background: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-600) 100%) !important;
  border: none !important;
  color: var(--text-on-gold) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-1) !important;
  transition: all 150ms ease !important;
}
.btn-primary:hover,
#KullFaceNickKaydetButon:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary,
#KullGirisButonMisafir,
#DlgButonIptal,
#DlgButonHayir,
#DlgButonKapat {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-md) !important;
  font-weight: 500 !important;
  transition: all 150ms ease !important;
}
.btn-secondary:hover,
#KullGirisButonMisafir:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
  border-color: var(--gold-500) !important;
  transform: translateY(-1px) !important;
}

.btn-close,
.btn-close-white {
  filter: invert(1) opacity(0.7) !important;
}
.btn-close:hover {
  filter: invert(1) opacity(1) !important;
}

.tooltip, .ui-tooltip {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
  font-size: var(--fs-xs) !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-1) !important;
}

/* ==========================================================================
   7. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (min-width: 1280px) {
  #SalonSolAna {
    width: calc(100% - 280px) !important;
    float: left !important;
  }
  #SalonSagAna {
    width: 280px !important;
    float: right !important;
    display: block !important;
  }
  #SalonMasalar {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
    gap: var(--sp-3) !important;
  }
  .Mtr62Tekil {
    margin: 0 !important;
  }
}

@media (max-width: 1279px) and (min-width: 768px) {
  #SalonSolAna {
    width: calc(100% - 220px) !important;
    float: left !important;
  }
  #SalonSagAna {
    width: 220px !important;
    float: right !important;
    display: block !important;
  }
  #SalonMasalar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-3) !important;
  }
  .Mtr62Tekil {
    margin: 0 !important;
  }
}

@media (max-width: 767px) {
  #SalonSolAna {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }
  #SalonSagAna {
    display: none !important;
  }
  #SalonSagAna.acik {
    display: block !important;
    position: fixed !important;
    top: 64px !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    z-index: 1000 !important;
    box-shadow: var(--shadow-2) !important;
  }
  #SalonMasalar {
    display: block !important;
  }
  .Mtr62Tekil {
    width: 100% !important;
    margin: var(--sp-2) 0 !important;
    box-sizing: border-box !important;
  }
  #Mtr62mcs,
  .Mtr62mcs {
    flex-direction: column !important;
  }
  .Mtr621 {
    width: 100% !important;
    min-width: 100% !important;
    height: 180px !important;
  }
  .Mtr622 {
    width: 100% !important;
    height: auto !important;
    margin-top: var(--sp-2) !important;
  }
  .Mtr62BilgiDiv {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px var(--sp-2) !important;
  }
  #Mtr62BilgiPuan {
    grid-column: span 2 !important;
  }
  #AnaUstPanel {
    padding: 0 var(--sp-2) !important;
  }
  #AnaUstPanelExt {
    display: flex !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
  }
  #YaziKutusuSalon {
    padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom)) !important;
  }
  .MobilGizle {
    display: none !important;
  }
  #GonderButonMobilDiv {
    display: inline-flex !important;
    min-width: 65px !important;
    height: 40px !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--fs-sm) !important;
    font-weight: 600 !important;
  }
  #GonderButonDiv {
    display: none !important;
  }
  button, .btn, input {
    min-height: 40px !important;
  }
}

/* ==========================================================================
   8. LAYOUT FIXES (override legacy colors.css / system.css positioning)
   ========================================================================== */

/* --- 8.1 Header: legacy .DivOrtala uses top:50% + translateY(-50%), which
   double-shifts items inside the flex header. Neutralise it there. --- */
#AnaUstPanel .DivOrtala,
#AnaUstPanelExt > div {
  top: auto !important;
  transform: none !important;
  float: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#AnaUstPanel {
  gap: 8px !important;
  overflow: visible !important;
  /* wrap lets oyun.js detect overflow (offset().top > 25) and switch the
     right-hand group into its dropdown mode instead of clipping it */
  flex-wrap: wrap !important;
  align-content: center !important;
  z-index: 1001 !important;
}
#AnaUstPanel > :not(.Gizli) {
  flex-shrink: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
}
#AnaUstPanel > .AnaUstPanelButonDis,
#AnaUstPanel > .DivOrtala { margin: 0 !important; }
#AnaUstPanel .btn { margin: 0 !important; }
#Amenu,
#AnaButonSalonlar,
#AnaButonBildirimler,
#AnaButonGenislet { height: 40px !important; }
#RadioNowPlayingTicker {
  flex: 0 1 280px !important;
  min-width: 140px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#RadioNowPlayingTicker .RadioTickerInner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
}
#RadioNowPlayingTicker .RadioTickerTrack {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#AnaUstPanelExt {
  margin-left: auto !important;
  height: 100% !important;
  gap: 8px !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
/* legacy markup relied on float:right, i.e. reversed DOM order */
#AnaUstPanelExt { flex-direction: row-reverse !important; justify-content: flex-start !important; }
#AnaUstPanelExt > div > .btn:not(.Gizli) {
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}
#RadioPlayer {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 150px !important;
  height: 48px !important;
  padding: 2px 10px !important;
  margin: 0 !important;
}
#RadioPlayer > div:first-child {
  top: 0 !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#RadioPlayer > div:last-child { height: auto !important; }
#radio_song_title { left: 0 !important; }

/* --- 8.2 Lobby table cards: legacy colors.css forces height:190px and an
   absolutely positioned info list, which clips text and the stake badge. --- */
#SalonMasalar {
  align-content: start !important;
  align-items: start !important;
}
#SalonMasalar .Mtr62Tekil {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 12px !important;
}
#SalonMasalar .Mtr62Tekil #Mtr62mcs { height: auto !important; }
#SalonMasalar .Mtr621 {
  flex: 0 0 55% !important;
  height: auto !important;
  min-height: 170px !important;
}
#SalonMasalar .Mtr622 {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 8px !important;
  position: relative !important;
}
#SalonMasalar .Mtr62BilgiDiv {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
}
#SalonMasalar #Mtr62BilgiIconDiv {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: auto !important;
}
#SalonMasalar .Mtr62Bilgi:not(#Mtr62BilgiPuan) {
  width: 100% !important;
  padding: 0 4px !important;
  text-indent: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-content: flex-start !important;
  background-image: none !important;
}
#SalonMasalar .Mtr62Bilgi::before,
#SalonMasalar .Mtr62Bilgi::after { display: none !important; }
#SalonMasalar #Mtr62BilgiPuan {
  margin: 0 0 6px 0 !important;
  align-self: center !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}
/* "İzleyiciler : 0" and "Başlamadı" are useful; keep list compact */
#SalonMasalar .Mtr62Bilgi:empty { display: none !important; }
#SalonMasalar .Mtr62OrtaDiv { table-layout: fixed !important; }
#SalonMasalar .Mtr62OrtaDiv td.Mtr62IzleDiv { width: 50px !important; }

/* --- 8.3 Chat topic bar: checkbox and marquee overlapped --- */
#SalonOdaTopicDiv {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 40px !important;
  padding: 0 10px !important;
  overflow: hidden !important;
}
#SalonOdaTopicDiv > * { float: none !important; position: static !important; }
#SalonOdaTopicSabit { display: none !important; }
#SalonOdaTopicDiv .SalonScrollIslev {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
#SalonOdaTopicDiv .SalonScrollIslev label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  color: var(--text-2) !important;
}
#SalonOdaTopic {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  border: none !important;
}

/* --- 8.4 Icon-less buttons: original sprites were removed by the theme --- */
#TemizleButonDiv::before { content: '🧹'; font-size: 14px; }
#SalonNicklerSolButonDiv::before { content: '«'; font-size: 20px; line-height: 1; }
#SalonNicklerSagButonDiv::before { content: '»'; font-size: 20px; line-height: 1; }
#SalonNicklerSolButonDiv.Gizli,
#SalonNicklerSagButonDiv.Gizli { display: none !important; }
#SalonNicklerSagButonDiv {
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
}
#SalonSagAna { position: relative !important; }

/* --- 8.5 Tab bar: use UI font like the rest of the app --- */
.tabButon, .tabButonOrtak, .tabButon *, .tabButonOrtak * {
  font-family: var(--font-ui) !important;
}
#SalonMasalar {
  height: auto !important;
  grid-auto-rows: max-content !important;
}
#SalonMasaContainer { overflow-y: auto !important; }
#SalonMasalar #Mtr62IzleButon {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
}

/* Header gets crowded below ~1440px: the ticker duplicates the radio widget */
@media (max-width: 1919px) {
  #AnaUstPanel > #RadioNowPlayingTicker { display: none !important; }
}
@media (max-width: 1919px) {
  #AnaUstPanelExt { gap: 6px !important; }
}

/* Compact mode (table tab / narrow): JS turns #AnaUstPanelExt into a
   dropdown (.AnaUstPanelExtPos) toggled by #AnaUstPanelExtButon. */
#AnaUstPanelExt.Gizli,
#AnaUstPanelExt .btn.Gizli { display: none !important; }
#AnaUstPanelExt.AnaUstPanelExtPos {
  position: absolute !important;
  top: 64px !important;
  right: 8px !important;
  left: auto !important;
  height: auto !important;
  max-width: calc(100vw - 16px) !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  padding: 10px !important;
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-2) !important;
  z-index: 1000 !important;
  width: max-content !important;
  max-width: min(560px, calc(100vw - 16px)) !important;
}
#AnaUstPanelExt.AnaUstPanelExtPos > div,
#AnaUstPanelExt.AnaUstPanelExtPos > div > .btn { width: auto !important; flex: 0 0 auto !important; }
#AnaUstPanelExt.AnaUstPanelExtPos.MobilGizle:not(.Gizli) { display: flex !important; }
#AnaUstPanelExtButon:not(.Gizli) { display: inline-flex !important; height: 40px !important; }
#AnaUstPanelExtButon.Gizli { display: none !important; }

/* --- 8.6 Table (Masa) tab: bottom chat + player list were still legacy
   white/grey, and the input row overflowed the viewport. --- */
.MasaOkeyAlt, #MasaOkeyAlt {
  background: var(--bg-1) !important;
  border-top: 1px solid var(--border-subtle) !important;
  display: flex !important;
  overflow: hidden !important;
}
#MasaMesajContainer, .MasaMesajContainer {
  background: var(--bg-1) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
}
#MasaYaziAlani {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
}
#MasaYaziTahtasi {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  background: var(--bg-0) !important;
  color: var(--text-1) !important;
  padding: 8px 12px !important;
  border: none !important;
}
#YaziKutusuMasa { flex: 0 0 auto !important; }
#MasaYaziAlani .SabitSagUst {
  top: 6px !important;
  right: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--text-2) !important;
  font-size: var(--fs-xs) !important;
  z-index: 2 !important;
}
#MasaYaziAlani .SabitSagUst input { accent-color: var(--gold-500) !important; }
#MasaNickContainer, .MasaNickContainer {
  background: var(--bg-1) !important;
  border: none !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--border-subtle) !important;
  overflow-y: auto !important;
}
#MasaNickler .SalonNickListeTekil {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  width: auto !important;
  margin: 6px !important;
}
#MasaNickler .SalonNickListeTekil * { color: var(--text-1) !important; }

/* Table info card (top-left): one card, table number as title, corner
   visual inside the card instead of hanging off its edge */
#MasaPanelSol { left: 12px !important; top: 12px !important; }
#Mtr251Info, .Mtr251Info {
  position: relative !important;
  min-width: 150px !important;
  padding: 10px 12px !important;
  background: rgba(10, 17, 14, 0.72) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-1) !important;
  backdrop-filter: blur(4px);
  color: var(--text-2) !important;
  font: 500 12px/1.6 var(--font-ui) !important;
}
#Mtr251Info #MasaAyarlarDiv, #Mtr251Info #MasaAyarlarDiv2 {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--text-2) !important;
}
#Mtr251Info #MasaAyarlarDiv::first-line { font: 700 15px/1.8 var(--font-display); color: var(--ivory-100); }
#Mtr251Info #MasaAyarlarDiv2 {
  display: block !important;
  width: 100% !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-3) !important;
}
#Mtr251Info #Mtr62BilgiOzelIcon:not(.Gizli) {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
}
#Mtr251Info:has(#Mtr62BilgiOzelIcon:not(.Gizli)) { padding-right: 42px !important; }

/* Empty seat avatar placeholders */
.MasaNickOrtak #MasaResimDiv {
  border: 1px dashed var(--border-strong) !important;
  background: var(--bg-2) !important;
  border-radius: var(--r-md) !important;
}

/* --- 8.7 Small screens --- */
@media (max-width: 767px) {
  #AnaUstPanel { gap: 6px !important; padding: 0 8px !important; }
  #AnaUstPanel #AnaUstHGExt,
  #AnaUstPanel > #RadioNowPlayingTicker,
  #AnaUstPanel .AnaUstPanelButonDis:has(#AnaButonGenislet) { display: none !important; }
  #SalonMasalar .Mtr621,
  #SalonMasalar .Mtr622 { flex: none !important; width: 100% !important; }
  #SalonMasalar .Mtr621 { height: 170px !important; }
  #SalonMasalar .Mtr62BilgiDiv { display: grid !important; }
  #SalonUstMenu { flex-wrap: nowrap !important; gap: 6px !important; padding: 8px !important; }
  #SalonUstMenu .SalonMasaFiltreDiv { flex: 1 1 auto !important; min-width: 0 !important; }
  #SalonMesajContainer { height: 200px !important; }
}

/* Lobby column: JS sets a fixed px height on #SalonOrtaKisim that ignores the
   themed toolbar/input heights, pushing the chat input off-screen. */
#SalonSolAna { display: flex !important; flex-direction: column !important; }
#SalonSolAna > #SalonUstMenu,
#SalonSolAna > #YaziKutusuSalon { flex: 0 0 auto !important; }
#SalonSolAna > #SalonOrtaKisim { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; }
#AnaUstPanelExt > div:has(> .btn.Gizli:only-child) { display: none !important; }

/* Occupied seat: theme's #SalonMasa*Buton display rule beat .Gizli, leaving a
   stray "Oyna" next to the player chip */
#SalonMasalar .SalonOynaOrtak.Gizli { display: none !important; }

/* --- 8.8 Game table: center the rack (was pinned left by absolute pos) and
   stop clipping player names --- */
#MasaOkeyOrta #masatable {
  position: relative !important;
  margin: 0 auto !important;
  top: 18px !important;
  left: auto !important;
}
.MasaNickYatay.MasaNickOrtak { max-width: 220px !important; }
.MasaNickOrtak #MasaNickDiv {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 140px !important;
}
#MasaOkeyUst { padding-top: 12px !important; box-sizing: border-box !important; }

/* --- 8.9 "Menü" dropdown: legacy colors.css gave every item its own loud
   colour (one even dark-on-dark). One consistent list instead. --- */
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-2) !important;
  padding: 6px !important;
  min-width: 240px !important;
  width: 240px !important;
  z-index: 2000 !important;
}
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) .AnaUstYaziDv { display: flex !important; flex-direction: column !important; gap: 2px !important; }
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
  color: var(--text-1) !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  transform: none !important;
}
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) .dropdown-item::before { display: none !important; content: none !important; }
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) .dropdown-item i { color: var(--gold-400) !important; font-size: 16px !important; width: 18px !important; }
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) .dropdown-item:hover { background: var(--bg-3) !important; color: var(--gold-300) !important; }
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) .dropdown-item.Gizli { display: none !important; }
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) #exmodul { display: contents !important; }
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) #cikis {
  margin-top: 4px !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
  color: #F08A7E !important;
}
:is(#dropdownnotifyButton, #AnaUstDurumDlgAlt) #cikis i { color: #F08A7E !important; }

/* --- 8.10 Modal close: theme's background shorthand wiped Bootstrap's X --- */
.modal-header .btn-close {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-2) !important;
}
.modal-header .btn-close::before { content: '✕'; font-size: 14px; line-height: 1; }
.modal-header .btn-close:hover { color: var(--gold-300) !important; border-color: var(--gold-500) !important; filter: none !important; }

/* Lobby seat chips: keep top/bottom chip clear of the table-number badge and
   let side chips show (ellipsised) names instead of a single letter */
#SalonMasalar .Mtr62Nick:not(.Gizli) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#SalonMasalar #SalonMasaUstNick,
#SalonMasalar #SalonMasaAltNick { max-width: calc(100% - 72px) !important; }
#SalonMasalar .Mtr62Nick > div {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#SalonMasalar .Mtr62Nick img { flex-shrink: 0 !important; }
#SalonMasalar #SalonMasaSolNick,
#SalonMasalar #SalonMasaSagNick { padding: 3px 6px !important; gap: 4px !important; }
#SalonMasalar #SalonMasaSolNick img,
#SalonMasalar #SalonMasaSagNick img { width: 18px !important; height: 18px !important; }

/* Pre-game rack buttons: "Masa Ayarları" was a plain grey legacy button */
.MasaAyar.butonSalonUstPanel {
  background: var(--bg-2) !important;
  color: var(--gold-300) !important;
  border: 1px solid var(--gold-600) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-1) !important;
}
.MasaAyar.butonSalonUstPanel:hover { border-color: var(--gold-400) !important; background: var(--bg-3) !important; }

/* Status dropdown extras (shares the menu rules in 8.9) */
#AnaUstDurumDlgAlt .AnaUstYaziDv { background: transparent !important; }
#AnaUstDurumDlgAlt hr { border-color: var(--border-subtle) !important; opacity: 1 !important; }
#AnaUstDurumDlgAlt #AnaNickMDiv, #AnaUstDurumDlgAlt #AnaPingMDiv { color: var(--text-1) !important; }
#AnaUstDurumDlgAlt #AnaUstCevrimiciBtn i { color: var(--success) !important; }
#AnaUstDurumDlgAlt #AnaUstMesgulBtn i { color: var(--danger) !important; }
#AnaUstDurumDlgAlt #AnaUstUzaktaBtn i { color: var(--warning) !important; }
#AnaUstDurumDlgAlt #AnaUstDurumGosterBtn i { color: var(--text-2) !important; }

/* --- 8.11 Online-status dots: theme painted the own-avatar dot always green.
   One dot style for avatar + nick list, coloured by the status class. --- */
#AnaAvatarDurumDiv.LbDrmOnl, .IconNLD.LbDrmOnl { background: var(--success) !important; }
#AnaAvatarDurumDiv.LbDrmMsg, .IconNLD.LbDrmMsg { background: var(--danger) !important; }
#AnaAvatarDurumDiv.LbDrmUzk, .IconNLD.LbDrmUzk { background: var(--warning) !important; }
.IconNLD.LbDrmOnl, .IconNLD.LbDrmMsg, .IconNLD.LbDrmUzk {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  border: 2px solid var(--bg-2) !important;
  background-image: none !important;
}

/* --- 8.12 Background: replace legacy slate/navy gradients with tokens so the
   "Zemin" switch and the green system apply everywhere --- */
body, body.Mtr5896842, #AnaAltPanel { background: var(--bg-0) !important; }
#SalonMasaContainer { background: radial-gradient(ellipse at 50% 0%, var(--bg-2) 0%, var(--bg-0) 70%) !important; }
#MasaIcerikDiv, body.Mtr5896842 #MasaIcerikDiv {
  background: var(--felt-pattern), radial-gradient(ellipse at 50% 40%, var(--felt-2) 0%, var(--felt-3) 55%, var(--bg-0) 100%) !important;
  isolation: isolate !important;
}

/* --- 8.13 iframe dialogs (Masa Görsel, İstek, Top20, Turnuva): let the
   page fill the dialog instead of a box-in-a-box --- */
#extramodal .modal-dialog { max-width: min(720px, calc(100vw - 24px)) !important; }
#extramodal .modal-body { padding: 0 !important; }
#extramodal .modal-body iframe {
  display: block !important;
  width: 100% !important;
  height: min(72vh, 680px) !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  background: var(--bg-1) !important;
}
#extramodal .modal-body:has(iframe) ~ .modal-footer { display: none !important; }

/* Status reason list (Meşgul / Uzakta dialog) */
#modalOnlineDurumDegis #SlctDrmMsg {
  width: 100% !important;
  padding: 6px !important;
  background: var(--bg-0) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text-1) !important;
  font: 500 var(--fs-sm) var(--font-ui) !important;
  outline: none !important;
}
#modalOnlineDurumDegis #SlctDrmMsg option { padding: 8px 10px !important; border-radius: 6px !important; }
#modalOnlineDurumDegis #SlctDrmMsg option:checked {
  background: var(--gold-500) linear-gradient(0deg, var(--gold-500), var(--gold-500)) !important;
  color: var(--text-on-gold) !important;
}
#modalOnlineDurumDegis #description1 { color: var(--text-2) !important; font-size: var(--fs-xs) !important; margin-bottom: 6px !important; }

/* --- 8.14 Felt surfaces read the theme tokens (beats colors.css
   "body.Mtr5896842 .Mtr621" hard-coded emerald) --- */
#SalonMasalar .Mtr621, body.Mtr5896842 #SalonMasalar .Mtr621 {
  background: var(--felt-pattern), radial-gradient(ellipse at 50% 40%, var(--felt-1), var(--felt-2) 60%, var(--felt-3)) !important;
  isolation: isolate !important;
  border: 3px solid var(--felt-edge) !important;
}

/* Sidebar + chat containers: colors.css painted them slate-navy */
#SalonNickContainer, #SalonMesajContainer { background-color: var(--bg-1) !important; }
#SalonNickler .SalonNickListeTekil {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
#SalonNickler .SalonNickListeTekil:hover { border-color: var(--border-strong) !important; }


/* ==========================================================================
   9. TABLES, EMBLEMS, HEADER (round 4)
   ========================================================================== */
/* Theme emblem as watermark on every felt (lobby card + game table) */
#SalonMasalar .Mtr621::before,
#MasaIcerikDiv::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  display: block !important;
  background: var(--felt-mark) center / auto 70% no-repeat !important;
  opacity: .42 !important;
  border: 0 !important;
}
#MasaIcerikDiv::before { background-size: auto 46% !important; background-position: 50% 42% !important; opacity: .18 !important; }

/* Lobby: fewer, larger, landscape tables */
@media (min-width: 1280px) {
  #SalonMasalar { grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) !important; }
}
#SalonMasalar .Mtr621 { flex: 0 0 60% !important; min-height: 210px !important; border-radius: 26px !important; }
#SalonMasalar .Mtr62OrtaDiv { margin: auto 0 !important; }

/* Corner visual: readable size, framed, top-right of the felt */
#SalonMasalar #Mtr62BilgiOzelIcon:not(.Gizli) {
  display: block !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
  z-index: 5 !important;
}
#Mtr251Info #Mtr62BilgiOzelIcon:not(.Gizli) { width: 40px !important; height: 40px !important; border-radius: 10px !important; }
#Mtr251Info:has(#Mtr62BilgiOzelIcon:not(.Gizli)) { padding-right: 58px !important; }

/* Header: taller row, larger avatar, name not truncated */
#AnaUstPanel, .AnaUstPanel { height: 72px !important; min-height: 72px !important; padding: 0 16px !important; }
#AnaUstPanelExt.AnaUstPanelExtPos { top: 72px !important; }
#AnaUstPanel .AnaUstPanelHG { gap: 10px !important; height: 56px !important; padding: 0 10px 0 0 !important; border-radius: 30px !important; }
#AnaUstPanel .AnaUstPanelHG:hover { background: var(--bg-2) !important; }
#AnaAvatarDiv { width: 52px !important; height: 52px !important; transform: none !important; margin: 0 !important; }
#AnaAvatarImg {
  width: 52px !important; height: 52px !important; margin: 0 !important;
  border-radius: 50% !important; object-fit: cover !important;
  border: 2px solid var(--gold-500) !important; box-sizing: border-box !important;
}
#AnaAvatarDurumDiv { left: auto !important; top: auto !important; right: 0 !important; bottom: 0 !important; width: 14px !important; height: 14px !important; z-index: 2 !important; }
#AnaUstHGExt { height: auto !important; max-width: 200px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 2px !important; }
#AnaNickDiv { font-size: 15px !important; line-height: 1.2 !important; max-width: 200px !important; height: auto !important; }
#AnaPingDiv { line-height: 1.2 !important; height: auto !important; }

/* Nick list status dot: bottom-right of the avatar, not the card corner */
#SalonNickler [id=SalonNickListeOnlDurum].IconNLD { left: 44px !important; top: auto !important; bottom: 12px !important; }

/* ==========================================================================
   10. SPECTATE + SIDEBAR (round 5)
   ========================================================================== */
/* İzle: out of the seat ring, a labelled pill in the felt's bottom-right */
#SalonMasalar .Mtr62IzleDiv { width: 0 !important; padding: 0 !important; }
#SalonMasalar #Mtr62IzleButon {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  margin: 0 !important;
  padding: 0 12px 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border-radius: var(--r-pill) !important;
  background: rgba(10, 17, 14, .72) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: var(--ivory-100) !important;
  font: 600 12px var(--font-ui) !important;
  z-index: 4 !important;
}
#SalonMasalar #Mtr62IzleButon > div { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; background-size: 100% !important; font-size: 0 !important; }
#SalonMasalar #Mtr62IzleButon::after { content: 'İzle'; }
#SalonMasalar #Mtr62IzleButon:hover { background: rgba(10, 17, 14, .9) !important; border-color: var(--gold-400) !important; transform: none !important; }

/* Spectator banner inside the game table */
.IzleyiciBant {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 420px);
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(10, 17, 14, .86);
  border: 1px solid var(--gold-600);
  box-shadow: var(--shadow-2);
  color: var(--text-2);
  font: 500 13px var(--font-ui);
  white-space: nowrap;
}
.IzleyiciBant > i { color: var(--gold-400); font-size: 16px; }
.IzleyiciBant b { color: var(--gold-300); font-weight: 700; }
.IzleyiciBant span { overflow: hidden; text-overflow: ellipsis; }
.IzleyiciCik {
  flex-shrink: 0; height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  border: 0; background: var(--gold-500); color: var(--text-on-gold);
  font: 700 12px var(--font-ui); cursor: pointer;
}
.IzleyiciCik:hover { background: var(--gold-300); }
/* top seat moves down a little so the banner never covers it */
.IzleyiciModu .MasaNickUstDis { margin-top: 44px !important; }

/* Sidebar tabs: icon + label instead of three bare pictures */
#SalonListeButonAlani {
  display: flex !important;
  gap: 4px !important;
  height: auto !important;
  padding: 8px !important;
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
#SalonListeButonAlani > .btn {
  position: relative !important;
  flex: 1 1 0 !important;
  width: auto !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-3) !important;
  font: 600 11px var(--font-ui) !important;
}
#SalonListeButonAlani > .btn > .IconYazi { width: 24px !important; height: 24px !important; margin: 0 !important; background-size: contain !important; }
#SalonListeRumuzlarButonDis::after { content: 'Oyuncular'; }
#SalonListeArkadasButonDis::after { content: 'Arkadaşlar'; }
#SalonListeAramaButonDis::after { content: 'Ara'; }
#SalonListeButonAlani > .btn:hover { background: var(--bg-2) !important; color: var(--text-1) !important; }
#SalonListeButonAlani > .btn.SalonListeAktifButon,
#SalonListeButonAlani > .btn.aktif { background: var(--bg-3) !important; border-color: var(--border-strong) !important; color: var(--gold-300) !important; }
#SalonListeButonAlani #Mtr9874 {
  position: absolute !important; top: 4px !important; right: calc(50% - 26px) !important; left: auto !important;
  min-width: 18px !important; height: 18px !important; padding: 0 5px !important;
  border-radius: 9px !important; background: var(--gold-500) !important; color: var(--text-on-gold) !important;
  font: 700 11px/18px var(--font-ui) !important; text-align: center !important; border: 0 !important;
}

/* Own-profile shortcuts */
.ProfilKisayol {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-1);
}
.ProfilKisayol button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); font: 500 11px var(--font-ui); cursor: pointer;
}
.ProfilKisayol button i { font-size: 18px; color: var(--gold-400); }
.ProfilKisayol button:hover { background: var(--bg-2); color: var(--text-1); }
.ProfilKisayol button:focus-visible { outline: none; box-shadow: var(--ring); }
.ProfilKisayol button.KayitGast { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 8px; padding: 8px 0; background: var(--gold-400); color: #1a1206; font-weight: 700; font-size: 13px; }
.ProfilKisayol button.KayitGast i { color: inherit; }
.ProfilKisayol button.KayitGast.Gizli { display: none; }

/* Player cards: larger avatar and name, same footprint */
#SalonNickler .SalonNickListeTekil {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 68px !important;
  min-height: 68px !important;
  margin: 6px 8px !important;
  padding: 0 12px !important;
  width: auto !important;
}
#SalonNickler .SalonNickListeAvatar { position: static !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; margin: 0 !important; }
#SalonNickler #SalonNickListeImg { width: 48px !important; height: 48px !important; border-radius: 50% !important; background-size: cover !important; background-position: center !important; box-shadow: 0 0 0 2px var(--border-strong) !important; }
#SalonNickler .SalonNickListeText { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; position: static !important; table-layout: fixed !important; }
#SalonNickler .NSatir1, #SalonNickler .NSatir2 { padding: 0 !important; height: auto !important; }
#SalonNickler .SalonNickListeNickStr { font: 600 15px/1.3 var(--font-ui) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important; }
#SalonNickler #SalonNickListePuanStr { color: var(--gold-300) !important; font: 600 13px var(--font-ui) !important; }
#SalonNickler [id=SalonNickListeOnlDurum].IconNLD { left: 48px !important; top: 46px !important; bottom: auto !important; }
#SalonNickler #SalonNickListeRozetDiv { left: 6px !important; top: 6px !important; }

/* ==========================================================================
   11. SEATS ON LOBBY TABLES (round 6)
   One seat size for free ("Oyna") and taken (name chip): 36px tall, centred
   on its side, with an even inset from the felt edge.
   ========================================================================== */
#SalonMasalar .Mtr621 { padding: 18px 20px !important; }
#SalonMasalar .SalonOynaOrtak:not(.Gizli) {
  height: 36px !important;
  min-width: 92px !important;
  padding: 0 20px !important;
  font: 700 14px/36px var(--font-ui) !important;
  letter-spacing: .01em !important;
  border-radius: var(--r-pill) !important;
}
#SalonMasalar .Mtr62Nick:not(.Gizli) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 14px 0 4px !important;
  background: rgba(10, 17, 14, .82) !important;
  border: 1px solid var(--gold-500) !important;
  color: var(--ivory-100) !important;
  font: 600 13px/1 var(--font-ui) !important;
}
#SalonMasalar .Mtr62Nick img { width: 28px !important; height: 28px !important; border-radius: 50% !important; object-fit: cover !important; flex: 0 0 28px !important; margin: 0 !important; }
#SalonMasalar .Mtr62Nick > div { flex: 0 1 auto !important; text-align: left !important; width: auto !important; }
/* top/bottom seats leave room for the number badge and İzle pill */
#SalonMasalar #SalonMasaUstNick, #SalonMasalar #SalonMasaAltNick { max-width: calc(100% - 150px) !important; }
/* side seats: half the felt each, chip hugs its edge */
#SalonMasalar .Mtr62OrtaDiv td#SalonMasaSolDiv, #SalonMasalar .Mtr62OrtaDiv td#SalonMasaSagDiv { width: 50% !important; }
#SalonMasalar #SalonMasaSolNick, #SalonMasalar #SalonMasaSagNick { max-width: calc(100% - 6px) !important; padding: 0 12px 0 4px !important; gap: 6px !important; }
#SalonMasalar #SalonMasaSolNick img, #SalonMasalar #SalonMasaSagNick img { width: 28px !important; height: 28px !important; }
#SalonMasalar #SalonMasaUstDiv td, #SalonMasalar #SalonMasaAltDiv td { text-align: center !important; }

/* ==========================================================================
   12. CHAT TOOLS + LIGHT BACKGROUNDS (round 7)
   ========================================================================== */
/* Chat bar buttons: one size, even gaps (lobby and table) */
.YaziKutusuGenel .FormAyarLbl { display: flex !important; align-items: center !important; gap: 6px !important; }
.YaziKutusuGenel :is(#TemizleButonDiv, #IsmarlaButonDiv, #ResuploadDiv, #GulButonDiv, #NickTabButonDiv, #GonderButonDiv):not(.Gizli) {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  margin: 0 !important; border-radius: var(--r-md) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important; flex-shrink: 0 !important;
}
.YaziKutusuGenel #TemizleButonDiv { background: var(--bg-3) !important; border: 1px solid var(--border-strong) !important; order: 6 !important; }

/* Smiley / İsmarla pickers: floating panel above the input, never clipped */
.SmileyClass:not(.Gizli) {
  position: fixed !important;
  /* JS puts it above the button that opened it (--pop-*) */
  left: var(--pop-left, auto) !important;
  top: auto !important;
  right: var(--pop-right, 16px) !important;
  bottom: var(--pop-bottom, 76px) !important;
  width: min(400px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: min(420px, calc(100vh - 160px)) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 6px !important;
  padding: 0 12px 12px !important;
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-2) !important;
  z-index: 1500 !important;
}
.SmileyClass::before {
  flex: 0 0 100%;
  position: sticky; top: 0; z-index: 1;
  margin: 0 -12px 4px; padding: 12px 14px 10px;
  background: var(--bg-1); border-bottom: 1px solid var(--border-subtle);
  font: 700 14px var(--font-ui); color: var(--text-1);
}
#IsmarlaNesneDiv::before { content: 'Bir şey ısmarla'; }
#GulNesneDiv::before { content: 'Gülücükler'; }
.SmileyClass > div[style*="clear"] { display: none !important; }
.SmileyClass #IsmarlaMenu {
  flex: 0 0 100% !important; float: none !important; margin: 0 0 4px !important;
  height: 32px !important; border-radius: var(--r-sm) !important; font: 600 12px/32px var(--font-ui) !important; text-align: center !important;
}
.SmileyClass .IsmarlaClassIc {
  float: none !important; margin: 0 !important; width: 68px !important; height: 68px !important; padding: 6px !important;
  border-radius: 10px !important; background: var(--bg-2) !important; border: 1px solid var(--border-subtle) !important; cursor: pointer !important;
}
.SmileyClass .IsmarlaClassIc img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.SmileyClass .SmileyClassIc {
  float: none !important; margin: 0 !important; width: 42px !important; height: 42px !important;
  display: grid !important; place-items: center !important; border-radius: 8px !important; cursor: pointer !important;
  background: transparent !important; border: 0 !important;
}
.SmileyClass :is(.IsmarlaClassIc, .SmileyClassIc):hover { background: var(--bg-3) !important; border-color: var(--gold-500) !important; }

/* Light backgrounds: surfaces that were hard-coded dark follow the tokens */
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) :is(.Mtr622, #SalonYaziTahtasi, #MasaYaziTahtasi, .Mtr62Tekil, #SalonOdaTopicDiv) {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) .Mtr62Bilgi:not(#Mtr62BilgiPuan) { color: var(--text-2) !important; }
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) .Mtr62Bilgi b { color: var(--text-1) !important; }
/* chat input keeps the remaining width */
.YaziKutusuGenel .FormAyarLbl > .FGenXIc { flex: 1 1 auto !important; min-width: 0 !important; order: -1 !important; }

/* Light backgrounds: remaining hard-coded dark bits */
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) {
  & body * { text-shadow: none !important; }
  & :is(input.FGenY, .Mtr23974, .InpFiltrele, #SalonYaziInp, #MasaOkeyYaziInp) { background: var(--bg-0) !important; color: var(--text-1) !important; border-color: var(--border-strong) !important; }
  & :is(input.FGenY, .Mtr23974, .InpFiltrele)::placeholder { color: var(--text-3) !important; }
  & :is(.tabButon, .tabButonOrtak) { background: var(--bg-2) !important; color: var(--text-1) !important; }
  & :is(.tabButon, .tabButonOrtak) * { color: var(--text-1) !important; }
  & :is(#SalonYaziAlani, #MasaYaziAlani) { background: var(--bg-2) !important; }
  & #AnaUstHGExt, & #AnaUstHGExt *:not([class*="NickRenk"]) { background: transparent !important; color: var(--text-1) !important; } /* a chosen nick style keeps its banner */
  & :is(#SalonNicklerSagButonDiv, #SalonNicklerSolButonDiv, #IsmarlaButonDiv, #ResuploadDiv, #GulButonDiv, #NickTabButonDiv, #TemizleButonDiv, .ds-btn) { background: var(--bg-3) !important; color: var(--text-1) !important; }
  & #AnaTabPanel, & #AnaUstPanel { background: var(--bg-1) !important; }
  & .SalonNickListeNickStr, & #SalonNickListePuanStr { color: var(--text-1) !important; }
}

/* ==========================================================================
   13. AVATAR DIALOG + PRE-GAME TABLE (round 8)
   ========================================================================== */
#modalavatarsetting .modal-dialog { max-width: 520px !important; }
.AvDlg { display: flex; flex-direction: column; gap: 14px; }
.AvGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.AvPick { aspect-ratio: 1; padding: 4px; border-radius: 50%; border: 2px solid transparent; background: var(--bg-2); cursor: pointer; }
.AvPick img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.AvPick:hover { border-color: var(--border-strong); }
.AvPick.sec { border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-glow); }
.AvDrop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px;
  border: 2px dashed var(--border-strong); border-radius: var(--r-md); cursor: pointer; color: var(--text-2); text-align: center;
}
.AvDrop:hover { border-color: var(--gold-500); }
.AvDrop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.AvDrop i { font-size: 28px; color: var(--gold-400); }
.AvDrop b { color: var(--text-1); font-size: 14px; }
.AvDrop span { font-size: 12px; color: var(--text-3); }
.AvCrop { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; }
.AvCrop[hidden], .AvGif[hidden], .AvPanel[hidden] { display: none !important; }
.AvCropBtns { display: flex; gap: 8px; }
.AvCrop .cr-slider-wrap { margin: 6px auto 0 !important; }
.AvGif { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--text-2); font-size: 13px; }
.AvGif img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold-500); }
.AvMsg { min-height: 18px; font-size: 13px; color: #F2B3AD; }
.AvMsg.ok { color: var(--success); }
#AnaAvatarImg, #SalonNickler #SalonNickListeImg { image-rendering: auto; }

/* Pre-game table. The info card and seats always sit on felt, so they use
   fixed light-on-dark colours regardless of the page background. */
#Mtr251Info, #Mtr251Info * { --text-1: #F3ECDA; --text-2: #C9C2AE; --text-3: #A39E8E; }
#Mtr251Info #MasaAyarlarDiv { color: #C9C2AE !important; }
#Mtr251Info #MasaAyarlarDiv2 { color: #A39E8E !important; }
.MasaNickOrtak {
  background: rgba(10, 17, 14, .78) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(4px);
}
.MasaNickOrtak #MasaNickDiv { color: #F3ECDA !important; font: 600 14px var(--font-ui) !important; }
.MasaNickOrtak #MasaResimDiv { border-radius: 12px !important; overflow: hidden !important; }
.MasaNickOrtak #MasaResimImg[src*="avatarsaydam"] { opacity: 0 !important; }
.MasaNickOrtak:has(#MasaResimImg[src*="avatarsaydam"]) #MasaResimDiv {
  background: rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A39E8E'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5Z'/%3E%3C/svg%3E") center / 50% no-repeat !important;
  border: 2px dashed rgba(255,255,255,.22) !important;
}
.MasaBotButonBg {
  background: transparent !important; border: 0 !important; box-shadow: none !important; margin-top: 4px !important;
}
#MasaButonBotArti:not(.Gizli), #MasaButonBotEksi:not(.Gizli) {
  display: inline-flex !important; align-items: center !important; height: 26px !important; padding: 0 12px !important;
  border-radius: var(--r-pill) !important; font: 600 12px var(--font-ui) !important;
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.22) !important; color: #F3ECDA !important;
}
#MasaButonBotArti:hover, #MasaButonBotEksi:hover { border-color: var(--gold-400) !important; color: #F0CC82 !important; }

/* Rack actions before the game: one family of buttons */
:is(.MasaButonOynanmiyor, .DavetEt, .MasaAyar).butonSalonUstPanel {
  height: 42px !important; padding: 0 20px !important; margin: 0 4px !important;
  border-radius: var(--r-pill) !important; font: 700 15px/42px var(--font-ui) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important; text-shadow: none !important;
}
.MasaButonOynanmiyor.butonSalonUstPanel { background: linear-gradient(180deg, #E8584E, #C23B33) !important; color: #fff !important; border: 1px solid #A3322B !important; }
.DavetEt.butonSalonUstPanel { background: rgba(10,17,14,.72) !important; color: #F3ECDA !important; border: 1px solid rgba(255,255,255,.25) !important; }
.MasaAyar.butonSalonUstPanel { background: rgba(10,17,14,.72) !important; color: #F0CC82 !important; border: 1px solid #A87B2E !important; }
:is(.DavetEt, .MasaAyar).butonSalonUstPanel:hover { border-color: #F0CC82 !important; }
#modalavatarsetting #DlgSayfaAvatarIslem { background: transparent !important; border: 0 !important; padding: 0 !important; height: auto !important; }

/* ── Header: avatar opens the avatar dialog, status has its own pill ─────── */
#AnaUstPanel #AnaPingDiv { display: none !important; }
#AnaUstPanel .AnaUstPanelHG { cursor: pointer; }
#AnaUstPanel #AnaAvatarDiv { position: relative; }
#AnaUstPanel #AnaAvatarDiv::after {
  content: "\F4C9"; /* bi-pencil-fill */
  font-family: "bootstrap-icons";
  position: absolute; left: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px;
  background: var(--gold-400); color: #1A1206;
  border: 2px solid var(--bg-1);
  opacity: 0; transition: opacity .15s;
  pointer-events: none;
}
#AnaUstPanel #AnaAvatarDiv:hover::after,
#AnaUstPanel .AnaUstPanelHG:focus-visible #AnaAvatarDiv::after { opacity: 1; }
.DurumPill {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  margin-top: 3px; padding: 2px 10px 2px 8px; min-height: 24px;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--bg-2); color: var(--text-2);
  font: 500 12px/1 var(--font-ui); cursor: pointer;
}
.DurumPill:hover, .DurumPill[aria-expanded="true"] { border-color: var(--gold-400); color: var(--text-1); }
.DurumPill:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.DurumPill .bi { font-size: 10px; opacity: .8; }
.DurumNokta { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.DurumNokta.LbDrmMsg { background: var(--danger); }
.DurumNokta.LbDrmUzk { background: var(--warning); }
#AnaUstPanel #AnaAvatarDivAsagiOk, #AnaUstPanel .AnaUstPanelButonOkAlt { display: none !important; }

/* ── Lobby table card: felt on top, only the special properties as chips ── */
#SalonMasalar { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; }
#SalonMasalar .Mtr62Tekil #Mtr62mcs { display: flex !important; flex-direction: column !important; gap: 10px !important; }
#SalonMasalar .Mtr621 { flex: none !important; width: 100% !important; min-height: 200px !important; }
#SalonMasalar .Mtr622 {
  flex: none !important; width: 100% !important; min-height: 0 !important; height: auto !important;
  padding: 0 2px !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important;
}
#SalonMasalar #Mtr62BilgiIconDiv { position: static !important; display: flex !important; gap: 4px !important; order: 2; }
#SalonMasalar #Mtr62BilgiIconDiv > div[style*="clear"],
#SalonMasalar #Mtr62BilgiIconDiv > .Gizli { display: none !important; }
#SalonMasalar .Mtr62BilgiDiv { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; gap: 6px !important; align-items: center !important; width: 100% !important; }
#SalonMasalar .Mtr62BilgiDiv > div[style*="clear"] { display: none !important; }
#SalonMasalar .Mtr62Bilgi:not(#Mtr62BilgiPuan) {
  width: auto !important; height: auto !important; min-height: 26px !important; padding: 3px 10px !important;
  border: 1px solid var(--border-subtle) !important; border-radius: 999px !important; background: var(--bg-2) !important;
  color: var(--text-2) !important; font: 500 12px/1.4 var(--font-ui) !important; display: inline-flex !important; align-items: center !important;
}
#SalonMasalar #Mtr62BilgiPuan { margin: 0 !important; order: -1; }
#SalonMasalar .Mtr62Bilgi.Std:not(#Mtr62BilgiPuan) { display: none !important; }
#SalonMasalar #Mtr62BilgiDurum { margin-left: auto !important; }
#SalonMasalar .Mtr62Tekil.Oynaniyor #Mtr62BilgiDurum { color: var(--success) !important; border-color: var(--success) !important; }
#SalonMasalar .Mtr62Tekil.Oynaniyor #Mtr62BilgiDurum::before {
  content: "" !important; display: inline-block !important; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--success);
}

/* ── Table decorations (Masa Görsel → Süsler): frame or floral corners over the
   felt. OyunSusUygula() sets --sus (file), --sus-slice and --sus-w. Sources:
   Kenney "Fantasy UI Borders" (CC0) and Paul Bürck corners (public domain). ── */
html[data-sus]:not([data-sus="yok"]) #SalonMasalar .Mtr621::after {
  content: ""; position: absolute; inset: 5px; z-index: 1; pointer-events: none;
  border: var(--sus-w, 24px) solid transparent; border-image: var(--sus) var(--sus-slice, 32) round;
}

/* Corner picture on the chosen corners (Masa Görsel → Köşe görseli). The
   lobby observer copies the inline image into --kose. */
#SalonMasalar #Mtr62BilgiOzelIcon:not(.Gizli) {
  inset: 12px !important; top: 12px !important; right: 12px !important; left: 12px !important; bottom: 12px !important;
  width: auto !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important;
  background-color: transparent !important; pointer-events: none !important; z-index: 0 !important;
  background-image: var(--kose), var(--kose), var(--kose), var(--kose) !important;
  background-size: 46px 46px !important; background-repeat: no-repeat !important;
  background-position: var(--kose-pos, right top, -9999px -9999px, -9999px -9999px, -9999px -9999px) !important;
}

/* Antrenman button next to "Yeni Masa" */
#SalonAntrenmanButon { background: transparent !important; border: 1px solid var(--gold-400) !important; color: var(--gold-400) !important; }
#SalonAntrenmanButon:hover { background: var(--gold-400) !important; color: #1A1206 !important; }

/* --- Bigger tabs and header shortcuts (easier to see and hit) --- */
#AnaTablarScroll, #AnaTablar { height: 48px !important; min-height: 48px !important; }
#AnaTablar .tabButon, #AnaTablar .tabButonOrtak {
  height: 46px !important; min-width: 120px !important; padding: 0 22px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
}
#AnaTablar .tabButon, #AnaTablar .tabButonOrtak, #AnaTablar .tabButon *, #AnaTablar .tabButonOrtak * { font-size: 16px !important; }
#AnaUstPanelExt > div > .btn:not(.Gizli) { height: 44px !important; padding: 0 20px !important; font-size: 15px !important; }
#RenkPanel::before, .turnuvabuton::before, .topon::before { width: 10px !important; height: 10px !important; }
@media (max-width: 1919px) {
  #AnaUstPanelExt > div > .btn:not(.Gizli) { height: 40px !important; padding: 0 12px !important; font-size: 14px !important; }
}
@media (max-width: 1439px) {
  #AnaUstPanelExt > div > .btn:not(.Gizli) { padding: 0 10px !important; font-size: 13px !important; }
}

/* --- Player list: staff badges and player ranks --- */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolRozet {
  display: inline-flex !important; align-items: center; gap: 4px; height: 18px; padding: 0 7px 0 5px;
  margin-left: 6px; border-radius: 999px; font: 700 11px/1 var(--font-ui); letter-spacing: .01em;
  white-space: nowrap; vertical-align: middle; color: #fff !important;
}
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolRozet svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolRozet b { font-weight: 700; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rozet-kurucu {
  color: #3A2500 !important; background: linear-gradient(120deg, #FFF1C2 0%, #E8B64C 35%, #B9821F 60%, #FFE7A3 100%);
  background-size: 220% 100%; box-shadow: 0 0 0 1px #FFE7A3 inset, 0 0 10px rgba(240, 190, 80, .6);
  animation: kurucuParilti 4s ease-in-out infinite;
}
@keyframes kurucuParilti { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rozet-admin { background: linear-gradient(180deg, #E5484D, #A3161B); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rozet-masa { background: linear-gradient(180deg, #19A37F, #0B6B54); }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rozet-turnuva { background: linear-gradient(180deg, #F08A24, #B4510D); }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rozet-dj { background: linear-gradient(180deg, #9B6CFF, #5B2FD0); }
/* Ranks: outlined, quieter than staff badges */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolRozet.rutbe { background: rgba(0,0,0,.25); box-shadow: 0 0 0 1px currentColor inset; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rutbe-6 { color: #9FB3A8 !important; }                 /* Çaylak */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rutbe-5 { color: #D9925A !important; }                 /* Bronz */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rutbe-4 { color: #D3DAE3 !important; }                 /* Gümüş */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rutbe-3 { color: #F1C24B !important; }                 /* Altın */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rutbe-2 { color: #8EE3DC !important; }                 /* Platin */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rutbe-1 { color: #7CC8FF !important; text-shadow: 0 0 6px rgba(124,200,255,.6); } /* Elmas */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rutbe-0 { color: #F0A6FF !important; text-shadow: 0 0 6px rgba(240,166,255,.7); } /* Efsane */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .rutbe-sezon { color: #FFD66B !important; text-shadow: 0 0 6px rgba(255,214,107,.7); } /* Sezon şampiyonu */
/* Staff rows stand out; the founder glows */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolSatir { box-shadow: inset 3px 0 0 var(--rol-renk, transparent) !important; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolSatir-admin { --rol-renk: #E5484D; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolSatir-masa { --rol-renk: #19A37F; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolSatir-turnuva { --rol-renk: #F08A24; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolSatir-dj { --rol-renk: #9B6CFF; }
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolSatir-kurucu {
  --rol-renk: #E8B64C;
  background: linear-gradient(90deg, rgba(232,182,76,.18), rgba(232,182,76,0) 75%) !important;
  box-shadow: inset 3px 0 0 #E8B64C, 0 0 0 1px rgba(232,182,76,.45), 0 0 16px rgba(232,182,76,.22) !important;
}
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolSatir-kurucu .SalonNickListeAvatar { box-shadow: 0 0 0 2px #E8B64C, 0 0 10px rgba(232,182,76,.7); border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .rozet-kurucu { animation: none; } }
#SalonYaziTahtasi .RolChat, #MasaYaziTahtasi .RolChat { margin: 0 6px 0 0 !important; height: 17px; font-size: 10.5px; }

/* Styles from the old salon that hid the text behind someone else's name image:
   show the player's own nick instead. */
.NickRenk25, .NickRenk80, .NickRenk158, .NickRenk171 {
  color: #F3E7C9 !important; -webkit-text-fill-color: currentColor !important;
  background-image: none !important; padding: 0 4px !important; font-weight: 700 !important;
}
.YaziRenk66 { color: #E8E2D0 !important; }

/* Admin panel inside the game (Menü → Yönetim Paneli) */
#YonetimDlg {
  width: min(1280px, 96vw); height: 92vh; max-width: none; max-height: none; padding: 0; margin: auto;
  border: 1px solid var(--border-strong); border-radius: 14px; overflow: hidden;
  background: var(--bg-1); box-shadow: 0 24px 80px rgba(0,0,0,.55);
}
#YonetimDlg[open] { display: flex; flex-direction: column; }
#YonetimDlg::backdrop { background: rgba(5, 12, 9, .7); }
#YonetimDlg .YonetimBas {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 48px; padding: 0 8px 0 18px; background: var(--bg-2); color: var(--text-1);
  font: 600 16px var(--font-ui); border-bottom: 1px solid var(--border-subtle);
}
#YonetimDlg .YonetimKapat {
  width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text-1); font-size: 20px; cursor: pointer;
}
#YonetimDlg .YonetimKapat:hover, #YonetimDlg .YonetimKapat:focus-visible { background: var(--bg-3); outline: 2px solid var(--gold-500); }
#YonetimDlg iframe { flex: 1; width: 100%; border: 0; background: #EEF2EF; }

/* Player list collapsed with » (shown again with «); beats the column widths above */
.NLDaralt #SalonSagAna { display: none !important; }
.NLDaralt #SalonSolAna { width: 100% !important; }

/* Radio ticker (top centre): the legacy inner pill was near-black whatever the
   theme, so light themes put dark text on it. Follow the theme instead. */
#RadioNowPlayingTicker .RadioTickerInner,
#RadioNowPlayingTicker .RadioTickerInner:hover {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; height: auto !important; max-width: none !important;
}
#RadioNowPlayingTicker .RadioTickerTrack { width: auto !important; }
#RadioNowPlayingTicker #RadioTickerText { color: var(--text-1) !important; font-size: 13px !important; font-weight: 600 !important; }
#RadioNowPlayingTicker #RadioTickerBadge { color: #FFFFFF !important; border: 0 !important; }
#RadioNowPlayingTicker #RadioTickerBadge:not(.badge-live) { background: var(--felt-500, #1F6B52) !important; }

/* Nick quick menu (click a nick in chat): plain theme buttons instead of the
   legacy dark wood texture that hid dark text in light themes. */
#modalNickSalonTekTik #DlgIcerikStr { display: grid !important; gap: 8px !important; }
#modalNickSalonTekTik #DlgIcerikStr > div[style*="clear"] { display: none !important; }
#DlgButonOzeleGit, #DlgButonTabYap1, #DlgButonTabYap2, #DlgButonHosgeldiniz {
  background: var(--bg-3) !important; color: var(--text-1) !important; text-shadow: none !important;
  border: 1px solid var(--border-strong) !important; border-radius: 10px !important;
  width: 100% !important; height: 48px !important; margin: 0 !important; padding: 0 16px !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  font: 600 16px var(--font-ui) !important;
}
#DlgButonOzeleGit:hover, #DlgButonTabYap1:hover, #DlgButonTabYap2:hover, #DlgButonHosgeldiniz:hover {
  border-color: var(--gold-500) !important; background: var(--bg-2) !important;
}

/* ==========================================================================
   Private chat window (Özel): fit the screen, theme colours, readable profile
   ========================================================================== */
.YaziAlaniOzel {
  display: flex !important; height: 100% !important; overflow: hidden !important;
  background: var(--bg-1) !important;
}
.YaziAlaniOzel .OzelSolAna { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 100% !important; }
.YaziAlaniOzel .OzelMesajContainer {
  display: flex !important; flex-direction: column !important; height: 100% !important; background: var(--bg-1) !important;
}
.YaziAlaniOzel #OzelYaziAlani { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; position: relative !important; display: flex !important; flex-direction: column !important; }
.YaziAlaniOzel #OzelYaziTahtasi {
  flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; overflow-y: auto !important; background: var(--bg-1) !important;
  color: var(--text-1) !important; padding: 14px 18px !important; font: 400 var(--fs-md) var(--font-ui) !important;
}
.YaziAlaniOzel #YaziKutusuOzel { flex: 0 0 auto !important; position: static !important; }
.YaziAlaniOzel .OzelSagAna {
  flex: 0 0 340px !important; width: 340px !important; height: 100% !important; overflow-y: auto !important;
  border-left: 1px solid var(--border-subtle) !important;
}
.YaziAlaniOzel .OzelProfil {
  background: var(--bg-2) !important; height: auto !important; min-height: 100% !important; padding: 16px !important; box-sizing: border-box !important;
}
.YaziAlaniOzel #OzelAvatarImg { width: 160px !important; height: 160px !important; border-radius: 50% !important; display: block !important; margin: 0 auto !important; }
/* Action buttons: icon + label in a grid instead of tiny clipped images */
.YaziAlaniOzel div:has(> #OzelEngelButon) {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important;
  border: 0 !important; padding: 14px 0 !important;
}
.YaziAlaniOzel :is(#OzelEngelButon, #OzelEngelListeButon, #OzelArkadasEkleButon, #OzelArkadasCikarButon, #OzelArkadasListeButon, #OzelSikayetButon):not(.Gizli) {
  background: var(--bg-3) !important; color: var(--text-1) !important; text-shadow: none !important;
  border: 1px solid var(--border-strong) !important; border-radius: 10px !important;
  width: auto !important; height: auto !important; min-height: 64px !important; margin: 0 !important; padding: 8px 4px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important;
  font: 600 12px/1.15 var(--font-ui) !important; white-space: normal !important; text-align: center !important;
}
.YaziAlaniOzel :is(#OzelEngelButon, #OzelEngelListeButon, #OzelArkadasEkleButon, #OzelArkadasCikarButon, #OzelArkadasListeButon, #OzelSikayetButon)::after { content: attr(tooltip); }
.YaziAlaniOzel :is(#OzelEngelButon, #OzelEngelListeButon, #OzelArkadasEkleButon, #OzelArkadasCikarButon, #OzelArkadasListeButon, #OzelSikayetButon) i { font-size: 20px !important; }
.YaziAlaniOzel :is(#OzelEngelButon, #OzelSikayetButon) i { color: var(--live) !important; }
.YaziAlaniOzel :is(#OzelEngelButon, #OzelEngelListeButon, #OzelArkadasEkleButon, #OzelArkadasCikarButon, #OzelArkadasListeButon, #OzelSikayetButon):hover { border-color: var(--gold-500) !important; }
.YaziAlaniOzel div:has(> #OzelProfilButon) { grid-column: 1 / -1 !important; border: 0 !important; margin: 0 !important; }
.YaziAlaniOzel #OzelProfilButon {
  background: var(--bg-3) !important; color: var(--text-1) !important; border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important; height: 44px !important; font: 600 15px var(--font-ui) !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
/* Profile facts: quiet labels, readable values */
.YaziAlaniOzel #OzelAvatarDiv { height: auto !important; margin-top: 4px !important; border-collapse: collapse !important; }
.YaziAlaniOzel #OzelAvatarDiv td { border-bottom: 1px solid var(--border-subtle) !important; padding: 7px 4px !important; }
.YaziAlaniOzel #OzelAvatarDiv [id$="Div"] { color: var(--text-3) !important; font: 500 14px var(--font-ui) !important; }
.YaziAlaniOzel #OzelAvatarDiv [id$="Str"] { color: var(--text-1) !important; font: 600 15px var(--font-ui) !important; text-align: right !important; }
.YaziAlaniOzel #OzelProfilKisim1 { height: auto !important; }
.YaziAlaniOzel .OzelProfil, .YaziAlaniOzel .OzelSagAna { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; box-shadow: none !important; }
/* labels and values sit in two separate columns: give every line the same height */
.YaziAlaniOzel #OzelAvatarDiv [id$="Div"]:not(.Gizli), .YaziAlaniOzel #OzelAvatarDiv [id$="Str"]:not(.Gizli) {
  display: block !important; height: 32px !important; line-height: 32px !important; padding: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important;
}
.YaziAlaniOzel #OzelAvatarDiv td { border: 0 !important; padding: 0 !important; vertical-align: top !important; }
.YaziAlaniOzel #OzelAvatarDiv [id$="Div"], .YaziAlaniOzel #OzelAvatarDiv [id$="Str"] { -webkit-text-fill-color: currentColor !important; text-shadow: none !important; }
.YaziAlaniOzel #OzelAvatarDiv { width: 100% !important; table-layout: fixed !important; }
.YaziAlaniOzel #OzelAvatarDiv td { width: 50% !important; }
.YaziAlaniOzel div:has(> #OzelAvatarImg) { height: auto !important; min-height: 0 !important; }
.YaziAlaniOzel #OzelAvatarDiv [id$="Div"], .YaziAlaniOzel #OzelAvatarDiv [id$="Str"] { border-bottom: 0 !important; }

/* Chat lines: plain parts (time, < >) and the default text/nick follow the theme.
   The legacy near-white (#f1f5f9) vanished on light backgrounds. */
.Yazilar span.yaziic:not([class*="Renk"]) { color: var(--text-3) !important; }
.Yazilar .YaziRenk0 { color: var(--text-1) !important; }
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) .NickRenk0 { color: #1F6B52 !important; }
.YaziAlaniOzel #OzelAvatarDiv .Gizli { display: none !important; }

/* Antrenman (practice vs bots) is switched off for now; delete this line to bring it back. */
#SalonAntrenmanButon { display: none !important; }

/* Tab bar: every tab reads as a tab, the open one is clearly raised */
#AnaTablar .tabButon, #AnaTablar .tabButonOrtak {
  background: var(--bg-3) !important; color: var(--text-2) !important;
  border: 1px solid var(--border-subtle) !important; border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important; margin-right: 6px !important;
}
#AnaTablar .tabButon:hover, #AnaTablar .tabButonOrtak:hover { color: var(--text-1) !important; border-color: var(--border-strong) !important; }
#AnaTablar .tabAktif, #AnaTablar .tabButonOrtak.tabAktif {
  background: var(--bg-1) !important; color: var(--text-1) !important; font-weight: 700 !important;
  border-color: var(--border-strong) !important; box-shadow: inset 0 3px 0 var(--gold-500) !important;
  position: relative !important; z-index: 1 !important; margin-bottom: -1px !important;
}
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) #AnaTablar .btn-close-white { filter: none !important; opacity: .7 !important; }

/* Device icon in the player list (PC / phone) is a black glyph: light it up on dark themes */
#SalonNickListePlatImg { opacity: .75 !important; }
:root:not(:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"])) #SalonNickListePlatImg { filter: invert(1) !important; }

/* Tournament dialog is drawn dark with inline styles: keep it dark in every theme */
#PencereTurnuva { background: #0c1410 !important; color: #d0e0d5 !important; }
#PencereTurnuva .modal-title, #PencereTurnuva #modalbaslik { color: #f0fff4 !important; }
#PencereTurnuva .text-muted { color: #9DBBA9 !important; }
#PencereTurnuva .modal-footer { background: transparent !important; border-top-color: #1a3325 !important; }

/* Phones: room for typing. One send button (the arrow), emoji stays; treats,
   picture upload and nick-complete (Tab) are desktop extras. The private
   chat shows the conversation only; the profile column needs a wide screen. */
@media (max-width: 767px) {
  #GonderButonMobilDiv { display: none !important; }
  /* İsmarla and photo stay (social, fun on phones); clear and nick tab do not fit */
  .YaziKutusuGenel :is(#NickTabButonDiv, #TemizleButonDiv):not(.Gizli) { display: none !important; }
  .YaziKutusuGenel :is(#IsmarlaButonDiv, #ResuploadDiv, #GulButonDiv, #GonderButonDiv):not(.Gizli) { width: 38px !important; min-width: 38px !important; height: 38px !important; }
  .YaziAlaniOzel .OzelSagAna { display: none !important; }
}

/* Tab bar height must match the 48px tabs (the game sizes the content from it) */
#AnaTabPanel, .AnaTabPanel { height: 48px !important; min-height: 48px !important; }

/* Phones held sideways: the table needs the height. Slim header and tabs. */
@media (orientation: landscape) and (max-height: 500px) {
  #AnaUstPanel, .AnaUstPanel { height: 44px !important; min-height: 44px !important; padding: 0 8px !important; }
  #AnaUstPanel .btn, #Amenu { height: 32px !important; min-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  #AnaAvatarDiv, #AnaAvatarImg { width: 34px !important; height: 34px !important; }
  #AnaTabPanel, .AnaTabPanel, #AnaTablarScroll, #AnaTablar { height: 34px !important; min-height: 34px !important; }
  #AnaTablar .tabButon, #AnaTablar .tabButonOrtak { height: 32px !important; min-width: 90px !important; }
  #AnaTablar .tabButon, #AnaTablar .tabButonOrtak, #AnaTablar .tabButon *, #AnaTablar .tabButonOrtak * { font-size: 14px !important; }
  #AnaUstPanel > #RadioNowPlayingTicker { display: none !important; }
  #AnaUstPanelExtButon:not(.Gizli) { height: 32px !important; }
  /* name + status pill do not fit the 44px bar (they were cut at the top): the avatar shows the status */
  #AnaUstPanel #AnaUstHGExt { display: none !important; }
}

/* Phone held sideways at the table: header and tabs give their height to the
   table (dizayn() then measures them as 0); "‹ Lobi" floats top left. */
#MasaLobiDon { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #PencereAna.MasaGorunur #AnaUstPanel, #PencereAna.MasaGorunur #AnaTabPanel { display: none !important; }
  /* rack at its own height at the bottom, seats and centre take the rest */
  #PencereAna.MasaGorunur #MasaIcerikDiv { display: flex !important; flex-direction: column !important; }
  #PencereAna.MasaGorunur #MasaOkeyUst { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; padding-top: 2px !important; }
  #PencereAna.MasaGorunur #MasaOkeyOrta { flex: 0 0 auto !important; height: auto !important; top: 0 !important; margin: 0 0 4px !important; }
  #PencereAna.MasaGorunur #MasaOkeyOrta > * { top: 0 !important; }
  /* seat chips: grow to fit name + bot/kick button (they were cut at 42px) */
  #PencereAna.MasaGorunur .MasaNickOrtak { height: auto !important; min-height: 42px !important; width: auto !important; min-width: 150px !important; max-width: 190px !important; }
  #PencereAna.MasaGorunur .MasaNickOrtak .MasaNickDivDis { height: auto !important; }
  #PencereAna.MasaGorunur .MasaNickOrtak .MasaBotButonBg { margin-top: 2px !important; }
  /* smaller action buttons so the top seat's name stays clear */
  #PencereAna.MasaGorunur #MasaPanelSag .butonMasaSag { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; font-size: 15px !important; padding: 0 !important; }
  #PencereAna.MasaGorunur #MasaLobiDon {
    display: inline-flex; align-items: center; gap: 4px; position: fixed; top: 6px; left: 6px; z-index: 1300;
    height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border-strong);
    background: rgba(10, 17, 14, .82); color: var(--ivory-100); font: 600 13px var(--font-ui);
  }
}

/* Lobby column: the middle part takes exactly the space left between the
   toolbar and the chat bar (the game's own px height ignored margins and
   pushed the chat bar ~17px below the window). */
#PencereAna #SalonSolAna { height: 100% !important; }
#PencereAna #SalonOrtaKisim { height: auto !important; flex: 1 1 0 !important; min-height: 0 !important; }
#AnaAltPanel > #AnaTabicerik { height: 100% !important; max-height: 100% !important; overflow: hidden !important; box-sizing: border-box !important; }

/* Status menu opened from the sidebar "Durum" button: compact, under the button */
#AnaUstDurumDlgAlt.DurumKucuk { min-width: 0 !important; width: 180px !important; padding: 6px !important; }
#AnaUstDurumDlgAlt.DurumKucuk .dropdown-item { padding: 7px 10px !important; min-height: 0 !important; font-size: 14px !important; }
#AnaUstDurumDlgAlt.DurumKucuk #AnaUstDurumGosterBtn { display: none !important; }

/* --- Header shortcuts (Turnuva, Top 20, İstek Yap) and Menü: one quiet style.
   Four filled colours meant nothing and competed; colour now only marks a state
   (your own Top 20 place). --- */
#AnaUstPanelExt .turnuvabuton, #AnaUstPanelExt .topon, #AnaUstPanelExt #RenkPanel, #IstekYap, #Amenu {
  background: var(--bg-3) !important; border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important; box-shadow: none !important; font-weight: 600 !important;
}
#AnaUstPanelExt .turnuvabuton:hover, #AnaUstPanelExt .topon:hover, #AnaUstPanelExt #RenkPanel:hover, #IstekYap:hover, #Amenu:hover {
  border-color: var(--gold-400) !important; color: var(--gold-300) !important; transform: none !important; box-shadow: none !important;
}
.turnuvabuton::before, .topon::before, #RenkPanel::before, #IstekYap::before { display: none !important; }
.topon .TopOnSira { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .8em; font-weight: 700;
  background: var(--gold-400); color: var(--text-on-gold); }

/* --- Hesabım (account overview) --- */
.HesabimUst { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 4px 14px;
  border-bottom: 1px solid var(--border-subtle); margin-bottom: 8px; }
.HesabimUst b { font-size: 1.15rem; }
.HesabimUst span { color: var(--gold-300); font-weight: 600; }
.HesabimListe { display: flex; flex-direction: column; gap: 4px; }
.HesabimSatir { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-1); text-align: left; cursor: pointer; font: inherit; }
.HesabimSatir:hover, .HesabimSatir:focus-visible { background: var(--bg-3); }
.HesabimSatir > i:first-child { font-size: 1.3rem; color: var(--gold-400); width: 26px; text-align: center; }
.HesabimSatir span { flex: 1; display: flex; flex-direction: column; }
.HesabimSatir small { color: var(--text-2); font-size: .85rem; }
.HesabimSatir > i:last-child { color: var(--text-3); }
/* Menü stays quiet when open too (Bootstrap's open/active state otherwise paints it in the accent) */
#AnaUstPanel #Amenu, #AnaUstPanel #Amenu:is(.show, :active, :focus, [aria-expanded="true"]) {
  background: var(--bg-3) !important; border: 1px solid var(--border-strong) !important; color: var(--text-1) !important; box-shadow: none !important;
}
#AnaUstPanel #Amenu:hover { border-color: var(--gold-400) !important; color: var(--gold-300) !important; }

/* --- Header state badges: gift wheel ready, tournament soon / live --- */
#AnaUstPanelExt .carkbuton {
  background: var(--bg-3) !important; border: 1px solid var(--border-strong) !important; color: var(--text-1) !important;
  box-shadow: none !important; font-weight: 600 !important; height: 44px !important; padding: 0 20px !important; border-radius: var(--r-pill) !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 15px !important;
}
#AnaUstPanelExt .carkbuton:hover { border-color: var(--gold-400) !important; color: var(--gold-300) !important; }
#AnaUstPanelExt .carkbuton.hazir { border-color: var(--gold-400) !important; }
.DurumRozet { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .8em; font-weight: 600;
  background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border-subtle); }
.DurumRozet.hazir { background: var(--gold-400); color: var(--text-on-gold); border-color: transparent; font-weight: 700; }
.DurumRozet.yakin { background: var(--gold-400); color: var(--text-on-gold); border-color: transparent; font-weight: 700; }
.DurumRozet.canli { background: #D93A3A; color: #fff; border-color: transparent; font-weight: 700; }
.DurumRozet.canli::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #fff; vertical-align: 1px; }
@media (max-width: 1439px) { #AnaUstPanelExt .carkbuton { height: 40px !important; padding: 0 14px !important; font-size: 14px !important; } }

/* --- Login / sign-up box: tabs as quiet text tabs, one gold action button --- */
#KullKayitButonDon, #KullGirisButonKayitOl { background: transparent !important; box-shadow: none !important; color: var(--text-2) !important; }
#KullKayitButonDon:hover, #KullGirisButonKayitOl:hover { color: var(--gold-300) !important; }
#KullKayitButonKaydet { background: var(--gold-500) !important; color: var(--text-on-gold) !important;
  border: 0 !important; box-shadow: none !important; font-weight: 700 !important; }
#KullKayitButonKaydet:hover { filter: brightness(1.06); }

/* --- Hediye Çarkı: tile-colour segments, numbers along the radius, pointer on top --- */
#hediyecark .modal-dialog { max-width: 440px; }
#hediyecark .modal-body { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 20px 24px; }
.Cark { position: relative; width: min(340px, 78vw); aspect-ratio: 1; }
.CarkTeker { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 8px #3A2A1C, 0 0 0 10px var(--gold-400), 0 18px 40px rgba(0,0,0,.35);
  transition: transform 4.5s cubic-bezier(.17,.67,.12,.99); }
.CarkYazi { position: absolute; left: 50%; top: 50%; width: 50%; height: 1.3em; margin-top: -.65em; box-sizing: border-box;
  transform-origin: 0 50%; transform: rotate(calc(var(--a) - 90deg)); text-align: right; padding-right: 20px;
  font: 700 clamp(15px, 4.2vw, 20px)/1.3em var(--font-ui); letter-spacing: .01em; white-space: nowrap; }
/* left half: turned around so the numbers read upright when the wheel stands still */
.CarkYazi.ters { transform: rotate(calc(var(--a) + 90deg)); transform-origin: 100% 50%; left: auto; right: 50%; text-align: left; padding: 0 0 0 20px; }
.CarkIbre { position: absolute; left: 50%; top: -14px; z-index: 3; width: 0; height: 0; transform: translateX(-50%);
  border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 28px solid var(--gold-400);
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.CarkDugme { position: absolute; left: 36%; top: 36%; z-index: 2; width: 28%; height: 28%; margin: 0; transform: none !important;
  border-radius: 50%; border: 4px solid #F3EDDF; background: radial-gradient(circle at 35% 30%, #4A3523, #22170F);
  color: #F3EDDF; font: 800 clamp(13px, 3.4vw, 16px) var(--font-ui); letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.CarkDugme:hover:not(:disabled) { border-color: var(--gold-400); color: var(--gold-300); }
.CarkDugme:disabled { cursor: default; opacity: .9; }
.CarkSonuc { min-height: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text-1); }
.CarkSonuc b { font-size: 1.6rem; color: var(--gold-400); }
.CarkSonuc span { color: var(--text-2); }
.CarkTamam { margin-top: 6px; min-width: 140px; min-height: 42px; border: 0; border-radius: 10px; background: var(--gold-500);
  color: var(--text-on-gold); font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .CarkTeker { transition-duration: .6s; } }

/* --- Günlük: login streak, daily tasks, wheel --- */
.Gunluk h4 { margin: 14px 0 8px; font-size: 1rem; color: var(--text-1); }
.Gunluk h4:first-child, .GunlukYeni + h4 { margin-top: 4px; }
.GunlukYeni { margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--bg-3); color: var(--text-1); }
.GunlukYeni b { color: var(--gold-400); }
.GunlukSeri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.GunlukSeri li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 10px;
  border: 1px solid var(--border-strong); color: var(--text-2); font-size: .78rem; text-align: center; }
.GunlukSeri li b { font-size: .8rem; color: var(--text-1); }
.GunlukSeri li.gecti { background: var(--bg-3); opacity: .75; }
.GunlukSeri li.bugun { background: var(--gold-500); border-color: transparent; color: var(--text-on-gold); }
.GunlukSeri li.bugun b { color: var(--text-on-gold); }
.GunlukNot { margin: 6px 0 0; font-size: .82rem; color: var(--text-2); }
.GunlukGorev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.GunlukGorev li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.GunlukGorev .ad { color: var(--text-1); font-weight: 600; }
.GunlukGorev .odul { color: var(--text-2); font-size: .85rem; }
.GunlukGorev .cubuk { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.GunlukGorev .cubuk i { display: block; height: 100%; background: var(--gold-400); border-radius: 3px; }
.GunlukGorev li.tamam .ad { color: var(--gold-300); }
.GunlukCark { margin: 0; color: var(--text-2); }
.GunlukCarkBtn { min-height: 42px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--gold-500); color: var(--text-on-gold); font-weight: 700; cursor: pointer; }
@media (max-width: 520px) { .GunlukSeri { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#extramodal .Gunluk { display: block; width: 100%; text-align: left; }
#extramodal .Gunluk h4 { text-align: left; }
#extramodal .GunlukGorev li { display: grid !important; grid-template-columns: 1fr auto; width: 100%; }
#extramodal .GunlukGorev .cubuk { display: block; }

/* --- Badges (profile, Hesabım) --- */
.ProfilRozetler { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.ProfilRozetler .Rozet { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--text-1); font-size: .82rem; font-weight: 600; }
.ProfilRozetler .RozetYok { color: var(--text-2); font-size: .85rem; }
.GunlukPushBtn { min-height: 38px; padding: 0 16px; margin-right: 8px; border: 1px solid var(--gold-400); border-radius: 10px; background: transparent; color: var(--gold-300); font-weight: 700; cursor: pointer; }

/* ── Lobby tables, round 8: a free seat is a small "+" chair ("Oyna" shows
   when the card is hovered), seats-taken chip, stake colour by size, state
   dot, last-seat glow, friend mark. The lobby observer sets the classes. ── */
#SalonMasalar .SalonOynaOrtak:not(.Gizli) {
  width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important;
  font-size: 0 !important; line-height: 38px !important; border-radius: 50% !important;
  background: rgba(255, 255, 255, .08) !important; border: 1.5px dashed rgba(255, 255, 255, .6) !important;
  color: var(--ivory-100) !important; box-shadow: none !important; transform: none !important;
}
#SalonMasalar .SalonOynaOrtak:not(.Gizli)::before { content: "+"; font: 500 24px/37px var(--font-ui); }
#SalonMasalar .SalonOynaOrtak:not(.Gizli):focus-visible { outline: 2px solid var(--gold-300) !important; outline-offset: 2px !important; }
@media (hover: hover) {
  #SalonMasalar .Mtr62Tekil:is(:hover, :focus-within) .SalonOynaOrtak:not(.Gizli) {
    width: auto !important; min-width: 92px !important; padding: 0 20px !important; border-radius: var(--r-pill) !important;
    font: 700 14px/37px var(--font-ui) !important; border-style: solid !important; border-color: var(--ivory-300) !important;
    background: linear-gradient(180deg, var(--ivory-100), var(--ivory-200)) !important; color: var(--tile-ink) !important;
  }
  #SalonMasalar .Mtr62Tekil:is(:hover, :focus-within) .SalonOynaOrtak:not(.Gizli)::before { content: none; }
  #SalonMasalar .Mtr62Tekil .SalonOynaOrtak:not(.Gizli):hover { background: var(--action) !important; color: var(--text-on-action) !important; border-color: var(--action-hover) !important; }
}

#SalonMasalar .Mtr62Bilgi i.bi { margin-right: 5px; font-size: 12px; }
#SalonMasalar .MasaDoluluk { color: var(--text-1) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
/* fixed gold: --gold-* follows the salon brand colour (and turns brown on light backgrounds) */
#SalonMasalar .Mtr62Tekil.SonYer .Mtr62Bilgi.MasaDoluluk:not(#Mtr62BilgiPuan) { color: #2A1D04 !important; background: #F2CF6B !important; border-color: #D6A531 !important; }
#SalonMasalar .Mtr62Tekil.Arkadas .Mtr62Bilgi.MasaDoluluk::after { content: "\2605" !important; display: inline !important; margin-left: 5px; color: #D6A531; }
#SalonMasalar .Mtr62Tekil.Arkadas.SonYer .Mtr62Bilgi.MasaDoluluk::after { color: #2A1D04; }
#SalonMasalar .Mtr62Tekil.Arkadas { border-color: #D6A531 !important; box-shadow: 0 0 0 1px #D6A531, var(--shadow-1) !important; }
/* the speed chip says it already */
#SalonMasalar #Mtr62BilgiIconSpeed { display: none !important; }

/* one seat left: the felt glows so the table that starts next is easy to find */
#SalonMasalar .SonYer .Mtr621 { outline: 3px solid #F2CF6B; outline-offset: 3px; animation: sonYer 1.8s ease-in-out infinite; }
@keyframes sonYer { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { #SalonMasalar .SonYer .Mtr621 { animation: none; } }

/* state dot on the seats chip: grey while waiting, green while running */
#SalonMasalar .Mtr62Tekil .Mtr62Bilgi.MasaDoluluk::before {
  content: "" !important; display: inline-block !important; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--text-3);
}
#SalonMasalar .Mtr62Tekil.Oynaniyor .Mtr62Bilgi.MasaDoluluk::before { background: var(--success); }
#SalonMasalar .Mtr62Tekil.SonYer .Mtr62Bilgi.MasaDoluluk::before { background: #2A1D04; }
/* cards in one row share the height */
#SalonMasalar { align-items: stretch !important; }
#SalonMasalar .Mtr62Tekil { align-self: stretch !important; }

/* stake chip by size: ≤1000 green, ≤2500 blue, ≤5000 gold, above red */
#SalonMasalar .Mtr62Tekil[data-kademe] #Mtr62BilgiPuan { border: 1px solid transparent !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important; font-family: var(--font-ui) !important; font-variant-numeric: tabular-nums; }
#SalonMasalar .Mtr62Tekil[data-kademe="1"] #Mtr62BilgiPuan { background: #1F8A5B !important; color: #fff !important; }
#SalonMasalar .Mtr62Tekil[data-kademe="2"] #Mtr62BilgiPuan { background: #2A62B8 !important; color: #fff !important; }
#SalonMasalar .Mtr62Tekil[data-kademe="3"] #Mtr62BilgiPuan { background: linear-gradient(180deg, #F2CF6B, #D6A531) !important; color: #2A1D04 !important; }
#SalonMasalar .Mtr62Tekil[data-kademe="4"] #Mtr62BilgiPuan { background: #B3203A !important; color: #fff !important; }

#SalonHizliOyna { background: #F2CF6B !important; border: 1px solid #D6A531 !important; color: #2A1D04 !important; font-weight: 700 !important; height: 38px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-right: var(--sp-2) !important; }
#SalonHizliOyna:hover { background: #E8C14F !important; }

/* Header: the radio widget sits in the middle of the free space between the
   left group and the pills (the bar is row-reverse, so a high order = left). */
#AnaUstPanelExt:not(.AnaUstPanelExtPos) { flex: 1 1 auto !important; }
#AnaUstPanelExt:not(.AnaUstPanelExtPos) > #RadioPlayer { order: 99 !important; margin-left: auto !important; margin-right: auto !important; }

/* Günlük panel (round 3): the streak as a row of okey tiles, tasks with
   pips, the throne race, actions at the bottom. Own class names, so the
   modal's generic list/heading rules do not reach in. */
#extramodal .Gunluk { --gl-altin: #E8B94A; display: flex !important; flex-direction: column; gap: 16px; padding: 2px; font: 400 14px/1.35 var(--font-ui); color: var(--text-1); text-align: left; }
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) #extramodal .Gunluk { --gl-altin: #8A5E00; }
#extramodal .Gunluk section { display: block !important; margin: 0 !important; }
/* welcome: coin, two lines of text, the amount on the right - one rhythm */
#extramodal .GlYeni { display: flex !important; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(232,185,74,.18), rgba(232,185,74,.04)); border: 1px solid rgba(232,185,74,.35); }
#extramodal .GlYeni .para { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(232,185,74,.2); font-size: 20px; }
#extramodal .GlYeni .yazi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#extramodal .GlYeni .yazi b { font-size: 14px; font-weight: 700; color: var(--text-1); }
#extramodal .GlYeni .yazi small { font-size: 12px; color: var(--text-2); }
#extramodal .GlYeni strong { flex: 0 0 auto; font: 800 18px var(--font-ui); color: var(--gl-altin); font-variant-numeric: tabular-nums; }
#extramodal .GlBaslik { display: flex !important; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
#extramodal .GlBaslik span { font-weight: 700; font-size: 14px; }
#extramodal .GlBaslik small { color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
/* streak tiles */
#extramodal .GlSeri { list-style: none; margin: 0 !important; padding: 4px 0 0 !important; display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#extramodal .GlSeri li { display: flex !important; flex-direction: column; align-items: center; gap: 4px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#extramodal .GlSeri .tas {
  position: relative; width: 100%; max-width: 46px; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 7px;
  background: linear-gradient(180deg, #FBF6EA 0%, #EDE3CC 100%); box-shadow: 0 2px 0 #C9BB98, 0 3px 6px rgba(0,0,0,.25);
  font: 800 clamp(18px, 5vw, 24px)/1 var(--font-ui); opacity: .5; transition: transform .2s ease;
}
#extramodal .GlSeri .tas i { position: absolute; bottom: 3px; font: normal 10px/1 var(--font-ui); color: #C8343C; }
#extramodal .GlSeri .kirmizi { color: #C8343C; } #extramodal .GlSeri .mavi { color: #2457A6; }
#extramodal .GlSeri .siyah { color: #22170F; } #extramodal .GlSeri .sari { color: #D08A12; }
#extramodal .GlSeri small { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
#extramodal .GlSeri li.gecti .tas { opacity: 1; }
#extramodal .GlSeri li.gecti .tas::after { content: "✓"; position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #1F8A5B; color: #fff; font: 700 10px/16px var(--font-ui); text-align: center; }
#extramodal .GlSeri li.bugun .tas { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gl-altin), 0 6px 14px rgba(232,185,74,.35); }
#extramodal .GlSeri li.bugun small { color: var(--gl-altin); font-weight: 700; }
#extramodal .GlNot { margin: 10px 0 0 !important; font-size: 12px; color: var(--text-3); }
#extramodal .GlNot b { color: var(--gl-altin); }
/* tasks */
#extramodal .GlGorev { list-style: none; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column; gap: 6px; }
#extramodal .GlGorev li { display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 8px 12px !important; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border-subtle); }
#extramodal .GlGorev .pip { flex: 0 0 44px; height: 30px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 8px; background: var(--bg-3); color: #fff; font-weight: 700; }
#extramodal .GlGorev .pip i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
#extramodal .GlGorev .pip i.dolu { background: var(--gl-altin); }
#extramodal .GlGorev .ad { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
#extramodal .GlGorev .ad small { font-weight: 400; font-size: 12px; color: var(--text-3); }
#extramodal .GlGorev .od { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: rgba(232,185,74,.14); color: var(--gl-altin); font-size: 13px; font-variant-numeric: tabular-nums; }
#extramodal .GlGorev li.tamam { background: rgba(31,138,91,.12); border-color: rgba(31,138,91,.4); }
#extramodal .GlGorev li.tamam .pip { background: #1F8A5B; }
#extramodal .GlGorev li.tamam .od { background: transparent; color: var(--text-3); text-decoration: line-through; }
/* throne */
#extramodal .Gunluk section.GlTaht { display: flex !important; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(232,185,74,.16), rgba(232,185,74,.02)); border: 1px solid rgba(232,185,74,.35); }
#extramodal .GlTaht .taht-ik { font-size: 26px; line-height: 1; }
#extramodal .GlTaht .taht-yazi { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
#extramodal .GlTaht .taht-yazi span { font-size: 12px; color: var(--text-2); }
#extramodal .GlTaht small { text-align: right; font-size: 11px; line-height: 1.3; color: var(--text-3); }
#extramodal .GlTaht small b { color: var(--gl-altin); font-size: 13px; }
#extramodal .Gunluk section.GlTaht { flex-wrap: wrap; }
#extramodal .GlTaht .taht-kural { flex: 1 0 100%; margin: 2px 0 0 !important; font-size: 11px; color: var(--text-3); }
/* actions */
#extramodal .GlAlt { display: flex !important; gap: 8px; }
#extramodal .GlAlt button { flex: 1 1 0; min-height: 44px; margin: 0 !important; border-radius: 12px; font: 700 14px var(--font-ui); cursor: pointer; }
#extramodal .GlAlt .GunlukCarkBtn { border: 0; background: linear-gradient(180deg, #F2CF6B, #D6A531); color: #2A1D04; box-shadow: 0 2px 0 #A87D1E; }
#extramodal .GlAlt .GunlukCarkBtn:disabled { background: var(--bg-3); color: var(--text-3); box-shadow: none; cursor: default; font-weight: 600; }
#extramodal .GlAlt .GunlukPushBtn { border: 1px solid var(--border-strong); background: transparent; color: var(--text-1); }
@media (max-width: 380px) { #extramodal .GlSeri { gap: 4px; } #extramodal .GlAlt { flex-direction: column; } }

/* Seat chips at the table stay dark on every background, so the avatar well
   does too (the white robot vanished on light backgrounds). */
.MasaNickOrtak #MasaResimDiv { background-color: #16241E !important; }

/* ── Phone lobby: bottom tab bar, one panel at a time (html[data-ms]) ── */
.MobilSekme { display: none; }
/* phones held sideways too: wide ones (iPhone Pro Max, 956 px) got the desktop lobby squeezed into 440 px */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
  .MobilSekme {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; /* under dialogs (1050+) */
    height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg-1); border-top: 1px solid var(--border-subtle);
  }
  .MobilSekme button {
    flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; background: transparent; color: var(--text-3); font: 600 11px var(--font-ui);
  }
  .MobilSekme button i { font-size: 20px; line-height: 1; }
  .MobilSekme button.aktif { color: #E8B94A; }
  .MobilSekme .MsSayac { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #D23B4A; color: #fff; font: 700 11px/18px var(--font-ui); }
  .MobilSekme .MsSayac.Gizli { display: none; }
  #SalonSolAna, #SalonSagAna { padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important; box-sizing: border-box !important; }
  #SalonOrtaKisim { display: flex !important; flex-direction: column !important; }
  #SalonOrtaKisim > #SalonMasaContainer, #SalonOrtaKisim > #SalonMesajContainer { flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
  html:not([data-ms="sohbet"]) :is(#SalonMesajContainer, #YaziKutusuSalon) { display: none !important; }
  html[data-ms="sohbet"] :is(#SalonUstMenu, #SalonMasaContainer) { display: none !important; }
  html[data-ms="sohbet"] #SalonYaziAlani, html[data-ms="sohbet"] #SalonYaziTahtasi { height: 100% !important; max-height: none !important; }
  html[data-ms="oyuncu"] #SalonSolAna { display: none !important; }
  html[data-ms="oyuncu"] #SalonSagAna { display: block !important; width: 100% !important; height: 100% !important; float: none !important; position: static !important; overflow-y: auto !important; }
  /* touch: the scroll arrows in the toolbar do nothing useful */
  #SalonUstMenu :is(#SalonYukariButonDiv, #SalonAsagiButonDiv) { display: none !important; }
  /* one panel at a time also where the desktop layout put the player column beside it */
  html:not([data-ms="oyuncu"]) #SalonSagAna { display: none !important; }
  html:not([data-ms="oyuncu"]) #SalonSolAna { width: 100% !important; float: none !important; }
}

/* Legacy smiley GIFs have a white background: show them as small white tiles */
.SmileyClass .SmileyClassIc { background: #fff !important; border-radius: 10px !important; }
.SmileyClass .SmileyClassIc img { border-radius: 8px; }

/* Phone portrait table: side seats stood their names on end (writing-mode);
   keep them horizontal, two short lines at most (oyun.js lets names break
   after "_": Robot_ / Fatma). */
.EkranDikey.WH500 .MasaNickDikey #MasaNickDiv {
  writing-mode: horizontal-tb !important; white-space: normal !important; overflow-wrap: anywhere !important;
  font-size: 10.5px !important; line-height: 1.15 !important; text-align: center !important; padding: 4px 2px !important;
  display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important;
}
.EkranDikey.WH500 .MasaNickDikey :is(#MasaButonBotArti, #MasaButonBotEksi) { writing-mode: horizontal-tb !important; padding: 2px 6px !important; font-size: 11px !important; }
.EkranDikey.WH500 .MasaNickDikey { width: 74px !important; max-width: 74px !important; }
.EkranDikey.WH500 .MasaNickDikey #MasaNickDiv { max-width: 70px !important; }
.EkranDikey.WH500 :is(#MasaNickSol, #MasaNickSag) #MasaNickDiv { word-break: normal !important; overflow-wrap: anywhere !important; } /* break after "_", not after any letter */
/* top seat: room for a full name next to the avatar */
.EkranDikey.WH500 #MasaNickUst { min-width: 150px !important; }
/* The seat redesign set every name to 15px with #PencereAna (two ids), which
   beat the phone sizes above: side names wrapped big, the top one was cut.
   Same weight, phone size again. */
.EkranDikey.WH500 #PencereAna .MasaNickDikey #MasaNickDiv { font-size: 12px !important; line-height: 1.15 !important; }
.EkranDikey.WH500 #PencereAna #MasaNickUst #MasaNickDiv { font-size: 13px !important; }
/* light backgrounds: the active phone tab and the rank badges (colours made for
   dark) need a darker gold / a dark pill to stay readable */
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) .MobilSekme button.aktif { color: #8A5E00; }
:is([data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"]) :is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolRozet.rutbe { background: #22302A !important; }

/* Phone upright at the table: two rows of 15 like sideways (oyun.js sizes the
   tiles to the width); the rack keeps its height at the bottom and the felt
   takes the rest. */
@media (orientation: portrait) and (max-width: 500px) {
  #PencereAna.MasaGorunur #MasaIcerikDiv { display: flex !important; flex-direction: column !important; }
  /* the four rack actions in one row also on 320-360 px phones (they wrapped 3 + 1) */
  .EkranDikey.WH500 #PencereAna .mobilislevbuton { display: flex !important; gap: 5px; width: max-content !important; }
  .EkranDikey.WH500 #PencereAna .mobilislevbuton > div { float: none !important; margin: 0 !important; }

  #PencereAna.MasaGorunur #MasaOkeyUst { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; }
  #PencereAna.MasaGorunur #MasaOkeyOrta { flex: 0 0 auto !important; height: auto !important; top: 0 !important; margin: 0 0 8px !important; }
  #PencereAna.MasaGorunur #MasaOkeyOrta > * { top: 0 !important; }
}

/* Phone held sideways in the lobby: flatter tab bar, two tables per row */
@media (orientation: landscape) and (max-height: 500px) {
  .MobilSekme { height: calc(42px + env(safe-area-inset-bottom)); }
  .MobilSekme button { flex-direction: row; gap: 6px; font-size: 12px; }
  .MobilSekme button i { font-size: 17px; }
  .MobilSekme .MsSayac { top: 3px; }
  #SalonSolAna, #SalonSagAna { padding-bottom: calc(42px + env(safe-area-inset-bottom)) !important; }
  #SalonMasalar { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 8px !important; padding: 8px !important; }
  #SalonMasalar .Mtr62Tekil { margin: 0 !important; }
  #SalonMasalar .Mtr621 { height: 136px !important; min-height: 0 !important; padding: 6px 12px !important; }
  #SalonMasalar .SalonOynaOrtak:not(.Gizli) { width: 32px !important; min-width: 32px !important; height: 32px !important; line-height: 30px !important; }
  #SalonMasalar .SalonOynaOrtak:not(.Gizli)::before { font-size: 20px; line-height: 29px; }
  #SalonMasalar .Mtr62Nick:not(.Gizli) { height: 30px !important; }
}

/* Taht yarışı: today's leader in the player list, and the Günlük card */
.TahtSahibi #SalonNickListeNickStr::after { content: " 👑"; }
.TahtSahibi { box-shadow: inset 3px 0 0 #E8B94A !important; }

/* Every dialog fits the window: the header with ✕ and the footer stay in view,
   only the body scrolls when there is no other way (phones, sideways). */
.modal .modal-dialog { margin-top: 8px !important; margin-bottom: 8px !important; }
.modal .modal-content { max-height: calc(100dvh - 24px) !important; display: flex !important; flex-direction: column !important; }
.modal .modal-content > .modal-header, .modal .modal-content > .modal-footer { flex: 0 0 auto !important; }
.modal .modal-content > .modal-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; }
@media (max-height: 500px) {
  .modal .modal-content > .modal-header { padding-top: 8px !important; padding-bottom: 8px !important; }
  .modal .modal-content > .modal-footer { padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* Before the game: one clear start button, three equal secondary ones */
#OkeyIstakaYaziStr .OnPanel { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px; }
#OkeyIstakaYaziStr .OnSira { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#OkeyIstakaYaziStr .OnBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px;
  border-radius: 19px; border: 1px solid rgba(255,255,255,.35); background: rgba(10,17,14,.72); color: #F3ECDA;
  font: 600 13px var(--font-ui); white-space: nowrap; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
#OkeyIstakaYaziStr .OnBtn i { font-size: 15px; }
#OkeyIstakaYaziStr .OnBtn:hover { border-color: #F2CF6B; color: #F2CF6B; }
#OkeyIstakaYaziStr .OnBtn.birincil {
  height: 46px; padding: 0 28px; border: 0; border-radius: 23px; font-size: 16px; font-weight: 800;
  background: linear-gradient(180deg, #F2CF6B, #D6A531); color: #2A1D04; box-shadow: 0 3px 0 #A87D1E, 0 6px 16px rgba(0,0,0,.35);
}
#OkeyIstakaYaziStr .OnBtn.birincil:hover { filter: brightness(1.05); color: #2A1D04; }
#OkeyIstakaYaziStr .OnBtn.birincil i { font-size: 20px; }
@media (max-width: 500px), (max-height: 500px) {
  #OkeyIstakaYaziStr .OnBtn { height: 34px; padding: 0 11px; font-size: 12px; }
  #OkeyIstakaYaziStr .OnBtn.birincil { height: 40px; font-size: 15px; }
}
/* folded table tools: only the toggle and the start button stay */
html.AracKapali #MasaPanelSag > :not(#MasaAracToggle):not(#MasaButonBaslat) { display: none !important; }
#MasaAracToggle { opacity: .8; }

/* Before-game buttons: beat the legacy colours of their handler classes
   (MasaButonOynanmiyor red, DavetEt green, MasaAyar grey) */
#OkeyIstakaYaziStr .OnBtn.OnBtn { background: rgba(10,17,14,.72) !important; border: 1px solid rgba(255,255,255,.35) !important; color: #F3ECDA !important; border-radius: 19px !important; box-shadow: 0 2px 6px rgba(0,0,0,.3) !important; line-height: 1 !important; }
#OkeyIstakaYaziStr .OnBtn.OnBtn:hover { border-color: #F2CF6B !important; color: #F2CF6B !important; }
#OkeyIstakaYaziStr .OnBtn.OnBtn.birincil { background: linear-gradient(180deg, #F2CF6B, #D6A531) !important; border: 0 !important; color: #2A1D04 !important; border-radius: 23px !important; box-shadow: 0 3px 0 #A87D1E, 0 6px 16px rgba(0,0,0,.35) !important; }

/* Phones at the table: chat and player list open as a panel that fits the
   window (the input used to fall below the screen) and leaves the tool bar
   usable; bottom sheet upright, left panel sideways. */
@media (max-width: 500px), (max-height: 500px) {
  #PencereAna.MasaGorunur :is(#MasaMesajContainer, #MasaNickContainer):not(.MobilGizle) {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; height: var(--sheet-h, 55dvh) !important; z-index: 1020 !important; border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.45) !important; overflow: hidden !important;
  }
  #PencereAna.MasaGorunur #MasaMesajContainer #MasaYaziAlani { display: flex !important; flex-direction: column !important; height: 100% !important; }
  #PencereAna.MasaGorunur #MasaMesajContainer #MasaYaziTahtasi { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; }
  #PencereAna.MasaGorunur #MasaMesajContainer #YaziKutusuMasa { flex: 0 0 auto !important; }
  #PencereAna.MasaGorunur #MasaPanelSag { z-index: 1025 !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #PencereAna.MasaGorunur :is(#MasaMesajContainer, #MasaNickContainer):not(.MobilGizle) {
    /* full width under the tool bar (a left half panel cut the board and looked chopped) */
    right: 0 !important; width: auto !important; top: 46px !important; height: auto !important; border-radius: 16px 16px 0 0 !important;
  }
}
/* unread table chat lines on the 💬 button */
#MasaButonMobilMesajlar[data-yeni]::after {
  content: attr(data-yeni); position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #D23B4A; color: #fff; font: 700 11px/18px var(--font-ui); text-align: center;
}
#MasaButonMobilMesajlar { position: relative; }

/* table dialogs: hints under fields that are fixed or need two people */
.AyarNot { display: block; clear: both; margin: 4px 0 2px; font-size: 12px; color: var(--text-3); }
.modal select:disabled { opacity: .55; cursor: not-allowed; }
/* a dialog footer whose buttons are all hidden takes no space */
.modal .modal-footer:not(:has(> :not(.Gizli))) { display: none !important; }

/* Table dialogs (new table / table settings): tighter rows so they fit a
   phone (the legacy rows were ~70px apart). Layout itself stays as built. */
:is(#modalOkeyMasaAyar, #yenimasamodal, #modalBatakMasaAyar) .modal-body hr { margin: 6px 0 !important; }
:is(#modalOkeyMasaAyar, #yenimasamodal, #modalBatakMasaAyar) .modal-body :is(.FormAyarLbl, label.FGenY) { min-height: 0 !important; height: auto !important; margin-top: 2px !important; margin-bottom: 2px !important; padding-top: 4px !important; padding-bottom: 4px !important; }
:is(#modalOkeyMasaAyar, #yenimasamodal, #modalBatakMasaAyar) .modal-body .AyarNot { margin: 0 0 4px !important; }
.modal-footer .DlgNot { flex: 1 0 100%; margin: 0 0 4px !important; text-align: center; }

/* Yeni Masa Aç, rebuilt: selects in a two-column grid, rules as toggle chips,
   password in one row - fits a phone without scrolling. */
#yenimasamodal .modal-content { max-width: 440px !important; width: 100%; }
#yenimasamodal .YmForm { display: flex; flex-direction: column; gap: 12px; }
#yenimasamodal .YmGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
#yenimasamodal .YmAlan { display: flex; flex-direction: column; gap: 4px; margin: 0; font: 600 12px var(--font-ui); color: var(--text-2); }
#yenimasamodal .YmTam { grid-column: 1 / -1; }
#yenimasamodal .YmAlan select { width: 100% !important; height: 40px !important; padding: 0 10px !important; border-radius: 10px !important; font: 600 14px var(--font-ui) !important; }
#yenimasamodal .YmBaslik { margin-bottom: -4px; font: 700 12px var(--font-ui); color: var(--text-2); }
#yenimasamodal .YmCipler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#yenimasamodal .YmCip { position: relative; display: flex; margin: 0; cursor: pointer; }
#yenimasamodal .YmCip input { position: absolute; opacity: 0; pointer-events: none; }
#yenimasamodal .YmCip span {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 4px 8px; text-align: center;
  border-radius: 10px; border: 1px solid var(--border-strong); color: var(--text-2); font: 600 13px var(--font-ui); line-height: 1.15;
}
#yenimasamodal .YmCip input:checked + span { background: rgba(31,138,91,.18); border-color: #2FA36E; color: var(--text-1); }
#yenimasamodal .YmCip input:checked + span::before { content: "✓"; color: #2FA36E; font-weight: 800; }
#yenimasamodal .YmCip input:focus-visible + span { outline: 2px solid var(--gold-400); outline-offset: 2px; }
#yenimasamodal .YmCip.Gizli { display: none !important; }
#yenimasamodal .YmSifre { display: flex; gap: 8px; }
#yenimasamodal .YmSifre .YmCip { flex: 0 0 auto; }
#yenimasamodal .YmSifre .YmCip span { padding: 4px 14px; }
#yenimasamodal .YmSifre input[type=text] { flex: 1; min-width: 0; height: 36px !important; padding: 0 10px !important; border-radius: 10px !important; }
#yenimasamodal .YmSifre input[type=text]:disabled { opacity: .45; }
@media (orientation: landscape) and (max-height: 500px) {
  #yenimasamodal .modal-dialog { max-width: min(720px, calc(100vw - 16px)) !important; }
  #yenimasamodal .modal-content { max-width: none !important; }
  #yenimasamodal .YmForm { gap: 8px; }
  #yenimasamodal .YmGrid { grid-template-columns: repeat(5, 1fr); }
  #yenimasamodal .YmGrid .YmTam { grid-column: auto; }
  #yenimasamodal .YmAlan select { height: 34px !important; font-size: 13px !important; }
  #yenimasamodal .YmBaslik { display: none; }
  #yenimasamodal .YmCipler { grid-template-columns: repeat(6, 1fr); }
  #yenimasamodal .YmCip span { min-height: 32px; font-size: 12px; }
  #yenimasamodal .YmForm > .YmCip.YmTam { display: none; } /* rakipsiz: rarely used, upright view keeps it */
  #yenimasamodal .modal-footer .DlgNot { display: none; }
}

/* İsmarla picker on phones: four big tiles per row (they were 32px) */
@media (max-width: 767px) {
  .SmileyClass#IsmarlaNesneDiv .IsmarlaClassIc, .SmileyClass .IsmarlaClassIc {
    width: calc(25% - 5px) !important; max-width: none !important; max-height: none !important; height: auto !important; aspect-ratio: 1 / 1; min-width: 0 !important; padding: 8px !important;
  }
  .SmileyClass .IsmarlaClassIc img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
}
/* İsmarla line in the chat: the picture as big as on desktop */
.IsmarlaYazi > img { height: 84px !important; width: 84px !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain; margin-right: 8px; }

/* Pictures posted in chat: big enough to see without opening them */
:is(.Mtr172, #SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) :is(.upimage, img.upload) {
  width: auto !important; height: auto !important;
  min-width: 140px; min-height: 100px; max-width: min(280px, 70vw) !important; max-height: 220px !important;
  object-fit: cover; border-radius: 10px; display: block; margin: 4px 0; cursor: zoom-in;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Nick ve yazı rengi (rebuilt): the preview and every swatch sit on the real
   chat background, so the colour you pick is exactly what the chat shows. */
#modalcolorsetting#modalcolorsetting .modal-dialog { max-width: min(640px, calc(100vw - 16px)) !important; }
#modalcolorsetting#modalcolorsetting .modal-body { display: flex; flex-direction: column; gap: 12px; }
#modalcolorsetting#modalcolorsetting .RkEskiSecim { display: none !important; }
#modalcolorsetting#modalcolorsetting .RkOnizleme {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-1); border: 1px solid var(--border-subtle); font: 500 15px/1.4 var(--font-ui);
}
#modalcolorsetting#modalcolorsetting .RkSaat { flex: 0 0 auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
#modalcolorsetting#modalcolorsetting .RkSatir { min-width: 0; overflow-wrap: anywhere; }
#modalcolorsetting#modalcolorsetting #nickden { font-weight: 700; }
#modalcolorsetting#modalcolorsetting .RkAyrac { color: var(--text-3); }
#modalcolorsetting#modalcolorsetting .RkSekme { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-3); }
#modalcolorsetting#modalcolorsetting .RkSekme .color-tab-btn {
  height: 38px; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important;
  color: var(--text-2) !important; font: 700 14px var(--font-ui) !important; padding: 0 !important;
}
#modalcolorsetting#modalcolorsetting .RkSekme .color-tab-btn.active { background: var(--bg-1) !important; color: var(--text-1) !important; box-shadow: 0 1px 3px rgba(0,0,0,.25) !important; }
#modalcolorsetting#modalcolorsetting .RkBilgi { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--text-3); }
#modalcolorsetting#modalcolorsetting .RkBilgi b { color: var(--text-2); font-weight: 700; white-space: nowrap; }
#modalcolorsetting#modalcolorsetting .RkIzgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; padding: 6px; border-radius: 12px;
  max-height: min(340px, 42dvh); overflow-y: auto; background: var(--bg-1); border: 1px solid var(--border-subtle);
}
#modalcolorsetting#modalcolorsetting .color-swatch-card {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px !important;
  border-radius: 10px !important; background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important;
  cursor: pointer; text-align: center; overflow: hidden; font-size: 14px;
}
#modalcolorsetting#modalcolorsetting .color-swatch-card:hover { border-color: var(--border-strong) !important; transform: none !important; }
#modalcolorsetting#modalcolorsetting .color-swatch-card.active-swatch { border: 2px solid #E8B94A !important; background: rgba(232,185,74,.10) !important; }
#modalcolorsetting#modalcolorsetting .color-swatch-card .swatch-num { font: 600 10px var(--font-ui) !important; color: var(--text-3) !important; }
#modalcolorsetting#modalcolorsetting .color-swatch-card.active-swatch .swatch-num { color: #E8B94A !important; }
#modalcolorsetting#modalcolorsetting .color-swatch-card > div:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modalcolorsetting#modalcolorsetting .RkNot { margin: 0; font-size: 11px; color: var(--text-3); }
@media (max-width: 500px) {
  #modalcolorsetting#modalcolorsetting .RkIzgara { grid-template-columns: repeat(2, 1fr); max-height: 46dvh; }
  #modalcolorsetting#modalcolorsetting .color-swatch-card { min-height: 52px; font-size: 13px; }
}
@media (max-height: 500px) {
  #modalcolorsetting#modalcolorsetting .RkIzgara { max-height: 44dvh; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  #modalcolorsetting#modalcolorsetting .RkNot { display: none; }
}
#modalcolorsetting#modalcolorsetting .RkSekme .color-tab-btn:focus { outline: none !important; }
#modalcolorsetting#modalcolorsetting .RkSekme .color-tab-btn:focus-visible { outline: 2px solid #E8B94A !important; outline-offset: 1px; }
#modalcolorsetting#modalcolorsetting .modal-footer .btn { min-width: 96px; height: 40px; border-radius: 10px !important; font: 700 14px var(--font-ui) !important; box-shadow: none !important; }
#modalcolorsetting#modalcolorsetting .modal-footer .btn-primary { background: var(--action) !important; border-color: var(--action) !important; color: var(--text-on-action) !important; }
#modalcolorsetting#modalcolorsetting .modal-footer .btn-secondary { background: transparent !important; border: 1px solid var(--border-strong) !important; color: var(--text-1) !important; }

/* grip on top of the phone chat panel (upright): drag to resize */
.ChatTutamak { display: none; }
@media (max-width: 500px) and (orientation: portrait) {
  #PencereAna.MasaGorunur :is(#MasaMesajContainer, #MasaNickContainer):not(.MobilGizle) { display: flex !important; flex-direction: column !important; }
  #PencereAna.MasaGorunur :is(#MasaMesajContainer, #MasaNickContainer):not(.MobilGizle) > :not(.ChatTutamak) { flex: 1 1 auto; min-height: 0; }
  .ChatTutamak { display: flex; flex: 0 0 24px; align-items: center; justify-content: center; cursor: ns-resize; touch-action: none; background: var(--bg-2); }
  .ChatTutamak i { width: 44px; height: 5px; border-radius: 3px; background: var(--border-strong); }
}

/* ==========================================================================
   14. GAME TABLE REDESIGN (2026-10)
   One material on the felt (smoked glass), one for the board (walnut with a
   brass lip); gold only means "your turn" or the main action. Tiles untouched.
   ========================================================================== */
#PencereAna, #modalOkeyAcilanEl {
  --cam: rgba(7, 11, 9, .56);
  --cam-koyu: rgba(7, 11, 9, .76);
  --cam-cizgi: rgba(255, 255, 255, .13);
  --cam-yazi: #F3ECDA;
  --cam-yazi-2: #C9C2AE;
  --cam-golge: 0 10px 28px rgba(0, 0, 0, .28);
  --altin: #F2CF6B;
  --altin-2: #D6A531;
  --ceviz-1: #93603A;
  --ceviz-2: #74482B;
  --ceviz-3: #55331B;
  --ceviz-dudak: #2E1A0B;
  --pirinc: rgba(255, 214, 150, .32);
}

/* Felt: a lamp over the middle, a faint woven grain, darker edges */
#PencereAna #MasaIcerikDiv {
  background:
    var(--felt-pattern),
    radial-gradient(ellipse 60% 48% at 50% 34%, rgba(255, 255, 255, .08), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 120% 100% at 50% 34%, var(--felt-1) 0%, var(--felt-2) 52%, var(--felt-3) 100%) !important;
  box-shadow: inset 0 0 160px rgba(0, 0, 0, .3) !important;
}

/* Glass: info card, seats, toolbar, side actions, auto pilot */
#PencereAna :is(#Mtr251Info, .MasaNickOrtak, #MasaDivZamanliMesaj) {
  background: var(--cam) !important;
  border: 1px solid var(--cam-cizgi) !important;
  box-shadow: var(--cam-golge) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

/* Table info: title + chips instead of a line-per-rule list */
#PencereAna #Mtr251Info { min-width: 0 !important; max-width: 196px !important; padding: 12px 14px !important; border-radius: 16px !important; }
#PencereAna #Mtr251Info :is(#MasaAyarlarDiv, #MasaAyarlarDiv2) { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }
#PencereAna #Mtr251Info #MasaAyarlarDiv2:empty { display: none !important; }
#PencereAna #Mtr251Info #MasaAyarlarDiv2 { margin-top: 9px !important; padding-top: 9px !important; border-top: 1px solid rgba(255, 255, 255, .09) !important; }
#PencereAna #Mtr251Info .MBbas { flex: 1 0 100%; margin-bottom: 3px; font: 600 17px/1.2 var(--font-display); color: var(--cam-yazi); }
#PencereAna #Mtr251Info .MBcip {
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .08); font: 500 12px/1.35 var(--font-ui); color: var(--cam-yazi-2);
}
#PencereAna #Mtr251Info #MasaAyarlarDiv2 .MBcip { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #A39E8E; }

/* Seats: a nameplate with a round avatar; the player on turn glows gold */
#PencereAna .MasaNickOrtak { border-radius: 999px !important; transition: box-shadow .25s ease, border-color .25s ease; }
#PencereAna .MasaNickOrtak #MasaResimDiv { border-radius: 50% !important; border: 0 !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .16) !important; }
#PencereAna .MasaNickOrtak #MasaResimImg { border-radius: 50% !important; object-fit: cover; }
#PencereAna .MasaNickOrtak #MasaNickDiv { font: 600 15px var(--font-ui) !important; color: var(--cam-yazi) !important; letter-spacing: 0 !important; }
#PencereAna .MasaNickOrtak.MasaRenkAktif {
  border: 1px solid rgba(242, 207, 107, .9) !important;
  box-shadow: 0 0 0 3px rgba(242, 207, 107, .22), 0 0 30px rgba(242, 207, 107, .35), var(--cam-golge) !important;
}
#PencereAna .MasaNickOrtak.MasaRenkAktif #MasaResimDiv { box-shadow: 0 0 0 2px var(--altin) !important; }
#PencereAna .MasaNickOrtak:has(#MasaResimImg[src*="avatarsaydam"]) {
  background: rgba(0, 0, 0, .14) !important; border: 1.5px dashed rgba(255, 255, 255, .26) !important;
  box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
#PencereAna .MasaNickOrtak:has(#MasaResimImg[src*="avatarsaydam"]) #MasaResimDiv { box-shadow: none !important; }
#PencereAna :is(#MasaButonBotArti, #MasaButonBotEksi):not(.Gizli) {
  height: 26px !important; padding: 0 11px !important; border: 0 !important;
  background: rgba(255, 255, 255, .11) !important; color: var(--cam-yazi) !important;
}
#PencereAna :is(#MasaButonBotArti, #MasaButonBotEksi):not(.Gizli):hover { background: rgba(242, 207, 107, .2) !important; color: var(--altin) !important; }

/* Timer: dark disc, gold ring that shrinks (canvas), red in the last 5 s */
#PencereAna #MasaGeriSayimDiv {
  border: 0 !important; border-radius: 50% !important; padding: 3px !important;
  background: var(--cam-koyu) !important;
  box-shadow: 0 0 0 1px var(--cam-cizgi), 0 8px 20px rgba(0, 0, 0, .3) !important;
}
#PencereAna .MasaGeriSayimDivIc { background: transparent !important; border: 0 !important; }
#PencereAna #Mtr3687 { background: none !important; border-radius: 50% !important; }
#PencereAna #MasaGeriSayimDiv.Durdu { visibility: hidden !important; }

/* Your turn: the indicator + draw pile breathe in gold */
#PencereAna #OkeyOrtaTaslar { border-radius: 10px !important; }
#PencereAna #OkeyOrtaTaslar.MasaRenkSiraSizde { animation: salonSira 1.6s ease-in-out infinite !important; }
@keyframes salonSira {
  0%, 100% { box-shadow: 0 0 0 2px rgba(242, 207, 107, .5), 0 0 14px rgba(242, 207, 107, .2); }
  50% { box-shadow: 0 0 0 3px rgba(242, 207, 107, .95), 0 0 30px rgba(242, 207, 107, .45); }
}
#PencereAna #MasaDivZamanliMesaj {
  min-width: 0 !important; padding: 6px 16px !important; border-radius: 999px !important;
  color: var(--cam-yazi) !important; font: 600 13px var(--font-ui) !important; text-shadow: none !important;
}

/* Discard slots: an empty slot is a dashed outline, not a face-down tile */
#PencereAna .OkeyTasAlaniCerceve {
  border: 0 !important; border-radius: 8px !important;
  background: rgba(0, 0, 0, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 69' preserveAspectRatio='none'%3E%3Crect x='1' y='1' width='48' height='67' rx='7' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='1.5' stroke-dasharray='4 3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .28) !important;
}
#PencereAna :is(#OkeyTasAlaniAl1, #OkeyTasAlaniAl2, #OkeyTasAlaniAl, #OkeyTasAlaniAt)[style*="tarka.png"] { background-image: none !important; }

/* Auto pilot: a switch instead of a bare checkbox */
#PencereAna .Mtr2519 label {
  display: inline-flex !important; align-items: center !important; gap: 8px !important; white-space: nowrap !important;
  padding: 4px 12px 4px 5px !important; border-radius: 999px !important;
  background: var(--cam) !important; border: 1px solid var(--cam-cizgi) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cam-yazi) !important; font: 600 12px var(--font-ui) !important; text-shadow: none !important;
}
#PencereAna #MasaButonOtoPilot {
  -webkit-appearance: none; appearance: none; position: relative; flex: none;
  width: 32px !important; height: 18px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; border-radius: 999px;
  background: rgba(255, 255, 255, .24); cursor: pointer; transition: background .2s ease;
}
#PencereAna #MasaButonOtoPilot::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s ease;
}
#PencereAna #MasaButonOtoPilot:checked { background: var(--altin-2); }
#PencereAna #MasaButonOtoPilot:checked::before { transform: translateX(14px); }
/* phones: the switch sits by the right edge, so no pill around it */
.WH500 #PencereAna .Mtr2519 { transform: translateX(-34px); }
.WH500 #PencereAna .Mtr2519 label { padding: 0 !important; gap: 5px !important; background: none !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 11px !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .6) !important; }
.EkranDikey #PencereAna .MasaNickOrtak.MasaNickDikey { border-radius: 22px !important; }
.EkranDikey #PencereAna .MasaNickOrtak.MasaNickDikey #MasaResimDiv { border-radius: 14px !important; }
/* phone upright: auto pilot on the left under the toolbar, free of the seats */
.EkranDikey.WH500 #PencereAna .Mtr2519 { position: fixed !important; left: 10px !important; right: auto !important; top: 195px !important; bottom: auto !important; transform: none; }

/* The board (istaka): walnut rows, rounded end caps, a brass-edged front lip */
#PencereAna #OkeyIstakaOrtaDiv, #modalOkeyAcilanEl #OkeyIstakaOrtaDiv { border-radius: 14px !important; box-shadow: 0 22px 34px -12px rgba(0, 0, 0, .6) !important; }
:is(#PencereAna, #modalOkeyAcilanEl) :is(#OkeyIstakaUstSira, #OkeyIstakaAltSira) {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 22%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 11px, rgba(255, 255, 255, .03) 11px 12px, transparent 12px 23px),
    linear-gradient(180deg, var(--ceviz-1), var(--ceviz-2) 74%, var(--ceviz-3)) !important;
  background-size: auto !important;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .32), inset 0 -5px 0 var(--pirinc) !important;
}
:is(#PencereAna, #modalOkeyAcilanEl) :is(#OkeyIstakaSolDiv, #OkeyIstakaSagDiv) {
  background-image: linear-gradient(180deg, var(--ceviz-1), var(--ceviz-3)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
:is(#PencereAna, #modalOkeyAcilanEl) #OkeyIstakaSolDiv { border-radius: 14px 0 0 14px !important; }
:is(#PencereAna, #modalOkeyAcilanEl) #OkeyIstakaSagDiv { border-radius: 0 14px 14px 0 !important; }
:is(#PencereAna, #modalOkeyAcilanEl) #OkeyIstakaAltDiv {
  background-image: linear-gradient(180deg, #C9975A 0, #C9975A 1px, var(--ceviz-3) 1px, var(--ceviz-dudak)) !important;
}

/* Rack actions beside the board: quiet glass buttons, same size on both sides */
#PencereAna #masatable .masaislevdis .btn {
  height: 44px !important; min-width: 132px !important; padding: 0 16px 0 10px !important; margin: 0 14px !important;
  border-radius: 12px !important; background: var(--cam) !important; border: 1px solid var(--cam-cizgi) !important;
  box-shadow: var(--cam-golge) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--cam-yazi) !important; text-shadow: none !important;
}
#PencereAna #masatable .masaislevdis .btn:hover { border-color: rgba(242, 207, 107, .65) !important; }
#PencereAna #masatable .masaislevdis .btn:hover .masaislevbuton { color: var(--altin) !important; }
#PencereAna #masatable .masaislevbuton, #PencereAna #masatable .masaislevbuton * { font: 600 14px var(--font-ui) !important; color: var(--cam-yazi) !important; }
#PencereAna #masatable .masaislevdis .IconMt { width: 30px !important; height: 30px !important; }

/* Toolbar and phone rack actions on every screen size: the same glass */
#PencereAna #MasaPanelSag .butonMasaSag, #PencereAna .mobilislevbuton .butonIcon {
  background: var(--cam-koyu) !important; border: 1px solid var(--cam-cizgi) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25) !important; color: var(--cam-yazi) !important; text-shadow: none !important;
}
#PencereAna #MasaPanelSag .butonMasaSag i { color: inherit !important; }
#PencereAna #MasaPanelSag .butonMasaSag.MobilAktifButon { background: rgba(242, 207, 107, .22) !important; color: var(--altin) !important; }
#PencereAna #MasaPanelSag #MasaButonBaslat { background: linear-gradient(180deg, var(--altin), var(--altin-2)) !important; color: #2A1D04 !important; border-color: transparent !important; }
#PencereAna #MasaPanelSag :is(#MasaButonKalk, #MasaButonKalkMobil) { color: #F4A19B !important; }
#PencereAna #MasaPanelSag #MasaAracToggle { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }

/* Toolbar: one glass dock, icon buttons alike; leaving is red only on hover,
   starting is the one gold button */
@media (min-width: 768px) and (min-height: 501px) {
  #PencereAna #MasaPanelSag {
    display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 2px !important;
    width: auto !important; height: auto !important; padding: 5px !important; top: 14px !important; right: 14px !important;
    background: var(--cam) !important; border: 1px solid var(--cam-cizgi) !important; border-radius: 16px !important;
    box-shadow: var(--cam-golge) !important; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  }
  #PencereAna #MasaDivDigerIcerik { margin-right: 4px !important; padding-right: 5px !important; border-right: 1px solid rgba(255, 255, 255, .1) !important; }
  #PencereAna #MasaPanelSag div[style*="clear"] { display: none !important; }
  #PencereAna #MasaPanelSag .butonMasaSag {
    position: relative !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 0 !important;
    margin: 0 1px !important; padding: 0 !important; text-align: center !important; line-height: 38px !important;
    border: 0 !important; border-radius: 11px !important; background: transparent !important; box-shadow: none !important;
    color: var(--cam-yazi) !important; font-size: 17px !important; transform: none !important;
  }
  #PencereAna #MasaPanelSag .butonMasaSag i { color: inherit !important; font-size: 17px !important; line-height: 38px !important; }
  #PencereAna #MasaPanelSag .butonMasaSag:hover { background: rgba(255, 255, 255, .1) !important; }
  #PencereAna #MasaPanelSag #MasaButonKalk { color: #F4A19B !important; }
  #PencereAna #MasaPanelSag #MasaButonKalk:hover { background: rgba(229, 72, 77, .22) !important; color: #FFC7C2 !important; }
  #PencereAna #MasaPanelSag #MasaButonBaslat { background: linear-gradient(180deg, var(--altin), var(--altin-2)) !important; color: #2A1D04 !important; }
  #PencereAna #MasaPanelSag #MasaButonBaslat i { font-size: 20px !important; }
  #PencereAna #MasaPanelSag #MasaButonBaslat:hover { filter: brightness(1.06); }
  #PencereAna #MasaPanelSag #MasaAracToggle { width: 30px !important; min-width: 30px !important; color: var(--cam-yazi-2) !important; }
}

/* Chat under the table: a calm panel, rounded input, quiet tool buttons */
#PencereAna #MasaOkeyAlt { border-top: 1px solid var(--border-subtle) !important; }
#PencereAna #MasaYaziTahtasi { padding: 12px 18px !important; font-size: 14.5px !important; line-height: 1.6 !important; }
#PencereAna #MasaYaziAlani > label.SabitSagUst { font: 500 12px var(--font-ui) !important; color: var(--text-3) !important; opacity: .8; }
#PencereAna #YaziKutusuMasa { padding: 10px 14px 12px !important; gap: 8px !important; }
#PencereAna #MasaOkeyYaziInp {
  height: 44px !important; padding: 0 18px !important; border-radius: 999px !important;
  background: var(--bg-2) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-1) !important;
  font: 500 15px var(--font-ui) !important; box-shadow: none !important;
}
#PencereAna #MasaOkeyYaziInp:focus { border-color: var(--gold-500) !important; box-shadow: var(--ring) !important; }
#PencereAna #YaziKutusuMasa .IconYaziB:not(#GonderButonDiv) {
  width: 44px !important; height: 44px !important; border-radius: 12px !important;
  background-color: transparent !important; border: 1px solid var(--border-subtle) !important; box-shadow: none !important;
}
#PencereAna #YaziKutusuMasa .IconYaziB:not(#GonderButonDiv):hover { background-color: var(--bg-3) !important; border-color: var(--border-strong) !important; }
#PencereAna #YaziKutusuMasa #GonderButonDiv { width: 44px !important; height: 44px !important; border-radius: 50% !important; box-shadow: none !important; }
#PencereAna #MasaNickContainer { border-left: 1px solid var(--border-subtle) !important; }
#PencereAna #MasaNickler .SalonNickListeTekil { border-radius: 14px !important; }

/* Rank badges: the label inside took the list's text colour (dark on the dark
   pill on light backgrounds); it follows the badge colour instead */
:is(#SalonNickler, #MasaNickler, #SalonYaziTahtasi, #MasaYaziTahtasi) .RolRozet.rutbe * { color: inherit !important; }

/* ==========================================================================
   15. LOBBY + TABLE POLISH (round 2)
   ========================================================================== */
/* Lobby cards: a quiet emblem, one thin felt edge, a neutral table number */
#SalonMasalar .Mtr621::before { opacity: .16 !important; background-size: auto 58% !important; }
#SalonMasalar .Mtr621, body.Mtr5896842 #SalonMasalar .Mtr621 { border: 1px solid color-mix(in srgb, var(--felt-edge) 55%, transparent) !important; }
#SalonMasalar #Mtr62BilgiMasaNoStr {
  background: rgba(0, 0, 0, .45) !important; color: #F3ECDA !important;
  border: 1px solid rgba(255, 255, 255, .18) !important; box-shadow: none !important;
}
#SalonMasalar .Mtr62Nick [id$="NickID"] { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
  #SalonMasalar .Mtr62Tekil:is(:hover, :focus-within) .SalonOynaOrtak:not(.Gizli) {
    background: rgba(7, 11, 9, .62) !important; color: #F3ECDA !important; border: 1px solid rgba(255, 255, 255, .35) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  #SalonMasalar .Mtr62Tekil:is(:hover, :focus-within) .SalonOynaOrtak:not(.Gizli):hover {
    background: var(--action) !important; color: var(--text-on-action) !important; border-color: var(--action-hover) !important;
  }
}
/* private / password tables: a labelled chip instead of a red picture */
#SalonMasalar :is(#Mtr62BilgiIconOzel, #Mtr62BilgiIconSifre):not(.Gizli) {
  display: inline-flex !important; align-items: center !important; width: auto !important; height: 26px !important;
  padding: 0 10px !important; margin: 0 !important; border-radius: 999px !important;
  background: var(--bg-2) none !important; border: 1px solid var(--border-subtle) !important;
  color: var(--text-2) !important; font: 500 12px var(--font-ui) !important;
}
#SalonMasalar #Mtr62BilgiIconOzel:not(.Gizli)::before { content: "\f8a8\00a0 Özel"; font-family: "bootstrap-icons", var(--font-ui); }
#SalonMasalar #Mtr62BilgiIconSifre:not(.Gizli)::before { content: "\f44e\00a0 Şifreli"; font-family: "bootstrap-icons", var(--font-ui); }

/* One main action: Hızlı oyna stays gold, Yeni Masa steps back */
#PencereAna #SalonMasaYeniButonDiv {
  background: transparent !important; border: 1px solid var(--border-strong) !important;
  color: var(--text-1) !important; box-shadow: none !important;
}
#PencereAna #SalonMasaYeniButonDiv:hover { border-color: var(--action) !important; color: var(--action-hover) !important; }

/* Header: the online count says what it is, no stray orange line over the nick,
   the bell dot only when something is new (jQuery show/hide decides) */
#AnaToplamDiv::before { content: "\f4cf"; font-family: "bootstrap-icons"; margin-right: 5px; font-size: .9em; }
#AnaToplamDiv { width: auto !important; padding: 0 10px !important; white-space: nowrap; }
#AnaUstPanel #AnaUstHGExt { border-top: 0 !important; }

/* Radio: play on the left, title over the volume, the title scrolls on hover
   when it does not fit */
#PencereAna #RadioPlayer {
  display: grid !important; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: 8px; align-items: center;
  width: clamp(180px, 17vw, 250px) !important; height: 48px !important; padding: 4px 12px 4px 6px !important;
}
#PencereAna #RadioPlayer > div:first-child { display: contents !important; }
#PencereAna #RadioPlayer :is(#baslat, #durdur) {
  grid-column: 1; grid-row: 1 / 3; width: 34px; height: 34px; padding: 0 !important; border-radius: 50% !important;
  background: var(--bg-3) !important; border: 1px solid var(--border-subtle) !important; line-height: 1 !important;
}
#PencereAna #RadioPlayer :is(#baslat, #durdur) svg { width: 18px; height: 18px; vertical-align: middle; }
#PencereAna #RadioPlayer #seskontrol { grid-column: 2; grid-row: 2; width: 100% !important; height: 14px; margin: 0; }
#PencereAna #RadioPlayer > div:last-child { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; }
#PencereAna #radio_song_title { color: var(--text-1) !important; font-weight: 600 !important; font-size: 12.5px !important; }
#PencereAna #RadioPlayer:hover #radio_song_title.Tasiyor { display: inline-block; text-overflow: clip !important; padding-left: 100%; animation: radyoKay 10s linear infinite; }
@keyframes radyoKay { to { transform: translateX(-100%); } }

/* Tab arrows only when the tabs overflow (JS sets .TabTasma) */
#AnaTabPanel:not(.TabTasma) :is(.tabEksi, .tabArti) { display: none !important; }

/* Lobby chat: the welcome line alone (the broom moved to the input bar,
   following the chat is automatic), a lower default height, resizable */
#PencereAna .SalonScrollIslev { display: none !important; }
#PencereAna label:has(> :is(#SalonScrollKaydir, #MasaScrollKaydir, #OzelScrollKaydir)) { display: none !important; }
@media (min-width: 768px) and (min-height: 501px) {
  #PencereAna #SalonMesajContainer { height: var(--lobi-sohbet, clamp(200px, 34vh, 360px)) !important; max-height: 60vh !important; position: relative !important; flex-shrink: 0 !important; }
  .LobiSohbetTutamak { position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 6; cursor: ns-resize; touch-action: none; }
  .LobiSohbetTutamak::after { content: ''; position: absolute; left: 50%; top: 2px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--border-strong); opacity: 0; transition: opacity .15s; }
  #SalonMesajContainer:hover .LobiSohbetTutamak::after, .LobiSohbetTutamak.suruk::after { opacity: 1; }
}

/* Chat: "***" lines are quiet system lines, many smileys shrink, a pill
   takes you back down when you scrolled up */
/* System lines are notices: one clear card for all of them (they came in five
   looks: small grey, italic gold, blue, brown, a person-like "<Sistem>" line) */
:is(#SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) :is(.SistemSatir, .RenkSistemMesaji, .RenkGenelMesaj, .RenkYayinciBilgi, .RenkIstekBilgi) {
  display: flex !important; align-items: baseline; gap: 8px; width: fit-content; max-width: 100%; box-sizing: border-box;
  margin: 6px 0 !important; padding: 6px 12px 6px 10px !important; border-radius: 0 10px 10px 0 !important;
  font: 600 14px/1.4 var(--font-ui) !important; font-style: normal !important; letter-spacing: 0 !important; text-shadow: none !important;
  color: var(--text-1) !important; background: rgba(214, 165, 49, .14) !important; border-left: 4px solid #D6A531 !important;
}
:is(#SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) :is(.SistemSatir, .RenkSistemMesaji, .RenkGenelMesaj, .RenkYayinciBilgi, .RenkIstekBilgi) * { font-style: normal !important; }
:is(#SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) :is(.SistemSatir, .RenkSistemMesaji, .RenkGenelMesaj, .RenkYayinciBilgi, .RenkIstekBilgi)::before {
  content: "\f430"; font-family: "bootstrap-icons"; font-weight: 400; font-size: 1.05em; color: #C08A1E; flex: none;
}
/* announcements (Genel Mesaj, Duyuru): megaphone, stronger */
:is(#SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) .RenkGenelMesaj { background: rgba(210, 59, 74, .12) !important; border-left-color: #D23B4A !important; font-size: 15px !important; }
:is(#SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) .RenkGenelMesaj::before { content: "\f483"; color: #D23B4A; }
/* radio: music note, blue */
:is(#SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) :is(.RenkYayinciBilgi, .RenkIstekBilgi) { background: rgba(59, 130, 196, .12) !important; border-left-color: #3B82C4 !important; }
:is(#SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) :is(.RenkYayinciBilgi, .RenkIstekBilgi)::before { content: "\f49e"; color: #3B82C4; }
#PencereAna #SalonYaziTahtasi { font-size: 15px !important; line-height: 1.55 !important; }
:is(#SalonYaziTahtasi, #MasaYaziTahtasi, #OzelYaziTahtasi) .Yazilar:has(.IconSmileyYazi ~ .IconSmileyYazi ~ .IconSmileyYazi ~ .IconSmileyYazi) .IconSmileyYazi {
  width: auto !important; height: 1.6em !important;
}
:is(#SalonYaziAlani, #MasaYaziAlani, #OzelYaziAlani) { position: relative !important; }
.AltaGit {
  position: absolute; left: 50%; z-index: 7; display: none; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  transform: translateX(-50%); border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-3);
  color: var(--text-1); font: 600 13px var(--font-ui); box-shadow: var(--shadow-2); cursor: pointer;
}
.AltaGit.goster { display: inline-flex; }
.AltaGit.yeni { background: var(--action); border-color: var(--action-hover); color: #fff; }

/* Table: the emblem sits in the middle of the felt above the board */
#PencereAna #MasaIcerikDiv::before { background-size: auto 30% !important; background-position: 50% 22% !important; opacity: .12 !important; }
/* before the game the big "Oyunu başlat" on the board is the only start */
#PencereAna #MasaIcerikDiv:has(#OkeyIstakaYaziStr:not(.Gizli) .OnPanel) #MasaButonBaslat { display: none !important; }
/* empty seat: invite people first, bots second */
#PencereAna .KoltukDavet { display: none; }
#PencereAna .MasaNickOrtak:has(#MasaButonBotArti:not(.Gizli)) .KoltukDavet {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; margin: 4px 6px 0 0; vertical-align: top;
  border-radius: 999px; background: rgba(242, 207, 107, .2); color: var(--altin); font: 600 12px var(--font-ui); cursor: pointer;
}
#PencereAna .MasaNickOrtak .KoltukDavet:hover { background: rgba(242, 207, 107, .32); }
/* phones: seats are tight and the board panel has the big "Davet et" */
.WH500 #PencereAna .MasaNickOrtak .KoltukDavet { display: none !important; }
/* desktop: auto pilot right under the toolbar dock */
@media (min-width: 768px) and (min-height: 501px) {
  #PencereAna .MasaNickUstDis { position: static !important; }
  #PencereAna .Mtr2519 { top: 74px !important; right: 14px !important; left: auto !important; bottom: auto !important; }
}

/* Phones: no blur behind the glass (it costs frames), a little darker instead */
@media (max-width: 767px), (max-height: 500px) {
  #PencereAna { --cam: rgba(7, 11, 9, .74); }
  #PencereAna :is(#Mtr251Info, .MasaNickOrtak, #MasaDivZamanliMesaj, #MasaPanelSag, .Mtr2519 label, #masatable .masaislevdis .btn) {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ==========================================================================
   16. TABLE EXTRAS (round 3): chat height, mini profile, reactions, hand
   end, lobby chips
   ========================================================================== */
/* table chat: drag its top edge; once a height was chosen the table is a
   column (felt takes what the chat leaves) */
@media (min-width: 768px) and (min-height: 501px) {
  #PencereAna #MasaOkeyAlt { position: relative !important; overflow: visible !important; }
  .MasaSohbetTutamak { position: absolute; top: -5px; left: 0; right: 0; height: 10px; z-index: 6; cursor: ns-resize; touch-action: none; }
  .MasaSohbetTutamak::after { content: ''; position: absolute; left: 50%; top: 3px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: var(--border-strong); opacity: 0; transition: opacity .15s; }
  #MasaOkeyAlt:hover .MasaSohbetTutamak::after, .MasaSohbetTutamak.suruk::after { opacity: 1; }
  html.MasaSohbetAyarli #PencereAna #MasaIcerikDiv { display: flex !important; flex-direction: column !important; }
  html.MasaSohbetAyarli #PencereAna #MasaOkeyUst { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; }
  html.MasaSohbetAyarli #PencereAna #MasaOkeyOrta { flex: 0 0 auto !important; }
  html.MasaSohbetAyarli #PencereAna #MasaOkeyAlt { flex: 0 0 var(--masa-sohbet) !important; height: var(--masa-sohbet) !important; }
  html.MasaSohbetAyarli #PencereAna #MasaOkeyAlt > :is(#MasaMesajContainer, #MasaNickContainer) { height: 100% !important; }
}
.MasaSohbetTutamak { display: none; }
@media (min-width: 768px) and (min-height: 501px) { .MasaSohbetTutamak { display: block; } }

/* seat nameplates are clickable (mini profile) and carry reaction bubbles */
#PencereAna .MasaNickOrtak { position: relative; }
#PencereAna .MasaNickOrtak:has(#MasaNickDiv:not(:empty)):not(:has(#MasaResimImg[src*="avatarsaydam"])) { cursor: pointer; }
.MiniProfil {
  position: fixed; z-index: 1080; width: 280px; padding: 14px; border-radius: 16px;
  background: var(--bg-1); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2);
  color: var(--text-1); font: 400 14px/1.4 var(--font-ui);
}
.MiniProfil .MpUst { display: flex; align-items: center; gap: 12px; }
.MiniProfil .MpAvatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--border-strong); flex: none; }
.MiniProfil .MpBaslik { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.MiniProfil .MpNick { font: 700 16px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.MiniProfil .MpYetki { font-size: 12px; color: var(--text-3); }
.MiniProfil .MpBaslik .RolRozet { align-self: flex-start; }
.MiniProfil .MpKapat { align-self: flex-start; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); }
.MiniProfil .MpKapat:hover { background: var(--bg-3); }
.MiniProfil .MpGovde { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.MiniProfil .MpNot { color: var(--text-3); font-size: 13px; }
.MiniProfil .MpSayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.MiniProfil .MpSayilar > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border-subtle); }
.MiniProfil .MpSayilar b { font: 700 15px var(--font-ui); font-variant-numeric: tabular-nums; }
.MiniProfil .MpSayilar span { font-size: 11px; color: var(--text-3); }
.MiniProfil .MpRozetler { display: flex; flex-wrap: wrap; gap: 5px; }
.MiniProfil .MpRozetler .Rozet { padding: 2px 8px; border-radius: 999px; background: var(--bg-3); font-size: 12px; }
.MiniProfil .MpTarih { font-size: 12px; color: var(--text-3); }
.MiniProfil .MpAlt { margin-top: 12px; display: flex; gap: 6px; }
.MiniProfil .MpAlt:empty { display: none; }
.MiniProfil .MpAna { flex: 1; height: 38px; border: 0; border-radius: 10px; background: var(--action); color: #fff; font: 600 14px var(--font-ui); }
.MiniProfil .MpAna:hover { background: var(--action-hover); }
.MiniProfil .MpEk { display: flex; gap: 6px; }
.MiniProfil .MpEk button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-1); font-size: 16px; }
.MiniProfil .MpEk button:hover { background: var(--bg-3); }
.MiniProfil .MpEk button.aktif { color: var(--danger); border-color: var(--danger); }

/* Tepki & İkram: one panel per table under the toolbar button (tabs on top),
   reactions rise over the seat, treats fly to it */
.IkramPanel {
  position: absolute; z-index: 30; display: flex; flex-direction: column; gap: 6px; width: min(360px, calc(100% - 16px)); padding: 6px; overflow: hidden;
  border-radius: 14px; background: var(--bg-1); border: 1px solid var(--border-strong); box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.IzleyiciModu :is(#MasaButonTepki, .TepkiAc) { display: none !important; } /* watchers neither react nor treat */
.IkramPanel #IsmarlaNesneDiv:not(.Gizli) {
  position: static !important; width: auto !important; max-height: none !important; min-height: 0; flex: 1 1 auto; padding: 0 2px 2px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; z-index: auto !important;
}
.IkramPanel #IsmarlaNesneDiv::before { display: none; }
#PencereAna #OkeyIstakaDiv { position: relative; }

/* hand end: points under the winning hand */
#modalOkeyAcilanEl .ElSonu:not(:empty) { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
#modalOkeyAcilanEl .EsSatir {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--border-subtle); font: 500 15px var(--font-ui); color: var(--text-1);
}
#modalOkeyAcilanEl .EsSatir .EsPuan { font: 700 16px var(--font-ui); font-variant-numeric: tabular-nums; }
#modalOkeyAcilanEl .EsSatir.kazanan { background: linear-gradient(90deg, rgba(242, 207, 107, .25), rgba(242, 207, 107, .06)); border-color: #D6A531; }
#modalOkeyAcilanEl .EsSatir.kazanan .EsAd::before { content: "\f5e6"; font-family: "bootstrap-icons"; margin-right: 8px; color: #D6A531; }
#modalOkeyAcilanEl .EsSatir.kazanan .EsPuan { color: var(--success); }
#modalOkeyAcilanEl .EsSatir.kaybeden .EsPuan { color: var(--danger); }
#modalOkeyAcilanEl .EsSatir.sen { box-shadow: inset 3px 0 0 var(--gold-500); font-weight: 700; }
#modalOkeyAcilanEl #Mtr78 { font: 600 16px var(--font-ui); margin-bottom: 10px; }

/* lobby chips */
.FiltreCipler { display: flex; clear: both; align-items: center; gap: 6px; padding-top: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
.FiltreCipler::-webkit-scrollbar { display: none; }
/* Phones: actions, table search and chips in ONE row that scrolls sideways.
   Upright they took three rows, sideways two, and squeezed the table list. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
  #SalonUstMenu > .FormAyarLbl { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; width: 100% !important; overflow-x: auto !important; scrollbar-width: none; }
  #SalonUstMenu > .FormAyarLbl::-webkit-scrollbar { display: none; }
  #SalonUstMenu > .FormAyarLbl > * { flex: 0 0 auto !important; float: none !important; margin: 0 !important; }
  #SalonUstMenu > .FormAyarLbl > .SalonMasaFiltreDiv { width: 120px !important; }
  #SalonUstMenu .FiltreCipler { padding-top: 0 !important; overflow: visible !important; max-width: none !important; }
}
.FiltreCip {
  flex: none; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-subtle);
  background: var(--bg-2); color: var(--text-2); font: 600 13px var(--font-ui); white-space: nowrap;
}
.FiltreCip:hover { border-color: var(--border-strong); color: var(--text-1); }
.FiltreCip.aktif { background: #F2CF6B; border-color: #D6A531; color: #2A1D04; }
.BaseBatak .FiltreCipler { display: none; }
#SalonMasalar > .Mtr62Tekil.CipGizli { display: none !important; }
.MiniProfil .RolRozet {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  font: 700 11px/1.6 var(--font-ui); color: #E8B94A; box-shadow: inset 0 0 0 1px currentColor; white-space: nowrap;
}
.MiniProfil .RolRozet svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.MiniProfil .RolRozet * { color: inherit; }
/* phone sideways: the top seat steps left so it ends before the ~312px toolbar
   (a fixed -70px still ran under it below ~700px wide); under 600px it also
   gets narrower so it stays clear of "‹ Lobi" */
.EkranYatay.WH500 #PencereAna #MasaNickUst { left: min(-70px, calc(50vw - 415px)); }
@media (max-width: 600px) {
  .EkranYatay.WH500 #PencereAna #MasaNickUst { left: calc(50vw - 400px); min-width: 0 !important; max-width: 160px !important; }
}

/* ==========================================================================
   17. TABLE EXTRAS (round 4)
   ========================================================================== */
/* last discard: a short drop, then a gold ring until the next one */
#PencereAna .OkeyTasAlaniCerceve.SonAtilan { box-shadow: 0 0 0 3px #F2CF6B, 0 0 22px 4px rgba(242, 207, 107, .6) !important; }
/* the one at my left is mine to take now: it breathes */
#PencereAna .OkeyTasAlaniCerceve.SonAtilan:has(#OkeyTasAlaniAl) { outline: 3px solid rgba(255, 224, 138, 0); outline-offset: 2px; animation: alinabilir 1.4s ease-in-out infinite; }
@keyframes alinabilir { 50% { outline-color: rgba(255, 224, 138, .95); outline-offset: 5px; } }
@media (max-width: 500px), (max-height: 500px) {
  #PencereAna .OkeyTasAlaniCerceve.SonAtilan { box-shadow: 0 0 0 3px #F2CF6B, 0 0 16px 5px rgba(242, 207, 107, .7) !important; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { #PencereAna .OkeyTasAlaniCerceve.SonAtilan { animation: none !important; } }
#PencereAna .YeniAtilan { animation: tasDus .38s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes tasDus { from { transform: translateY(-18px) scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }
/* the tile I drew pops in on the board */
#PencereAna .YeniCekilen { animation: tasCek .45s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes tasCek { 0% { transform: translateY(-22px) scale(.9); } 60% { transform: translateY(2px) scale(1.04); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { #PencereAna :is(.YeniAtilan, .YeniCekilen) { animation: none; } }

/* reactions: switch off other players' reactions */

/* hand end: "Yeni el" for the table owner */
#modalOkeyAcilanEl .ElYeni { background: linear-gradient(180deg, #F2CF6B, #D6A531) !important; border: 0 !important; color: #2A1D04 !important; font-weight: 700 !important; margin-right: auto; }

/* desktop: the shortcut letter on the board buttons */
@media (hover: hover) and (min-width: 768px) and (min-height: 501px) {
  #PencereAna #masatable :is(#MasaOkeyButonElimiDiz, #MasaOkeyButonElimiCiftDiz) .masaislevbuton div::after {
    display: inline-block; margin-left: 8px; padding: 0 5px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .25);
    font: 600 11px/16px var(--font-ui); color: #C9C2AE; vertical-align: 1px;
  }
  #PencereAna #masatable #MasaOkeyButonElimiDiz .masaislevbuton div::after { content: "S"; }
  #PencereAna #masatable #MasaOkeyButonElimiCiftDiz .masaislevbuton div::after { content: "Ç"; }
}

/* friends at a table: join button in the player list */
#SalonNickler .ArkadasKatil {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2;
  height: 28px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--action); color: #fff; font: 600 12px var(--font-ui);
}
#SalonNickler .ArkadasKatil:hover { background: var(--action-hover); }
#SalonNickler .SalonNickListeTekil:has(.ArkadasKatil) { position: relative; }

/* mini profile: last hands as dots */
.MiniProfil .MpSon { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-3); }
.MiniProfil .MpSonNokta { display: flex; gap: 4px; }
.MiniProfil .MpSonNokta i { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-3); }
.MiniProfil .MpSonNokta i.k { background: var(--success); }
.MiniProfil .MpSonNokta i.y { background: var(--danger); opacity: .85; }

/* first visit at a table: spotlight + bubble */
.Tanitim { position: fixed; inset: 0; z-index: 1090; }
.Tanitim .TnDelik { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62), 0 0 0 2px #F2CF6B; transition: all .25s ease; pointer-events: none; }
.Tanitim .TnBalon {
  position: fixed; width: min(320px, calc(100vw - 16px)); padding: 14px 16px; border-radius: 14px;
  background: var(--bg-1); border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); color: var(--text-1);
}
.Tanitim p { margin: 0 0 12px; font: 500 14.5px/1.45 var(--font-ui); }
.Tanitim .TnAlt { display: flex; align-items: center; gap: 8px; }
.Tanitim .TnSayi { margin-right: auto; font-size: 12px; color: var(--text-3); }
.Tanitim button { height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-1); font: 600 13px var(--font-ui); }
.Tanitim .TnIleri { background: #F2CF6B; border-color: #D6A531; color: #2A1D04; }

/* connection lost */
.BaglantiBandi {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 99999; pointer-events: none;
  width: max-content; max-width: calc(100vw - 24px);
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px;
  background: rgba(20, 24, 22, .92); border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  color: #F3ECDA; font: 600 14px var(--font-ui);
}
.BaglantiBandi .BaglantiDon { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(242, 207, 107, .35); border-top-color: #F2CF6B; animation: donus .8s linear infinite; }
@keyframes donus { to { transform: rotate(360deg); } }

/* ==========================================================================
   18. FLOATING PRIVATE CHAT (desktop)
   ========================================================================== */
.OzelBaslik, .OzAyir { display: none; }
#AnaTablar > .OzSekmeGizli { display: none !important; }
@media (hover: hover) and (min-width: 900px) {
  [data-ozel] .OzelSolAna { position: relative !important; }
  [data-ozel] .OzAyir {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 14px; z-index: 6;
    width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg-2); color: var(--text-2);
  }
  [data-ozel] .OzAyir:hover { color: var(--text-1); border-color: var(--gold-500); }
  #AnaTabicerik > .OzelYuzen {
    display: flex !important; flex-direction: column !important; position: fixed !important; float: none !important;
    min-width: 300px; min-height: 260px; max-width: 90vw; max-height: 90vh; resize: both; overflow: hidden !important;
    border-radius: 14px; border: 1px solid var(--border-strong); background: var(--bg-1); box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  }
  #AnaTabicerik > .OzelYuzen.OzKucuk { height: auto !important; min-height: 0; resize: none; }
  #AnaTabicerik > .OzelYuzen.OzKucuk .YaziAlaniOzel { display: none !important; }
  .OzelYuzen .OzelBaslik {
    display: flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 6px 0 14px; cursor: move; user-select: none;
    background: var(--bg-2); border-bottom: 1px solid var(--border-subtle); color: var(--text-1);
  }
  .OzelYuzen .OzelBaslik > i { color: var(--gold-400); }
  .OzelYuzen .OzBasAd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px var(--font-ui); }
  .OzelYuzen .OzelBaslik button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); }
  .OzelYuzen .OzelBaslik button:hover { background: var(--bg-3); color: var(--text-1); }
  .OzelYuzen.OzYeni .OzelBaslik { animation: ozYeni 1.4s ease-in-out infinite; }
  @keyframes ozYeni { 50% { background: rgba(242, 207, 107, .28); } }
  .OzelYuzen .YaziAlaniOzel { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
  .OzelYuzen .YaziAlaniOzel .OzelSagAna, .OzelYuzen .OzAyir { display: none !important; }
  .OzelYuzen #OzelYaziAlani { height: auto !important; }
  .OzelYuzen #YaziKutusuOzel #TemizleButonDiv { display: none !important; }
}


/* Phones sideways from 700 px wide: the rack actions sit beside the board again
   (as before the 18 Oct redesign), as icon tiles so the board keeps its width.
   Below 700 px the legacy .W700 rule moves them into the icon row instead. */
@media (orientation: landscape) and (max-height: 500px) {
  #PencereAna #masatable .masaislevdis { width: 1% !important; }
  #PencereAna #masatable .masaislevdis .btn { min-width: 0 !important; width: 52px !important; height: 52px !important; padding: 0 !important; margin: 0 4px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  #PencereAna #masatable .masaislevbuton { display: none !important; }
  #PencereAna #masatable .masaislevdis .IconMt { width: 38px !important; height: 38px !important; }
}

/* very narrow phones (320–360 px upright): slimmer side seats and toolbar */
@media (max-width: 360px) {
  .EkranDikey.WH500 #PencereAna .MasaNickOrtak.MasaNickDikey { width: 64px !important; min-width: 0 !important; }
  .EkranDikey.WH500 #PencereAna .MasaNickDikey #MasaNickDiv { font-size: 12px !important; }
  #PencereAna.MasaGorunur #MasaPanelSag .butonMasaSag:not(#MasaButonBaslat) { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }
  #AnaUstPanel .AnaUstPanelButonDis:has(#AnaToplamDiv) { display: none !important; }
  .EkranDikey.WH500 #PencereAna .Mtr2519 { top: 196px !important; left: 6px !important; } /* beside the top seat, above the side seats */
  .EkranDikey.WH500 #PencereAna .Mtr2519 label { font-size: 10px !important; }
}
/* the legacy 350 px page minimum made 320 px phones 30 px too wide (cut at the right) */
html, body, body.Mtr5896842 { min-width: 320px !important; }
@media (max-width: 360px) { .modal-content { min-width: 0 !important; max-width: calc(100vw - 16px) !important; } }

/* Admin panel as a tab */
#AnaTabicerik > .YonetimPencere { width: 100%; height: 100%; background: var(--bg-0); }
#AnaTabicerik > .YonetimPencere iframe { display: block; width: 100%; height: 100%; border: 0; }

/* before the first hand the rack is empty: no "turn the phone" hint over the buttons */
#PencereAna.MasaGorunur #MasaIcerikDiv:has(#OkeyIstakaYaziStr:not(.Gizli))::after { display: none; }

/* Avatar dialog: 3D portraits (women / men) in a denser scrolling grid */
.AvPanel[data-p="uc"] { max-height: min(52vh, 420px); overflow-y: auto; padding-right: 4px; }
.AvBaslik { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2, #8a8f98); margin: 10px 2px 6px; }
.AvBaslik:first-child { margin-top: 0; }
.AvPanel[data-p="uc"] .AvGrid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.AvPick.Av3D { background: radial-gradient(circle at 50% 35%, var(--bg-1, #fff) 0%, var(--bg-2, #eee) 70%); }

/* Masa Görsel → Süsler → Figür temaları (OyunFigurUygula sets --fig-a/b/c):
   a 3D centrepiece and four small figures between the seats; the corners stay
   for the Köşe görseli, the frame (::after) can be combined. */
/* takes the place of the theme emblem watermark (same ::before, 9.) */
html[data-figur]:not([data-figur="yok"]) #SalonMasalar .Mtr621::before {
  background:
    var(--fig-a) 50% 50% / 52px no-repeat,
    var(--fig-b) 28% 28% / 22px no-repeat, var(--fig-c) 72% 28% / 22px no-repeat,
    var(--fig-c) 28% 72% / 22px no-repeat, var(--fig-b) 72% 72% / 22px no-repeat !important;
  opacity: 1 !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
}
@media (max-width: 500px) {
  html[data-figur]:not([data-figur="yok"]) #SalonMasalar .Mtr621::before { background-size: 40px, 18px, 18px, 18px, 18px !important; }
}

/* ==========================================================================
   Seats round 5: the 3D figures (bots, and players with a 3D avatar;
   res/avatar/3d is framed alike: head and shoulders, bottom aligned) stand on their nameplate: no circle crop, a soft light behind,
   a shadow below, a step up and a gold glow on turn. Photos stay round.
   A bot shows its first name with a BOT badge ("Robot_" is kept in a hidden
   span, oyun.js koltukAdi); removing it is a small round button on the plate.
   ========================================================================== */
#PencereAna .MasaNickOrtak { --fig: 56px; overflow: visible !important; border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 45%), rgba(9, 13, 11, .8) !important; }
@media (min-width: 768px) and (min-height: 501px) { #PencereAna .MasaNickOrtak { --fig: 64px; } }
@media (orientation: landscape) and (max-height: 500px) { #PencereAna .MasaNickOrtak { --fig: 46px; } }
.EkranDikey.WH500 #PencereAna .MasaNickOrtak.MasaNickDikey { --fig: 52px; border-radius: 18px !important; }
.EkranDikey.WH500 #PencereAna #MasaNickUst { --fig: 52px; } /* same figure size on every seat */

#PencereAna .MasaNickOrtak #MasaResimDiv { position: relative !important; width: var(--fig) !important; height: var(--fig) !important; }
#PencereAna .MasaNickOrtak #MasaResimImg { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; }
.EkranDikey.WH500 #PencereAna .MasaNickDikey #MasaResimDiv { float: none !important; margin: 8px auto 0 !important; }

/* figures (3D portraits, the robot): whole, lit from behind, standing a little above the plate;
   drawn avatars are round badges and stay round like photos */
#PencereAna .MasaNickOrtak:has(#MasaResimImg:is([src*="/avatar/3d/"], [src*="robot.svg"])) #MasaResimDiv {
  overflow: visible !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
  background: radial-gradient(circle at 50% 64%, rgba(255, 244, 214, .4) 0, rgba(255, 244, 214, .1) 46%, rgba(255, 244, 214, 0) 70%) !important;
}
#PencereAna .MasaNickOrtak #MasaResimImg:is([src*="/avatar/3d/"], [src*="robot.svg"]) {
  border: 0 !important; border-radius: 0 !important; object-fit: contain !important;
  transform: translateY(-5%) scale(1.1); transform-origin: 50% 100%;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .45));
  /* soft edges: a board, a laptop or cut shoulders fade into the plate instead of ending square */
  -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 42%, #000 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 64% at 50% 42%, #000 68%, transparent 100%);
  transition: transform .25s ease, filter .25s ease;
}
#PencereAna .MasaNickOrtak.MasaRenkAktif #MasaResimImg:is([src*="/avatar/3d/"], [src*="robot.svg"]) {
  transform: translateY(-10%) scale(1.16);
  filter: drop-shadow(0 0 7px rgba(242, 207, 107, .9)) drop-shadow(0 5px 5px rgba(0, 0, 0, .4));
}
#PencereAna .MasaNickOrtak.MasaRenkAktif:has(#MasaResimImg:is([src*="/avatar/3d/"], [src*="robot.svg"])) #MasaResimDiv {
  background: radial-gradient(circle at 50% 64%, rgba(242, 207, 107, .55) 0, rgba(242, 207, 107, .14) 48%, rgba(242, 207, 107, 0) 72%) !important;
}
/* the top plate sits at the felt's edge sideways: grow upward less there */
@media (orientation: landscape) and (max-height: 500px) {
  #PencereAna #MasaNickUst #MasaResimImg:is([src*="/avatar/3d/"], [src*="robot.svg"]) { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { #PencereAna .MasaNickOrtak #MasaResimImg { transition: none; } }

/* a bot: first name, gold BOT badge at the figure's feet */
#PencereAna .MasaNickOrtak .BotOnEk { display: none; }
#PencereAna .MasaNickOrtak:has(.BotOnEk) #MasaResimDiv::after {
  content: "BOT"; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); z-index: 2; pointer-events: none;
  padding: 1px 6px; border-radius: 999px; background: linear-gradient(180deg, #F6D77A, #D3A13A); color: #2A1C02;
  font: 800 9px/1.35 var(--font-ui); letter-spacing: .08em; box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
@media (orientation: landscape) and (max-height: 500px) { #PencereAna .MasaNickOrtak:has(.BotOnEk) #MasaResimDiv::after { font-size: 8px; padding: 0 5px; } }

/* removing a bot: a small round button on the plate's corner (was a "Bot -" bar under the name) */
#PencereAna .MasaNickOrtak #MasaButonBotEksi:not(.Gizli) {
  position: absolute !important; top: -9px; right: -9px; z-index: 3;
  width: 26px !important; height: 26px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important;
  font-size: 0 !important; color: transparent !important; overflow: hidden !important;
  background: rgba(24, 16, 12, .92) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .45) !important;
}
#PencereAna .MasaNickOrtak #MasaButonBotEksi:not(.Gizli)::before { content: "✕"; display: block; font: 700 12px/26px var(--font-ui); color: #F3ECDA; text-align: center; }
#PencereAna .MasaNickOrtak #MasaButonBotEksi:not(.Gizli):hover { background: #B3261E !important; }
#PencereAna .MasaNickOrtak:has(#MasaButonBotEksi:not(.Gizli)) .MasaBotButonBg { margin: 0 !important; }

/* names: one line; a bot's first name reads bigger now that "Robot_" is gone */
#PencereAna .MasaNickOrtak:has(.BotOnEk) #MasaNickDiv { font-weight: 700 !important; }
.EkranDikey.WH500 #PencereAna .MasaNickDikey #MasaNickDiv { -webkit-line-clamp: 1; white-space: nowrap !important; display: block !important; text-overflow: ellipsis !important; padding: 4px 4px 6px !important; font-size: 13px !important; }
/* the right seat sits at the screen edge: its button goes on the corner towards the table */
#PencereAna #MasaNickSag #MasaButonBotEksi:not(.Gizli) { right: auto; left: -9px; }
/* plates lying flat (the opponents' seats, but the upright side ones): figure and name side by side, name centred */
:is(.EkranYatay, body:not(.WH500)) #PencereAna :is(#MasaNickUst, #MasaNickSol, #MasaNickSag):not(.Gizli), .EkranDikey #PencereAna #MasaNickUst:not(.Gizli) {
  display: flex !important; align-items: center !important; gap: 4px; padding-right: 14px !important;
}
:is(.EkranYatay, body:not(.WH500)) #PencereAna :is(#MasaNickUst, #MasaNickSol, #MasaNickSag) #MasaResimDiv, .EkranDikey #PencereAna #MasaNickUst #MasaResimDiv { flex: none !important; }
:is(.EkranYatay, body:not(.WH500)) #PencereAna :is(#MasaNickUst, #MasaNickSol, #MasaNickSag) .MasaNickClear1, .EkranDikey #PencereAna #MasaNickUst .MasaNickClear1 { display: none !important; }
:is(.EkranYatay, body:not(.WH500)) #PencereAna :is(#MasaNickUst, #MasaNickSol, #MasaNickSag) .MasaNickDivDis, .EkranDikey #PencereAna #MasaNickUst .MasaNickDivDis { flex: 1 1 auto; min-width: 0; float: none !important; }
/* before the game, upright: the rack is two flat rows now, so the start panel is one row:
   the start button and three round icon buttons (their text stays for screen readers) */
.EkranDikey.WH500 #PencereAna #OkeyIstakaYaziStr .OnPanel { flex-direction: row; gap: 8px; padding: 4px; }
.EkranDikey.WH500 #PencereAna #OkeyIstakaYaziStr .OnSira { flex-wrap: nowrap; gap: 6px; }
.EkranDikey.WH500 #PencereAna #OkeyIstakaYaziStr .OnSira .OnBtn { width: 40px; height: 40px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; }
.EkranDikey.WH500 #PencereAna #OkeyIstakaYaziStr .OnSira .OnBtn i { font-size: 17px; }
.EkranDikey.WH500 #PencereAna #OkeyIstakaYaziStr .OnBtn.birincil { height: 42px; padding: 0 18px; }
/* on turn: gold edge and glow on the plate (the glass rule, an :is() with an id, out-ranked the old one) */
#PencereAna #MasaIcerikDiv .MasaNickOrtak.MasaRenkAktif {
  border-color: rgba(242, 207, 107, .95) !important;
  box-shadow: 0 0 0 2px rgba(242, 207, 107, .32), 0 0 26px rgba(242, 207, 107, .45), 0 10px 28px rgba(0, 0, 0, .28) !important;
}

/* ==========================================================================
   Table effects (oyun.js window.Efekt): reactions over the figures, speech
   bubbles, confetti, flying treats, all in one fixed layer above everything
   (the hand-end dialog too); the figure answers with a short move.
   ========================================================================== */
#EfektKat { position: fixed; inset: 0; z-index: 2100; pointer-events: none; overflow: hidden; }
.EfektTepki { position: fixed; width: 58px; height: 58px; transform: translate(-50%, -100%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); animation: efektTepki 2.6s ease-out forwards; }
.EfektTepki > img, .EfektTepki > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.EfektTepki.sabit { animation: efektSabit 2.6s ease-out forwards; }
@keyframes efektTepki {
  0% { transform: translate(-50%, -55%) scale(.4); opacity: 0; }
  12% { transform: translate(-50%, -108%) scale(1.12); opacity: 1; }
  22% { transform: translate(-50%, -100%) scale(1); }
  78% { opacity: 1; }
  100% { transform: translate(-50%, -165%) scale(1); opacity: 0; }
}
@keyframes efektSabit { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
.EfektBalon {
  position: fixed; transform: translate(-50%, -100%); max-width: 200px; padding: 6px 12px; border-radius: 14px;
  background: #FFF8E7; color: #2A1D04; font: 700 13px/1.25 var(--font-ui); white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: efektBalon .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.EfektBalon::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; background: inherit; border-radius: 2px; transform: translateX(-50%) rotate(45deg); }
.EfektBalon.git { animation: efektBalonGit .35s ease-in forwards; }
@keyframes efektBalon { from { transform: translate(-50%, -75%) scale(.3); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
@keyframes efektBalonGit { to { transform: translate(-50%, -125%) scale(.9); opacity: 0; } }
.EfektKonfeti { position: fixed; width: 8px; height: 12px; border-radius: 2px; }
.EfektIkram { position: fixed; left: 0; top: 0; width: 44px; height: 44px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }

/* the figure answers: translate / rotate / scale add to its own transform */
#PencereAna .MasaNickOrtak[class*="Fig-"] #MasaResimImg { animation-timing-function: ease-in-out; }
#PencereAna .MasaNickOrtak.Fig-zipla #MasaResimImg { animation: figZipla .9s ease-in-out; }
#PencereAna .MasaNickOrtak.Fig-salla #MasaResimImg { animation: figSalla .8s ease-in-out; }
#PencereAna .MasaNickOrtak.Fig-gerin #MasaResimImg { animation: figGerin .7s ease-in-out; }
#PencereAna .MasaNickOrtak.Fig-egil #MasaResimImg { animation: figEgil 1.3s ease-in-out; }
#PencereAna .MasaNickOrtak.Fig-titre #MasaResimImg { animation: figTitre .6s linear; }
#PencereAna .MasaNickOrtak.Fig-parla #MasaResimImg { animation: figParla 1.2s ease-in-out; }
#PencereAna .MasaNickOrtak.Fig-nick #MasaResimImg { animation: figNick 1.1s ease-in-out; }
#PencereAna .MasaNickOrtak.Fig-jubel #MasaResimImg { animation: figJubel 2s ease-in-out; }
#PencereAna .MasaNickOrtak.Fig-seufz #MasaResimImg { animation: figSeufz 1.5s ease-in-out; }
@keyframes figZipla { 0%, 100% { translate: 0 0; } 30% { translate: 0 -22%; } 55% { translate: 0 0; } 75% { translate: 0 -9%; } }
@keyframes figSalla { 0%, 100% { rotate: 0deg; } 20% { rotate: -9deg; } 40% { rotate: 8deg; } 60% { rotate: -6deg; } 80% { rotate: 5deg; } }
@keyframes figGerin { 0%, 100% { scale: 1; } 35% { scale: 1.18; } }
@keyframes figEgil { 0%, 100% { translate: 0 0; rotate: 0deg; } 30%, 70% { translate: 0 7%; rotate: -7deg; } }
@keyframes figTitre { 0%, 100% { translate: 0 0; } 10%, 50%, 90% { translate: -4px 0; } 30%, 70% { translate: 4px 0; } }
@keyframes figParla { 0%, 100% { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .45)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 140, 40, .95)); } }
@keyframes figNick { 0%, 100% { rotate: 0deg; translate: 0 0; } 25%, 65% { rotate: 7deg; translate: 0 3%; } 45% { rotate: 0deg; translate: 0 0; } }
@keyframes figJubel { 0%, 100% { translate: 0 0; scale: 1; } 20% { translate: 0 -28%; scale: 1.12; } 40% { translate: 0 0; scale: 1; } 60% { translate: 0 -20%; scale: 1.08; } 80% { translate: 0 0; } }
@keyframes figSeufz { 0%, 100% { translate: 0 0; scale: 1; } 40%, 70% { translate: 0 5%; scale: .95; } }
@media (prefers-reduced-motion: reduce) {
  #PencereAna .MasaNickOrtak[class*="Fig-"] #MasaResimImg { animation: none !important; }
  .EfektTepki, .EfektBalon { animation: efektSabit 2.6s linear forwards; }
}
@media (max-width: 500px), (max-height: 500px) { .EfektTepki { width: 48px; height: 48px; } .EfektBalon { font-size: 12px; padding: 5px 10px; } }

/* Table treats: Kime? (everyone or one player) and categories above the tiles */
#IsmarlaNesneDiv :is(.IsmKime, .IsmKat) { flex: 0 0 100%; display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
#IsmarlaNesneDiv :is(.IsmKime, .IsmKat)::-webkit-scrollbar { display: none; }
#IsmarlaNesneDiv .IsmKime > span { flex: none; align-self: center; font: 700 12px var(--font-ui); color: var(--text-2); }
#IsmarlaNesneDiv :is(.IsmKime, .IsmKat) button {
  flex: none; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--border-strong);
  background: var(--bg-2); color: var(--text-1); font: 600 12px var(--font-ui); white-space: nowrap; cursor: pointer;
}
#IsmarlaNesneDiv :is(.IsmKime, .IsmKat) button.aktif { background: var(--gold-500, #D6A531); border-color: var(--gold-500, #D6A531); color: #2A1D04; }
#IsmarlaNesneDiv .IsmKat button.aktif { background: var(--felt-2, #1C6A4B); border-color: var(--felt-2, #1C6A4B); color: #fff; }
#IsmarlaNesneDiv .IsmarlaClassIc.IsmGizli { display: none !important; }
/* the 3D treats are transparent: no white square behind them */
:is(#IsmarlaNesneDiv, #modalIsmarlaNick) .IsmarlaClassIc img { background: transparent !important; }

/* Player card at a table: İkram et first, over the whole width */
.MiniProfil .MpAlt { flex-wrap: wrap; }
.MiniProfil .MpIkram { flex: 1 0 100%; background: var(--gold-400, #F2CF6B); color: var(--text-on-gold, #2A1D04); }
.MiniProfil .MpIkram:hover { background: var(--gold-300, #E8C14F); }

/* Table chat: the broom sits quietly in the chat corner; the input bar keeps emoji, picture, send */
#PencereAna #MasaYaziAlani { position: relative; }
#PencereAna #MasaYaziAlani > #TemizleButonDiv.SohbetTemizle {
  position: absolute !important; top: 6px; right: 12px; z-index: 3; width: 30px !important; height: 30px !important; min-width: 0 !important; margin: 0 !important;
  border-radius: 8px !important; background-color: var(--bg-3) !important; border: 1px solid var(--border-subtle) !important; opacity: .6; cursor: pointer;
}
#PencereAna #MasaYaziAlani > #TemizleButonDiv.SohbetTemizle:hover { opacity: 1; }

/* Header: the pills carry an icon; when they fold behind ⋯, Günlük stays in the bar */
#AnaUstPanelExt :is(.carkbuton, .topon, .turnuvabuton) { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
#AnaUstPanel .GunlukKisaDis { display: none !important; }
body.UstKompakt #AnaUstPanel .GunlukKisaDis { display: flex !important; }
body.UstKompakt #AnaUstPanelExt > div:has(> .carkbuton) { display: none !important; }
#AnaUstPanel .GunlukKisa {
  position: relative; width: 40px; height: 40px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 12px !important; background: var(--bg-2) !important; border: 1px solid var(--border-strong) !important; color: var(--text-1) !important; box-shadow: none !important;
}
#AnaUstPanel .GunlukKisa.hazir { border-color: var(--gold-400) !important; color: var(--gold-300) !important; }
/* the state as a small badge on the icon, like the bell */
#AnaUstPanel .GunlukKisa .DurumRozet { position: absolute; top: -7px; right: -9px; padding: 0 5px; font-size: 10px; line-height: 16px; }
.GunlukKisa .PillAd { display: none; }
/* folded radio box: touch targets are 40 px high, so the box grows with them */
#AnaUstPanelExt.AnaUstPanelExtPos > #RadioPlayer { height: auto !important; grid-template-rows: auto auto; row-gap: 2px; width: min(300px, calc(100vw - 48px)) !important; }

/* Radio box: İstek is part of it (play · title over volume · İstek) */
#PencereAna #RadioPlayer { grid-template-columns: 34px minmax(0, 1fr) auto; width: clamp(240px, 20vw, 300px) !important; }
#PencereAna #RadioPlayer #IstekYap {
  grid-column: 3; grid-row: 1 / 3; height: 32px !important; padding: 0 10px !important; margin: 0 !important; border-radius: var(--r-pill) !important;
  display: inline-flex !important; align-items: center; gap: 5px; font-size: 12.5px !important; white-space: nowrap;
}

/* Hesabım for a guest: sign-up first, then what a guest can already set */
.HesabimKayit { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 10px; padding: 12px 14px; border: 0; border-radius: 12px;
  background: var(--gold-400); color: var(--text-on-gold); text-align: left; font: inherit; cursor: pointer; }
.HesabimKayit:hover, .HesabimKayit:focus-visible { background: var(--gold-300); }
.HesabimKayit > i { font-size: 1.4rem; }
.HesabimKayit span { display: flex; flex-direction: column; }
.HesabimKayit small { font-size: .85rem; opacity: .8; }

/* Player list: the Arkadaşlar tab and the search hide rows again (the flex rule
   above outranked .Gizli and the friends filter), with a line when nothing is left */
#SalonNickler .SalonNickListeTekil.Gizli,
#SalonNickler.Myfrend > .SalonNickListeTekil:not(.mfrend) { display: none !important; }
#SalonNickler.Myfrend:not(:has(> .SalonNickListeTekil.mfrend:not(.Gizli)))::before,
#SalonNickler:not(.Myfrend):has(> .SalonNickListeTekil):not(:has(> .SalonNickListeTekil:not(.Gizli)))::before {
  display: block; margin: 10px 8px; padding: 18px 14px; border: 1px dashed var(--border-subtle); border-radius: 12px;
  color: var(--text-3); font: 500 13px/1.45 var(--font-ui); text-align: center;
}
#SalonNickler.Myfrend:not(:has(> .SalonNickListeTekil.mfrend:not(.Gizli)))::before { content: 'Çevrimiçi arkadaşın yok. Bir oyuncunun kartından “Arkadaş ekle” diyebilirsin.'; }
#SalonNickler:not(.Myfrend):has(> .SalonNickListeTekil):not(:has(> .SalonNickListeTekil:not(.Gizli)))::before { content: 'Bu isimde çevrimiçi oyuncu yok.'; }
/* the search row: field and clear button side by side, inside the sidebar */
#PencereAna #SalonFiltreAlani:not(.Gizli) { display: flex !important; flex-direction: row-reverse; align-items: center; gap: 6px; padding: 6px 8px !important; }
#PencereAna #SalonFiltreAlani .FGenXIc { flex: 1; min-width: 0; width: auto !important; }
#PencereAna #SalonFiltreSfrButonDiv { flex: none; float: none !important; width: 36px !important; height: 36px !important; margin: 0 !important; }
#PencereAna #SalonFiltreSfrButonDiv { display: grid !important; place-items: center; background-image: none !important; font-size: 0 !important; }
#PencereAna #SalonFiltreSfrButonDiv::before { content: "\f659"; font-family: "bootstrap-icons"; font-size: 15px; line-height: 1; }

/* Turnuva: a wider dialog, so the bracket runs left to right on a computer */
#extramodal .modal-dialog:has(iframe[src*="turnuva"]),
#extramodal .modal-dialog:has(iframe[src*="turnuva"]) .modal-content { max-width: min(860px, calc(100vw - 24px)) !important; width: 100% !important; }

/* Lobby chat on low windows (laptops with toolbars): a slimmer topic bar, and
   pictures always fit the chat (they were taller than the whole chat) */
@media (max-height: 760px) {
  #PencereAna #SalonOdaTopicDiv { height: 30px !important; font-size: 12px !important; }
}
#PencereAna #SalonYaziTahtasi :is(.upimage, img.upload) { max-height: min(220px, 26vh) !important; }
#extramodal .Gunluk .GunlukKayit { margin: 0; } /* the guest sign-up strip on top of Günlük */

/* ── Lobby: whole tables at any window height ──
   The table area holds N whole rows (N from its height, felt 130–300px) and scrolls row by row
   (oyun.src.js; not CSS scroll-snap: it re-snaps when a new table is put in front and the list jumped);
   the chat gives way first (down to 120px). Card = felt + 76px (padding, gap, chip row), grid gap
   and padding 12px; N rows fit when N·(felt+76) + (N−1)·12 + 24 ≤ height. */
@media (min-width: 768px) and (min-height: 501px) {
  #PencereAna #SalonMasaContainer { container-type: size; min-height: 230px !important; }
  #PencereAna #SalonMesajContainer { flex-shrink: 1 !important; min-height: 120px !important; }
  #SalonMasalar { --filz: clamp(130px, calc(100cqh - 100px), 300px); }
  #SalonMasalar .Mtr621 { height: var(--filz) !important; min-height: 0 !important; }
  #SalonMasalar .Mtr622 { flex-wrap: nowrap !important; overflow: hidden !important; }
  .LobiSohbetTutamak::after { opacity: .45; }
  html.LobiSohbetYok #PencereAna #SalonMesajContainer, html.LobiMasaYok #PencereAna #SalonMasaContainer { display: none !important; }
  html.LobiMasaYok #PencereAna #SalonMesajContainer { height: auto !important; max-height: none !important; flex: 1 1 auto !important; }
}
@container (min-height: 448px) { #SalonMasalar { --filz: clamp(130px, calc(50cqh - 94px), 300px); } }
@container (min-height: 666px) { #SalonMasalar { --filz: clamp(130px, calc(33.333cqh - 92px), 300px); } }
@container (min-height: 884px) { #SalonMasalar { --filz: clamp(130px, calc(25cqh - 91px), 300px); } }
/* low felt: the smaller seats of the phone layout */
@container (max-height: 300px) {
  #SalonMasalar .Mtr621 { padding: 6px 12px !important; }
  #SalonMasalar .SalonOynaOrtak:not(.Gizli) { width: 32px !important; min-width: 32px !important; height: 32px !important; line-height: 30px !important; }
  #SalonMasalar .SalonOynaOrtak:not(.Gizli)::before { font-size: 20px; line-height: 29px; }
  #SalonMasalar .Mtr62Nick:not(.Gizli) { height: 30px !important; }
}
/* short laptop screens: actions, search and chips in one row, so the tables start higher */
@media (min-width: 768px) and (min-height: 501px) and (max-height: 860px) {
  #SalonUstMenu > .FormAyarLbl { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 6px !important; }
  #SalonUstMenu > .FormAyarLbl > * { flex: 0 0 auto !important; float: none !important; margin: 0 !important; }
  #SalonUstMenu > .FormAyarLbl > .SalonMasaFiltreDiv { width: 170px !important; }
  #SalonUstMenu .FiltreCipler { flex: 1 1 0 !important; min-width: 0 !important; padding-top: 0 !important; overflow-x: auto !important; }
  #SalonUstMenu :is(#SalonYukariButonDiv, #SalonAsagiButonDiv) { order: 2; }
}

/* ── Table: reactions at the rack, treats in their own panel ── */
.TepkiAc { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; cursor: pointer;
  border-radius: 12px; background: var(--cam, rgba(16, 26, 22, .72)); border: 1px solid var(--cam-cizgi, rgba(255, 255, 255, .16));
  color: var(--altin, #F2CF6B); font-size: 22px; box-shadow: var(--cam-golge, none); }
.TepkiAc:hover, .TepkiAc:focus-visible { border-color: rgba(242, 207, 107, .65); }
.mobilislevbuton .TepkiAc { width: 44px; height: 44px; margin: 0 0 0 10px; float: left; }
.EkranDikey.WH500 #PencereAna .mobilislevbuton .TepkiAc { margin: 0; }
#PencereAna #masatable .masaislevdis .TepkiAcPc { float: right; width: 44px; height: 44px; margin: 0 -6px 0 0; }
.TepkiSerit { position: absolute; z-index: 30; left: 8px; right: 8px; display: flex; align-items: center; gap: 4px; padding: 6px;
  overflow-x: auto; scrollbar-width: none; border-radius: 16px; background: var(--bg-1); border: 1px solid var(--border-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.TepkiSerit::-webkit-scrollbar { display: none; }
.TepkiSerit button { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.TepkiSerit button:hover, .TepkiSerit button:focus-visible { background: var(--bg-3); }
.TepkiSerit button img { width: 34px; height: 34px; display: block; margin: auto; }
.TepkiSerit button:active img { transform: scale(.88); }
.TepkiSerit .TepkiYazi { width: auto; height: 34px; padding: 0 12px; border-radius: 17px; background: #FFF8E7; color: #2A1D04; border: 1px solid #E3C77A; font: 800 13px var(--font-ui); white-space: nowrap; }
.TepkiSerit .TepkiYazi:hover { background: #F2CF6B; }
.TepkiSerit .TepkiSessiz { width: auto; height: 34px; padding: 0 10px; border-radius: 17px; border: 1px solid var(--border-subtle); color: var(--text-2); font: 600 12px var(--font-ui); white-space: nowrap; }
.TepkiSerit .TepkiSessiz.aktif { background: var(--bg-3); color: var(--altin, #F2CF6B); border-color: rgba(242, 207, 107, .5); }
.IkramBas { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0 6px; font: 700 14px var(--font-ui); color: var(--text-1); }
.IkramKapat { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; }
.IkramKapat:hover { background: var(--bg-3); color: var(--text-1); }
#IsmarlaNesneDiv .IsmKime button { display: inline-flex; align-items: center; gap: 6px; padding-left: 4px; }
#IsmarlaNesneDiv .IsmKime button[data-kim="masa"] { padding-left: 12px; }
#IsmarlaNesneDiv .IsmKime button img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--bg-3); }
.IkramOnay { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: var(--bg-2); border: 1px solid rgba(242, 207, 107, .45); }
.IkramOnay img { width: 36px; height: 36px; flex: none; }
.IkramOnay .IoMetin { flex: 1; min-width: 0; font: 600 13px var(--font-ui); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.IkramOnay .IoPuan { flex: none; font: 700 12px var(--font-ui); color: var(--altin, #F2CF6B); }
.IkramOnay .IoGonder { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: var(--action, #2E9E6B); color: #fff; font: 700 14px var(--font-ui); cursor: pointer; }
.IkramOnay .IoVazgec { flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; }
/* phones: the treats come up from the bottom, the table stays in view above */
@media (max-width: 500px), (max-height: 500px) {
  .IkramPanel { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important;
    max-height: 62vh !important; z-index: 1060; border-radius: 18px 18px 0 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .IkramPanel::before { content: ''; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); }
  .IkramPanel #IsmarlaNesneDiv .IsmarlaClassIc { width: calc(25% - 6px) !important; }
}

/* ── End of a hand: one result card in the table chat; a thin line when a hand starts ── */
#MasaYaziTahtasi .ElKart { width: fit-content; max-width: 100%; box-sizing: border-box; margin: 8px 0; padding: 8px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(242, 207, 107, .16), rgba(242, 207, 107, .06)); border: 1px solid rgba(242, 207, 107, .4); font-family: var(--font-ui); }
#MasaYaziTahtasi .EkBas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--text-1); font-size: 14px; }
#MasaYaziTahtasi .EkBas .bi-trophy-fill { color: #E0A82E; font-size: 16px; }
#MasaYaziTahtasi .EkBas b { font-weight: 700; }
.EkTur { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--text-2); font: 600 12px var(--font-ui); }
#MasaYaziTahtasi .EkPuan { margin-left: auto; padding-left: 8px; color: #3FAE7A; font: 800 16px var(--font-ui); font-variant-numeric: tabular-nums; }
#MasaYaziTahtasi .EkAlt { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
#MasaYaziTahtasi .EkCip { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .18); color: var(--text-2); font: 500 12px var(--font-ui); }
#MasaYaziTahtasi .EkCip b { color: #E5484D; font-weight: 700; font-variant-numeric: tabular-nums; }
#MasaYaziTahtasi .EkCip small { font: 700 9px var(--font-ui); letter-spacing: .04em; color: var(--text-3); }
#MasaYaziTahtasi .EkCip.sen { color: var(--text-1); box-shadow: inset 0 0 0 1px rgba(242, 207, 107, .5); }
#MasaYaziTahtasi .ElAyrac { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; color: var(--text-3); font: 600 12px var(--font-ui); }
#MasaYaziTahtasi .ElAyrac::before, #MasaYaziTahtasi .ElAyrac::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); }
#modalOkeyAcilanEl #Mtr78.ElBas { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; font: 700 18px var(--font-ui); }
#modalOkeyAcilanEl #Mtr78.ElBas img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #E0A82E; }
@media (max-width: 500px), (max-height: 500px) {
  #modalOkeyAcilanEl #Mtr78.ElBas { font-size: 16px; }
  #modalOkeyAcilanEl #Mtr78.ElBas img { width: 36px; height: 36px; }
}

/* ── The bell: notification centre ── */
#AnaUstBildirimDlgAlt { width: min(340px, calc(100vw - 16px)) !important; height: auto !important; max-height: none !important; padding: 0 !important; overflow: hidden; z-index: 1070 !important; }
#AnaUstBildirimDlgAlt .BildirimMerkezi { display: flex; flex-direction: column; max-height: min(70vh, 520px); padding: 0 !important; }
#AnaUstBildirimDlgAlt .BdBaslik { padding: 12px 14px 6px; font: 700 15px var(--font-ui); color: var(--text-1); }
#AnaUstBildirimDlgAlt .BdPush { margin: 0 10px 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg-1); color: var(--text-2); font: 500 12px/1.4 var(--font-ui); }
#AnaUstBildirimDlgAlt .BdPush .bi-bell-fill { color: #3FAE7A; }
#AnaUstBildirimDlgAlt .BdPushAc { width: 100%; height: 36px; border: 0; border-radius: 18px; background: var(--action, #2E9E6B); color: #fff; font: 700 13px var(--font-ui); cursor: pointer; }
#AnaUstBildirimDlgAlt #AnaUstBildirimDlgBos { padding: 14px 16px 18px; color: var(--text-2); font: 500 13px/1.5 var(--font-ui); text-align: center; }
#AnaUstBildirimDlgAlt #AnaUstBildirimDlgDivDis:not(.Gizli) { display: flex; flex-direction: column; min-height: 0; }
#AnaUstBildirimDlgAlt #AnaUstBildirimDlgIcerik { overflow-y: auto; min-height: 0; }
#AnaUstBildirimDlgAlt .BdSatir { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: var(--text-1); text-align: left; cursor: pointer; }
#AnaUstBildirimDlgAlt .BdSatir:hover { background: var(--bg-3); }
#AnaUstBildirimDlgAlt .BdSatir.yeni { background: rgba(242, 207, 107, .08); }
#AnaUstBildirimDlgAlt .BdSatir .bi { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-1); color: var(--altin, #F2CF6B); font-size: 15px; }
#AnaUstBildirimDlgAlt .BdMetin { flex: 1; min-width: 0; font: 500 13px/1.4 var(--font-ui); }
#AnaUstBildirimDlgAlt .BdSatir time { flex: none; color: var(--text-3); font: 500 11px var(--font-ui); }
#AnaUstBildirimDlgAlt #AnaUstBildirimDlgDivTmzl { flex: none; padding: 10px; border-top: 1px solid var(--border-subtle); text-align: center; color: var(--text-2); font: 600 12px var(--font-ui); cursor: pointer; background: transparent !important; }
#AnaUstBildirimDlgAlt #AnaUstBildirimDlgDivTmzl:hover { color: var(--text-1); }
.GunlukPushDurum { color: var(--text-2); font: 500 12px var(--font-ui); }
@media (orientation: landscape) and (max-height: 500px) {
  .IkramPanel #IsmarlaNesneDiv:not(.Gizli) { overflow-y: auto !important; }
  .IkramPanel #IsmarlaNesneDiv .IsmarlaClassIc { flex: none !important; width: 64px !important; height: 64px !important; max-width: none !important; max-height: none !important; padding: 6px !important; }
  .IkramPanel #IsmarlaNesneDiv .IsmarlaClassIc img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
}
/* on turn: a stronger gold edge, phones too (the 1px edge and soft glow got lost on a small seat) */
#PencereAna #MasaIcerikDiv .MasaNickOrtak.MasaRenkAktif {
  border: 2px solid #F2CF6B !important;
  box-shadow: 0 0 0 3px rgba(242, 207, 107, .45), 0 0 28px 4px rgba(242, 207, 107, .55), 0 10px 28px rgba(0, 0, 0, .28) !important;
}

/* ── Staff in the player list, at the table and on air ── */
/* the old hover rule (colors.css) put a white glow and italics on the whole card: name and points looked smeared */
#SalonNickler .SalonNickListeAnaSec:hover, #MasaNickler .SalonNickListeAnaSec:hover { text-shadow: none !important; font-style: normal !important; }
.RolIkon { width: 22px; height: 22px; flex: none; vertical-align: middle; fill: var(--rol-renk, #F2CF6B); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.rolik-kurucu { --rol-renk: #E8B64C; } .rolik-admin { --rol-renk: #E5484D; } .rolik-masa { --rol-renk: #19A37F; }
.rolik-turnuva { --rol-renk: #F08A24; } .rolik-dj { --rol-renk: #9B6CFF; }
/* my own card: a quiet gold frame (staff keep their coloured stripe inside) */
#SalonNickler .SalonNickListeTekil.SalonNickListeBize { border-left-width: 1px !important; border-color: rgba(242, 207, 107, .6) !important; }
/* the DJ on air: their DJ badge turns red "Yayında" (no extra width) */
#SalonNickler .SalonNickListeTekil.DjYayinda .rozet-dj { background: linear-gradient(180deg, #E5484D, #A3161B) !important; animation: yayindaNabiz 1.6s ease-in-out infinite; }
#SalonNickler .SalonNickListeTekil.DjYayinda .rozet-dj b { font-size: 0 !important; }
#SalonNickler .SalonNickListeTekil.DjYayinda .rozet-dj b::after { content: "Yayında"; font-size: 11px; }
@keyframes yayindaNabiz { 50% { opacity: .65; } }
/* seat plate: the role's symbol at the figure's feet, where a bot has its BOT badge */
#PencereAna .MasaNickOrtak #MasaResimDiv > .KoltukRol { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); z-index: 3; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--rol-renk, #E5484D); box-shadow: 0 0 0 2px var(--bg-1, #101A16), 0 2px 6px rgba(0, 0, 0, .4); pointer-events: auto; }
#PencereAna .MasaNickOrtak #MasaResimDiv > .KoltukRol svg { width: 12px; height: 12px; fill: #fff; }
@media (prefers-reduced-motion: reduce) { #SalonNickler .SalonNickListeTekil.DjYayinda .rozet-dj { animation: none; } }
/* avatar ring in the player lists: neutral (it was green for everyone and said nothing: everyone listed is online,
   busy / away have their own dot); staff wear their role's colour, the founder keeps the gold glow */
:is(#SalonNickler, #MasaNickler) .SalonNickListeAvatar { border: 2px solid var(--border-strong) !important; }
:is(#SalonNickler, #MasaNickler) #SalonNickListeImg { border: 0 !important; box-shadow: none !important; }
:is(#SalonNickler, #MasaNickler) .RolSatir .SalonNickListeAvatar { border-color: var(--rol-renk) !important; }
/* light background: the founder's crown and badge text in a deeper gold, the pale one vanished on cream */
[data-zemin="krem"] .rolik-kurucu { --rol-renk: #B9821F; }

/* Masa Görsel: a felt with an emblem (club crest, city, motif) keeps it in the middle when a figure theme is on;
   the theme's four small figures go around it (they used to replace the crest and leave only its colour) */
html[data-amblem][data-figur]:not([data-figur="yok"]) #SalonMasalar .Mtr621::before {
  background:
    var(--felt-mark) 50% 50% / auto 46% no-repeat,
    var(--fig-b) 22% 26% / 22px no-repeat, var(--fig-c) 78% 26% / 22px no-repeat,
    var(--fig-c) 22% 74% / 22px no-repeat, var(--fig-b) 78% 74% / 22px no-repeat !important;
}
@media (max-width: 500px) {
  html[data-amblem][data-figur]:not([data-figur="yok"]) #SalonMasalar .Mtr621::before { background-size: auto 46%, 18px, 18px, 18px, 18px !important; }
}

/* Phone held sideways, lobby chat: as many lines in view as on desktop (it showed three) */
@media (orientation: landscape) and (max-height: 500px) {
  html[data-ms="sohbet"] #PencereAna #SalonOdaTopicDiv { display: none !important; }
  #PencereAna #SalonYaziAlani { padding: 2px 6px !important; }
  #PencereAna #SalonYaziTahtasi { padding: 4px 6px !important; }
  #PencereAna #SalonYaziTahtasi .Yazilar { font-size: 13.5px !important; line-height: 1.35 !important; margin-bottom: 2px !important; }
  #PencereAna #SalonYaziTahtasi .Yazilar :is(.YazilarNck, [class*="NickRenk"]) { font-size: 14px !important; line-height: 1.35 !important; }
  #PencereAna #SalonYaziTahtasi :is(.SistemSatir, .RenkSistemMesaji, .RenkGenelMesaj, .RenkYayinciBilgi, .RenkIstekBilgi) { margin: 3px 0 !important; padding: 3px 10px 3px 8px !important; font-size: 12.5px !important; }
  #PencereAna #SalonYaziTahtasi .RolChat { height: 15px; font-size: 9.5px; }
  #PencereAna #YaziKutusuSalon { padding-top: 4px !important; padding-bottom: 4px !important; height: 44px !important; min-height: 44px !important; }
  #PencereAna #YaziKutusuSalon :is(.butonIcon, #SalonYaziInp) { height: 36px !important; min-height: 36px !important; }
  .MobilSekme { height: calc(36px + env(safe-area-inset-bottom)); }
  #SalonSolAna, #SalonSagAna { padding-bottom: calc(36px + env(safe-area-inset-bottom)) !important; } /* was 58px under a 42px bar */
}

/* Günlük on a phone: the whole window in view (it ran past the screen) */
@media (max-width: 500px) {
  #extramodal .Gunluk { gap: 10px; }
  #extramodal .GlYeni { padding: 6px 10px; }
  #extramodal .GlYeni .para { width: 28px; height: 28px; font-size: 16px; }
  #extramodal .Gunluk .GunlukKayit { padding: 7px 12px; gap: 10px; }
  #extramodal .Gunluk .GunlukKayit b { font-size: 13px; }
  #extramodal .Gunluk .GunlukKayit small { font-size: 11.5px; line-height: 1.25; }
  #extramodal .GlBaslik { margin-bottom: 4px; }
  #extramodal .GlSeri { gap: 4px; }
  #extramodal .GlSeri .tas { max-width: 36px; font-size: 17px; }
  #extramodal .GlSeri small { font-size: 10px; }
  #extramodal .GlNot { margin-top: 6px !important; font-size: 11px; }
  #extramodal .GlGorev { gap: 4px; }
  #extramodal .GlGorev li { padding: 5px 10px !important; gap: 10px; }
  #extramodal .GlGorev .pip { flex-basis: 36px; height: 24px; }
  #extramodal .Gunluk section.GlTaht { padding: 6px 10px; gap: 8px; }
  #extramodal .GlTaht .taht-ik { font-size: 22px; }
  #extramodal .GlTaht .taht-kural { font-size: 10px; line-height: 1.3; }
}

/* Phone held sideways, lobby tables: whole tables in view, like on desktop. The felt takes the height that is left
   (one row on small phones, two on taller ones), the card's chips sit inside the felt, rows snap (oyun.src.js). */
@media (orientation: landscape) and (max-height: 500px) {
  #PencereAna #SalonUstMenu { padding-top: 4px !important; padding-bottom: 4px !important; }
  #PencereAna #SalonUstMenu :is(.butonMasaFiltreOrtak, .FiltreCip, #SalonMasaFiltreInp) { height: 32px !important; min-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  #PencereAna #SalonMasaContainer { container-type: size; }
  #SalonMasalar { --filz: max(84px, calc(100cqh - 18px)); padding: 4px 6px !important; gap: 6px !important;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--filz) * 2.3), 1fr)) !important; }
  #SalonMasalar .Mtr62Tekil { position: relative !important; padding: 4px !important; }
  #SalonMasalar .Mtr62Tekil #Mtr62mcs { gap: 0 !important; }
  #SalonMasalar .Mtr621 { height: var(--filz) !important; padding: 2px 10px !important; margin: 0 !important; }
  #SalonMasalar .Mtr622 { position: absolute !important; left: 10px; bottom: 8px; z-index: 3; margin: 0 !important; transform: scale(.8); transform-origin: left bottom; pointer-events: none; }
  @container (min-height: 230px) { #SalonMasalar { --filz: calc(50cqh - 17px); } }
  /* a short felt: the watch button as an eye in the corner, only the points chip (the seats show who sits) */
  #SalonMasalar #Mtr62IzleButon { right: 6px !important; bottom: 6px !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 !important; justify-content: center !important; }
  #SalonMasalar #Mtr62IzleButon::after { content: none; }
  #SalonMasalar #Mtr62IzleButon > div { width: 18px !important; height: 18px !important; flex-basis: 18px !important; }
  #SalonMasalar .Mtr622 .Mtr62BilgiDiv > :not(#Mtr62BilgiPuan) { display: none !important; }
}
/* phones upright up to 430 px: slimmer side seats too (at 393 px the right one stuck out by 19 px) */
@media (max-width: 430px) {
  .EkranDikey.WH500 #PencereAna .MasaNickOrtak.MasaNickDikey { width: 64px !important; max-width: 64px !important; min-width: 0 !important; }
  .EkranDikey.WH500 #PencereAna .MasaNickDikey #MasaNickDiv { max-width: 62px !important; }
}

/* Reactions: a compact grid (8 a row) right above the rack at the button, not a row across the whole table */
.TepkiSerit.Gizli { display: none !important; } /* the grid rule below must not undo closing it */
.TepkiSerit { right: auto !important; width: max-content; max-width: calc(100% - 16px); display: grid !important;
  grid-template-columns: repeat(8, minmax(28px, 36px)); gap: 2px; padding: 6px; overflow: visible; border-radius: 14px; }
.TepkiSerit button { width: 100%; height: 36px; border-radius: 9px; }
.TepkiSerit button img { width: 28px; height: 28px; }
.TepkiSerit .TepkiYazi { grid-column: span 2; height: 30px; align-self: center; padding: 0 4px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.TepkiSerit .TepkiSessiz { height: 30px; align-self: center; padding: 0; font-size: 14px; }
/* İkram: smaller tiles, more in view */
.IkramPanel { width: min(336px, calc(100% - 16px)); }
.IkramPanel #IsmarlaNesneDiv .IsmarlaClassIc { width: 48px !important; height: 48px !important; padding: 5px !important; border-radius: 9px !important; }
.IkramPanel #IsmarlaNesneDiv:not(.Gizli) { gap: 4px !important; }
@media (max-width: 500px) {
  .IkramPanel #IsmarlaNesneDiv .IsmarlaClassIc { width: calc(16.66% - 4px) !important; height: auto !important; aspect-ratio: 1 / 1; }
  .IkramPanel { max-height: 55vh !important; max-height: 55svh !important; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .IkramPanel #IsmarlaNesneDiv .IsmarlaClassIc { width: 48px !important; height: 48px !important; }
}
/* phone rack buttons: the reaction button as tall as its neighbours */
.mobilislevbuton .TepkiAc { width: auto; min-width: 40px; height: auto; align-self: stretch; padding: 0 8px; font-size: 20px; }
/* İkram held sideways: a panel down the right side over the full height (as a bottom sheet only one row showed) */
@media (orientation: landscape) and (max-height: 500px) {
  .IkramPanel { top: 0 !important; bottom: 0 !important; left: auto !important; right: 0 !important; width: min(360px, 48vw) !important;
    max-height: none !important; border-radius: 16px 0 0 16px !important; padding: 6px 8px !important; }
  .IkramPanel::before { display: none; }
}