/* ============================================================
   KAPTIR — 101 Okey Online
   Premium Dark Casino + Two-Tier Board
   ============================================================ */

:root {
  --bg-primary: #0a0f1a;
  --bg-secondary: #111827;
  --bg-table: #0d4a2e;
  --bg-table-felt: radial-gradient(ellipse at center, #1a6b42 0%, #0d4a2e 50%, #083d24 100%);
  --bg-glass: rgba(255, 255, 255, 0.06);
  --bg-glass-hover: rgba(255, 255, 255, 0.1);
  --border-glass: rgba(255, 255, 255, 0.12);
  --text-primary: #f0f4f8;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-gold: #f0b430;
  --accent-gold-glow: rgba(240, 180, 48, 0.4);
  --accent-emerald: #10b981;
  --accent-emerald-glow: rgba(16, 185, 129, 0.3);
  --accent-red: #ef4444;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --tile-red: #e74c3c;
  --tile-yellow: #f39c12;
  --tile-blue: #3498db;
  --tile-black: #2c3e50;
  --tile-back: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
  /* Sahte okeyin rengârenk ✱ işareti */
  --tile-fake-rainbow: linear-gradient(120deg, #e74c3c 0%, #f39c12 22%, #2ecc71 45%, #3498db 68%, #8b5cf6 88%, #ec4899 100%);
  --tile-fake-conic: conic-gradient(#e74c3c, #f39c12, #2ecc71, #3498db, #8b5cf6, #ec4899, #e74c3c);

  /* ---- TAŞ ÖLÇEĞİ ----------------------------------------------------
     Tek kaynak --tile-w; her şey ondan türer. Genişlik hem istakanın
     sığacağı yerden hem ekran YÜKSEKLİĞİNDEN sınırlanır: yatay modda
     dar olan yükseklik, istaka iki sıra olduğu için ölçüyü o belirler.
     Kırılım noktalarında yalnız --tile-max / --tile-vh / --side-col
     ayarlanır, gerisi kendiliğinden büyür.                              */
  --tile-ratio: 1.4;           /* boy/en — .rack-slot aspect-ratio ile aynı olmalı */
  /* İstakanın şekli. TEK KAYNAK burasıdır: JS bu iki değeri okuyup satır/slot
     üretir (Game._readRackShape), aşağıdaki --tile-w hesabındaki bölen de
     --rack-cols ile aynı olmalıdır. Dikeyde 3×8 kullanılıyor — dar ekranda
     satır kısalınca taşlar belirgin biçimde büyüyor. */
  --rack-cols: 12;
  --rack-rows: 2;
  --side-col: 82px;            /* sol/sağ sütun (köşeler + rakip adı) */
  --tile-max: 44px;
  --tile-vh: 0.108;            /* taş genişliğinin ekran yüksekliğine oranı */
  --rack-side-w: 96px;         /* istakanın sağındaki tuş sütunu */
  --table-side-w: 92px;        /* masanın sağındaki bilgi şeridi */
  /* Safari "Ana Ekrana Ekle" tam ekranında ekranın yuvarlak köşeleri ve
     çentiği içeriği kırpıyordu; kenar boşluğu bunu telafi eder. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* NOT: aşağıdaki bölen --rack-cols ile aynı olmalı. calc içinde var ile
     bölme yapmıyoruz — desteklenmeyen bir tarayıcıda tüm ölçek çökerdi.
     46px = slot araları (11 × 3px) + istaka iç boşluğu (12px) payı;
     bu pay eksik olursa istaka yan buton sütunuyla birlikte taşar.
     Buton sütunu TEK (sağda) olduğu için --rack-side-w bir kez düşülür. */
  --tile-w: min(
    var(--tile-max),
    calc((100vw - var(--safe-l) - var(--safe-r) - 2 * var(--side-col) - var(--rack-side-w) - 46px) / 12),
    calc(100vh * var(--tile-vh))
  );
  --tile-h: calc(var(--tile-w) * var(--tile-ratio));
  /* Türev boyut katsayıları */
  --tile-tiny-k: 0.60;         /* masadaki perler */
  --tile-corner-k: 0.98;       /* ALT köşeler: aldığım / attığım taş */
  --tile-corner-top-k: 0.70;   /* ÜST köşeler: yalnız bilgi — SABİT kalır */
  --tile-mini-k: 0.80;         /* atık geçmişi kartı */
  --tile-chip-k: 0.52;         /* gösterge + deste şeridi (sabit, küçük kalır) */

  /* Köşe taşları yan sütuna da SIĞMAK zorunda: taş boyu ekran yüksekliğinden
     değil de --tile-max'tan sınırlandığında sütunu taşırabiliyordu. */
  --tile-corner-w: min(calc(var(--tile-w) * var(--tile-corner-k)), calc(var(--side-col) - 10px));
  --tile-corner-sm-w: min(calc(var(--tile-w) * var(--tile-corner-top-k)), calc(var(--side-col) - 12px));

  /* Üst satır SABİT: köşeye taş atılınca ya da sıra bize gelince büyüyüp
     ortadaki masadan çalmasın diye içerikten bağımsız ölçülür.
     +30px: sol üstteki KAPTIR (masadan kalk) tuşunun payı. */
  --row-top: calc(var(--tile-corner-sm-w) * var(--tile-ratio) + 30px);
  --tile-r: 7px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --font: 'Outfit', sans-serif;
  --fast: 150ms ease;
  --normal: 250ms ease;
  --slow: 400ms ease;
}

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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: var(--font); background: var(--bg-primary);
  color: var(--text-primary); -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}

/* ============================================================ SCREENS */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--slow); z-index: 1; }
.screen.active { display: flex; opacity: 1; }

/* ============================================================ GLASS */
.glass-panel { background: var(--bg-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-glass); border-radius: var(--r-lg); }

/* ============================================================ BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border: none; border-radius: var(--r-md); font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer; transition: all var(--normal); position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%); opacity: 0; transition: opacity var(--fast); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent-emerald) 0%, #059669 100%); color: white; box-shadow: 0 0 20px var(--accent-emerald-glow); }
.btn-primary:hover { box-shadow: 0 0 30px var(--accent-emerald-glow); transform: translateY(-1px); }
.btn-secondary { background: var(--bg-glass); border: 1px solid var(--border-glass); color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-glass-hover); }
.btn-accent { background: linear-gradient(135deg, var(--accent-gold) 0%, #d97706 100%); color: #1a1a1a; }
.btn-danger { background: linear-gradient(135deg, var(--accent-red) 0%, #dc2626 100%); color: white; }
.btn-success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; }
.btn-warning { background: linear-gradient(135deg, var(--accent-gold) 0%, #f59e0b 100%); color: #1a1a1a; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: var(--r-sm); }
/* Elini komple serip bitiren açılış — eşikten muaf, ayrı vurgulanır */
.btn-finish { background: linear-gradient(135deg, var(--accent-gold) 0%, #ef4444 100%); color: #fff; animation: finish-glow 1.2s ease-in-out infinite; }
@keyframes finish-glow { 0%,100% { box-shadow: 0 0 0 rgba(240,180,48,0); } 50% { box-shadow: 0 0 14px var(--accent-gold-glow); } }
.btn-glow { animation: glow-pulse 2s ease-in-out infinite; }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 20px var(--accent-emerald-glow); } 50% { box-shadow: 0 0 35px var(--accent-emerald-glow); } }
.btn-icon { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); transition: background var(--fast); color: var(--text-primary); }
.btn-icon:hover { background: var(--bg-glass-hover); }
.btn-arrow { width: 18px; height: 18px; }

