/* ============================================================
   OKEY 101 — kıraathane teması
   Futbol yeşil kalır; okey kendi petrol mavisi dünyasına sahiptir.
   Tüm kurallar .okey-theme altına kapsanmıştır.
   ============================================================ */

.okey-theme {
  /* Tüm değerler tokens.css'ten türer; burada yalnızca okeye özel
     eşlemeler yapılır. Tek seferlik renk yazılmaz. */
  --wall: var(--teal-500);
  --wall-deep: var(--teal-600);
  /* Masa kenarı ile ıstaka AYNI ahşap — sahnede tek ağaç var. */
  --rail: var(--wood-500);
  --rail-dark: var(--wood-700);
  --felt: var(--ink-900);
  --felt-deep: var(--ink-950);
  --felt-line: rgba(255, 255, 255, 0.045);
  --wood: var(--wood-500);
  --wood-dark: var(--wood-700);
  --ivory: var(--ivory-100);
  --ink: var(--tile-ink);
  --gold: var(--gold-400);
  /* Taş ekranla büyür ama İKİ bütçeye birden uyar: yalnızca genişliğe
     bağlandığında alçak ekranlarda masa + ıstaka + düğme çubuğu sığmıyor,
     çubuk ekranın altında kalıyordu. Küçük olan hangisiyse o belirler. */
  /* Alt sınır 22: 34 iken kısa ekranda clamp yüksekliğe göre küçülmeyi
     ENGELLİYOR, masa + ıstaka + düğmeler sığmıyordu. */
  --tile-w: clamp(22px, min(3.9vw, 6.2vh), 68px);
  --rack-gap: 2px;

  padding: 0;
  gap: 0;
  justify-content: flex-start;
  font-family: var(--font);
  color: var(--text);
  /* Duvar: petrol mavisi + damask motifi (kıraathane duvar kâğıdı).
     Kimliğimiz bu; masa ise bilerek çok daha derin — fildişi taşlar
     ancak koyu bir zeminde patlar. */
  background:
    radial-gradient(ellipse at 50% -5%, rgba(255, 255, 255, 0.09), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M40 8c12 0 20 9 20 20s-9 18-20 18-20-7-20-18S28 8 40 8z'/%3E%3Cpath d='M40 46c9 0 15 7 15 15s-7 13-15 13-15-5-15-13 6-15 15-15z'/%3E%3Cpath d='M8 40c0-9 6-14 14-14M72 40c0-9-6-14-14-14'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(165deg, var(--wall) 0%, var(--wall-deep) 100%);
  background-size: auto, 80px 80px, auto;
}

/* Oda dikey olarak ekranı DOLDURUR: masa esnek çocuk, kalan her şey kendi
   boyunda. Eskiden hiçbir çocuk esnemediği için içerik yukarı yığılıyor,
   altta kocaman boşluk kalıyordu. Ekran çok kısaysa oda kayar (kırpılmaz). */
.okey-room {
  position: relative;
  width: 100%;
  /* Okey masasi genis ekrani KULLANIR: 1500px'lik sinir istakaya
     sigacak yuva sayisini kisitliyordu. Cok genis ekranda da kenarlarda
     bir miktar nefes payi kalsin diye vw ile sinirlanir. */
  max-width: min(98vw, 1900px);
  flex: 1 1 auto;
  margin: 0 auto;
  padding: var(--s3) var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-height: 0;
  overflow-y: auto;
}

/* ---------- üst şerit ---------- */
/* Masa DIŞINDAKİ her şey kendi boyunda kalır: yalnızca .okey-board esner.
   Aksi halde dikey alan kıtlaşınca ıstaka ve düğme çubuğu eziliyordu. */
.okey-hud,
.okey-band,
.okey-rack-wrap,
.okey-bar { flex: 0 0 auto; }

.okey-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.okey-hud-group { display: flex; align-items: center; gap: 8px; }
.okey-chip-coin { color: var(--gold); font-variant-numeric: tabular-nums; }

.okey-chip {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.okey-chip b { color: var(--text); }

/* Gösterge destenin yanında durur — gerçek oyunda da okeyi belirleyen taş
   destenin üstündedir. Üst barda dururken bildirimlerle çakışıyordu. */
.okey-gosterge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--s2) var(--s2) 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--gold-500);
  background: rgba(0, 0, 0, 0.3);
}
.okey-gosterge .okey-pile-label { color: var(--gold-300); }

/* Okey taşı: elin jokeri. Göstergeyle yan yana durur ki oyuncu "bir üstü"
   hesabını yapmak zorunda kalmasın; ★'ın hangi taş olduğu da buradan okunur. */
.okey-okeytile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--s2) var(--s2) 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--teal-400);
  background: rgba(0, 0, 0, 0.3);
}
.okey-okeytile .okey-pile-label { color: var(--teal-300); }

/* Gösterge → +1 → Okey. Bu bağ yazılmayınca "gösterge okey değil miydi?"
   sorusu çıkıyor; okey göstergenin BIR ÜSTÜDÜR (13'ün üstü aynı renkte 1). */
.okey-plus-one {
  align-self: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  padding: 0 1px;
}

.okey-clock {
  min-width: 62px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 10px;
}
.okey-clock.urgent {
  background: var(--bad-500);
  border-color: var(--bad-300);
  animation: okeyTick 1s steps(2) infinite;
}
@keyframes okeyTick { 50% { opacity: 0.5; } }

