/* ==========================================================================
   table-redesign.css — Mockup birebir uyarlaması (v7)
   index.html inline <style> SONRASI yüklenir. DOM/oyun mantığı değişmez.
   ========================================================================== */

#game {
  --rd-felt-core: #1f9a8a;
  --rd-felt-mid: #178076;
  --rd-felt-edge: #0d5a52;
  --rd-bezel: #121820;
  --rd-bezel-gold: rgba(212, 175, 55, 0.85);
  --rd-gold: #e6c169;
  --rd-gold-soft: rgba(230, 193, 105, 0.45);
  --rd-cyan: #4ec8f0;
  --rd-side: clamp(88px, 11vw, 112px);
  --tile-w: clamp(34px, 3.8vw, 52px);
  --tile-h: clamp(60px, 6.6vw, 94px);
}

/* ======================== 1) TAM SAYFA KABUK ======================== */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #05080e !important;
}

#game-wrapper {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100dvw !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

#game {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 8px 6px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  background:
    radial-gradient(ellipse 100% 80% at 50% 10%, #152033 0%, transparent 55%),
    linear-gradient(180deg, #0a1018 0%, #05080e 100%) !important;
}

#game::before { display: none !important; }

#game > #middle {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#game > #rack-row {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  z-index: 40 !important;
  margin-left: 4px !important;
  margin-right: 4px !important;
}

/* ======================== 2) ÜST ŞERİT — sol: kompakt marka + masa + kalan ======================== */

#game > #tb-rules {
  top: 12px !important;
  left: 14px !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  max-width: none !important;
  width: auto !important;
  z-index: 55 !important;
}

/* Tek marka rozeti — ayrı “OKEY” yazısı boşluğa sıkışmasın */
#game > #tb-rules::before {
  content: "101";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f2d179, #c99a35);
  color: #17120a;
  font-family: 'Outfit', 'Cinzel', sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  flex: 0 0 auto;
}

#game > #tb-rules::after {
  content: none !important;
  display: none !important;
}

#tb-rules .tb-rules-toggle {
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  flex: 0 0 auto !important;
}

#tb-rules > .tb-chip.tb-rem {
  height: 26px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
}

/* El / kural chip’leri Masa menüsünde — üst şeridi şişirmesin */
#tb-rules > .tb-chip.tb-round,
#tb-rules > .tb-chip.tb-must,
#tb-rules > .tb-chip.tb-elden,
#tb-rules > .tb-chip.tb-fold {
  display: none !important;
}

/* Sağ üst menü — atılan taşların üstünde kalmalı */
#game > .tb-menu-end,
#tb-game-menu {
  top: 12px !important;
  right: 12px !important;
  z-index: 120 !important;
}

#tb-game-menu .an-menu-panel {
  z-index: 125 !important;
}

#tb-game-menu .an-menu-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--rd-gold-soft) !important;
  background: rgba(12, 20, 32, 0.92) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* ======================== 3) SIRA — hamburger menünün solunda ======================== */

#rack-play-me {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#rack-play-me > .rack-arrange {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* Oynayan kişi — hamburgerin solu; soldaki 101/Masa ile aynı 28px yükseklik */
#game > #turn-row,
#turn-row {
  position: absolute !important;
  top: 2px !important;
  left: auto !important;
  right: 58px !important;
  bottom: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  z-index: 115 !important;
  max-width: min(440px, 68vw) !important;
  width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  order: 0 !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 28px !important;
  overflow: visible !important;
}

#tb-rules #tb-keystone,
#turn-row #tb-keystone {
  pointer-events: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

#game > #turn-row #turn-banner,
#turn-row #turn-banner {
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 4px 0 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(14, 28, 44, 0.96), rgba(6, 14, 24, 0.98)) !important;
  border: 1.5px solid var(--rd-gold) !important;
  box-shadow:
    0 0 14px rgba(78, 200, 240, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#game > #turn-row #turn-banner .tb-tag,
#game > #turn-row #turn-banner .tb-dot,
#game > #turn-row #turn-banner .tb-bar,
#turn-row #turn-banner .tb-tag,
#turn-row #turn-banner .tb-dot,
#turn-row #turn-banner .tb-bar {
  display: none !important;
}

#game > #turn-row #turn-banner .tb-name,
#turn-row #turn-banner .tb-name {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--rd-cyan) !important;
  text-shadow: 0 0 12px rgba(78, 200, 240, 0.45) !important;
  white-space: nowrap !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
}

#game > #turn-row #turn-banner.mine .tb-name,
#turn-row #turn-banner.mine .tb-name {
  color: var(--rd-cyan) !important;
}

#game > #turn-row #turn-banner .tb-timer,
#turn-row #turn-banner .tb-timer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #f2d179, #c99a35) !important;
  border: 0 !important;
  color: #16110a !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35) !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

#game > #turn-row #turn-banner .tb-timer.urgent,
#turn-row #turn-banner .tb-timer.urgent {
  background: linear-gradient(180deg, #ff8a6b, #d84a2a) !important;
  color: #fff !important;
}

/* ======================== 4) GÖSTERGE / OKEY — sol chip’lerle aynı 28px ======================== */

#game > #topbar {
  display: none !important;
}

#tb-rules #tb-keystone #rack-indicators,
#turn-row #tb-keystone #rack-indicators {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 2px 11px 2px 9px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(22, 38, 58, 0.98), rgba(8, 16, 28, 0.98)) !important;
  border: 1.5px solid rgba(239, 201, 92, 0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.42) !important;
  box-sizing: border-box !important;
}

#tb-rules #tb-keystone .ind-arrow,
#turn-row #tb-keystone .ind-arrow {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 236, 180, 0.5) !important;
  line-height: 1 !important;
}
#tb-rules #tb-keystone .ind-pair-okey .indicator-box,
#turn-row #tb-keystone .ind-pair-okey .indicator-box {
  border: 1.5px solid rgba(255, 208, 66, 0.9) !important;
  box-shadow:
    0 0 9px rgba(255, 196, 40, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.32) !important;
}

#tb-rules #tb-keystone .ind-cap,
#turn-row #tb-keystone .ind-cap {
  display: block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 232, 176, 0.82) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#tb-rules #tb-keystone .ind-pair,
#turn-row #tb-keystone .ind-pair {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#tb-rules #tb-keystone .indicator-box,
#turn-row #tb-keystone .indicator-box {
  width: 22px !important;
  height: 26px !important;
  min-width: 22px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  font-family: 'Outfit', sans-serif !important;
  line-height: 1 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 0 rgba(70, 50, 30, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

#tb-rules #tb-keystone .deck-badge,
#tb-rules #tb-keystone .ind-pair-deck,
#turn-row #tb-keystone .deck-badge,
#turn-row #tb-keystone .ind-pair-deck,
#topbar #tb-keystone .ind-pair-deck {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ======================== 5) ORTA — ÇUHA + 4 PER ======================== */

#game > #middle {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--rd-side) minmax(0, 1fr) var(--rd-side) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "oleft center rail" !important;
  gap: 0 !important;
  /* Üst padding: üst profil orta çerçevenin üst kenarına otursun */
  padding: 34px 0 8px 0 !important;
  margin: 0 2px !important;
  align-items: stretch !important;
}

#middle > #opp-top,
#middle > .opp-slot-top {
  position: absolute !important;
  top: 34px !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  z-index: 20 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: auto !important;
}

/* Sol sütun: profil yan boşluğa sığar, orta çerçeveye yaslanır */
#table-rail-left {
  grid-area: oleft !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  gap: 0 !important;
  position: relative !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 2px !important;
  z-index: 15 !important;
  overflow: visible !important;
}

#table-rail-left #opp-left,
#table-rail-left .opp-slot-left {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 9 !important;
  order: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: 0 2px !important;
}

#table-rail-left .discard-panel {
  position: absolute !important;
  top: calc(50% + clamp(76px, 10.5vh, 96px)) !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  align-self: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  z-index: 12 !important;
  order: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: auto !important;
}

/* Sağ sütun: profil yan boşluğa sığar (sol ile simetrik) */
#table-rail {
  grid-area: rail !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  gap: 0 !important;
  position: relative !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 2px !important;
  z-index: 15 !important;
  overflow: visible !important;
}

#table-rail #opp-right,
#table-rail .opp-slot-right {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  max-width: 100% !important;
  z-index: 9 !important;
  order: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding: 0 2px !important;
}

/* Atılan taş — rakip kartının altında; tek çerçeve (boş slot veya taş) */
#table-rail .discard-panel {
  position: absolute !important;
  top: calc(50% + clamp(76px, 10.5vh, 96px)) !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  align-self: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  z-index: 12 !important;
  order: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: auto !important;
}

#game #center-board {
  position: relative !important;
  grid-area: center !important;
  border-radius: 26px !important;
  padding: 14px !important;
  margin: 0 !important;
  background-color: #0d5a52 !important;
  background-image:
    linear-gradient(180deg, rgba(5, 20, 28, 0.12) 0%, transparent 28%, transparent 72%, rgba(5, 20, 28, 0.18) 100%),
    url('/assets/felt-center.png') !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  border: 14px solid var(--rd-bezel) !important;
  box-shadow:
    0 0 0 2px var(--rd-bezel-gold),
    0 0 0 5px #0a0e14,
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 12px 40px rgba(0, 0, 0, 0.22),
    0 22px 48px rgba(0, 0, 0, 0.55) !important;
  justify-content: stretch !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#game #center-board .center-stage {
  min-height: 0 !important;
  height: 100% !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#game #center-board .center-panel.opened-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#game #center-board .opened-panel .panel-head {
  display: none !important;
}

