/* hidden özniteliği HER ŞEYDEN önce gelir. Tarayıcının kendi
   [hidden]{display:none} kuralı UA katmanındadır; bu dosyadaki sıradan bir
   "display: block/flex" bile onu yener. Bu yüzden JS'te .hidden = true demek
   öğeyi gizlemeye YETMİYORDU: "Yönetim Paneli" menü satırı (.app-drawer-item
   display:grid), profil rozetleri ve arkadaşlık
   "Kabul et/Reddet" kutusu herkese görünüyordu. Aşağıda tek tek yamalamak
   yerine kural burada bir kez konuyor — yeni eklenen her hidden öğe de
   otomatik olarak doğru davranır. */
[hidden] { display: none !important; }

:root {
  --ink: #f5f2e8;
  --muted: #9db4ae;
  --gold: #f3b943;
  --gold-dark: #b77912;
  --red: #c8424c;
  --deep: #06191c;
  --deep-2: #0a2727;
  --felt: #0e5145;
  --felt-light: #17705e;
  --panel: rgba(13, 44, 44, .84);

  /* Sistem çubuğu payları. Varsayılan env(safe-area-inset-*); native katman
     (MainActivity WindowInsets dinleyicisi) daha doğru değeri biliyorsa
     documentElement üzerine yazıp bunları ezer. Android WebView sistem
     çubuğu inset'lerini env() ile RAPORLAMIYOR — yalnızca ekran çentiğini —
     bu yüzden Android 15 edge-to-edge'inde native değer şart. */
  --ins-top-raw: 0px;  --ins-right-raw: 0px;  --ins-bottom-raw: 0px;  --ins-left-raw: 0px;
  --ins-top:    max(env(safe-area-inset-top,    0px), var(--ins-top-raw));
  --ins-right:  max(env(safe-area-inset-right,  0px), var(--ins-right-raw));
  --ins-bottom: max(env(safe-area-inset-bottom, 0px), var(--ins-bottom-raw));
  --ins-left:   max(env(safe-area-inset-left,   0px), var(--ins-left-raw));

  /* Klavye. Native tarafta WebView zaten kuculuyor (IME inset'i alt paya
     ekleniyor) ve --kb-h 0 kalir; tarayicida duzen gorunum alani kucul(m)edigi
     icin gercek klavye yuksekligi buraya yaziliyor. Iki yol da --vh-avail'de
     bulusuyor, CSS tek kod yolu goruyor. */
  --kb-h: 0px;
  --vh-avail: 100svh;
  --line: rgba(255,255,255,.11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--deep);
}

:root.kb-open { --vh-avail: calc(100svh - var(--kb-h)); }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--deep); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); }
button, input { font: inherit; }
button { color: inherit; }