.okey-icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  background: var(--ink-800);
  color: var(--text);
  font-size: var(--fs-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.okey-icon-btn:hover { background: var(--ink-700); border-color: var(--teal-400); }
.okey-icon-btn:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.okey-icon-danger:hover { background: var(--bad-500); border-color: var(--bad-300); }
.okey-icon-off { opacity: 0.5; }

/* ---------- masa: turuncu kenar içinde çuha ---------- */
/* Masa kenarı: sıcak ama sakin. */
.okey-board {
  /* min-height VERİLMEZ: esnek kutuda varsayılan min-height:auto masayı
     içeriğinin altına sıkışmaktan korur. min-height:0 verildiğinde ızgara
     çuhanın dışına taşıp bantla ve ıstakayla üst üste biniyordu. Dar
     ekranda doğru davranış taşmak değil, odanın kaymasıdır. */
  flex: 1 1 auto;
  display: flex;
  background: linear-gradient(180deg, var(--rail), var(--rail-dark));
  border-radius: var(--r-xl);
  padding: var(--s2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    var(--e3);
}

/* Çuha: sahnenin en derin yüzeyi. Taşlar burada patlasın diye bilerek
   koyu ve sakin — ızgara yalnızca zar zor seziliyor. */
/* Çuha 3×3 ızgaradır: koltuklar kenar ortalarında, atılan taş yığınları
   köşelerde, deste ortada. Izgara mutlak konumdan hem daha doğru hem çok
   daha iyi ölçekleniyor — dar ekranda ayrı bir yerleşim yazmaya gerek yok. */
.okey-felt {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "lft tl top    tr rgt"
    "lft .  center .  rgt"
    "lft bl me     br rgt";
  place-items: center;
  gap: var(--s2);
  border-radius: var(--r-lg);
  min-height: 260px;
  padding: var(--s3);
  background:
    repeating-linear-gradient(0deg, var(--felt-line) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--felt-line) 0 1px, transparent 1px 28px),
    radial-gradient(ellipse at 50% 42%, var(--felt) 0%, var(--felt-deep) 78%);
  box-shadow: inset 0 2px 18px rgba(0, 0, 0, 0.6);
}

/* ---------- oyuncular: gerçek oturma düzeni ----------
   Yalnizca MASA ekraninda gecerlidir. Sinif adi ve kapsam bilincli:
   mutlak konumlu bir kutunun adi lobideki koltuk listesiyle
   cakisirsa ogeler ust uste biner (yasanmis hata). */
#screen-okey-game .okey-player-seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  min-width: 112px;
  font-size: var(--fs-sm);
  transition: border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
}
#screen-okey-game .okey-player-seat-top { grid-area: top; }
#screen-okey-game .okey-player-seat-left { grid-area: lft; }
#screen-okey-game .okey-player-seat-right { grid-area: rgt; }
#screen-okey-game .okey-player-seat-me { grid-area: me; }

/* Süre rozeti sıranın SAHİBİNDE durur. Sabit bir köşedeki sayaç "kimin
   süresi" sorusunu cevaplamıyordu — asıl şikâyet buydu. Dış halka kalan
   süreyi çizer, içteki disk saniyeyi taşır. */
.okey-seat-timer {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(var(--gold-300) calc(var(--p, 1) * 360deg),
                   rgba(0, 0, 0, 0.5) 0);
  box-shadow: 0 0 0 2px var(--ink-900), var(--e2);
}
.okey-seat-timer b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-400);
  color: var(--ink-950);
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.okey-seat-timer.urgent {
  background: conic-gradient(var(--bad-300) calc(var(--p, 1) * 360deg),
                             rgba(0, 0, 0, 0.5) 0);
}
.okey-seat-timer.urgent b { background: var(--bad-400); color: #fff; }
.okey-seat-timer[hidden] { display: none; }

/* Sıra durumu: altın halka. Altın bu oyunda YALNIZCA "sıra" ve "para"
   demek; başarı/uyarı için ayrı renkler var, karışmasın. */
#screen-okey-game .okey-player-seat.turn {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 1px var(--gold-400), 0 0 22px rgba(232, 184, 75, 0.28);
}
.okey-seat-name { font-weight: 700; }
.okey-seat-meta { color: var(--text-dim); font-size: var(--fs-xs); }
.okey-seat-open {
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 0.66rem;
  font-weight: 800;
}
/* ---------- ortadaki desteler ---------- */
.okey-center {
  grid-area: center;
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
}

/* ---------- ATILAN TAŞLAR ---------- */
/* Kutu yok, çerçeve yok: taş masanın üstünde duran fiziksel bir nesne gibi
   görünsün. Önceki hâlde kesikli çerçeveli küçük bir yuvaydı ve masadaki
   diğer her şeyle karışıyordu. */
.okey-throw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
}
.okey-throw-tl { grid-area: tl; }
.okey-throw-tr { grid-area: tr; }
.okey-throw-bl { grid-area: bl; }
.okey-throw-br { grid-area: br; }