#game #center-board .opened-panel #opened-sets-area,
#game #opened-sets-area {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  align-content: stretch !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 6px 4px 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#game #opened-sets-area .opened-owner-lane {
  position: relative !important;
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  align-content: flex-end !important;
  justify-content: flex-start !important;
  gap: 4px 6px !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 30px 6px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  box-sizing: border-box !important;
}

#game #opened-sets-area .opened-owner-lane.mine {
  border-color: rgba(255, 215, 0, 0.35) !important;
  background: rgba(255, 215, 0, 0.06) !important;
}

#game #opened-sets-area .opened-owner-head {
  position: absolute !important;
  top: 2px !important;
  left: 8px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 22px !important;
  max-width: calc(100% - 20px) !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(18, 30, 44, 0.99), rgba(8, 15, 25, 0.99)) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: #f0e6d2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  pointer-events: none !important;
}

#game #opened-sets-area .set-group {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: max-content !important;
  flex: 0 0 auto !important;
}

#game #opened-sets-area .set-group .set-owner {
  display: none !important;
}

#game #opened-sets-area .set-tiles {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;
}

#game #opened-sets-area .set-group .mini-tile {
  width: 26px !important;
  height: 34px !important;
  border-radius: 4px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0ebe0 100%) !important;
  border: 1px solid rgba(120, 100, 70, 0.4) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.26) !important;
  box-sizing: border-box !important;
}

#game #opened-sets-area .set-group.attach-target,
#game #opened-sets-area .set-group.dnd-attach-ok {
  outline: 2px solid var(--rd-cyan) !important;
  outline-offset: 3px !important;
  border-radius: 7px !important;
}

/* ======================== 6) OYUNCU KARTLARI ======================== */

#game .opp-card,
#game #opp-left .opp-card,
#game #opp-right .opp-card,
#game #opp-top .opp-card {
  position: relative !important;
  overflow: visible !important;
  max-width: 100% !important;
  width: 104px !important;
  gap: 6px !important;
  padding: 12px 8px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(18, 30, 46, 0.98), rgba(8, 14, 24, 0.98)) !important;
  border: 2px solid var(--rd-gold-soft) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55) !important;
  box-sizing: border-box !important;
}

/* Sol / sağ: yan boşluğa sığacak kompakt kart */
#game #opp-left .opp-card,
#game #opp-right .opp-card {
  width: 100% !important;
  max-width: 118px !important;
  min-width: 0 !important;
}

#game #opp-left,
#game #opp-right,
#game #opp-top,
#game .opponent-area {
  overflow: visible !important;
}

#game .opp-seat-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  overflow: visible !important;
}

/* Üst rakip: profil → emoji → atılan taş (sol/sağ ile aynı dikey sıra). */
#game #opp-top .opp-seat-wrap {
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Sol / sağ rakip blokları ortalı. */
#game #opp-left .opp-seat-wrap,
#game #opp-right .opp-seat-wrap {
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}

#game #opp-left .opp-profile-stack,
#game #opp-right .opp-profile-stack,
#game .opp-profile-col {
  overflow: visible !important;
}

#game .opp-seat-layout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
#game .opp-seat-layout-top {
  flex-direction: column !important;
  gap: 6px !important;
}
#game .opp-seat-layout-left,
#game .opp-seat-layout-right {
  flex-direction: column !important;
  gap: 8px !important;
}
/* Sol/sağ: üst slot + kart + emoji + alt slot — DOM sırası (app.js) */
#game .opp-seat-layout-left,
#game .opp-seat-layout-right {
  gap: 8px !important;
}
#game .opp-seat-layout-left .seat-discard-mount,
#game .opp-seat-layout-right .seat-discard-mount {
  order: 0 !important;
}
#game .opp-seat-layout-left .opp-profile-col,
#game .opp-seat-layout-right .opp-profile-col {
  gap: 3px !important;
}
#game .opp-seat-layout-left .opp-profile-col > .opp-emote-btn,
#game .opp-seat-layout-right .opp-profile-col > .opp-emote-btn {
  min-width: 26px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
}
#game .opp-seat-layout-left .opp-profile-col > .opp-emote-btn .opp-emote-ico,
#game .opp-seat-layout-right .opp-profile-col > .opp-emote-btn .opp-emote-ico {
  font-size: 12px !important;
}
#game .seat-discard-mount {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  z-index: 12 !important;
}

#game .seat-discard-mount > .seat-discard,
#game #opp-left .opp-profile-stack > .seat-discard,
#game #opp-right .opp-profile-stack > .seat-discard,
#game #opp-top .opp-profile-stack > .seat-discard {
  display: flex !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}

#game .opp-profile-stack > .seat-discard.is-empty-slot {
  opacity: 0.88 !important;
}

#game #self-discard-front {
  display: none !important;
}
#game #self-discard-front > .seat-discard.can-pick {
  pointer-events: none !important;
}

/* Senin attığın taş artık sağ sütun alt slotunda — İşle üstü dock kapalı */
#rack-side-actions #side-discard-dock,
#rack-side-actions #side-discard-dock.is-empty,
#rack-side-actions #side-discard-dock.has-tile {
  display: none !important;
  visibility: hidden !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  min-height: 92px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 auto 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  order: -1 !important;
}
#rack-side-actions #side-discard-dock[hidden] {
  display: none !important;
}
#rack-side-actions #side-discard-dock .side-discard-cap,
#rack-side-actions #side-discard-dock .side-discard-empty {
  display: none !important;
}
#rack-side-actions #side-discard-dock > .seat-discard {
  display: flex !important;
  width: 96px !important;
  min-width: 96px !important;
  height: 92px !important;
  min-height: 92px !important;
  padding: 8px !important;
  border: 1px solid rgba(239, 201, 92, .44) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(52, 81, 107, .36), transparent 60%),
    linear-gradient(160deg, rgba(13, 27, 43, .97), rgba(5, 13, 24, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 7px 16px rgba(0, 0, 0, .42) !important;
  align-items: center !important;
  justify-content: center !important;
}
#rack-side-actions #side-discard-dock > .seat-discard .mini-tile.seat-disc-tile {
  width: 56px !important;
  min-width: 56px !important;
  height: 76px !important;
  font-size: 26px !important;
  flex: 0 0 56px !important;
}

#game .opp-seat-discard,
#game #seat-discard-layer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#game .opp-profile-stack > .seat-discard {
  display: flex !important;
  visibility: visible !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 102px !important;
  min-height: 102px !important;
}
#game .opp-profile-stack > .seat-discard .mini-tile.seat-disc-tile {
  width: 62px !important;
  min-width: 62px !important;
  height: 84px !important;
  font-size: 30px !important;
  flex: 0 0 62px !important;
}
#game .opp-profile-stack > .seat-discard .mini-tile.discard-top {
  width: 64px !important;
  min-width: 64px !important;
  height: 86px !important;
  flex-basis: 64px !important;
}
#game .opp-profile-stack > .seat-discard.is-empty {
  border: 1px dashed rgba(201, 162, 39, 0.38) !important;
  background: rgba(12, 18, 28, 0.48) !important;
}

#game .opp-card .opp-emote-btn {
  display: none !important;
}

#game .opp-profile-stack > .opp-emote-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 8 !important;
  width: auto !important;
  min-width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: linear-gradient(165deg, rgba(18, 30, 48, 0.98), rgba(8, 14, 24, 0.98)) !important;
  border: 1px solid rgba(230, 193, 105, 0.48) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42) !important;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
  color: initial !important;
  -webkit-text-fill-color: initial !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}
#game .opp-profile-stack > .opp-emote-btn:hover {
  background: linear-gradient(165deg, rgba(255, 215, 0, 0.24), rgba(18, 30, 48, 0.98)) !important;
  border-color: rgba(255, 215, 0, 0.72) !important;
  transform: translateY(-1px) !important;
}
#game .opp-profile-stack > .opp-emote-btn .opp-emote-ico {
  font-size: 16px !important;
  line-height: 1 !important;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
  color: initial !important;
  -webkit-text-fill-color: initial !important;
}

#rack-row > #ux-tip,
#game > #ux-tip {
  bottom: calc(100% + 36px) !important;
}

#game .self-card-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 20 !important;
}

#game .self-card-wrap > .seat-discard {
  order: -1 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  visibility: visible !important;
  pointer-events: none !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 108px !important;
  min-width: 108px !important;
  height: 102px !important;
  min-height: 102px !important;
  padding: 8px !important;
  border: 1px solid rgba(239, 201, 92, .44) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(52, 81, 107, .36), transparent 60%),
    linear-gradient(160deg, rgba(13, 27, 43, .97), rgba(5, 13, 24, .98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 7px 16px rgba(0, 0, 0, .42) !important;
}
#game .self-card-wrap > .seat-discard.can-pick {
  pointer-events: auto !important;
  border-color: #8fd4b8 !important;
  cursor: grab !important;
}
#game .self-card-wrap > .seat-discard .mini-tile.seat-disc-tile {
  width: 62px !important;
  min-width: 62px !important;
  height: 84px !important;
  font-size: 30px !important;
  flex: 0 0 62px !important;
}

