/* ============================================================
 * OKEY - Stiller
 * ============================================================ */

:root {
  --felt: #2280a8;
  --felt-dark: #134f6b;
  --wood: #7e4f26;
  --wood-light: #c8893f;
  --tile-bg: #f4ecd8;
  --tile-edge: #d8cba8;
  --red: #c62828;
  --black: #1a1a1a;
  --blue: #1565c0;
  --yellow: #e6a700;
  --gold: #e8c25a;
  --ink: #20303a;
  --shadow: rgba(0, 0, 0, 0.35);

  /* Motion (Emil Kowalski prensipleri) — tek bir easing sözlüğü */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* varsayılan: giriş/hareket */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* hafif yay — buton/toggle */
}

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

html, body {
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

body {
  background: radial-gradient(circle at 50% 30%, #1d6f93, #0c3850);
}

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* ---------------- Menü ---------------- */
.menu {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 25%, #2280a8, #0b3247);
}
.menu-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 40px 36px;
  width: min(92vw, 420px);
  text-align: center;
  box-shadow: 0 20px 60px var(--shadow);
  backdrop-filter: blur(6px);
}
.logo {
  font-size: 64px; letter-spacing: 8px; font-weight: 800;
  color: var(--gold);
  text-shadow: 0 3px 0 #00000055, 0 0 24px #e8c25a55;
}
.tagline { opacity: 0.8; margin: 4px 0 28px; }
.menu-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
/* Günlük bonus butonu — dikkat çekici altın + nabız */
.btn.bonus-btn { width: 100%; margin-top: 12px; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffd86b, #e0a020); color: #3a2600;
  box-shadow: 0 4px 16px rgba(232,194,90,.5); animation: bonusPulse 1.8s ease-in-out infinite; }
.btn.bonus-btn .btn-title { color: #3a2600; }
@keyframes bonusPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  background: linear-gradient(180deg, #1e8a52, #14633a);
  color: #fff; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 14px 18px; cursor: pointer;
  font: inherit; text-align: left;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: linear-gradient(180deg, var(--gold), #c79a32); color: #2a1d00; }
.btn.ghost { background: rgba(255,255,255,0.08); }
.btn.small { flex-direction: row; padding: 10px 16px; align-items: center; }
.btn-title { font-weight: 700; font-size: 17px; }
.btn-sub { font-size: 12px; opacity: 0.8; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.link-btn {
  background: none; border: none; color: #cfe; cursor: pointer;
  margin-top: 20px; text-decoration: underline; font: inherit; opacity: .8;
}

/* ---------------- Oyun Masası ---------------- */
.game { background: radial-gradient(circle at 50% 40%, var(--felt), var(--felt-dark)); }
.table {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 10px;
}

/* Rakipler — ıstaka SABİT yön; sadece avatar+isim (op-head) döner */
.opponent { position: absolute; display: flex; align-items: center; gap: 1px; }
.opponent.top   { flex-direction: column; top: 8px; left: 50%; transform: translateX(-50%); }
/* Yan oyuncular kenara yakın; raf kenarda, isim/ikon ıstakaya bitişik */
.opponent.left  { flex-direction: row-reverse; left: 0.5%; top: 42%; transform: translateY(-50%); }
.opponent.right { flex-direction: row; right: 0.5%; top: 42%; transform: translateY(-50%); }

.op-head { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.opponent.left  .op-head { transform: rotate(90deg); }    /* sol: isim oyuncuya dönük (180° çevrildi) */
.opponent.right .op-head { transform: rotate(-90deg); }   /* sağ: isim oyuncuya dönük (180° çevrildi) */

.op-info {
  display: flex; gap: 8px; align-items: center;
  background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 20px; font-size: 13px;
  white-space: nowrap;
}
.op-name { font-weight: 600; }
.op-count { background: var(--gold); color: #2a1d00; border-radius: 10px; padding: 0 7px; font-weight: 700; font-size: 12px; }
/* Sıra kimdeyse ONUN İSMİ yanar (sabit altın vurgu; yanıp sönme yok) */
.opponent.active .op-info,
.my-name-bar.active .my-name-tag {
  background: linear-gradient(180deg, var(--gold), #c79a32); color: #2a1d00;
  box-shadow: 0 0 18px rgba(232,194,90,.75); border-color: var(--gold) !important;
}
.opponent.active .op-avatar,
.my-name-bar.active .my-avatar { border-color: var(--gold); box-shadow: 0 0 16px var(--gold); }

/* Kendi ismim — ıstakanın üstünde */
.my-name-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.my-avatar { width: 30px; height: 30px; font-size: 15px; margin-bottom: 0; }
.my-name-tag {
  font-weight: 700; font-size: 14px; color: #fff;
  background: rgba(0,0,0,.32); padding: 4px 16px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14); transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

/* Orta */
.center {
  grid-row: 2;
  display: flex; align-items: center; justify-content: center; gap: 42px;
  align-self: center;
  transform: translateY(30px);   /* masanın ortasına indir — üst oyuncu/atılanla üst üste binmesin */
}
.pile, .indicator-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pile-label { font-size: 12px; opacity: 0.85; }
.pile-label b { color: var(--gold); }
.center { perspective: 900px; }
.stack { cursor: pointer; position: relative; }
/* Yığın = istiflenmiş 3B tomar (katmanlı gölgelerle) */
.stack .tile.back {
  box-shadow:
    2px 3px 0 #5a2018, 4px 6px 0 #491811, 6px 9px 0 #3c130c,
    8px 13px 14px rgba(0,0,0,.5);
  transition: transform .2s var(--ease-out);
}
.stack:hover .tile.back { transform: translateY(-4px) rotateY(-8deg) scale(1.03); }
.indicator-wrap .tile {
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(232,194,90,.45),
    inset 0 2px 1px rgba(255,255,255,.9), 0 8px 14px rgba(0,0,0,.4);
  transform: rotateY(6deg);
}

/* Durum şeridi */
.status-bar {
  grid-row: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; font-size: 14px;
  background: rgba(0,0,0,0.25); border-radius: 12px; margin: 6px 4px;
}
.okey-badge b { color: var(--gold); }

/* Senin elin — slotlu ıstaka (raf) */
.my-area { grid-row: 4; }
.my-hand {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--ledge) 0;                  /* row-gap = iki tier eşiği; column-gap 0 = per içi BİTİŞİK */
  position: relative;
  --rail: 15px;                          /* ön ahşap ray yüksekliği = alt padding (taşı ÖRTMEZ) */
  --ledge: 14px;                         /* İKİ TIER arası ahşap eşik = row-gap (taşı ÖRTMEZ) */
  /* GERÇEKÇİ AHŞAP RAF: ince damar (grain) dokusu + sıcak ten gradyanı */
  background:
    repeating-linear-gradient(95deg, rgba(80,48,16,.06) 0 2px, rgba(255,232,188,.045) 2px 6px),
    linear-gradient(180deg, #eab873 0%, #d4974e 28%, #b97b33 58%, #95602a 84%, #6e4720 100%);
  padding: 12px 12px var(--rail); border-radius: 14px 14px 20px 20px;
  box-shadow:
    inset 0 10px 20px -5px rgba(0,0,0,.55),    /* taşların ardına düşen oluk gölgesi (derinlik) */
    inset 0 3px 2px rgba(0,0,0,.35),
    inset 2px 0 4px rgba(255,230,185,.16),
    inset -2px 0 5px rgba(50,30,10,.40),       /* yan bevel */
    0 14px 30px -6px rgba(0,0,0,.5),           /* yumuşak dış derinlik */
    0 4px 7px rgba(0,0,0,.4);
  max-width: 920px; margin: 0 auto;
  container-type: inline-size;        /* cqw birimi için */
  touch-action: none;                 /* dokunmatik sürüklemede sayfa kaymasın */
  perspective: 700px;                 /* taşlara hafif derinlik */
}
/* Ön AHŞAP RAY — taşların dibe oturduğu kabartılmış çıkıntı (gerçek ıstaka hissi) */
.my-hand::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rail);
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, #dca157 0%, #b97b33 42%, #6e4720 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,232,190,.5),
    inset 0 -3px 5px rgba(0,0,0,.45),
    0 -1px 2px rgba(0,0,0,.25);
  z-index: 3; pointer-events: none;
}
/* ORTA EŞİK — iki tier'i ayıran ahşap çıkıntı (üst raf ön lipi + alt raf arkası).
   row-gap içinde durur → taşı ÖRTMEZ. İki katlı ıstaka görünümü. */
.my-hand::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: var(--ledge);
  background: linear-gradient(180deg, #dca157 0%, #b97b33 38%, #5e3c18 58%, #84531f 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,232,190,.5),
    inset 0 -3px 5px rgba(0,0,0,.5);
  z-index: 2; pointer-events: none;
}
.slot {
  aspect-ratio: 0.72;
  border-radius: 5px;
  background: transparent;       /* boş slot çerçevesi YOK — taşlar bitişik dursun */
}
.slot.drop-target { background: rgba(232, 194, 90, 0.35); box-shadow: inset 0 0 0 2px var(--gold); }

/* Raf taşları slotu doldurur (sabit boyutu ezer) */
.my-hand .tile {
  width: 100%; height: 100%;
  border-radius: 12%;
  font-size: clamp(11px, 3.6cqw, 28px);
  cursor: grab;
  touch-action: none;
}
.my-hand .tile .num { line-height: 1; }
.my-hand .tile .dot { width: 26%; height: auto; aspect-ratio: 1; bottom: 13%; border-width: 2px; }
.my-hand .tile.selected {
  transform: translateY(-22%) scale(1.06);
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(232,194,90,.6),
    inset 0 2px 1px rgba(255,255,255,.9), 0 12px 18px rgba(0,0,0,.5);
}
.my-hand .tile:active { cursor: grabbing; transform: translateY(-4%) scale(1.02); }

/* Sürüklenen taşın hayaleti (GPU; konum JS'te translate3d ile) */
.drag-ghost {
  position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none;
  width: 48px; height: 66px; will-change: transform;
  opacity: 0.95; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}
/* Merkeze sürükleyince atma ipucu */
.center.drop-discard { outline: 3px dashed var(--gold); outline-offset: 4px; border-radius: 14px; }

.my-actions { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 8px; }
/* finish-hint metni değişince butonlar uzamasın: hint kendi içinde sarsın, butonlar sabit */
.my-actions .finish-hint { flex: 0 1 auto; min-width: 0; }

/* ---------------- Taşlar (3 boyutlu kabartmalı fildişi) ---------------- */
.tile {
  position: relative;
  width: 46px; height: 64px;
  /* Gerçekçi fildişi: üstte yumuşak cam parlaması + dikey ten gradyanı */
  background:
    radial-gradient(135% 65% at 50% -10%, rgba(255,255,255,.95), rgba(255,255,255,0) 58%),
    linear-gradient(168deg, #fffefb 0%, #f8f1e2 36%, #efe6cf 68%, #e1d3b2 100%);
  border-radius: 11%;
  border: 1px solid #c6b691;
  /* Kabartma: üst ışık kenarı + yan beveller + alt OYUK (taş kalınlığı) ; dış = yumuşak kademeli DERİNLİK gölgesi */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),            /* üst ışık kenarı */
    inset -2px 0 3px -1px rgba(150,124,78,.38),       /* yan bevel */
    inset 0 -6px 7px -3px rgba(120,96,56,.5),         /* alt oyuk (taş kalınlığı) */
    0 4px 8px -2px rgba(0,0,0,.42),                   /* derinlik */
    0 10px 16px -7px rgba(0,0,0,.3);                  /* yumuşak alt gölge */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 11%;
  font-weight: 800; font-size: 23px;
  cursor: default;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
/* Taşın alt KALINLIĞI (fiziksel derinlik dudağı) */
.tile::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -3%; height: 7%;
  background: linear-gradient(180deg, #cdbb95, transparent);
  border-radius: 0 0 50% 50%; z-index: -1;
}
.my-hand .tile { cursor: grab; }
.my-hand .tile:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 -4px 5px rgba(150,128,86,.40),
    0 14px 22px rgba(0,0,0,.45),
    0 4px 8px rgba(0,0,0,.30);
  z-index: 5;
}
.tile.selected {
  transform: translateY(-12px) scale(1.05);
  box-shadow:
    0 0 0 3px var(--gold), 0 0 16px rgba(232,194,90,.6),
    inset 0 2px 1px rgba(255,255,255,.95), inset 0 -4px 5px rgba(150,128,86,.4),
    0 14px 22px rgba(0,0,0,.45);
}
.tile .num { line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 1px rgba(0,0,0,.05); }
/* Marker = içi boş HALKA (referanstaki gibi), sayı rengiyle aynı */
.tile .dot {
  position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%);
  width: 28%; aspect-ratio: 1; border-radius: 50%;
  background: transparent; border: 2.5px solid currentColor;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.45);
}
.tile.red   { color: var(--red); }
.tile.black { color: var(--black); }
.tile.blue  { color: var(--blue); }
.tile.yellow{ color: var(--yellow); }
/* Sahte okey = taşın ortasında KMORE LOGOSU (yıldız yerine), taşa sığar */
.tile.joker-mark { color: transparent; }
.tile.joker-mark::after {
  content: ''; position: absolute;
  top: 11%; left: 11%; right: 11%; bottom: 11%; height: auto; width: auto;
  border-radius: 0;
  background: url('../assets/logo.png') center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
  z-index: 1;
}

/* OKEY (joker) taşı — net işaret: altın halka + köşede yıldız */
.tile.joker-tile {
  box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(232,194,90,.7), 0 3px 6px var(--shadow) !important;
  position: relative;
}
.tile.joker-tile::before {
  content: "★"; position: absolute; top: -2px; right: 1px;
  color: var(--gold); font-size: 11px; line-height: 1;
  text-shadow: 0 1px 2px #000; z-index: 2;
}

/* Taşın arkası (kapalı) — üzerinde KaanMore markası */
.tile.back {
  background: linear-gradient(160deg, #9a3b2f, #6f2a20);
  border-color: #5a2018;
  box-shadow: 0 3px 6px var(--shadow), inset 0 0 0 3px #00000022;
  overflow: hidden;
}
.tile.back::after {
  content: "Kmore";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ffd98a; opacity: .55; font-weight: 800;
  font-size: 9px; letter-spacing: .5px;
  transform: rotate(-90deg); white-space: nowrap;
  text-shadow: 0 1px 0 #00000055;
}
.my-hand .tile.back::after { font-size: 8px; }
.tile.empty { background: rgba(255,255,255,0.06); border-style: dashed; box-shadow: none; }

/* ---------------- Overlay'ler ---------------- */
.overlay {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.overlay-card {
  background: #123; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px; padding: 32px; width: min(92vw, 440px); text-align: center;
  box-shadow: 0 20px 60px var(--shadow);
}
.overlay-card h2 { margin-bottom: 12px; color: var(--gold); }
.overlay-card p { opacity: 0.9; line-height: 1.5; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.rules-card { text-align: left; }
.rules-body p { margin: 10px 0; }
.rules-body b { color: var(--gold); }
.rules-card .btn { margin-top: 20px; width: 100%; align-items: center; }

/* Vurgu: alınabilir hamle */
.can-take { animation: pulse 1.2s infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 var(--gold); }
  50% { box-shadow: 0 0 0 4px transparent, 0 0 18px var(--gold); }
}

/* ---------------- Giriş formu ---------------- */
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.field {
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px; padding: 12px 14px; color: #fff; font: inherit;
  outline: none; transition: border-color .15s;
}
.field:focus { border-color: var(--gold); }
.field::placeholder { color: rgba(255,255,255,0.5); }
.auth-form .btn { align-items: center; }
.auth-error { color: #ff8a80; font-size: 13px; min-height: 18px; }

/* ---------------- Kullanıcı başlığı (profesyonel üst çubuk) ---------------- */
.user-bar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(96vw, 560px);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px 8px 8px;
  background: linear-gradient(180deg, rgba(18,40,30,.92), rgba(10,28,20,.92));
  border: 1px solid rgba(232,194,90,.28);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.ub-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ub-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: radial-gradient(circle at 40% 30%, #3a5468 0%, #1a2b36 100%);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 1.5px #7a5a18, 0 2px 7px rgba(0,0,0,.45), inset 0 1px 3px rgba(255,255,255,.12);
}
.ub-name { font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ub-rank { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 9px; border: 1px solid currentColor; flex-shrink: 0; }
.ub-stats { display: flex; gap: 6px; }
.ub-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 999px; font-size: 13px; white-space: nowrap;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
}
.ub-pill b { font-size: 14px; }
.ub-pill small { opacity: .65; font-size: 10px; font-weight: 600; }
.ub-pill.kp { background: rgba(232,194,90,.14); border-color: rgba(232,194,90,.3); }
.ub-pill.kp b { color: var(--gold); }
.ub-pill.pts b { color: #9fd8ff; }
.ub-actions { display: flex; gap: 5px; flex-shrink: 0; }
.ub-icon {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff;
  transition: transform .12s ease, background .12s ease;
}
.ub-icon:hover { transform: translateY(-1px); background: rgba(255,255,255,.16); }
.ub-icon.danger:hover { background: rgba(229,57,53,.4); border-color: #e53935; }

/* Kmore logosu (assets/logo.png varsa) */
.brand-logo {
  display: block; max-width: min(70%, 220px); height: auto; margin: 0 auto 8px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.menu-card .logo, .menu-card .brand-mark { } /* logo varsa JS brand-mark'ı gizler */

/* Marka işareti — KAANMORE OKEY */
.brand-mark {
  display: inline-block;
  font-size: 13px; font-weight: 800; letter-spacing: 7px;
  color: #2a1d00; background: linear-gradient(180deg, var(--gold), #c79a32);
  padding: 4px 12px 4px 19px; border-radius: 20px; margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(232,194,90,.35), inset 0 1px 0 rgba(255,255,255,.4);
}

@media (max-width: 560px) {
  .ub-pill small { display: none; }
  .ub-name { max-width: 70px; }
}

/* ---------------- Lobi ---------------- */
.small-logo { font-size: 32px; letter-spacing: 2px; margin-bottom: 18px; }
.join-row { display: flex; gap: 8px; margin-top: 12px; }
.join-row .field { flex: 1; text-transform: uppercase; letter-spacing: 3px; text-align: center; font-weight: 700; }
.join-row .btn { align-items: center; }
.room-code-label { opacity: 0.7; font-size: 13px; margin-top: 6px; }
.room-code {
  font-size: 44px; font-weight: 800; letter-spacing: 10px; color: var(--gold);
  background: rgba(0,0,0,0.3); border-radius: 12px; padding: 12px; margin: 6px 0 16px;
}
.seats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.seat {
  background: rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px;
  text-align: left; font-weight: 600; border: 1px solid rgba(255,255,255,0.1);
}
.seat.empty { opacity: 0.5; font-style: italic; font-weight: 400; }
.seat.ai { color: #b3e5fc; }
.lobby-hint { font-size: 12px; opacity: 0.7; margin-bottom: 14px; }
#lobbyRoom .btn { width: 100%; align-items: center; margin-bottom: 8px; }

/* ---------------- Sıralama tablosu ---------------- */
.lb-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.lb-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: left; font-size: 14px; }
.lb-table tr td:first-child { color: var(--gold); font-weight: 700; width: 32px; }
.lb-table tr td:last-child { text-align: right; opacity: 0.8; }

/* ---------------- KaanMore marka filigranı (masa ortası) ---------------- */
.brand-watermark {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-size: clamp(36px, 9vw, 96px); font-weight: 900; letter-spacing: 2px;
  color: #ffffff; opacity: .07; pointer-events: none; user-select: none;
  filter: blur(1px); z-index: 0; white-space: nowrap;
}

/* ---------------- Atılan taş bölgeleri (her oyuncunun yanında) ---------------- */
.discard-zone {
  position: absolute; z-index: 6;
  width: 52px; height: 72px;
}
.discard-zone .discard-tile {
  position: absolute; top: 0; left: 0;
  transform: translate(calc(var(--i) * 5px), calc(var(--i) * -3px)) rotate(calc((var(--i) - 1.5) * 3deg));
  box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
/* Atılan taşlar — ovalin 4 KÖŞESİNE (kullanıcı isteği). Ortayı/ıstakayı ezmez. */
.discard-zone.top    { top: 15%; left: 13%;  right: auto; bottom: auto; }  /* sol-üst köşe */
.discard-zone.right  { top: 15%; right: 11%; left: auto;  bottom: auto; }  /* sağ-üst köşe */
.discard-zone.left   { top: 60%; left: 13%;  right: auto; bottom: auto; }  /* sol-alt köşe (alınabilir) */
.discard-zone.bottom { top: 60%; right: 11%; left: auto;  bottom: auto; }  /* sağ-alt köşe (benim) */
/* Alınabilir taş: çerçevesiz, taşa bitişik parıltı (sürükleyerek alınır) */
/* Alınabilir taş: vurgu/parıltı YOK (sıra bende olunca yanıp sönmesin) — sadece sürüklenebilir */
.discard-zone.can-take { cursor: grab; animation: none; }
.discard-zone.can-take .discard-tile { cursor: grab; }
/* Sürükle-bırak hedefleri */
.discard-zone.bottom.drop-target { outline: 3px dashed var(--gold); outline-offset: 4px; border-radius: 9px; }
.center.drop-finish { outline: 4px solid #7CFC9A; outline-offset: 6px; border-radius: 16px; box-shadow: 0 0 30px rgba(124,252,154,.6); }
#myHand.drop-target { box-shadow: inset 0 0 0 3px var(--gold), inset 0 7px 16px rgba(0,0,0,.5); }

.stack-count {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  background: rgba(0,0,0,.78); color: var(--gold); font-weight: 800; font-size: 13px;
  padding: 2px 10px; border-radius: 12px; white-space: nowrap;
  border: 1px solid rgba(232,194,90,.45); box-shadow: 0 2px 6px rgba(0,0,0,.45);
  z-index: 3;
}
.stack-count::before { content: "🂠 "; }
.kp-val { color: var(--gold); font-weight: 700; }

/* ---------------- Yatay-zorunlu uyarı (mobil) ---------------- */
.rotate-notice {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #14633a, #07301a); text-align: center; padding: 30px;
}
/* Dokunmatik cihaz + dikey → yatay çevir uyarısı (PC'de gösterilmez). */
@media (orientation: portrait) and (pointer: coarse) { .rotate-notice { display: flex; } }
.rotate-notice.active { display: flex; }
.rotate-icon { font-size: 64px; animation: rotateHint 2s ease-in-out infinite; }
.rotate-notice h2 { color: var(--gold); margin: 14px 0 8px; }
.rotate-notice p { opacity: .85; max-width: 360px; }
@keyframes rotateHint { 0%,100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }

/* ---------------- Salon / masalar ---------------- */
.salon-card { width: min(94vw, 560px); }
.salon-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.salon-head .small-logo { margin: 0; }
.salon-online { font-size: 13px; opacity: .9; }
.salon-online b { color: var(--gold); }
.salon-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.table-card {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.30));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 14px; text-align: left;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.table-card:hover { transform: translateY(-2px); border-color: rgba(232,194,90,.4); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.table-card.playing { opacity: .72; }
.table-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px;
}
.table-card-head b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-card-head .fee {
  flex-shrink: 0; white-space: nowrap;
  background: rgba(232,194,90,.16); color: var(--gold);
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px;
}
.table-seats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  margin-bottom: 12px; flex: 1;
}
.seat-chip {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 5px 8px; font-size: 11px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seat-chip.empty { opacity: .35; font-style: italic; }
.seat-chip.ai { color: #9fd8ff; }
.table-card .btn { width: 100%; align-items: center; justify-content: center; margin-top: auto; }
.salon-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }

/* ============================================================
 *  YENİ LOBİ (referans tarzı: yatay kaydırmalı kategoriler)
 * ============================================================ */
.lobby-screen {
  display: flex; flex-direction: column;
  background: radial-gradient(circle at 50% 18%, #2280a8, #0b3247);
  padding: 0;
}
.lobby-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; background: linear-gradient(180deg, rgba(8,30,46,.85), rgba(8,30,46,.4));
  border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.lobby-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lobby-user .ub-avatar { width: 40px; height: 40px; font-size: 20px; }
.lu-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lu-name { font-weight: 700; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }
.lobby-title { display: flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: 2px; color: var(--gold); }
.lobby-logo { height: 30px; width: auto; }
.lobby-coins {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: linear-gradient(180deg, #11456a, #0a2f49); border: 1px solid rgba(232,194,90,.4);
  padding: 6px 12px; border-radius: 22px; font-weight: 800; color: #fff;
}
.lobby-coins b { color: var(--gold); }
.lobby-coins small { opacity: .7; font-weight: 600; }

.lobby-body { flex: 1; min-height: 0; display: flex; align-items: center; }

/* Yatay kaydırıcı */
.cat-scroller {
  display: flex; gap: 16px; width: 100%;
  overflow-x: auto; overflow-y: hidden;
  padding: 16px 18px 22px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.cat-scroller::-webkit-scrollbar { height: 8px; }
.cat-scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 6px; }
.cat-card {
  scroll-snap-align: center; flex: 0 0 auto;
  width: min(46vw, 230px); min-height: 280px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 14px 16px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #f3f7fb 0%, #d9e6f0 100%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 14px 34px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.8);
  animation: enterUp .34s var(--ease-out) both;
}
.cat-card:nth-child(2){animation-delay:.05s}.cat-card:nth-child(3){animation-delay:.1s}
.cat-card:nth-child(4){animation-delay:.15s}.cat-card:nth-child(5){animation-delay:.2s}.cat-card:nth-child(6){animation-delay:.25s}
.cat-name { font-size: 22px; font-weight: 800; color: #14405c; letter-spacing: .5px; }
.cat-fee { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: #b8801f; }
.cat-art {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: -6px;
  width: 100%; margin: 6px 0; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 38%, #2da0cc, #155c7c);
  box-shadow: inset 0 3px 10px rgba(0,0,0,.4); padding: 18px 0; position: relative;
}
.cat-art .ct {
  width: 40px; height: 56px; border-radius: 7px; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 5px; font-weight: 800; font-size: 20px;
  background: linear-gradient(160deg, #fffdf6, #e9dcc0); color: #c62828;
  box-shadow: 0 4px 10px rgba(0,0,0,.4); border: 1px solid #cdbb91;
}
.cat-art .ct1 { transform: rotate(-8deg) translateX(6px); }
.cat-art .ct2 { transform: rotate(8deg) translateX(-6px); color: #b8801f; z-index: 2; }
.cat-players { font-size: 13px; font-weight: 700; color: #2a6a3a; }
.cat-players b { color: #1c8a48; }
.cat-join {
  width: 100%; margin-top: 4px; border: none; cursor: pointer;
  padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 800; letter-spacing: 1px; color: #16320a;
  background: linear-gradient(180deg, #7ee37e, #2faa3e); color: #07330f;
  box-shadow: 0 6px 0 #1d7a2a, 0 8px 16px rgba(0,0,0,.35);
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.cat-join:active { transform: translateY(4px); box-shadow: 0 2px 0 #1d7a2a, 0 4px 10px rgba(0,0,0,.3); }
.cat-join:disabled { background: linear-gradient(180deg, #b7c2cc, #8b97a2); color: #38424b; box-shadow: 0 6px 0 #5c6670; cursor: not-allowed; }

/* Alt bar */
.lobby-bottom {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(8,30,46,.9), rgba(8,30,46,.3));
  border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
}
.lb-icon {
  width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; font-size: 22px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #11456a, #0a2f49); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 4px 12px rgba(0,0,0,.35); transition: transform .12s var(--ease-spring);
}
.lb-icon:hover { transform: translateY(-2px); }
.play-now {
  flex: 1; max-width: 420px; cursor: pointer; border: none; color: #07330f;
  padding: 12px 20px; border-radius: 16px; font-size: 22px; font-weight: 800; letter-spacing: 1px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: linear-gradient(180deg, #8ff08f, #2faa3e);
  box-shadow: 0 7px 0 #1d7a2a, 0 10px 22px rgba(0,0,0,.4); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.play-now small { font-size: 11px; font-weight: 700; letter-spacing: 0; opacity: .85; }
.play-now small b { color: #07330f; }
.play-now:active { transform: translateY(4px); box-shadow: 0 3px 0 #1d7a2a, 0 5px 12px rgba(0,0,0,.35); }

/* ---- Masa bekleme (referans tarzı) ---- */
.table-wait { width: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px; position: relative; }
.leave-badge {
  width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; cursor: pointer; color: #fff; font-weight: 800; font-size: 13px; line-height: 1.15;
  background: radial-gradient(circle at 40% 32%, #e85b5b, #b01e1e); border: 4px solid #7c1414;
  box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,255,255,.25);
  transition: transform .12s var(--ease-spring);
}
.leave-badge:hover { transform: scale(1.05); }
.tw-panel {
  flex: 1; max-width: 520px; min-width: 0; text-align: center;
  background: linear-gradient(180deg, rgba(16,52,78,.95), rgba(9,32,50,.95));
  border: 2px solid #2fa9d6; border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 0 0 1px rgba(47,169,214,.4), 0 14px 40px rgba(0,0,0,.5), inset 0 0 30px rgba(47,169,214,.12);
}
.tw-fee { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 30px; font-weight: 800; color: #fff; }
.tw-fee .coin { font-size: 26px; }
.tw-name { margin: 6px 0 12px; font-size: 14px; color: #9fd0e6; font-weight: 700; }
.tw-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.tw-chip {
  background: linear-gradient(180deg, #143b58, #0c2a40); border: 1px solid rgba(255,255,255,.14);
  color: #cfe6f2; font-size: 13px; font-weight: 800; letter-spacing: .5px; padding: 8px 16px; border-radius: 10px;
}
.tw-chip.on { background: linear-gradient(180deg, #2faa3e, #1d7a2a); color: #fff; border-color: #7ee37e; }
.tw-chip.sel { cursor: pointer; border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,194,90,.4); transition: transform .12s var(--ease-spring); }
.tw-chip.sel:hover { transform: translateY(-2px); }
.tw-chip.sel:active { transform: translateY(0); }
.tw-rake { font-size: 12px; color: #8fb6cc; margin: 4px 0 10px; }
.tw-status {
  background: rgba(0,0,0,.3); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: #dfeef6; margin-bottom: 12px;
}
.salon-foot .btn { flex: 1; align-items: center; justify-content: center; }

/* Turnuvalar */
.tournament-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; max-height: 50vh; overflow-y: auto; }
.tournament-card { background: rgba(255,255,255,.06); border-radius: 10px; padding: 12px; text-align: left; }
.t-head { display: flex; justify-content: space-between; align-items: center; }
.badge2 { background: #223; padding: 2px 8px; border-radius: 8px; font-size: 11px; }
.t-info { font-size: 12px; opacity: .85; margin: 6px 0 10px; }
.t-info b { color: var(--gold); }
.empty-note { opacity: .6; font-style: italic; text-align: center; padding: 16px; }

/* ============================================================
 *  Belirgin masa yüzeyi + oyuncu ıstakaları + süre + sonuç patlaması
 * ============================================================ */

/* Oval/yuvarlak masa yüzeyi — oyun tahtası net görünsün */
.table-surface {
  position: absolute; z-index: 0;
  top: 8%; left: 50%; transform: translateX(-50%);
  width: min(92%, 980px); height: 60%;
  border-radius: 46% / 42%;
  background: radial-gradient(ellipse at 50% 38%, #2da0cc 0%, #1f7ba2 52%, #155c7c 100%);
  /* Ahşap çerçeve (çok katmanlı sıcak kahve halka) + derinlik */
  box-shadow:
    0 0 0 7px #b5803a, 0 0 0 11px #8a5a2b, 0 0 0 18px #5a3a1c, 0 0 0 21px #2f2114,
    inset 0 0 90px rgba(0,0,0,.28), inset 0 6px 22px rgba(255,255,255,.08),
    0 28px 56px rgba(0,0,0,.55);
}
/* İçerik masa yüzeyinin üstünde kalsın */
.center { z-index: 2; }
.opponent { z-index: 3; }
.status-bar { z-index: 3; }
.my-area { z-index: 3; position: relative; }
.brand-watermark { z-index: 1; }

/* Oyuncu önündeki KOMPAKT ahşap ıstaka — kapalı taşlar üst üste biner */
.op-tiles {
  display: flex; align-items: center;
  padding: 4px 8px 5px; border-radius: 6px;
  background: linear-gradient(180deg, #d99f56, #a96e30 55%, #855426);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.5), inset 0 -2px 0 rgba(255,225,180,.2), 0 3px 7px rgba(0,0,0,.4);
  max-width: 120px;
}
.mini-tile {
  width: 14px; height: 20px; border-radius: 3px; flex: 0 0 auto;
  margin-left: -8px; /* yatay: üst üste bin → kompakt */
  background: linear-gradient(160deg, #fffdf6, #f1e7d0 58%, #e3d5b6);
  border: 1px solid #c9b78d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 1px 0 2px rgba(0,0,0,.3);
}
.mini-tile:first-child { margin-left: 0; }
/* Yan oyuncular: DİKEY sabit raf (eski hali) */
.op-tiles.vert { flex-direction: column; gap: 1px; max-width: none; padding: 5px 4px; }
.op-tiles.vert .mini-tile { width: 22px; height: 9px; margin: 0; }

/* Sırala simge butonu (1-2-3 taş ikonu + etiket) */
.icon-btn { padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.icon-btn svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.sort-label { font-weight: 700; font-size: 14px; }
.finish-hint {
  display: inline-flex; align-items: center;
  font-size: 12px; opacity: .8; padding: 0 8px; color: #e8f5ec;
}
.finish-hint.can-win {
  opacity: 1; font-weight: 800; color: #07330f;
  background: linear-gradient(180deg, #8ff08f, #2faa3e); border-radius: 10px; padding: 5px 12px;
  box-shadow: 0 0 16px rgba(124,252,154,.7); animation: pulse 1s infinite;
}
/* Menü yanındaki sohbet butonu + okunmamış noktası */
#chatBtnInline { position: relative; font-size: 18px; line-height: 1; transition: box-shadow .2s var(--ease-out); }
.chat-dot { display: none; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #e53935; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(229,57,53,.6); }
.chat-dot.on { display: block; animation: chatPing 1.1s ease-out infinite; }
/* Yeni mesaj → buton parlar + hafif zıplar (belirgin ikaz) */
#chatBtnInline.has-unread {
  box-shadow: 0 0 0 2px #e53935, 0 0 14px rgba(229,57,53,.7);
  animation: chatBuzz .9s ease-in-out infinite;
}
@keyframes chatPing {
  0% { box-shadow: 0 0 0 0 rgba(229,57,53,.7); }
  70% { box-shadow: 0 0 0 7px rgba(229,57,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}
@keyframes chatBuzz {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.05); }
}

/* ---- Tabela (çok-elli skoreboard) ---- */
.tabela-card { max-width: min(94vw, 470px); }
.tabela-sub { opacity: .8; margin-bottom: 10px; font-size: 13px; color: #cfe6f2; }
.tabela-wrap { overflow: auto; max-height: 52vh; border-radius: 10px; background: rgba(0,0,0,.25); }
.tabela-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-table th, .tabela-table td { padding: 7px 6px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.tabela-table th:first-child, .tabela-table td:first-child { max-width: 42px; opacity: .85; }
.tabela-table th { color: var(--gold); font-weight: 700; }
/* Dar ekran: daha kompakt */
@media (max-width: 480px) {
  .tabela-card { max-width: 96vw; padding: 16px 12px; }
  .tabela-table th, .tabela-table td { padding: 5px 4px; font-size: 12px; max-width: 60px; }
  #gameoverTabela .tabela-wrap { max-width: 100%; }
}
.tabela-table td.pos { color: #7CFC9A; font-weight: 700; }
.tabela-table td.neg { color: #ff8a80; }
.tabela-table .tabela-total td { font-weight: 800; border-top: 2px solid var(--gold); background: rgba(232,194,90,.08); }
.tabela-table .tabela-total td.lead { color: var(--gold); }
#gameoverTabela .tabela-table { margin: 8px 0 4px; }
/* El arası toast */
.hand-toast {
  position: fixed; top: 14px; left: 50%; z-index: 3500;
  transform: translate(-50%, -130%); opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, #1a3550, #0e2236); color: #fff; border: 1px solid var(--gold);
  padding: 10px 18px; border-radius: 14px; font-weight: 700; font-size: 14px; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.hand-toast.show { transform: translate(-50%, 0); opacity: 1; }
/* El göstergesi (status-bar içinde) */
.hand-badge { background: rgba(232,194,90,.18); color: var(--gold); font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 8px; margin-right: 8px; }

/* Sıra geri sayım sayacı (konik halka + sayı) */
.turn-timer {
  position: absolute; z-index: 5;
  top: 52%; left: 50%; transform: translate(-50%, -50%);   /* masa ortası, yığının biraz altı — üst üste binmesin */
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, rgba(10,40,25,.95) 70%, transparent 71%),
    conic-gradient(var(--gold) calc(var(--t,1) * 360deg), rgba(255,255,255,.15) 0);
  color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  transition: background .25s linear;
}
.turn-timer.urgent { color: #ff6b6b; animation: pulse .6s infinite; }

/* ---------------- Oyun sonu: logo patlaması ---------------- */
.result-burst {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.result-logo, .result-fallback {
  width: min(60vw, 280px); max-height: 40vh; object-fit: contain;
  filter: drop-shadow(0 0 40px rgba(232,194,90,.8));
  animation: logoBurst 1.6s var(--ease-out) both;
}
.result-fallback { font-size: 140px; line-height: 1; display: none; }
.result-logo[src=""], .result-logo:not([src]) { display: none; }
#gameover.lose .result-logo, #gameover.lose .result-fallback { filter: drop-shadow(0 0 40px rgba(229,57,53,.8)); }
.burst-rays {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,194,90,.9), transparent 70%);
  animation: rays 1.1s var(--ease-out) both;
}
#gameover.lose .burst-rays { background: radial-gradient(circle, rgba(229,57,53,.85), transparent 70%); }
@keyframes logoBurst {
  0%   { opacity: 0; transform: scale(.2) rotate(-12deg); }
  35%  { opacity: 1; transform: scale(1.25) rotate(4deg); }
  55%  { transform: scale(1) rotate(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(.9); }
}
@keyframes rays {
  0%   { opacity: .9; transform: scale(1); box-shadow: 0 0 60px 30px rgba(232,194,90,.5); }
  100% { opacity: 0; transform: scale(36); box-shadow: 0 0 120px 60px rgba(232,194,90,0); }
}
/* Sonuç kartı patlamadan sonra belirsin */
#gameover .result-card { animation: pop .4s var(--ease-spring) .7s both; }
#gameover.win .result-card h2 { color: var(--gold); }
#gameover.lose .result-card h2 { color: #ff5252; }

/* ---------------- Grafik cila (ileri seviye) ---------------- */
.game {
  /* position: fixed; inset:0 .screen'den gelir — EZME */
  background:
    radial-gradient(ellipse at 50% 40%, #2a93bd 0%, #1d6f93 46%, #124e6b 100%);
}
.game::before {
  /* hafif keten dokusu + vinyet */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%);
}
.table { z-index: 1; }  /* position: absolute zaten tanımlı; sadece katman */

/* Geniş ekran (masaüstü/yatay): tahtayı ortala ve genişliğini sınırla — dağılmasın.
   Felt arka planı (.game) tüm ekranı doldurur; etkileşimli tahta ortada toplanır. */
@media (min-width: 760px) {
  .table {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(100vw, 1060px);
  }
  /* Tahtanın kenarına hafif bir çerçeve hissi */
  .game::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    width: min(100vw, 1060px); transform: translateX(-50%);
    pointer-events: none; z-index: 0;
    box-shadow: inset 0 0 120px rgba(0,0,0,.25);
    border-left: 1px solid rgba(255,255,255,.04);
    border-right: 1px solid rgba(255,255,255,.04);
  }
}

/* Taş sayısına ince derinlik */
.tile .num { text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.12); }

/* Rakip rozetleri + avatar */
.op-info {
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.28));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.op-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: radial-gradient(circle at 40% 30%, #3a5468 0%, #1a2b36 100%);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 1.5px #7a5a18, 0 3px 9px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,255,255,.12);
  margin-bottom: 2px;
}
.opponent.active .op-avatar { border-color: var(--gold); box-shadow: 0 0 14px var(--gold); }

/* Buton cila + mikro-etkileşim (Emil: hızlı, küçük, yaylı) */
.btn {
  box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .16s var(--ease-spring), filter .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn.primary { box-shadow: 0 4px 14px rgba(232,194,90,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.primary:hover { box-shadow: 0 8px 22px rgba(232,194,90,.45), inset 0 1px 0 rgba(255,255,255,.4); }

/* ---------------- Animasyonlar (Emil easing) ---------------- */
/* NOT: Istaka taşlarına SÜREKLİ animasyon YOK — her render'da tekrar oynayıp
   jank/FPS düşüşü yaratıyordu. Dağıtım animasyonu yalnızca yeni oyunda,
   .my-hand.dealing sınıfıyla bir kez oynar. */
.my-hand.dealing .tile {
  animation: dealTile .3s var(--ease-out) both;
  transform-origin: bottom center;
}
@keyframes dealTile {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.my-hand .tile { will-change: transform; }

/* Oyun sonu kartı — hafif yaylı pop */
.overlay-card { animation: pop .28s var(--ease-spring) both; }
@keyframes pop {
  from { opacity: 0; transform: scale(.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Overlay arka planı yumuşak belirsin */
.overlay { animation: fadeIn .2s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Menü/salon kartları girişte yüksel + ölçek */
.menu-card, .salon-card { animation: cardEnter .32s var(--ease-out) both; }
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Menü butonları ve masa kartları sırayla (stagger) belirsin */
.menu-buttons .btn { animation: enterUp .34s var(--ease-out) both; }
.menu-buttons .btn:nth-child(1) { animation-delay: .06s; }
.menu-buttons .btn:nth-child(2) { animation-delay: .12s; }
.table-card { animation: enterUp .3s var(--ease-out) both; }
.table-card:nth-child(2) { animation-delay: .04s; }
.table-card:nth-child(3) { animation-delay: .08s; }
.table-card:nth-child(4) { animation-delay: .12s; }
.table-card:nth-child(5) { animation-delay: .16s; }
.table-card:nth-child(6) { animation-delay: .2s; }
@keyframes enterUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "Senin sıran" bandı */
.turn-banner {
  position: fixed; top: 38%; left: 50%;
  transform: translate(-50%, -50%) scale(.8);
  background: linear-gradient(180deg, var(--gold), #c79a32);
  color: #2a1d00; font-size: 28px; font-weight: 800;
  padding: 14px 36px; border-radius: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  pointer-events: none; opacity: 0; z-index: 50;
}
.turn-banner.show { animation: bannerFlash 1.4s ease forwards; }
@keyframes bannerFlash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* ---------------- Online sohbet (sağdan drawer + hamburger) ---------------- */
.chat-toggle {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 40; width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold), #c79a32); color: #2a1d00;
  border: none; font-size: 22px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.45); transition: transform .12s ease;
}
.chat-toggle:hover { transform: translateY(-50%) scale(1.08); }
.chat-toggle.has-unread::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 13px; height: 13px; background: #e53935; border-radius: 50%; border: 2px solid #fff;
  animation: pulse 1s infinite;
}
.chat-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; }
.chat-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(50vw, 380px);
  background: linear-gradient(180deg, #163a2a, #0b241a);
  border-left: 1px solid rgba(232,194,90,.25);
  display: flex; flex-direction: column; z-index: 46;
  box-shadow: -12px 0 36px rgba(0,0,0,.5);
  animation: chatSlide .28s var(--ease-out);
}
@keyframes chatSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.chat-drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 800; color: var(--gold); font-size: 16px;
}
.chat-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; opacity: .7; }
.chat-close:hover { opacity: 1; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 12px; font-size: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.chat-msg { background: rgba(255,255,255,0.08); padding: 7px 10px; border-radius: 10px; word-break: break-word; max-width: 85%; }
.chat-msg b { color: var(--gold); }
.chat-msg.mine { background: rgba(232,194,90,0.2); align-self: flex-end; }
.chat-msg.mine b { color: #fff; }
/* Admin / duyuru mesajları */
.chat-msg.admin { background: rgba(46,160,107,0.22); border: 1px solid rgba(46,160,107,.5); max-width: 100%; }
.chat-msg.admin b { color: #7CFC9A; }
.chat-msg.announce { background: linear-gradient(180deg, rgba(232,194,90,.22), rgba(232,194,90,.12)); border: 1px solid var(--gold); max-width: 100%; }
.chat-msg.announce b { color: var(--gold); }

/* Admin duyuru banner'ı (sohbet kapalı olsa da görünür) */
#announceToast {
  position: fixed; top: 10px; left: 50%; z-index: 4000;
  transform: translate(-50%, -140%); opacity: 0; pointer-events: none;
  max-width: min(92vw, 560px); padding: 11px 18px; border-radius: 14px;
  background: linear-gradient(180deg, #1a3550, #0e2236); color: #fff;
  border: 1px solid var(--gold); box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(232,194,90,.3);
  font-size: 14px; line-height: 1.35; text-align: center;
  transition: transform .32s var(--ease-out), opacity .32s var(--ease-out);
}
#announceToast.show { transform: translate(-50%, 0); opacity: 1; }
#announceToast .at-badge {
  display: inline-block; background: linear-gradient(180deg, var(--gold), #c79a32); color: #2a1d00;
  font-weight: 800; font-size: 12px; padding: 2px 9px; border-radius: 10px; margin-right: 4px;
}
.chat-input { display: flex; gap: 6px; padding: 12px; border-top: 1px solid rgba(255,255,255,0.1); }
.chat-input input {
  flex: 1; min-width: 0; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; color: #fff; padding: 10px 12px; font: inherit; outline: none;
}
.chat-input input:focus { border-color: var(--gold); }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* Mobil uyum (kullanıcıların %95'i mobil) */
@media (max-width: 760px) {
  .table { padding: 6px; }
  /* Orta alandaki sabit taşlar küçülsün */
  .center .tile, .indicator-wrap .tile, .discard-zone .tile {
    width: 40px; height: 56px; font-size: 20px;
  }
  .center { gap: 12px; }
  .pile-label { font-size: 11px; }

  /* Rakipler kompakt */
  .opponent.top { top: 6px; }
  .opponent.left { left: 4px; }
  .opponent.right { right: 4px; }
  .op-info { font-size: 11px; padding: 3px 7px; }
  .mini-tile { width: 8px; height: 12px; }
  .op-tiles { gap: 1px; }
  .op-tiles.vert .mini-tile { width: 12px; height: 8px; }

  .status-bar { font-size: 12px; padding: 6px 10px; margin: 4px 2px; }
  .my-hand { --rail: 11px; --ledge: 11px; gap: var(--ledge) 0; padding: 6px 6px var(--rail); }
  .my-actions .btn { padding: 10px 14px; font-size: 15px; } /* dokunmatik hedef */

  .logo { font-size: 52px; }
  .menu-card, .overlay-card { padding: 28px 22px; }
  .salon-tables { gap: 8px; }
  .chat-drawer { width: 60vw; }
  .chat-toggle { width: 44px; height: 44px; font-size: 19px; }
}

/* Mobil/orta YATAY (kısa yükseklik) — kompakt yerleşim */
@media (orientation: landscape) and (max-height: 680px) {
  .table { padding: 4px; }
  .opponent.top { top: 2px; }
  .opponent.left { top: 44%; }
  .opponent.right { top: 44%; }
  .op-avatar { width: 28px; height: 28px; font-size: 14px; }
  .op-info { font-size: 10px; padding: 2px 6px; }
  .op-count { font-size: 10px; padding: 0 5px; }
  .mini-tile { width: 7px; height: 10px; }
  .op-tiles.vert .mini-tile { width: 10px; height: 7px; }
  .op-tiles { max-width: 92px; }
  .center .tile, .indicator-wrap .tile { width: 32px; height: 46px; font-size: 16px; }
  .center { gap: 26px; transform: translateY(12px); }
  .stack-count { font-size: 11px; bottom: -18px; }
  .status-bar { font-size: 11px; padding: 4px 10px; margin: 2px; }
  /* Istaka taşlarını kompaktlaştır — 2 sıra rahat sığsın.
     Sabit taş genişliği YOK: taş kolonu (1fr) doldurur → gap:0 ile BİTİŞİK.
     Boyut max-width ile küçülür (14 kolon). */
  .my-hand { --rail: 9px; --ledge: 9px; padding: 4px 6px var(--rail); gap: var(--ledge) 0; max-width: 680px; }
  .my-hand .tile { font-size: 19px; }
  .my-name-bar { margin-bottom: 2px; }
  .my-avatar { width: 24px; height: 24px; font-size: 13px; }
  .my-name-tag { font-size: 12px; padding: 2px 12px; }
  .my-actions { margin-top: 4px; gap: 6px; }
  .my-actions .btn { padding: 7px 16px; font-size: 14px; }
  .sort-label, .finish-hint { font-size: 12px; }
  /* Kompakt-yatayda atılan taşlar küçülür ve hepsi ıstakanın ÜSTÜNDEKİ oval alana
     sığar (ıstakaya/yan raflara binmesin) — merkez yığının çevresinde sıkı halka. */
  .discard-zone { width: 32px; height: 44px; }
  .discard-zone .tile { width: 32px; height: 44px; font-size: 16px; }
  .discard-zone.top    { top: 11%; left: 11%;  right: auto; bottom: auto; }  /* sol-üst */
  .discard-zone.right  { top: 11%; right: 11%; left: auto;  bottom: auto; }  /* sağ-üst */
  .discard-zone.left   { top: 58%; left: 11%;  right: auto; bottom: auto; }  /* sol-alt (alınabilir) */
  .discard-zone.bottom { top: 58%; right: 11%; left: auto;  bottom: auto; }  /* sağ-alt (benim) */
  .turn-timer { top: 40%; width: 38px; height: 38px; font-size: 15px; }
}

/* Çok dar ekran / portrait telefon */
@media (max-width: 430px) {
  .center .tile, .indicator-wrap .tile, .discard-zone .tile {
    width: 34px; height: 48px; font-size: 17px;
  }
  .center { gap: 8px; }
  .my-actions .btn { padding: 11px 12px; }
  .logo { font-size: 44px; }
  .salon-tables { grid-template-columns: 1fr; } /* dar portrait: tek sütun */
}

/* ---- GİRİŞ / MENÜ mobil uyumu ---- */
@media (max-width: 560px) {
  /* Menüde üst user-bar var → kart üstten boşluklu başlasın, taşarsa kaydır */
  #menu { align-items: flex-start; padding: 72px 10px 24px; overflow-y: auto; }
  #login { padding: 16px 10px; overflow-y: auto; }     /* login: user-bar yok, ortalı */
  .menu-card { padding: 26px 20px; width: min(94vw, 400px); }
  .logo { font-size: 46px; letter-spacing: 5px; }
  .brand-logo { max-width: 150px; }
  .menu-buttons { margin-top: 16px; gap: 10px; }
  .tagline { margin-bottom: 18px; }
  /* Üst bar kompakt */
  .user-bar { width: calc(100vw - 12px); top: 8px; padding: 6px 8px; gap: 5px; }
  .ub-avatar { width: 30px; height: 30px; font-size: 16px; }
  .ub-name { max-width: 20vw; font-size: 12px; }
  .ub-rank { font-size: 9px; padding: 1px 5px; }
  .ub-stats { gap: 4px; }
  .ub-pill { padding: 3px 7px; }
  .ub-pill small { display: none; }   /* "KC"/"puan" etiketleri gizle — dar */
  .ub-pill b { font-size: 12px; }
  .ub-actions { gap: 4px; }
  .ub-icon { width: 32px; height: 32px; font-size: 15px; }
}

/* Yatay-kısa telefonda giriş/menü kartı sığsın (kaydırılabilir) */
@media (orientation: landscape) and (max-height: 460px) {
  #menu, #login { align-items: flex-start; padding-top: 56px; overflow-y: auto; }
  .menu-card { padding: 16px 22px; }
  .logo { font-size: 34px; margin: 2px 0; }
  .brand-logo { max-width: 96px; }
  .tagline { margin: 2px 0 10px; }
  .menu-buttons { margin-top: 10px; gap: 8px; }
  .auth-form { gap: 8px; }
}