/* ==========================================================================
   Kral Masası — Premium Kumarhane Tasarım Sistemi
   Fontlar kendi sunucumuzdan servis edilir (SIL OFL) — dış bağımlılık yok.
   ========================================================================== */

/* Inter — arayüz */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/static/fonts/inter-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/static/fonts/inter-latin-800-normal.woff2') format('woff2');
}

/* Cormorant Garamond — marka / başlıklar */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/cormorant-garamond-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Yüzeyler — yeşil tonlu derin siyah */
  --bg-0: #080c0a;
  --bg-1: #0d1310;
  --bg-2: #131b17;
  --bg-3: #1a241f;
  --line: rgba(212, 175, 55, 0.14);
  --line-soft: rgba(255, 255, 255, 0.07);

  /* Metin */
  --text: #edf0ec;
  --text-dim: #9aa79f;
  --text-faint: #6b7a72;

  /* Altın */
  --gold: #c9a227;
  --gold-lt: #e8c766;
  --gold-dk: #8f7118;
  --gold-glow: rgba(201, 162, 39, 0.28);

  /* Yeşil çuha */
  --felt-1: #1b6b47;
  --felt-2: #0f4a30;
  --felt-3: #08301f;
  --green: #1f8a58;
  --green-lt: #2fb474;

  /* Durum */
  --red: #d8474d;
  --amber: #e0a33a;

  /* Ölçek */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --sh-1: 0 1px 3px rgba(0, 0, 0, .4);
  --sh-2: 0 6px 20px rgba(0, 0, 0, .45);
  --sh-3: 0 18px 50px rgba(0, 0, 0, .55);
  --sidebar-w: 252px;

  --ff-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--ff-body);
  background: var(--bg-0);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.hidden { display: none !important; }
.muted { color: var(--text-dim); font-size: .9rem; line-height: 1.6; }
.view { min-height: 100vh; min-height: 100dvh; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .1); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .18); background-clip: content-box; }

/* ---------------- marka ---------------- */
.brand { text-align: center; }
.brand h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;
  background: linear-gradient(160deg, #f6e2a0, var(--gold) 55%, #97781c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-crown { color: var(--gold-lt); line-height: 1; }
.brand-lg .brand-crown { font-size: 2.4rem; filter: drop-shadow(0 4px 16px var(--gold-glow)); }
/* "KRAL MASASI" iki satır (index.html'de <br>). clamp: dar telefonda küçülür,
   masaüstünde 3rem'de durur — sabit 3rem'de "MASASI" 411px'lik ekrana taşıyordu.
   line-height .92: iki satır amblem gibi sıkı dursun. */
.brand-lg h1 { font-size: clamp(2.1rem, 11vw, 3rem); margin-top: 2px; line-height: .92; }
.brand-sub {
  color: var(--text-faint); font-size: .78rem; margin-top: 6px;
  letter-spacing: .04em;
}
.brand-sm { display: flex; align-items: center; gap: 10px; padding: 4px 2px 0; }
.brand-sm .brand-crown { font-size: 1.4rem; }
/* Kenar çubuğu 252px; "KING" (4 harf) yerine "KRAL MASASI" (11 harf) geldiği
   için punto ve harf aralığı düşürüldü, yoksa taşıyordu. */
.brand-sm h1 { font-size: 1.1rem; letter-spacing: .16em; text-indent: .16em; }

/* ---------------- butonlar ---------------- */
.btn {
  font-family: inherit; font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; border-radius: var(--r-md);
  padding: 11px 20px; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .15s ease, background .15s, border-color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: translateY(1px); }
.btn-gold {
  background: linear-gradient(160deg, var(--gold-lt), var(--gold) 45%, var(--gold-dk));
  color: #23190a; box-shadow: 0 4px 16px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn-gold:hover { box-shadow: 0 6px 24px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-green {
  background: linear-gradient(160deg, var(--green-lt), var(--green));
  color: #04160e; box-shadow: 0 4px 16px rgba(47, 180, 116, .22);
}
.btn-ghost {
  background: rgba(255, 255, 255, .04); color: var(--text);
  border-color: var(--line-soft);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--line); }
.btn-sm { padding: 8px 14px; font-size: .85rem; border-radius: var(--r-sm); }
.btn-block { width: 100%; }

.icon-btn {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-soft);
  color: var(--text); width: 38px; height: 38px; border-radius: var(--r-sm);
  cursor: pointer; font-size: 1rem; display: grid; place-items: center;
  transition: background .15s, border-color .15s; flex-shrink: 0;
}
.icon-btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--line); }
.icon-btn-sm { width: 28px; height: 28px; font-size: .8rem; }

/* ---------------- form ---------------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
  font-size: .76rem; font-weight: 600; color: var(--text-dim);
  letter-spacing: .06em; text-transform: uppercase;
}
input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(0, 0, 0, .32); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 12px 14px; color: var(--text);
  font-family: inherit; font-size: .95rem; outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
/* Şifre yöneticisine ipucu veren gizli kimlik alanları (np-user, cp-user)
   yukarıdaki kural yüzünden kazara görünür hâle gelmesin. */
input[hidden] { display: none !important; }
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
input::placeholder { color: var(--text-faint); }

.segmented {
  display: flex; gap: 4px; background: rgba(0, 0, 0, .32);
  padding: 4px; border-radius: var(--r-md); margin: 22px 0 20px;
  border: 1px solid var(--line-soft);
}
.seg {
  flex: 1; padding: 10px; border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text-dim); font-family: inherit;
  font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .15s;
}
.seg.active {
  background: linear-gradient(160deg, rgba(201, 162, 39, .22), rgba(201, 162, 39, .1));
  color: var(--gold-lt); box-shadow: inset 0 0 0 1px var(--line);
}

.switch-row {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 12px; border-radius: var(--r-md); background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line-soft); margin: 4px 0 6px;
}
.switch-row input { margin-top: 3px; accent-color: var(--gold); flex-shrink: 0; }
.switch-row b { display: block; font-size: .9rem; }
.switch-row small { color: var(--text-faint); font-size: .78rem; }

.form-links {
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 2px;
}
.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-dim); font-family: inherit; font-size: .8rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--gold-lt); }
.btn-danger {
  background: rgba(216, 71, 77, .14); color: #ff9ea1;
  border: 1px solid rgba(216, 71, 77, .42);
}
.btn-danger:hover { background: rgba(216, 71, 77, .24); }

.notice {
  margin-top: 18px; padding: 13px 15px; border-radius: var(--r-md);
  font-size: .87rem; line-height: 1.55; word-break: break-word;
  background: rgba(47, 180, 116, .1); border: 1px solid rgba(47, 180, 116, .32);
}
.notice.error { background: rgba(216, 71, 77, .1); border-color: rgba(216, 71, 77, .34); }
.notice a { color: var(--gold-lt); }

/* ==========================================================================
   GİRİŞ EKRANI
   ========================================================================== */
.auth-view {
  display: grid; place-items: center; padding: 28px;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(27, 107, 71, .38), transparent 62%),
    radial-gradient(760px 460px at 96% 108%, rgba(201, 162, 39, .16), transparent 60%),
    var(--bg-0);
}
.auth-stage {
  display: grid; grid-template-columns: 1.05fr .95fr;
  width: min(1020px, 100%); background: rgba(13, 19, 16, .82);
  backdrop-filter: blur(22px); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3);
  animation: rise .55s cubic-bezier(.2, .8, .2, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

.auth-hero {
  position: relative; padding: 40px 38px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(27, 107, 71, .5), transparent 60%),
    linear-gradient(170deg, #10231a, #0a1410);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
/* Giriş sayfasındaki iki oyun: iki gerçek fotoğraf, adları üstlerinde.
   Eskiden burada SVG kart yelpazesi + CSS okey taşları vardı; oyunun
   gerçekte neye benzediğini fotoğraf daha iyi anlatıyor.

   `aspect-ratio` kutunun boyunu genişlikten türetiyor: fotoğraflar
   620x827 (3:4) kırpıldı, kutu da 3:4 — `object-fit: cover` hiçbir
   şeyi ezmiyor, sadece dar ekranda kenardan tıraşlıyor. */
.hero-fotolar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
.hero-foto {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
.hero-foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Fotoğraflar açık renkli (beyaz kart / krem taş); koyu panelde
     göz almasın diye hafifçe kısıldı, üzerine gelince canlanıyor. */
  filter: saturate(.92) brightness(.88);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .4s;
}
.auth-hero:hover .hero-foto img {
  transform: scale(1.045);
  filter: saturate(1) brightness(1);
}
/* Ad şeridi: alttan yukarı koyulaşan geçiş. Düz siyah bir bant
   fotoğrafı keserdi; geçiş yazıyı okunur yapıp fotoğrafı bırakıyor. */
.hero-foto figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 12px 11px;
  display: grid; gap: 2px;
  background: linear-gradient(to top,
    rgba(6, 12, 9, .94) 28%, rgba(6, 12, 9, .55) 62%, transparent);
  pointer-events: none;
}
.ho-ad { font-weight: 700; color: var(--gold-lt); font-size: .92rem; }
.ho-alt { font-size: .74rem; color: var(--text-dim); line-height: 1.35; }

.hero-copy h2 {
  font-family: var(--ff-display); font-size: 1.9rem; font-weight: 700;
  color: var(--gold-lt); margin-bottom: 8px;
}
.hero-copy > p { color: var(--text-dim); font-size: .92rem; line-height: 1.65; }
.hero-points { list-style: none; margin-top: 20px; display: grid; gap: 10px; }
.hero-points li {
  display: flex; align-items: center; gap: 11px;
  font-size: .87rem; color: var(--text);
}
.hero-points span {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(201, 162, 39, .12); color: var(--gold-lt);
  border: 1px solid var(--line); font-size: .8rem; flex-shrink: 0;
}

.auth-panel { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }

/* ==========================================================================
   UYGULAMA KABUĞU
   ========================================================================== */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--bg-1);
  border-right: 1px solid var(--line-soft); padding: 22px 16px 16px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 60;
}
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 13px; border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--text-dim); font-family: inherit;
  font-size: .93rem; font-weight: 500; cursor: pointer; text-align: left;
  transition: all .15s;
}
.nav-item:hover { background: rgba(255, 255, 255, .04); color: var(--text); }
.nav-item.active {
  background: linear-gradient(100deg, rgba(201, 162, 39, .16), rgba(201, 162, 39, .04));
  color: var(--gold-lt); border-color: var(--line); font-weight: 600;
}
.nav-ico { width: 20px; text-align: center; font-size: 1rem; opacity: .9; }

.sidebar-foot { display: flex; flex-direction: column; gap: 10px; }
.user-card {
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 12px;
}
.user-card .u-top { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold-dk)); color: #23190a;
}
.user-card .u-name { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.user-card .u-meta { color: var(--text-faint); font-size: .74rem; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 18px 26px;
  border-bottom: 1px solid var(--line-soft); background: rgba(8, 12, 10, .8);
  backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 40;
}
.topbar > div { flex: 1; min-width: 0; }
.topbar h2 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; }
.topbar-sub { color: var(--text-faint); font-size: .82rem; margin-top: 2px; }
#btn-menu { display: none; }

.content { padding: 26px; flex: 1; }
.page { animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.scrim {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.scrim.show { opacity: 1; pointer-events: auto; }

/* ---------------- lobi ---------------- */
.join-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 22px; flex-wrap: wrap;
}
.join-code { display: flex; gap: 8px; }
.join-code input {
  width: 178px; text-transform: uppercase; letter-spacing: .22em;
  font-weight: 700; text-align: center;
}
.chip {
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-soft);
  color: var(--text-dim); font-size: .78rem; font-weight: 600;
  padding: 7px 14px; border-radius: 99px;
}

.grid-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px;
}
.table-card {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(27, 107, 71, .2), rgba(19, 27, 23, .9));
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 20px;
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
}
.table-card::after {
  content: '♠'; position: absolute; right: -8px; bottom: -22px;
  font-size: 5.5rem; color: rgba(255, 255, 255, .028); pointer-events: none;
}
.table-card:hover {
  transform: translateY(-3px); border-color: var(--line); box-shadow: var(--sh-2);
}
.table-card h4 { font-size: 1.05rem; margin-bottom: 10px; }
.seat-dots { display: flex; gap: 5px; margin-bottom: 12px; }
.seat-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}
.seat-dot.filled { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }
.table-card .players {
  color: var(--text-dim); font-size: .82rem; margin-bottom: 16px;
  min-height: 2.2em; line-height: 1.4;
}
.table-card .foot { display: flex; align-items: center; justify-content: space-between; }
.table-card .count { color: var(--gold-lt); font-weight: 700; font-size: .9rem; }

.empty {
  text-align: center; padding: 64px 20px; color: var(--text-dim);
  border: 1px dashed var(--line-soft); border-radius: var(--r-lg);
}
.empty-ico { font-size: 2.6rem; color: var(--gold); opacity: .35; margin-bottom: 12px; }
.empty h3 { font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }
.empty p { font-size: .88rem; margin-bottom: 18px; }

/* ---------------- paneller ---------------- */
.panel {
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 22px;
}
.panel h3 { font-size: 1rem; margin-bottom: 14px; }
.panel h3:not(:first-child) { margin-top: 26px; }