/* Yan “Atılan” panelleri kapalı */
#game #table-rail .discard-panel,
#game #table-rail-left .discard-panel,
#table-rail .discard-panel,
#table-rail-left .discard-panel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#game #opp-top .opp-card {
  flex-direction: row !important;
  width: auto !important;
  min-width: 160px !important;
  max-width: min(300px, 56vw) !important;
  padding: 9px 15px 9px 11px !important;
  gap: 10px !important;
  align-items: center !important;
  border-radius: 16px !important;
}

#game #opp-top .opp-card .opp-mid {
  align-items: flex-start !important;
}

#game #opp-top .opp-card .avatar {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  font-size: 17px !important;
}

#game #opp-top .opp-card .name {
  font-size: 13px !important;
  max-width: 150px !important;
}

#game #opp-top .opp-card .opp-count,
#game #opp-top .opp-card .tile-meta,
#game #opp-top .opp-card .turn-chip {
  font-size: 11px !important;
}

#game .opp-card.active {
  border-color: var(--rd-gold) !important;
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.35),
    0 0 20px rgba(255, 215, 0, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.55) !important;
}

#game .opp-card .avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, #3b2c14, #241a0b) !important;
  border: 2px solid var(--rd-gold) !important;
  color: var(--rd-gold) !important;
  flex-shrink: 0 !important;
}

#game .opp-card .opp-mid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  width: 100% !important;
}

#game .opp-card .name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f2ead9 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#game .opp-card .opp-count {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

#game .opp-card .opp-count::after { content: " taş"; }

#rack-row > .discard-panel,
#rack-play-strip > .discard-panel,
#game > .discard-panel {
  position: absolute !important;
  top: auto !important;
  right: 10px !important;
  left: auto !important;
  bottom: calc(100% + 18px) !important;
  transform: none !important;
  align-self: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  width: auto !important;
  min-width: 64px !important;
  flex: 0 0 auto !important;
  z-index: 12 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(17, 28, 42, 0.96), rgba(8, 15, 25, 0.96)) !important;
  border: 1.5px dashed rgba(230, 193, 105, 0.55) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  order: 0 !important;
  pointer-events: auto !important;
}

#table-rail #discard-pile,
#table-rail #discard-pile .mini-tile,
#table-rail #discard-pile .mini-tile.discard-top,
#table-rail-left #discard-pile-left,
#table-rail-left #discard-pile-left .mini-tile,
#table-rail-left #discard-pile-left .mini-tile.discard-top {
  position: relative !important;
  z-index: 10 !important;
}

#rack-row > #rack-play-strip {
  order: 1 !important;
}

#rack-row > #rack-body {
  order: 2 !important;
}

#rack-row > #rack-section {
  order: 6 !important;
}

#table-rail .discard-panel .panel-caption,
#table-rail-left .discard-panel .panel-caption,
#rack-row > .discard-panel .panel-caption,
#rack-play-strip > .discard-panel .panel-caption {
  display: none !important;
}

#table-rail #discard-pile,
#table-rail-left #discard-pile-left,
#rack-row > .discard-panel #discard-pile,
#rack-play-strip > .discard-panel #discard-pile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  gap: 0 !important;
}

#table-rail #discard-pile .mini-tile.discard-top,
#table-rail-left #discard-pile-left .mini-tile.discard-top,
#rack-row > .discard-panel #discard-pile .mini-tile.discard-top,
#rack-play-strip > .discard-panel #discard-pile .mini-tile.discard-top {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 74px !important;
  min-width: 56px !important;
  min-height: 74px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0ebe0 100%) !important;
  border: 1.5px solid rgba(120, 100, 70, 0.5) !important;
  /* Tek gövde — 3D offset shadow ikinci çerçeve gibi görünüyordu */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

#table-rail .panel-empty-discard,
#table-rail-left .panel-empty-discard,
#rack-row > .discard-panel .panel-empty-discard,
#rack-play-strip > .discard-panel .panel-empty-discard {
  display: block !important;
  box-sizing: border-box !important;
  width: 56px !important;
  height: 74px !important;
  min-width: 56px !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1.5px dashed rgba(230, 193, 105, 0.45) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
}

#table-rail .panel-empty-discard::before,
#table-rail .panel-empty-discard::after,
#table-rail-left .panel-empty-discard::before,
#table-rail-left .panel-empty-discard::after {
  content: none !important;
  display: none !important;
}

#rack-row > .discard-panel:has(.mini-tile.discard-top),
#rack-play-strip > .discard-panel:has(.mini-tile.discard-top) {
  border-style: solid !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

#game #discard-pile.can-pick .mini-tile.discard-top,
#game #discard-pile-left.can-pick .mini-tile.discard-top {
  cursor: grab !important;
  box-shadow:
    0 0 0 2px rgba(78, 200, 240, 0.85),
    0 0 12px rgba(78, 200, 240, 0.35) !important;
}

/* ======================== 7) BUTON ŞERİDİ — üst diz + sağ hamleler ======================== */

#rack-row {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 2px 8px 6px !important;
  gap: 4px !important;
  background: none !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#rack-play-strip {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 8px 4px 8px !important;
  margin: 0 !important;
  position: relative !important;
  width: 100% !important;
  min-height: 32px !important;
  height: auto !important;
  z-index: 95 !important;
  box-sizing: border-box !important;
  order: 1 !important;
}

#rack-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  order: 2 !important;
}

/* Kendi kart + emoji butonu: rack-play-strip (z:95) üstlerine binince
   tıklamayı yutuyordu — kart bloğu strip üstüne çıkar */
#game .self-card-wrap {
  position: relative !important;
  z-index: 120 !important;
}
#game .self-emote-btn {
  position: relative !important;
  z-index: 121 !important;
}

#rack-body > #rack-section {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#rack-side-actions {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-self: stretch !important;
  gap: 6px !important;
  flex: 0 0 110px !important;
  width: 110px !important;
  padding-bottom: calc(48px + 14px + 12px) !important;
  z-index: 100 !important;
  position: relative !important;
}

/* Son atılan taş — sol oyuncu Per Diz üstü, diğerleri İşle üstü. */
#rack-side-actions #side-discard-dock,
#rack-play-strip #side-discard-dock-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  order: -1 !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 6px 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(230, 193, 105, 0.45) !important;
  background: linear-gradient(165deg, rgba(18, 28, 42, 0.94), rgba(8, 14, 24, 0.97)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38) !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#rack-play-strip #side-discard-dock-left {
  position: absolute !important;
  left: 8px !important;
  bottom: calc(100% + 7px) !important;
  width: 64px !important;
  min-height: 52px !important;
  z-index: 105 !important;
}
#rack-side-actions #side-discard-dock[hidden],
#rack-play-strip #side-discard-dock-left[hidden] {
  display: none !important;
}
#rack-side-actions #side-discard-dock.is-empty,
#rack-play-strip #side-discard-dock-left.is-empty {
  opacity: 0.55 !important;
}
#rack-side-actions #side-discard-dock.can-pick,
#rack-play-strip #side-discard-dock-left.can-pick {
  border-color: rgba(255, 200, 60, 0.85) !important;
  cursor: pointer !important;
}
#rack-side-actions #side-discard-dock .side-discard-stack {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 100% !important;
}
#rack-side-actions #side-discard-dock .side-discard-stack .mini-tile.side-disc-tile.discard-buried {
  margin-right: -18px !important;
  opacity: 0.82 !important;
  transform: scale(0.92) !important;
}
#rack-side-actions #side-discard-dock .side-discard-stack .mini-tile.side-disc-tile.discard-top {
  position: relative !important;
  z-index: 2 !important;
}
#rack-side-actions #side-discard-dock .side-discard-cap {
  display: block !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(255, 225, 140, 0.85) !important;
  margin-bottom: 2px !important;
}
#rack-side-actions #side-discard-dock {
  min-height: 92px !important;
  padding: 0 !important;
}
#rack-side-actions #side-discard-dock .side-discard-cap,
#rack-side-actions #side-discard-dock .side-discard-empty {
  display: none !important;
}
#rack-side-actions #side-discard-dock.is-empty {
  display: none !important;
  opacity: 1 !important;
}
#rack-side-actions #side-discard-dock .mini-tile.side-disc-tile,
#rack-play-strip #side-discard-dock-left .mini-tile.side-disc-tile {
  width: 56px !important;
  min-width: 56px !important;
  height: 76px !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(201, 162, 39, 0.7) !important;
  background: linear-gradient(180deg, #fffef8, #ebe4d4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
}

#rack-side-actions .rack-arrange,
#rack-side-actions #actions,
#rack-side-actions #actions .actions-primary,
#rack-side-actions #actions .actions-social {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#rack-side-actions .rack-arrange-btn,
#rack-side-actions #actions .btn {
  display: inline-flex !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  transform: none !important;
}

#rack-play-strip #rack-diz-group {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 8 !important;
}

#rack-section > #rack-diz-group {
  display: none !important;
}

#rack-play-me {
  display: none !important;
}

#rack-play-me .rack-arrange,
#rack-play-me #actions,
#rack-play-me #actions:not(:has(.btn:not([hidden]):not(:disabled))),
#rack-play-strip #actions,
#rack-play-strip #actions:not(:has(.btn:not([hidden]):not(:disabled))) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  order: 0 !important;
  grid-column: auto !important;
  justify-self: auto !important;
}