.okey-throw-who {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  max-width: 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Atılan taş ıstakadakinden BÜYÜK: masadaki en önemli tek taş odur. */
.okey-throw-slot {
  --w: calc(var(--tile-w) * 1.1);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.42);
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.okey-throw-slot .okey-tile {
  --w: calc(var(--tile-w) * 1.1);
  box-shadow: var(--e2), 0 2px 0 rgba(0, 0, 0, 0.5);
}
/* "Yerden al" çağrısı taşın ÜSTÜNDE bir rozet: ayrı bir satır olduğunda
   masanın dikey bütçesini yiyor, alt düğme çubuğu kırpılıyordu. Yığın
   derinliği artık taşın title'ında. */
.okey-throw-foot {
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  color: var(--text-dim);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  box-shadow: var(--e1);
}
.okey-throw-foot:empty { display: none; }
/* Altın YALNIZCA eyleme ait: "bunu alabilirsin". Derinlik rozeti nötr. */
/* "İşle" çekmeden önce parlar: elinde işlenecek taş olduğunu karar anında
   söyler, yerden gereksiz taş alıp 101 ceza yememek için. */
.okey-btn.ready-hint {
  box-shadow: 0 0 0 2px var(--gold-400), 0 0 18px rgba(232, 184, 75, 0.35);
}

/* Yerden alınacak taş işine YARIYORSA halka yeşile döner: altın "senin
   sıran", yeşil "bu iyi bir hamle" demek. */
.okey-throw.can-take.useful .okey-throw-slot {
  box-shadow: 0 0 0 3px var(--ok-400), 0 0 26px rgba(70, 192, 125, 0.4);
}
.okey-throw.can-take.useful .okey-throw-foot {
  background: var(--ok-400);
  color: #06210f;
}

.okey-throw.can-take .okey-throw-foot {
  color: var(--ink-950);
  background: var(--gold-400);
  border-color: transparent;
}
/* Boş yığın: yalnızca yerini belli eden soluk bir iz */
.okey-throw.empty .okey-throw-slot {
  border: 1px dashed var(--ink-600);
  opacity: 0.45;
}
.okey-throw.empty .okey-throw-who { opacity: 0.45; }

/* Yerden alınabilecek TEK yığın: soldakinin bana attıkları. Altın halka
   burada "senin sıran, bu senin" demek. */
.okey-throw-bl { cursor: default; }
.okey-throw.can-take { cursor: pointer; }
.okey-throw.can-take .okey-throw-slot {
  box-shadow: 0 0 0 3px var(--gold-400), 0 0 26px rgba(232, 184, 75, 0.4);
  animation: okeyTakePulse 1.6s ease-in-out infinite;
}

.okey-throw.can-take:hover .okey-throw-slot { box-shadow: 0 0 0 4px var(--gold-300); }

/* Taşı buraya sürüklemek = taşı atmak. Kendi yığınım hedef olur, rakiplerinki
   olmaz — oraya taş bırakmak diye bir hamle yok. */
.okey-throw-br .okey-throw-slot { transition: box-shadow var(--t-fast) var(--ease); }
.okey-throw-br.throw-target .okey-throw-slot {
  box-shadow: 0 0 0 3px var(--bad-400), 0 0 24px rgba(217, 83, 79, 0.45);
}
.okey-throw-br.throw-target::after {
  content: 'BIRAK = AT';
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  color: #fff;
  background: var(--bad-400);
}
.okey-throw-br { position: relative; }
.okey-throw-bl:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 4px; }
@keyframes okeyTakePulse {
  50% { box-shadow: 0 0 0 3px var(--gold-300), 0 0 34px rgba(232, 184, 75, 0.6); }
}

.okey-pile {
  width: 82px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: transform 120ms ease, border-color 120ms ease;
}
.okey-pile:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); }
.okey-pile:disabled { opacity: 0.42; cursor: not-allowed; }
.okey-pile-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.okey-pile-stock b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
/* Kapalı deste: üst üste yığılmış taş sırtı */
.okey-pile-cap {
  width: 34px; height: 46px;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--teal-500), var(--teal-600));
  box-shadow: 3px -3px 0 -1px #235f78, 6px -6px 0 -2px #1d5068,
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* ---------- yerdeki perler: kendi bandi ----------
   Perler cuhanin icindeyken cogaldikca desteyi, koltuklari ve birbirini
   eziyordu (yasanmis hata). Kendi bandinda buyur, kaydirilir, hicbir seyi
   ortmez. */
.okey-band {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-md);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  min-height: 58px;
}
.okey-band-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  writing-mode: horizontal-tb;
  max-width: 74px;
  line-height: 1.2;
}
.okey-melds {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
  max-height: 122px;
  overflow-y: auto;
}
/* Her per artık kimin açtığını ve kaç puan olduğunu söyler: masada beş per
   varken hangisinin kime ait olduğu okunmuyordu. */