.lb-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lb-table th {
  text-align: left; color: var(--text-faint); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  padding: 0 12px 10px; border-bottom: 1px solid var(--line-soft);
}
.lb-table td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tr.me { background: rgba(201, 162, 39, .07); }
.lb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rank-badge {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; font-weight: 800; font-size: .78rem;
  background: rgba(255, 255, 255, .05); color: var(--text-dim);
}
.rank-badge.r1 { background: linear-gradient(160deg, #f6e2a0, var(--gold)); color: #23190a; }
.rank-badge.r2 { background: linear-gradient(160deg, #e8ecef, #9aa4ad); color: #1b1f22; }
.rank-badge.r3 { background: linear-gradient(160deg, #e0a879, #a9713d); color: #24160a; }

.profile-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; align-items: start; }
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.avatar-lg {
  width: 60px; height: 60px; border-radius: 16px; font-size: 1.5rem;
  display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold-dk)); color: #23190a;
  box-shadow: 0 6px 20px var(--gold-glow);
}
.profile-head h4 { font-size: 1.2rem; }
.profile-head p { color: var(--text-faint); font-size: .84rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.stat-box {
  background: rgba(0, 0, 0, .26); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 16px;
}
.stat-box .k {
  color: var(--text-faint); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.stat-box .v {
  font-size: 1.6rem; font-weight: 800; margin-top: 4px;
  font-variant-numeric: tabular-nums; color: var(--gold-lt);
}
.stat-box .v.neg { color: var(--red); }
.stat-box .v.pos { color: var(--green-lt); }

/* ---------------- kurallar ---------------- */
.rules-panel { max-width: 860px; }
.rules-panel > p { margin-bottom: 4px; }
.rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.rule-card {
  background: rgba(0, 0, 0, .26); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 14px 16px;
}
.rule-card.koz { border-color: var(--line); background: rgba(201, 162, 39, .07); }
.rule-card .rn { font-weight: 700; font-size: .95rem; }
.rule-card.koz .rn { color: var(--gold-lt); }
.rule-card .rp { color: var(--text-dim); font-size: .8rem; margin-top: 3px; }
.rule-card .rt { color: var(--text-faint); font-size: .74rem; margin-top: 6px; }
.rules-list { margin-left: 18px; display: grid; gap: 8px; }
.rules-list li { color: var(--text-dim); font-size: .89rem; line-height: 1.6; }
.rules-list b { color: var(--text); }

/* ==========================================================================
   OYUN MASASI
   ========================================================================== */
.game-view { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.game-bar {
  display: flex; align-items: center; gap: 14px; padding: 11px 18px;
  background: rgba(8, 12, 10, .92); border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(12px); z-index: 30; flex-shrink: 0;
}
.game-meta { min-width: 0; }
.game-meta strong { display: block; font-size: .95rem; }
.game-progress { color: var(--text-faint); font-size: .78rem; }
.game-actions { margin-left: auto; display: flex; gap: 8px; }

/* Oynanan ihale rozeti — üst çubuktan çuhanın üst ortasına taşındı.
   Üstteki oyuncu kartuşunun altına oturması için sabit px offset veriyoruz;
   yüzde verirsek kısa ekranlarda kartuşun altına giriyor. */
.felt-contract {
  /* top: üstteki oyuncu kartuşunun ALTINI net geçsin. Kartuşun altında
     kalıcı ceza dökümü (.pod-take: "2 el 5 kupa …") duruyor ve kartuşu
     uzatıyor; rozet 66px'teyken büyük ekranda (iPad) o dökümle KESİŞİYORDU.
     108px, döküm 1-2 satıra çıksa bile aralarında belirgin boşluk bırakır. */
  position: absolute; left: 50%; top: 108px; transform: translateX(-50%);
  z-index: 5; pointer-events: none;
  display: flex; align-items: baseline; gap: 9px;
  padding: 6px 16px; border-radius: 99px; white-space: nowrap;
  background: linear-gradient(160deg, rgba(10, 16, 12, .78), rgba(6, 10, 8, .62));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 162, 39, .34);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
/* İhaleyi söyleyen. Rozet çuhanın üst ortasında sabit durduğu için
   üstteki oyuncuya aitmiş gibi görünüyordu; adı içine, kartuştakinin
   aynısı olan avatarla koyuyoruz ki göz ikisini eşleştirsin. */
.felt-contract .fc-av {
  width: 19px; height: 19px; border-radius: 6px; display: grid;
  place-items: center; font-size: .58rem; font-weight: 800; flex-shrink: 0;
  align-self: center; margin-right: -3px;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold-dk));
  color: #23190a;
}
/* bot avatarı kartuştaki gibi gri olsun ki ikisi eşleşsin */
.felt-contract .fc-av.bot {
  background: linear-gradient(160deg, #7d8b95, #454f57); color: #eef2f5;
}
.felt-contract .fc-who {
  font-size: .82rem; font-weight: 600; color: #e9ebe7;
  max-width: 112px; overflow: hidden; text-overflow: ellipsis;
  padding-right: 9px; border-right: 1px solid rgba(255, 255, 255, .14);
}
.felt-contract b { font-size: .95rem; font-weight: 800; color: var(--gold-lt); }
.felt-contract .fc-koz { font-size: .9rem; font-weight: 700; color: #e9ebe7; }
.felt-contract .fc-koz.sr { color: var(--red); }
.felt-contract .fc-pts {
  font-size: .74rem; font-weight: 600; color: var(--text-faint);
  padding-left: 9px; border-left: 1px solid rgba(255, 255, 255, .14);
}

/* ---- canlı durum şeridi ---- */
.hud-strip {
  display: flex; align-items: center; gap: 9px; padding: 8px 16px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(201, 162, 39, .07), transparent);
  border-bottom: 1px solid var(--line-soft); overflow-x: auto;
  scrollbar-width: thin;
}
.hud-strip::-webkit-scrollbar { height: 5px; }
.pchip {
  display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft);
  border-radius: 99px; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: box-shadow .2s, border-color .2s;
}
.pchip.me { background: rgba(201, 162, 39, .12); border-color: var(--line); }
.pchip.turn { box-shadow: 0 0 0 1px var(--gold), 0 0 14px var(--gold-glow); }
.pchip.off { opacity: .55; }
.pchip .pav {
  width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center;
  font-size: .62rem; font-weight: 800; flex-shrink: 0;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold-dk)); color: #23190a;
}
.pchip.is-bot .pav { background: linear-gradient(160deg, #7d8b95, #454f57); color: #eef2f5; }
.pchip .pn { font-size: .79rem; font-weight: 600; }
.pchip .ps { font-size: .79rem; font-weight: 700; color: var(--gold-lt); }
.pchip .pl { font-size: .7rem; }
.pchip .pl.neg { color: var(--red); }
.pchip .pl.pos { color: var(--green-lt); }
.pchip .pl.zero { color: var(--text-faint); }
.hud-div { width: 1px; height: 22px; background: var(--line-soft); flex-shrink: 0; }
.hud-label {
  font-size: .67rem; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; white-space: nowrap;
}
.ct-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 99px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-soft);
  font-size: .71rem; color: var(--text-dim); white-space: nowrap;
}
.ct-pill b { color: var(--gold-lt); }
.ct-pill.out { opacity: .32; text-decoration: line-through; }
.ct-pill.now {
  border-color: var(--gold); color: var(--gold-lt);
  background: rgba(201, 162, 39, .14);
}

/* Bağlantı koptuğunda oyuncu donmuş masaya bakıp ne olduğunu anlamasın diye */
/* Normal akışta durur: gizliyken hiç yer kaplamaz, görününce hiçbir
   şeyin üstünü örtmeden başlığın altında ortalanır. */
.ws-uyari {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  margin: 8px auto 0; width: max-content; max-width: calc(100% - 24px);
  padding: 8px 16px; border-radius: 99px; text-align: center;
  background: rgba(224, 163, 58, .16); border: 1px solid var(--amber);
  color: var(--amber); font-size: .82rem; font-weight: 600;
  box-shadow: var(--sh-2); animation: nabiz 1.6s ease-in-out infinite;
}
@keyframes nabiz { 50% { opacity: .55; } }

.game-body { flex: 1; display: flex; min-height: 0; }
.table-area {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  padding: 22px 14px 6px; align-items: center; justify-content: center;
}

.felt {
  flex: 1; position: relative; border-radius: 44% / 38%;
  width: 100%; max-width: 860px; margin: 0 auto;
  background:
    radial-gradient(ellipse 76% 70% at 50% 42%, var(--felt-1), var(--felt-2) 56%, var(--felt-3) 100%);
  box-shadow:
    inset 0 0 130px rgba(0, 0, 0, .6),
    inset 0 0 0 2px rgba(201, 162, 39, .2),
    0 0 0 13px #3b2a16,
    0 0 0 14px rgba(201, 162, 39, .35),
    0 26px 74px rgba(0, 0, 0, .66);
  min-height: 300px; max-height: 560px;
}
/* çuha üzerindeki filigran amblem */
.felt::after {
  content: '♛'; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); font-size: clamp(6rem, 16vh, 11rem);
  color: rgba(255, 255, 255, .045); pointer-events: none; line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.felt-inner {
  position: absolute; inset: 7%; border-radius: 44% / 38%; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .055);
}

/* oyuncu kartuşları */
.pod-slot { position: absolute; z-index: 6; }
.pod-top { top: -18px; left: 50%; transform: translateX(-50%); }
.pod-bottom { bottom: -18px; left: 50%; transform: translateX(-50%); }
.pod-left { left: -14px; top: 50%; transform: translateY(-50%); }
.pod-right { right: -14px; top: 50%; transform: translateY(-50%); }

.pod {
  display: flex; align-items: center; gap: 10px; min-width: 132px;
  background: rgba(8, 12, 10, .88); backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 8px 13px; transition: border-color .2s, box-shadow .2s;
}
.pod.turn {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 26px var(--gold-glow);
  animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe {
  50% { box-shadow: 0 0 0 1px var(--gold), 0 0 40px rgba(201, 162, 39, .45); }
}
.pod.offline { opacity: .6; border-color: rgba(216, 71, 77, .45); }
.pod-av {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: .82rem;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold-dk)); color: #23190a;
}
.pod.is-bot .pod-av { background: linear-gradient(160deg, #7d8b95, #454f57); color: #eef2f5; }
.pod-info { min-width: 0; }
/* Takma ad 20 karaktere kadar olabilir. Sınırlamazsak kartuş genişler,
   köşedeki "SON EL" ve "çıkan kâğıtlar" kutularının üstüne biner. */
.pod-name {
  font-weight: 700; font-size: .84rem; line-height: 1.25;
  max-width: 132px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.pod-line { display: flex; gap: 8px; font-size: .72rem; color: var(--text-faint); }
.pod-score { color: var(--gold-lt); font-weight: 700; font-variant-numeric: tabular-nums; }
.pod-status { color: var(--red); font-size: .68rem; }

/* ---------------- sesli / görüntülü sohbet ---------------- */

/* Düğmeler: ikon + etiket. Sadece ikon bırakınca "ne işe yarıyor" belli
   olmuyordu; ▤ ve ✉ ile aynı boyutta kaybolup gidiyorlardı. */
.media-btn {
  width: auto; height: 42px; padding: 0 13px; gap: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.media-btn .mb-ikon { font-size: 1.05rem; line-height: 1; }
.media-btn .mb-etiket { font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.media-btn.on {
  color: var(--gold); border-color: var(--gold);
  background: rgba(201, 162, 39, .16);
}
.pod-medya { margin-left: 6px; font-size: .66rem; opacity: .8; }

/* Yönetim duyurusu: uzun metin de okunaklı dursun, satır sonları korunsun. */
.admin-notice-text {
  white-space: pre-wrap; word-break: break-word; line-height: 1.55;
  background: rgba(201, 162, 39, .09); border: 1px solid rgba(201, 162, 39, .28);
  border-radius: var(--r-md); padding: 13px 15px; margin-top: 4px;
}

/* Kamera açıkken kartuş DİKEY düzene geçer: görüntü üstte, isim altta.
   Yana büyütmek çuhanın ortasına, elin oynandığı alana taşardı; yukarı
   doğru büyümek kartuşun zaten boş olan bölgesini kullanıyor.
   Görüntü varsayılan KAPALI olduğu için pod'lar çoğu masada eski hâlinde. */
.pod { position: relative; }
/* Taban: kartuş yatay kalır, kare ölçülü. Dar/alçak ekranlarda geçerli
   olan budur — orada dikey düzene geçmek dört kartuşu çuhanın ortasında
   birbirine sokuyor (ölçtük). */
.pod-av.has-video {
  width: 72px; height: 54px; border-radius: 8px;
  overflow: hidden; padding: 0; background: #0a0d0c;
}
.pod-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Kendi görüntümüz aynadaki gibi ters dursun. */
.pod-video.kendi { transform: scaleX(-1); }

/* Yeterli alan olan ekranlarda kartuş DİKEY düzene geçer ve kare
   büyür: görüntü üstte, isim altta. Yana büyütmek elin oynandığı orta
   alana taşardı. Boy `vh` ile ölçekleniyor; sabit versek 1366x768 ve
   1024x600'de üst ve alt kartuşlar ortada buluşuyor. Genişliği de
   boydan türetip SABİTLİYORUZ: serbest bırakınca ceza rozetleri
   kartuşu 210px'e kadar geriyor ve yandaki kutulara giriyordu. */
@media (min-width: 821px) and (min-height: 661px) {
  /* `--pv` çuhada tanımlı: hem kartuşlar hem ihale rozeti aynı ölçüyü
     kullansın diye (rozet kartuşun içinde değil, kardeşi). */
  .felt { --pv: clamp(84px, 12.2vh, 116px); }
  /* 101'de görüntü DAHA KÜÇÜK: kartuş çuhanın ortasındaki atım haçına
     doğru büyüyor ve King'deki 116px'le haçın üstüne biniyordu
     (ölçüldü). 101'de masanın ortası oyunun kendisi, görüntü eşlik
     eden bir şey — küçülen o olmalı. */
  .felt.felt-okey { --pv: clamp(68px, 8.4vh, 94px); }
  /* Kameralı kartuş çuhanın içine `--pv + 30px` kadar giriyor; haç o
     bandın dışında kalmalı. */
  .felt.felt-okey.videolu-masa { --ok-pay: calc(var(--pv) + 42px); }
  .pod.videolu {
    flex-direction: column; align-items: stretch; gap: 7px; padding: 9px;
    min-width: calc(var(--pv) * 4 / 3 + 18px);
    max-width: calc(var(--pv) * 4 / 3 + 18px);
  }
  .pod.videolu .pod-caret { position: absolute; top: 12px; right: 14px; z-index: 2; }
  .pod.videolu .pod-av { width: 100%; height: var(--pv); border-radius: 10px; }
  /* Üstteki kartuş büyüyünce ihale rozeti onun altında kalıyordu. */
  /* Rozeti kaydıran şey ÜSTTEKİ kartuşun büyümesi; alttaki ya da
     yandaki kamera bunu gerektirmiyor. Bu yüzden `videolu-masa`
     değil `ust-videolu` işareti kullanılıyor. */
  .felt.ust-videolu .felt-contract { top: calc(var(--pv, 116px) + 62px); }
}

/* ---- kendi görüntünü taşımak ----
   Yalnızca ALTTAKİ (kendi) kartuş; diğerlerinde konum kimliktir.
   `.pod-bottom` kuralındaki `bottom` ve `transform` burada geri
   alınıyor — özgüllük yeterli olduğu için `!important` gerekmiyor. */
.pod-slot.tasinabilir .pod { cursor: grab; }
.pod-slot.tasinabilir .pod:active { cursor: grabbing; }

.pod-slot.pod-bottom.serbest {
  position: fixed;
  bottom: auto;
  transform: none;
  z-index: 40;
}

.pod-yer-don {
  position: absolute;
  top: -9px; right: -9px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(8, 12, 10, .95);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-size: .78rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
}
.pod-yer-don:hover { color: var(--gold-lt); border-color: var(--gold); }

/* kartuş altı kalıcı özet — "oyun boyunca ne yedi"
   Yalnızca bitmiş ellerin toplamı; oynanan elin içeriği burada görünmez. */
.pod-take {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
  margin-top: 4px; max-width: 186px;
}
.tchip {
  font-size: .68rem; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 5px;
  background: rgba(216, 71, 77, .16); color: #ff9599;
}
.tchip.pos { background: rgba(47, 180, 116, .16); color: var(--green-lt); }
.tnone { font-size: .68rem; color: var(--text-faint); }

/* ---- oyuncu puan dökümü açılır kartı ---- */
.pod, .pchip { cursor: pointer; }
.pod:focus-visible, .pchip:focus-visible {
  outline: 2px solid var(--gold-lt); outline-offset: 2px;
}
.pod-caret { color: var(--text-faint); font-size: .58rem; margin-left: 1px; flex-shrink: 0; }
.pod.open { border-color: var(--gold-lt); box-shadow: 0 0 0 1px var(--gold-lt), 0 0 26px var(--gold-glow); }
.pod.open .pod-caret { color: var(--gold-lt); }
.pchip.open { border-color: var(--gold-lt); box-shadow: 0 0 0 1px var(--gold-lt); }

.pop-scrim { position: fixed; inset: 0; z-index: 88; }

.player-pop {
  position: fixed; z-index: 90; width: 296px; max-width: calc(100vw - 24px);
  background: rgba(10, 16, 13, .97); backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 15px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .7); overflow: hidden;
  font-variant-numeric: tabular-nums; animation: rise .18s ease;
}
.pop-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  background: linear-gradient(100deg, rgba(201, 162, 39, .15), transparent);
  border-bottom: 1px solid var(--line-soft);
}
.pop-av {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: .8rem; flex-shrink: 0;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold-dk)); color: #23190a;
}
.pop-av.bot { background: linear-gradient(160deg, #7d8b95, #454f57); color: #eef2f5; }
.pop-head > div { flex: 1; min-width: 0; }
.pop-name { font-weight: 700; font-size: .9rem; }
.pop-sub { font-size: .71rem; color: var(--text-faint); margin-top: 1px; }
.pop-tot { font-size: 1.05rem; font-weight: 800; }
.pop-tot.neg { color: var(--red); }
.pop-tot.pos { color: var(--green-lt); }
.pop-close {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: .9rem; padding: 4px; line-height: 1;
}
.pop-close:hover { color: var(--text); }

.pop-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 4px; }
.pop-tile {
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 9px 11px;
}
.pop-tile span {
  display: block; font-size: .64rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); font-weight: 700;
}
.pop-tile b { font-size: 1.05rem; font-weight: 800; }
.pop-tile b.neg { color: var(--red); }
.pop-tile b.pos { color: var(--green-lt); }
.pop-tile b.zero { color: var(--text-faint); }

.pop-seg {
  display: flex; gap: 4px; margin: 11px 14px 0; background: rgba(0, 0, 0, .32);
  padding: 3px; border-radius: 9px; border: 1px solid var(--line-soft);
}
.pop-seg button {
  flex: 1; padding: 6px; font-size: .75rem; font-weight: 600; cursor: pointer;
  color: var(--text-dim); background: transparent; border: none; border-radius: 6px;
  font-family: inherit;
}
.pop-seg button.on { background: rgba(201, 162, 39, .18); color: var(--gold-lt); }

.pop-list { padding: 8px 14px 12px; }
.pop-list.scroll { max-height: 208px; overflow-y: auto; scrollbar-width: thin; }
.pop-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: .79rem; }
.pop-row + .pop-row { border-top: 1px solid rgba(255, 255, 255, .05); }
.pop-row.none { opacity: .4; }
.pop-row .h { width: 20px; text-align: right; color: var(--text-faint); font-size: .7rem; }
.pop-row .c { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pop-row .c i {
  font-style: normal; font-size: .62rem; color: var(--gold-lt);
  background: rgba(201, 162, 39, .14); border-radius: 5px; padding: 1px 5px; flex-shrink: 0;
}
.pop-row .n { color: var(--text-faint); font-size: .72rem; }
.pop-row .p { font-weight: 700; min-width: 46px; text-align: right; }
.pop-row .p.neg { color: var(--red); }
.pop-row .p.pos { color: var(--green-lt); }
.pop-row .p.zero { color: var(--text-faint); }
.pop-foot {
  padding: 9px 14px; border-top: 1px solid var(--line-soft); font-size: .68rem;
  color: var(--text-faint); background: rgba(0, 0, 0, .2);
}
.pop-empty { padding: 22px 14px; text-align: center; color: var(--text-faint); font-size: .82rem; }

/* masadaki kartlar */
.trick-area { position: absolute; inset: 0; pointer-events: none; }
/* 1280x720 gibi alçak ekranlarda çuha kısalır, kâğıt yığını yukarı çıkar ve
   ihale rozetinin yerini yer. Yığını sadece gerektiği kadar aşağı kaydırıyoruz:
   çuhanın yarısı 220px'ten büyükse fark negatif olur, kayma sıfırlanır.
   Altta 100px'ten fazla boşluk olduğu için bu kayma göze görünmez. */
.trick-area { transform: translateY(max(0px, calc(233px - 50%))); }
.trick-card {
  position: absolute; left: 50%; top: 50%; width: 76px;
  border-radius: 7px; box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  animation: toss .3s cubic-bezier(.2, .9, .3, 1);
}
@keyframes toss { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }
.trick-card.pos-bottom { transform: translate(-50%, -12%) rotate(1deg); }
.trick-card.pos-top    { transform: translate(-50%, -88%) rotate(-2deg); }
.trick-card.pos-left   { transform: translate(-112%, -50%) rotate(-7deg); }
.trick-card.pos-right  { transform: translate(12%, -50%) rotate(7deg); }
/* biten el, sıradaki kâğıt atılana kadar masada kalır */
.trick-card.settled { filter: brightness(.88); }
.trick-card.settled.won {
  filter: none;
  box-shadow: 0 0 0 2px var(--gold-lt), 0 0 22px var(--gold-glow),
              0 10px 26px rgba(0, 0, 0, .55);
}

/* köşedeki "son el" kutusu */
.last-trick {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none;
  background: rgba(8, 12, 10, .88); backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft); border-radius: 13px;
  padding: 8px 10px 7px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.lt-h {
  font-size: .59rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-faint); font-weight: 700; margin-bottom: 5px;
}
.lt-cards { display: flex; gap: 3px; }
.lt-c { display: block; line-height: 0; border-radius: 5px; position: relative; }
.lt-c img { width: 30px; border-radius: 4px; display: block; }
.lt-c.won { box-shadow: 0 0 0 2px var(--gold-lt); z-index: 2; }
.lt-w {
  margin-top: 6px; font-size: .68rem; font-weight: 700; color: var(--gold-lt);
  max-width: 138px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Çıkan ceza kâğıtları kutusu — "SON EL"in hemen altında, sol sütunda.
   Sol sütun çuhanın her boyutta boş kalan tek şeridi: ortada kartuş ve
   ihale rozeti, ortanın altında masaya atılan kâğıtlar var.
   13 kâğıt yan yana sığmadığı için elde tutar gibi bindiriliyor;
   sol köşedeki sayı-renk indeksi her kâğıtta açıkta kalır. */
.tracked-cards {
  /* Kâğıt boyu ekran yüksekliğine bağlı. Sebebi: kutunun alt sınırı
     yandaki oyuncu kartuşu, o da çuhanın ortasında duruyor; çuha ise
     pencere yüksekliğiyle birlikte uzayıp kısalıyor. Sabit bir boy
     verirsek ya alçak ekranda kartuşa biner ya da yüksek ekranda
     boşuna küçük kalır. Katsayı ölçümle bulundu: 761px pencere
     yüksekliğinde bile kartuşla arada pay kalıyor. */
  --tc-w: clamp(32px, 6.2vh, 60px);
  position: absolute; right: 0; top: 0; z-index: 7; pointer-events: none;
  background: rgba(8, 12, 10, .88); backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft); border-radius: 13px;
  padding: 8px 10px 7px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.tc-h {
  font-size: .59rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-faint); font-weight: 700; margin-bottom: 5px;
}
.tc-h b { color: var(--gold-lt); font-size: .66rem; letter-spacing: 0; }
.tc-cards { display: flex; flex-direction: column; gap: 5px; }
.tc-row { display: flex; }
/* Kâğıtlar elde tutar gibi bindirilir; sol köşedeki sayı-renk indeksi
   her kâğıtta açıkta kalır. Satırlar alt alta: kutu dar kalıyor,
   ortadaki ihale rozetiyle çakışmıyor. */