.screen { display: none; min-height: 100vh; min-height: 100dvh; }
.screen.active { display: flex; }
.boot-screen {
  align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
  padding: 2rem 1.5rem; text-align: center;
  background: linear-gradient(160deg, #c9d3da, #aab2b8 55%, #8f979c);
}
.boot-screen .brand-logo { margin: 0; }
.boot-status { margin: 0; color: #2f4a62; font: 800 1rem/1.35 Georgia, serif; letter-spacing: .02em; }
.eyebrow { color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .2em; margin: 0 0 .7rem; }
.panel { background: #f4f4f4; border: 2px solid #8d8d8d; border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }

/* Uygulamanın geri kalanındaki (salon/lobi/masa) açık gri + mavi "iç
   tasarım" ile eşleşsin diye giriş ekranı da aynı palete taşındı. */
.auth-screen {
  align-items: center; justify-content: center; gap: clamp(3rem, 8vw, 9rem); padding: 3rem 5vw;
  background: linear-gradient(160deg, #c9d3da, #aab2b8 55%, #8f979c);
  position: relative; overflow: hidden;
}
.auth-screen::before { content: "♠   ♥   ♣   ♦"; position: absolute; top:auto; right:-5%; bottom:-10%; left:-5%; font-size: min(25vw, 290px); color: rgba(0,0,0,.035); white-space: nowrap; transform: rotate(-8deg); }
.brand-block { width: min(520px, 90vw); position: relative; z-index: 1; }
/* PNG'nin şeffaf kenarı var; kutuya verilen box-shadow logonun arkasında gri
   bir kare gibi görünüyordu. Gölge artık logonun kendi şeklini takip ediyor. */
.brand-logo { display: block; width: clamp(160px, 22vw, 240px); height: auto; margin-bottom: 1.2rem; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
/* Tek düz cümle yerine üç ikonlu adım: masaya otur → kartını seç → hedefe ulaş. */
.brand-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 0; list-style: none; margin: 0; padding: 0; }
.brand-steps li { display: flex; align-items: center; gap: .5rem; color: #3a3a3a; font-size: .98rem; font-weight: 800; white-space: nowrap; }
.brand-steps li:not(:last-child) { margin-right: .9rem; }
.brand-steps li:not(:last-child)::after { content: "›"; margin-left: .9rem; color: var(--gold-dark); font-weight: 900; font-size: 1.1rem; }
.step-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(145deg, var(--gold), var(--gold-dark)); color: #3c2508; font-size: .82rem; box-shadow: 0 2px 6px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.35); }
.brand-steps li:nth-child(3) .step-icon { color: var(--red); background: linear-gradient(145deg, #fff, #f2d9d9); }
.auth-card { width: min(420px, 94vw); padding: 1.3rem; position: relative; z-index: 2; }
/* Açık zeminde varsayılan parlak altın çok göz alıyordu; koyu bir ton. */
.auth-card .primary-button { position: relative; z-index: 20; pointer-events: auto; touch-action: manipulation; background: linear-gradient(135deg, #d9a63f, #a3690e); box-shadow: 0 8px 20px rgba(163,105,14,.25); }
.tabs { display: flex; padding: 4px; border: 1px solid #bbb; border-radius: 4px; background: #e4e4e4; margin-bottom: 1.4rem; }
.tab { flex: 1; border: 0; border-radius: 3px; padding: .75rem; background: transparent; color: #555; cursor: pointer; font-weight: 800; }
.tab.active { background: #fff; color: #0872b5; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.auth-form { display: none; gap: .55rem; }
.auth-form.active { display: flex; flex-direction: column; }
.auth-form label { color: #333; font-size: .78rem; font-weight: 800; margin-top: .35rem; }
.auth-form input { width: 100%; border: 1px solid #999; background: #fff; color: #111; border-radius: 4px; padding: .95rem 1rem; outline: none; }
.auth-form input:focus { border-color: #2b8fca; box-shadow: 0 0 0 3px rgba(43,143,202,.15); }
.auth-form small { color: #666; text-align: center; margin-top: .5rem; }
.auth-form-hint { margin: 0 0 .3rem; color: #666; font-size: .82rem; text-align: center; }
.avatar-picker-label { color: #333; font-size: .78rem; font-weight: 800; margin-top: .35rem; }
.avatar-picker { display: flex; justify-content: center; gap: 8px; margin: .35rem 0 .2rem; }
.avatar-swatch { width: 36px; height: 36px; border: 2px solid #aaa; border-radius: 50%; cursor: pointer; padding: 0; background: #ccc; }
.avatar-swatch[data-avatar="azure"] { background: linear-gradient(145deg, #6ec1f5, #1f6fa8); }
.avatar-swatch[data-avatar="emerald"] { background: linear-gradient(145deg, #6ed6a4, #1f8a5a); }
.avatar-swatch[data-avatar="amber"] { background: linear-gradient(145deg, #f0c14b, #b07a12); }
.avatar-swatch[data-avatar="rose"] { background: linear-gradient(145deg, #f0a0b4, #b04562); }
.avatar-swatch[data-avatar="violet"] { background: linear-gradient(145deg, #c4a0f0, #6a3fa0); }
.avatar-swatch.selected { border-color: #0872b5; outline: 2px solid rgba(8,114,181,.35); }
.upgrade-bonus-note { color: #8a6a12 !important; font-weight: 700; }
.onboarding-dialog { width: min(380px, 92vw); }
.onboarding-body { margin: 0 0 14px; color: #2a3a44; font-size: .92rem; line-height: 1.45; }
.onboarding-body p { margin: 0 0 10px; }
.onboarding-demo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0; padding: 12px; border-radius: 8px; background: #eef5f1; border: 1px solid #c5d5cc; }
.onboarding-card { width: 52px; height: 72px; border-radius: 6px; border: 2px solid #ddd; background: #fff; display: grid; place-items: center; font-weight: 900; font-size: 1.1rem; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.onboarding-card.red { color: #c52b3b; }
.onboarding-card.black { color: #222; }
.onboarding-plus { font-weight: 900; color: #5b7590; }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-actions .primary-button { margin-top: 0; width: auto; min-width: 140px; padding: .75rem 1rem; }
.onboarding-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.onboarding-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c5d0da; }
.onboarding-dots i.on { background: #0872b5; }
.primary-button { margin-top: 1rem; width: 100%; border: 0; border-radius: 8px; padding: 1rem 1.2rem; background: linear-gradient(135deg, #f5c85b, #dc941c); color: #17201e; font-weight: 950; cursor: pointer; box-shadow: 0 11px 28px rgba(220,148,28,.2); transition: transform .18s, filter .18s; }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.primary-button span { float: right; }

.lobby-screen { flex-direction: column; background: radial-gradient(circle at 75% 10%, rgba(38,124,98,.27), transparent 30%), var(--deep); }
.topbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 8px;
  min-height: 56px;
  height: auto;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.topbar > :first-child,
.topbar .topbar-left { justify-self: start; }
.topbar .topbar-side { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar .topbar-right { justify-self: end; justify-content: flex-end; }
.topbar .compact-brand {
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: clamp(.95rem, 3.6vw, 1.15rem);
}
.topbar .profile-chip { justify-self: end; min-width: 0; max-width: 100%; }
.compact-brand { font-family: Georgia, serif; font-weight: 900; letter-spacing: .06em; }
.compact-brand span { color: var(--gold); }
.profile-chip, .player-badge { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.profile-chip > span:not(.avatar), .player-badge span:last-child { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.profile-chip b,
.profile-chip #salons-user-name,
.profile-chip #profile-name,
.profile-chip #saloon-user,
.profile-chip #room-user-name {
  max-width: min(34vw, 160px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-chip small, .player-badge small { color: var(--muted); font-size: .69rem; margin-top: .1rem; }
.account-upgrade {
  flex: 0 0 auto; margin-left: 4px; padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 7px;
  color: #17201e; background: var(--gold); font-size: .64rem; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, #e9bd5c, #9c5c14); border: 2px solid rgba(255,255,255,.35); color: #17201e; font-weight: 950; }
.lobby-content { width: min(1120px, 92vw); margin: auto; padding: 3rem 0 5rem; }
.welcome-row { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.8rem; }
.welcome-row > div:first-child { margin-right: auto; }
.welcome-row h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.2rem); }
.welcome-row p:last-child { color: var(--muted); margin-bottom: 0; }
.stat-pill { min-width: 90px; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: auto 1fr; gap: 0 .5rem; background: rgba(255,255,255,.03); }
.stat-pill span { color: var(--gold); grid-row: 1 / 3; align-self: center; }
.stat-pill small { color: var(--muted); }
.lobby-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 1.4rem; }
.setup-panel, .mode-panel { padding: clamp(1.2rem, 3vw, 2rem); }
.setup-panel h3 { font-size: .9rem; margin: 0 0 .8rem; }
.setup-panel h3:not(:first-child) { margin-top: 1.8rem; }
.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.choice { min-height: 79px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; }
.choice b { font-size: 1.2rem; }
.choice small { color: var(--muted); }
.choice.active { border-color: var(--gold); background: rgba(243,185,67,.11); box-shadow: inset 0 0 0 1px rgba(243,185,67,.15); }
.choice.active b { color: var(--gold); }
.choice-grid.compact .choice { min-height: 54px; }
.choice-grid.compact .choice b { font-size: .9rem; }
.segmented { display: flex; gap: 5px; padding: 5px; background: rgba(0,0,0,.22); border-radius: 13px; }
.segmented button { flex: 1; border: 0; border-radius: 9px; padding: .7rem; color: var(--muted); background: transparent; cursor: pointer; }
.segmented button.active { background: rgba(255,255,255,.1); color: white; font-weight: 800; }
.mode-panel { position: relative; overflow: hidden; }
.mode-panel::after { content: "♠"; position: absolute; right: -30px; bottom: -100px; font-size: 260px; color: rgba(255,255,255,.025); pointer-events: none; }
.mode-panel h3 { font-family: Georgia, serif; font-size: 2rem; margin: 0; }
.mode-panel > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.mode-panel ul { padding: 0; list-style: none; color: #d8e5e0; line-height: 2; font-size: .86rem; }
.mode-panel li span { color: var(--gold); margin-right: .5rem; }
.mode-visual { min-height: 145px; display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.player-orb { display: grid; place-items: center; width: 83px; height: 83px; border: 5px solid rgba(243,185,67,.25); border-radius: 50%; background: linear-gradient(145deg, #f0c463, #9f6417); color: #112320; font-weight: 1000; box-shadow: 0 15px 28px rgba(0,0,0,.2); }
.player-orb.bot { background: linear-gradient(145deg, #e8eee9, #7b9490); border-color: rgba(255,255,255,.15); }
.versus { font: italic 900 .8rem Georgia, serif; color: var(--muted); }

.game-screen { flex-direction: column; width: 100%; max-width: 100vw; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; background: #07191b; box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom); }
.game-header { width: 100%; min-width: 0; height: 60px; flex: 0 0 60px; padding: 0 max(2vw, .7rem); display: flex; align-items: center; gap: .8rem; overflow: hidden; border-bottom: 1px solid var(--line); background: #07191b; }
.mobile-hamburger { display: none; width: 38px; height: 38px; padding: 8px 7px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.04); cursor: pointer; }
.mobile-hamburger i { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: #f3d77d; }
.game-header > #leave-game, .game-header > .round-info, .game-header > .deck-info, .game-header > #sound-toggle { display: none; }
.mobile-hamburger { display: block; }
.icon-button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; font-size: 1.1rem; }
.round-info { display: flex; flex-direction: column; }
.round-info small { color: var(--muted); font-size: .7rem; }
.deck-info { margin-left: auto; display: flex; align-items: center; gap: .45rem; }
.table-shell { position: relative; width: 100%; max-width: 100vw; flex: 1 1 auto; height: auto; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at center, var(--felt-light), var(--felt) 58%, #092f2c); border: 9px solid #1b3030; box-shadow: inset 0 0 60px rgba(0,0,0,.45); }
.felt-texture { position: absolute; top:0; right:0; bottom:0; left:0; opacity: .16; background-image: repeating-linear-gradient(35deg, transparent 0 3px, rgba(255,255,255,.05) 3px 4px); pointer-events: none; }
.player-zone { position: absolute; left: 0; width: 100%; height: 28%; display: flex; align-items: center; justify-content: center; }
.opponent-zone { top: 0; }
.you-zone { bottom: 0; }
.player-badge { position: absolute; left: 3%; top: 18%; padding: .55rem .8rem; border-radius: 14px; background: rgba(3,20,19,.62); border: 1px solid rgba(255,255,255,.1); min-width: 150px; }
.player-badge.you { top: auto; bottom: 12%; }
.player-badge.opponent .avatar { background: linear-gradient(145deg, #dce4e0, #6a8380); }
.score-box { position: absolute; right: 3%; top: 19%; width: 70px; padding: .5rem; border-radius: 13px; background: rgba(3,20,19,.62); text-align: center; border: 1px solid rgba(255,255,255,.1); }
.you-zone .score-box { top: auto; bottom: 13%; }
.score-box small { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .12em; }
.score-box b { color: var(--gold); font-size: 1.45rem; }
.hand { display: flex; align-items: center; justify-content: center; min-width: 200px; }
.bot-hand { align-self: flex-start; margin-top: 2.6vh; }
.player-hand { align-self: flex-end; margin-bottom: 3.3vh; padding-top: 16px; }
.playing-card, .card-back { width: clamp(63px, 8.4vh, 92px); height: auto; aspect-ratio: 175 / 243; border-radius: 8px; box-shadow: 0 7px 16px rgba(0,0,0,.34); }
.playing-card { position: relative; box-sizing: border-box; padding: 0; border: 0; background: transparent; color: #141b1a; font-family: Georgia, serif; flex: 0 0 auto; user-select: none; overflow: hidden; }
.playing-card img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 7px; pointer-events: none; }
.playing-card.red { color: #bb2938; }
/* Kart görseli yüklenemediğinde: kırık resim ikonu yerine okunur bir kart yüzü. */
.playing-card.card-fallback { border: 1px solid #b9c9da; border-radius: 8px; background: #fff; }
.playing-card.card-fallback .corner i { display: block; font-style: normal; font-size: .82em; }
.playing-card .corner { position: absolute; top: 5px; left: 7px; font-size: clamp(.85rem, 1.8vh, 1.2rem); font-weight: 900; line-height: .85; text-align: center; }
.playing-card .corner.bottom { top: auto; left: auto; bottom: 5px; right: 7px; transform: rotate(180deg); }
.playing-card .suit-center { position: absolute; top:0; right:0; bottom:0; left:0; display: grid; place-items: center; font-size: clamp(2.2rem, 5vh, 4rem); }
.pip-grid { position: absolute; top:20px; right:10px; bottom:17px; left:10px; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; align-items: center; justify-items: center; font-family: Georgia, serif; font-size: clamp(1.1rem, 2.5vh, 1.65rem); line-height: 1; }
.pip-grid i { font-style: normal; }
.pip-2, .pip-3 { align-content: space-around; }
.pip-4, .pip-6, .pip-8, .pip-10 { grid-template-columns: 1fr 1fr; }
.pip-4, .pip-6, .pip-8, .pip-10 { grid-auto-rows: 1fr; }
.pip-5, .pip-7, .pip-9 { grid-template-columns: 1fr 1fr 1fr; }
.pip-5 i:nth-child(3), .pip-7 i:nth-child(4), .pip-9 i:nth-child(5) { grid-column: 2; }
.pip-7 i:nth-child(6), .pip-9 i:nth-child(7) { grid-column: 1; }
.pip-7 i:nth-child(7), .pip-9 i:nth-child(8) { grid-column: 3; }
.face-mark { position: absolute; top:19px; right:9px; bottom:17px; left:9px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font: 900 clamp(2rem, 5vh, 3.4rem) Georgia, serif; }
.pip-grid { top:17px; right:8px; bottom:15px; left:8px; overflow: hidden; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(4, 1fr); grid-auto-rows: auto; align-content: center; font-size: clamp(.85rem, 2.1vh, 1.35rem); }
.pip-grid i { grid-column: auto !important; }
.modern-card { border: 0; background: transparent; }
.player-hand .playing-card { margin-left: clamp(-17px, -1.4vw, -8px); cursor: pointer; transition: transform .18s, filter .18s; }
.player-hand .playing-card:first-child { margin-left: 0; }
.player-hand .playing-card:hover, .player-hand .playing-card:focus { transform: translateY(-14px) rotate(-1deg); filter: brightness(1.08); outline: 2px solid var(--gold); }
/* Sıra rakipteyken elimdeki kartlar filter:brightness(.72) ile karartılıyordu;
   rakip düşünürken kendi kartlarını okuyamıyordun. Kartlar artık her zaman tam
   parlaklıkta duruyor — ama pointer-events:none korunuyor, yani sıra bende
   değilken tıklamak hâlâ kart ATMIYOR. Sıranın kimde olduğu rakip rozetindeki
   "Düşünüyor" yazısı ve süre çubuğu ile zaten belli. */
.player-hand.disabled .playing-card { cursor: not-allowed; pointer-events: none; }
.player-hand.disabled .playing-card:hover { transform: none; outline: none; }
.card-back { display: block; border: 3px solid #e8dfca; background-color: #163c4a; background-image: linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.12) 75%), linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.12) 75%); background-size: 13px 13px; background-position: 0 0, 6px 6px; }
.bot-hand .card-back { margin-left: -34px; transform: rotate(2deg); }
.bot-hand .card-back:first-child { margin-left: 0; }
.card-back.tiny { width: 25px; height: 35px; border-width: 2px; border-radius: 4px; box-shadow: none; }
.center-zone { position: absolute; top:25%; right:0; bottom:25%; left:0; display: grid; place-items: center; }
.pile-wrap { text-align: center; }
.pile { height: clamp(100px, 15vh, 155px); min-width: 100px; position: relative; display: grid; place-items: center; }
.pile .playing-card { position: absolute; }
.pile .playing-card:nth-last-child(2) { transform: translate(-6px, 3px) rotate(-5deg); }
.pile .playing-card:last-child { transform: translate(4px, -2px) rotate(3deg); }
/* Masadaki yığın/toplanan kart sayısı yazıları kullanıcı isteğiyle kaldırıldı;
   elemanlar DOM'da kalıyor (game.js textContent yazıyor) ama görünmüyor. */
.pile-count, .captured-status { display: none !important; }
/* Yeni el: kartlar dağıtılmadan önce ortada beyaz bilgi kartı (referans masa UX). */
.round-start-banner {
  position: absolute;
  top:0; right:0; bottom:0; left:0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.round-start-banner[hidden] { display: none !important; }
.round-start-card {
  margin: 0;
  padding: 16px 26px;
  border-radius: 3px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}
.table-shell.round-starting .player-hand,
.table-shell.round-starting .bot-hand,
.table-shell.round-starting .pile-wrap,
.table-shell.round-starting .side-card-stack,
.table-shell.round-starting .pile-pisti-hint,
.table-shell.round-starting .game-toast,
.table-shell.round-starting .pisti-burst,
.table-shell.round-starting .table-chat-bubble {
  visibility: hidden !important;
}
.captured-status { position: absolute; top: 50%; transform: translateY(-50%); align-items: baseline; gap: .25rem; color: var(--muted); }
.captured-status.left { left: 4%; }
.captured-status.right { right: 4%; }
.captured-status b { color: white; font-size: 1.5rem; }
.captured-status small { color: var(--gold); font-weight: 900; }
.captured-status span { font-size: .65rem; }
.timer { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(0,0,0,.22); }
.timer span { display: block; width: 100%; height: 100%; background: var(--gold); transform-origin: left; }
.game-toast { position: absolute; z-index: 12; top: 3%; left: 50%; transform: translateX(-50%) translateY(-8px); opacity: 0; border-radius: 12px; padding: .55rem 1rem; background: rgba(18, 42, 58, .94); border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 700; font-size: .82rem; line-height: 1.35; text-align: center; transition: .2s; white-space: normal; max-width: min(92vw, 280px); box-shadow: 0 4px 14px rgba(0,0,0,.35); pointer-events: none; }
.game-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.game-toast.gold { color: #fff; border-color: rgba(243, 185, 67, .45); }
/* Masa bildirimi: sohbet panelinin üst şeridi — kartların üstüne binmez. */
.table-toast-slot {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #2f5573;
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  flex: 0 0 auto;
  transition: max-height .2s ease, opacity .2s ease, padding .2s ease;
}
.table-toast-slot.show {
  opacity: 1;
  max-height: 40px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transform: none;
}
.table-toast-slot.gold,
.table-toast-slot.pisti { color: #fff; border-bottom-color: rgba(243, 185, 67, .35); }

.score-dialog { width: min(460px, 92vw); border: 1px solid var(--line); border-radius: 22px; padding: 1.8rem; color: var(--ink); background: #0a2928; box-shadow: 0 30px 100px #000; }
.score-dialog::backdrop { background: rgba(2,11,12,.78); backdrop-filter: blur(5px); }
.score-dialog h2 { font-family: Georgia, serif; margin: 0 0 1.2rem; text-align: center; font-size: 2rem; }
.score-dialog .eyebrow { text-align: center; }
.card-style-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-style-option { display: grid; gap: 5px; justify-items: center; padding: 12px 8px; border: 2px solid #294b49; border-radius: 12px; color: var(--ink); background: #123735; cursor: pointer; }
.card-style-option.selected { border-color: var(--gold); box-shadow: 0 0 0 2px #f3b94355; }
.card-style-option small { color: var(--muted); font-size: .68rem; }
.style-preview { display: grid; place-items: center; width: 48px; height: 64px; border-radius: 5px; font: 900 1rem Georgia, serif; }
.classic-preview { color: #b51f2f; background: #fff; border: 2px solid #ddd; }
.modern-preview { color: #c52b3b; background: linear-gradient(145deg,#fffdf6,#e7dfd0); border: 2px solid #d1b778; box-shadow: inset 0 0 0 2px #fff; }
/* Kapatma (×) düğmesinin altındaki boşluk ARTIK diyaloğun kendi padding'inde.
   Eskiden ilk satıra verilen "margin-top: 40px" ve ardışık kardeşlere verilen
   "+ .ref-blue-button { margin-top: 10px }" ikilisiyle yapılıyordu; bu, hiçbir
   satır gizlenmediği sürece çalışıyordu. Kardeş seçicisi (+) DOM sırasına
   bakar, görünürlüğe değil: misafirde Mağaza ve Arkadaşlık satırları
   gizlenince "Hesap oluştur" hâlâ onların ardılı sayılıp 40px yerine 10px
   alıyor ve ×'in altına giriyordu. Aynısı Yönetim Paneli satırında da
   olurdu. Artık boşluk üstten değil alttan veriliyor; gizli satırlar
   (display:none) yerleşimde hiç yer tutmadığı için hangi satırın görüneceği
   fark etmiyor. */
/* Tek yan menü (hamburger) — satır satır ikonlu liste
   PERFORMANS: eskiden görünürlük tamamen `[open]` → `display:flex` geçişine
   bağlıydı (UA varsayılanı kapalı dialog'u `display:none` yapıyor). Bu,
   ~50-80 öğelik panelin (flex satırlar + inline SVG'ler) layout ağacını HER
   açılışta sıfırdan kurmak zorunda bırakıyordu. Gerçek cihazda (emülatör,
   CDP ile ölçüldü) `showModal()` çağrısının kendisi ilk açılışta 143ms,
   sonraki açılışlarda bile 26-32ms sürüyordu — `UpdateLayoutTree` (80ms) +
   `Layout` (23ms) olarak Chrome tracing'de doğrulandı. `display` yerine
   `transform`+`visibility` ile aynı deneyde bu 2-9ms'e indi (>%80 kazanç).
   Artık `display` HER ZAMAN flex; açık/kapalı ayrımını `visibility` ve
   `pointer-events` üstleniyor — panel her zaman layout ağacında, açılış
   sadece bir compositor işlemi (transform) oluyor.
   `pointer-events:none` tıklamayı, `visibility:hidden` de erişilebilirlik
   ağacını ve Tab sırasını kapatıyor.

   KONUM: `position:fixed` ŞART. Eskiden burada yorum "kapalı `<dialog>`
   top-layer'da değil, UA'nın verdiği `position:absolute` onu akıştan çıkarıyor,
   bu yüzden hiçbir şeyi itmiyor" diyordu — BU YANLIŞTI. `position:absolute` bir
   elemanı normal akıştan çıkarır ama containing block'unun (burada belge kökü)
   SCROLLABLE OVERFLOW alanına katkısını sürdürür. `top/left` verilmediği için
   eleman statik konumunda kalıyordu: yani `<main id="app">`'in hemen altında
   (y≈812) ve `height:100%` ile belgeyi tam 2× uzatıyordu. `visibility:hidden`
   + `background:transparent` görünmez yapıyor ama YER TUTUYOR — mobilde her
   ekranda içeriğin altında ~1 viewport'luk karanlık (`--deep`) boşluğa doğru
   "alta kayma" bundandı (375×812'de html.scrollHeight giriş ekranında 1624,
   salonda 2150; canlı tarayıcıda CDP ile ölçüldü).
   `position:fixed` eleman `scrollHeight`'a HİÇ katkı vermez; ölçümler
   1624→812 ve 2150→1338'e düştü, menü `showModal()` ile hâlâ düzgün açılıyor.
   `inset:0` KISAYOLU YASAK — taban hedef Chrome 69 / Android 9 WebView
   (MainActivity `EN_DUSUK_WEBVIEW=69`), `inset` kısayolunu bilmez; uzun biçim
   (`top/right/bottom/left`) kullan. `position:fixed` her yerde desteklenir,
   `@supports` gerekmez. MainActivity sistem çubuğu inset'lerini WebView'e
   MARGIN olarak verdiği için WebView viewport'u = güvenli alan; `top:0…left:0`
   `100%/100%` ile aynı kutu. Koşulsuz `position:fixed` açık modal durumu da
   eski WebView'de daha sağlam yapar (modern Chrome açık `<dialog>`'a zaten
   UA'dan `position:fixed` veriyor; `<dialog open>` fallback yolu eski
   WebView'de modal olmayabildiğinden koşulsuz olan tercih edildi). */
.app-drawer {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  display: flex !important; visibility: hidden; pointer-events: none;
}
.app-drawer::backdrop { background: rgba(12, 28, 44, .48); }
.app-drawer[open] { visibility: visible; pointer-events: auto; }
.app-drawer-panel {
  width: min(320px, 88vw); height: 100%; display: flex; flex-direction: column;
  background: #eef3f7; box-shadow: 8px 0 28px rgba(0,0,0,.28);
  transform: translateX(-104%);
  will-change: transform;
}
/* Animasyon yalnızca `[open]` iken eşlenir — CSS bunu "yeni uygulanan
   animasyon" sayıp her açılışta baştan oynatıyor, panel sürekli layout
   ağacında kalsa bile. `forwards` şart: yoksa animasyon bitince transform
   yukarıdaki taban kurala (kapalı konum) geri düşer ve panel görünürken
   ekrandan kaybolur. Kapanışta animasyon YOK (eskiden de yoktu) — `[open]`
   kalkınca taban kural anında devreye girip paneli kapalı konuma sabitliyor. */
.app-drawer[open] .app-drawer-panel { animation: app-drawer-in .18s ease-out forwards; }
@keyframes app-drawer-in { from { transform: translateX(-104%); } to { transform: translateX(0); } }
.app-drawer-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  min-height: 54px; padding: 10px 12px; color: #fff;
  background: linear-gradient(180deg, #4f86b8 0%, #356793 100%);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.app-drawer-back {
  display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px 6px;
  border: 0; border-radius: 4px; background: transparent; color: #fff;
  font: 700 .92rem/1 system-ui, sans-serif; cursor: pointer;
}
.app-drawer-back .app-drawer-ico { width: 22px; height: 22px; background: transparent; box-shadow: none; }
.app-drawer-brand { justify-self: center; font: 900 1.15rem/1 Georgia, serif; letter-spacing: .04em; }
.app-drawer-meta { justify-self: end; max-width: 118px; font: 600 .68rem/1.2 system-ui, sans-serif; opacity: .92; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Çekmece şeridindeki VIP rozeti metnin ÖNÜNDE duruyor; inline-badge'in
   sola dayalı boşluğu bu dar alanda fazla geliyor. */
.app-drawer-meta .perk-badge { margin: 0 3px 0 0; vertical-align: -2px; }
.app-drawer-list { flex: 1; overflow: auto; padding: 0; background: #f7f9fb; }
.app-drawer-item {
  display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; margin: 0; padding: 8px 14px 8px 12px;
  border: 0; border-bottom: 1px solid #d5e0ea; background: #fff;
  color: #1c2b38; font: 700 .95rem/1.2 system-ui, sans-serif; text-align: left; cursor: pointer;
}
.app-drawer-item:active { background: #e8f2fa; }
.app-drawer-item.danger { color: #8a2430; }
.app-drawer-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px;
  background: #e8eef4; color: #2f5f8c; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.app-drawer-ico svg { width: 22px; height: 22px; display: block; }
.app-drawer-ico.tone-blue { background: #d9ebf8; color: #1f6ea5; }
.app-drawer-ico.tone-gold { background: #fff0cc; color: #9a6b10; }
.app-drawer-ico.tone-teal { background: #d7f3ee; color: #1a7a6a; }
.app-drawer-ico.tone-green { background: #ddf5df; color: #1f8a3c; }
.app-drawer-ico.tone-rose { background: #fde4ea; color: #b63d5c; }
.app-drawer-ico.tone-orange { background: #ffe6cc; color: #b35d12; }
.app-drawer-ico.tone-purple { background: #ebe4fb; color: #6a45a8; }
.app-drawer-ico.tone-slate { background: #e5ebf1; color: #455868; }
.app-drawer-ico.tone-navy { background: #d9e2f0; color: #2a4570; }
.app-drawer-ico.tone-red { background: #fde1e4; color: #b32638; }
.app-drawer-game { background: #eaf2f8; border-bottom: 1px solid #c9d8e6; }
.menu-guest-note { margin: 0; padding: 8px 14px 10px; color: #5d6b68; font-size: .72rem; line-height: 1.35; background: #f0f4f7; border-bottom: 1px solid #d5e0ea; }
.info-page-dialog { width: min(440px, 94vw); }
.info-page-body { margin-top: 10px; max-height: min(58vh, 420px); overflow: auto; padding: 10px 12px; border: 1px solid #c5c5c5; border-radius: 3px; background: #fff; color: #222; font-size: .86rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.info-page-body a { color: #0b6aa2; font-weight: 700; }
.howto-page p { margin: 0 0 8px; }
.howto-page .onboarding-demo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px 0; }
.howto-page .onboarding-card {
  width: 52px; height: 72px; display: grid; place-items: center; border-radius: 6px;
  border: 1px solid #c5c5c5; background: #fff; font: 800 .95rem/1 Georgia, serif; box-shadow: 0 2px 6px #0002;
}
.howto-page .onboarding-card.red { color: #c0392b; }
.howto-page .onboarding-card.black { color: #1a1a1a; }
.howto-page .onboarding-plus { font-weight: 800; color: #666; }
.menu-game-info { margin: 0; padding: 10px 14px 8px; color: #27475f; text-align: left; font-size: .78rem; }
.menu-game-info b, .menu-game-info span { display: block; }
.menu-game-info span { margin-top: 3px; color: #5a7388; font-size: .7rem; }
.menu-game-info i { font-style: normal; }
.social-dialog { width: min(360px, 92vw); padding: 22px; border: 1px solid #55716d; border-radius: 16px; color: var(--ink); background: #0b2928; box-shadow: 0 20px 70px #000b; }
.social-dialog::backdrop { background: #00100dcc; backdrop-filter: blur(4px); }
/* align-items: flex-start — rozetler ikinci satıra taştığında metin bloğu
   uzuyor ve ortalanmış avatar ismin altına kayıyordu. */
.social-profile-head { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0 18px; }
.social-profile-head > div { min-width: 0; }
.social-profile-head h2 { margin: 0; font: 700 1.35rem Georgia,serif; }
.social-profile-head small { color: #7ed5a4; }
/* Profil künyesi: eskiden üç kutuluk bir özetti (Puan/Oyun/Kazanma) ve
   yalnızca kendi profilinde doluyordu. Artık satır listesi ve sayaçların
   hepsi canlı profilden geldiği için başkasının profilinde de dolu. */
.profile-stat-list { margin: 0 0 18px; }
.profile-stat-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 3px; }
.profile-stat-list > div + div { margin-top: 4px; }
.profile-stat-list > div:nth-child(odd) { background: #123b38; }
.profile-stat-list dt { color: var(--muted); font-size: .72rem; }
.profile-stat-list dd { margin: 0; font-size: .78rem; font-weight: 800; text-align: right; }
.profile-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.profile-badges .perk-badge { margin: 0; }

/* Ayrıcalık rozetleri: yazısız, yalnızca ikon. Ad üstüne gelince (dokunmatikte
   dokunup odaklanınca) ::after balonunda çıkar. */
.perk-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 50%; cursor: help; box-shadow: 0 1px 3px rgba(10,25,40,.28), inset 0 1px rgba(255,255,255,.55); }
.perk-badge:focus { outline: 2px solid #2f7fc4; outline-offset: 2px; }
.perk-badge svg { display: block; width: 14px; height: 14px; fill: currentColor; }
/* Kalkanın içindeki tik: dolu gövdenin üstüne rozetin açık tonuyla çizilir,
   aksi halde aynı renkte olduğu için görünmezdi. */
.perk-badge .glyph-cut { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.perk-badge.vip { border-color: #d9a334; background: linear-gradient(135deg,#ffe7ae,#e5a423); color: #4d3000; }
.perk-badge.shield { border-color: #4f9f8b; background: linear-gradient(135deg,#c9efe4,#4fa891); color: #0c3b31; }
.perk-badge.boost { border-color: #dd8836; background: linear-gradient(135deg,#ffdcb4,#ea9440); color: #4a2600; }
.perk-badge::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; background: #1d3243; color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .02em; line-height: 1; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 5; }
.perk-badge::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1d3243; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 5; }
/* :active da var — dokunmatikte hover yok, odak ise bazı tarayıcılarda
   dokunuşta oluşmuyor; basılı tutmak ipucunu her hâlükârda gösterir. */
.perk-badge:hover::after, .perk-badge:hover::before,
.perk-badge:focus::after, .perk-badge:focus::before,
.perk-badge:active::after, .perk-badge:active::before { opacity: 1; visibility: visible; }
.message-list { height: 190px; overflow-y: auto; display: grid; align-content: end; gap: 8px; padding: 8px; margin: 12px 0; background: #071c1e; border-radius: 10px; }
.message { max-width: 80%; padding: 7px 10px; border-radius: 10px; font-size: .78rem; }.message.incoming { background: #254d48; }.message.outgoing { justify-self: end; background: #6b3d92; }
.message-warning { margin: 0; padding: 9px 11px; border: 1px solid #7a5a1d; border-radius: 8px; background: rgba(243,185,67,.12); color: #f3d77d; font-size: .72rem; line-height: 1.45; }
.message-warning b { color: #ffd98a; }
.message-status { min-height: 1.1em; margin: 0 0 6px; color: #ffb1a8; font-size: .73rem; text-align: center; }
.message-actions { display: flex; gap: 8px; margin-top: 10px; }
.message-actions .ref-blue-button { flex: 1; min-height: 32px; padding: 0 8px; font-size: .72rem; }
.ref-blue-button.danger { border-color: #8e2f26; background: linear-gradient(#e2574a, #b8352a); }
.ref-blue-button.danger:hover { background: linear-gradient(#ec6a5d, #c93e32); }
#message-form { display: flex; gap: 6px; } #message-input { min-width: 0; flex: 1; padding: 9px; border: 1px solid #40645f; border-radius: 7px; color: white; background: #102d2c; }
.dialog-divider { margin: 16px 0 12px; border: 0; border-top: 1px solid #285057; }
.muted-line { display: block; margin-top: 6px; color: var(--muted); font-size: .72rem; }
#name-change-section .eyebrow { margin-bottom: 8px; }
#name-change-form { display: flex; gap: 6px; }
#name-change-input { min-width: 0; flex: 1; padding: 9px; border: 1px solid #40645f; border-radius: 7px; color: white; background: #102d2c; }
.account-settings-dialog { width: min(420px, 94vw); }
.account-settings-list { margin-top: 12px; border: 1px solid #55716d; border-radius: 10px; overflow: hidden; background: #0f2a29; }
.account-settings-row {
  display: grid; grid-template-columns: minmax(88px, 1fr) minmax(72px, 1.2fr) auto; gap: 8px; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.account-settings-row:last-of-type { border-bottom: 0; }
.account-settings-label { font-size: .78rem; color: #b8d0cd; line-height: 1.25; }
.account-settings-value { font-size: .82rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-settings-avatar { width: 34px; height: 34px; font-size: .85rem; }
.account-settings-change {
  padding: 6px 10px; border: 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(#7a9b52, #5f7d3f); color: #fff; font: 700 .72rem/1 system-ui, sans-serif;
}
.account-settings-change:active { filter: brightness(.95); }
.account-settings-panel { padding: 10px 12px 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.12); }
.account-settings-form { display: grid; gap: 8px; }
.account-settings-form label { display: grid; gap: 4px; font-size: .76rem; color: #b8d0cd; }
.account-settings-form input { padding: 8px 9px; border: 1px solid #55716d; border-radius: 6px; color: #fff; background: #102d2c; }
.account-settings-form .auth-link-button { justify-self: start; padding: 0; }
#friend-section { margin-bottom: 12px; }
#friend-incoming-actions { display: flex; gap: 8px; margin-top: 8px; }
#friend-incoming-actions .ref-blue-button { flex: 1; }
.menu-badge { margin-left: 6px; padding: 1px 6px; border-radius: 99px; background: #e2574a; color: white; font-size: .68rem; font-style: normal; }
.friend-request-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #1c3438; }
.friend-request-row .ref-blue-button { min-height: 30px; padding: 0 10px; font-size: .7rem; }
.result-icon { margin: -3.6rem auto 1rem; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: #12201e; border: 6px solid #0a2928; font-size: 1.5rem; }
.score-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.score-row { display: grid; grid-template-columns: 1fr 60px 60px; padding: .7rem .85rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.score-row:last-child { border: 0; }
.score-row b { color: white; text-align: center; }
.score-row.heading { background: rgba(255,255,255,.04); font-size: .75rem; }
.score-row.total { color: white; font-weight: 900; }
.score-row.total b { color: var(--gold); font-size: 1.2rem; }

@media (max-width: 760px) {
  .auth-screen { width: 100%; overflow-x: hidden; }
  .auth-card { width: 100%; max-width: 420px; }
  .auth-card button, .auth-card input, .auth-card .tab { touch-action: manipulation; }
  .mobile-hamburger { display: block; }
  .auth-screen { flex-direction: column; gap: 1.5rem; padding: 2rem 1rem; }
  .brand-block { text-align: center; }
  .brand-logo { margin: 0 auto 1rem; }
  .brand-steps { font-size: .9rem; }
  .brand-steps li { font-size: .88rem; }
  .brand-steps li:not(:last-child) { margin-right: .55rem; }
  .brand-steps li:not(:last-child)::after { margin-left: .55rem; }
  .welcome-row { align-items: stretch; flex-wrap: wrap; }
  .welcome-row > div:first-child { flex-basis: 100%; }
  .stat-pill { flex: 1; }
  .lobby-grid { grid-template-columns: 1fr; }
  .choice-grid { gap: .4rem; }
  .choice { min-height: 68px; }
  .player-badge { min-width: 0; left: 2%; top: 7%; padding: .35rem .5rem; }
  .player-badge.you { bottom: 4%; }
  .player-badge .avatar { width: 34px; height: 34px; }
  .player-badge span:last-child { display: none; }
  .score-box { right: 2%; top: 8%; width: 58px; padding: .35rem; }
  .you-zone .score-box { bottom: 5%; }
  .captured-status.left { left: 2%; }
  .captured-status.right { right: 2%; }
  .round-info { flex: 0 1 auto; }
  .deck-info { flex: 0 0 auto; }
  .game-header .icon-button:last-child { display: none; }
  .bot-hand { margin-top: 1.5vh; }
  .player-hand { margin-bottom: 2vh; }
  .playing-card, .card-back { width: clamp(58px, 10.2vh, 78px); height: clamp(81px, 14.2vh, 109px); }
}

@media (max-height: 620px) {
  .game-header { height: 48px; flex-basis: 48px; }
  .playing-card, .card-back { width: 54px; height: 75px; }
  .player-hand { margin-bottom: 1vh; }
  .bot-hand { margin-top: 1vh; }
}

/* Piştix salon → masa oluştur → hazır akışı */
.ref-lobby { background: #d7d7d7; color: #1b1b1b; }
.ref-lobby .topbar { background: linear-gradient(#2390d1, #126ea9); color: white; border: 0; box-shadow: 0 2px 6px #777; }
.ref-lobby .profile-chip small { color: #d9efff; }
.saloon-shell { width: min(980px, 100%); height: calc(100vh - 78px); height: calc(100dvh - 78px - env(safe-area-inset-bottom)); min-height:0; margin: auto; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.saloon-titlebar { min-height: 38px; padding: 8px 12px; display: flex; align-items: center; gap: 12px; color: white; background: #4b4b4b; border: 1px solid #2b2b2b; }
.saloon-titlebar span { color: #ddd; font-size: .85rem; }
.saloon-titlebar #active-salon-name { margin-right: auto; }
.salon-presence-banner { margin: 0; padding: 8px 12px; background: #5c2a2a; color: #ffe8e8; font-size: .85rem; text-align: center; border-bottom: 1px solid #8a3a3a; }
.saloon-bonus { color: #f6e38c !important; font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.saloon-bonus:empty, .saloon-bonus[hidden] { display: none; }
/* Oyuncu paneline 2fr/1fr yerine sabit bir taban genişlik: 1fr olduğunda dar
   ekranlarda 222px'e kadar iniyor ve "Misafir_6474" gibi normal bir ad bile
   "Misafir..." diye kesiliyordu. Masalar listesi kalanı alır. */
.saloon-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,2fr) minmax(250px,1fr); gap: 7px; padding-top: 7px; }
.saloon-table-list, .saloon-players { background: #f7f7f7; border: 1px solid #999; overflow: auto; }
.grid-head, .table-row, .player-row { display: grid; align-items: center; min-height: 38px; border-bottom: 1px solid #bbb; }
.grid-head span, .table-row span, .player-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dynamic-player-row bir <button>; tarayıcı varsayılan border/genişliği
   sıfırlanmazsa içeriğe göre daralıp kutulu/üst üste görünüyordu. */
/* Sütunlar daraltıldı. Eski ölçülerde (32px 1fr 46px 62px, 7px boşluk, 8px
   iç kenar) 222px'lik yan panelde sabitler + boşluklar 177px yiyor ve İSİM
   sütununa yalnızca 40px kalıyordu: her ad "Mis..." diye kesiliyor, rozetler
   de sığmayıp alt satıra taşıp satırı 69px'e çıkarıyordu. Yeni ölçülerle isme
   ~69px kalıyor ve üç rozet tek satıra sığıyor. */
.player-row { width: 100%; box-sizing: border-box; border-width: 0 0 1px; background: #fff; text-align: left; grid-template-columns: 26px 1fr 44px 56px; gap: 5px; padding: 4px 6px; cursor: pointer; }
.player-row .lobby-avatar { width: 24px; height: 24px; font-size: .7rem; }
.player-row > span:nth-child(2) { display:flex; flex-direction:column; min-width:0; }
/* text-align:left ŞART: aşağıdaki ".player-row b { text-align:right }" puan ve
   durum hücreleri için konmuş ama isim hücresindeki <b>'yi de yakalıyor. Dar
   sütunda fark edilmiyordu; sütun genişleyince ad sağa yaslanıp "Sen" ve
   rozetlerden kopuyor. */
.player-row > span:nth-child(2) b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.player-row > span:nth-child(2) small { color:#777; font-size:.66rem; }
.lobby-avatar { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#bd8b31,#5f321f); font-weight:900; }
.player-row:hover { background:#d7efff; }
.player-row.current-player { background:#fff6d7; }
.grid-head { position: sticky; top: 0; z-index: 1; grid-template-columns: 1.3fr .5fr .85fr .55fr .6fr .55fr; padding: 0 10px; color: white; background: linear-gradient(#6c6c6c, #4b4b4b); font-size: .78rem; font-weight: 700; }
.table-row { width: 100%; grid-template-columns: 1.3fr .5fr .85fr .55fr .6fr .55fr; padding: 0 10px; border-width: 0 0 1px; color: #222; background: linear-gradient(#fff, #e8e8e8); text-align: left; cursor: pointer; }
.table-row:nth-child(odd) { background: #f0f6fa; }
.table-row:hover { background: #d7efff; }
.saloon-players .grid-head { grid-template-columns: 26px 1fr 44px 56px; gap: 5px; padding: 0 6px; font-size: .72rem; }
.player-row { padding: 0 10px; font-size: .85rem; }
.player-row { cursor: pointer; }
.player-row b { text-align: right; color: #176fa5; }
.empty-rows { height: 100%; background: repeating-linear-gradient(#fafafa 0 38px, #e5e5e5 38px 39px); }
.saloon-actions { display: flex; gap: 7px; padding: 8px 0 0; }
.ref-blue-button { min-height: 38px; padding: 0 20px; border: 1px solid #07598f; border-radius: 4px; color: white; background: linear-gradient(#29a3e8, #0872b5); box-shadow: inset 0 1px rgba(255,255,255,.38), 0 1px 2px #777; font-weight: 700; cursor: pointer; }
.ref-blue-button:hover { background: linear-gradient(#3ab1ef, #0b82c7); }
.ref-blue-button.exit { margin-left: auto; }
.ref-blue-button.quick-play { border-color: #8a6a12; background: linear-gradient(#f0c14b, #c48a14); color: #2a1c05; }
.ref-blue-button.quick-play:hover { background: linear-gradient(#f6d06a, #d49a1c); }
.quest-streak-line { margin: 0 0 10px; font-weight: 800; color: #176fa5; }
.quest-list { display: grid; gap: 8px; }
.quest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #c5d0da; border-radius: 6px; background: #f7fafc; }
.quest-row.done { border-color: #8bc4a0; background: #eef8f1; }
.quest-row b { font-size: .9rem; color: #1d3344; }
.quest-row small { color: #5b7590; font-weight: 700; }
.pisti-burst { position: absolute; z-index: 14; left: 50%; top: 28%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; color: #ffe566; font-weight: 1000; font-size: clamp(1.4rem, 4.5vw, 2.1rem); letter-spacing: .06em; text-shadow: 0 2px 0 #6a5010, 0 0 16px rgba(0,0,0,.55); }
.pisti-burst.show { animation: pistiBurst .85s ease-out forwards; }
@keyframes pistiBurst {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.55); }
  25% { opacity: 1; transform: translate(-50%, -55%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1.35); }
}
.pile.pisti-flash { animation: pistiPile .7s ease; }
@keyframes pistiPile {
  0%, 100% { filter: none; }
  40% { filter: brightness(1.35) saturate(1.2); }
}
.game-toast.pisti { color: #fff; border-color: rgba(246, 210, 90, .45); font-size: .95rem; }
.room-dialog { width: min(380px, 94vw); padding: 16px 18px 20px; color: #171717; background: #f4f4f4; border: 2px solid #8d8d8d; border-radius: 3px; box-shadow: 0 10px 35px #0009; }
.room-dialog::backdrop { background: rgba(0,0,0,.55); }
.room-dialog h2 { margin: 0 0 16px; padding-bottom: 9px; font-size: 1.1rem; text-align: center; border-bottom: 1px solid #bbb; }
.dialog-close { position: absolute; right: 8px; top: 7px; width: 30px; height: 30px; border: 1px solid #777; color: white; background: #555; cursor: pointer; }
.room-dialog form { display: grid; gap: 10px; }
.room-dialog label { position: relative; display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
.room-dialog select { width: 100%; min-height: 34px; padding: 4px 30px 4px 8px; border: 1px solid #999; border-radius: 2px; color: #111; background: white; }

/* --- Açılır listelerin (select) karanlık çıkması --- */
/*
   Kapalı hâldeki kutuyu biz çiziyoruz ama AÇILAN LİSTE işletim sisteminin
   kendi bileşeni. Sayfa "ben açık temayım" demezse Android kendi karanlık
   temasını uyguluyor: siyah zemin, açık yazı — arayüzün geri kalanıyla
   çelişiyordu (telefonda görüldü).

   Üç katman, çünkü tek başına hiçbiri her yerde yetmiyor:
   1. <meta name="color-scheme" content="light"> (index.html) — en erken sinyal,
      CSS inmeden önce okunuyor.
   2. color-scheme: light — asıl bildirim. Chrome 80+ (Android 10+).
   3. option/select renkleri — Chrome 80 ÖNCESİ WebView color-scheme'i bilmiyor
      (Android 9 = Chrome 69, bkz. pistix-legacy-webview-css-floor). Orada
      option'un kendi background/color'ı popup'ta uygulanıyor.
   Bilinmeyen özellik satırı düşürülür, kural kalanıyla çalışmaya devam eder;
   bu yüzden color-scheme'i eski tarayıcıda bırakmak güvenli.
*/
:root { color-scheme: light; }
select, textarea, input { color-scheme: light; }
select { color: #171717; background-color: #fff; }
select option, select optgroup { color: #171717; background-color: #fff; }

/* Şikayet penceresindeki seçim kutusu hiç biçimlendirilmemişti: .social-dialog
   altında olduğu için .room-dialog select kuralına girmiyordu ve tarayıcı
   varsayılanıyla, diğerlerinden farklı görünüyordu. */
.social-dialog select { width: 100%; min-height: 34px; padding: 4px 30px 4px 8px; border: 1px solid #999; border-radius: 2px; color: #171717; background: #fff; font-size: .85rem; }
.room-dialog #room-mode { border: 2px solid #2b8fca; background: #eef9ff; font-weight: 700; }
.room-dialog #room-ai-difficulty { border: 2px solid #9b6bd1; background: #fbf4ff; font-weight: 700; }
/* Tek hücre: grid sütunlarına girmez, satırın tamamını kaplar (bkz.
   index.html'deki not). white-space: normal şart — .player-row b için konan
   nowrap/ellipsis burada istenmiyor, metin normal sarmalı. */
.online-empty { color: #777; font-style: italic; pointer-events: none; }
/* Tek hücre — YALNIZCA oyuncu listesindeki boş satır. Masalar listesindeki
   .online-empty altı sütunlu grid'de duruyor ve orada block'a çevrilirse
   hücreleri yan yana akıp "—————" olarak diziliyor. */
.saloon-players .online-empty { display: block; padding: 9px 12px; font-size: .76rem; line-height: 1.3; text-align: center; white-space: normal; }

/* Salon listesindeki ayrıcalık rozetleri: isim satırının ALTINA geçer, isim
   sütununu daraltmaz. İkonlar profil diyaloğundaki şablonlardan klonlanır
   (bkz. game.js perkBadgesFor), tek kaynak orada. */
/* nowrap: dar sütunda alt satıra taşıp satır yüksekliğini şişirmesin. */
.row-badges { display: flex; flex-wrap: nowrap; gap: 2px; margin-top: 2px; }
.row-badges:empty { display: none; }
.perk-badge.mini { flex: none; width: 14px; height: 14px; border-width: 1px; box-shadow: 0 1px 2px rgba(10,25,40,.25); }
.perk-badge.mini svg { width: 8px; height: 8px; }
.perk-badge.mini .glyph-cut { stroke-width: 2.8; }
/* Liste kabı overflow:auto olduğu için CSS balonu kırpılırdı; mini rozetlerde
   yerine tarayıcının kendi title ipucu kullanılıyor (kırpılmaz). */
.perk-badge.mini::after, .perk-badge.mini::before { content: none; }
/* Metnin İÇİNDE duran rozet (isim satırı, liderlik tablosu, mağaza başlığı).
   Eskiden buralarda 👑 🛡️ 🚀 emojileri vardı; emoji her cihazda başka türlü
   çiziliyordu, artık her yerde aynı SVG (bkz. src/game/perk-badges.js). */
.perk-badge.inline-badge { margin: 0 0 0 4px; vertical-align: -3px; }
/* Adın ÖNÜNDE duran rozet (mağaza ürün kartı başlığı). */
.perk-badge.lead-badge { margin: 0 5px 0 0; }
/* Salon listesinde misafir işareti. Sessiz bir etiket: rozet değil, çünkü bir
   ayrıcalık değil eksik bir yetki anlatıyor (mesaj/arkadaşlık yalnızca üyeler
   arasında çalışıyor, bkz. guest-profile.js). */
.guest-chip { flex:none; padding:0 5px; border:1px solid rgba(200,215,230,.28); border-radius:99px; color:#a9bccd; font-size:.6rem; font-weight:700; line-height:14px; letter-spacing:.02em; }
.admin-link { display:block; margin-top:14px; color:#9ddcff; text-align:center; font-size:.78rem; text-decoration:none; }
.admin-link:hover { text-decoration:underline; }
.store-link { display:block; margin:8px auto 0; padding:0; border:0; background:none; color:#f3d77d; font-size:.78rem; cursor:pointer; }

/* Oyun anı: rozete tıklayınca profil/mesaj — masa kapanmaz. */
.game-screen .player-badge.profile-tap,
.game-screen .side-player-badge.profile-tap {
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.game-screen .mobile-game-profile.profile-tap {
  cursor: pointer;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}
.game-screen .side-player { pointer-events: none; }
.game-screen .side-player .side-player-badge.profile-tap { pointer-events: auto; }

/* Profil / mesaj modalları oyun ekranının üstünde (showModal top-layer + yedek). */
#profile-dialog,
#message-dialog,
#report-dialog {
  max-height: min(88vh, 640px);
  overflow: auto;
}
/* Mesaj penceresi artık MODAL DEĞİL (show(), showModal() değil): masadayken
   gelen bir mesaj oyunu kilitlemesin — modal olsaydı arkaplan inert olur,
   sırası gelen oyuncu kart atamadan süreden düşerdi. Modal olmayan <dialog>
   normal akışta konumlanır, o yüzden ortalama elle yapılıyor. */
#message-dialog.message-dialog {
  position: fixed;
  top:0; right:0; bottom:0; left:0;
  width: min(340px, 92vw);
  height: fit-content;
  max-height: min(86vh, 480px);
  margin: auto;
  /* show() top-layer'a ALMAZ — orası yalnızca showModal()'ın. Yani modal
     olmayan pencere sıradan bir yığın bağlamında kalıyor ve masadaki koltuk
     rozetleri (z-index:100) üstüne biniyordu; ekran görüntüsüyle görüldü. */
  z-index: 900;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(4, 14, 22, .55);
}
/* Küçük pencere: uyarı ve boşluklar masaüstü diyaloğundan daha sıkı. */
#message-dialog h2 { font-size: 1rem; margin: 0 26px 8px 0; }
#message-dialog .message-warning { padding: 6px 8px; font-size: .64rem; line-height: 1.35; }
#message-dialog .message-list {
  max-height: min(26vh, 150px);
  height: min(26vh, 150px);
  margin: 8px 0;
}
#message-dialog .message-status { margin-bottom: 4px; }
#message-dialog .message-actions { margin-top: 8px; }
/* Profil kartındaki aksiyon çifti: Mesaj gönder + Engelle yan yana. */
.profile-actions { display: flex; gap: 8px; }
.profile-actions .ref-blue-button { flex: 1; min-height: 34px; padding: 0 10px; }

/* Güncelleme diyaloğu: indir butonu ile "Daha sonra" üst üste biniyordu
   (<a.primary-button> satır içi + yetersiz boşluk). Ayrı aksiyon sütunu. */
.app-update-dialog #app-update-text {
  margin: 0 0 4px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-line;
}
.app-update-dialog .app-update-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
}
.app-update-dialog #app-update-link.primary-button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  text-align: center;
  text-decoration: none;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.app-update-dialog #app-update-later.store-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 8px;
  min-height: 44px;
  text-align: center;
  text-decoration: underline;
  position: relative;
  z-index: 0;
}
#room-ai-difficulty-row[hidden] { display:none !important; }
.store-dialog { width:min(440px,92vw); max-height:88vh; overflow:auto; }
.store-section { display:grid; gap:9px; }
.store-product { padding:11px; border:1px solid #365b59; border-radius:9px; background:#113432; }
.store-product b { display:block; color:#f3d77d; }
.store-product small { display:block; margin:5px 0; color:var(--muted); line-height:1.35; }
.leaderboard-row { display:flex; align-items:center; gap:10px; padding:8px 11px; border:1px solid #365b59; border-radius:9px; background:#113432; }
.leaderboard-row.me { border-color:#dc941c; background:#1c3a26; }
.leaderboard-rank { width:22px; text-align:center; color:#9dbab3; font-size:.9rem; }
.leaderboard-row:nth-child(1) .leaderboard-rank { color:#f5c85b; }
.leaderboard-row:nth-child(2) .leaderboard-rank { color:#cfd8dc; }
.leaderboard-row:nth-child(3) .leaderboard-rank { color:#dc941c; }
.leaderboard-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eef7f3; font-weight:700; }
.leaderboard-points { color:#f3d77d; font-size:.92rem; }
.leaderboard-challenge { margin-left:6px; padding:4px 8px; border:1px solid #4a706b; border-radius:7px; background:#1a3d3a; color:#eef7f3; font-size:.9rem; cursor:pointer; }
.leaderboard-challenge:hover { background:#25534e; }
.leaderboard-challenge:disabled { opacity:.5; cursor:default; }
/* Liderlik tablosu, açıldığı salonun rengini taşır — Ustalar (altın) ve
   Turnuva (kırmızı) sütunlarıyla aynı paletten, salon-column-header'daki
   gradyanla eşleşiyor. Klasik salonda diyalog varsayılan (nötr) kalır. */
#leaderboard-dialog.leaderboard-masters { border-color:#a06a12; background:linear-gradient(160deg,#2a1f0a,#1a1406); }
#leaderboard-dialog.leaderboard-masters .eyebrow,
#leaderboard-dialog.leaderboard-masters h2 { color:#f5c85b; }
#leaderboard-dialog.leaderboard-masters .leaderboard-row { border-color:#8a5a0a; background:linear-gradient(135deg,#3a2a10,#241a08); }
#leaderboard-dialog.leaderboard-masters .leaderboard-row.me { border-color:#f5c85b; }
#leaderboard-dialog.leaderboard-masters .leaderboard-points { color:#f5c85b; }
#leaderboard-dialog.leaderboard-tournament { border-color:#7a1f1f; background:linear-gradient(160deg,#301212,#1c0a0a); }
#leaderboard-dialog.leaderboard-tournament .eyebrow,
#leaderboard-dialog.leaderboard-tournament h2 { color:#e8776d; }
#leaderboard-dialog.leaderboard-tournament .leaderboard-row { border-color:#7a1f1f; background:linear-gradient(135deg,#3a1414,#240c0c); }
#leaderboard-dialog.leaderboard-tournament .leaderboard-row.me { border-color:#e8776d; }
#leaderboard-dialog.leaderboard-tournament .leaderboard-points { color:#f1a49c; }
.store-plans { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0; }
.store-plans span { padding:3px 7px; border-radius:10px; background:#0b2928; color:#c9e2dc; font-size:.72rem; }
.store-status { color:#8fe0a3 !important; font-weight:700; margin-bottom:7px !important; }
.store-product button { width:100%; }
.store-note { display:block; margin-top:13px; color:var(--muted); }
/* Davetler diyaloğu. Önceden düz metin satırlarıydı ("Misafir_9884 — Bekliyor")
   ve uygulamanın geri kalanındaki kart diline yabancı duruyordu. Artık liderlik
   tablosu satırlarıyla aynı görünümü kullanıyor: avatar + isim + durum + eylem.
   Gelen/gönderilen ayrımı da alt alta iki başlık yerine iki sekmeye bölündü. */
.invite-tabs { display:flex; gap:6px; margin:14px 0 12px; }
.invite-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 8px; border:1px solid #365b59; border-radius:9px; background:#0e2f2d; color:#9dbab3; font-weight:800; font-size:.78rem; cursor:pointer; }
.invite-tab:hover { background:#14403d; }
.invite-tab.active { border-color:#dc941c; background:#1a3d3a; color:#f3d77d; }
.invite-count { min-width:18px; padding:1px 5px; border-radius:9px; background:#0b2928; color:#c9e2dc; font-size:.68rem; font-style:normal; font-weight:800; }
.invite-tab.active .invite-count { background:#dc941c; color:#14211f; }
.invite-panel { display:none; }
.invite-panel.active { display:block; }
.invite-list { display:grid; gap:8px; max-height:min(46vh,340px); overflow-y:auto; }
.invite-row { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid #365b59; border-radius:9px; background:#113432; }
.invite-row.pending { border-color:#4a706b; }
.invite-avatar { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#1a3d3a; color:#f3d77d; font-weight:900; font-size:.8rem; background-size:cover; background-position:center; }
.invite-info { flex:1; min-width:0; }
.invite-info b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eef7f3; font-size:.88rem; }
.invite-info small { display:block; margin-top:1px; color:var(--muted); font-size:.7rem; }
.invite-actions { display:flex; gap:6px; flex:none; }
.invite-actions .ref-blue-button { min-height:30px; padding:0 11px; font-size:.72rem; }
.invite-empty { padding:20px 12px; border:1px dashed #365b59; border-radius:9px; color:var(--muted); font-size:.8rem; text-align:center; }
.invite-sent { flex:none; color:#8fe0a3; font-size:.72rem; font-weight:800; }
.waiting-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.auth-notice { min-height:1.2em; margin:10px 0 0; color:#c0392b; text-align:center; font-size:.82rem; font-weight:700; }
.auth-notice-banner { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid #e6c67a; border-radius: 8px; background: #fdf3d9; color: #8a6116; text-align: center; font-size: .85rem; font-weight: 700; }
.contact-info { margin-top:14px; padding-top:10px; border-top:1px solid #ccc; color:#666; font-size:.76rem; text-align:center; line-height:1.5; }
.room-dialog .select-suffix { position: absolute; right: 34px; font-size: .75rem; color: #555; pointer-events: none; }
.room-dialog .create-room { grid-column: 1 / -1; width: calc(100% - 120px); margin-left: 120px; margin-top: 8px; }
.room-screen { flex-direction: column; background: #d1d1d1; color: #171717; }
.room-screen .topbar { background: linear-gradient(#2390d1, #126ea9); color: white; border: 0; }
.room-screen .icon-button { color: white; border-color: #08659a; background: #0d74ae; }
.room-table { position: relative; flex: 1; overflow: hidden; background: radial-gradient(ellipse, #16815d, #07573e 68%); border: 10px solid #604326; box-shadow: inset 0 0 40px #003524; }
.waiting-card { position: absolute; width: min(330px, 88vw); left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 15px; background: #f4f4f4; border: 2px solid #777; box-shadow: 0 8px 25px #0008; }
.waiting-card h2 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #bbb; text-align: center; font-size: 1.1rem; }
.waiting-card dl { margin: 0; }
.waiting-card dl div { display: flex; justify-content: space-between; gap: 20px; padding: 4px 2px; font-size: .82rem; }
.waiting-card dt { color: #555; }
.waiting-card dd { margin: 0; font-weight: 700; text-align: right; }
.waiting-card p { margin: 12px 0 8px; color: #1479b5; text-align: center; font-weight: 700; }
.waiting-card .ref-blue-button { width: 100%; }
.seat { position: absolute; display: flex; flex-direction: column; align-items: center; color: white; text-shadow: 0 1px 2px #000; }
.opponent-seat { top: 4%; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 16px; }
.room-seat { display: flex; flex-direction: column; align-items: center; max-width: 110px; text-align: center; }
.room-seat b { font-size: .85rem; }
.your-seat { bottom: 4%; left: 50%; transform: translateX(-50%); }
.seat-avatar { width: 58px; height: 58px; display: grid; place-items: center; border: 3px solid #ddd; border-radius: 50%; background: #777; font-size: 1.35rem; font-weight: 900; }
.seat-avatar.ready { background: #d99824; }
.seat small { color: #d5efe6; }

@media (max-width: 650px) {
  .topbar { gap: 6px; min-height: 52px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .topbar .icon-button, .topbar .salon-switch-button { width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: .95rem; }
  .topbar .salon-switch-button { width: auto; min-width: 0; padding: 0 8px; font-size: .68rem; }
  .account-upgrade { font-size: .55rem; padding: 4px 6px; margin-left: 2px; }
  .salons-screen .profile-chip, .lobby-screen .profile-chip, .room-screen .profile-chip { gap: 4px; font-size: .72rem; }
  .salons-screen .profile-chip .avatar, .lobby-screen .profile-chip .avatar, .room-screen .profile-chip .avatar { width: 30px; height: 30px; flex: 0 0 30px; }
  .saloon-grid { grid-template-columns: 1fr; }
  .saloon-players { display: block; min-height: 150px; max-height: 205px; }
  #lobby-tables-button { display: none; }
  .saloon-actions { flex-wrap: wrap; padding-bottom: env(safe-area-inset-bottom); }
  .saloon-actions .ref-blue-button { flex: 1 1 30%; min-width:0; padding: 0 6px; font-size:.62rem; }
  .saloon-titlebar { font-size:.72rem; flex-wrap: wrap; gap: 4px 8px; }
  .saloon-bonus { font-size: .7rem !important; }
  .saloon-shell { padding:6px; }
  .room-dialog label { grid-template-columns: 105px 1fr; }
  .room-dialog .create-room { width: calc(100% - 113px); margin-left: 113px; }
  .waiting-card { top: 48%; }
}
@media (max-width: 380px) {
  .account-upgrade { display: none; }
  .profile-chip b,
  .profile-chip #salons-user-name,
  .profile-chip #profile-name,
  .profile-chip #saloon-user,
  .profile-chip #room-user-name { max-width: 26vw; }
  .lobby-screen .topbar .compact-brand { font-size: .9rem; }
  .lobby-screen .profile-chip small { display: none; }
}

/* Oyun masası: dört koltuk, bilgi kutuları ve mobil menü */
.table-shell { background: radial-gradient(ellipse at center, #187f60 0%, #0c6048 54%, #084735 100%); border-color: #5e4328; }
.table-shell::after { content: ""; position: absolute; top:0; right:0; bottom:0; left:0; border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.player-badge { width: 180px; height: 55px; min-width: 0; padding: 3px 7px; border-radius: 2px; background: linear-gradient(90deg, rgba(35,18,77,.94), rgba(82,39,125,.9)); border: 1px solid rgba(255,255,255,.42); box-shadow: 0 2px 5px #0008; }
.player-badge.opponent { left: 50%; top: 12%; transform: translateX(-50%); }
.player-badge.you { left: 50%; bottom: 5%; top: auto; transform: translateX(-50%); }
.player-badge .avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 2px; border: 1px solid #f4d36c; background: linear-gradient(145deg,#e2ae37,#89521b); }
.player-badge.opponent .avatar { background: linear-gradient(145deg,#d9e3e2,#718a88); }
.player-badge span:last-child { min-width: 0; overflow: hidden; }
.player-badge span:last-child b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-badge span:last-child small { color: #f3d77d; }
.score-box { width: 82px; height: 55px; top: 18%; padding: 7px; border-radius: 2px; background: linear-gradient(90deg, rgba(35,18,77,.94), rgba(82,39,125,.9)); border: 1px solid rgba(255,255,255,.38); box-shadow: 0 2px 5px #0008; }
.score-box b { font-size: 1.25rem; }
.you-zone .score-box { bottom: 11%; }
.table-endpoint, .table-clock { position: absolute; z-index: 4; top: auto; bottom: 21%; width: 92px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.38); border-radius: 2px; color: #fff; background: linear-gradient(90deg, rgba(35,18,77,.94), rgba(82,39,125,.9)); box-shadow: 0 2px 5px #0008; }
.table-endpoint { left: 2%; }
.table-clock { right: 2%; }
.table-endpoint small, .table-clock small { font-size: .55rem; letter-spacing: .14em; color: #f3d77d; }
.table-endpoint b, .table-clock b { font-size: .85rem; }
.table-action-strip { position: absolute; z-index: 6; top: 2%; right: 2%; display: flex; gap: 4px; }
.table-action { min-width: 52px; min-height: 28px; padding: 0 7px; border: 1px solid #07598f; border-radius: 3px; color: #fff; background: linear-gradient(#29a3e8,#0872b5); font-size: .67rem; font-weight: 700; box-shadow: 0 1px 2px #0008; cursor: pointer; }
.side-player { position: absolute; z-index: 3; top: 50%; width: 86px; display: none; flex-direction: column; align-items: center; transform: translateY(-50%); }
.side-player.visible { display: flex; }
.left-player-zone { left: 1%; }
.right-player-zone { right: 1%; }
.side-player-badge { width: 70px; min-height: 76px; padding: 4px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(255,255,255,.36); border-radius: 2px; color: #fff; background: linear-gradient(90deg, rgba(35,18,77,.94), rgba(82,39,125,.9)); box-shadow: 0 2px 5px #0008; font-size: .63rem; }
.side-badge-score { min-width: 18px; color: #fff; font-size: .95rem; font-weight: 900; line-height: 1; text-align: center; text-shadow: 0 1px 2px #0007; }
.side-badge-score.score-flash { animation: score-flash .55s ease; }
.side-player-badge .avatar { width: 29px; height: 29px; border-radius: 2px; font-size: .8rem; background: linear-gradient(145deg,#e5bd4d,#965c1c); }
.side-player-badge small { color: #f3d77d; font-size: .55rem; }
/* Yan koltuk rozetleri ortalı; .row-badges:empty rozetsiz kartta satırı
   tamamen kaldırdığı için kart yüksekliği oyuncudan oyuncuya değişmiyor. */
.side-player-badge .row-badges { justify-content: center; margin-top: 1px; }
.side-card-stack { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.side-card-stack .card-back.tiny { width: 20px; height: 28px; }
.table-chat-bubble { position: absolute; z-index: 9; right: 13%; top: 31%; display: none; max-width: 145px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; color: #fff; background: rgba(24,18,55,.9); box-shadow: 0 3px 8px #0007; font-size: .72rem; }
.table-chat-bubble.show { display: block; }
.table-chat-bubble::after { content: ""; position: absolute; bottom: -7px; left: 18px; width: 12px; height: 12px; background: rgba(24,18,55,.9); border-right: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); transform: rotate(45deg); }
.center-zone { top:24%; right:0; bottom:24%; left:0; }
.captured-status { padding: 3px 7px; border: 1px solid rgba(255,255,255,.26); border-radius: 2px; background: rgba(35,18,77,.75); }
.captured-status.left { left: 10%; }
.captured-status.right { right: 10%; }
.pile .playing-card { width: 72px; height: 96px; }
.player-hand .playing-card { width: 72px; height: 96px; }
.player-hand { margin-bottom: 10vh; }
.bot-hand { display: none !important; }
.bot-hand .card-back { display: none; }
.side-card-stack { display: none !important; }
.timer { height: 3px; background: rgba(0,0,0,.35); }

@media (max-width: 760px) {
  .table-action-strip { top:0; right:0; bottom:0; left:0; top: 0; right: auto; width: 100%; height: 0; display: block; transform: none; }
  .table-action-strip .table-action { position: absolute; top: 2%; }
  .table-action-strip .table-action:first-child { left: 2%; }
  .table-action-strip .table-action:nth-child(2) { right: 2%; }
  .table-action-strip .table-action:nth-child(2) { display: none; }
  .table-action-strip .table-action:nth-child(3) { display: none; }
  .table-action { min-width: 48px; min-height: 25px; padding: 0 5px; font-size: .6rem; }
  .table-endpoint, .table-clock { top: auto; bottom: 19%; width: 61px; height: 36px; }
  .table-endpoint { left: 1.5%; }
  .table-clock { right: 1.5%; }
  .table-endpoint b, .table-clock b { font-size: .7rem; }
  .table-endpoint small, .table-clock small { font-size: .46rem; }
  .player-badge { width: 112px; height: 45px; padding: 2px 4px; }
  .player-badge .avatar { width: 37px; height: 37px; flex-basis: 37px; }
  .player-badge span:last-child { display: flex; font-size: .72rem; }
  .score-box { width: 57px; height: 43px; padding: 4px; }
  .score-box b { font-size: 1rem; }
  .bot-hand { display: none !important; }
  .side-player { width: 55px; }
  .side-player-badge { width: 52px; min-height: 62px; font-size: .52rem; }
  .side-player-badge .avatar { width: 24px; height: 24px; }
  .side-player-badge small { font-size: .45rem; }
  .side-card-stack { display: none; }
  .left-player-zone { left: 0; }
  .right-player-zone { right: 0; }
  .center-zone { top:23%; right:0; bottom:23%; left:0; }
  .captured-status.left { left: 16%; }
  .captured-status.right { right: 16%; }
  .captured-status { font-size: .62rem; }
  .captured-status b { font-size: 1rem; }
  .table-chat-bubble { right: 20%; top: 34%; }
  .player-hand .playing-card, .pile .playing-card { width: clamp(57px, 14vw, 72px); height: clamp(76px, 19vw, 96px); }
  .player-hand { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); align-self: auto; width: min(86vw, 330px); min-width: 0; justify-content: center; margin: 0; }
}

@media (max-width: 380px) {
  .table-action:nth-child(3) { display: none; }
  .player-badge { width: 96px; }
  .player-badge span:last-child { font-size: .64rem; }
  .side-player-badge { width: 47px; }
  .captured-status.left { left: 11%; }
  .captured-status.right { right: 11%; }
  .player-hand { bottom: 8%; width: 220px; }
  .player-hand .playing-card { width: 58px; height: 78px; flex: 0 0 58px; margin-left: -17px; }
  .player-hand .playing-card:first-child { margin-left: 0; }
}

/* Girişten sonraki iki sütunlu salon seçimi */
.salons-screen { flex-direction: column; background: #d7d7d7; color: #1b1b1b; overflow-x: hidden; }
.salons-screen .topbar { background: linear-gradient(#2390d1, #126ea9); color: white; border: 0; box-shadow: 0 2px 6px #777; }
.salons-screen .profile-chip small { color: #d9efff; }
.salons-page {
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: 14px max(10px, env(safe-area-inset-right, 0px)) 18px max(10px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
/* Üst araç çubuğu: Hemen Oyna solda, sunucu/online sağda. */
.salons-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.salons-toolbar .quick-play {
  width: 100%; min-height: 44px; font-weight: 900; font-size: .95rem;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.salons-toolbar-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.server-state { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #aaa; border-radius: 3px; background: linear-gradient(#fff,#e7e7e7); box-shadow: 0 1px 2px #999; font-size: .72rem; max-width: 100%; }
.server-state .server-label { color: #666; }
.server-state b { color: #8c3e36; font-weight: 800; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-state .server-dot { width: 9px; height: 9px; border-radius: 50%; background: #b34; box-shadow: 0 0 0 2px rgba(179,51,68,.18); flex: 0 0 auto; }
.server-state.online b { color: #1c5637; }
.server-state.online .server-dot { background: #35a06a; box-shadow: 0 0 0 2px rgba(53,160,106,.22); }
/* Henüz bağlanılmadı: arıza değil, bu yüzden kırmızı DEĞİL. */
.server-state.connecting b { color: #8a6412; }
.server-state.connecting .server-dot { background: #d2a026; box-shadow: 0 0 0 2px rgba(210,160,38,.22); animation: server-pulse 1.1s ease-in-out infinite; }
@keyframes server-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .server-state.connecting .server-dot { animation: none; } }

.online-now { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #aaa; border-radius: 3px; background: linear-gradient(#fff,#e7e7e7); box-shadow: 0 1px 2px #999; font-size: .72rem; white-space: nowrap; }
.online-now .online-label { color: #666; }
.online-now b { color: #176fa5; font-weight: 800; font-size: .9rem; }
.online-now .online-dot { width: 9px; height: 9px; border-radius: 50%; background: #35a06a; box-shadow: 0 0 0 2px rgba(53,160,106,.22); flex: 0 0 auto; }
.salon-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.salon-column { min-height: 448px; padding: 8px; border: 1px solid #858585; background: #ededed; box-shadow: inset 0 0 0 1px #fff, 0 2px 4px #999; }
.salon-column-header { height: 49px; padding: 7px 14px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #2d2350; color: white; background: linear-gradient(#654c93,#382761); box-shadow: inset 0 1px rgba(255,255,255,.4); }
.masters-column .salon-column-header { border-color: #8a5a0a; background: linear-gradient(#e0a53d,#a06a12); }
.tournament-column .salon-column-header { border-color: #7a1f1f; background: linear-gradient(#d4483f,#8f1f1f); }
.salon-column-header b { font-size: .98rem; }
.salon-column-header small { color: #e3dff2; font-size: .68rem; }
.masters-column .salon-column-header small { color: #fff2d9; }
.tournament-column .salon-column-header small { color: #ffe0dc; }
.salon-list { display: flex; flex-direction: column; gap: 8px; padding: 10px 3px; }
.salon-button { position: relative; min-height: 78px; padding: 11px 96px 10px 17px; border: 1px solid #55427b; border-radius: 3px; color: white; background: linear-gradient(135deg,#655293,#392663); text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.34), 0 2px 3px #777; cursor: pointer; transition: transform .15s, filter .15s; }
.salon-button.salon-disabled { border-color:#8b2929; background:linear-gradient(135deg,#7e3232,#4b1f25); cursor:not-allowed; filter:saturate(.75); }

/* Piştix oyun masası: büyük kartlar ve sürekli genel sohbet alanı */
.table-chat { position:absolute; z-index:10; left:4%; right:4%; bottom:1%; height:92px; display:flex; flex-direction:column; background:#fff; border:5px solid #4d79a4; box-shadow:0 2px 4px #45627d; color:#4d6680; }
.table-chat-log { flex:1; overflow:auto; padding:6px 9px; font:16px Georgia,serif; line-height:1.2; }
.table-chat-log div:nth-child(2n) { color:#627b43; }
.table-chat form { display:flex; height:34px; border-top:1px solid #c7c7c7; }
.table-chat input { flex:1; min-width:0; border:0; color:#344d64; background:#fff; padding:4px 8px; }
.table-chat button { width:42px; border:0; border-left:1px solid #d1d1d1; color:#fff; background:#4d79a4; cursor:pointer; }
/* Sohbet kapalı / engelli: panel yerinde kalır, kapalı olduğu belli olur. */
/* --- Emoji paneli (sohbetteki ☁ düğmesi) ---
   Sohbet kutusunun ÜSTÜNDE duruyor: kutu 92-155px arası ve içinde açılsaydı
   sohbet kaydından yer çalardı. `.table-chat` position:absolute olduğu için
   bottom:100% onu kutunun tam üstüne oturtuyor.
   Düğme genişliği AYRICA yazılmak zorunda: `.table-chat button` kuralı 42px
   sabitliyor ve emoji ızgarası onunla taşıyordu. */
.chat-emoji-panel {
  position:absolute; z-index:3; right:-5px; bottom:100%;
  /* Sohbet çubuğunun tamamına yayılmıyor: ☁ düğmesinin üstüne, sağa dayalı
     duruyor. Tam genişlikte masaüstünde emojiler 120px'e esneyip seyreliyordu.
     min()/clamp() KULLANILMIYOR: Android 9 WebView bilmiyor ve kural tümden
     düşerdi (bkz. pistix-legacy-webview-css-floor). Sabit genişlik + max-width
     aynı işi görüyor: dar telefonda çubuk kadar, geniş ekranda 300px. */
  width:300px; max-width:calc(100% + 10px);
  display:grid; grid-template-columns:repeat(6,1fr); gap:2px;
  padding:5px; margin-bottom:4px;
  border:3px solid #4d79a4; background:#fff; box-shadow:0 3px 10px #0006;
}
.chat-emoji-panel[hidden] { display:none; }
.chat-emoji-panel button {
  width:auto; height:34px; padding:0; border:1px solid transparent; border-left:0;
  background:#f2f6fa; color:#171717; font-size:19px; line-height:1; cursor:pointer;
}
.chat-emoji-panel button:hover { border-color:#4d79a4; background:#dbe7f2; }
.chat-emoji-panel button:active { background:#c3d6e8; }
/* Hazır mesaj paneli: emoji ızgarasıyla AYNI kutu görünümü ama tek sütun —
   metin satırları emoji gibi 1/6 hücreye sığmaz, tam genişlik ister. Liste
   admin panelden 20'ye kadar büyüyebiliyor (bkz. chat-phrases-config.js);
   sabit piksel max-height + scroll — vh/clamp() KULLANILMIYOR (bkz.
   pistix-legacy-webview-css-floor, Android 9 WebView bilmiyor). */
.chat-phrase-panel { grid-template-columns:1fr; max-height:280px; overflow-y:auto; }
.chat-phrase-panel button {
  width:100%; height:auto; min-height:32px; padding:6px 8px;
  font-size:13px; font-family:inherit; text-align:left;
  border-left:1px solid transparent; border-bottom:1px solid #e3ebf2;
}
.chat-phrase-panel button:last-child { border-bottom:0; }
/* Sohbet kilitliyken panel hiç açılmıyor (JS kapatıyor), ama düğme de
   gri kalsın diye kapalı kutu kuralına dahil. */
.table-chat.chat-closed .chat-emoji-panel { display:none; }

.table-chat.chat-closed { border-color:#8a99a8; background:#eef1f4; }
.table-chat.chat-closed .table-chat-log { color:#7b8a99; font-style:italic; }
.table-chat.chat-closed input { background:#eef1f4; color:#7b8a99; cursor:not-allowed; }
.table-chat.chat-closed input::placeholder { color:#7b8a99; }
.table-chat.chat-closed button { background:#8a99a8; cursor:not-allowed; }
.mobile-table-actions { display:none; }

@media (max-width:760px) {
  .player-hand { bottom:22%; width:min(88vw,340px); }
  .player-hand .playing-card { width:72px; height:104px; flex-basis:72px; margin-left:-18px; }
  .pile .playing-card,.table-card-back { width:84px; height:118px; }
  .player-badge.you { bottom:13%; }
  .table-chat { left:1%; right:1%; bottom:0; height:104px; }
  .table-chat-log { font-size:14px; }
}
@media (max-width:380px) {
  .player-hand { bottom:22%; width:250px; }
  .player-hand .playing-card { width:66px; height:96px; flex-basis:66px; margin-left:-17px; }
}

/* Piştix masa düzeni: geniş gri zemin, mavi çerçeve ve merkezde tek kart arkası */
.game-screen { background:#4c78a4; }
.table-shell { background:#c9c9c9; border:8px solid #4d79a4; box-shadow:inset 0 0 0 1px #e9f2fa; }
.table-shell::after { border-color:rgba(44,77,110,.35); }
.player-badge,.score-box,.table-endpoint,.table-clock,.captured-status { background:linear-gradient(#5d83ad,#3e638c); border-color:#315878; box-shadow:0 2px 4px #45627d; }
.player-badge.opponent,.player-badge.you { border-radius:0; }
/* Masa mavi düzene geçirilirken yukarıdaki listeye iki öğe eklenmemişti ve
   eski mor gradyanda kalmışlardı: 4 kişilik masanın YAN koltuk rozetleri
   (gri zeminin iki yanında iki mor blok) ve masa sohbet baloncuğu. Yan
   koltuklar yalnızca 2v2'de göründüğü için 1v1 masada fark edilmiyordu. */
.side-player-badge,.table-chat-bubble { background:linear-gradient(#5d83ad,#3e638c); border-color:#315878; box-shadow:0 2px 4px #45627d; }
.side-player-badge { border-radius:0; }

/* "Şifremi unuttum": form içinde bağlantı gibi görünen düğme. */
.auth-link-button { display:block; width:100%; margin-top:10px; padding:6px; border:0; background:none; color:#2f7ab5; font:inherit; font-size:.85rem; text-decoration:underline; cursor:pointer; }
.auth-link-button:hover { color:#1b5b8c; }
.auth-link-button:disabled { opacity:.5; cursor:default; }
/* Başarı bildirimi hata rengiyle aynı görünmemeli. */
.auth-notice.auth-notice-ok { color:#1c5637; }
.web-update-banner { position:fixed; left:0; right:0; top:0; z-index:9999; display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap; padding:.55rem .85rem; background:#0b3d44; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.25); font-size:.92rem; }
.web-update-banner .ref-blue-button { padding:.35rem .85rem; font-size:.85rem; width:auto; margin:0; }
.email-verify-panel { text-align: center; }
.email-verify-panel .primary-button { margin-top: .35rem; }
.email-verify-panel .ref-blue-button { margin-top: .5rem; width: 100%; }

/* Oturumu kapatma menüdeki diğer girişlerden ayrılsın: geri dönüşü olan ama
   sonuçları olan bir işlem (misafirde puan/istatistik cihazdan silinir). */
.menu-danger { border-color:#8c3e36 !important; background:linear-gradient(#b1584e,#8c3e36) !important; }
.menu-danger:hover { filter:brightness(1.08); }

/* Sıra göstergesi: sırası gelen oyuncunun rozeti dört bir yanından yeşil yanar.
   Önceden rakip rozetinde "Düşünüyor" yazısı vardı — yalnızca ÜST koltuk için
   çalışıyordu, 2v2'de yandaki iki oyuncunun sırası hiç belli olmuyordu ve kendi
   sıramın da bir göstergesi yoktu. .player-badge/.side-player-badge ile iki
   sınıflı seçici: yukarıdaki tek sınıflı kuralları !important'sız geçer. */
/* box-shadow keyframes mobilde pahalıydı; sabit yeşil çerçeve yeterli. */
.player-badge.turn-active,.side-player-badge.turn-active {
  border-color:#3fd980;
  box-shadow:0 0 0 2px #3fd980, 0 0 12px 3px rgba(63,217,128,.55), 0 2px 4px #45627d;
}
.side-player-badge .avatar { border:1px solid #f4d36c; background:linear-gradient(145deg,#e2ae37,#89521b); }
/* Baloncuğun oku düz renk; gradyanın alt ucuyla aynı tonda kalmalı. */
.table-chat-bubble::after { background:#3e638c; border-color:#315878; }
.table-card-back { position:absolute; z-index:1; left:50%; top:50%; width:76px; height:106px; transform:translate(-50%,-50%) translate(-7px,-8px) rotate(-3deg); border:3px solid #fff; border-radius:8px; background:#fff url('assets/cards/back.png') center/cover no-repeat; box-shadow:0 4px 7px #555; }
.pile { z-index:2; }
.pile .playing-card { z-index:3; }

/* Masa kuruldu / oyuncu bekleniyor ekranı da AYNI Piştix düzenini kullanır.
   Burası yeni tasarıma geçirilmemiş, eski yeşil çuha + kahverengi ahşap
   çerçeve halinde kalmıştı: "Hazır"a basılır basılmaz zemin yeşilden griye,
   çerçeve kahverengiden maviye, yuvarlak avatarlar kare rozete atlıyordu —
   iki ekran sanki iki ayrı oyunmuş gibi görünüyordu. Değerler yukarıdaki
   .game-screen/.table-shell/.player-badge kurallarıyla birebir aynı tutulur;
   biri değişirse burası da değişmeli. */
/* height (min-height değil) + overflow:hidden: .screen'in min-height:100vh'si
   yalnızca ALT sınır koyuyor, üst sınır koymuyordu; masa içeriği büyüyünce
   ekran da onunla birlikte uzayıp sayfayı kaydırılabilir yapıyor ve üst bar
   yukarı kayıyordu. Yükseklik sabitlenince taşma masanın kendi içinde kalır. */
.room-screen { height:100vh; height:100dvh; overflow:hidden; background:#4c78a4; }
.room-table { background:#c9c9c9; border:8px solid #4d79a4; box-shadow:inset 0 0 0 1px #e9f2fa; }
/* Koltuklar ve bilgi kartı yüzdeli absolute konumlardaydı (üst %4, kart %50,
   alt %4) ve kartın yüksekliği hesaba katılmıyordu: 4 oyunculu boş masada
   üst koltukların "Katılımcı bekleniyor" yazısı kartın altında kalıyor, alt
   koltuk da karta biniyordu (ölçüm: 18px ve 4px çakışma). Dikey akış artık
   flex ile dağıtılıyor; hangi ekran yüksekliğinde olursa olsun üst üste
   binmiyor, sığmazsa kırpmak yerine kaydırıyor. min-height:0 şart: koltuklar
   artık akışta olduğu için flex öğesinin varsayılan min-height:auto'su masayı
   içeriği kadar büyütüyor, masa da ekranı aşıp tüm sayfayı kaydırılabilir
   yapıyordu (ölçüm: 812px ekranda 862px sayfa, üst bar yukarı kayıyordu). */
.room-table { display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:14px; padding:16px 12px; min-height:0; overflow:auto; }
.room-table .seat, .room-table .waiting-card { position:static; transform:none; }
.room-table .opponent-seat { flex-wrap:wrap; justify-content:center; }
/* Oyun masasındaki merkez kart arkası burada YOK: bekleme kartı zaten masanın
   ortasını kaplıyor, kart arkası da arkasından şerit halinde taşıp bozuk
   duruyordu. Bekleme ekranının merkez öğesi masa bilgi kartının kendisi. */
/* Koltuklar masadaki oyuncu rozetinin dilini konuşur: köşesiz mavi panel,
   altın kenarlı kare avatar, altın açıklama yazısı. */
.room-table .your-seat, .room-table .room-seat { z-index:1; padding:6px 10px; border:1px solid #315878; background:linear-gradient(#5d83ad,#3e638c); box-shadow:0 2px 4px #45627d; }
.room-table .opponent-seat { padding:0; border:0; background:none; box-shadow:none; }
.room-table .seat-avatar { width:48px; height:48px; margin-bottom:3px; border:1px solid #f4d36c; border-radius:2px; background:linear-gradient(145deg,#e2ae37,#89521b); font-size:1.2rem; }
/* Boş koltuk ("?") rakip rozetiyle aynı gri tonda — dolu koltuktan ayrılsın. */
.room-table .seat-avatar:not(.ready) { border-color:rgba(255,255,255,.42); background:linear-gradient(145deg,#d9e3e2,#718a88); color:#2b3b3a; }
.room-table .seat small { color:#f3d77d; }
/* Bekleme kartı: köşesiz, mavi çerçeveli, başlığı masa rozetiyle aynı mavi. */
.waiting-card { border:1px solid #315878; border-radius:0; background:#f2f5f8; box-shadow:0 4px 12px rgba(20,45,70,.45); }
.waiting-card h2 { margin:-15px -15px 10px; padding:9px 12px; border-bottom:1px solid #315878; background:linear-gradient(#5d83ad,#3e638c); color:#fff; text-shadow:0 1px 2px #0007; }
.waiting-card dl div { border-bottom:1px solid #dde4ea; }
.waiting-card dl div:last-child { border-bottom:0; }
.waiting-card p { color:#2f5f8c; }
/* Dar ekranda en yüklü hal 4 oyunculu boş online masa: 3 boş koltuk + iki
   düğmeli bilgi kartı + kendi koltuğum. Varsayılan koltuk genişliğiyle üst
   koltuklar 2+1 diye sarılıyor, ~130px fazladan yer kaplıyor ve oyuncunun
   kendi koltuğu ekran dışında kalıyordu. Koltuklar daraltılıp tek sıraya
   sığdırılıyor. */
@media (max-width:560px) {
  .room-table { gap:10px; padding:10px 8px; }
  .room-table .opponent-seat { gap:7px; }
  .room-table .room-seat { max-width:none; width:90px; padding:5px 4px; }
  /* Masa düzeninin dar ekran ayarı BU BLOKTA DEĞİL: koltuk genişliğini veren
     kural dosyanın ilerisinde (.room-table .seat-board .room-seat) ve aynı
     özgüllükte olduğu için sonradan gelen kazanıyor. Ayar oranın kendi medya
     sorgusunda — bkz. "Bekleme odası: koltuk (eş) seçimi". */
  .room-table .seat-avatar { width:38px; height:38px; font-size:1rem; }
  .room-table .seat b { font-size:.72rem; }
  .room-table .seat small { font-size:.62rem; }
}

/* ===== Piştix pencere düzeni ============================================
   Ekranlar (giriş, salonlar, lobi, masa kurma, masa menüsü, oyun masası)
   çoktan açık gri + mavi Piştix düzenine geçmişti, ama DİYALOGLARIN hiçbiri
   geçirilmemişti: .score-dialog #0a2928, .social-dialog #0b2928, satırlar
   #113432/#0e2f2d/#1a3d3a — hepsi eski koyu yeşil temanın kalıntısı. Profil,
   mağaza, liderlik, davetler, mesaj, skor ya da Yaz Boz penceresi açılınca
   oyun bir anda bambaşka bir uygulamaya dönüşüyordu.
   Hepsi .panel/.room-dialog ile aynı dile getiriliyor: açık kart, gri
   çerçeve, koyu metin, mavi vurgu, altın yalnızca VIP/madalya için.
   Bu blok eski kuralları EZER (aynı özgüllük, dosyada daha sonra gelir);
   yukarıdaki eski renkler kasten silinmedi, tek yerden geri alınabilsin. */

/* --- Kabuk --- */
.score-dialog, .social-dialog { border:2px solid #8d8d8d; border-radius:3px; color:#171717; background:#f4f4f4; box-shadow:0 12px 40px rgba(10,25,40,.45); }
.score-dialog::backdrop, .social-dialog::backdrop { background:rgba(18,38,58,.55); backdrop-filter:blur(4px); }
.score-dialog h2, .social-dialog h2 { color:#17324a; }
/* .eyebrow varsayılanı altın: açık zeminde okunmuyordu. */
.score-dialog .eyebrow, .social-dialog .eyebrow { color:#2f5f8c; }
.muted-line, .store-note, .profile-stat-list dt, .invite-info small, .store-product small, .card-style-option small { color:#5a6b7a; }
.dialog-divider { border-top-color:#ccd6e0; }

/* --- Skor / Yaz Boz --- */
.score-table { border:1px solid #ccd6e0; border-radius:3px; }
.score-row { border-bottom-color:#dde4ea; color:#42586b; }
.score-row b { color:#17324a; }
.score-row.heading { background:#e6edf3; }
.score-row.total { color:#17324a; }
.score-row.total b { color:#0872b5; }
.result-icon { border-color:#f4f4f4; }
.card-style-option { border:2px solid #b9c6d2; border-radius:3px; color:#171717; background:#fff; }
.card-style-option.selected { border-color:#0872b5; box-shadow:0 0 0 2px rgba(8,114,181,.35); }

/* --- Profil / mesaj --- */
.social-profile-head small { color:#2f7a4f; }
.profile-stat-list > div { border:1px solid #dbe3ec; border-radius:3px; background:#fff; }
.profile-stat-list > div + div { margin-top:4px; }
.profile-stat-list > div:nth-child(odd) { background:#eef3f8; }
.profile-stat-list dd { color:#17324a; }
.message-list { border:1px solid #ccd6e0; border-radius:3px; background:#fff; }
.message.incoming { background:#e6edf3; color:#17324a; }
.message.outgoing { background:linear-gradient(#5d83ad,#3e638c); color:#fff; }
.message-warning { border-color:#e0c07a; border-radius:3px; background:#fdf3d9; color:#8a6116; }
.message-warning b { color:#6b4a10; }
.message-status { color:#b8352a; }
#message-input, #name-change-input { border:1px solid #99a9b8; border-radius:3px; color:#111; background:#fff; }
.friend-request-row { border-bottom-color:#dde4ea; }

/* --- Mağaza / liderlik / davetler --- */
.store-product, .leaderboard-row, .invite-row { border:1px solid #ccd6e0; border-radius:3px; background:#fff; }
.store-product b { color:#17324a; }
.store-plans span { border:1px solid #ccd6e0; background:#e6edf3; color:#2f5f8c; }
.store-status { color:#1c7a45 !important; }
.store-link { color:#0872b5; }
.leaderboard-row.me { border-color:#0872b5; background:#e8f3fb; }
.leaderboard-rank { color:#5a6b7a; }
.leaderboard-name { color:#17324a; }
.leaderboard-points { color:#0872b5; }
.leaderboard-challenge { border:1px solid #07598f; border-radius:3px; color:#fff; background:linear-gradient(#29a3e8,#0872b5); }
.leaderboard-challenge:hover { background:linear-gradient(#3ab1ef,#0b82c7); }
.invite-tab { border:1px solid #ccd6e0; border-radius:3px; background:#e6edf3; color:#42586b; }
.invite-tab:hover { background:#dbe5ee; }
.invite-tab.active { border-color:#07598f; background:linear-gradient(#5d83ad,#3e638c); color:#fff; }
.invite-count { background:#ccd6e0; color:#2f5f8c; }
.invite-tab.active .invite-count { background:#f3d77d; color:#3a2600; }
/* Avatarlar masadaki rozetle aynı: kare, altın gradyan, altın kenar. */
.invite-avatar { border:1px solid #f4d36c; border-radius:2px; background:linear-gradient(145deg,#e2ae37,#89521b); color:#fff; }
.invite-info b { color:#17324a; }
.invite-row.pending { border-color:#d0a63f; }
.invite-empty { border:1px dashed #b9c6d2; border-radius:3px; color:#5a6b7a; }
.invite-sent { color:#1c7a45; }

/* Usta/turnuva liderlik varyantları koyu altın ve bordo gradyanlardı; açık
   kart üzerinde aynı kimliği koruyan açık tonlara çevrildi. */
#leaderboard-dialog.leaderboard-masters { border-color:#a06a12; background:#fdf6e6; }
#leaderboard-dialog.leaderboard-masters .eyebrow,
#leaderboard-dialog.leaderboard-masters h2 { color:#8a5a0a; }
#leaderboard-dialog.leaderboard-masters .leaderboard-row { border-color:#e0c07a; background:#fffaf0; }
#leaderboard-dialog.leaderboard-masters .leaderboard-row.me { border-color:#a06a12; }
#leaderboard-dialog.leaderboard-masters .leaderboard-points { color:#8a5a0a; }
#leaderboard-dialog.leaderboard-tournament { border-color:#7a1f1f; background:#fdecea; }
#leaderboard-dialog.leaderboard-tournament .eyebrow,
#leaderboard-dialog.leaderboard-tournament h2 { color:#9e2b22; }
#leaderboard-dialog.leaderboard-tournament .leaderboard-row { border-color:#e8a49c; background:#fff5f4; }
#leaderboard-dialog.leaderboard-tournament .leaderboard-row.me { border-color:#9e2b22; }
#leaderboard-dialog.leaderboard-tournament .leaderboard-points { color:#9e2b22; }

/* Sayfa zemini: --deep koyu teal, ekranlar yüklenene kadar ve ekran
   yüksekliğini aşan yerlerde görünüyordu. Masa/bekleme ekranıyla aynı mavi. */
html, body { background:#4c78a4; }
.salon-button.masters { border-color: #a06a12; background: linear-gradient(135deg,#c98f34,#8a5a0a); }
.salon-button.tournament { border-color: #7a1f1f; background: linear-gradient(135deg,#c04a41,#7a1f1f); }
.salon-button:hover { transform: translateY(-2px); filter: brightness(1.1); }
.salon-name { display: block; font-size: 1.08rem; font-weight: 900; }
.salon-meta { display: block; margin-top: 6px; color: #f6e38c; font-size: .76rem; }
.salon-meta i { display: inline-block; width: 8px; height: 8px; margin-right: 3px; border-radius: 50%; background: #49e28b; box-shadow: 0 0 6px #49e28b; }
.salon-meta b { color: #ffd34b; margin-left: 4px; }
.salon-require { position: absolute; right: 12px; top: 30px; color: #e5dcf5; font-size: .66rem; text-align: right; }
.salon-button.masters .salon-require { color: #fff0d4; }
.salon-button.tournament .salon-require { color: #ffe4e0; }
/* Köşedeki 'VIP' rozeti KALDIRILDI: salonun adı zaten "VIP Üye Salonu" ve
   altında "Sadece VIP üyeler" yazıyor — rozet aynı bilgiyi üçüncü kez
   tekrarlayıp başlığın sağını daraltıyordu. */
/* Canlı doluluk: boş salonda nokta sönük. */
.salon-button.salon-empty .salon-meta i { background: #8a96a8; box-shadow: none; }
.salon-guide-btn.salon-guide-inline { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin: 0 0 0 2px; border-radius: 50%; border: 1px solid rgba(246,227,140,.75); color: #f6e38c; background: rgba(0,0,0,.25); font-size: .72rem; font-weight: 900; line-height: 1; cursor: pointer; vertical-align: middle; }
.salon-guide-btn.salon-guide-inline:hover { filter: brightness(1.15); background: rgba(0,0,0,.4); }
.salon-guide-dialog { width: min(440px, 92vw); text-align: left; }
.salon-guide-body { margin: 0; color: #2a3a48; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; max-height: min(60vh, 420px); overflow: auto; }
.salon-switch-button { min-height: 33px; padding: 0 10px; border: 1px solid #07598f; border-radius: 3px; color: white; background: linear-gradient(#29a3e8,#0872b5); cursor: pointer; font-size: .74rem; font-weight: 700; }

@media (max-width: 980px) {
  .salon-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .salons-toolbar { grid-template-columns: 1fr; gap: 8px; }
  .salons-toolbar-meta { justify-content: stretch; }
  .salons-toolbar-meta .server-state,
  .salons-toolbar-meta .online-now { flex: 1 1 auto; justify-content: center; }
  .salon-columns { grid-template-columns: 1fr; gap: 10px; }
  .salon-column { min-height: 0; padding: 6px; }
  .salon-column-header { height: 43px; }
  /* Dar ekranda sağdaki "Giriş" metni ismi ezmesin. */
  .salon-button {
    min-height: 0;
    padding: 10px 12px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .salon-require {
    position: static;
    right: auto;
    top: auto;
    margin-top: 2px;
    text-align: left;
    font-size: .62rem;
    opacity: .95;
  }
  /* vip-only için üstteki 28px'lik boşluk ve rozet konumu kaldırıldı —
     ikisi de artık olmayan ::before rozeti içindi; kalsaydı mobilde kartın
     tepesinde boş bir şerit bırakırdı. */
}


/* Masaüstü masa yerleşimi: sohbet paneli artık oyuncunun rozetini/skorunu
   örtmüyor, rakip skor kutusu da üstteki aksiyon şeridinin altında kalmıyor. */
@media (min-width:761px) {
  .opponent-zone .score-box { margin-top:18px; }
  .table-endpoint,.table-clock { bottom:28%; }
  .pile-wrap { position:relative; top:-42px; }
  .player-hand { margin-bottom:182px; }
  .player-badge.you,.you-zone .score-box { bottom:120px; }
  .timer { bottom:112px; z-index:11; }
}

/* Alçak masaüstü/tablet pencerelerinde masa dikeyde sıkıştırılır. */
@media (min-width:761px) and (max-height:760px) {
  .pile-wrap { top:-78px; }
  .table-endpoint,.table-clock { bottom:36%; }
  .player-hand { margin-bottom:176px; }
  .player-badge.you,.you-zone .score-box { bottom:104px; }
  .timer { bottom:98px; }
}

.avatar.has-avatar, .seat-avatar.has-avatar, .lobby-avatar.has-avatar, .mobile-game-avatar.has-avatar {
  background-color: transparent !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; color: transparent !important;
}

/* ---- El sonucu penceresi: masanın mavi çerçeve + açık panel diliyle ---- */
#score-dialog { width: min(330px,90vw); padding: 0; overflow: hidden; border: 5px solid #4d79a4; border-radius: 4px; color: #4d6680; background: #eef3f8; box-shadow: 0 14px 38px #000a; }
/* Maç sonu penceresi MODALSIZ açılıyor (show), çünkü modal olduğunda arkadaki
   sohbet kutusu tıklanamıyordu — bkz. game-round-flow.js showRoundResult.
   Modalsız diyalog "top layer"a girmediği için sıralamayı z-index yapmak
   zorunda: .game-screen mobilde z-index:50 ve position:fixed, yani kendi
   yığma bağlamını kurup pencerenin üstünü örtüyordu (ölçüldü). 60 hem onun
   hem içindeki en yüksek öğenin üstünde kalıyor.
   Sohbet paneliyle ÇAKIŞMIYOR: 375x812'de pencere 237-576, sohbet 682-804. */
/* Ortalama ELLE yapılıyor. Tarayıcı yalnızca showModal() ile açılan diyaloğu
   kendisi ortalıyor; modalsız açılınca pencere en tepeye oturup başlığı
   örtüyordu (ölçüldü: 375x812'de modalsız ust=0, modal olsaydı ust=228).
   inset/clamp/min gibi yeni sözdizimi YOK — Android 9 WebView'i bilmiyor
   (bkz. pistix-legacy-webview-css-floor). */
#score-dialog[open] {
  z-index: 60;
  position: fixed;
  top: 50%; left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}
/* Kısa ekran (küçük telefon + klavye açık): ortalanmış pencere sohbet
   kaydının üstüne biniyordu — düğme hâlâ tıklanabiliyordu ama gelen mesajlar
   görünmüyordu. Böyle ekranlarda pencere yukarı sabitlenip kendi içinde
   kayıyor; alttaki pay sohbet paneline ayrılıyor.
   Ölçüldü: 360x460'ta pencere 8-344, sohbet 368'de başlıyor. */
@media (max-height: 560px) {
  #score-dialog[open] {
    top: 6px;
    transform: translateX(-50%);
    max-height: calc(100% - 116px);
    overflow-y: auto;
  }
}
/* ::backdrop modalsız diyalogda hiç çizilmiyor; karartma da zaten istenmiyor
   (örnek tasarımda maç sonu penceresinin arkası açık duruyor). */
#score-dialog .result-head { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: linear-gradient(#5d83ad,#3e638c); border-bottom: 1px solid #315878; }
#score-dialog .result-icon { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; display: grid; place-items: center; border: 2px solid #f4d36c; border-radius: 50%; background: linear-gradient(#f7d06a,#d2941a); color: #43300a; font-size: 1.15rem; box-shadow: 0 2px 5px #0005; }
#score-dialog .result-titles { display: block; min-width: 0; }
#score-dialog .eyebrow { display: block; margin: 0; color: #f3d77d; font-size: .56rem; letter-spacing: .16em; text-align: left; }
#score-dialog h2 { margin: 2px 0 0; color: #fff; font: 700 1.12rem Georgia,serif; text-align: left; }
#score-dialog .result-body { padding: 12px 14px 14px; }
/* Sütun başlıkları 62px; uzun takma adlar orada kırpılıyor. Tam eşleşme
   ("kim kime karşı oynadı") bu satırda, gerekirse alta sararak okunur. */
#score-dialog .result-matchup { margin: 0 0 9px; color: #22405f; font-size: .78rem; font-weight: 800; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
#score-dialog .result-matchup i { color: #6f8aa3; font-style: normal; font-weight: 700; }
#score-dialog .score-table { border: 1px solid #b9c9da; border-radius: 3px; background: #fff; }
#score-dialog .score-row { grid-template-columns: minmax(0,1fr) 62px 62px; padding: 8px 10px; border-bottom: 1px solid #dde5ee; color: #4d6680; font-size: .79rem; }
#score-dialog .score-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#score-dialog .score-row b { color: #22405f; }
#score-dialog .score-row.heading { background: #dfe8f2; color: #5b7590; font-size: .64rem; font-weight: 800; }
#score-dialog .score-row.total { background: #f4f8fc; color: #22405f; font-weight: 900; }
#score-dialog .score-row.total b { color: #b5791a; font-size: 1.05rem; }
/* Maç sonu sonuç satırları. Referans tasarımdaki gibi sade: hüküm (renkli),
   ad, puan. Izgara sabit — uzun takma adlar orta sütunda kırpılıyor, puan
   sütunu asla kaymıyor. */
#score-dialog .result-outcome { border: 1px solid #b9c9da; border-radius: 3px; background: #fff; }
#score-dialog .result-side {
  display: grid; grid-template-columns: 78px minmax(0,1fr) 54px; align-items: center;
  gap: 8px; padding: 13px 12px; border-bottom: 1px solid #dde5ee;
}
#score-dialog .result-side:last-child { border-bottom: 0; }
#score-dialog .result-verdict { font-size: .82rem; font-weight: 800; }
#score-dialog .result-side.won .result-verdict { color: #1e8a4c; }
#score-dialog .result-side.lost .result-verdict { color: #c0392b; }
#score-dialog .result-side.draw .result-verdict { color: #5b7590; }
#score-dialog .result-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4d6680; font-size: .84rem; }
#score-dialog .result-points { color: #b5791a; font-size: 1.18rem; font-weight: 900; text-align: right; }
#score-dialog .primary-button:hover { transform: none; filter: brightness(1.06); }
/* "Rakip yeniden oynamak istiyor" satırı. Sıra göstergesiyle aynı yeşil dil. */
/* Maç sonu puan satırı — toast'ın kalıcı karşılığı. Nötr hâli sakin gri;
   yazıldıysa yeşil, yazılamadıysa kırmızı. "Puanı tekrar yaz" düğmesi yalnızca
   ödül kuyruğa alındığında görünür (bkz. match-points-note.js). */
#score-dialog .result-points-note { margin: 11px 0 0; padding: 7px 9px; border: 1px solid #b9c9da; border-radius: 3px; color: #33475c; background: #eef3f8; font-size: .74rem; font-weight: 700; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
#score-dialog .result-points-note[hidden] { display: none; }
#score-dialog .result-points-note.is-ok { border-color: #3fa46c; color: #1c5637; background: #e2f6ea; }
#score-dialog .result-points-note.is-error { border-color: #d08a8a; color: #7a2020; background: #fbeaea; }
#score-dialog .result-points-retry { margin: 7px auto 0; display: block; }
#score-dialog .result-points-retry[hidden] { display: none; }
#score-dialog .rematch-note { margin: 11px 0 0; padding: 7px 9px; border: 1px solid #3fa46c; border-radius: 3px; color: #1c5637; background: #e2f6ea; font-size: .74rem; font-weight: 700; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
#score-dialog .rematch-note[hidden] { display: none; }
#score-dialog .rematch-note.waiting { border-color: #b9c9da; color: #4d6680; background: #eef3f8; font-weight: 600; }
/* İstek geldiğinde düğme de yeşile döner; gözden kaçmasın diye nabız atar. */
#score-dialog .secondary-button.rematch-wanted { border-color: #2f8f5c; color: #12482c; background: linear-gradient(#c7f2d9,#8fdcb0); animation: rematch-pulse 1.2s ease-in-out infinite; }
@keyframes rematch-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(63,217,128,.55); }
  50% { box-shadow: 0 0 0 5px rgba(63,217,128,0); }
}
@media (prefers-reduced-motion: reduce) {
  #score-dialog .secondary-button.rematch-wanted { animation: none; box-shadow: 0 0 0 2px rgba(63,217,128,.55); }
}
/* Üç düğme 330px'lik pencereye sığmalı. "Skor" kısa olduğu için esnemiyor;
   kalan genişliği Yeniden Oyna ve Lobiye dön paylaşıyor. Sığmazsa alt satıra
   sarıyor — taşıp kırpılmasındansa. */
#score-dialog .result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Üç düğme 292px'lik satıra sığmalı. Yazı tipi ve yatay pay küçültülmezse
   "Yeniden Oyna" ve "Lobiye dön" iki satıra kırılıp düğmeleri iki kat
   yükseltiyordu. nowrap + küçük pay ile üçü de tek satırda kalıyor;
   yine de sığmazsa satır alta sarıyor, taşma olmuyor. */
#score-dialog .result-actions > button { padding: .62rem .5rem; font-size: .82rem; white-space: nowrap; }
#score-dialog #result-score-button { flex: 0 0 auto; padding-left: .85rem; padding-right: .85rem; }
#score-dialog .primary-button { margin-top: 0; flex: 1; width: auto; padding: .7rem 1rem; border: 1px solid #b8860f; border-radius: 3px; background: linear-gradient(#f7d06a,#d2941a); color: #3c2a08; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.5), 0 2px 4px #45627d; }
#score-dialog .secondary-button { flex: 1; padding: .7rem 1rem; border: 1px solid #6f8aa3; border-radius: 3px; background: linear-gradient(#eef3f8,#d7e1ea); color: #315878; font-weight: 900; cursor: pointer; }
#score-dialog .secondary-button:hover { filter: brightness(1.04); }
#score-dialog .secondary-button:disabled { opacity: .65; cursor: default; }

/* ---- Moderasyon cezası penceresi: el sonucu penceresiyle aynı dil,
       başlık şeridi uyarı kırmızısına çevrilir. ---- */
#moderation-dialog , #gameban-dialog  { width: min(330px,90vw); padding: 0; overflow: hidden; border: 5px solid #a4564d; border-radius: 4px; color: #4d6680; background: #eef3f8; box-shadow: 0 14px 38px #000a; }
#moderation-dialog::backdrop, #gameban-dialog::backdrop { background: rgba(50,18,18,.66); backdrop-filter: blur(3px); }
#moderation-dialog .result-head , #gameban-dialog .result-head  { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: linear-gradient(#b1584e,#8c3e36); border-bottom: 1px solid #78312a; }
#moderation-dialog .result-icon , #gameban-dialog .result-icon  { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; display: grid; place-items: center; border: 2px solid #f4d36c; border-radius: 50%; background: linear-gradient(#f7d06a,#d2941a); color: #43300a; font: 900 1.35rem Georgia,serif; box-shadow: 0 2px 5px #0005; }
#moderation-dialog .result-titles , #gameban-dialog .result-titles  { display: block; min-width: 0; }
#moderation-dialog .eyebrow , #gameban-dialog .eyebrow  { display: block; margin: 0; color: #f3d77d; font-size: .56rem; letter-spacing: .16em; text-align: left; }
#moderation-dialog h2 , #gameban-dialog h2  { margin: 2px 0 0; color: #fff; font: 700 1.12rem Georgia,serif; text-align: left; }
#moderation-dialog .result-body , #gameban-dialog .result-body  { padding: 12px 14px 14px; }
#moderation-dialog .moderation-reason , #gameban-dialog .moderation-reason  { margin: 0 0 10px; padding: 9px 11px; border: 1px solid #e2b7b1; border-radius: 3px; background: #fbeeec; color: #8c3e36; font-size: .82rem; font-weight: 800; text-align: center; }
#moderation-dialog .moderation-rows , #gameban-dialog .moderation-rows  { border: 1px solid #b9c9da; border-radius: 3px; background: #fff; }
#moderation-dialog .moderation-row , #gameban-dialog .moderation-row  { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid #dde5ee; color: #4d6680; font-size: .79rem; }
#moderation-dialog .moderation-row:last-child , #gameban-dialog .moderation-row:last-child  { border-bottom: 0; }
#moderation-dialog .moderation-row b , #gameban-dialog .moderation-row b  { color: #22405f; text-align: right; }
#moderation-dialog .moderation-note , #gameban-dialog .moderation-note  { margin: 10px 0 0; color: #5b7590; font-size: .72rem; line-height: 1.45; }
#moderation-dialog .result-actions , #gameban-dialog .result-actions  { display: flex; margin-top: 12px; }
#moderation-dialog .primary-button , #gameban-dialog .primary-button  { margin-top: 0; flex: 1; width: auto; padding: .7rem 1rem; border: 1px solid #b8860f; border-radius: 3px; background: linear-gradient(#f7d06a,#d2941a); color: #3c2a08; font-weight: 900; cursor: pointer; box-shadow: inset 0 1px rgba(255,255,255,.5), 0 2px 4px #45627d; }
#moderation-dialog .primary-button:hover , #gameban-dialog .primary-button:hover  { filter: brightness(1.06); }

/* ---- Yaz Boz penceresi: el sonucu diliyle aynı, el-el geçmiş listeli ---- */
/* #score-dialog ile birebir aynı açık panel teması: önceki sürüm yalnızca
   üstteki genel .score-dialog sınıfını (koyu yeşil) kullanıyordu, ID'ye özel
   asıl "el sonucu" görünümünü (açık panel + mavi başlık) miras almıyordu. */
#writeboard-dialog { width: min(360px,92vw); padding: 0; overflow: hidden; border: 5px solid #4d79a4; border-radius: 4px; color: #4d6680; background: #eef3f8; box-shadow: 0 14px 38px #000a; }
#writeboard-dialog::backdrop { background: rgba(18,32,50,.62); backdrop-filter: blur(3px); }
#writeboard-dialog .result-head { display: flex; align-items: center; gap: 11px; padding: 11px 14px; background: linear-gradient(#5d83ad,#3e638c); border-bottom: 1px solid #315878; }
#writeboard-dialog .result-icon { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; display: grid; place-items: center; border: 2px solid #f4d36c; border-radius: 50%; background: linear-gradient(#f7d06a,#d2941a); color: #43300a; font-size: 1.15rem; box-shadow: 0 2px 5px #0005; }
#writeboard-dialog .result-titles { display: block; min-width: 0; }
#writeboard-dialog .eyebrow { display: block; margin: 0; color: #f3d77d; font-size: .56rem; letter-spacing: .16em; text-align: left; }
#writeboard-dialog h2 { margin: 2px 0 0; color: #fff; font: 700 1.12rem Georgia,serif; text-align: left; }
#writeboard-dialog .result-body { padding: 12px 14px 14px; }
#writeboard-dialog .score-table { border: 1px solid #b9c9da; border-radius: 3px; background: #fff; }
#writeboard-dialog .score-row { grid-template-columns: 60px minmax(0,1fr) minmax(0,1fr); padding: 8px 10px; border-bottom: 1px solid #dde5ee; color: #4d6680; font-size: .79rem; }
#writeboard-dialog .score-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#writeboard-dialog .score-row b { color: #22405f; }
#writeboard-dialog .score-row.heading { background: #dfe8f2; color: #5b7590; font-size: .64rem; font-weight: 800; }
/* Sürmekte olan el: henüz kesinleşmedi, kesinleşmiş el satırlarından ayrılsın. */
#writeboard-dialog .score-row.writeboard-live { color: #6f8aa3; font-style: italic; background: #f7fafd; }
#writeboard-dialog .score-row.writeboard-live b { color: #4d6680; }
#writeboard-dialog .score-row.total { background: #f4f8fc; color: #22405f; font-weight: 900; }
#writeboard-dialog .score-row.total b { color: #b5791a; font-size: 1.05rem; }
#writeboard-dialog .writeboard-table { max-height: 46vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; }
#writeboard-dialog #writeboard-rows { overflow-y: auto; }
#writeboard-dialog #writeboard-rows .score-row:last-child { border-bottom: 0; }
#writeboard-dialog .writeboard-empty { margin: 10px 0 0; color: #5b7590; font-size: .78rem; text-align: center; }
#writeboard-dialog .dialog-close { top: 8px; right: 8px; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.28); color: #fff; }

/* ---- Rozet içi skor + hesap puanı (referans masa düzeni) ---- */
.badge-score { flex: 0 0 auto; min-width: 22px; color: #fff; font-size: 1.15rem; font-weight: 900; text-align: center; text-shadow: 0 1px 2px #0007; }
.badge-score.score-flash, #table-match-score.score-flash, #mobile-match-score.score-flash {
  animation: scoreFlash .55s ease;
  color: #7dffa8;
}
@keyframes scoreFlash {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.player-badge .badge-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; text-align: right; }
.player-badge .badge-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-points { font-style: normal; font-weight: 900; color: #f3d77d; font-size: .92rem; letter-spacing: .02em; }
.player-badge { width: 232px; }
.table-endpoint i, .table-clock i { font-style: normal; font-weight: 900; color: #fff; font-size: .72rem; letter-spacing: .04em; }
.table-endpoint, .table-clock { height: 62px; }

/* Rakibin kartları masada gösterilmez. */
.bot-hand, .bot-hand .card-back { display: none !important; }

@media (orientation: landscape) and (max-height: 520px) {
  .game-screen { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  /* .mobile-table-actions artik akista duran bir grid ogesi; buradaki
     top offseti onu 58px asagi kaydiriyordu, kaldirildi. */
  .mobile-table-actions button { width: 64px !important; height: 34px !important; font-size: 13px !important; }
  #mobile-sound-button, #mobile-lobby-button { top: 38px !important; }
  .table-area { transform: scale(0.92); transform-origin: top center; }
}

/* ── ESKİ WEBVIEW YEDEĞİ (Chrome 69 / Android 9) ───────────────────────────
   Aşağıdaki bloklar, bu dosyanın sonundaki oransal yerleşimin ÇALIŞAMADIĞI
   tarayıcılar içindir. Android 9 emülatöründe ölçüldü: WebView Chrome 69 ve
   clamp(), min(), svh, flex gap, aspect-ratio — hiçbiri yok. Oransal blok
   orada tamamen çöküyordu (başlık 1px, deste 0px, el kartı 226px).

   Bu yüzden iki yerleşim @supports ile BİRBİRİNİ DIŞLAYACAK şekilde ayrıldı;
   ikisi aynı anda asla uygulanmıyor, dolayısıyla birinin diğerini ezmesi
   gerekmiyor. minSdkVersion 23 olduğu sürece bu yedek kalmalı.

   İÇERİK DEĞİŞTİRİLMEDİ: bu, 2026-08-19 öncesindeki mobil yerleşimin
   birebir kendisi (sabit piksel + 700/620 yükseklik katmanları). Yeni bir
   şey eklemeyin — yeni iş dosyanın sonundaki oransal bloğa gider. */
@supports not (height: 1svh) {
  /* Mobil masa yerleşimi: ekran kaymaz, hamburger üstte, sohbet elin altında */
  @media (max-width:760px) {
    .game-screen { position:fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100vh; height:100svh; min-height:0; overflow:hidden; z-index:50; background:#414141; }
    .game-header {
      position:absolute; z-index:40; top:0; left:0; width:100%;
      height: calc(66px + env(safe-area-inset-top, 0px));
      padding: env(safe-area-inset-top, 0px) max(4px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px));
      display:flex; align-items:flex-start; box-sizing:border-box;
      background:linear-gradient(#6591bd,#3f6d9a); border:0; pointer-events:none;
    }
    .game-header #leave-game { display:none !important; }
    .game-header .mobile-hamburger { display:block !important; pointer-events:auto; position:relative; z-index:60; width:38px; height:38px; margin:0 9px 0 0; padding:7px; background:linear-gradient(#fff 0 3px,transparent 3px 10px,#fff 10px 13px,transparent 13px 20px,#fff 20px 23px,transparent 23px); border:0; border-right:1px solid rgba(255,255,255,.8); border-radius:0; }
    .game-header .mobile-hamburger i { display:none !important; }
    .mobile-game-profile {
      position:absolute;
      top: calc(24px + env(safe-area-inset-top, 0px));
      right: max(4px, env(safe-area-inset-right, 0px));
      max-width: min(46vw, 180px);
      height:42px; display:flex; align-items:center; gap:3px; padding-right:4px;
      color:#fff; font:700 12px Arial,sans-serif; text-align:right;
      pointer-events: auto;
      z-index: 60;
    }
    .mobile-game-profile > span:first-child,.mobile-game-profile > b { display:block; line-height:13px; }
    .mobile-game-profile > span:first-child { font-size:14px; }
    .mobile-game-profile > b { display:flex; flex-direction:column; align-items:flex-end; gap:0; font-size:11px; font-style:normal; }
    .mobile-game-profile .mobile-score-line { font-style:normal; font-weight:900; color:#fff; }
    .mobile-game-profile .mobile-score-account { opacity:.9; color:#f3d77d; font-size:10px; }
    .mobile-game-profile #mobile-match-score { color:#7dffa8; }
    /* Zemin eski temadan kalma düz yeşildi (#7c9d70); uygulamadaki diğer bütün
       avatarlar altın gradyan kullanıyor. */
    .mobile-game-avatar { order:3; width:34px; height:34px; margin-left:3px; border:1px solid #e6c768; border-radius:2px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#e2ae37,#89521b); font-size:18px; }
    .game-header .round-info { display:none; }
    .table-action-strip,.table-action-strip *,#table-score-button,#table-menu-button,#table-sound-button { display:none !important; visibility:hidden !important; }
    .table-shell {
      position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; border:8px solid #4d79a4;
      padding-top: calc(42px + env(safe-area-inset-top, 0px));
      box-sizing: border-box;
    }
    .mobile-table-actions {
      position:absolute; z-index:30;
      top: calc(73px + env(safe-area-inset-top, 0px));
      left: max(5px, env(safe-area-inset-left, 0px));
      right: max(5px, env(safe-area-inset-right, 0px));
      height:84px; display:block; pointer-events:none;
    }
    .mobile-table-actions button { position:absolute; width:74px; height:39px; padding:0 3px; border:1px solid #315878; border-radius:2px; color:#fff; background:linear-gradient(#6591bd,#3f6d9a); box-shadow:none; font:700 16px Arial,sans-serif; pointer-events:auto; }
    #mobile-write-button { left:0; top:0; }
    #mobile-sound-button { left:0; top:43px; }
    #mobile-exit-button { right:0; top:0; }
    #mobile-lobby-button { right:0; top:43px; }
    .opponent-zone .player-badge { top:70px; z-index:12; }
    .opponent-zone .score-box { top:92px; z-index:12; }
    .center-zone { top:120px; right:0; bottom:280px; left:0; }
    .table-endpoint,.table-clock { top:31%; bottom:auto; }
    .captured-status.left,.captured-status.right { top:48%; transform:none; z-index:18; }
    .captured-status.left { left:2%; }
    .captured-status.right { right:2%; }
    /* Mobil alt yerleşim: el -> profil -> sohbet */
    .player-hand { bottom:118%; z-index:8; }
    .player-badge.you { bottom:75%; z-index:9; }
    .you-zone .score-box { bottom:75%; z-index:9; }
    .captured-status.left,.captured-status.right { top:65%; }
    .table-chat { left:1%; right:1%; bottom:0; height:20%; min-height:140px; max-height:155px; z-index:20; }
  }

  /* Tek kaynak mobil masa yerleşimi - önceki mobil kuralların tamamını ezer. */
  @media (max-width:760px) {
    .game-screen { position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100vh !important; height:100svh !important; overflow:hidden !important; }
    .table-shell { position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100% !important; overflow:hidden !important; }

    /* Üst menü: solda çerçeveli hamburger + dikey ayraç, sağda ad/puan alt alta
       ve yanlarında avatar. Notch/safe-area ile her telefonda aynı hizada kalır. */
    .game-header {
      position:absolute !important; top:0 !important; right:0 !important; bottom:auto !important; left:0 !important;
      height: calc(58px + env(safe-area-inset-top, 0px)) !important;
      padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)) !important;
      box-sizing: border-box !important;
      background:linear-gradient(#3f6d9a,#2b4f74) !important; border:0 !important;
      border-bottom:1px solid rgba(255,255,255,.34) !important; pointer-events:none !important;
      z-index:100 !important;
    }
    .table-shell { z-index:1 !important; }
    .game-header::after {
      content:'' !important; position:absolute !important;
      left: calc(54px + env(safe-area-inset-left, 0px)) !important;
      top: calc(9px + env(safe-area-inset-top, 0px)) !important;
      bottom:9px !important; width:1px !important; background:rgba(255,255,255,.45) !important;
    }
    .game-header .mobile-hamburger {
      position:absolute !important;
      top: calc(10px + env(safe-area-inset-top, 0px)) !important;
      left: max(8px, env(safe-area-inset-left, 0px)) !important;
      width:38px !important; height:38px !important; margin:0 !important; padding:0 7px !important;
      display:flex !important; flex-direction:column !important; justify-content:center !important; gap:5px !important;
      border:1px solid rgba(255,255,255,.55) !important; border-radius:5px !important;
      background:rgba(255,255,255,.1) !important; box-shadow:none !important;
      pointer-events:auto !important; z-index:60 !important;
    }
    .game-header .mobile-hamburger i { display:block !important; width:100% !important; height:4px !important; margin:0 !important; border-radius:1px !important; background:#fff !important; }
    .mobile-game-profile {
      position:absolute !important;
      top: calc(9px + env(safe-area-inset-top, 0px)) !important;
      right: max(8px, env(safe-area-inset-right, 0px)) !important;
      height:40px !important; max-width:calc(100% - 74px) !important;
      display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-rows:auto auto !important;
      align-items:center !important; column-gap:8px !important; padding:0 !important; text-align:right !important;
      pointer-events: auto !important;
      z-index: 60 !important;
    }
    .mobile-game-profile > span:first-child { grid-column:1 !important; grid-row:1 !important; display:block !important; max-width:100% !important; font-size:15px !important; line-height:19px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
    .mobile-game-profile > b { grid-column:1 !important; grid-row:2 !important; display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:0 !important; font-size:12px !important; line-height:14px !important; font-style:normal !important; white-space:nowrap !important; }
    .mobile-game-profile .mobile-score-line { font-style:normal !important; font-weight:900 !important; color:#fff !important; }
    .mobile-game-profile .mobile-score-account { opacity:.85 !important; font-size:11px !important; color:#f3d77d !important; }
    .mobile-game-profile #mobile-match-score { color:#7dffa8 !important; }
    .mobile-game-avatar { grid-column:2 !important; grid-row:1 / span 2 !important; width:40px !important; height:40px !important; margin:0 !important; border:1px solid rgba(255,255,255,.6) !important; border-radius:6px !important; font-size:20px !important; }

    .table-action-strip,.table-action-strip *,#table-score-button,#table-menu-button,#table-sound-button,#leave-game { display:none !important; visibility:hidden !important; width:0 !important; height:0 !important; }
    .mobile-table-actions {
      position:absolute !important; z-index:35 !important;
      top: calc(68px + env(safe-area-inset-top, 0px)) !important;
      left: max(4px, env(safe-area-inset-left, 0px)) !important;
      right: max(4px, env(safe-area-inset-right, 0px)) !important;
      height:79px !important; display:block !important;
    }
    .mobile-table-actions button { width:72px !important; height:37px !important; margin:0 !important; padding:0 2px !important; appearance:none !important; -webkit-appearance:none !important; -webkit-tap-highlight-color:transparent !important; outline:0 !important; box-shadow:none !important; overflow:hidden !important; white-space:nowrap !important; font-size:15px !important; }
    .mobile-table-actions button:focus,.mobile-table-actions button:focus-visible,.mobile-table-actions button:active { outline:0 !important; box-shadow:none !important; }
    #mobile-write-button,#mobile-exit-button { top:0 !important; }
    #mobile-sound-button,#mobile-lobby-button { top:42px !important; }

    /* Rakip rozeti ve skoru, mobil aksiyon butonlarının arasında ortalanır:
       böylece Çık/Salon butonlarının arkasında hiçbir kutu kalmaz. */
    .opponent-zone { top:0 !important; height:190px !important; pointer-events:none !important; }
    .opponent-zone .player-badge { width:180px !important; top:80px !important; bottom:auto !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; pointer-events:auto !important; cursor:pointer !important; z-index:20 !important; }
    .player-badge { gap:5px !important; padding:2px 7px !important; }
    .player-badge .avatar { width:32px !important; height:32px !important; flex:0 0 32px !important; }
    .badge-score { min-width:20px !important; font-size:1rem !important; }
    .badge-points { font-size:.8rem !important; }
    .player-badge .badge-id b { font-size:.72rem !important; }
    .player-badge span:last-child small { font-size:.55rem !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }

    /* Masanın orta bloğu (deste + bitiş/süre + toplanan kart) tek bir değişkenden
       konumlanır. Değer, destenin görünen ortası rakip rozeti ile elin tam
       ortasına denk gelecek şekilde hesaplanır. */
    .table-shell { --pile-top:max(145px,calc(50% - 157px)); }
    .center-zone { position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; display:block !important; pointer-events:none !important; }
    .pile { height:124px !important; }
    .pile-count { margin-top:3px !important; padding:2px 7px !important; font-size:.6rem !important; }
    .pile-wrap { position:absolute !important; z-index:5 !important; top:var(--pile-top) !important; left:50% !important; transform:translateX(-50%) !important; pointer-events:auto !important; }
    .pisti-burst { top:22% !important; }
    .table-chat-bubble { display:none !important; }
    .table-endpoint,.table-clock { height:40px !important; top:calc(var(--pile-top) + 16px) !important; bottom:auto !important; }
    .table-endpoint b,.table-clock b { font-size:.78rem !important; }
    .captured-status.left,.captured-status.right { top:calc(var(--pile-top) + 74px) !important; bottom:auto !important; transform:none !important; z-index:18 !important; }
    .captured-status.left { left:2% !important; }
    .captured-status.right { right:2% !important; }

    .you-zone { position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100% !important; pointer-events:none !important; }
    .player-hand { position:absolute !important; z-index:8 !important; top:auto !important; bottom:196px !important; left:50% !important; transform:translateX(-50%) !important; margin:0 !important; pointer-events:auto !important; }
    .player-badge.you { width:200px !important; position:absolute !important; z-index:9 !important; top:auto !important; bottom:146px !important; left:50% !important; transform:translateX(-50%) !important; pointer-events:auto !important; cursor:pointer !important; }
    .timer { position:absolute !important; z-index:31 !important; top:auto !important; bottom:139px !important; left:0 !important; right:0 !important; }
    .table-chat { bottom:0 !important; z-index:30 !important; height:136px !important; min-height:136px !important; max-height:136px !important; }
  }

  /* Dar telefonlarda (≤380px) mobil masa ölçüleri küçültülür. */
  @media (max-width:380px) {
    .mobile-table-actions button { width:70px !important; font-size:13px !important; letter-spacing:-.2px !important; }
    .opponent-zone .player-badge { width:150px !important; }
    .player-badge.you { width:180px !important; }
  }

  /* Alçak ekranlarda (≤700px) masa dikeyde sıkıştırılır. */
  @media (max-width:760px) and (max-height:700px) {
    .table-shell { --pile-top:max(140px,min(calc(50% - 132px),calc(100% - 434px))); }
    .pile { height:108px !important; }
    .pile .playing-card,.table-card-back { width:74px !important; height:104px !important; }
    .player-hand { bottom:172px !important; }
    .player-hand .playing-card { width:62px !important; height:88px !important; flex-basis:62px !important; margin-left:-16px !important; }
    .player-hand .playing-card:first-child { margin-left:0 !important; }
    .player-badge.you,.you-zone .score-box { bottom:124px !important; }
    .timer { bottom:118px !important; }
    .table-chat { height:114px !important; min-height:114px !important; max-height:114px !important; }
    .table-chat-log { font-size:13px !important; }
  }

  /* Çok alçak ekranlarda (≤620px) en sıkışık yerleşim. */
  @media (max-width:760px) and (max-height:620px) {
    .table-shell { --pile-top:max(132px,min(calc(50% - 115px),calc(100% - 398px))); }
    .mobile-table-actions { top:62px !important; }
    .opponent-zone .player-badge { top:74px !important; }
    .pile { height:96px !important; }
    .pile .playing-card,.table-card-back { width:66px !important; height:92px !important; }
    .player-hand { bottom:158px !important; }
    .player-hand .playing-card { width:56px !important; height:80px !important; flex-basis:56px !important; margin-left:-15px !important; }
    .player-badge.you,.you-zone .score-box { bottom:108px !important; }
    .timer { bottom:104px !important; }
    .table-chat { height:102px !important; min-height:102px !important; max-height:102px !important; }
  }

  /* Chrome 69 max() ve min() de bilmiyor. --pile-top bir max() tuttugu icin
     top:var(--pile-top) "hesaplanan degerde gecersiz"e dusuyor ve deste
     top:auto ile masanin TEPESINE kaciyordu (Android 9 emulatorunde
     olculdu: deste 8..116, baslikla ic ice). Asagidaki degerler orijinal
     max() ifadelerinin TABANI, yani eski tasarimin garanti ettigi en kucuk
     konum. Ic ice @supports sayesinde bu kurallar yalnizca max() bilmeyen
     tarayicilara gidiyor; max() bilip svh bilmeyenler (Chrome 79-107)
     orijinal env() ve max() degerlerini kullanmaya devam ediyor. */
  /* Klavye acikken: eski yerlesim sabit piksellerle konumlandigi icin alan
     daralinca deste ile el ust uste biniyor (Android 9 emulatorunde olculdu:
     gorunum alani 378px, cakisma 72px). Yazarken masanin ORTASI gizlenip
     sohbete yer aciliyor; el ve rozet yerinde kaliyor. Oransal yerlesimde
     boyle bir kural gerekmiyor, orada satirlar kendiliginden sikisiyor. */
  @media (max-width:760px) and (max-height:560px) {
    .kb-typing .center-zone,
    .kb-typing .table-endpoint,
    .kb-typing .table-clock { display: none !important; }
  }

  @supports not (width: max(1px, 2px)) {
    @media (max-width:760px) {
      .pile-wrap { top: 145px !important; }
      .table-endpoint, .table-clock { top: 161px !important; }
      .game-header { padding: 0 4px !important; }
      .game-header .mobile-hamburger { left: 8px !important; }
      .mobile-game-profile { right: 8px !important; max-width: 46vw !important; }
      .mobile-table-actions { left: 4px !important; right: 4px !important; }
      .player-hand { width: 88vw !important; }
      /* Hamburger cizgileri iki konumlu gradyanla (#fff 0 3px) ciziliyor;
         o sozdizimi Chrome 72+ ve 69'da arka plan tamamen dusup bos bir
         kutu birakiyordu. Eski yolda cizgiler <i> ogeleriyle ciziliyor. */
      .game-header .mobile-hamburger { display: block !important; background: rgba(255,255,255,.1) !important; padding: 8px 7px !important; }
      /* flex:0 0 auto sart: Chrome 69 flex gap bilmedigi icin cizgiler
         margin ile ayriliyor ve 24px'lik ic yuksekligi margin'ler tamamen
         yiyip cubuklari 0px'e sikistiriyordu (olculdu: height 0px, bos kutu). */
      .game-header .mobile-hamburger i { display: block !important; width: 22px !important; height: 3px !important; margin: 0 0 5px !important; border-radius: 1px !important; background: #fff !important; }
    }
    @media (max-width:760px) and (max-height:700px) {
      .pile-wrap { top: 140px !important; }
      .table-endpoint, .table-clock { top: 156px !important; }
    }
    @media (max-width:760px) and (max-height:620px) {
      .pile-wrap { top: 132px !important; }
      .table-endpoint, .table-clock { top: 148px !important; }
    }
  }
}

/* Oransal yerleşim YALNIZCA clamp()/min()/svh anlayan tarayıcılarda. Koşulu
   gevşetmeyin: Chrome 69 (Android 9 WebView) bunların hiçbirini bilmiyor ve
   var() içindeki geçersiz fonksiyon "hesaplanan değerde geçersiz"e düşüp
   özelliği auto yapıyor — masa orada tamamen dağılıyordu. O tarayıcılar
   yukarıdaki @supports not bloğundaki eski sabit piksel yerleşimini alıyor. */
@supports (height: 1svh) and (width: clamp(1px, 2vw, 3px)) {
  /* ── Mobil masa yerleşimi (tek kaynak) ──────────────────────────────────────
     ÖNCEDEN: her parça sabit piksel offset'lerle konumlanıyordu (el bottom:196px,
     sohbet height:136px, deste top:145px…) ve yalnızca 700/620 yükseklik
     kırılımı vardı. Görünüm alanı bunun altına inince parçalar üst üste
     biniyordu — 360x480'de deste eli 18px, 360x420'de (360x720 telefonda klavye
     açıkken) 78px örtüyordu.

     ŞİMDİ: .table-shell dikey bir grid. Sıralar birbirinin yerini alamaz, artan
     yeri orta sıra yutar, kart ölçüleri clamp() ile hem genişliğe hem yüksekliğe
     bağlı. Yükseklik kırılımına gerek kalmadı.

     BU BLOK DOSYANIN SONUNDA DURMALI. Eski hâli 281 !important taşıyordu ve
     sebebi buydu: .player-badge{width:232px} ve .table-endpoint{height:62px}
}
   gibi kapsamsız kurallar mobil bloktan SONRA geliyordu, eşit özgüllükte
   kaynak sırası onları kazandırıyordu. Blok en sona alınınca tek bir
   !important gerekmiyor. Araya kural eklemeyin.

   SİSTEM ÇUBUKLARI: --ins-* değişkenleri :root'ta env(safe-area-inset-*) ile
   native katmanın yazdığı --ins-*-raw değerinin max()'ı. Dolgu yalnızca
   .game-screen'de bir kez uygulanıyor. Android 15 edge-to-edge'i zorunlu
   kıldığı için şart: WebView durum çubuğunun ve gezinme çubuğunun altına
   çiziliyordu, sohbet satırı gezinme çubuğunun altında kalınca ona dokunmak
   uygulamayı arka plana atıyordu. */
@media (max-width:760px) {
  /* display YAZILMAZ: .screen{display:none} / .screen.active{display:flex}
     ekran anahtarlamasını yapıyor ve bu blok daha sonra geldiği için buraya
     konacak bir display:flex oyun ekranını her zaman görünür bırakırdı. */
  .game-screen {
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:50;
    width:100%; max-width:100%; height:var(--vh-avail); min-height:0;
    flex-direction:column;
    padding:var(--ins-top) var(--ins-right) var(--ins-bottom) var(--ins-left);
    box-sizing:border-box; overflow:hidden;
    --hdr-h:clamp(50px, 8svh, 58px);
  }

  /* Üst menü: solda çerçeveli hamburger + dikey ayraç, sağda ad/puan alt alta
     ve yanında avatar. Akışta duran bir satır — safe-area dolgusu
     .game-screen'de olduğu için çocukları düz piksel offset kullanıyor. */
  .game-header {
    position:relative; flex:0 0 auto;
    width:100%; height:var(--hdr-h); padding:0 8px; margin:0;
    box-sizing:border-box;
    background:linear-gradient(#3f6d9a,#2b4f74); border:0;
    border-bottom:1px solid rgba(255,255,255,.34);
    pointer-events:none; z-index:100;
  }
  .game-header #leave-game, .game-header .round-info, .game-header .deck-info { display:none; }
  .game-header::after {
    content:""; position:absolute;
    left:54px; top:9px; bottom:9px; width:1px; background:rgba(255,255,255,.45);
  }
  .game-header .mobile-hamburger {
    position:absolute; top:50%; left:8px; transform:translateY(-50%);
    width:38px; height:38px; margin:0; padding:0 7px;
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    border:1px solid rgba(255,255,255,.55); border-radius:5px;
    background:rgba(255,255,255,.1); box-shadow:none;
    pointer-events:auto; z-index:60;
  }
  .game-header .mobile-hamburger i { display:block; width:100%; height:4px; margin:0; border-radius:1px; background:#fff; }
  .mobile-game-profile {
    position:absolute; top:50%; right:8px; transform:translateY(-50%);
    height:40px; max-width:calc(100% - 74px);
    display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto;
    align-items:center; column-gap:8px; padding:0; text-align:right;
    pointer-events:auto; z-index:60;
  }
  .mobile-game-profile > span:first-child { grid-column:1; grid-row:1; display:block; max-width:100%; font-size:15px; line-height:19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-game-profile > b { grid-column:1; grid-row:2; display:flex; flex-direction:column; align-items:flex-end; gap:0; font-size:12px; line-height:14px; font-style:normal; white-space:nowrap; }
  .mobile-game-profile .mobile-score-line { font-style:normal; font-weight:900; color:#fff; }
  .mobile-game-profile .mobile-score-account { opacity:.85; font-size:11px; color:#f3d77d; }
  .mobile-game-profile #mobile-match-score { color:#7dffa8; }
  .mobile-game-avatar { grid-column:2; grid-row:1 / span 2; width:40px; height:40px; margin:0; border:1px solid rgba(255,255,255,.6); border-radius:6px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#e2ae37,#89521b); font-size:20px; }

  /* Masa: dört satırlık grid. 1) rakip + masa düğmeleri 2) esnek orta (deste)
     3) el + rozet + süre çubuğu 4) sohbet. Ekran kısaldığında yalnızca orta
     satır küçülür; hiçbir satır bir diğerinin üstüne binemez. */
  .table-shell {
    position:relative; flex:1 1 auto;
    width:100%; max-width:100%; min-width:0; min-height:0; height:auto;
    display:grid; grid-template-columns:100%;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    padding:0; overflow:hidden;
    /* Kart ve düğme ölçüleri iki eksene birden bağlı: dar telefonda genişlik,
       alçak telefonda yükseklik sınırlıyor. 700/620 kırılımlarının yerini
       bu üç satır aldı. */
    --hand-cw:clamp(50px, min(20vw, 11svh), 80px);
    --pile-cw:clamp(58px, min(24vw, 13svh), 96px);
    --act-h:clamp(30px, 5.2svh, 37px);
    --card-ratio:1.389;
  }

  /* — 1. satır: masa düğmeleri + rakip rozeti aynı hücrede — */
  .table-action-strip, .table-action-strip *, #table-score-button, #table-menu-button, #table-sound-button, #leave-game {
    display:none; visibility:hidden; width:0; height:0;
  }
  .mobile-table-actions {
    grid-row:1; grid-column:1; position:relative; align-self:start;
    z-index:35; margin:6px 4px 0;
    height:calc(2 * var(--act-h) + 5px); display:block; pointer-events:none;
  }
  .mobile-table-actions button {
    position:absolute; width:clamp(64px, 19vw, 72px); height:var(--act-h);
    margin:0; padding:0 2px;
    appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent;
    outline:0; box-shadow:none; overflow:hidden; white-space:nowrap;
    border:1px solid #315878; border-radius:2px;
    color:#fff; background:linear-gradient(#6591bd,#3f6d9a);
    font:700 clamp(13px, 3.9vw, 15px) Arial,sans-serif; letter-spacing:-.2px;
    pointer-events:auto;
  }
  .mobile-table-actions button:focus, .mobile-table-actions button:focus-visible, .mobile-table-actions button:active { outline:0; box-shadow:none; }
  #mobile-write-button { left:0; top:0; }
  #mobile-exit-button { right:0; top:0; }
  #mobile-sound-button { left:0; top:calc(var(--act-h) + 5px); }
  #mobile-lobby-button { right:0; top:calc(var(--act-h) + 5px); }

  /* Rakip rozeti masa düğmelerinin ARASINA ortalanır. Genişliği iki düğme
     sütununun arasına kilitli — 360x420'de rozetin düğmelere binmesi böyle
     yapısal olarak imkânsız hâle geliyor. */
  .opponent-zone {
    grid-row:1; grid-column:1; position:relative;
    left:auto; top:auto; bottom:auto; width:100%; height:auto;
    min-height:calc(2 * var(--act-h) + 17px);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .opponent-zone .player-badge {
    position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none;
    width:min(clamp(150px, 42vw, 180px), calc(100% - 2 * clamp(64px, 19vw, 72px) - 24px));
    margin:0; pointer-events:auto; cursor:pointer; z-index:20;
  }
  .table-shell .player-badge { gap:5px; padding:2px 7px; height:auto; min-height:41px; border-radius:0; }
  .table-shell .player-badge .avatar { width:32px; height:32px; flex:0 0 32px; }
  .table-shell .badge-score { min-width:20px; font-size:1rem; }
  .table-shell .badge-points { font-size:.8rem; }
  .table-shell .player-badge .badge-id b { font-size:.72rem; }
  .table-shell .player-badge span:last-child small { font-size:.55rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* — 2. satır: deste. Kalan bütün yeri bu satır yutar. Deste ideal ölçüsünü
       alamıyorsa satıra sığacak kadar KÜÇÜLÜR; eski yerleşimin asıl hatası
       taşıp alttaki elin üstüne binmesiydi. — */
  .center-zone {
    grid-row:2; grid-column:1; position:relative;
    top:auto; right:auto; bottom:auto; left:auto; width:100%; min-height:0;
    display:grid; place-items:center; overflow:hidden;
    padding:4px 0; pointer-events:none;
  }
  .pile-wrap {
    position:relative; z-index:5; display:grid; place-items:center;
    height:min(calc(var(--pile-cw) * var(--card-ratio)), 100%);
    aspect-ratio:175 / 243; pointer-events:auto;
  }
  .pile { width:100%; height:100%; min-width:0; }
  /* width:auto KULLANMAYIN. Bu iki öğe de position:absolute, yani genişlikleri
     içeriğe göre daralıyor: .table-card-back boş bir <span> olduğu için 11px'lik
     beyaz bir şeride düşüyordu (yalnızca 3px'lik kenarlıkları kalıyordu),
     atılan kart ise 106px'e büyüyüp 94px'lik kabına taşıyordu. Ölçüler kabın
     yüzdesinden geliyor; kap zaten doğru en-boy oranında. */
  .pile .playing-card { width:100%; height:100%; }
  .table-card-back { width:88%; height:88%; }
  .pisti-burst { top:50%; }

  /* Rakibin baloncuğu (sohbet mesajı + "Kartları topladım"). Eski mobil
     yerleşimde `display:none !important` ile kapalıydı; blok dosya sonuna
     alınınca `!important` kalktı ve `.table-chat-bubble.show` (0,2,0) düz
     kuralı (0,1,0) yendiği için baloncuk geri açılıp destenin üstüne düştü.
     Gizlemek çözüm değil — "Kartları topladım" sohbet kaydına yazılmıyor,
     yalnızca burada görünüyor. Bu yüzden orta bandın TEPESİNE alındı ve
     kuyruğu yukarı, yani konuşan rakibe çevrildi. Deste bandın ortasında
     durduğu için ikisi karşılaşmıyor. */
  .table-chat-bubble {
    position:absolute; z-index:22;
    top:4px; left:50%; right:auto; bottom:auto;
    transform:translateX(-50%);
    width:max-content; max-width:min(78%, 240px);
    text-align:center; pointer-events:none;
  }
  .table-chat-bubble::after {
    top:-7px; bottom:auto; left:50%; margin-left:-6px;
    border-right:0; border-bottom:0;
    border-left:1px solid #315878; border-top:1px solid #315878;
  }
  /* Alçak ekranda orta bant baloncuğa yer bırakmıyor: deste yukarı çıkıp
     baloncuğa değiyor (360x520'de ölçüldü, 360x546'da yalnızca 3px açık
     kalıyor). Baloncuk 2,2 saniyelik bir süs; masa okunabilirliği ondan
     önemli, o yüzden dar durumda hiç çizilmiyor. Sohbet mesajları zaten
     alttaki sohbet kaydına da düşüyor (showChat -> appendTableChat). */
  @media (max-height:600px) {
    .table-chat-bubble.show { display:none; }
  }

  /* Bitiş puanı / süre kutuları desteyle aynı hücrede, iki yana yaslı. */
  .table-endpoint, .table-clock {
    grid-row:2; grid-column:1; position:relative;
    left:auto; right:auto; top:auto; bottom:auto;
    align-self:center; width:61px; height:40px; margin:0 4px; z-index:6;
  }
  .table-endpoint { justify-self:start; }
  .table-clock { justify-self:end; }
  .table-endpoint b, .table-clock b { font-size:.78rem; }

  /* — 3. satır: el → rozet → süre çubuğu, alt alta — */
  .you-zone {
    grid-row:3; grid-column:1; position:relative;
    left:auto; top:auto; bottom:auto; width:100%; height:auto;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:2px 0 4px; pointer-events:none;
  }
  .player-hand {
    position:relative; align-self:center; z-index:8;
    left:auto; right:auto; top:auto; bottom:auto; transform:none;
    margin:0; padding:0; width:auto; min-width:0; pointer-events:auto;
    /* min-height ŞART: el boşaldığında (son kart atılıp yenileri dağıtılana
       kadar) bu satır 109px'den 0'a düşüyordu. Grid'in esnek orta satırı o
       boşluğu yutunca deste ve BİTİŞ/SÜRE kutuları 54px aşağı kayıp geri
       zıplıyordu — "kart atarken aşağı kayıyor" şikâyeti buydu. Kart
       yüksekliği kadar yer ayrılınca satır hiç küçülmüyor. */
    min-height:calc(var(--hand-cw) * var(--card-ratio));
  }
  .player-hand .playing-card, .player-hand .card-back {
    width:var(--hand-cw); height:auto; flex-basis:var(--hand-cw);
    margin-left:calc(var(--hand-cw) * -.24);
  }
  .player-hand .playing-card:first-child { margin-left:0; }
  .player-badge.you {
    position:relative; left:auto; top:auto; bottom:auto; transform:none;
    width:clamp(180px, 52vw, 200px); margin:0; z-index:9;
    pointer-events:auto; cursor:pointer;
  }
  .table-shell .timer { position:relative; left:auto; right:auto; bottom:auto; width:100%; height:3px; flex:0 0 3px; z-index:31; }

  /* — 4. satır: sohbet. Artık gezinme çubuğunun altında kalmıyor:
       --ins-bottom dolgusu .game-screen'de. — */
  .table-chat {
    grid-row:4; grid-column:1; position:relative;
    left:auto; right:auto; bottom:auto; top:auto;
    width:auto; margin:0; z-index:30;
    height:clamp(84px, 15svh, 136px); min-height:0; max-height:none;
    display:flex; flex-direction:column;
  }
  .table-chat-log { min-height:0; font-size:clamp(13px, 3.7vw, 14px); }
  .table-chat form { height:clamp(30px, 5svh, 36px); }
  /* 16px altı yazı boyutu odaklanınca sayfayı yakınlaştırıyor (iOS Safari,
     bazı Android tarayıcıları) — masa o zoom'dan geri dönemiyordu. */
  #table-chat-input { font-size:16px; }

  /* Klavye açıkken masanın üst satırı yerini sohbete bırakır. Native tarafta
     WebView gerçekten küçülüyor (MainActivity IME inset'ini alt paya ekliyor);
     tarayıcıda düzen görünüm alanı küçülmediği için --kb-h devreye giriyor.
     Skor/Çık/Sessiz/Salon zaten hamburger menüsünde de var. */
  .kb-open .mobile-table-actions { display:none; }
  .kb-open .opponent-zone { display:none; }
  .kb-open .table-endpoint, .kb-open .table-clock { visibility:hidden; }
  .kb-open .table-chat { height:auto; min-height:104px; }
}

/* kb-typing: yalnızca alan gerçekten daraldığında kb-open ile aynı sıkışık
   kip. Android 14 ve altında pencere adjustResize ile küçülüyor ama ne ime()
   inset'i ne visualViewport farkı oluştuğu için kb-open tetiklenmiyor;
   sohbete odaklanmak burayı devreye sokuyor. Yükseklik koşulu şart, yoksa
   fiziksel klavyeli geniş ekranda masa boş yere gizlenirdi. */
@media (max-width:760px) and (max-height:560px) {
  .kb-typing .mobile-table-actions { display:none; }
  .kb-typing .opponent-zone { display:none; }
  .kb-typing .table-endpoint, .kb-typing .table-clock { visibility:hidden; }
  .kb-typing .table-chat { height:auto; min-height:104px; }
}

/* ── Kaydırarak kart atma ───────────────────────────────────────────────────
   Dokunuşun YANINA eklendi (src/game/hand-drag.js): kısa dokunuş eskisi gibi
   kartı oynatıyor, kartı masaya doğru sürüklemek de aynı işi yapıyor.

   Bu blok yukarıdaki iki yerleşimden de bağımsız — yalnızca transform,
   outline, gölge ve geçiş var; hiçbiri ölçü ya da konum belirlemiyor. Bu
   yüzden @supports bloklarının dışında ve onlardan sonra durabiliyor.
   Chrome 69 uyumu için `inset` kısayolu yok, uzun yazım kullanılıyor. */

/* touch-action:none olmadan tarayıcı parmağı sayfa kaydırma sanıp
   pointermove'ları kesiyor ve sürükleme yarıda kalıyor. */
.player-hand .playing-card { touch-action: none; }

.player-hand .playing-card.dragging {
  transition: none;                 /* geçiş açık kalınca kart parmağın gerisinde sürükleniyordu */
  cursor: grabbing;
  filter: brightness(1.06);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .45);
}
/* Parmak bırakılsa kart atılacak durumdayken altın çerçeve. */
.player-hand .playing-card.will-play {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
}
/* Sürükleme sürerken hedef belli olsun: ortadaki deste kesikli çerçeveye giriyor. */
.dragging-card .pile-wrap::before {
  content: "";
  position: absolute;
  top: -12px; right: -12px; bottom: -12px; left: -12px;
  border: 2px dashed rgba(243, 185, 67, .75);
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}

/* ── Bekleme odası: koltuktan oyuncu çıkarma düğmesi ────────────────────────
   Yalnızca masa sahibinin ekranında çiziliyor (bkz. online-room-ui.js).
   Chrome 69 uyumu için `inset` kısayolu yok, uzun yazım. */
.room-seat { position: relative; }
.seat-kick {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #7d2b2b;
  border-radius: 50%;
  background: #b03a3a;
  color: #fff;
  font: 700 1rem/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.seat-kick:disabled { opacity: .45; cursor: default; }

/* ── Bekleme odası: 4 kişilik masada koltuk (eş) seçimi ─────────────────────
   Masa gerçekten masa gibi çiziliyor: ortada yeşil çuha, koltuklar dört
   yanında. Yerler MUTLAK (alt/sol/üst/sağ = koltuk 0/1/2/3), böylece karşıya
   geçmek ekranda gerçekten bir yer değiştirme oluyor. Karşılıklı oturanlar eş
   (engine.js teamOf), yani düzenin kendisi takımı anlatıyor.
   Bkz. src/game/online-room-ui.js renderSeatPicker.

   Chrome 69 tabanı: grid ve `grid-gap` destekleniyor (asıl eksik olan FLEX
   gap, o Chrome 84'te geldi) — bu yüzden yerleşim bilerek grid. */
/* Masanın ortasını açan şey orta SÜTUN: `sol` ile `sag` onun iki yanında, arada
   içerik olmadığı için sütun `auto` olamaz (sıfıra iner ve yan koltuklar
   birbirine yapışır). Sabit ölçü bu yüzden sütunda.

   Orta SATIR ise `auto` OLMAK ZORUNDA — ve bir süre öyle değildi: satıra sabit
   44px (mobilde 26px) verilmişti. Oysa `sol`/`sag` o satırın İÇİNDE ve ~62px
   boyunda; sabit yükseklik satırı içeriğinden küçük yapıyor, align-items:center
   de kartları iki yana taşırıyordu. Ölçüldü (375px): satır 26px, kartlar 62px,
   yan koltuklar üstteki ve alttaki kartın 14px ÜZERİNE biniyordu — dört koltuk
   birbirine yapışık görünüyordu. Satır, yan koltuklara göre boyutlanmalı;
   dikey nefes payı grid-gap'ten gelir. */
.seat-board {
  display: grid;
  grid-template-columns: auto 76px auto;
  grid-template-rows: auto auto auto;
  grid-template-areas: ".  ust  ." "sol orta sag" ".  alt  .";
  grid-gap: 10px;
  justify-items: center;
  align-items: center;
}
.seat-pos-ust { grid-area: ust; }
.seat-pos-sol { grid-area: sol; }
.seat-pos-sag { grid-area: sag; }
.seat-pos-alt { grid-area: alt; }
/* Ayrıcalık rozetleri koltuk kartının ORTASINDA: avatarla adın arasında.
   VIP/koruma/artırma durumu profiles/$uid'den okunuyor (oda kaydında yok) —
   bkz. src/game/online-room-ui.js appendSeatPerks.
   `mini` sınıfı bilerek: CSS ipucu balonunu o kapatıyor (masa overflow:auto
   olduğu için balon kırpılırdı), yerine tarayıcının title ipucu çalışıyor. */
.seat-perks { display: flex; align-items: center; justify-content: center; margin: 3px 0 1px; }
.room-table .seat-perks .perk-badge.mini { width: 17px; height: 17px; margin: 0 2px; }
.room-table .seat-perks .perk-badge.mini svg { width: 10px; height: 10px; }
.room-table .seat-board .room-seat { width: 104px; max-width: none; }
/* Boş koltuk = OYNA düğmesi. Mavi koltuk paneli duruyor, düğme onun içinde:
   masaya bakan oyuncu nereye oturabileceğini tek bakışta görüyor. */
.room-table .seat-play {
  display: block; width: 100%; margin: 2px 0 4px; padding: 8px 4px;
  border: 1px solid #1f6b3f; background: linear-gradient(#4fbf6a, #2f8f47);
  color: #fff; font-size: .74rem; font-weight: 900; letter-spacing: .05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); box-shadow: 0 2px 4px rgba(20, 45, 70, .5);
}
.room-table .seat-slot-open { cursor: pointer; }
.room-table .seat-slot-open:hover, .room-table .seat-slot-open:focus { border-color: #f4d36c; outline: none; }
.room-table .seat-slot-open:hover .seat-play, .room-table .seat-slot-open:focus .seat-play {
  background: linear-gradient(#68da84, #3aa456);
}
.room-table .seat-slot-mine { border-color: #f4d36c; box-shadow: 0 0 0 1px #f4d36c, 0 2px 4px #45627d; }
/* Seçici kendi koltuğumu da çiziyor; alttaki sabit kart aynı kişiyi ikinci kez
   göstermesin. .seat kuralı display:flex verdiği için UA'nın [hidden] kuralı
   tek başına yetmiyor — gizleme buradan. */
.room-table .your-seat[hidden] { display: none; }
/* Dar ekran: üç sütun yan yana durmak zorunda, sarmak masayı masa olmaktan
   çıkarır. 360px'lik eski Android'lerde de taşmasın diye iki kademe. */
@media (max-width: 560px) {
  .room-table .seat-board { grid-template-columns: auto 58px auto; grid-gap: 8px; }
  .room-table .seat-board .room-seat { width: 96px; }
  .room-table .seat-play { padding: 7px 4px; font-size: .7rem; }
}
@media (max-width: 380px) {
  .room-table .seat-board { grid-template-columns: auto 46px auto; grid-gap: 6px; }
  .room-table .seat-board .room-seat { width: 88px; padding: 5px 3px; }
}

/* --- Yönetici duyurusu --------------------------------------------------- */
/* Admin panelinden yayınlanan tek satırlık duyuru. Salonlar ve lobi ekranında
   görünür; oyuncu kapatınca o duyuru bir daha çıkmaz (kapatma kaydı duyurunun
   kimliğine bağlı, yeni duyuru yine görünür). */
.app-announcement { display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  padding: 9px 12px; border: 1px solid #b8860f; border-radius: 3px;
  background: linear-gradient(#f7d06a, #e0a92a); color: #3c2a08;
  font-size: .85rem; font-weight: 700; line-height: 1.35; }
.app-announcement[hidden] { display: none; }
.app-announcement-text { flex: 1; min-width: 0; word-break: break-word; }
.app-announcement-close { flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  border: 1px solid rgba(60, 42, 8, .35); border-radius: 3px;
  background: rgba(255, 255, 255, .35); color: #3c2a08;
  font-size: 1.05rem; font-weight: 900; line-height: 1; cursor: pointer; }
.app-announcement-close:hover { background: rgba(255, 255, 255, .6); }