/* ============================================================ INPUT */
.input-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.text-input { width: 100%; padding: 14px 18px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-glass); border-radius: var(--r-md); color: var(--text-primary); font-family: var(--font); font-size: 16px; transition: border-color var(--fast); outline: none; }
.text-input::placeholder { color: var(--text-muted); }
.text-input:focus { border-color: var(--accent-emerald); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }

/* ============================================================ LOGIN
   Yatay modda içerik ekrandan uzun kalabiliyordu ve `overflow: hidden`
   yüzünden "Oyuna Gir" butonuna ULAŞILAMIYORDU. Artık kaydırılıyor;
   `margin: auto` sayesinde sığdığında yine ortalı duruyor
   (flex + justify-content: center taşarken üstü kırpıyor). */
#login-screen { background: var(--bg-primary); overflow-y: auto; overflow-x: hidden; justify-content: flex-start; }
.login-container {
  position: relative; z-index: 2; margin: auto 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 32px; padding: 24px; max-width: 420px; width: 100%;
}
.logo-section { text-align: center; }
.logo-icon { font-size: 64px; margin-bottom: 12px; animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.logo-title { font-size: 52px; font-weight: 800; letter-spacing: 6px; background: linear-gradient(135deg, var(--accent-gold) 0%, #fbbf24 50%, var(--accent-gold) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 3s linear infinite; }
@keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.logo-subtitle { font-size: 16px; color: var(--text-secondary); font-weight: 400; margin-top: 4px; letter-spacing: 2px; }
.login-form { width: 100%; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.login-footer { color: var(--text-muted); font-size: 14px; text-align: center; }
/* Sayfa kayarken arka plan süsü yerinde kalsın */
.bg-tiles { position: fixed; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.bg-tiles::before, .bg-tiles::after { content: '🀄'; position: absolute; font-size: 200px; opacity: 0.03; animation: drift 20s linear infinite; }
.bg-tiles::before { top: -100px; left: -100px; animation-duration: 25s; }
.bg-tiles::after { bottom: -100px; right: -100px; animation-duration: 30s; animation-direction: reverse; }
@keyframes drift { 0% { transform: rotate(0deg) translate(0,0); } 50% { transform: rotate(-3deg) translate(-20px, 40px); } 100% { transform: rotate(0deg) translate(0,0); } }

/* ============================================================ LOBBY */
#lobby-screen { background: var(--bg-primary); justify-content: flex-start; }
.lobby-container { width: 100%; max-width: 800px; height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 0 16px; }
.lobby-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-glass); }
.lobby-brand { display: flex; align-items: center; gap: 10px; }
.lobby-brand h2 { font-weight: 700; letter-spacing: 3px; background: linear-gradient(135deg, var(--accent-gold), #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.lobby-user { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: white; }
.user-name { font-weight: 500; color: var(--text-secondary); }
.lobby-content { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 0; }
.lobby-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; margin-bottom: 24px; }
.join-by-code { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 220px; }
.join-by-code .text-input { padding: 10px 14px; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; }
.join-by-code .btn { padding: 10px 20px; flex-shrink: 0; }
.waiting-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.section-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 16px; }
/* Geniş ekranda odalar yan yana, darda alt alta — tek kural */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.room-card { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: var(--r-md); cursor: pointer; transition: all var(--normal); }
.room-card:hover { background: var(--bg-glass-hover); border-color: var(--accent-emerald); transform: translateX(4px); }
.room-card-info { display: flex; flex-direction: column; gap: 4px; }
.room-card-code { font-weight: 700; font-size: 16px; letter-spacing: 2px; color: var(--accent-gold); }
.room-card-players { font-size: 13px; color: var(--text-secondary); }
.room-card-count { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.room-card-count .dot { width: 8px; height: 8px; background: var(--accent-emerald); border-radius: 50%; animation: pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.no-rooms { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--text-muted); }
.no-rooms-icon { font-size: 48px; display: block; margin-bottom: 12px; }

/* ============================================================ WAITING
   Burası da yatayda taşıyordu: 4 slot + başlık + butonlar 390px'e sığmıyor
   ve "Odadan Ayrıl" ekran dışında kalıyordu. Login ile aynı çözüm. */
#waiting-screen { background: var(--bg-primary); overflow-y: auto; overflow-x: hidden; justify-content: flex-start; }
.waiting-container { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 24px; max-width: 500px; width: 100%; }
.waiting-header { width: 100%; padding: 24px; text-align: center; }
.waiting-header h2 { font-size: 24px; margin-bottom: 16px; }
.room-code-section { display: flex; align-items: center; justify-content: center; gap: 12px; }
.room-code-label { font-size: 13px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.room-code { font-size: 28px; font-weight: 800; letter-spacing: 6px; color: var(--accent-gold); }
.player-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.player-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; background: var(--bg-glass); border: 2px dashed var(--border-glass); border-radius: var(--r-md); transition: all var(--normal); }
.player-slot.filled { border-style: solid; border-color: var(--accent-emerald); background: rgba(16, 185, 129, 0.08); }
.slot-avatar { font-size: 32px; opacity: 0.4; transition: opacity var(--normal); }
.player-slot.filled .slot-avatar { opacity: 1; }
.slot-name { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.player-slot.filled .slot-name { color: var(--text-primary); }
.waiting-info { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); }
.waiting-spinner { width: 24px; height: 24px; border: 3px solid var(--border-glass); border-top-color: var(--accent-emerald); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================ GAME SCREEN */
/* Tam ekranda (Safari "Ana Ekrana Ekle") ekranın yuvarlak köşeleri ve
   çentiği köşedeki atılan taşı kırpıyordu — güvenli alan kadar içeri al. */
#game-screen {
  background: var(--bg-table-felt); justify-content: flex-start; align-items: stretch;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: var(--safe-r);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: var(--safe-l);
}

/* Ayrı üst bar kaldırıldı; aşağıdaki parçalar masanın bilgi şeridine ve
   istakanın üstündeki çubuğa dağıtıldı. Kazanılan yer masaya gitti. */
/* KAPTIR yazısı aynı zamanda "masadan kalk" butonu */
.game-logo { font-family: inherit; font-weight: 700; letter-spacing: 2px; color: var(--accent-gold); font-size: 13px; background: none; border: 1px solid transparent; padding: 3px 8px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--fast), border-color var(--fast); }
.game-logo:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.45); color: #fca5a5; }
/* Sol üst köşede, atılan taşın üstünde — dar sütuna sığacak boyda */
.corner-tl .game-logo { font-size: 10px; letter-spacing: 1px; padding: 2px 5px; flex-shrink: 0; }
.round-badge { font-size: 11px; font-weight: 700; color: var(--text-secondary); background: rgba(0,0,0,0.3); padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap; }
.multiplier-badge { font-size: 12px; font-weight: 800; color: var(--accent-gold); background: rgba(240,180,48,0.15); padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid rgba(240,180,48,0.3); }
.multiplier-badge.hot { animation: mult-glow 1.6s ease-in-out infinite; }
@keyframes mult-glow { 0%,100% { box-shadow: 0 0 0 rgba(240,180,48,0); } 50% { box-shadow: 0 0 12px var(--accent-gold-glow); } }
.phase-indicator { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-sm); background: rgba(16,185,129,0.2); color: var(--accent-emerald); text-transform: uppercase; letter-spacing: 1px; }
.phase-indicator.phase-wait { background: rgba(100,100,100,0.2); color: var(--text-muted); }
.phase-indicator.phase-draw { background: rgba(59,130,246,0.2); color: #60a5fa; }
.phase-indicator.phase-discard { background: rgba(239,68,68,0.2); color: #f87171; }

/* Süre + faz tek küme — artık KENDİ İSTAKAMIN üstünde duruyor */
.turn-cluster { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; background: rgba(0,0,0,0.3); border-radius: 999px; flex-shrink: 0; }
.turn-timer { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.timer-ring { position: absolute; width: 100%; height: 100%; transform: rotate(-90deg); }
.timer-ring-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 3; }
.timer-ring-fill { fill: none; stroke: var(--accent-emerald); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke var(--fast); }
.timer-ring-fill.warning { stroke: var(--accent-gold); }
.timer-ring-fill.danger { stroke: var(--accent-red); }
.timer-text { font-size: 13px; font-weight: 700; z-index: 1; }

/* ============================================================ GAME TABLE GRID */
/* Üst satır sabit, alt satır istakanın (hep 2 sıra) boyunda, orta 1fr.
   Böylece köşelere taş atılması ya da sıranın değişmesi masanın alanını
   OYNATMAZ — eskiden üst satır `auto` olduğu için her atışta ortadaki
   masa biraz daha küçülüyordu. */
.game-table {
  flex: 1; display: grid;
  grid-template-columns: var(--side-col) 1fr var(--side-col);
  grid-template-rows: var(--row-top) minmax(0, 1fr) auto;
  gap: 0; overflow: hidden; position: relative;
}
/* NOT: "sıra bize gelince taşlar büyüsün" özelliği KALDIRILDI — mobilde
   sürekli boyut değişimi rahatsız ediyordu. Boyutlar el boyunca sabit. */

/* ============================================================ DISCARD CORNERS */
.discard-corner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 4px;
  background: rgba(0,0,0,0.2); overflow: hidden;
  max-height: 100%; position: relative; transition: background var(--fast), box-shadow var(--fast);
}
.corner-tiles { display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
/* Atık sayacı. Geçmiş görülebiliyorsa (çifte giden) dokunulabilir hâle gelir
   ve geçmişi ayrı bir panelde açar — masada sürekli yer kaplamaz. */
.corner-count {
  font-family: inherit; font-size: 9px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,0.35); background: none; border: 1px solid transparent;
  padding: 2px 6px; border-radius: 7px; cursor: default;
}
.corner-count:empty { display: none; }
.corner-count.openable {
  cursor: pointer; color: var(--accent-gold);
  background: rgba(240,180,48,0.14); border-color: rgba(240,180,48,0.35);
}
.corner-count.openable:hover { background: rgba(240,180,48,0.26); }
/* Alınabilir taş belirgin olsun */
.drawable-corner .corner-tiles .tile { box-shadow: 0 3px 10px rgba(0,0,0,0.45); }
.corner-hint { font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 1px 6px; border-radius: 6px; }
/* Üst köşeler yalnız BİLGİ: buradan taş alınamaz. Taş ve sayaç yan yana
   durur ki sabit üst satıra rahat sığsın. */
.corner-tl, .corner-tr { flex-direction: row; gap: 4px; padding: 2px 4px; }
.corner-tl { grid-column: 1; grid-row: 1; border-radius: 0 0 var(--r-sm) 0; }
.corner-tr { grid-column: 3; grid-row: 1; border-radius: 0 0 0 var(--r-sm); }
.corner-bl { grid-column: 1; grid-row: 3; border-radius: 0 var(--r-sm) 0 0; }
.corner-br { grid-column: 3; grid-row: 3; border-radius: var(--r-sm) 0 0 0; }
.discard-corner.active-turn { box-shadow: inset 0 0 0 1px var(--accent-emerald); }

/* Sol alt: soldaki oyuncunun attığı taş — tıklayarak alınır,
   alınan taş buraya geri sürüklenerek iade edilir */
.drawable-corner { cursor: default; }
body.dragging-returnable .drawable-corner {
  background: rgba(240,180,48,0.16);
  outline: 2px dashed var(--accent-gold); outline-offset: -4px;
}
.drawable-corner.drop-hover {
  background: rgba(240,180,48,0.32);
  box-shadow: inset 0 0 0 3px var(--accent-gold), 0 0 22px var(--accent-gold-glow);
}
.corner-return-hint {
  display: none; font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: var(--accent-gold); background: rgba(240,180,48,0.18);
  padding: 1px 6px; border-radius: 6px;
}
body.dragging-returnable .drawable-corner .corner-return-hint { display: block; }
body.dragging-returnable .drawable-corner .corner-hint { display: none; }
.drawable-corner .corner-hint { color: var(--accent-blue); background: rgba(59,130,246,0.15); visibility: hidden; }
.drawable-corner.takeable { cursor: pointer; background: rgba(59,130,246,0.14); box-shadow: inset 0 0 0 2px rgba(59,130,246,0.5); animation: take-glow 1.8s ease-in-out infinite; }
.drawable-corner.takeable:hover { background: rgba(59,130,246,0.24); }
.drawable-corner.takeable .tile { transform: translateY(-2px); }
@keyframes take-glow {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(59,130,246,0.4); }
  50% { box-shadow: inset 0 0 0 2px rgba(59,130,246,0.9), 0 0 14px rgba(59,130,246,0.35); }
}

/* Sağ alt: taş atma bölgesi (sürükle-bırak) */
.discard-zone .corner-hint { color: var(--accent-red); background: rgba(239,68,68,0.15); }
.discard-zone.armed { background: rgba(239,68,68,0.10); box-shadow: inset 0 0 0 2px rgba(239,68,68,0.35); }
.discard-zone.armed .corner-hint { animation: at-pulse 1.6s ease-in-out infinite; }
@keyframes at-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.discard-zone.drop-hover {
  background: rgba(239,68,68,0.3);
  box-shadow: inset 0 0 0 3px var(--accent-red), 0 0 24px rgba(239,68,68,0.5);
  transform: scale(1.02);
}
body.dragging-active .discard-zone.armed { outline: 2px dashed rgba(239,68,68,0.7); outline-offset: -4px; }

/* ============================================================ OPPONENTS
   Rakiplerin taşları ÇİZİLMEZ ve sayıları yazılmaz — yalnız isim ve durum.
   Yan sütunlarda dikey dizilen taş sırtları en çok yeri yiyen şeydi;
   kalkınca o alan istakaya ve masaya gitti. */
.opponent-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 3px; min-height: 0; min-width: 0; overflow: hidden; }
.opponent-left { grid-column: 1; grid-row: 2; }
.opponent-right { grid-column: 3; grid-row: 2; }
.opponent-info { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; padding: 3px 8px; background: rgba(0,0,0,0.35); border-radius: var(--r-sm); }