.tc-cards img {
  width: var(--tc-w); border-radius: 5px; display: block; flex: 0 0 auto;
  box-shadow: -2px 0 6px rgba(0, 0, 0, .6);
}
.tc-row img + img { margin-left: calc(var(--tc-w) * -.57); }
/* çıkmamış kâğıtlar sönük: göz doğrudan çıkanlara gitsin */
.tc-cards img.left { opacity: .22; filter: grayscale(1); }

/* Alçak masaüstü pencerelerinde (1280x720 gibi) çuha kısalır ve yandaki
   kartuş yukarı çıkar; 44px'lik kutu tam onun üstüne oturuyordu.
   Eşik ölçümle bulundu: 760px'in altında çuha 422px'ten kısalıyor. */
@media (min-width: 821px) and (max-height: 760px) {
  .tracked-cards { --tc-w: 32px; }
  .tc-row img + img { margin-left: -14px; }
}
/* Çok alçak masaüstü penceresi: çuha kendi alt sınırına (300px) dayanır,
   yandaki kartuş iyice yukarı çıkar. Ölçüm: 1024x600'de 32px kutu 11px
   biniyordu, 24px'te 10px pay kalıyor. */
@media (min-width: 821px) and (max-height: 660px) {
  .tracked-cards { --tc-w: 24px; }
  .tc-row img + img { margin-left: -11px; }
}



.table-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .5); font-size: .92rem; text-align: center;
  pointer-events: none; z-index: 2; max-width: 60%;
}

.waiting-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(8, 12, 10, .9); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 30px; text-align: center; z-index: 10; width: min(340px, 84%);
  box-shadow: var(--sh-3);
}
.waiting-panel h3 { font-size: 1.05rem; margin-bottom: 6px; }
.waiting-panel .seat-dots { justify-content: center; margin: 14px 0; }
.code-box {
  background: rgba(0, 0, 0, .4); border: 1px dashed var(--line);
  border-radius: var(--r-md); padding: 12px; margin: 14px 0;
}
.code-box .lbl { color: var(--text-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.code-box .val {
  font-size: 1.55rem; font-weight: 800; letter-spacing: .3em; text-indent: .3em;
  color: var(--gold-lt); user-select: all; margin-top: 4px;
}
.waiting-actions { display: flex; gap: 8px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }

/* elimdeki kartlar
   Kartlar üst üste biner. Her kart kendi "yuvası" içinde durur ve yuvanın
   genişliği kartın GÖRÜNEN dilimi kadardır; böylece tıklama/dokunma alanı
   görünen kısımla birebir örtüşür — komşu kart tıklamayı çalamaz. */
.my-hand {
  --card-w: 86px;
  display: flex; justify-content: center; align-items: flex-end;
  height: 152px; padding: 24px 16px 8px; flex-shrink: 0; width: 100%;
}
.card-slot {
  position: relative; flex-shrink: 0;
  height: calc(var(--card-w) * 1.394);   /* kart en/boy oranı 224:312 */
}
/* Tıklama hedefi yuvadır; kart görseli taştığı için tıklamayı almaz. */
.hand-card {
  position: absolute; left: 0; bottom: 0; width: var(--card-w);
  border-radius: 7px; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .55);
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s, filter .16s;
  transform-origin: bottom center;
}
.hand-card.legal { box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 0 2px var(--gold); }
.hand-card.illegal { filter: grayscale(.85) brightness(.5); }
.card-slot.playable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card-slot:focus-visible { z-index: 30; }
.card-slot.playable:focus-visible .hand-card { transform: translateY(-22px) scale(1.04); }
.card-slot:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; border-radius: 7px; }