#rack-play-me .rack-diz-group {
  display: contents !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

#rack-play-me #actions .actions-primary,
#rack-play-me #actions .actions-primary:not(:has(.btn:not([hidden]):not(:disabled))),
#rack-play-strip #actions .actions-primary,
#rack-play-strip #actions .actions-primary:not(:has(.btn:not([hidden]):not(:disabled))) {
  display: contents !important;
  gap: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#rack-play-me #actions .btn:disabled,
#rack-play-me #actions .btn[disabled],
#rack-play-strip #actions .btn:disabled,
#rack-play-strip #actions .btn[disabled] {
  display: inline-flex !important;
}

#rack-play-me #actions .btn[hidden],
#rack-play-strip #actions .btn[hidden],
#rack-side-actions #actions .btn[hidden] {
  display: none !important;
}

#rack-play-me #actions .actions-social,
#rack-play-strip #actions .actions-social,
#rack-side-actions #actions .actions-social {
  display: none !important;
}

/* Tek tip kompakt kapsül — hepsi aynı */
#rack-play-me #actions .btn,
#rack-play-strip #actions .btn,
#rack-side-actions #actions .btn,
#rack-play-me .rack-arrange-btn,
#rack-play-me .rack-arrange-btn.per,
#rack-play-me .rack-arrange-btn.cift,
#rack-play-me .rack-arrange-btn.open,
#rack-play-me .rack-arrange-btn.isle,
#rack-play-me .rack-arrange-btn.finish,
#rack-side-actions .rack-arrange-btn,
#rack-play-strip #rack-diz-group .rack-arrange-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 9px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(18, 32, 48, 0.96), rgba(8, 16, 28, 0.98)) !important;
  border: 1px solid rgba(230, 193, 105, 0.55) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
  color: #f0e6d2 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  line-height: 1 !important;
}

#rack-side-actions #actions .btn,
#rack-side-actions .rack-arrange-btn {
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 999px !important;
}

#rack-play-me #actions .btn .icon svg,
#rack-play-strip #actions .btn .icon svg,
#rack-side-actions #actions .btn .icon svg,
#rack-play-me .rack-arrange-btn .rack-arr-ico svg,
#rack-side-actions .rack-arrange-btn .rack-arr-ico svg,
#rack-play-strip #rack-diz-group .rack-arrange-btn .rack-arr-ico svg {
  width: 11px !important;
  height: 11px !important;
  fill: currentColor !important;
}

#rack-play-me #actions .btn:disabled,
#rack-play-me #actions .btn[disabled],
#rack-play-strip #actions .btn:disabled,
#rack-play-strip #actions .btn[disabled],
#rack-side-actions #actions .btn:disabled,
#rack-side-actions #actions .btn[disabled],
#rack-play-me .rack-arrange-btn:disabled,
#rack-play-me .rack-arrange-btn[disabled],
#rack-side-actions .rack-arrange-btn:disabled,
#rack-side-actions .rack-arrange-btn[disabled],
#rack-play-strip #rack-diz-group .rack-arrange-btn:disabled {
  display: inline-flex !important;
  opacity: 0.36 !important;
  filter: none !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.42) !important;
  background: linear-gradient(180deg, rgba(14, 22, 34, 0.9), rgba(8, 14, 24, 0.95)) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Aktif: aynı form, biraz daha parlak kenar */
#rack-play-me #actions .btn:not(:disabled),
#rack-play-strip #actions .btn:not(:disabled),
#rack-side-actions #actions .btn:not(:disabled),
#rack-play-me .rack-arrange-btn:not(:disabled),
#rack-side-actions .rack-arrange-btn:not(:disabled),
#rack-play-strip #rack-diz-group .rack-arrange-btn:not(:disabled) {
  border-color: rgba(230, 193, 105, 0.85) !important;
  color: #fff6e0 !important;
}

#rack-play-me #actions .btn:hover:not(:disabled),
#rack-play-strip #actions .btn:hover:not(:disabled),
#rack-side-actions #actions .btn:hover:not(:disabled),
#rack-play-me .rack-arrange-btn:hover:not(:disabled),
#rack-side-actions .rack-arrange-btn:hover:not(:disabled),
#rack-play-strip #rack-diz-group .rack-arrange-btn:hover:not(:disabled) {
  filter: brightness(1.1) !important;
  transform: none !important;
}

#rack-play-me #btn-draw .btn-lbl,
#rack-play-strip #btn-draw .btn-lbl,
#rack-side-actions #btn-draw .btn-lbl,
#rack-play-me #btn-elden .btn-lbl,
#rack-play-strip #btn-elden .btn-lbl,
#rack-side-actions #btn-elden .btn-lbl {
  font-size: 0 !important;
}

#rack-play-me #btn-draw .btn-lbl::after,
#rack-play-strip #btn-draw .btn-lbl::after,
#rack-side-actions #btn-draw .btn-lbl::after {
  content: "Taş Çek";
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}

#rack-play-me #btn-elden .btn-lbl::after,
#rack-play-strip #btn-elden .btn-lbl::after,
#rack-side-actions #btn-elden .btn-lbl::after {
  content: "Yerden Al";
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}

#rack-side-actions #btn-cift-ac,
#rack-play-me #btn-cift-ac {
  display: inline-flex !important;
}

#rack-play-strip #rack-diz-group #btn-cift-ac {
  display: inline-flex !important;
}

/* ======================== 8) MİSAFİR KARTI ======================== */

/* Misafir kartı — Cem ile aynı eksen (masa ortası, ıstaka üst kenarı) */
#rack-body > .self-card-wrap {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 50 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}

#rack-body > #self-card,
#rack-body > .self-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 50 !important;
}

/* Misafir = üst rakip (Cem) ile aynı şerit kart */
#game .self-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 148px !important;
  max-width: min(280px, 56vw) !important;
  padding: 8px 14px 8px 10px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(18, 30, 46, 0.98), rgba(8, 14, 24, 0.98)) !important;
  border: 2px solid var(--rd-gold-soft) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55) !important;
}

#game .self-card .avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, #3b2c14, #241a0b) !important;
  border: 2px solid var(--rd-gold) !important;
  color: var(--rd-gold) !important;
  flex: 0 0 auto !important;
}

#game .self-card .self-mid {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  text-align: left !important;
  width: auto !important;
  min-width: 0 !important;
}

#game .self-card .name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #f2ead9 !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#game .self-card .self-meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

#game .self-card .rack-title {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

#game .self-card #chip-display {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--rd-gold) !important;
}

/* ======================== 9) GERÇEKÇİ AHŞAP ISTAKA ======================== */

/* Düz redesign gövdesi — .istaka-real varken istaka-real.css yönetir */
#game #rack-section.istaka-real {
  --tile-w: clamp(32px, calc((100vw - 200px) / 15), 50px);
  --tile-h: calc(var(--tile-w) * 1.88);
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
#game #rack-section.istaka-real::before,
#game #rack-section.istaka-real::after {
  content: none !important;
  display: none !important;
}

/* Dış gövde (istaka-real yoksa yedek) */
#rack-section:not(.istaka-real) {
  position: relative !important;
  margin: 0 12px 0 108px !important;
  width: calc(100% - 140px) !important;
  max-width: none !important;
  padding: 34px 14px 14px !important;
  border-radius: 16px 16px 12px 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 236, 200, 0.18) 0%, transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, transparent 8%, transparent 92%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(180deg, #a67c3a 0%, #7a4a24 35%, #4e2e14 100%) !important;
  background-color: #6b4220 !important;
  border: 1px solid rgba(40, 22, 8, 0.85) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 230, 180, 0.35),
    inset 0 -6px 14px rgba(0, 0, 0, 0.5),
    0 16px 36px rgba(0, 0, 0, 0.58) !important;
}

/* Sol / sağ yan kapak (gerçek ıstaka uçları) */
#rack-section:not(.istaka-real)::before,
#rack-section:not(.istaka-real)::after {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 11px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: 5px !important;
  background:
    linear-gradient(90deg, rgba(255, 230, 180, 0.22), transparent 55%),
    linear-gradient(180deg, #c08a4a 0%, #8a5528 40%, #4a2a12 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.35) !important;
}
#rack-section:not(.istaka-real)::before { left: 4px !important; }
#rack-section:not(.istaka-real)::after {
  right: 4px !important;
  background:
    linear-gradient(270deg, rgba(255, 230, 180, 0.22), transparent 55%),
    linear-gradient(180deg, #c08a4a 0%, #8a5528 40%, #4a2a12 100%) !important;
}