/* Açan oyuncunun puanı, isminin SAĞ ÜST köşesinde:
        60
   yahya                                                              */
.name-wrap { position: relative; display: inline-flex; align-items: center; }
.open-score-chip {
  position: absolute; top: -8px; right: -7px; z-index: 2;
  font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap;
  padding: 2px 5px; border-radius: 8px;
  background: var(--accent-gold); color: #1a1a1a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.open-score-chip.pairs { background: var(--accent-purple); color: #fff; }
.opponent-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sol ve sağdaki oyuncuların adı DİKEY akar, harfler 90° yatar — dar sütunda
   yatay isim ya taşar ya da sütunu şişirirdi. İki taraf zıt yöne döner ki
   isim her zaman masanın ortasına bakacak şekilde okunsun:
     SOL  "yahya" ->  y a h y a   (yukarıdan aşağı, harf tepeleri sağa)
     SAĞ  "yahya" ->  a y h a y   (aşağıdan yukarı, harf tepeleri sola)   */
.opponent-left .opponent-name,
.opponent-right .opponent-name { writing-mode: vertical-rl; letter-spacing: 1px; max-height: 100%; }
.opponent-right .opponent-name { transform: rotate(180deg); }
.opponent-left .opponent-info,
.opponent-right .opponent-info { padding: 8px 3px; }
/* Dar sütunda rozetler de küçülsün, ortadaki masaya taşmasın */
.opponent-left .open-badge,
.opponent-right .open-badge { font-size: 8px; padding: 1px 4px; }

/* Üstteki oyuncuda dikey boşluk israftı: isim ve rozetler TEK SATIRDA
   yan yana durur, satır yüksekliği kadar yer kaplar. */
.opponent-top { flex-direction: row; flex-wrap: nowrap; gap: 5px; }
.opponent-top .opponent-open-groups { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }
.opponent-area.active-turn .opponent-info { background: rgba(16,185,129,0.25); border: 1px solid var(--accent-emerald); animation: turn-glow 1.5s ease-in-out infinite; }
@keyframes turn-glow { 0%, 100% { box-shadow: 0 0 8px rgba(16,185,129,0.3); } 50% { box-shadow: 0 0 20px rgba(16,185,129,0.5); } }
.opponent-open-groups { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 100%; }
.open-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 10px; background: rgba(16,185,129,0.2); color: var(--accent-emerald); border: 1px solid rgba(16,185,129,0.4); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ CENTER */
/* Masa ÜST SATIRA DA taşar (grid-row 1/span 2) — böylece açılan taşların
   alanı yukarı doğru büyümüş olur. Sağında ince bir bilgi şeridi var:
        ┌──────────────────────┐  (karşıdaki oyuncu)
        │   açılan taşlar      │       [6]  Gösterge
        │                      │       [🂠] Deste
        └──────────────────────┘                      */
.center-area {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: row; align-items: stretch; gap: 6px;
  padding: 3px 6px; position: relative; min-height: 0; min-width: 0;
}
.melds-board { flex: 1; min-width: 0; }

.table-side {
  width: var(--table-side-w); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 2px 0; min-width: 0; overflow: hidden;
}
/* Şeritte karşıdaki oyuncu alt alta okunur (yan yana sığmaz) */
.table-side .opponent-area { flex-direction: column; gap: 3px; width: 100%; padding: 0; }
.table-side .opponent-info { padding: 2px 6px; }
/* İsmin altında skor tablosu + el bilgisi yan yana */
.side-row { display: flex; align-items: center; justify-content: center; gap: 5px; }
.side-row .btn-icon { font-size: 15px; padding: 1px 4px; }
.table-side .round-badge,
.table-side .color-badge,
.table-side .multiplier-badge { font-size: 9px; padding: 2px 6px; }
.table-side .color-badge { width: 100%; text-align: center; }

/* Gösterge ve deste bilerek KÜÇÜK. Gösterge merak edilirse basılınca büyür. */
.table-chip { width: 100%; }
.table-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 2px 6px; background: rgba(0,0,0,0.3); border: 1px solid transparent;
  border-radius: var(--r-sm); font-family: inherit; transition: transform var(--fast), background var(--fast);
}
.chip-caption { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.chip-zoom { color: var(--accent-gold); font-size: 9px; }
.indicator-chip { cursor: pointer; }
.indicator-chip:hover { background: rgba(240,180,48,0.16); border-color: rgba(240,180,48,0.35); transform: translateY(-1px); }
.indicator-chip:hover .chip-caption { color: var(--accent-gold); }

/* Deste: basınca çekilir (taş uçarak istakaya gider) ya da istakaya sürüklenir */
.draw-pile { cursor: default; touch-action: none; }
.draw-pile.drawable { cursor: grab; animation: pile-pulse 2s ease-in-out infinite; }
.draw-pile.drawable:active { cursor: grabbing; }
.draw-pile.drawable:hover { transform: translateY(-1px) scale(1.04); }
.draw-pile.empty { opacity: 0.35; }
/* Sürükleme sırasında hedef istaka bariz olsun */
body.dragging-draw .rack { box-shadow: 0 0 0 2px var(--accent-blue), 0 0 26px rgba(59,130,246,0.35); }
body.dragging-draw .rack-slot:not(.filled) { background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.55); }
@keyframes pile-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.pile-stack { position: relative; width: calc(var(--tile-w) * var(--tile-chip-k)); height: calc(var(--tile-h) * var(--tile-chip-k)); }
.pile-tile { position: absolute; width: 100%; height: 100%; background: var(--tile-back); border-radius: calc(var(--tile-r) * 0.6); border: 1.5px solid rgba(255,255,255,0.15); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.pile-tile:nth-child(1) { top: -3px; left: -2px; }
.pile-tile:nth-child(2) { top: -1.5px; left: -1px; }
.pile-tile:nth-child(3) { top: 0; left: 0; }
/* Kalan taş sayısı yığının içinde */
.pile-count {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--tile-w) * var(--tile-chip-k) * 0.5); font-weight: 800; color: var(--accent-gold);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