.okey-meld-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.okey-meld-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0 4px;
  font-size: var(--fs-xs);
  line-height: 1.2;
}
.okey-meld-owner {
  color: var(--text-dim);
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.okey-meld-owner.mine { color: var(--gold-300); }
.okey-meld-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.okey-meld {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.okey-meld:hover { border-color: var(--gold); }
/* Taş sürüklenirken üstüne gelinen per: buraya bırakılırsa işlem yapılır */
.okey-meld.meld-target {
  border-color: var(--gold);
  background: rgba(232, 184, 75, 0.22);
  box-shadow: 0 0 0 2px var(--gold);
}
/* Çift: işlem yapılamaz — hedef gibi görünmesin */
/* Çift: taş EKLENEMEZ (okey çalmak ayrı bir hamle, "Okey Al" düğmesiyle) */
.okey-meld-locked {
  opacity: 0.9;
  border-style: dashed;
  cursor: not-allowed;
}
.okey-meld-locked:hover { border-color: var(--ink-600); }

.okey-melds-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.8rem;
}

/* ---------- TAŞ: fildişi gövde + alttaki çukur ---------- */
.okey-tile {
  --w: var(--tile-w);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.42);
  border-radius: 5px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(var(--w) * 0.22);
  font-weight: 800;
  font-size: calc(var(--w) * 0.56);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: linear-gradient(180deg,
    var(--ivory-50) 0%, var(--ivory-100) 46%, var(--ivory-200) 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 3px rgba(120, 100, 60, 0.32),
    var(--e1);
  user-select: none;
  touch-action: none;
}
/* Gerçek okey taşındaki alt çukur — taşı karttan ayıran detay */
.okey-tile::after {
  content: '';
  position: absolute;
  bottom: calc(var(--w) * 0.1);
  width: calc(var(--w) * 0.17);
  height: calc(var(--w) * 0.17);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--ivory-200), #a2977b);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}
.okey-tile-sm { --w: calc(var(--tile-w) * 0.68); }

.okey-c-r { color: var(--tile-red); }
.okey-c-y { color: var(--tile-yellow); }
.okey-c-b { color: var(--tile-blue); }
.okey-c-k { color: var(--tile-black); }
.okey-fake { color: var(--tile-joker); }
/* Istakadaki OKEY taşı ters durur — gerçek masada da oyuncular okeyi
   ıstakada ters çevirir: hem gözden kaçmaz hem yanlışlıkla atılmaz.
   Sürüklenirken düz döner (taş gövdeden ayrılınca dönmesi kafa karıştırıyor). */
.okey-rack .okey-tile.okey-joker {
  transform: rotate(180deg);
}
.okey-rack .okey-tile.okey-joker::after { bottom: auto; top: calc(var(--w) * 0.1); }

/* Sahte okey: okey taşının yüzünü taşır, köşedeki ★ sahte olduğunu söyler.
   Joker değildir — bu yüzden jokerin altın halkasını ALMAZ. */
.okey-fake-as::before {
  content: '±8';  /* ☘ yonca — sahte okeyin işareti */
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: calc(var(--w) * 0.3);
  line-height: 1;
  color: var(--tile-joker);
}

/* İki işaret, iki anlam:
     ★ (altın, sağ üst) = GERÇEK okey taşı, joker olarak kullanılıyor
     ☘ (mor, sol üst)   = SAHTE okey, okey taşının yerine geçiyor
   Aynı sembolü paylaşsalardı hangisinin joker olduğu okunmazdı. */
.okey-joker-as { color: var(--tile-joker); }
.okey-joker-as::after {
  content: '★';
  position: absolute;
  top: 1px;
  right: 2px;
  bottom: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: calc(var(--w) * 0.3);
  line-height: 1;
  color: var(--gold-500);
}

/* Yerden alınan ve açılmazsa geri atılması gereken taş */
.okey-tile.must-discard {
  box-shadow: 0 0 0 2px var(--bad-400), var(--e1);
}

.okey-joker::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 3px;
  border: 1.5px solid rgba(232, 184, 75, 0.85);
  pointer-events: none;
}

/* ---------- tur süresi çubuğu ----------
   Sayı tek başına gözden kaçıyordu ("yanlış taş atıldı" şikâyetinin
   kaynağı süre dolunca sunucunun oynamasıydı). Çubuk uzaktan görünür. */
.okey-timebar {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.okey-timebar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ok-400), var(--gold));
  transform-origin: left center;
  transition: transform 240ms linear, background 240ms linear;
}
.okey-timebar-fill.mine { background: linear-gradient(90deg, var(--gold), var(--gold-300)); }
.okey-timebar-fill.urgent { background: linear-gradient(90deg, var(--bad-400), var(--bad-300)); }

/* ---------- ıstaka ölçeği: 101 ve 5 çift göstergesi ---------- */
.okey-rack-wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--s3);
  width: 100%;
}
/* Ölçek paneli: Altınstar'ın en iyi fikri, sistemle yeniden kurulmuş.
   Oyuncunun tek bakışta "açabilir miyim" sorusunu cevaplar. */