/* Per Diz / Çift Diz — ıstaka üst şeritte */
#rack-play-strip > #rack-diz-group {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 8 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
#rack-section > #rack-diz-group {
  display: none !important;
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #fff6e4 !important;
  background: linear-gradient(180deg, rgba(42, 28, 16, 0.94), rgba(20, 12, 8, 0.96)) !important;
  border: 1px solid rgba(255, 210, 140, 0.55) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer !important;
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn.per {
  border-color: rgba(255, 183, 77, 0.85) !important;
  color: #ffe7b0 !important;
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn.cift {
  border-color: rgba(255, 138, 101, 0.8) !important;
  color: #ffd0bc !important;
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn.open {
  border-color: rgba(129, 199, 132, 0.8) !important;
  color: #c8f0cb !important;
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn .rack-arr-ico {
  width: 12px !important;
  height: 12px !important;
  display: inline-flex !important;
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn .rack-arr-ico svg {
  width: 12px !important;
  height: 12px !important;
  fill: currentColor !important;
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn .rack-arr-lbl {
  display: inline !important;
  white-space: nowrap !important;
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn:hover:not(:disabled) {
  filter: brightness(1.12);
}
#rack-play-strip > #rack-diz-group .rack-arrange-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

#rack-container,
#rack-container.istaka-well,
#rack-container.rack-2row,
#rack-container.rack-3row {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 1px 2px !important;
  border-radius: 8px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 18%),
    linear-gradient(180deg, #3a2412 0%, #2a180c 55%, #1f1208 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.55) !important;
  box-shadow:
    inset 0 6px 16px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 210, 150, 0.08),
    0 1px 0 rgba(255, 220, 170, 0.12) !important;
}

/* 14 eşit sütun — hizalı taban, grup içi bitişik */
#rack-container .rack-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(15, minmax(0, 1fr)) !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  justify-content: stretch !important;
  align-items: end !important;
  width: 100% !important;
  min-height: calc(var(--tile-h) + 6px) !important;
  height: calc(var(--tile-h) + 6px) !important;
  padding: 1px 0 5px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(180deg, rgba(255, 220, 160, 0.04) 0%, transparent 40%),
    linear-gradient(180deg, #4a3018 0%, #3a2412 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  border-radius: 5px !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(255, 210, 150, 0.06) !important;
}

#rack-container .rack-row::before {
  /* Üst oluk / ray gölgesi */
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  top: 2px !important;
  height: 3px !important;
  border-radius: 2px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent) !important;
  box-shadow: none !important;
}

/* Ön dudak — taşların dayandığı ahşap ray */
#rack-container .rack-row::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  bottom: 1px !important;
  height: 12px !important;
  border-radius: 2px 2px 4px 4px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 235, 190, 0.55) 0%, transparent 35%),
    linear-gradient(180deg, #d4a86a 0%, #a67c3a 35%, #6b4220 78%, #3f2712 100%),
    var(--rack-wood, none) !important;
  background-color: #8a6234 !important;
  background-size: auto, auto, 280px auto !important;
  background-blend-mode: soft-light, normal, multiply !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.55),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    0 -3px 8px rgba(0, 0, 0, 0.35) !important;
}

#rack-container .rack-slot,
#rack-container .rack-slot.empty,
#rack-container .rack-slot.leftover,
#rack-container .rack-slot.empty.group-sep,
#rack-container .rack-slot.filled,
#rack-container .rack-slot.in-group {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--tile-h) !important;
  min-height: var(--tile-h) !important;
  max-height: var(--tile-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

#rack-container .rack-slot.empty::after,
#rack-container .rack-slot.empty::before,
#rack-container .rack-slot.empty.group-sep::before,
#rack-container .rack-slot.empty.group-sep::after {
  content: none !important;
  display: none !important;
}

/* Tek tip taş — yuvayı doldur (ara kapanır), boy --tile-h */
#rack-container .tile,
#rack-container .rack-slot .tile,
#rack-container .rack-slot.in-group .tile,
#rack-container .rack-slot.in-group.group-start .tile,
#rack-container .rack-slot.in-group.group-end .tile,
#rack-container .rack-slot.leftover .tile {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--tile-h) !important;
  min-height: var(--tile-h) !important;
  max-height: var(--tile-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 5px !important;
  aspect-ratio: unset !important;
  transform: none !important;
  translate: none !important;
  top: auto !important;
  bottom: 0 !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
  font-family: 'Outfit', 'Cinzel', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(13px, calc(var(--tile-w) * 0.48), 26px) !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(165deg, #ffffff 0%, #f7f3ea 45%, #ebe4d4 100%) !important;
  border: 1px solid rgba(100, 90, 70, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.28) !important;
  cursor: grab !important;
  animation: none !important;
  transition: box-shadow 0.12s ease, border-color 0.12s ease, filter 0.12s ease !important;
  will-change: auto !important;
}

#rack-container .tile::before,
#rack-container .rack-slot .tile::before {
  display: none !important;
  content: none !important;
}

#rack-container .rack-slot .tile .tile-label {
  font-size: calc(var(--tile-w) * 0.16) !important;
  opacity: 0.85 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Seçim: yukarı kaydırma YOK — sadece çerçeve */
#rack-container .tile.selected,
#rack-container .hand-tile.selected,
#rack-container .rack-slot .tile.selected,
#rack-container .rack-slot.in-group .tile.selected,
.tile.selected,
.hand-tile.selected {
  transform: none !important;
  margin: 0 !important;
  top: auto !important;
  z-index: 3 !important;
  border-color: rgba(78, 200, 240, 0.95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 2px rgba(78, 200, 240, 0.85),
    0 0 10px rgba(78, 200, 240, 0.4) !important;
}

/* Hover: yuva sabit — taş kıpırdamasın (translate/scale yok; komşu bindirme yok) */
#game #rack-container .tile:hover:not(.selected),
#game #rack-container .rack-slot .tile:hover:not(.selected),
#game #rack-container .rack-slot:hover > .tile:not(.selected),
#game #rack-container .tile:hover:not(.selected):not(.dragging) {
  transform: none !important;
  translate: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  top: auto !important;
  z-index: 2 !important;
  filter: brightness(1.05) !important;
  border-color: rgba(230, 193, 105, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(230, 193, 105, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.32) !important;
}

/* Komşu bindirme kaldırıldı — hover’da sağ-sol titreşim yapıyordu */
#rack-container .rack-slot.filled + .rack-slot.filled .tile,
#rack-container .rack-slot.in-group + .rack-slot.in-group .tile {
  margin-left: 0 !important;
  width: 100% !important;
}

/* ======================== 10) SOHBET — overlay (masa kaymasın) ======================== */

/*
  Açılınca middle/rack margin ve taş boyutu DEĞİŞMEZ.
  Panel sağdan üstüne biner; oyun alanı sabit kalır.
*/
#chat-rail {
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  right: 0 !important;
  left: auto !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  width: 62px !important;
  max-width: 62px !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 200 !important;
  transition: none !important;
}

/* Genişlik ASLA artmasın — panel absolute overlay */
#chat-rail.open {
  width: 62px !important;
  max-width: 62px !important;
}

#chat-rail .chat-rail-tab,
#chat-rail #chat-panel {
  pointer-events: auto !important;
}

#chat-rail .chat-rail-tab {
  position: absolute !important;
  right: 10px !important;
  bottom: 14px !important;
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  flex: none !important;
  align-self: auto !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  writing-mode: horizontal-tb !important;
  background: linear-gradient(180deg, rgba(19, 31, 45, 0.98), rgba(9, 16, 26, 0.98)) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5) !important;
  color: #ece2cf !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  z-index: 3 !important;
}

#chat-rail.open .chat-rail-tab {
  right: min(330px, calc(88vw + 8px)) !important;
}

#chat-rail .chat-rail-tab .chat-rail-lbl { display: none !important; }

#chat-rail .chat-rail-tab .chat-rail-ico,
#chat-rail .chat-rail-tab .chat-rail-ico svg {
  width: 22px !important;
  height: 22px !important;
}

#chat-rail .chat-rail-tab .dock-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  transform: none !important;
}

#chat-rail #chat-panel {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
  flex: none !important;
  width: min(320px, 88vw) !important;
  max-width: min(320px, 88vw) !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 16px 0 0 16px !important;
  border: 1px solid rgba(255, 215, 0, 0.35) !important;
  border-right: 0 !important;
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.55) !important;
  transform: translateX(105%) !important;
  transition: transform 0.22s ease !important;
  z-index: 2 !important;
  overflow: hidden !important;
}

#chat-rail.open #chat-panel {
  transform: translateX(0) !important;
}

/* Eski “masa kaydır” kurallarını tamamen iptal et */
#game:has(#chat-rail.open) > #middle,
#game:has(#chat-rail.open) #middle {
  margin-right: 28px !important;
  padding-right: inherit !important;
}

#game:has(#chat-rail.open) #rack-row {
  max-width: none !important;
  width: 100% !important;
  margin-right: 0 !important;
}

#game:has(#chat-rail.open) #rack-section {
  --tile-w: clamp(32px, calc((100vw - 200px) / 15), 50px) !important;
  --tile-h: calc(var(--tile-w) * 1.88) !important;
  width: calc(100% - 140px) !important;
  max-width: none !important;
  margin: 0 12px 0 108px !important;
}

#game:has(#chat-rail.open) #rack-section .rack-row { gap: 0 !important; }
#game:has(#chat-rail.open) #rack-section .rack-slot {
  min-width: 0 !important;
  max-width: none !important;
}
#game:has(#chat-rail.open) #rack-section .tile {
  width: 100% !important;
  min-width: 0 !important;
}

#game:has(#chat-rail.open) > .discard-panel {
  right: auto !important;
}

/* ======================== 11) SÜRÜKLE-BIRAK ======================== */

.drag-ghost {
  z-index: 99999 !important;
  opacity: 0.96 !important;
}

body.is-dragging-tile { cursor: grabbing !important; }

body.is-dragging-tile #rack-container .tile,
#rack-container .tile { cursor: grab; }

#game .set-group.dnd-attach-ok {
  outline: 2px dashed rgba(78, 200, 240, 0.85) !important;
  outline-offset: 3px !important;
  border-radius: 7px !important;
  background: rgba(78, 200, 240, 0.12) !important;
}