/* Kâğıdın havalanması YALNIZCA gerçek imleçli cihazlarda.
   Dokunmatikte :hover dokunuştan sonra üzerinde kalıyor ve kâğıt havada
   asılı duruyordu; oyuncu kâğıdın oynanıp oynanmadığını anlayamıyordu. */
@media (hover: hover) and (pointer: fine) {
  .card-slot:hover { z-index: 30; }
  .card-slot.playable:hover .hand-card {
    transform: translateY(-22px) scale(1.04);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 0 2px var(--gold-lt);
  }
}
/* Dokunmatikte geri bildirim basılı tutulduğu an verilir, bırakınca biter. */
.card-slot.playable:active .hand-card {
  transform: translateY(-14px) scale(1.03);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .6), 0 0 0 2px var(--gold-lt);
}
/* Oynanan kâğıt gönderildi: kısa bir "gitti" animasyonu, sonra masa yenilenir. */
.card-slot.sent .hand-card {
  transform: translateY(-46px) scale(.92);
  opacity: .35;
  transition: transform .18s ease-out, opacity .18s ease-out;
}

/* sohbet */
.chat-panel {
  width: 306px; flex-shrink: 0; background: var(--bg-1);
  border-left: 1px solid var(--line-soft); display: flex; flex-direction: column;
}
.chat-panel.collapsed { display: none; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  font-weight: 700; font-size: .9rem;
}
.chat-body {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.msg { font-size: .85rem; line-height: 1.45; }
.msg .who { font-weight: 700; color: var(--gold-lt); }
.msg.sys { color: var(--text-faint); font-style: italic; font-size: .79rem; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line-soft); }
.chat-form input { flex: 1; padding: 10px 12px; }

/* ==========================================================================
   MODAL / TOAST
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 120; padding: 20px;
  background: rgba(4, 7, 5, .74); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fade .2s ease;
}
.modal-box {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; width: min(430px, 100%);
  box-shadow: var(--sh-3); max-height: 88vh; overflow-y: auto;
  animation: rise .28s cubic-bezier(.2, .8, .2, 1);
}
.modal-lg { width: min(660px, 100%); }
.modal-box > h3 { font-size: 1.18rem; margin-bottom: 8px; }
.modal-box > .muted { margin-bottom: 18px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* İhale ekranı: eskiden tüm masayı kapatıyordu ve oyuncu kararı verirken
   kendi kâğıtlarını göremiyordu. Artık perde şeffafa yakın, kutu yukarı
   yaslı (altta gerçek el görünsün) ve elin bir kopyası kutunun içinde. */
.modal.modal-contract {
  background: rgba(4, 7, 5, .5); backdrop-filter: blur(2px);
  align-items: flex-start; padding-top: 12px;
}
.modal-contract .modal-box { max-height: calc(100vh - 24px); }
.ct-hand {
  background: rgba(0, 0, 0, .32); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 10px 12px 12px; margin-bottom: 16px;
}
.ct-hand:empty { display: none; }
.ct-hand-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.ct-hand-h > span {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); font-weight: 700;
}
.ct-counts { display: flex; gap: 6px; }
.ct-count {
  font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, .08); color: #e9ebe7;
}
.ct-count.red { color: #ff9599; background: rgba(216, 71, 77, .16); }
.ct-cards { display: flex; flex-wrap: wrap; gap: 2px; }
.ct-cards img {
  width: 40px; border-radius: 4px; display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.contract-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 11px; }
.contract-btn {
  padding: 15px 14px; border-radius: var(--r-md); border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, .26); color: var(--text); cursor: pointer;
  font-family: inherit; text-align: left; transition: all .15s;
}
.contract-btn:hover {
  border-color: var(--gold); background: rgba(201, 162, 39, .1);
  transform: translateY(-2px);
}
.contract-btn .cn { font-weight: 700; font-size: .96rem; display: block; }
.contract-btn .cp { color: var(--text-dim); font-size: .78rem; margin-top: 3px; display: block; }
.contract-btn.koz {
  grid-column: 1 / -1; border-color: var(--line);
  background: linear-gradient(120deg, rgba(201, 162, 39, .16), rgba(201, 162, 39, .04));
}
.contract-btn.koz .cn { color: var(--gold-lt); }