.okey-meter {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  min-width: 108px;
}
.okey-meter-row { display: flex; flex-direction: column; gap: 1px; }
.okey-meter-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}
.okey-meter-value { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.okey-meter-value b { font-size: 1.1rem; }
/* Şart sağlandığında yeşile döner: "artık açabilirsin" tek bakışta okunur */
/* Şart sağlandı: yeşil = "başarılı/hazır". Altınla karıştırılmaz. */
.okey-meter-row.ready .okey-meter-value b { color: var(--ok-400); }
.okey-meter-row.ready .okey-meter-label { color: var(--ok-400); }

/* ---------- grup rozetleri ----------
   Yan yana duran taşlar bir gruptur; altındaki rozet o grubun puanını
   söyler. Oyuncu 101'i gözüyle takip edebilsin diye. */
.okey-badges {
  display: flex;
  gap: var(--rack-gap);
  width: max-content;
  margin: 0 auto;
  padding: 0 0 2px;
  min-height: 15px;
}
.okey-badge {
  height: 13px;
  border-radius: 0 0 5px 5px;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #3a2a08;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-400));
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.okey-badge-pair {
  background: linear-gradient(180deg, var(--violet-200), var(--violet-300));
  color: #241a3a;
}
/* Geçersiz blok: rozet yok, ince kırmızı iz — "burada per yok" */
.okey-badge-bad {
  height: 3px;
  align-self: start;
  border-radius: 999px;
  background: rgba(214, 69, 69, 0.55);
  box-shadow: none;
}
.okey-badge-gap { visibility: hidden; }

/* ---------- İZLEYİCİ MODU ---------- */
/* Izlerken el yoktur: istaka, olcek, cekilen tas ve hamle dugmeleri hic
   gorunmez. Masa ve sohbet kalir. */
/* İzlerken hamle yüzeyi yoktur; ıstaka ise seçilen oyuncunun eli olarak
   SALT OKUNUR gösterilir (koltuk seçilmemişse JS onu gizler). */
#screen-okey-game.okey-watching .okey-bar,
#screen-okey-game.okey-watching .okey-meter,
#screen-okey-game.okey-watching .okey-hint { display: none; }
#screen-okey-game.okey-watching .okey-slot { cursor: default; }
#screen-okey-game.okey-watching .okey-tile { cursor: default; touch-action: auto; }

/* İzleyici koltuk seçebilir: kart tıklanabilir, seçili olan altın halkalı */
#screen-okey-game .okey-player-seat.watch-pick { cursor: pointer; }
#screen-okey-game .okey-player-seat.watch-pick:hover { border-color: var(--teal-300); }
#screen-okey-game .okey-player-seat.watched {
  border-color: var(--gold-400);
  box-shadow: 0 0 0 1px var(--gold-400);
}

.okey-watch-seat {
  align-self: center;
  padding: 3px var(--s3);
  border-radius: var(--r-pill);
  background: var(--ink-800);
  border: 1px solid var(--teal-400);
  color: var(--teal-300);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
}
#screen-okey-game.okey-watching .okey-board { flex: 1 1 auto; }
#screen-okey-game.okey-watching .okey-hud::after {
  content: '👁 İZLİYORSUN';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--track-wide);
  color: var(--ink-950);
  background: var(--teal-300);
}
#screen-okey-game.okey-watching .okey-hud { position: relative; }

/* Masa kurma ekranindaki mod aciklamasi */
.okey-mode-note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-faint);
}

/* Izlenebilir masa satiri: katilinamaz, izlenebilir */
.okey-table-live .okey-btn-watch {
  background: var(--teal-500);
  color: var(--text);
  border: 1px solid var(--teal-300);
}

/* ---------- SOHBET BİLDİRİMİ (sağ üst) ---------- */
/* Gelen mesaj kısa süre sağ üstte görünür; mesajın kendisi sohbet
   kaydında KALIR. Panel kapalıyken de konuşma takip edilebilsin diye. */
.okey-chat-pop {
  position: fixed;
  top: 64px;
  right: 12px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  pointer-events: none;
  max-width: min(46vw, 320px);
}
.okey-chat-pop-item {
  padding: 6px var(--s3);
  border-radius: var(--r-md);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  box-shadow: var(--e2);
  font-size: var(--fs-sm);
  color: var(--text);
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.okey-chat-pop-item b { color: var(--gold-300); margin-right: 6px; }
.okey-chat-pop-item.out { opacity: 0; transform: translateX(16px); }

/* Sistem satırı: oyuncu mesajı değil, masada olan biten */
.okey-chat-sys {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-style: italic;
  border-left: 2px solid var(--teal-400);
  padding-left: 6px;
  margin: 2px 0;
}

/* Kapalı taş: izleyicinin gördüğü ıstaka. Fildişi yüz yok — destenin
   sırtıyla aynı malzeme, böylece "burada bir taş var ama görünmüyor"
   okunuyor. */
.okey-tile.okey-tile-back {
  background: linear-gradient(160deg, var(--teal-500), var(--teal-600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35), var(--e1);
}
.okey-tile.okey-tile-back::after { display: none; }

/* ---------- ELDE TUTULAN TAŞ ---------- */
/* Çekilen taş imleci/parmağı izler; ıstakada yerini oyuncu seçer.
   Önceki hâli masanın ortasında etiketli kocaman bir paneldi ve masayı
   örtüyordu — oysa istenen "taşı eline almış olmak". */
.okey-tile.okey-held {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--gold-400);
}
/* Havadaki taş varken boş yuvalar hedef olduklarını belli eder */
.okey-slot.can-place {
  box-shadow: inset 0 0 0 2px rgba(232, 184, 75, 0.45);
  cursor: pointer;
}

/* ---------- GRUP SÜRÜKLEME ---------- */
/* Grubun ilk taşından tutulunca grubun TAMAMI hareket eder; tek taş uçarken
   arkasındakilerin de geldiği görünmüyordu. */
.okey-drag-group {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  display: flex;
  gap: var(--rack-gap);
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.6));
}
/* Taşınırken ıstakadaki asılları soluklaşır: aynı taş iki yerde durmasın */
.okey-tile.okey-tile-lifted { opacity: 0.25; }

/* ---------- ISTAKA (imza öğe) ---------- */
.okey-rack {
  position: relative;
  /* min-width:0 ŞART: esnek kutuda varsayılan min-width:auto, ıstakanın
     13 yuvalık iç genişliğini tüm sayfaya dayatıyor ve dar ekranda masa
     da düğmeler de sağdan taşıyordu. Sıfırlanınca overflow-x devreye
     girer ve yalnızca ıstaka kayar. */
  min-width: 0;
  /* Istaka mevcut genişliği DOLDURUR: dar bir tahta üzerinde 21 taşı
     gruplayacak yer kalmıyordu. Yuvalar ortalanır, kenarlarda ahşap kalır. */
  flex: 1 1 auto;
  border-radius: 12px 12px 14px 14px;
  padding: 9px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* Ahşap: damar çizgileri + dikey ışık geçişi */
  background:
    repeating-linear-gradient(92deg,
      rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(88deg,
      rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, var(--wood-400) 0%, var(--wood) 26%, #8a5a22 72%, var(--wood-dark) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -4px 0 rgba(0, 0, 0, 0.38),
    var(--e3);
}
.okey-rack .okey-tile { --w: var(--rack-tile-w, var(--tile-w)); }
.okey-rack-row {
  display: flex;
  gap: var(--rack-gap);
  padding: 5px 0;
  width: max-content;
  margin: 0 auto;
}
/* Sıraları ayıran freze kanalı: iki katlı ıstaka hissi */
.okey-rack-lip {
  height: 7px;
  margin: 1px 0;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.18));
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.55);
}