#game .set-group.dnd-attach-ok.dnd-over {
  outline-style: solid !important;
  background: rgba(78, 200, 240, 0.28) !important;
  box-shadow: 0 0 18px rgba(78, 200, 240, 0.55) !important;
}

#game #discard-pile.dnd-drop-ok,
#game #discard-pile-left.dnd-drop-ok,
#game #rack-section.dnd-drop-ok {
  box-shadow:
    inset 0 0 0 2px rgba(78, 200, 240, 0.6),
    0 0 20px rgba(78, 200, 240, 0.3) !important;
}

#game #rack-section.dnd-drop-ok.dnd-over {
  box-shadow:
    inset 0 0 0 3px rgba(78, 200, 240, 0.95),
    0 0 30px rgba(78, 200, 240, 0.5) !important;
}

/* Atarken sarı ışıma yok — sakin cyan */
#game #discard-pile.drop-hover,
#game #discard-pile-left.drop-hover {
  box-shadow:
    inset 0 0 0 2px rgba(78, 200, 240, 0.85),
    0 0 18px rgba(78, 200, 240, 0.35) !important;
}

/* Bırakma hedefi: sarı kutu yok — ince boşluk çizgisi */
#game #rack-container .rack-slot.drop-target {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative !important;
}

#game #rack-container .rack-slot.drop-target::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8% !important;
  bottom: 18% !important;
  width: 2px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.25) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  display: block !important;
}

/* Bırakma çizgisi — sürüklerken hedef yuva */
#rack-container {
  position: relative !important;
}

.rack-insert-marker {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(160, 235, 255, 0.98), rgba(78, 200, 240, 0.9));
  box-shadow:
    0 0 12px rgba(78, 200, 240, 0.85),
    0 0 2px rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: scaleY(0.55);
  transition:
    opacity 0.1s ease,
    transform 0.12s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.07s ease,
    top 0.07s ease,
    height 0.07s ease;
  pointer-events: none;
  z-index: 24;
}

.rack-insert-marker.visible {
  opacity: 1;
  transform: scaleY(1);
}

#rack-container.rack-dnd-active .rack-row.drop-row-active {
  background: rgba(78, 200, 240, 0.07) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 0 1px rgba(78, 200, 240, 0.18) !important;
}

#rack-container.rack-dnd-active .rack-slot.insert-preview {
  z-index: 3 !important;
}

#rack-container.rack-dnd-active .rack-slot.insert-preview::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px 2px 8px !important;
  border-radius: 6px !important;
  border: 1.5px dashed rgba(78, 200, 240, 0.55) !important;
  background: rgba(78, 200, 240, 0.08) !important;
  pointer-events: none !important;
  display: block !important;
  animation: rackInsertPulse 0.9s ease-in-out infinite alternate !important;
}

@keyframes rackInsertPulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

#rack-container.rack-dnd-active .rack-slot .tile:not(.drag-source) {
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.is-dragging-tile #rack-container .tile:not(.drag-source) {
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Mynet: sürüklenen taş yerinde görünmez; ghost takip eder */
body.is-dragging-tile #rack-container .tile.drag-source {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Sürüklerken 3D eğim hit-testi bozmasın */
body.is-dragging-tile #game #rack-section.istaka-real #rack-container .tile,
body.is-dragging-tile #game #rack-section.istaka-real #rack-container .tile:hover {
  transform: none !important;
}

body.is-dragging-tile #rack-container .tile:not(.drag-source) {
  cursor: grabbing !important;
}

#rack-container .tile {
  cursor: grab !important;
}

#rack-container .tile:active {
  cursor: grabbing !important;
}

/* Ceza sarı noktası / turuncu halka gizle */
#game #rack-container .tile.foul-risk {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.28) !important;
  outline: none !important;
}

#game #rack-container .tile .foul-dot {
  display: none !important;
}

#game #rack-section.throw-ready {
  border-color: rgba(0, 0, 0, 0.55) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 226, 180, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.45),
    0 14px 32px rgba(0, 0, 0, 0.55) !important;
}

#game #rack-section.throw-ready .rack-title::after {
  content: none !important;
  display: none !important;
}

/* ======================== 12) DAR EKRAN ======================== */

@media (max-width: 1100px) {
  #game { --rd-side: 68px; }

  #game #opened-sets-area {
    gap: 10px !important;
    padding: 8px 4px !important;
  }

  #rack-play-me #actions .btn,
  #rack-play-strip #actions .btn,
  #rack-play-me .rack-arrange-btn {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 7px !important;
    font-size: 8px !important;
  }
}

/* Onay / bitiş diyalogları — ıstaka (z≈40–110) ve sohbet (z=200) üstünde */
#game > #confirm-overlay,
#confirm-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 500 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(0, 0, 0, 0.88) !important;
  pointer-events: none;
}
#game > #confirm-overlay.show,
#confirm-overlay.show {
  display: flex !important;
  pointer-events: auto !important;
}
#confirm-overlay .confirm-card {
  position: relative !important;
  z-index: 1 !important;
  max-height: min(78vh, 520px) !important;
  overflow-y: auto !important;
  margin-bottom: 8vh !important; /* ıstaka üstünde ortala */
}
#game > #go-overlay,
#go-overlay {
  z-index: 480 !important;
}
#game:has(#confirm-overlay.show) #rack-row,
#game:has(#confirm-overlay.show) #rack-play-strip,
#game:has(#confirm-overlay.show) #chat-rail {
  pointer-events: none !important;
}

/* ======================== 13) MOBİL YATAY — responsive masa ======================== */

@media (max-height: 520px) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape) {
  #game {
    --rd-side: clamp(56px, 12vh, 78px);
    --tile-w: clamp(24px, 3.8vh, 36px);
    --tile-h: clamp(40px, 6.4vh, 60px);
    padding: 4px 6px 2px !important;
  }

  #game > #tb-rules {
    top: 6px !important;
    left: 8px !important;
    gap: 6px !important;
    max-width: none !important;
  }
  #game > #tb-rules::before {
    height: 24px;
    font-size: 13px;
    padding: 0 8px;
    min-width: 30px;
  }
  #game > #tb-rules::after {
    content: none !important;
    display: none !important;
  }
  #tb-rules .tb-rules-toggle,
  #tb-rules > .tb-chip.tb-rem {
    height: 24px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }

  #tb-game-menu .an-menu-btn {
    width: 30px !important;
    height: 30px !important;
  }
  #game > .tb-menu-end,
  #tb-game-menu {
    top: 4px !important;
    right: 6px !important;
  }

  #game > #turn-row {
    top: 2px !important;
    right: 42px !important;
    max-width: min(360px, 78vw) !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 28px !important;
  }
  #tb-rules #tb-keystone,
  #tb-rules #tb-keystone #rack-indicators,
  #turn-row #tb-keystone,
  #turn-row #tb-keystone #rack-indicators {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
  #game > #turn-row #turn-banner {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
  #tb-rules #tb-keystone .indicator-box,
  #turn-row #tb-keystone .indicator-box {
    width: 20px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    font-size: 12px !important;
  }
  #tb-rules #tb-keystone .ind-cap,
  #turn-row #tb-keystone .ind-cap {
    font-size: 8px !important;
  }
  #game > #turn-row #turn-banner {
    max-width: 175px !important;
    padding: 0 3px 0 10px !important;
  }
  #game > #turn-row #turn-banner .tb-name {
    font-size: 10px !important;
  }
  #game > #turn-row #turn-banner .tb-timer {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
  }

  #game > #middle {
    gap: 4px !important;
    padding: 28px 0 0 !important;
    grid-template-columns: var(--rd-side) minmax(0, 1fr) var(--rd-side) !important;
  }

  #game .opp-card,
  #game #opp-left .opp-card,
  #game #opp-right .opp-card,
  #game #opp-top .opp-card {
    padding: 4px 5px !important;
    border-radius: 10px !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  #game .opp-card .avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  #game .opp-card .name {
    font-size: 9px !important;
    max-width: 64px !important;
  }
  #game .opp-card .opp-count {
    font-size: 8px !important;
  }

  #game #opened-sets-area {
    gap: 4px !important;
    padding: 3px 2px !important;
    overflow: hidden !important;
  }
  #game #opened-sets-area .opened-owner-lane {
    padding: 24px 4px 4px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    align-items: flex-end !important;
  }
  #game #opened-sets-area .opened-owner-head {
    top: 1px !important;
    left: 5px !important;
    font-size: 8px !important;
    padding: 2px 8px !important;
    min-height: 14px !important;
  }

  #rack-row {
    gap: 4px !important;
    padding: 2px 0 0 !important;
  }
  #rack-row > #rack-play-strip #actions .btn,
  #rack-play-me #actions .btn,
  #rack-play-me .rack-arrange-btn {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
    border-radius: 7px !important;
  }

  #rack-container .tile,
  #rack-section .tile {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--tile-h) !important;
    font-size: clamp(12px, 3.4vh, 18px) !important;
  }

  #rack-row > .discard-panel #discard-pile .mini-tile.discard-top {
    width: clamp(22px, 4vh, 30px) !important;
    height: clamp(30px, 5.5vh, 40px) !important;
    font-size: 11px !important;
  }

  #login-overlay .login-container {
    width: min(420px, 86vw) !important;
    max-height: min(92dvh, 100%) !important;
    overflow-y: auto !important;
    transform: scale(0.92);
    transform-origin: center center;
  }
  #login-overlay .login-logo {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 6px !important;
  }
  #login-overlay .login-subtitle {
    margin-bottom: 10px !important;
    font-size: 12px !important;
  }
  #login-overlay .login-primary {
    padding: 10px 12px !important;
    margin-bottom: 2px !important;
  }

  #lobby-overlay {
    padding: 10px 12px !important;
  }
  #lobby-overlay .lobby-play-hero {
    min-height: 64px !important;
    padding: 12px 14px !important;
  }
  #lobby-overlay .lobby-play-hero .lph-copy strong {
    font-size: 16px !important;
  }
}

/* Çok dar yatay telefonlar (ör. SE / küçük Android) */
@media (max-height: 380px) and (orientation: landscape) {
  #game {
    --rd-side: 48px;
    --tile-w: 20px;
    --tile-h: 34px;
    padding: 2px 4px 0 !important;
  }
  #game > #middle {
    padding-top: 22px !important;
  }
  #game .opp-card .avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }
  #game .opp-card .name { display: none !important; }
  #rack-play-me #actions .btn,
  #rack-row > #rack-play-strip #actions .btn {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    font-size: 7px !important;
  }
}

/* Gösterge/okey kutuları — normal taş görünümü: krem zemin, nötr kenar;
   renk yalnızca sayı ve harfte kalır, alt şerit yok. */
#tb-rules #tb-keystone .indicator-box.has-stone-color,
#tb-rules #tb-keystone .indicator-box.okey-badge.has-stone-color,
#turn-row #tb-keystone .indicator-box.has-stone-color,
#turn-row #tb-keystone .indicator-box.okey-badge.has-stone-color {
  color: var(--stone-ink) !important;
  background:
    linear-gradient(160deg, #fffef8 0%, #f4ecda 55%, #e8dcc6 100%) !important;
  border: 1.5px solid #bcaaa4 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 0 rgba(40, 28, 12, 0.35),
    0 6px 12px rgba(0, 0, 0, 0.28) !important;
}

#tb-rules #tb-keystone .indicator-box.okey-badge.has-stone-color,
#turn-row #tb-keystone .indicator-box.okey-badge.has-stone-color {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1.5px rgba(255, 215, 0, 0.85),
    0 0 12px rgba(255, 215, 0, 0.35),
    0 6px 12px rgba(0, 0, 0, 0.28) !important;
}

/* Sol/sağ ray: sütuna sığan kompakt atılan-taş çerçevesi (üst/alt slot) */
#game .opp-seat-layout-left .seat-discard-mount > .seat-discard,
#game .opp-seat-layout-right .seat-discard-mount > .seat-discard {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 80px !important;
  min-height: 80px !important;
  padding: 6px !important;
}
#game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
#game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
#game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.discard-top,
#game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.discard-top {
  width: 52px !important;
  min-width: 52px !important;
  height: 68px !important;
  font-size: 23px !important;
  flex: 0 0 52px !important;
  flex-basis: 52px !important;
}
#game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.discard-buried,
#game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.discard-buried {
  margin-right: -26px !important;
}
#game .opp-seat-layout-left .seat-discard-mount > .seat-discard.is-empty-slot,
#game .opp-seat-layout-right .seat-discard-mount > .seat-discard.is-empty-slot {
  opacity: 0.45 !important;
  border: 1px dashed rgba(201, 162, 39, 0.4) !important;
  background: rgba(12, 18, 28, 0.32) !important;
  box-shadow: none !important;
}
@media (max-width: 1100px) {
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 5px !important;
  }
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.discard-top,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.discard-top {
    width: 46px !important;
    min-width: 46px !important;
    height: 60px !important;
    font-size: 20px !important;
    flex: 0 0 46px !important;
    flex-basis: 46px !important;
  }
}
@media (max-height: 520px) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape) {
  #game .opp-seat-layout-left,
  #game .opp-seat-layout-right {
    gap: 7px !important;
  }
  #game .opp-seat-layout-left .opp-profile-col,
  #game .opp-seat-layout-right .opp-profile-col {
    gap: 2px !important;
  }
  #game .opp-seat-layout-left .opp-profile-col > .opp-emote-btn,
  #game .opp-seat-layout-right .opp-profile-col > .opp-emote-btn {
    height: 20px !important;
    min-height: 20px !important;
    min-width: 24px !important;
    padding: 0 6px !important;
  }
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 4px !important;
  }
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.discard-top,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.discard-top {
    width: 40px !important;
    min-width: 40px !important;
    height: 54px !important;
    font-size: 17px !important;
    flex: 0 0 40px !important;
    flex-basis: 40px !important;
  }
}
@media (max-height: 380px) and (orientation: landscape) {
  #game .opp-seat-layout-left,
  #game .opp-seat-layout-right {
    gap: 5px !important;
  }
  #game .opp-seat-layout-left .opp-profile-col > .opp-emote-btn,
  #game .opp-seat-layout-right .opp-profile-col > .opp-emote-btn {
    height: 18px !important;
    min-height: 18px !important;
  }
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 3px !important;
  }
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.discard-top,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.discard-top {
    width: 33px !important;
    min-width: 33px !important;
    height: 44px !important;
    font-size: 13px !important;
    flex: 0 0 33px !important;
    flex-basis: 33px !important;
  }
}

/* ======================== 14) MOBİL DİKEY (PORTRAIT) — responsive masa ======================== */

@media (orientation: portrait) and (max-width: 1100px) {
  #game {
    --rd-side: clamp(54px, 16vw, 70px);
    --tile-w: clamp(20px, 6vw, 28px);
    --tile-h: clamp(46px, 6.8vh, 62px);
    padding: 4px 4px 3px !important;
  }

  /* Üst şerit — kompakt */
  #game > #tb-rules {
    top: 6px !important;
    left: 6px !important;
    gap: 5px !important;
    max-width: none !important;
  }
  #game > #tb-rules::before {
    height: 24px !important;
    min-width: 30px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }
  #tb-rules .tb-rules-toggle,
  #tb-rules > .tb-chip {
    height: 24px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }
  #tb-rules .tb-chip .tb-chip-val,
  #tb-rules .tb-chip .tb-chip-label { font-size: 9px !important; }

  #tb-game-menu .an-menu-btn {
    width: 30px !important;
    height: 30px !important;
  }
  #game > .tb-menu-end,
  #tb-game-menu {
    top: 4px !important;
    right: 6px !important;
  }

  /* Sıra şeridi: üst şeridin ALTINA kendi satırına — masa ile çakışmaz */
  #game > #turn-row {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 34px 4px 0 !important;
    padding: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 30px !important;
    z-index: 50 !important;
  }
  #turn-row #tb-keystone,
  #turn-row #tb-keystone #rack-indicators {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }
  #turn-row #tb-keystone .indicator-box {
    width: 22px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    font-size: 13px !important;
  }
  #turn-row #tb-keystone .ind-cap { font-size: 8px !important; }
  #game > #turn-row #turn-banner {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    max-width: 52vw !important;
    padding: 0 4px 0 10px !important;
  }
  #game > #turn-row #turn-banner .tb-name { font-size: 11px !important; }
  #game > #turn-row #turn-banner .tb-timer {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }

  /* Orta alan: üstte sıra şeridi yer aldığı için ekstra üst boşluk gerekmez —
     üst kart çerçevenin üst kenarına oturur */
  #game > #middle {
    padding: 30px 0 4px !important;
    gap: 0 !important;
    grid-template-columns: var(--rd-side) minmax(0, 1fr) var(--rd-side) !important;
  }
  #middle > #opp-top,
  #middle > .opp-slot-top {
    top: 30px !important;
  }

  /* Yan raylar: kompakt profil + atılan taş */
  #table-rail-left,
  #table-rail { padding: 0 1px !important; }

  #game .opp-card,
  #game #opp-left .opp-card,
  #game #opp-right .opp-card {
    padding: 5px 3px !important;
    border-radius: 10px !important;
    gap: 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #game #opp-top .opp-card {
    padding: 4px 8px !important;
    border-radius: 10px !important;
    gap: 4px !important;
    width: auto !important;
  }
  #game .opp-card .avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  #game #opp-top .opp-card .avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }
  #game .opp-card .name {
    font-size: 9px !important;
    max-width: 52px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #game #opp-top .opp-card .name { max-width: 90px !important; }
  #game .opp-card .opp-count,
  #game .opp-card .tile-meta { font-size: 8px !important; }

  #game .opp-seat-layout-left,
  #game .opp-seat-layout-right { gap: 6px !important; }
  #game .opp-seat-layout-left .opp-profile-col,
  #game .opp-seat-layout-right .opp-profile-col { gap: 2px !important; }
  #game .opp-seat-layout-left .opp-profile-col > .opp-emote-btn,
  #game .opp-seat-layout-right .opp-profile-col > .opp-emote-btn {
    height: 20px !important;
    min-height: 20px !important;
    min-width: 22px !important;
    padding: 0 5px !important;
    font-size: 11px !important;
  }

  /* Atılan taş çerçeveleri — raya sığan boyut */
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 3px !important;
  }
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.seat-disc-tile,
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.discard-top,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.discard-top {
    width: 30px !important;
    min-width: 30px !important;
    height: 40px !important;
    font-size: 13px !important;
    flex: 0 0 30px !important;
    flex-basis: 30px !important;
  }
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard .mini-tile.discard-buried,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard .mini-tile.discard-buried {
    margin-right: -15px !important;
  }

  /* Ray içi "Atılan" paneli */
  #table-rail .discard-panel,
  #table-rail-left .discard-panel {
    top: calc(50% + clamp(88px, 13vh, 120px)) !important;
  }
  #table-rail .discard-panel .panel-caption,
  #table-rail-left .discard-panel .panel-caption { font-size: 7px !important; }
  #table-rail #discard-pile .mini-tile.discard-top,
  #table-rail-left #discard-pile-left .mini-tile.discard-top {
    width: 28px !important;
    height: 38px !important;
    font-size: 12px !important;
  }

  /* Orta çuha — dikeyde bol yer var */
  #game #center-board {
    border-width: 10px !important;
    border-radius: 20px !important;
    padding: 8px !important;
  }
  #game #opened-sets-area {
    gap: 5px !important;
    padding: 4px 2px !important;
  }
  #game #opened-sets-area .opened-owner-lane {
    padding: 22px 4px 4px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: flex-end !important;
  }
  #game #opened-sets-area .opened-owner-head {
    font-size: 8px !important;
    padding: 2px 7px !important;
    top: 1px !important;
    left: 4px !important;
  }

  /* Istaka — dikeyde daha uzun taşlar okunur */
  #rack-row {
    gap: 4px !important;
    padding: 2px 0 0 !important;
    margin-left: 2px !important;
    margin-right: 2px !important;
  }
  #rack-container .tile,
  #rack-section .tile {
    font-size: clamp(12px, 4.6vw, 17px) !important;
  }
  #rack-row > #rack-play-strip #actions .btn,
  #rack-play-me #actions .btn,
  #rack-play-me .rack-arrange-btn,
  #rack-diz-group .rack-arrange-btn {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 7px !important;
    font-size: 8px !important;
    border-radius: 7px !important;
  }
  #rack-diz-group .rack-arrange-btn .rack-arr-ico svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Kendi kartım — kompakt */
  #rack-body .self-card {
    padding: 4px 6px !important;
    gap: 4px !important;
    border-radius: 10px !important;
  }
  #rack-body .self-card .avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  #rack-body .self-card .name { font-size: 9px !important; }

  /* Deste / gösterge mini taşlar */
  .mini-tile {
    width: 26px !important;
    height: 36px !important;
    font-size: 12px !important;
  }
}