.trump-picker { margin-top: 20px; }
.trump-suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.trump-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 6px; border-radius: var(--r-md); cursor: pointer;
  background: #f7f5ee; border: 2px solid transparent; font-family: inherit;
  font-size: .74rem; font-weight: 700; color: #2a2f33; transition: all .15s;
}
.trump-btn span { font-size: 1.7rem; line-height: 1; }
.trump-btn:hover { transform: translateY(-3px); border-color: var(--gold); }
.trump-btn.red span { color: #c0392b; }
.trump-btn.black span { color: #1a1d23; }

.table-wrap { overflow-x: auto; }
.score-grid { width: 100%; border-collapse: collapse; font-size: .83rem; }
.score-grid th, .score-grid td {
  padding: 8px 10px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.score-grid th { color: var(--gold-lt); font-size: .74rem; font-weight: 600; }
.score-grid th:first-child, .score-grid td:first-child { text-align: left; }
.score-grid .neg { color: var(--red); }
.score-grid .pos { color: var(--green-lt); }
.score-grid tfoot td {
  font-weight: 800; border-top: 2px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* Sonuç satırı iki satırlık bir ızgara: üstte sıra/ad/puan, altta
   oyun boyunca ne yendiği. Izgara sayesinde döküm, adın tam altına
   hizalanır ve puan sütunu kaymaz. */
.result-row {
  display: grid; gap: 4px 14px; padding: 13px 14px;
  grid-template-columns: 34px 1fr auto;
  grid-template-areas: "rank name score" ". take take" ". sub sub";
  align-items: center;
  border-radius: var(--r-md); margin-bottom: 8px;
  background: rgba(0, 0, 0, .26); border: 1px solid var(--line-soft);
}
.result-row.win { background: rgba(201, 162, 39, .12); border-color: var(--line); }
.result-rank { grid-area: rank; font-size: 1.3rem; text-align: center; }
.result-name { grid-area: name; font-weight: 700; font-size: .95rem; }
.result-score {
  grid-area: score; font-weight: 800; color: var(--gold-lt);
  font-variant-numeric: tabular-nums;
}
/* Tur sonu ve masa tanıtımı satırları: ad | bu tur | toplam | karne.
   Izgara sayesinde sayı sütunları hizalı kalır, isim uzunluğu kaydırmaz. */
.tur-satir {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 12px; align-items: center; padding: 9px 0; font-size: .88rem;
}
.tur-satir + .tur-satir { border-top: 1px solid rgba(255, 255, 255, .05); }
.tur-satir b { font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.tur-satir b.neg { color: var(--red); }
.tur-satir b.pos { color: var(--green-lt); }
.tur-satir b.zero { color: var(--text-faint); }
.tur-baslik {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); border-bottom: 1px solid var(--line-soft);
  padding-bottom: 6px;
}
.tur-baslik b { color: var(--text-faint); font-weight: 700; }
.karne-sut { min-width: 62px; text-align: right; }
/* Geçmiş karne: kaç birincilik, kaç çıkma. Tek bakışta "bu rakip nasıl
   biri" sorusunu cevaplar; ikisi de liderlik tablosunda açık bilgi. */
.karne { font-size: .74rem; color: var(--text-faint); white-space: nowrap; }
.karne b { min-width: 0; font-weight: 800; color: var(--gold-lt); }
.karne b.pos { color: var(--green-lt); }
.karne.bos { opacity: .55; font-style: italic; }
/* dar ekranda karne sütunu satırı taşırmasın */
@media (max-width: 480px) {
  .tur-satir { gap: 8px; font-size: .82rem; }
  .tur-satir b { min-width: 40px; }
  .karne-sut { min-width: 54px; }
  .karne { font-size: .68rem; }
}

/* Oyun sonunda su üstünde mi bitti? Masada batanlar hesabı ödediği için
   sıralamadan çok bu okunuyor. Eşik sıfır: bir oyunun 20 turunun puan
   toplamı tam olarak sıfırdır, yani sıfır gerçek su seviyesidir. */
.su-etiket {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border-radius: 99px; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; vertical-align: middle;
}
.su-etiket.cikti { background: rgba(70, 194, 106, .16); color: var(--green-lt); }
.su-etiket.batti { background: rgba(216, 71, 77, .16); color: var(--red); }
.result-take {
  grid-area: take; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px;
}
.result-sub { grid-area: sub; font-size: .7rem; color: var(--text-faint); }

.kv { display: flex; justify-content: space-between; padding: 9px 0; font-size: .88rem; }
.kv + .kv { border-top: 1px solid rgba(255, 255, 255, .05); }
.kv b { font-variant-numeric: tabular-nums; }
.kv b.neg { color: var(--red); }
.kv b.pos { color: var(--green-lt); }
.kv b.zero { color: var(--text-faint); }
/* satır sonundaki yüzde: asıl sayıyı bastırmasın diye sönük ve küçük */
.kv .kv-alt { color: var(--text-faint); font-weight: 600; font-size: .8em; }
.muted-sm { color: var(--text-faint); font-size: .76rem; line-height: 1.5; margin-top: 12px; }
.lb-table td.num.pos { color: var(--green-lt); }
.lb-table td.num.neg { color: var(--red); }
.lb-rank-col { width: 52px; }

/* hukuki metin bağlantıları */
.switch-yasal { align-items: flex-start; }
.switch-yasal small {
  display: block; margin-top: 4px; color: var(--text-faint);
  font-size: .76rem; line-height: 1.5;
}
.switch-yasal a, .auth-yasal a, .sidebar-yasal a { color: var(--gold-lt); }
.auth-yasal {
  margin-top: 18px; text-align: center;
  font-size: .78rem; color: var(--text-faint);
}
.sidebar-yasal {
  margin-top: 12px; text-align: center;
  font-size: .72rem; color: var(--text-faint); line-height: 1.7;
}

.toasts {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 200;
  align-items: center; pointer-events: none; padding: 0 16px;
}
/* masadayken bildirimler elin üstünü kapatmasın */
.game-view:not(.hidden) ~ .toasts { bottom: 172px; }
.toast {
  background: rgba(13, 19, 16, .96); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 11px 18px; font-size: .86rem;
  box-shadow: var(--sh-2); animation: rise .25s ease; max-width: 92vw;
}
.toast.error { border-color: rgba(216, 71, 77, .5); color: #ff9ea1; }

/* ==========================================================================
   DUYARLI TASARIM
   ========================================================================== */
/* Geniş ekranlar: masa 860px'de kalınca dev monitörde her şey minicik
   görünüyordu. Çuha, kâğıtlar ve köşedeki kutu ekranla birlikte büyür. */
@media (min-width: 1180px) {
  .felt { max-width: 1020px; max-height: 620px; }
  .trick-card { width: 100px; }
  .my-hand { --card-w: 106px; height: 182px; padding: 28px 16px 10px; }
  .last-trick { padding: 11px 13px 10px; border-radius: 15px; }
  .lt-c img { width: 42px; }
  .lt-h { font-size: .66rem; margin-bottom: 7px; }
  .lt-w { font-size: .78rem; max-width: 190px; margin-top: 8px; }
  .modal-contract .modal-box { width: min(900px, 100%); }
  /* geniş kutuda 4 sütun olup Koz'u tek başına bırakmasın */
  .modal-contract .contract-grid { grid-template-columns: repeat(3, 1fr); }
  .ct-cards img { width: 56px; }
  .ct-hand { padding: 12px 14px 14px; }
  .pod-take { max-width: 210px; }
  .tchip { font-size: .72rem; padding: 4px 7px; }
}

@media (min-width: 1560px) {
  .felt { max-width: 1160px; max-height: 690px; }
  .trick-card { width: 114px; }
  .my-hand { --card-w: 120px; height: 206px; }
  .lt-c img { width: 50px; }
  .lt-w { font-size: .82rem; max-width: 220px; }
  .modal-contract .modal-box { width: min(1000px, 100%); }
  .ct-cards img { width: 64px; }
}

@media (max-width: 980px) {
  .auth-stage { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-panel { padding: 38px 30px; }
  .profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
    box-shadow: var(--sh-3);
  }
  .sidebar.open { transform: translateX(0); }
  #btn-menu { display: grid; }
  .content { padding: 18px; }
  .topbar { padding: 14px 16px; }
  .topbar h2 { font-size: 1.05rem; }
  .topbar-sub { display: none; }

  .chat-panel {
    position: fixed; right: 0; top: 0; bottom: 0; z-index: 70;
    width: min(320px, 88vw); box-shadow: var(--sh-3);
  }
  .table-area { padding: 18px 8px 4px; }
  .felt {
    min-height: 230px;
    box-shadow:
      inset 0 0 90px rgba(0, 0, 0, .6),
      inset 0 0 0 2px rgba(201, 162, 39, .2),
      0 0 0 8px #3b2a16,
      0 0 0 9px rgba(201, 162, 39, .35),
      0 14px 40px rgba(0, 0, 0, .6);
  }
  .felt::after { font-size: 5rem; }
  .trick-card { width: 60px; }
  .my-hand { --card-w: 62px; height: 116px; padding: 18px 8px 4px; }
  .pod { min-width: 0; padding: 6px 10px; gap: 7px; }
  .pod-av { width: 25px; height: 25px; font-size: .72rem; }
  /* Telefonda kartuş yatay kalır (dikey düzen çuhayı boğuyor, ölçtük);
     kare yine de eskisinden büyük. Düğmelerde etiket yerine sadece ikon. */
  .pod-av.has-video { width: 64px; height: 48px; }
  .media-btn { width: 38px; height: 38px; padding: 0; gap: 0; }
  .media-btn .mb-etiket { display: none; }
  .pod-name { font-size: .76rem; max-width: 80px; }
  .pod-line { font-size: .66rem; }
  .pod-take { max-width: 124px; gap: 2px; margin-top: 3px; }
  .tchip { font-size: .61rem; padding: 2px 4px; }
  .tnone { font-size: .62rem; }
  /* Köşedeki son el kutusu: telefonda okunacak kadar büyük olmalı ama
     yandaki kartuşa da girmemeli. Kâğıtları yan yana dizmek yerine
     birbirine bindiriyoruz — böylece kâğıt büyür, kutu genişlemez.
     Kazanan kâğıt üstte durur ki altın çerçevesi kapanmasın. */
  /* üstteki kartuşa değmesin diye biraz dışarı taşar */
  .last-trick { left: -8px; top: -6px; padding: 7px 8px 6px; border-radius: 12px; }
  /* sağ üst köşe: "SON EL"in aynası. Dar ekranda satırlar alt alta iner */
  .tracked-cards { right: -8px; top: -6px; padding: 6px 8px 5px; border-radius: 12px; }
  .tc-h { font-size: .55rem; margin-bottom: 4px; }
  .tc-cards { gap: 3px; }
  /* Telefonda yan kartuşlar çuhanın %34'ünde duruyor (masaya atılan
     kâğıtların üstünde kalsınlar diye), yani kutunun boyu çuhanın
     yalnızca üçte biriyle sınırlı. Safari çubuklarıyla çuha 324px'e
     indiğinde sabit 32px'lik kutu sağdaki kartuşun üstüne biniyordu.
     Sınır düz orantı değil (çuha = pencere - 229px), o yüzden formülü
     olduğu gibi yazıyoruz: kartuşun üst kenarı 0.34 x çuha. */
  .tracked-cards { --tc-w: clamp(18px, calc(11.9vh - 49px), 32px); }
  /* 360px'lik telefonda üstteki kartuşla çuha kenarı arasında ~100px var;
     kâğıtlar ancak bu kadar bindirilerek sığıyor */
  .tc-row img + img { margin-left: calc(var(--tc-w) * -.75); }
  .lt-cards { gap: 0; }
  .lt-c + .lt-c { margin-left: -8px; }
  .lt-c img {
    width: 36px; border-radius: 5px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, .55);
  }
  .lt-w { font-size: .7rem; max-width: 118px; margin-top: 7px; }
  .lt-h { font-size: .6rem; margin-bottom: 5px; }
  /* İhale ekranındaki el önizlemesi telefonda 34px'ti; okunmuyordu ve
     13 kâğıt 2-3 satıra taşıyordu. Elde tutar gibi bindirip büyütüyoruz:
     genişlik yüzdeyle verildiği için 13 kâğıt her ekranda tek satırda
     kalır, sol köşedeki sayı-renk indeksi her kâğıtta açıkta durur. */
  .ct-cards {
    --ct-w: min(15%, 54px);
    gap: 0; flex-wrap: nowrap; justify-content: center;
  }
  .ct-cards img {
    width: var(--ct-w); margin-left: calc(var(--ct-w) * -.567);
    box-shadow: -2px 0 5px rgba(0, 0, 0, .55);   /* bindirmede kâğıtlar ayrışsın */
  }
  .ct-cards img:first-child { margin-left: 0; }
  /* dar çuhada yan kartuşlar masaya atılan kartın üstüne binmesin */
  .pod-left { left: 6px; top: 34%; } .pod-right { right: 6px; top: 34%; }
  .pod-top { top: -12px; } .pod-bottom { bottom: -12px; }
  .trick-card.pos-left { transform: translate(-96%, -46%) rotate(-7deg); }
  .trick-card.pos-right { transform: translate(-4%, -46%) rotate(7deg); }
  .trick-card.pos-top { transform: translate(-50%, -80%) rotate(-2deg); }
  .trick-card.pos-bottom { transform: translate(-50%, -6%) rotate(1deg); }

  /* şerit dar ekranda sıkışsın ki birden fazla oyuncu görünsün */
  .hud-strip { gap: 6px; padding: 7px 12px; }
  .pchip { gap: 5px; padding: 4px 9px 4px 5px; }
  .pchip .pn { max-width: 82px; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; }
  .pchip .ps { font-size: .75rem; }
  .ct-pill { font-size: .67rem; padding: 3px 8px; }
  /* Dik telefonda çuha dar; ortalanmış rozet sol üstteki "SON EL" kutusunun
     altına giriyor. Bu yüzden rozeti o kutunun bittiği yerin altına
     indiriyoruz — hâlâ üst bölgede ama çakışma yok. */
  /* Telefonda rozet çuhanın ÜST bölgesine sığmıyor. Ölçüldü: üstte
     sol köşede "SON EL", sağ köşede çıkan kâğıtlar kutusu var (ikisi
     birlikte 117px iniyor), tam ortada da yan oyuncu kartuşları duruyor.
     Aradaki boşluk kısa telefonlarda (Safari çubuklarıyla çuha 331px'e
     kadar iniyor) sıfıra düşüyor ve rozet kartuşların altında kalıyordu.
     Masaya atılan kâğıtların ALTI ise her boyutta en az 77px boş: rozeti
     oraya alıyoruz. Ölçüye göre kâğıtlarla arası en dar 13px, alttaki
     kendi kartuşumuzla arası en dar 34px. */
  .felt-contract {
    /* Normalde masaya atılan kâğıtların hemen altında durur
       (merkez + 88px; en alttaki kâğıt merkez + 76'da bitiyor).
       Çuha kısaldığında bu nokta alttaki kendi kartuşumuzun içine
       düşeceği için, iki değerin KÜÇÜĞÜ alınıyor: kısa ekranda rozet
       kartuşun üstüne yaslanıyor, uzun ekranda kâğıtların altına. */
    top: min(calc(50% + 88px), calc(100% - 80px)); bottom: auto;
    gap: 7px; padding: 5px 12px; max-width: 94%;
  }
  /* telefonda kâğıtlar zaten küçük, çuha uzun: kaymaya gerek yok */
  .trick-area { transform: none; }
  .felt-contract b { font-size: .85rem; }
  .felt-contract .fc-av { width: 17px; height: 17px; font-size: .54rem; }
  .felt-contract .fc-who { font-size: .74rem; max-width: 86px; padding-right: 7px; }
  .felt-contract .fc-koz { font-size: .8rem; }
  .felt-contract .fc-pts { font-size: .66rem; padding-left: 7px; }
  .game-meta strong { font-size: .85rem; }
  /* bildirimler kartların üstünü kapatmasın */
  .game-view ~ .toasts, .toasts { bottom: 132px; }
  /* dar ekranda üst üste binen bildirimler masayı kapatıyordu:
     en fazla ikisi görünür, eskiler beklemeye alınır */
  .toasts > :nth-last-child(n+3) { display: none; }

  /* dar ekranda döküm, açılır kart yerine alttan çıkan panel olur */
  .player-pop {
    left: 0 !important; right: 0; bottom: 0 !important; top: auto !important;
    width: 100%; max-width: 100%; border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    animation: sheet .22s cubic-bezier(.2, .8, .2, 1);
  }
  .player-pop .pop-list.scroll { max-height: 42vh; }
  .pop-scrim { background: rgba(4, 7, 5, .55); backdrop-filter: blur(3px); }
  @keyframes sheet { from { transform: translateY(100%); } }
}

/* YATIK telefon: çuha alçalıp genişler. Masaya atılan kâğıtlar çuhanın
   altını doldurduğu için rozet aşağı inemez; genişlik arttığı için de
   "SON EL" kutusuyla yatay çakışma kalmaz — yukarı alınır.

   `orientation: landscape` şart: yalnızca `max-height` yazarsak 360x560
   gibi KISA DİK telefonlar da buraya düşüyor, oysa onlarda çuha dar ve
   rozet yukarıda "SON EL" kutusunun altında kalıyor. */
@media (max-width: 820px) and (max-height: 560px) and (orientation: landscape) {
  /* bottom: auto şart — dik telefon kuralı rozeti alta çıpalıyor,
     yalnızca top verirsek eleman iki uç arasında gerilip uzuyor */
  .felt-contract { top: 52px; bottom: auto; }
  /* yatık telefonda çuha alçak: kutu alta uzayamaz, satırlar yan yana
     dizilir ve başlık gizlenir; yoksa sağdaki kartuşa biner */
  /* yatık telefonda çuha 230px: kutu ancak 49px yüksekliğe sığar,
     bu yüzden kâğıtlar küçülür ve satırlar yan yana dizilir */
  .tracked-cards { padding: 5px 7px 4px; }
  .tc-h { display: none; }
  .tc-cards { flex-direction: row; gap: 4px; }
  .tracked-cards { --tc-w: 24px; }
  .tc-row img + img { margin-left: -15px; }
  .felt-contract .fc-pts { display: none; }   /* alçak ekranda yer yok */
  .trick-area { transform: translateY(max(0px, calc(150px - 50%))); }
}

/* Çok alçak DİK telefonda (iPhone SE + Safari çubukları) kutu başlığı
   15px yer yiyor ve kâğıtlar okunmaz boyuta iniyor; başlığı gizleyip
   kâğıtlara yer açıyoruz. Kaçının çıktığı sönük kâğıtlardan görülüyor. */
@media (max-width: 820px) and (max-height: 620px) and (orientation: portrait) {
  .tc-h { display: none; }
  .tracked-cards { --tc-w: clamp(20px, calc(11.9vh - 44px), 32px); }
}

/* 390px ve üstü DİK telefonlarda köşede ~25px daha yer var: bindirmeyi
   gevşetip sayı-renk indeksini rahat okunur hâle getiriyoruz. Yatık
   telefon kapsam dışı; orada zaten yer yok. Bu blok bilerek yukarıdaki
   iki bloğun ARDINDA duruyor: aynı özgüllükte, sonra gelen kazanır. */
@media (min-width: 400px) and (max-width: 820px) and (min-height: 561px) {
  .tc-row img + img { margin-left: calc(var(--tc-w) * -.625); }
}

@media (max-width: 480px) {
  .my-hand { --card-w: 54px; height: 100px; padding: 14px 6px 2px; }
  .trick-card { width: 52px; }
  .brand-lg h1 { font-size: 2.4rem; }
  .modal-box { padding: 22px; }
  .join-code input { width: 140px; }
  .contract-grid { grid-template-columns: 1fr; }
}

/* Telefonlarda kare biraz daha küçük: 64x48'de yandaki kartuşlar ve
   "son el" kutusu çuhanın ortasında birbirine giriyordu (ölçüldü). */
@media (max-width: 480px) {
  .pod-av.has-video { width: 54px; height: 41px; }
}

/* DİKEY TUTULAN TABLET (iPad).
   Tarayıcı kimliğine bakmıyoruz: iPadOS Safari kendini Mac diye tanıtıyor,
   UA denetimi yanıltır. Bunun yerine ölçüye bakıyoruz — 700px'ten geniş
   AMA 820px'ten dar, üstelik 900px'ten uzun bir ekran pratikte yalnızca
   dikey tutulan bir tablettir; hiçbir telefon bu aralığa girmez.

   iPad'ler YATAYKEN zaten yukarıdaki masaüstü kuralına giriyor (genişlik
   1024-1366). Eksik olan yalnızca dikey hâlleriydi: iPad Air dikeyde
   820px ile masaüstü eşiğini bir piksel kaçırıyordu.

   `vh` katsayısı masaüstündekinden düşük: tablet dikeyde çok uzun, aynı
   oranı kullanırsak kartuşlar çuhanın ortasında buluşuyor. */
@media (min-width: 700px) and (max-width: 820px) and (min-height: 900px) {
  .felt { --pv: clamp(80px, 9vh, 112px); }
  /* 101'de görüntü DAHA KÜÇÜK: kartuş çuhanın ortasındaki atım haçına
     doğru büyüyor ve King'deki 116px'le haçın üstüne biniyordu
     (ölçüldü). 101'de masanın ortası oyunun kendisi, görüntü eşlik
     eden bir şey — küçülen o olmalı. */
  .felt.felt-okey { --pv: clamp(68px, 8.4vh, 94px); }
  /* Kameralı kartuş çuhanın içine `--pv + 30px` kadar giriyor; haç o
     bandın dışında kalmalı. */
  .felt.felt-okey.videolu-masa { --ok-pay: calc(var(--pv) + 42px); }
  .pod.videolu {
    flex-direction: column; align-items: stretch; gap: 7px; padding: 9px;
    min-width: calc(var(--pv) * 4 / 3 + 18px);
    max-width: calc(var(--pv) * 4 / 3 + 18px);
  }
  .pod.videolu .pod-caret { position: absolute; top: 12px; right: 14px; z-index: 2; }
  .pod.videolu .pod-av { width: 100%; height: var(--pv); border-radius: 10px; }
  .felt.ust-videolu .felt-contract { top: calc(var(--pv) + 62px); }
  /* Bu genişlikte etiketler sığıyor; düğmeler telefon hâline düşmesin. */
  .media-btn { width: auto; height: 42px; padding: 0 13px; gap: 7px; }
  .media-btn .mb-etiket { display: inline; }
}

/* yardımcı aralık sınıfları (CSP satır içi stile izin vermez) */
.mt12 { margin-top: 12px; }
.mt14 { margin-top: 14px; }
.mt18 { margin-top: 18px; }
.mb18 { margin-bottom: 18px; }

/* ---------------- TJK TV yüzen penceresi ---------------- */
/* İçeride TJK'nın kendi canlı yayın sayfası açılıyor. Konum ve ölçü
   tarayıcıda saklanıyor: oyuncu bir kez yerleştirsin, hep orada açılsın.
   Varsayılan boyut YouTube kutusundan büyük — çerçevelenen şey bir
   oynatıcı değil, TJK'nın tam sayfası. */
.tv-panel {
  position: fixed; right: 22px; bottom: 96px; z-index: 60;
  width: 520px; height: 363px; min-width: 300px; min-height: 200px;
  max-width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  resize: both;
  background: rgba(8, 12, 10, .96); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .6);
}
.tv-panel.kucuk { height: 42px !important; min-height: 0; resize: none; }
.tv-panel.kucuk .tv-govde { display: none; }
/* Sürüklerken çerçeve fare olaylarını yutarsa pencere takılıyor. */
.tv-panel.suruklu .tv-iframe { pointer-events: none; }
.tv-bar {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 8px 10px 8px 13px; cursor: move; touch-action: none;
  background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid var(--line-soft);
}
.tv-bar .sp { flex: 1; }
.tv-baslik { font-size: .82rem; font-weight: 700; letter-spacing: .01em; }
.tv-ikon {
  background: none; border: 0; color: var(--text-dim); cursor: pointer;
  font-size: .95rem; line-height: 1; padding: 4px 7px; border-radius: 6px;
}
.tv-ikon:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.tv-govde { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #000; }
/* Kırpma için: çerçeve sabit 1000x760 açılıp transform ile ölçeklenip
   kaydırılıyor (bkz. tvKirpmaUygula). Konumu JS değil CSS sabitliyor. */
.tv-iframe {
  position: absolute; left: 0; top: 0; border: 0; display: block;
  transform-origin: 0 0;
}
.tv-kaynak { font-size: .68rem; color: var(--text-faint); }
.tv-ikon.acik { color: var(--gold); background: rgba(201, 162, 39, .16); }
.tv-onay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px;
  text-align: center; padding: 18px 22px;
  background: linear-gradient(160deg, #0d1512, #080b0a);
}
.tv-onay .muted-sm { max-width: 340px; line-height: 1.5; }
.tv-onay .linkish { color: var(--gold-lt); }

/* Telefonda ve dar ekranda hem düğme hem pencere kapalı: çuhadan yer
   çalardı ve zaten masaüstü için istendi. */
@media (max-width: 759px) {
  #btn-tv, .tv-panel { display: none !important; }
}

/* ============================================================
   101 OKEY
   ============================================================
   Taşlar görsel dosya değil, CSS ile çiziliyor. Sebep: 106 taş için
   106 küçük resim indirmek hem ağ hem bakım yükü; üstelik içerik
   güvenlik politikası (CSP) dış kaynakları zaten engelliyor. CSS taşı
   her ölçekte net, temayla uyumlu ve tek dosyada.

   Renkler gerçek okey taşlarındaki gibi: kırmızı, siyah, mavi, sarı.
   Siyah, koyu arka planda okunmadığı için koyu gri-mavi tonuna
   kaydırıldı — "siyah" adı korunuyor, kontrast kazanılıyor. */

:root {
  --tas-yuz: #f2ece0;          /* fildişi taş yüzü */
  --tas-yuz-2: #e4dccb;
  --tas-kenar: rgba(0, 0, 0, .35);
  --tas-k: #c62828;            /* kırmızı */
  --tas-s: #263238;            /* "siyah" — koyu gri-mavi */
  --tas-m: #1565c0;            /* mavi */
  --tas-y: #ef8f00;            /* sarı (turuncuya çalan, okunsun) */
  --tas-g: 46px;               /* taş genişliği */
  --tas-y-boy: 64px;
}

.tas {
  position: relative;
  width: var(--tas-g);
  height: var(--tas-y-boy);
  border-radius: 7px;
  background: linear-gradient(160deg, var(--tas-yuz), var(--tas-yuz-2));
  border: 1px solid var(--tas-kenar);
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  user-select: none;
  flex: 0 0 auto;
}

.tas-sayi {
  font-size: calc(var(--tas-g) * .62);
  line-height: 1;
  letter-spacing: -.02em;
}

/* Gerçek taşlardaki alt nokta: aynı sayının iki kopyasını ayırmak için
   değil, taşın yönünü belli etmek için. Küçük ama tanıdık bir ayrıntı. */
.tas-nokta {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

.t-k { color: var(--tas-k); }
.t-s { color: var(--tas-s); }
.t-m { color: var(--tas-m); }
.t-y { color: var(--tas-y); }
.t-sahte { color: #6a1b9a; }
.t-sahte .tas-sayi { font-size: calc(var(--tas-g) * .5); }

.tas-kapali {
  background: linear-gradient(150deg, #2c3a33, #1a241f);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: var(--sh-1);
}

.tas-mini { --tas-g: 30px; --tas-y-boy: 42px; }
/* Masanın ortasındaki atım taşları: mini kadar küçük değil,
   ıstakadaki kadar büyük değil — okunmalı ama haç kartuşların
   arasına sığmalı. */
.tas-orta { --tas-g: clamp(24px, 3.9vh, 38px);
            --tas-y-boy: clamp(28px, 5vh, 52px); }
/* Istaka taşı. [BURAK] ıstaka 14'ten 21 taşa çıkınca bu boy dikeyde
   yetmez oldu: taşlar iki satıra sarıyor, ıstaka ~70px büyüyor ve o
   yeri çuhadan ile hamle düğmelerinden çalıyordu. 1024x600'de düğmeler
   ekranın altından taşıyor, ortadaki atım haçının taşları okunmaz
   boya (<24px) düşüyordu — ikisi de ölçüldü.

   48 -> 42px: 21 taş 1440'ta hâlâ tek satır, dar ekranda iki satır
   ama toplam yükseklik eskisine yakın. */
.tas-buyuk { --tas-g: 42px; --tas-y-boy: 58px; }

/* ---- tahta ---- */

/* YERLEŞİM — ÜÇÜNCÜ ve son karar. Kısa bir tarihçe, çünkü önceki
   ikisi ölçümle çürütüldü ve aynı yollara tekrar sapılmasın:

   1) Taşlar çuhanın İÇİNDEYDİ. Kartuşlar dört kenara çıpalı ve
      genişlikleri takma ada göre değiştiği için telefonda ortada per
      dizmeye 84px kalıyordu. Taşlar çuhanın ALTINA alındı — bu karar
      DURUYOR.
   2) Çuha ince bir oyuncu ŞERİDİNE indirildi, kartuşlar yan yana bir
      sıra oldu. Çakışma bitti ama oyun bilgisi de bitti: yan yana dört
      isim "kim bana atıyor, ben kime atıyorum" sorusunu cevaplamıyor.
      Okeyde bu bilgi oyunun kendisi — SOLDAKİNİN attığını alırsın,
      senin attığını SAĞDAKİ alır. Liste anlatamaz, KONUM anlatır.

   Bu yüzden çuha yine gerçek bir masa: kartuşlar King'deki gibi dört
   kenarda (o yerleşim orada yıllardır çalışıyor), atım yığınları
   ortada bir HAÇ hâlinde ve her yığın sahibinin yönünde. Kapalı deste
   tam ortada, gerçek masadaki gibi. Taşlar çuhanın altında kalıyor. */
.felt.felt-okey {
  /* King'inkinden alçak: 101'de çuhanın altında bir de ıstaka ve
     düğmeler var, o yer çuhadan çıkıyor. */
  min-height: 232px;
  max-height: 470px;
  /* Haçın üst/alt payı: kartuşlar çuhanın kenarına çıpalı ve içeri
     doğru taşıyorlar. Kamerasız kartuş 49px (31px içeride), alçak
     ekranda yatay kameralı kartuş 72px (54px içeride) — 60px ikisini
     de kurtarıyor. Dikey kameralı kartuşun payı aşağıda, o düzenin
     geçerli olduğu medya sorgularının İÇİNDE hesaplanıyor. */
  --ok-pay: 60px;
}

/* Çuhadaki ♛ filigranı King'in amblemi; 101 masasında yanıltıcı.
   Ortadaki haç asıl içerik olduğu için filigran küçülüp soluyor. */
.felt.felt-okey::after {
  content: '101';
  font-size: clamp(2rem, 5vh, 3.4rem);
  opacity: .45;
}

/* ÇOK ALÇAK PENCERE (telefonu yan tutmak: 844x390).

   Ölçüm: bu boyda oyun alanına 252px kalıyor. Masa (kartuşlarıyla
   birlikte en az ~150px) ve 15 taşlık ıstaka (~110px) aynı anda
   sığmıyor — bu bir ayar meselesi değil, aritmetik.

   Tercih edilen tutuş DİKEY: düzen zaten dikey (masa üstte, ıstaka
   altta) ve okey tek elle, otobüste, yatakta oynanan bir oyun. Yan
   tutmayı ZORUNLU kılmıyoruz ama yan tutanın da eli kolu bağlanmasın:
   oyun alanı kaydırılabilir oluyor, hiçbir şey ulaşılamaz kalmıyor.
   Masa da küçülüyor ki kaydırma kısa sürsün. */
@media (max-height: 500px) {
  .table-area { overflow-y: auto; justify-content: flex-start; padding-top: 8px; }
  /* Çuha 200px'in altına inince ortadaki taşlar 24px'in altına
     düşüyor ve sayı okunmuyor (ölçüldü). Alan zaten kaydırılıyor;
     çuhayı kısaltmanın kazancı biraz daha az kaydırma, bedeli masayı
     okunmaz yapmak — bu takas yanlış. */
  .felt.felt-okey { min-height: 208px; max-height: 300px; }
  .okey-board { padding: 6px 6px 4px; gap: 4px; }
  .okey-ust { padding: 4px 8px; gap: 8px; }
  .okey-alt { padding: 4px 6px 8px; gap: 5px; }
  .okey-duzen { font-size: .7rem; gap: 5px; }
  .tas-buyuk { --tas-g: 34px; --tas-y-boy: 47px; }
  .okey-istaka { min-height: 52px; padding: 5px; gap: 3px; }
  .tas-yuva.grup-basi { margin-left: 8px; }
  /* Dördü birden kameralıyken kartuşlar bu boyda haça yer bırakmıyor;
     küçültmek de yetmedi (ölçüldü: taşlar 24px'in altında kalıyor).
     Bu boyda MASADAKİ görüntü tamamen kalkıyor — kimin kamerası açık
     olduğu addaki 📷 rozetinden görülüyor. Kendi görüntün duruyor:
     "kadraja giriyor muyum" sorusunun tek cevabı o.

     Takas açık: 390px yüksekliğinde ya masa okunur ya üç küçük
     görüntü. Masa oyunun kendisi. */
  .felt-okey .pod-top .pod-av.has-video,
  .felt-okey .pod-left .pod-av.has-video,
  .felt-okey .pod-right .pod-av.has-video { display: none; }
  .felt-okey .pod-bottom .pod.videolu .pod-av { width: 42px; height: 32px; }
  .okey-ust { gap: 5px; padding: 3px 6px; }
  .felt-okey .pod.videolu { padding: 4px 8px; gap: 7px; }
}

/* 101'DE BÜYÜK VİDEO YALNIZCA YER VARSA.

   King'de kartuş büyüyünce yalnızca çuhanın boş yeşilini kaplıyor.
   101'de çuhanın ortası OYUNUN KENDİSİ: atım yığınları orada. Alçak
   pencerede iki büyük kartuş (üst + alt) çuhanın tamamını yiyor ve haç
   okunmayacak kadar küçülüyordu — ölçüldü: 1762x728'de dört kamera
   açıkken ortadaki taşlar 16px'e iniyor, üstündeki sayı okunmuyor.

   Bu yüzden 101'de dikey (büyük) video düzeninin eşiği daha yüksek:
   860px. Altındaki pencerelerde görüntü küçük kare olarak adın yanında
   duruyor — görüntü kaybolmuyor, masanın ortası okunur kalıyor. Kendi
   görüntüsünü büyük isteyen onu masadan dışarı sürükleyebiliyor
   (bkz. `.pod-slot.serbest`). */
@media (max-height: 859px) {
  .felt-okey .pod.videolu {
    flex-direction: row;
    align-items: center;
    min-width: 132px;
    max-width: none;
    padding: 8px 13px;
    gap: 10px;
  }
  .felt-okey .pod.videolu .pod-av { width: 72px; height: 54px; }
  .felt-okey .pod.videolu .pod-caret { position: static; top: auto; right: auto; }
}

/* Çok alçak pencerede (1024x600 gibi, dördü birden kameralı) küçük kare
   bile fazla geliyordu: haçtaki taşlar yine 24px'in altına iniyordu.
   Görüntü bir tık daha küçülüyor — masanın okunurluğu önce gelir. */
@media (max-height: 659px) {
  .felt-okey .pod.videolu .pod-av { width: 54px; height: 41px; }
  .felt-okey .pod.videolu { padding: 6px 10px; }
}

/* ---- atım haçı ---- */

.okey-orta {
  position: absolute;
  /* YANLARA YAYILIYOR, dikeyde toplu duruyor. Sebep ölçüm: kameralı
     üst ve alt kartuşlar çuhanın içine ~130px giriyor, geriye ortada
     yalnızca ~170px kalıyor — dikeyde yayılacak yer yok. Yanlarda ise
     bol yer var ve yığını sahibine YAKLAŞTIRMAK bağı güçlendiriyor.
     Kenar payı sabit piksel: yan kartuşların genişliği takma ada göre
     değişiyor, yüzde ile hesaplamak dar çuhada onların üstüne
     bindiriyordu. */
  /* Dikeyde kartuşların ARASINA sıkışıyor. Sabit 50% + ortalamak
     yetmiyordu: kamera açılınca üst ve alt kartuşlar çuhanın içine
     doğru büyüyor ve haçın üstüne biniyorlardı (ölçüldü: 5520px²,
     1762x728'de). Pay kartuşun boyundan türetiliyor. */
  top: var(--ok-pay, 60px);
  bottom: var(--ok-pay, 60px);
  left: clamp(84px, 18%, 230px);
  right: clamp(84px, 18%, 230px);
  z-index: 4;
  display: grid;
  align-content: center;
  /* Ölçüm sonucu küçültme buradan uygulanıyor (bkz. `ortaSigdir`). */
  transform-origin: center;
  grid-template-areas:
    ".      ust   ."
    "sol    dst   sag"
    "oksol  alt   oksag";
  grid-template-columns: 1fr auto 1fr;
  gap: 4px 12px;
  place-items: center;
}
/* Yan yığınlar kendi sahiplerine doğru kaydırılıyor. */

.ok-yer-sol { justify-self: start; }
.ok-yer-sag { justify-self: end; }
.ok-ok-sol  { justify-self: start; }
.ok-ok-sag  { justify-self: end; }

.ok-yer-ust { grid-area: ust; }
.ok-yer-sol { grid-area: sol; }
.ok-yer-sag { grid-area: sag; }
.ok-yer-alt { grid-area: alt; }
.ok-deste   { grid-area: dst; }
.ok-ok-sol  { grid-area: oksol; }
.ok-ok-sag  { grid-area: oksag; }

.ok-yer {
  position: relative;
  border-radius: 10px;
  padding: 3px;
  border: 1px solid transparent;
}

/* Yığındaki taş sayısı. Taşın köşesinde küçük bir rozet: ayrı satır
   olarak yazınca haç 3 satır büyüyor ve kameralı kartuşların arasına
   sığmıyordu (ölçüldü). */
.ok-yer-sayi {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 17px; padding: 0 3px;
  border-radius: 9px;
  background: rgba(8, 12, 10, .92);
  border: 1px solid var(--line-soft);
  font-size: .62rem; font-weight: 700; line-height: 16px;
  text-align: center; color: var(--text-dim);
}

/* Alınabilecek taş: yalnızca soldaki oyuncunun yığınının en üstü. */
.ok-yer.alinabilir {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
  cursor: pointer;
  animation: nabiz 1.6s ease-in-out infinite;
}

/* SENİN yığının — attığın taş buraya gider, sağdaki oradan alır. */
.ok-yer-alt { border-color: rgba(201, 162, 39, .35); }

/* Kapalı deste. Sayı üstünde duruyor: "kaç taş kaldı" el boyunca en sık
   bakılan şey ve gerçek masada da destenin kendisine bakılır. */
.ok-deste {
  display: grid; place-items: center;
  width: clamp(28px, 4.4vh, 46px);
  height: clamp(30px, 5.6vh, 58px);
  border-radius: 9px;
  background: linear-gradient(160deg, #23402f, #16281e);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04);
  font-size: .9rem; font-weight: 800; color: var(--gold-lt);
}
.ok-deste-lbl { font-size: .55rem; font-weight: 600; color: var(--text-faint); }

/* İKİ OK — sorunun cevabı burada. Haçın boş kalan iki alt köşesine
   oturuyorlar ve akışı gösteriyorlar: soldaki senin yığınına doğru,
   seninki sağdakine doğru. Metin yazmak yerine ok kullanmak yer
   kazandırıyor; açıklama `title` ve `aria-label`de. */
.ok-akis {
  display: flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700;
  color: var(--gold); opacity: .9;
  white-space: nowrap;
  user-select: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.ok-akis i { font-style: normal; font-size: 1.05rem; line-height: 1; }
.ok-akis.pasif { opacity: .3; color: var(--text-faint); }

.okey-board {
  /* Doğal yüksekliğinde kalıyor, esneyip boşluk açmıyor: `.table-area`
     zaten dikeyde ortalıyor. `flex: 1` verince perler boşken çuha ile
     ıstaka arasında koca bir boşluk kalıyordu. */
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Eskiden 30px'ti: alttaki kartuş çuhanın alt kenarından 18px taşıyor
     (`.pod-bottom { bottom: -18px }`) ve bilgi çubuğu onun altına
     giriyordu. Kartuşlar artık şeridin İÇİNDE, taşma yok; 30px sadece
     boşluk olarak kalıyordu. */
  padding: 12px 8px 0;
  overflow-y: auto;
}

.okey-ust {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 14px;
  margin: 0 auto;
}

.ok-bilgi { display: flex; align-items: center; gap: 7px; }
/* Eşiği geçen "elindeki en iyi" yeşil: bakınca anlaşılsın. */
.ok-bilgi-yesil b { color: var(--green-lt); }
/* Seçili taşın UYMADIĞI perler sönük ve tıklanmaz. Eskiden hepsi
   tıklanabilir görünüyordu; uymayan bir tıklamada çıkan "Taş bu pere
   uymuyor" hatası oyuncuya "oyun yanlış" dedirtiyordu. */
/* Çiftle açılmış per: masada ayrı dursun. Renk uyarı değil, KİMLİK —
   "buna işlenmez" ve "bu oyuncu bahse girdi" bilgisini taşıyor. */
.ok-per.ok-cift {
  border-color: rgba(201, 162, 39, .55);
  background: linear-gradient(180deg, rgba(201, 162, 39, .10),
                                       rgba(201, 162, 39, .03));
}
.ok-per.ok-cift .ok-per-sahip { color: var(--gold-lt); }

.ok-per.uymaz { opacity: .4; cursor: default; }
.ok-lbl { color: var(--text-dim); font-size: 12px; }
.ok-bilgi b { font-size: 16px; color: var(--gold-lt); }

/* MASADAKİ PERLER — neden tek satır değil.

   Eskiden tek satırdı: `overflow-x: auto` + `justify-content: center`.
   Bu ikisi YAN YANA DURAMAZ. Ortalanan bir şerit taşınca iki yana
   birden taşıyor, `scrollLeft` ise negatife inemiyor — soldaki
   perlere KAYDIRSAN DA ulaşılamıyordu.

   Ne kadarı kayboluyordu, ölçüldü (1440x900, gerçek işaretlemeyle):

       6 per  → 0 px
      15 per  → 362 px soldan  (bir elin TİPİK zirvesi)
      22 per  → 895 px soldan  (görülen en yüksek)

   15 sayısı tahmin değil: 360 elde ölçüldü, elin zirvesi ortancada
   15 per / ~57 taş. Yani masa tek satıra zaten SIĞMIYOR; şeridi
   kaydırılabilir yapmak yetmez, perlerin SATIRLARA SARMASI gerekiyor.

   Sarma + dikey kaydırma seçildi çünkü dikeyde `scrollTop` iki yöne
   de gidiyor: hiçbir per ulaşılamaz kalmıyor. Taş boyunu da
   `perleriSigdir()` (okey101.js) sığana kadar küçültüyor. */
.okey-perler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 2px 8px;
  flex: 0 1 auto;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  /* Yatay taşma artık YOK (sarıyor); kalırsa da gizlenmesi değil
     satıra inmesi doğru olanı — bu yüzden hidden. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Şerit ne kadar büyürse çuha ve ıstaka o kadar sıkışıyor. Tavan
     buradan geliyor; taş boyu bu tavana göre küçülüyor. */
  max-height: clamp(96px, 20vh, 190px);
  /* TAVAN KADAR TABAN DA LAZIM. Şerit esnek bir kutunun içinde ve
     alçak pencerede eziliyordu: 1024x600'de yüksekliği 13px'e
     düşüyor, 65px'lik bir perin hiçbir parçası tam görünmüyordu
     (ölçüldü). En az BİR SATIR garanti; gerisi kaydırma. */
  min-height: 66px;
  scrollbar-width: thin;
}

/* Taş boyu JS'ten geliyor: `perleriSigdir()` şerit tavanına sığana
   kadar merdiveni iniyor. Öntanımlı değerler `.tas-mini` ile aynı,
   yani JS çalışmasa da ekran eskisi gibi. */
.okey-perler .tas-mini {
  --tas-g: var(--per-tg, 30px);
  --tas-y-boy: var(--per-ty, 42px);
}

.ok-bos { color: var(--text-faint); font-size: 13px; padding: 10px; }

.ok-per {
  position: relative;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  flex: 0 0 auto;
}

/* Uzun takma ad perin ENİNİ belirlemesin: "Ayşegülcüğüm" yazan bir
   per taşlarından iki kat geniş duruyor ve satıra daha az per
   sığıyordu. Ad kırpılıyor, tamamı `title`da. */
.ok-per-sahip {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 108px;
}

.ok-per-taslar { display: flex; gap: 3px; }

/* İşlenebilir perler tıklanabilir olduklarını göstersin: 101'de "şimdi
   ne yapabilirim" sorusu ekranın en sık sorulan sorusu. */
/* Vurgu GÜÇLENDİ, sebebi ölçüm: masada ortalama 11 (zirvede 22) per
   duruyor ve seçili taş işlediğinde neredeyse hep TEK bir pere
   işliyor. Yani bu çerçeve, yirmi kutunun arasından bir tanesini
   gösteren tek işaret — ince bir hâle orada kayboluyordu. */
.ok-per.islenebilir {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow), 0 4px 14px rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, rgba(201, 162, 39, .18),
                                      rgba(201, 162, 39, .05));
  cursor: pointer;
}

/* Seçili taşın nereye işlediğini söyleyen tek satır. Şeridin ÜSTÜNDE
   duruyor: gözün perlere inmeden önce uğradığı yer orası. */
.ok-per-ipucu {
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-lt);
  background: rgba(201, 162, 39, .12);
  border: 1px solid rgba(201, 162, 39, .34);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: -2px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Hiçbir pere işlemiyor" bir HATA değil, bilgi — kırmızı olmamalı.
   Sönük gri: oyuncu "yanlış bir şey yaptım" diye okumasın. */
.ok-per-ipucu.ok-ipucu-yok {
  color: var(--text-dim);
  background: rgba(255, 255, 255, .05);
  border-color: var(--line-soft);
}

.ok-per-bekleyen { border-color: var(--green); }

.ok-per-sil {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, .5);
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1;
}

/* ---- ıstaka ve eylemler ---- */

.okey-alt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 12px;
  /* Istaka ekranın TAMAMINI kaplamıyor. Geniş ekranda 2000px'lik bir
     ıstakanın sol 850px'inde 15 taş, sağında 1150px boş tahta duruyordu
     — taşlar sola sıkışmış görünüyor, masayla hizası kayıyordu.
     Taşları ortalamak ise çözüm DEĞİL: her el 14/15 taş arasında gidip
     geldiği için sıra yarım taş kayar ve tıklamak üzere olduğun taş
     yerinden oynar. Bunun yerine ıstakanın KENDİSİ daralıyor; taşlar
     içinde soldan dizili kalıyor. 980px ~16 taş alır, sarma nadir. */
  width: min(100%, 980px);
  margin: 0 auto;
  flex-shrink: 0;
}

.okey-bekleyen {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  align-items: flex-end;
  padding-bottom: 4px;
}

.ok-bekleyen-ozet {
  align-self: center;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  padding: 0 6px;
}

.ok-bekleyen-ozet.yeter { color: var(--green-lt); font-weight: 700; }

/* Istaka gerçek okey ıstakası gibi: taşlar bitişik bir sırada durur.
   Dar ekranda kaydırılabilir — taşları küçültmek yerine kaydırmak,
   dokunmatikte hedefi büyük tutuyor. */
/* Istaka gerçek okey ıstakası gibi: sığmayınca İKİNCİ SIRAYA sarar.
   Yatay kaydırma denendi ve bırakıldı — okeyde bütün taşlarını aynı
   anda görmek oyunun kendisi; kaydırmada telefonda 15 taşın 8'i
   ekran dışında kalıyordu (ölçüldü). */
/* GRUP BOŞLUĞU. Istaka dizildiğinde taşlar seri/küme hâlinde yan yana
   geliyordu ama hepsi eşit aralıklıydı; perin nerede bittiği gözle
   ayırt edilemiyordu. Yeni grubun ilk taşı soluna pay alıyor.

   Boşluk masaüstünde daha cömert: orada yer var ve okunurluk kazancı
   bedava. Dar ekranda küçülüyor — orada her piksel ıstakanın kaç
   satıra sardığını belirliyor. */
.tas-yuva.grup-basi { margin-left: 14px; }

.okey-istaka {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 7px 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 72px;
  align-items: center;
}

/* ---- ıstakayı dizme ---- */

.okey-duzen {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--text-faint);
}

.ok-duzen-btn {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.ok-duzen-btn:hover { background: rgba(255, 255, 255, .1); color: var(--text); }

.tas-yuva {
  border-radius: 8px;
  padding: 2px;
  transition: transform .12s ease;
  flex: 0 0 auto;
  /* Taşı sürüklerken tarayıcının kendi metin seçimi ve dokunmatik
     kaydırması devreye girmesin; hareketi biz yönetiyoruz. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Sürüklenen taş parmağın/imlecin altında yükseliyor. */
.tas-yuva.suruklenen {
  opacity: .35;
}

/* Bırakılacak yeri gösteren boşluk. Taşı "araya sokuyorum" hissi için
   gerçek bir yuva açılıyor; imleç nereye gelirse orada. */
.tas-yuva.hedef-once { box-shadow: -3px 0 0 0 var(--gold); }
.tas-yuva.hedef-sonra { box-shadow: 3px 0 0 0 var(--gold); }

/* Sürüklenirken parmağın altında uçan kopya. */
.tas-ucan {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: .95;
  transform: translate(-50%, -50%) scale(1.06);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6));
}

.tas-yuva[role="button"] { cursor: pointer; }
.tas-yuva[role="button"]:hover { transform: translateY(-4px); }

.tas-yuva.secili {
  transform: translateY(-8px);
  box-shadow: 0 0 0 2px var(--gold), 0 8px 16px rgba(0, 0, 0, .5);
}

.tas-yuva.ayrilmis { opacity: .35; }

.okey-eylemler {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.ok-bekle { color: var(--text-dim); font-size: 14px; }
.ok-ipucu { opacity: .75; }

/* Kural metninin sürümü — kural sayfasının üstünde. Küçük ve sessiz:
   bilgi lazım olduğunda orada, olmadığında göz yormuyor. */
.kural-surum {
  font-size: .78rem; color: var(--text-dim);
  margin: 2px 0 14px; display: flex; align-items: center; gap: 8px;
}
.kural-surum b { color: var(--text); font-weight: 600; }
.kural-ozet {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem; opacity: .55; letter-spacing: .3px;
}
.kural-surum:empty, .kural-surum b:empty { display: none; }

/* Kapalı bir düğmenin SEBEBİ. Tooltip yetmiyor: dokunmatikte hiç
   görünmüyor ve oyuncu düğmeyi bozuk sanıyor. Yazı düğmenin yanında
   duruyor. */
.ok-ipucu-yazi {
  font-size: .78rem;
  color: var(--text-dim);
  max-width: 34ch;
  line-height: 1.35;
}

.btn-danger {
  background: linear-gradient(180deg, #e05a5f, var(--red));
  color: #fff;
  border: 1px solid rgba(0, 0, 0, .3);
}

/* ---- lobi ve masa açma ---- */

.oyun-rozet {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  color: var(--text-dim);
}

.oyun-king { border-color: var(--gold-dk); color: var(--gold-lt); }
.oyun-okey101 { border-color: #2f6fb4; color: #7fb2e8; }

.oyun-secim { display: flex; gap: 10px; flex-wrap: wrap; }

.oyun-kart {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.oyun-kart.secili {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-glow);
}

.oyun-ad { font-weight: 700; }
.oyun-alt { font-size: 12px; color: var(--text-dim); }

/* Telefon: taşlar küçülür, tahta çuhanın içinde akışa girer. */
@media (max-width: 720px) {
  :root { --tas-g: 34px; --tas-y-boy: 48px; }
  /* Telefonda grup boşluğu neredeyse yok. Ölçüldü: 8px'lik pay
     ıstakayı fazladan bir satıra taşırıyor, çuha kısalıyor ve
     ortadaki atım haçının taşları okunmaz boya (<24px) düşüyor.
     Dar ekranda her piksel satır sayısını belirliyor; boşluk
     masaüstünün lüksü. */
  .tas-yuva.grup-basi { margin-left: 3px; }
  .tas-buyuk { --tas-g: 32px; --tas-y-boy: 45px; }
  .tas-mini { --tas-g: 24px; --tas-y-boy: 34px; }

  /* Telefonda çuha daha da kısalıyor: taşlara yer açmak, dekoratif
     yeşilliği korumaktan önemli. Yan kartuşlar dar ekranda haça
     girmesin diye küçülüyor. */
  .felt.felt-okey { min-height: 196px; max-height: 300px; }
  /* Telefonda çuha 374px: yan kartuşlar kendi taban genişlikleriyle
     (132px) ortada haça 110px bırakıyor ve haç eziliyor. 101'de
     kartuş bir bilgi kutusu, masanın ortası ise oyunun kendisi —
     daralan kartuş olmalı. */
  .felt-okey .pod { min-width: 0; padding: 5px 7px; gap: 6px; }
  .felt-okey .pod-name { font-size: .74rem; }
  /* YAN kartuşlar telefonda DİKEY ve dar. 374px'lik çuhada yan yana
     iki yatay kartuş ortada haça 74px bırakıyordu ve taşlar 16px'e
     iniyordu (ölçüldü) — üstündeki sayı okunmuyor. Dikey durunca ikisi
     68px'e sığıyor, ortaya ~230px kalıyor. Ad küçülüyor ama DURUYOR:
     kimin nerede oturduğu 101'de bilginin kendisi, gizlenemez. */
  .felt-okey .pod-left .pod,
  .felt-okey .pod-right .pod {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    min-width: 0;
    max-width: 68px;
    padding: 5px 4px;
  }
  .felt-okey .pod-left .pod-name,
  .felt-okey .pod-right .pod-name { font-size: .58rem; max-width: 58px; }
  .felt-okey .pod-left .pod-av,
  .felt-okey .pod-right .pod-av { width: 28px; height: 28px; font-size: .6rem; }
  .felt-okey .pod-left .pod.videolu .pod-av,
  .felt-okey .pod-right .pod.videolu .pod-av { width: 44px; height: 33px; }
  /* Dördü birden kameralıyken alt ve üst kartuş da haça yer bırakmalı. */
  .felt-okey .pod-top .pod.videolu .pod-av,
  .felt-okey .pod-bottom .pod.videolu .pod-av { width: 52px; height: 39px; }
  .felt-okey .pod-left .pod-caret,
  .felt-okey .pod-right .pod-caret { display: none; }
  .okey-orta { gap: 3px 6px; top: 46px; bottom: 46px; }
  .ok-akis { font-size: .62rem; gap: 3px; }
  .okey-board { padding: 10px 8px 8px; }
  /* Bilgi çubuğuna "Elindeki en iyi" eklenince telefonda ikinci
     satıra sarıyor ve çaldığı ~30px, masanın ortasındaki haçı 24px
     eşiğinin altına itiyordu (ölçüldü). Çubuk daralıyor: bilgi
     duruyor, yer masaya kalıyor. */
  .okey-ust { gap: 7px; padding: 4px 8px; }
  .okey-ust .ok-lbl { font-size: 10px; }
  .okey-ust .ok-bilgi { gap: 4px; }
  .ok-bilgi b { font-size: 14px; }
  .ok-lbl { font-size: 11px; }
  .okey-istaka { min-height: 66px; }
  .okey-alt { padding: 6px 6px 8px; }
}

/* Etkisiz düğme etkisiz GÖRÜNMELİ. 101'de "Aç" düğmesi çoğu turda
   kapalı; parlak yeşil durursa oyuncu boşuna tıklıyor. */
.btn:disabled,
.btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.5);
}

/* Seçenek düğmeleri (101'de el sayısı) oyun kartlarından küçük: yan
   yana üç rakam, kart genişliğinde durursa pencereyi gereksiz büyütür. */
.secenek-kart {
  flex: 0 0 auto;
  min-width: 54px;
  text-align: center;
  font-weight: 700;
  padding: 8px 14px;
}
#new-table-options { display: flex; flex-direction: column; gap: 6px; }

/* Perdeki okey vurgulanıyor: hem "bu taş okeydir, yerine geçtiği taş
   değil" demek için, hem de okeyi geri alma kuralını (OKEY101.md §7)
   görünür kılmak için. */
.tas-okey {
  box-shadow: 0 0 0 2px var(--gold), var(--sh-1);
}

.ok-per-okey {
  display: block;
  margin: 5px auto 0;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: rgba(201, 162, 39, .16);
  color: var(--gold-lt);
  cursor: pointer;
}

/* Liderlik sekmeleri: içerikleri kadar yer kaplar. Oyun SEÇME kartları
   (`flex: 1 1 130px`) pencereyi eşit bölsün diye esniyor; sekmeler ise
   geniş bir panelin içinde duruyor ve esneyince tablonun kaydırma
   genişliğine göre büyüyüp panelden taşıyorlardı (ölçüldü). */
.lb-sekme { margin-bottom: 14px; }
.lb-kart {
  flex: 0 0 auto;
  min-width: 0;
  padding: 8px 16px;
}

/* Liderlik tablosu dar ekranda KENDİ kutusunda kayar. Sarmalayıcı
   olmadan sekiz sütun sayfayı yana kaydırıyor, kenar çubuğu ve başlık
   da birlikte sürükleniyordu (telefonda 144px ölçüldü). */
.lb-kaydir { overflow-x: auto; }
.lb-kaydir .lb-table { min-width: 560px; }

/* Masa açma penceresinde bloklar arası ritim. Ölçüldü: oyun kartlarının
   altı ile "MASA ADI" etiketi arasında 0px vardı — etiket kartlara
   yapışık duruyor, iki blok tek bir grup gibi okunuyordu. Kutu ile
   "Özel masa" arası da 4px'ti. `.field` kendi içinde 6px boşluk
   veriyor ama bloklar ARASINDA hiç boşluk tanımlı değildi. */
#modal-new-table .field,
#modal-new-table .switch-row {
  margin-bottom: 18px;
}
#modal-new-table .field:last-of-type { margin-bottom: 18px; }
/* Başlık ile ilk etiket arası da biraz açılsın: 8px'te başlık etikete
   yapışıp "Yeni Masa OYUN" diye tek satır gibi okunuyordu. */
#modal-new-table > .modal-box > h3 { margin-bottom: 16px; }

/* Dar ekranda fotoğraflar kısalıyor: 3:4 kutu 1180px altında panelin
   boyunu formun ötesine taşırıyordu (ölçüldü). Kare kutu aynı
   genişlikte 60px kısa. Fotoğraf kırpılmıyor, sadece daha az dikey
   alan gösteriyor — ikisinde de asıl konu ortada. */
@media (max-width: 1180px) {
  .hero-foto { aspect-ratio: 1 / 1; }
  .hero-fotolar { gap: 10px; }
}

/* ---- özel gün kutlaması ---- */

/* Görsel 640x200; kutu ona göre genişliyor ve dar ekranda küçülüyor.
   Kutlama bir kez ve isteğe bağlı görülüyor, o yüzden sade tutuldu. */
.ozel-kutu { width: min(680px, 100%); text-align: center; }
.ozel-gorsel {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.ozel-baslik {
  margin-top: 14px;
  font-size: 1rem;
  color: var(--gold-lt);
  font-weight: 600;
}


/* ==========================================================================
   ALÇAK VE GENİŞ PENCERE — en sonda durmasının sebebi var
   ========================================================================== */

/* Ultrawide ama alçak pencere (1762x728 gibi) + dört kamera açık:
   [BURAK] 21 taşlık ıstaka iki satıra sarıyor, çuha kısalıyor ve
   ortadaki atım haçının taşları okunmaz boya (24px'in altına)
   düşüyor — ölçüldü.

   Çözüm dikey alanı ıstakadan alıp haça vermek. Istakadaki taş
   38px'te hâlâ rahat okunuyor (ekranın altında, göze yakın); haçtaki
   taş masanın ortasında ve küçülünce "kim ne attı" görünmez oluyor.
   Kısıtlı alanı, bilgisi daha kritik olana veriyoruz.

   DOSYANIN SONUNDA olması şart. İlk yazışımda bu blok `.tas-buyuk`
   tanımından ÖNCEydi; medya sorgusu özgüllüğü artırmadığı için temel
   kural kaynak sırasıyla onu eziyordu ve blok hiç çalışmıyordu.
   (Aynı hataya daha önce `--pv` ile de düşülmüştü — CSS'te "yazdım
   ama olmadı" denince ilk bakılacak yer sıra.) */
@media (min-width: 1200px) and (max-height: 780px) {
  .tas-buyuk { --tas-g: 38px; --tas-y-boy: 52px; }
  .tas-yuva.grup-basi { margin-left: 10px; }
  .okey-istaka { min-height: 60px; padding: 5px 8px; }
  .okey-alt { gap: 4px; }
}

/* Per şeridinin tavanı alçak pencerede düşüyor — sebebi ölçüm.

   Şerit satırlara sarınca 1024x600'de tavan 120px'e çıkıyor ve
   ıstakanın alt kenarı 35px aşağı iniyor (ölçüldü). Alçak pencerede
   ıstaka masadan önce gelir: kendi taşların oyunun kendisi, masadaki
   perler referans. Şerit kısalıyor, içinde dikey kaydırma kalıyor —
   dikey kaydırma iki yöne de çalıştığı için hiçbir per KAYBOLMUYOR.
   Kaybolan tam olarak eski yatay şeridin sorunuydu.

   Bu blok DOSYANIN SONUNDA: medya sorgusu özgüllük artırmıyor,
   `.okey-perler` temel kuralından önce yazılsaydı kaynak sırası
   yüzünden hiç çalışmazdı. (Aynı tuzağa `.tas-buyuk` ve `--pv` ile
   iki kez düşüldü.) */
@media (max-height: 760px) {
  .okey-perler { max-height: clamp(80px, 13vh, 108px); }
}

@media (max-height: 500px) {
  .okey-perler { max-height: 72px; }
}

/* ==========================================================================
   GÜVENLİ ALAN (safe area) — çentik / durum çubuğu altına girmeme
   ==========================================================================
   Android 15 (API 35) hedefleyen uygulamalarda sistem edge-to-edge'i ZORUNLU
   kılıyor: içerik durum çubuğunun ALTINA kadar uzatılıyor ve boşluğu
   uygulamanın bırakması bekleniyor; Capacitor'ın StatusBar eklentisiyle
   bundan çıkmak artık mümkün değil. Sonuç: masa başlığı saat/pil
   ikonlarıyla üst üste biniyordu.

   Çözüm burada, PAYLAŞILAN CSS'te — mobil kabuğa özel bir yamada değil:
   `env(safe-area-inset-top)` masaüstü tarayıcıda ve çentiksiz cihazlarda
   0 döner, yani web hiç etkilenmez; buna karşılık çentikli bir iPhone'dan
   siteye TARAYICIYLA girenin de aynı sorunu çözülür. Tek yer, iki kazanç.
   (`index.html` zaten `viewport-fit=cover` taşıyor; onsuz env() 0 kalırdı.)

   Değerler taban dolgularla eşleşmeli: .topbar 18px / mobilde 14px,
   .game-bar 11px. Blok DOSYANIN SONUNDA: medya sorgusu özgüllük
   artırmadığı için kaynak sırası belirleyici — yukarıda yazılsaydı mobil
   override'ın `padding` kısayolu bunu ezerdi. */
:root { --guvenli-ust: env(safe-area-inset-top, 0px); }

.topbar   { padding-top: calc(18px + var(--guvenli-ust)); }
.game-bar { padding-top: calc(11px + var(--guvenli-ust)); }

@media (max-width: 820px) {
  .topbar { padding-top: calc(14px + var(--guvenli-ust)); }
}