/* Istaka kendi taş ölçüsünü kullanır (--rack-tile-w): yuvalar ıstakayı tam
   doldurur, iki yanda ahşap boşluk kalmaz. Değişken yoksa masadaki ölçüye
   düşer. Masadaki taşlar --tile-w ile kalır — oranları çuhanın dikey
   bütçesine bağlı. */
.okey-slot {
  width: var(--rack-tile-w, var(--tile-w));
  height: calc(var(--rack-tile-w, var(--tile-w)) * 1.42);
  border-radius: 5px;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45);
}
.okey-slot.drop-target {
  background: rgba(232, 184, 75, 0.28);
  box-shadow: inset 0 0 0 2px var(--gold);
}

.okey-tile[data-draggable] { cursor: grab; }
.okey-tile.selected {
  transform: translateY(-9px);
  box-shadow: 0 0 0 2px var(--gold), 0 10px 14px rgba(0, 0, 0, 0.55);
}
.okey-tile.dragging {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.6);
}

/* ---------- açılmayı bekleyen perler ---------- */
.okey-staging {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.26);
  border: 1px dashed var(--gold);
}
.okey-staging-label,
.okey-staging-total {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}
#okey-staged { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- eylem çubuğu ---------- */
.okey-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
/* Düğmeler: tek gövde, durum rengiyle ayrışır. Eskiden her düğme kendi
   degrade'ini taşıyordu ve sistem yoktu. */
.okey-btn {
  padding: var(--s3) var(--s5);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  background: var(--ink-700);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.okey-btn:hover:not(:disabled) { border-color: var(--teal-300); }
.okey-btn:active:not(:disabled) { transform: translateY(1px); }
.okey-btn:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.okey-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.okey-btn-go {
  background: linear-gradient(180deg, var(--ok-400), #1d7a4a);
  border-color: transparent;
  color: #06210f;
}
.okey-btn-throw {
  background: linear-gradient(180deg, var(--bad-400), #8d3527);
  border-color: transparent;
}
/* Okey Al: nadir ve değerli bir hamle — altın, çünkü "senin" demek. */
.okey-btn-steal {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border-color: transparent;
  color: var(--ink-950);
}

/* İşle: yerdeki perlere ekleme. Açmakla aynı aile değil — kendi rengi var. */
.okey-btn-lay {
  background: linear-gradient(180deg, var(--teal-400), var(--teal-600));
  border-color: transparent;
}
.okey-btn-undo {
  background: linear-gradient(180deg, #6b5a8f, #3f3459);
  border-color: var(--violet-300);
}

/* Sıra sana geldiğinde: kaçırılmayacak ama yolu kapatmayan bir bildirim */
/* Geçici bir bildirim masanın yüksekliğinden pay ALMAMALI: akışta
   dururken her göründüğünde tüm yerleşimi aşağı itiyordu. */
.okey-turn-banner {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  padding: 8px 26px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-300), var(--gold));
  box-shadow: 0 6px 18px rgba(232, 184, 75, 0.4);
  animation: okeyTurnIn 320ms ease-out;
}
@keyframes okeyTurnIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .okey-turn-banner { animation: none; } }

.okey-hint {
  text-align: center;
  min-height: 1.2em;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ---------- sohbet ---------- */
.okey-chat {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(320px, 86vw);
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: rgba(9, 42, 57, 0.97);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.45);
}
.okey-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.okey-chat-log {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
}
.okey-chat-log li { line-height: 1.35; }
.okey-chat-from { color: var(--gold); font-weight: 700; margin-right: 5px; }
.okey-chat-form { display: flex; gap: 6px; padding: 10px; }
.okey-chat-form input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
}
.okey-chat-badge {
  position: absolute;
  top: -3px; right: -3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
#btn-okey-chat { position: relative; }

/* ---------- lobi (aynı tema) ----------
   Futbolun .lobby-grid'i 1100px ustunde UC sutuna doner (lider listesi icin).
   Okeyin iki paneli o gride girince dar ve sola kayik kaliyordu; okey kendi
   gridini kullanir. */
#screen-okey-lobby.okey-theme { justify-content: flex-start; overflow-y: auto; }
.okey-lobby-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.okey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: min(860px, 100%);
  align-items: start;
}
.okey-hintline { font-size: var(--fs-xs); color: var(--text-dim); margin-top: -4px; }
#okey-waiting { width: min(620px, 100%); }
#screen-okey-lobby .lobby-header { flex-wrap: wrap; justify-content: center; }
#screen-okey-lobby.okey-theme .panel {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.okey-seats { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
@media (max-width: 560px) { .okey-seats { grid-template-columns: 1fr; } }
.okey-seat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 10px 14px;
}
.okey-seat-row.self { border-color: var(--gold); }
.okey-seat-bot { color: var(--text-dim); }

/* ---------- maç sonu ---------- */
#screen-okey-result { justify-content: center; }
.okey-result {
  width: min(460px, 100%);
  margin: 0 auto;
  padding: 26px 24px 22px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(9, 42, 57, 0.94), rgba(6, 30, 42, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.okey-result-icon { font-size: 2.6rem; line-height: 1; }
.okey-result-title { font-size: 1.7rem; }
.okey-result-coins {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.okey-result-coins.loss { color: var(--bad-300); }
.okey-result-note { color: var(--text-dim); font-size: var(--fs-sm); }
.okey-result .okey-score { margin: 6px 0 4px; }
.okey-result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- el sonu tablosu ---------- */
.okey-score { width: 100%; border-collapse: collapse; margin: 12px 0; }
.okey-score td { padding: 7px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.okey-score td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.okey-score-good { color: var(--ok-300); font-weight: 700; }
.okey-score-bad { color: var(--bad-300); }

/* ---------- mobil ----------
   Dar ekranda çuhanın mutlak konumlu oturma düzeni sıkışıyor: koltuklar
   akışa döner (üstte tek sıra), desteler altına gelir. Istaka 13 yuvalı
   kalır ve yatay kaydırılır — taşlarda touch-action:none olduğu için
   taşı sürüklemek ıstakayı kaydırmaz. */
/* DUYARLILIK. Izgara yerleşimi dar ekranda da geçerli kalır — masa
   düzeni bozulmadan küçülür. Değişen tek şey ölçüler. */
@media (max-width: 900px) {
  .okey-theme { --tile-w: clamp(30px, 5.2vw, 44px); }
  .okey-room { padding: 8px 10px 14px; gap: 8px; }
  .okey-felt { padding: 8px; gap: 4px; min-height: 200px; }
  .okey-center { gap: var(--s3); }
  .okey-pile { width: 72px; }
  .okey-band { min-height: 52px; }
  #screen-okey-game .okey-player-seat { min-width: 0; padding: 5px 8px; }
  .okey-throw { padding: 5px; min-width: 0; }
}

@media (max-width: 720px) {
  /* Dar ekranda 5 sütun sığmıyordu (sağ koltuk ekran dışına taşıyordu).
     Üç sütun: koltuklar üstte yan yana, kendi kartım altta, atılan taşlar
     merkezin dört köşesinde. */
  #screen-okey-game .okey-felt {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "lft top    rgt"
      "tl  center tr"
      "bl  me     br";
  }
  #screen-okey-game .okey-player-seat { min-width: 0; max-width: 34vw; }
  .okey-throw-who { max-width: 8ch; font-size: 0.62rem; }
  /* Derinlik rozeti gider, eylem rozeti KALIR: mobilde en kritik ipucu o */
  .okey-throw-foot { display: none; }
  .okey-throw.can-take .okey-throw-foot { display: block; }
  .okey-seat-meta { font-size: 0.68rem; }
  .okey-hud { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .okey-gosterge .okey-pile-label { display: none; }
}

@media (max-width: 560px) {
  .okey-theme { --tile-w: clamp(26px, 6.4vw, 34px); }
  /* Düğmeler üç satıra taşıyordu: iki satırda kalsınlar */
  .okey-bar { gap: 5px; }
  .okey-btn { padding: 8px 10px; font-size: 0.8rem; flex: 1 1 28%; }
  .okey-hint { font-size: 0.7rem; }
  .okey-rack { padding: 8px 6px 10px; }
  .okey-theme { --rack-gap: 1px; }
  .okey-band { flex-direction: column; align-items: stretch; gap: 6px; }
  /* Ölçek dikeyde YER YEMESIN: ıstakanın yanında kalır, sadece daralır. */
  .okey-rack-wrap { flex-direction: row; gap: 6px; align-items: center; }
  .okey-meter {
    flex-direction: column; gap: 2px; padding: 4px 6px; min-width: 0;
  }
  .okey-meter-row { display: flex; align-items: baseline; gap: 4px; }
  .okey-meter-label { font-size: 0.55rem; }
  .okey-band-label { max-width: none; }
  .okey-melds { max-height: 96px; }
  .okey-seats { grid-template-columns: 1fr; }
  .okey-pile { width: 64px; padding: 6px 4px; }
  .okey-pile-cap { width: 28px; height: 38px; }
  /* Dokunma hedefleri küçülmesin */
  .okey-btn { padding: 12px 16px; font-size: 0.9rem; flex: 1 1 40%; }
  .okey-bar { gap: 6px; }
  .okey-icon-btn { width: 38px; height: 38px; }
  .okey-chat { width: 100%; }
  .okey-turn-banner { padding: 7px 18px; font-size: 0.9rem; }
}

/* Çok dar telefon: ıstaka 13 yuvayla taşar, yatay kaydırma devreye girer */
@media (max-width: 400px) {
  .okey-theme { --tile-w: 25px; }
  .okey-room { padding: 6px 6px 12px; }
  #screen-okey-game .okey-player-seat { padding: 4px 5px; font-size: 0.68rem; }
}

/* Alçak laptop (kullanılabilir yükseklik ~700px altı): taşın yükseklik
   terimi kısılır. Ölçüldü — 6.2vh ile 617px'lik bir görüntü alanında masa
   + ıstaka + düğmeler sığmıyordu. */
@media (max-height: 700px) and (orientation: landscape) {
  .okey-theme { --tile-w: clamp(22px, min(3.9vw, 4.9vh), 44px); }
  .okey-hint { display: none; }
  .okey-room { gap: var(--s1); padding: var(--s1) var(--s3) var(--s2); }
  .okey-band { padding: 1px var(--s3); }
  .okey-rack { padding: 4px 6px 6px; }
  .okey-btn { padding: 6px 14px; }
}

/* ALÇAK EKRAN. 1080p bir tarayıcıda kullanılabilir yükseklik ~850px'e
   iner; sabit giderler (üst şerit, bant, düğme çubuğu, aralıklar) o
   bütçenin dörtte birini yiyordu ve çubuk ekranın altında kalıyordu.
   Burada yalnızca boşluklar kısılır — hiçbir bilgi gizlenmez. */
@media (max-height: 880px) {
  .okey-room { gap: var(--s2); padding: var(--s2) var(--s3) var(--s3); }
  .okey-band { padding: 2px var(--s3); }
  .okey-band-label { font-size: 0.62rem; }
  .okey-rack { padding: 6px 8px 8px; }
  .okey-btn { padding: var(--s2) var(--s4); }
  .okey-felt { padding: var(--s2); gap: var(--s1); }
  .okey-board { padding: 6px; }
  .okey-turn-banner { top: 44px; }
}

/* YATAY TELEFON. Oyuncuların çoğu oyunu böyle açıyor ve dikey alan en kıt
   burada: ~375px'e masa + yerdeki perler + iki sıralı ıstaka + düğme çubuğu
   sığmalı. Ölçüm olmadan yazılamaz; scripts/okey-gorsel.mjs bu boyutu
   ölçer. Hiçbir bilgi gizlenmez, yalnızca boşluklar ve etiketler kısılır. */
@media (max-height: 560px) and (orientation: landscape) {
  /* Taş boyu burada YÜKSEKLİĞE bağlanır. max-width:900px kuralı ölçüyü
     yalnızca genişlikten veriyordu (5.2vw → 42px) ve 379px'lik bir ekranda
     masayı taşırıyordu. Yatay telefonda kıt olan genişlik değil yükseklik. */
  .okey-theme { --tile-w: clamp(20px, 5.4vh, 34px); --rack-gap: 1px; }
  .okey-room { gap: 2px; padding: 1px 6px 3px; }
  .okey-hint { display: none; }
  .okey-board { padding: 4px; }
  .okey-felt { min-height: 0; padding: 4px; gap: 2px; }

  /* Üst şerit inceltilir */
  .okey-hud { gap: 6px; }
  .okey-chip { padding: 1px var(--s2); font-size: 0.66rem; }
  .okey-icon-btn { width: 28px; height: 28px; font-size: 0.8rem; }
  .okey-timebar { height: 3px; }

  /* Koltuklar ve atılan taşlar: yalnızca gerekli olan */
  #screen-okey-game .okey-player-seat { padding: 2px 6px; font-size: 0.64rem; }
  .okey-seat-meta { font-size: 0.58rem; }
  .okey-seat-timer { width: 28px; height: 28px; top: -10px; right: -10px; }
  .okey-seat-timer b { width: 21px; height: 21px; font-size: 0.62rem; }
  .okey-throw-who, .okey-throw-foot { display: none; }
  .okey-throw.can-take .okey-throw-foot { display: none; }
  .okey-pile { width: 42px; padding: 2px; gap: 1px; }
  .okey-pile-cap { width: 18px; height: 22px; }
  .okey-pile-label { font-size: 0.5rem; }
  .okey-gosterge, .okey-okeytile { padding: 2px 3px 3px; gap: 1px; }
  .okey-center { gap: var(--s2); }
  /* Koltuk kartı tek satıra iner: ad + skor yeter, taş sayısı zaten gizli */
  #screen-okey-game .okey-player-seat { flex-direction: row; gap: 4px; align-items: baseline; }
  .okey-seat-open { font-size: 0.5rem; padding: 0 4px; }

  /* Yerdeki perler: tek satır, kaydırılır */
  .okey-band { min-height: 0; padding: 1px var(--s2); gap: var(--s2); }
  .okey-band-label { display: none; }
  .okey-meld-wrap { gap: 0; }
  .okey-melds { max-height: none; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .okey-meld-head { font-size: 0.55rem; padding: 0 2px; }

  /* Ölçek panelden şeride: dikeyde yer yemesin */
  .okey-rack-wrap { gap: var(--s2); }
  .okey-meter { flex-direction: row; gap: var(--s2); padding: 2px var(--s2); min-width: 0; }
  .okey-meter-row { display: flex; align-items: baseline; gap: 3px; }
  .okey-meter-label { font-size: 0.55rem; }
  .okey-rack { padding: 3px 5px 5px; }
  .okey-rack-row { padding: 2px 0; }
  .okey-rack-lip { height: 4px; margin: 0; }
  .okey-badges { height: 9px; }
  .okey-badge { font-size: 0.5rem; }

  /* Düğmeler tek satırda kalsın */
  .okey-bar { gap: 4px; }
  .okey-btn { padding: 4px 9px; font-size: 0.72rem; flex: 0 0 auto; }
  .okey-chat-pop { top: 40px; right: 8px; max-width: 40vw; }
  .okey-chat-pop-item { padding: 3px var(--s2); font-size: 0.68rem; }
  .okey-turn-banner { top: 30px; padding: 4px 14px; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .okey-clock.urgent { animation: none; }
  .okey-pile, .okey-tile { transition: none; }
}