/* Desteye basınca taş istakaya uçar */
.draw-fly {
  position: fixed; z-index: 450; pointer-events: none; margin: 0;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0.35, 1), opacity 380ms ease;
}

/* ============================================================ AÇILAN PERLER (orta tahta) */
.melds-board {
  flex: 1; width: 100%; min-height: 0; overflow-y: auto;
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;
  gap: 6px; padding: 6px;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-md);
}
.melds-empty { align-self: center; margin: auto; font-size: 11px; color: rgba(255,255,255,0.25); letter-spacing: 1px; }
.meld-card { display: flex; flex-direction: column; gap: 3px; padding: 4px 6px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-sm); align-self: flex-start; }
.meld-card.mine { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.08); }
.meld-owner { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.meld-type { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 6px; }
/* Açılış puanı — perlerin yanında (çift açanda çift sayısı) */
.meld-score { font-size: 10px; font-weight: 800; color: var(--accent-gold); background: rgba(240,180,48,0.16); border: 1px solid rgba(240,180,48,0.35); padding: 1px 6px; border-radius: 8px; margin-left: auto; }
.meld-score.pairs { color: #c4b5fd; background: rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.4); }

/* Perler ALT ALTA sıralanır */
.meld-groups { display: flex; flex-direction: column; gap: 3px; }
.meld-group { display: flex; gap: 1px; padding: 2px; border-radius: 5px; border: 1px dashed transparent; transition: all var(--fast); }
.meld-group.workable { border-color: rgba(255,255,255,0.12); }
body.dragging-active .meld-group.workable { border-color: rgba(16,185,129,0.6); background: rgba(16,185,129,0.08); }
.meld-group.drop-hover { border-color: var(--accent-emerald); border-style: solid; background: rgba(16,185,129,0.25); box-shadow: 0 0 14px rgba(16,185,129,0.4); }
/* Okey alma hedefi */
.meld-group.okey-swap-hover { border-color: var(--accent-gold); border-style: solid; background: rgba(240,180,48,0.25); box-shadow: 0 0 14px var(--accent-gold-glow); }

/* Çift kartına çift işleme hedefi */
.meld-card.pair-target { border-style: dashed; }
body.dragging-pair .meld-card.pair-target { border-color: rgba(139,92,246,0.7); background: rgba(139,92,246,0.12); }
.meld-card.pair-target.drop-hover { border-color: var(--accent-purple); border-style: solid; background: rgba(139,92,246,0.28); box-shadow: 0 0 16px rgba(139,92,246,0.5); }
.meld-pair-hint { font-size: 8px; font-weight: 700; letter-spacing: 1px; color: var(--accent-purple); text-transform: uppercase; display: none; }
body.dragging-pair .meld-card.pair-target .meld-pair-hint { display: block; }

/* ============================================================ PLAYER AREA (İKİ KATLI İSTAKA) */
.player-area {
  grid-column: 2; grid-row: 3; display: flex; flex-direction: column; gap: 3px;
  background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.08);
  padding: 3px 6px 6px; border-radius: var(--r-md) var(--r-md) 0 0;
}
.player-area.active-turn { border-top-color: var(--accent-emerald); box-shadow: 0 -3px 15px rgba(16,185,129,0.2); }
/* İstakanın üstü — üç bölge:
     SOL  kim / kaç puanla açtı / eldeki per puanı / ceza
     ORTA süre + ne yapmam gerektiği  (TAM ORTADA)
     SAĞ  masa bilgisi + kontroller
   `1fr auto 1fr` ızgarası ortayı yanlardaki içerikten bağımsız ortalar;
   flex ile ortalasaydık yan grupların genişliği ortayı kaydırırdı.
   Satır asla sarmaz — yükseklik el boyunca sabit kalsın diye. */
.player-info-bar {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px; padding: 1px 2px; min-width: 0;
}
.info-group {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.info-group::-webkit-scrollbar { display: none; }
.info-group > * { flex-shrink: 0; }
.info-state { justify-self: start; gap: 6px; }
.info-meta  { justify-self: end; }
.turn-cluster { justify-self: center; }
.info-meta .btn-icon { font-size: 15px; padding: 2px 4px; }
/* Tam ekran mobilde işe yaramıyor (iOS sayfa tam ekranını desteklemiyor) */
@media (pointer: coarse), (max-width: 900px) {
  #fullscreen-btn { display: none; }
}
.player-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.hand-score { font-size: 11px; font-weight: 700; color: var(--text-muted); background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: var(--r-sm); white-space: nowrap; }
.hand-score.ok { color: var(--accent-emerald); background: rgba(16,185,129,0.15); }
/* KAPTIR: göstergenin rengi = el sonu ceza çarpanı */
.color-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-secondary);
}
.color-badge.c-red    { color: var(--tile-red);    background: rgba(220,38,38,0.16);  border-color: rgba(220,38,38,0.45); }
.color-badge.c-black  { color: #d4d4d4;            background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.3); }
.color-badge.c-blue   { color: var(--tile-blue);   background: rgba(37,99,235,0.18);  border-color: rgba(37,99,235,0.5); }
.color-badge.c-yellow { color: var(--tile-yellow); background: rgba(217,160,20,0.18); border-color: rgba(217,160,20,0.5); }
.color-badge.c-joker  { color: #c4b5fd;            background: rgba(139,92,246,0.22); border-color: rgba(139,92,246,0.55); }
/* Birikmiş işlek taş cezası */
.foul-badge {
  font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap;
  background: rgba(239,68,68,0.28); border: 1px solid rgba(239,68,68,0.6);
  padding: 2px 8px; border-radius: var(--r-sm);
}
/* İstaka bölgesi: [istaka | tuşlar]. Tüm tuşlar SAĞ sütunda.
   Sütun istaka boyunu AŞAMAZ (max-height) — aşsaydı buton belirip
   kaybolurken alt satırın yüksekliği oynardı. */
.rack-zone { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.rack-side {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  width: var(--rack-side-w); flex-shrink: 0; align-self: center;
  max-height: calc(var(--rack-rows) * var(--tile-h) + 12px);
  overflow-y: auto; scrollbar-width: none;
}
.rack-side::-webkit-scrollbar { display: none; }
/* Tuşlar kalın ve rahat basılabilir olsun (ince görünüyordu) */
.rack-side .btn { width: 100%; padding: 8px 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Boş kalan sütun görsel boşluk yaratmasın */
.rack-side:empty { display: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); }
.btn:disabled:active { transform: none; }

/* İstaka: iki sıra × N slot */
.rack {
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px 6px; border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(0,0,0,0.32), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Slotlar taş genişliğini AŞMAZ, dar ekranda birlikte küçülür, artan
   boşlukta ortalanır. Yükseklik `aspect-ratio` ile genişliğe bağlı:
   slot daralınca taş yamulmadan küçülür. */
.rack-row {
  display: grid;
  grid-template-columns: repeat(var(--rack-cols), minmax(0, var(--tile-w)));
  justify-content: center;
  gap: 3px;
}
.rack-slot {
  position: relative; aspect-ratio: 5 / 7;   /* = --tile-ratio 1.4 */
  border-radius: var(--tile-r);
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.07);
  touch-action: none;
  transition: background var(--fast), box-shadow var(--fast);
}
.rack-slot.filled { border-color: transparent; background: transparent; }
.rack-slot.drop-hover { background: rgba(240,180,48,0.25); border-color: var(--accent-gold); box-shadow: 0 0 12px var(--accent-gold-glow); }
body.dragging-active .rack-slot:not(.filled) { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }

/* Slot içindeki taş sığdırılır — yazı boyu taş genişliğinden türer */
.rack-slot .tile { width: 100%; height: 100%; font-size: calc(var(--tile-w) * 0.44); }
.rack-slot .tile .tile-dot { width: calc(var(--tile-w) * 0.11); height: calc(var(--tile-w) * 0.11); }

/* Grup gösterimi: geçerli = yeşil, geçersiz = kırmızı, çift = mor */
.rack-slot::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px;
  border-radius: 2px; opacity: 0; transition: opacity var(--fast);
}
.rack-slot.g-valid::after { background: var(--accent-emerald); box-shadow: 0 0 8px var(--accent-emerald-glow); opacity: 1; }
.rack-slot.g-invalid::after { background: var(--accent-red); opacity: 0.75; }
.rack-slot.g-pair::after { background: var(--accent-purple); opacity: 0.8; }
/* Geçerli ama 5'ten uzun: masaya konamaz, bölünmeli */
.rack-slot.g-long::after { background: var(--accent-gold); opacity: 0.9; }
.rack-slot.g-first::after { left: 2px; border-radius: 2px 0 0 2px; }
.rack-slot.g-last::after { right: 2px; border-radius: 0 2px 2px 0; }
.rack-slot.g-valid .tile { box-shadow: 0 0 0 1.5px rgba(16,185,129,0.55), 0 2px 6px rgba(0,0,0,0.25); }
.rack-slot.g-invalid .tile { box-shadow: 0 0 0 1.5px rgba(239,68,68,0.45), 0 2px 6px rgba(0,0,0,0.25); }
.rack-slot.g-long .tile { box-shadow: 0 0 0 1.5px rgba(240,180,48,0.6), 0 2px 6px rgba(0,0,0,0.25); }

/* ============================================================ TILES */
.tile {
  width: var(--tile-w); height: var(--tile-h); border-radius: var(--tile-r);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; font-size: calc(var(--tile-w) * 0.44); cursor: grab;
  transition: transform var(--fast), box-shadow var(--fast),
              width var(--normal), height var(--normal), font-size var(--normal);
  position: relative; box-shadow: 0 2px 6px rgba(0,0,0,0.2); flex-shrink: 0;
  -webkit-user-select: none; user-select: none; touch-action: none;
  -webkit-touch-callout: none;   /* uzun basışta iOS menüsü çıkmasın */
}
.tile-front { background: #f8f5f0; border: 2px solid #e0dcd4; }
.tile-front:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.tile-front.selected { transform: translateY(-6px); border-color: var(--accent-gold); box-shadow: 0 0 12px var(--accent-gold-glow); }
.tile-front .tile-number { line-height: 1; }
.tile-front .tile-dot { width: 5px; height: 5px; border-radius: 50%; margin-top: 2px; }
.tile-red .tile-number { color: var(--tile-red); }
.tile-red .tile-dot { background: var(--tile-red); }
.tile-yellow .tile-number { color: var(--tile-yellow); }
.tile-yellow .tile-dot { background: var(--tile-yellow); }
.tile-blue .tile-number { color: var(--tile-blue); }
.tile-blue .tile-dot { background: var(--tile-blue); }
.tile-black .tile-number { color: var(--tile-black); }
.tile-black .tile-dot { background: var(--tile-black); }
/* Sahte okey — fiziksel settekiyle aynı mantık: gövdesi normal taş, ama
   sayı yerine rengârenk ✱ taşır. Hangi taşı temsil ettiği ortadaki
   göstergeden okunur; taşın üstünde yazmaz. */
.tile-fake .tile-number {
  /* Outfit latin-only: ✱ (U+2731) sistem sembol fontundan gelir */
  font-family: 'Outfit', 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
  background: var(--tile-fake-rainbow);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-size: 1.3em; font-weight: 800;
}
.tile-fake .tile-dot { background: var(--tile-fake-conic); }
.tile-back { background: var(--tile-back); border: 1.5px solid rgba(255,255,255,0.12); cursor: default; }
.tile-back::after { content: '✦'; color: rgba(255,255,255,0.15); font-size: 14px; }
/* mini = gösterge + atık köşeleri · tiny = masadaki perler.
   İkisi de --tile-w'den türer, sıra bize gelince katsayı büyür. */
.tile.mini {
  width: calc(var(--tile-w) * var(--tile-mini-k));
  height: calc(var(--tile-h) * var(--tile-mini-k));
  font-size: calc(var(--tile-w) * var(--tile-mini-k) * 0.44);
  border-radius: calc(var(--tile-r) * 0.8);
}
.tile.mini .tile-dot { width: calc(var(--tile-w) * var(--tile-mini-k) * 0.10); height: calc(var(--tile-w) * var(--tile-mini-k) * 0.10); }
.tile.tiny {
  width: calc(var(--tile-w) * var(--tile-tiny-k));
  height: calc(var(--tile-h) * var(--tile-tiny-k));
  font-size: calc(var(--tile-w) * var(--tile-tiny-k) * 0.46);
  border-radius: calc(var(--tile-r) * 0.62);
}
.tile.tiny .tile-dot { width: calc(var(--tile-w) * var(--tile-tiny-k) * 0.11); height: calc(var(--tile-w) * var(--tile-tiny-k) * 0.11); }
/* corner = ALT köşeler (aldığım/attığım taş) — sıra bendeyken büyür.
   corner-sm = ÜST köşeler — sabit kalır, üst satırı şişirmesin. */
.tile.corner {
  width: var(--tile-corner-w);
  height: calc(var(--tile-corner-w) * var(--tile-ratio));
  font-size: calc(var(--tile-corner-w) * 0.44);
  border-radius: calc(var(--tile-r) * 0.8);
}
.tile.corner .tile-dot { width: calc(var(--tile-corner-w) * 0.10); height: calc(var(--tile-corner-w) * 0.10); }
.tile.corner-sm {
  width: var(--tile-corner-sm-w);
  height: calc(var(--tile-corner-sm-w) * var(--tile-ratio));
  font-size: calc(var(--tile-corner-sm-w) * 0.46);
  border-radius: calc(var(--tile-r) * 0.6);
}
.tile.corner-sm .tile-dot { width: calc(var(--tile-corner-sm-w) * 0.12); height: calc(var(--tile-corner-sm-w) * 0.12); }
/* chip = gösterge + deste — sabit küçük kalır */
.tile.chip {
  width: calc(var(--tile-w) * var(--tile-chip-k));
  height: calc(var(--tile-h) * var(--tile-chip-k));
  font-size: calc(var(--tile-w) * var(--tile-chip-k) * 0.5);
  border-radius: calc(var(--tile-r) * 0.55);
  cursor: inherit;
}
.tile.chip .tile-dot { width: calc(var(--tile-w) * var(--tile-chip-k) * 0.12); height: calc(var(--tile-w) * var(--tile-chip-k) * 0.12); }

/* GERÇEK okey normal taş gibi görünür — çekilince ya da dağıtılınca
   üstünde hiçbir işaret yoktur, oyuncu kendi fark etmek zorundadır.
   İstakada basılı tutunca taş BOMBOŞ BEYAZ olur (arkası dönmüş gibi),
   tekrar basılı tutunca eski hâline döner. Bu yalnız kendi istakanızdaki
   kişisel bir hatırlatmadır — masaya konan ya da atılan taş asla boş
   görünmez, orada taşın kendisi çizilir.
   (Sahte okey ayrı bir taştır ve ✱ ile zaten görünür.) */
.tile.okey-mark {
  background: #ffffff; border-color: #e6e2da;
  animation: okey-mark-in 0.16s ease;
}
.tile.okey-mark .tile-number,
.tile.okey-mark .tile-dot { visibility: hidden; }
@keyframes okey-mark-in { from { opacity: 0.45; } to { opacity: 1; } }

.tile.dragging { opacity: 0.25; }
.tile.slotted { cursor: grab; }
.tile.slotted:active { cursor: grabbing; }
.tile.just-drawn { animation: just-drawn-pop 1.4s ease 2; }
@keyframes just-drawn-pop {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
  50% { box-shadow: 0 0 0 2px var(--accent-blue), 0 0 14px rgba(59,130,246,0.6); }
}

/* NOT: İşlek taş istakada işaretlenmez — oyuncu kendi fark etmeli. */

/* ============================================================ DRAG GHOST */
.drag-ghost {
  position: fixed; z-index: 500; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-5deg) scale(1.15);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
  transition: none;
}

/* ============================================================ OVERLAYS */
.turn-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; pointer-events: none; }
.turn-message { font-size: 28px; font-weight: 800; color: var(--accent-gold); text-shadow: 0 0 30px var(--accent-gold-glow); animation: turnPop 2s ease forwards; }
@keyframes turnPop { 0% { opacity: 0; transform: scale(0.5); } 20% { opacity: 1; transform: scale(1.1); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(0.8) translateY(-20px); } }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; }