/* Çok dar telefonlar (≤380px genişlik) */
@media (orientation: portrait) and (max-width: 380px) {
  #game { --rd-side: 52px; --tile-h: 44px; }
  #game .opp-card .name { display: none !important; }
  #game .opp-seat-layout-left .seat-discard-mount > .seat-discard,
  #game .opp-seat-layout-right .seat-discard-mount > .seat-discard {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Portrait: aksiyon butonları ıstakanın ÜSTÜNDE yatay satır — sağa taşma yok */
@media (orientation: portrait) and (max-width: 1100px) {
  #rack-body {
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 2px 2px !important;
  }
  #rack-body > #rack-section {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  #rack-side-actions {
    order: -1 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: auto !important;
    gap: 5px !important;
    padding: 0 !important;
    z-index: 60 !important;
  }
  #rack-side-actions #actions,
  #rack-side-actions #actions .actions-primary,
  #rack-side-actions #actions .actions-social,
  #rack-side-actions .rack-arrange {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #rack-side-actions #actions .btn,
  #rack-side-actions .rack-arrange-btn {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
    justify-content: center !important;
  }
  /* Istaka üstü ipucu balonu çuhaya binmesin */
  #rack-row > #ux-tip {
    position: relative !important;
    margin: 0 4px 2px !important;
    max-width: 100% !important;
  }
}

/* Portrait sıkıştırma — ıstaka + butonlar viewport'a sığsın */
@media (orientation: portrait) and (max-width: 1100px) {
  #game { --tile-h: clamp(42px, 5.6vh, 54px); }

  /* İpucu balonu akıştan çıkar — ıstaka üstünde yüzen bubble */
  #rack-row > #ux-tip {
    position: absolute !important;
    bottom: calc(100% - 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    max-width: min(92vw, 420px) !important;
    z-index: 70 !important;
  }
  #rack-row { position: relative !important; }

  /* Aksiyon satırı tek satırda kaysın */
  #rack-side-actions #actions .btn,
  #rack-side-actions .rack-arrange-btn {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
    gap: 4px !important;
  }

  /* Play-strip sıkıştır */
  #rack-play-strip {
    min-height: 0 !important;
    padding: 2px 0 !important;
    gap: 5px !important;
  }
  #rack-body .self-card-wrap { align-self: center !important; }
  #rack-body .self-card {
    padding: 3px 6px !important;
    gap: 4px !important;
  }
  #rack-body .self-card .avatar {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }
  #rack-body .self-card .self-meta,
  #rack-body .self-card .rack-title { font-size: 8px !important; }
  #rack-body .self-card .chip-pill { font-size: 8px !important; padding: 1px 6px !important; }

  /* Istaka taşları */
  #rack-container .rack-row { height: calc(var(--tile-h) + 4px) !important; min-height: calc(var(--tile-h) + 4px) !important; }
  #rack-container { padding: 2px 1px 1px !important; gap: 1px !important; }
  #rack-container .tile { font-size: clamp(11px, 4.2vw, 15px) !important; }

  /* Orta alan üst boşluğu azalt */
  #game > #middle { padding-top: 26px !important; }
  #middle > #opp-top, #middle > .opp-slot-top { top: 26px !important; }
  #game > #turn-row { margin-top: 32px !important; min-height: 28px !important; }
}

/* ======================== 15) TAŞ RENK HARFLERİ — daha koyu, daha okunur ======================== */
#rack-container .tile .tile-label {
  font-weight: 900 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#rack-container .tile.color-Kırmızı .tile-label { color: #6E0B16 !important; }
#rack-container .tile.color-Mavi .tile-label    { color: #072B66 !important; }
#rack-container .tile.color-Sarı .tile-label    { color: #57380A !important; }
#rack-container .tile.color-Siyah .tile-label   { color: #000000 !important; }
#rack-container .tile.color-Yeşil .tile-label   { color: #0B3B11 !important; }
#rack-container .tile.sahte-tile .tile-label    { color: #8E2626 !important; }

/* Atılan taşlar da ıstakadaki gibi renk harfi gösterir (sayı üstte, harf altta) */
#game .mini-tile {
  flex-direction: column !important;
  justify-content: center !important;
}
#game .mini-tile .mini-tile-label {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-size: 0.34em !important;
  letter-spacing: 0.02em !important;
  margin-top: 1px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
#game .mini-tile.color-Kırmızı .mini-tile-label { color: #6E0B16 !important; }
#game .mini-tile.color-Mavi .mini-tile-label    { color: #072B66 !important; }
#game .mini-tile.color-Sarı .mini-tile-label    { color: #57380A !important; }
#game .mini-tile.color-Siyah .mini-tile-label   { color: #000000 !important; }
#game .mini-tile.color-Yeşil .mini-tile-label   { color: #0B3B11 !important; }
#game .mini-tile.sahte .mini-tile-label         { color: #8E2626 !important; }
#game .mini-tile.okey .mini-tile-label          { color: #1A1208 !important; }
/* Çok küçük mini taşlarda (gömülü/iz) harfi gizle — okunamaz olur */
#game .mini-tile.discard-buried .mini-tile-label,
#game .discard-trail .mini-tile .mini-tile-label { display: none !important; }

/* Açık setlerdeki okey: altın köşe yıldızı — sıradan taştan ayırt edilsin */
#opened-sets-area .mini-tile { position: relative !important; }
#opened-sets-area .mini-tile.okey::after {
  content: '★' !important;
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  font-size: 9px !important;
  line-height: 1 !important;
  color: #7a5a00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  pointer-events: none !important;
}
/* Açık set mini taşlarında etiket biraz daha büyük — OKEY/SAHTE okunsun */
#opened-sets-area .mini-tile .mini-tile-label { font-size: 0.42em !important; }
#opened-sets-area .mini-tile.sahte::after {
  content: 'S' !important;
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #8E2626 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  pointer-events: none !important;
}

/* ─── El sonucu: isim altında ceza açıklaması + birikimli toplam ─── */
.re-row { align-items: center !important; }
.re-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.re-detail {
  font-size: 10.5px; font-weight: 600; line-height: 1.35;
  color: rgba(233, 236, 245, 0.62);
  letter-spacing: 0.1px;
}
.re-row.winner .re-detail { color: rgba(255, 215, 0, 0.72); }
.re-row.me .re-detail { color: rgba(143, 212, 184, 0.85); }
.re-score-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  flex-shrink: 0;
}
.re-total {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.2px;
  color: rgba(233, 236, 245, 0.5); font-variant-numeric: tabular-nums;
}

/* ─── Giriş: 101 etrafındaki çember kaldırıldı — sade metin ─── */
#login-overlay .login-logo,
.login-logo {
  width: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
  margin-top: 2px !important;
  animation: none !important;
}
.login-logo-inner {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #FFD700 !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 3px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 18px rgba(255, 215, 0, 0.4), 0 6px 22px rgba(0, 0, 0, 0.5) !important;
}