/* ---- Atık geçmişi kartı ---------------------------------------------
   Tam sayfa DEĞİL: basılan köşenin yanında yarım ekranlık bir kart olarak
   açılır, oyun ekranı arkasında görünmeye devam eder. */
#history-overlay { background: rgba(0,0,0,0.28); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; display: block; }
.history-panel {
  position: absolute; width: min(58vw, 420px); min-width: 200px;
  max-height: 52vh; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}
#history-overlay.at-tl .history-panel { top: 8px; left: 8px; }
#history-overlay.at-tr .history-panel { top: 8px; right: 8px; }
#history-overlay.at-bl .history-panel { bottom: 8px; left: 8px; }
#history-overlay.at-br .history-panel { bottom: 8px; right: 8px; }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.history-title { font-size: 13px; font-weight: 700; color: var(--accent-gold); }
.history-tiles { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-start; overflow-y: auto; padding: 2px 0; }
.history-tiles .tile { cursor: default; }
.history-note { font-size: 10px; font-weight: 600; color: var(--text-muted); }

/* ---- Göstergeyi büyütme paneli --------------------------------------
   Masadaki gösterge bilerek küçük; merak edilince burada büyür.
   Taş boyutu --tile-w'den türediği için tek satırla büyütülüyor. */
.indicator-panel { max-width: 340px; width: 100%; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.indicator-big { --tile-w: 96px; display: flex; }
.indicator-facts { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.indicator-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 5px 10px; background: rgba(0,0,0,0.3); border-radius: var(--r-sm); }
.indicator-fact span:first-child { color: var(--text-secondary); }
.indicator-fact span:last-child { font-weight: 800; color: var(--accent-gold); }

/* ---- Dikey mod: zorlama yok, yalnızca öneri ------------------------- */
.rotate-bar {
  display: none; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 5px 10px; background: rgba(240,180,48,0.14);
  border-bottom: 1px solid rgba(240,180,48,0.3);
  font-size: 11px; font-weight: 600; color: #fcd34d; z-index: 11;
}
.rotate-bar-icon { font-size: 14px; animation: rotate-hint 2.4s ease-in-out infinite; display: inline-block; }
@keyframes rotate-hint { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
.rotate-bar-text { flex: 1; line-height: 1.3; }
.rotate-bar-close { background: none; border: none; color: inherit; font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.rotate-bar-close:hover { background: rgba(255,255,255,0.12); }
@media (orientation: portrait) and (max-width: 900px) {
  #game-screen.active .rotate-bar { display: flex; }
  body.rotate-dismissed #game-screen.active .rotate-bar { display: none; }
}
/* Masadan kalkma onayı */
.leave-panel { max-width: 380px; width: 100%; padding: 26px; text-align: center; display: flex; flex-direction: column; gap: 16px; }
.leave-note { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.leave-actions { display: flex; gap: 10px; justify-content: center; }
.leave-actions .btn { flex: 1; }
.gameover-panel { max-width: 480px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 28px; text-align: center; display: flex; flex-direction: column; gap: 18px; }
.gameover-title { font-size: 24px; font-weight: 800; color: var(--accent-gold); }
.gameover-note { font-size: 13px; font-weight: 700; color: var(--accent-purple); min-height: 0; }
.gameover-note:empty { display: none; }
.score-section { display: flex; flex-direction: column; gap: 8px; }
.score-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); text-align: left; }
.scores-table { display: flex; flex-direction: column; gap: 6px; }
.score-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; background: rgba(0,0,0,0.3); border-radius: var(--r-sm); border: 1px solid transparent; }
.score-row.winner { background: rgba(16,185,129,0.15); border-color: var(--accent-emerald); }
.score-row.eliminated { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.5); }
.score-rank { font-size: 17px; min-width: 22px; }
.score-name { flex: 1; text-align: left; margin-left: 10px; font-weight: 600; font-size: 14px; }
.score-value { font-weight: 800; font-size: 16px; color: var(--accent-gold); }
.score-row.winner .score-value { color: var(--accent-emerald); }
.standings .score-value { color: var(--text-primary); }
.gameover-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.next-round-info { font-size: 13px; font-weight: 600; color: var(--accent-emerald); min-height: 18px; }
.open-badge.pairs-declared { background: rgba(139,92,246,0.2); color: #c4b5fd; border-color: rgba(139,92,246,0.45); }
.open-badge.foul { background: rgba(239,68,68,0.22); color: #fca5a5; border-color: rgba(239,68,68,0.55); }
/* El sonunda ceza dökümü */
.score-note { display: block; font-size: 10px; font-weight: 600; color: var(--accent-red); margin-top: 2px; line-height: 1.35; }
.score-row.has-note { align-items: flex-start; }
/* Canlı skor tablosu: satırlar uzun döküm içerdiği için biraz nefes alsın */
#score-overlay .score-row { padding: 8px 12px; }
#score-overlay .score-note { color: var(--text-secondary); }
#score-overlay .score-value { font-size: 15px; }

/* ============================================================ TOAST */
#toast-container { position: fixed; top: 16px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 12px 20px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: white; animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards; max-width: 320px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.toast.error { background: linear-gradient(135deg, var(--accent-red), #dc2626); }
.toast.success { background: linear-gradient(135deg, var(--accent-emerald), #059669); }
.toast.info { background: linear-gradient(135deg, var(--accent-blue), #2563eb); }
@keyframes toastIn { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-10px); } }

/* ============================================================ RESPONSIVE
   Ölçü artık --tile-max / --tile-vh / --side-col üçlüsünden geliyor;
   kırılımlar bu üçünü ayarlar, taş boyutları kendiliğinden büyür.
   BİRİNCİL HEDEF: mobil YATAY mod. */
@media (max-width: 900px) {
  :root { --side-col: 62px; --tile-max: 48px; --tile-vh: 0.114; --table-side-w: 84px; }
  .btn-sm { padding: 4px 9px; font-size: 11px; }
  .meld-card { padding: 3px 4px; }

  /* --- Giriş / lobi / bekleme: dar ekran --- */
  .logo-icon { font-size: 48px; margin-bottom: 8px; }
  .logo-title { font-size: 36px; letter-spacing: 4px; }
  .logo-subtitle { font-size: 14px; }
  .login-container { gap: 22px; padding: 20px 16px; }
  .login-form { padding: 22px; gap: 16px; }
  .lobby-container { padding: 0 12px; }
  .lobby-header { padding: 12px 0; }
  .lobby-content { padding: 14px 0; }
  .lobby-actions { padding: 12px; margin-bottom: 16px; gap: 10px; }
  .join-by-code { min-width: 170px; }
  .waiting-container { gap: 20px; padding: 18px 16px; }
  .waiting-header { padding: 18px 14px; }
  .waiting-header h2 { font-size: 20px; margin-bottom: 12px; }
  .player-slot { padding: 16px 10px; }
}

/* Küçük telefon (dikey) — butonlar tam genişlik, taşma yok */
@media (max-width: 480px) {
  .logo-icon { font-size: 40px; }
  .logo-title { font-size: 30px; letter-spacing: 3px; }
  .logo-subtitle { font-size: 12px; letter-spacing: 1px; }
  .login-container { gap: 18px; }
  .login-form { padding: 18px; }
  .login-footer { font-size: 12px; }
  .lobby-brand h2 { font-size: 18px; }
  .user-name { display: none; }              /* avatar yeter, isim taşırıyordu */
  .lobby-actions { flex-direction: column; align-items: stretch; }
  .join-by-code { min-width: 0; }
  .lobby-actions > .btn { width: 100%; }
  .room-card { padding: 12px 14px; }
  .room-code-section { flex-wrap: wrap; gap: 6px; }
  .room-code { font-size: 22px; letter-spacing: 4px; }
  .waiting-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .waiting-actions .btn { width: 100%; }
}

/* Mobil yatay — oyunun asıl oynandığı yer. Çevre süsleri kısılır,
   kazanılan her piksel taşlara gider. */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --side-col: 54px; --tile-max: 46px; --tile-vh: 0.106; --tile-chip-k: 0.46; --tile-corner-top-k: 0.62; --rack-side-w: 84px; --table-side-w: 78px; }
  .turn-timer { width: 28px; height: 28px; }
  .timer-text { font-size: 11px; }
  .round-badge, .color-badge, .multiplier-badge { font-size: 9px; padding: 2px 6px; }
  .phase-indicator { font-size: 9px; padding: 2px 7px; }
  .game-logo { font-size: 11px; padding: 2px 6px; }
  .center-area { gap: 3px; padding: 2px 4px; }
  .table-side { gap: 4px; }
  .table-chip { padding: 1px 5px; }
  .chip-caption { font-size: 7px; }
  .player-area { padding: 2px 6px 4px; }
  .rack { gap: 3px; padding: 3px 5px; }
  .opponent-area { padding: 2px; }
  .discard-corner { padding: 3px 2px; }

  /* Yatayda dikey piksel kıt, yatay piksel bol: bir oyuncunun perleri
     ALT ALTA değil YAN YANA dizilir. Masa böylece yarı yüksekliğe iner
     ve açılan taşlar gerçekten görünür. */
  .melds-board { padding: 3px; gap: 4px; align-content: flex-start; }
  .meld-groups { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .meld-card { padding: 2px 4px; gap: 2px; }
  .meld-owner { font-size: 9px; gap: 4px; }
  .meld-type { display: none; }
  .meld-score { font-size: 9px; padding: 0 4px; }

  /* --- Giriş: logo ve form YAN YANA. Alt alta dizilince 390px'lik
         yatay ekrana sığmıyor, kaydırmak gerekiyordu. --- */
  .login-container { flex-direction: row; align-items: center; gap: 20px; max-width: 700px; padding: 12px 16px; }
  .logo-section { flex: 0 0 auto; }
  .logo-icon { font-size: 30px; margin-bottom: 2px; animation: none; }
  .logo-title { font-size: 26px; letter-spacing: 3px; }
  .logo-subtitle { font-size: 11px; margin-top: 0; }
  .login-form { flex: 1; padding: 14px 16px; gap: 10px; }
  .login-form .btn { padding: 9px 20px; }
  .input-label { margin-bottom: 4px; font-size: 11px; }
  .text-input { padding: 9px 14px; font-size: 15px; }
  .login-footer { display: none; }

  /* --- Lobi: başlık ve eylemler ince, oda listesi kayar --- */
  .lobby-header { padding: 6px 0; }
  .lobby-brand h2 { font-size: 17px; }
  .lobby-content { padding: 10px 0; }
  .lobby-actions { padding: 8px 10px; margin-bottom: 10px; gap: 8px; }
  .lobby-actions .btn { padding: 8px 14px; font-size: 13px; }
  .join-by-code .text-input { padding: 8px 12px; font-size: 14px; }
  .section-title { font-size: 12px; margin-bottom: 8px; }
  .room-card { padding: 9px 14px; }
  .no-rooms { padding: 20px 16px; }
  .no-rooms-icon { font-size: 32px; margin-bottom: 6px; }

  /* --- Bekleme: 4 slot tek sırada --- */
  .waiting-container { gap: 12px; padding: 10px 16px; max-width: 760px; }
  .waiting-header { padding: 10px 14px; }
  .waiting-header h2 { font-size: 17px; margin-bottom: 8px; }
  .room-code { font-size: 22px; letter-spacing: 4px; }
  .player-slots { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .player-slot { padding: 10px 6px; gap: 4px; }
  .slot-avatar { font-size: 24px; }
  .slot-name { font-size: 12px; }
  .waiting-spinner { width: 18px; height: 18px; }
  .waiting-info { font-size: 13px; }
}

/* Dar yatay (küçük telefon yan) — sütunları biraz daha kıs */
@media (orientation: landscape) and (max-height: 400px) {
  :root { --side-col: 50px; --tile-max: 44px; --tile-vh: 0.115; --tile-chip-k: 0.42; --tile-corner-top-k: 0.58; --rack-side-w: 76px; --table-side-w: 72px; }
  .rack-row { gap: 2px; }
  .rack-side .btn { padding: 3px 5px; font-size: 10px; }
  /* Çok alçak yatay ekran: giriş/lobi bir tık daha kısılır */
  .logo-icon { display: none; }
  .logo-title { font-size: 22px; }
  .login-container { gap: 14px; }
  .login-form { padding: 12px 14px; gap: 8px; }
  .lobby-actions { margin-bottom: 8px; }
  .waiting-container { gap: 9px; }
  .player-slot { padding: 8px 4px; }
  .slot-avatar { font-size: 20px; }
}

/* DİKEY MOD — artık ciddiye alınıyor: istaka ÜÇ katlı ve satır başına
   8 slot. Satır kısalınca taş genişliği ~20px'ten ~34px'e çıkıyor.
   Yandaki atık taşları ve masadaki perler de buna göre büyüyor. */
@media (orientation: portrait) {
  :root {
    --rack-cols: 8; --rack-rows: 3;
    --side-col: 48px; --tile-max: 46px; --tile-vh: 0.075; --table-side-w: 72px;
    --tile-tiny-k: 0.95;        /* masadaki perler — dikeyde dikey yer bol */
    --tile-corner-k: 0.92;      /* yandaki atık taşları */
    --tile-corner-top-k: 0.66;
    --tile-chip-k: 0.62;
    --rack-side-w: 0px;         /* dikeyde yan sütun yok — tuşlar üste geçer */
    /* bölen --rack-cols (8) ile aynı; 28px = 7×2px ara + 12px iç boşluk payı */
    --tile-w: min(
      var(--tile-max),
      calc((100vw - 2 * var(--side-col) - 28px) / 8),
      calc(100vh * var(--tile-vh))
    );
  }
  .rack-row { gap: 2px; }
  /* Dikeyde yan sütuna yer yok: tuşlar istakanın üstüne tek sıra geçer */
  .rack-zone { flex-wrap: wrap; }
  .rack-side {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    width: auto; max-height: none; overflow: visible;
  }
  .rack-side .btn { width: auto; }
  .rack { order: 1; flex-basis: 100%; }
  /* Dar şeritte el sayısı yer kaplamasın — 📊 tablosunda zaten var */
  .info-meta .round-badge { display: none; }
  .info-state, .info-meta { gap: 4px; }
  .hand-score { font-size: 10px; padding: 2px 6px; }
}

:fullscreen #game-screen, :-webkit-full-screen #game-screen { background: var(--bg-table-felt); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }