/* ============================================================================
   KELİME TÜRETME OYUNU — style.css
   ----------------------------------------------------------------------------
   Tasarım dili: "Kelime taşları" — her harf, elle dizilmiş bir Scrabble/oyun
   taşı gibi ayrı ayrı render edilir (bkz. client.js -> .word-letter). Palet,
   index.html'de zaten tanımlı olan #6C5CE7 mor temasının üzerine kurulu; can
   kaybı için sıcak mercan, bonus/uyarı için amber, "sıra sende" anları için
   nane yeşili kullanılır.
   Mobil öncelikli: tüm ekranlar 100dvh + safe-area destekli, max 480px
   genişlikte ortalanmış tek sütun.
============================================================================ */

/* ----------------------------------------------------------------------
   1) TASARIM TOKENLARI (CSS DEĞİŞKENLERİ)
---------------------------------------------------------------------- */
:root {
  /* Renkler */
  --bg-deep: #150F28;
  --bg-deep-2: #1E1638;
  --bg-card: #251C43;
  --bg-card-soft: #2C2250;
  --bg-elevated: #342961;

  --primary: #6C5CE7;
  --primary-light: #8B7FF0;
  --primary-dim: #4B3FA8;

  --accent-mint: #3FDDBF;
  --accent-mint-dim: #1F8E7C;
  --accent-amber: #FFC857;
  --accent-amber-dim: #C99321;
  --accent-coral: #FF6B6B;
  --accent-coral-dim: #C64545;

  --text-primary: #F5F3FF;
  --text-muted: #ABA1D6;
  --text-faint: #746A9C;

  --border-soft: rgba(255, 255, 255, 0.08);
  --shadow-color: rgba(10, 6, 26, 0.55);

  /* Tipografi */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /* Yerleşim */
  --max-width: 480px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Geniş (masaüstü) ekranlarda ana ekranı kademeli olarak büyüt — telefon/tablet
   genişliği (480px) aynı kalır, sadece gerçekten boş kalan geniş ekranlarda
   ana kart genişler. Her kademe, kenar reklam alanlarıyla (bkz. .ad-sidebar)
   asla çakışmayacak şekilde hesaplanmıştır. */
@media (min-width: 768px) {
  :root { --max-width: 560px; }
}
@media (min-width: 1100px) {
  :root { --max-width: 680px; }
}
@media (min-width: 1440px) {
  :root { --max-width: 780px; }
}
@media (min-width: 1800px) {
  :root { --max-width: 960px; }
}

/* ----------------------------------------------------------------------
   2) RESET & TEMEL
---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: radial-gradient(ellipse 120% 80% at 50% -10%, #2A2050 0%, var(--bg-deep) 55%);
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* İnce yıldız tozu dokusu + iki dev, çok soluk "nebula" lekesi — tüm gece
   gökyüzü zemininde hafifçe tekrar eder. Nebula lekeleri marka renklerinden
   (mint/amber) ama o kadar soluk (%3-4 opaklık) ki DİKKAT DAĞITMAZ — oyun
   ekranında bile (menü ekranlarındaki daha belirgin blob-float dekoru
   BİLİNÇLİ olarak sadece menülerde kalıyor, bkz. #screen-*::before/after).
   Tüm katman çok yavaş (55sn) hafifçe kayar — sabit bir gökyüzü yerine
   canlı ama sakin bir izlenim verir. */
body::before {
  content: "";
  position: fixed;
  inset: -5%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1.4px 1.4px at 15% 25%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 75% 15%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.6px 1.6px at 45% 55%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.1px 1.1px at 90% 70%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 25% 85%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 35%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(38% 30% at 20% 20%, rgba(63, 221, 191, 0.05), transparent 70%),
    radial-gradient(42% 34% at 82% 75%, rgba(255, 200, 87, 0.045), transparent 70%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
  background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, auto, auto;
  animation: bg-drift 55s ease-in-out infinite alternate;
  will-change: transform;
}

/* İkinci, bağımsız bir yıldız katmanı — ilkinden farklı konum/boyutlarla ve
   kendi parıltı ritmiyle, tüm gökyüzü tek bir nefeste değil "organik"
   pırıldıyormuş hissi verir. */
body::after {
  content: "";
  position: fixed;
  inset: -5%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.3px 1.3px at 35% 12%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 8% 62%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 82%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 38%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(1.4px 1.4px at 52% 45%, rgba(255, 255, 255, 0.75), transparent 60%);
  background-repeat: repeat;
  background-size: 260px 260px;
  animation: bg-twinkle 6s ease-in-out infinite;
}

@keyframes bg-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-1.2%, 1%, 0) scale(1.02); }
}

@keyframes bg-twinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.65; }
}

button, input {
  font-family: inherit;
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

input {
  -webkit-appearance: none;
  appearance: none;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent-mint);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.hidden { display: none !important; }

/* ----------------------------------------------------------------------
   3) UYGULAMA İSKELETİ / EKRAN GEÇİŞLERİ
---------------------------------------------------------------------- */
#app {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  min-height: 100dvh;
  margin: 0 auto;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overflow: hidden;
}

/* SEO/içerik bölümü (#site-content) — #app'in DIŞINDA, doğal sayfa akışında
   yer alır (bkz. index.html'deki not). #app tam olarak bir ekran
   yüksekliği (100dvh) kapladığı için bu bölüm normalde sadece aşağı
   scroll edilince görünür; oyunun kendi görünümünü/akışını HİÇ etkilemez. */
.site-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px 20px calc(48px + var(--safe-bottom));
  padding-left: calc(20px + var(--safe-left));
  padding-right: calc(20px + var(--safe-right));
  color: var(--text-muted);
  line-height: 1.6;
}
.site-content-section { margin-bottom: 34px; }
.site-content-section:last-child { margin-bottom: 0; }
.site-content h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.site-content h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--text-primary);
  margin: 20px 0 8px;
}
.site-content p { margin: 0 0 4px; font-size: 0.92rem; }
.faq-item { margin-bottom: 18px; }
.faq-item h3 { margin-top: 0; margin-bottom: 6px; font-size: 0.96rem; color: var(--accent-mint); }

.screen {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
}

.screen.active {
  display: flex;
  animation: screen-in 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Google AdSense — kenar boşluğu reklamları. Sadece #app (480px) etrafında
   yeterli boş alan olan geniş ekranlarda gösterilir; boşken (ins henüz
   basılmadıysa) otomatik gizlenir, mobilde hiç yer kaplamaz. */
.ad-sidebar {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  max-height: 600px;
  z-index: 2;
}
.ad-sidebar-left { left: max(12px, calc(50% - var(--max-width) / 2 - 316px)); }
.ad-sidebar-right { right: max(12px, calc(50% - var(--max-width) / 2 - 316px)); }

@media (min-width: 1440px) {
  /* Google AdSense politikası: reklamlar sadece gerçek içeriğin olduğu
     ekranda (oyun ekranı) gösterilebilir — bkz. client.js
     updateAdSidebarVisibility(). Giriş/lobi/profil gibi ekranlarda .ad-
     sidebar-eligible sınıfı hiç eklenmez, dolayısıyla boş olsa bile
     görünmez. */
  .ad-sidebar.ad-sidebar-eligible:not(:empty) { display: block; }
}

.ad-gameover-slot {
  width: 100%;
  margin-top: 12px;
}
.ad-gameover-slot:empty { display: none; }

/* ----------------------------------------------------------------------
   MASKOT "BEHLÜL" — lobide/oyunda dolaşan sevimli kedi
---------------------------------------------------------------------- */
.mascot-cat {
  position: fixed;
  left: 0;
  bottom: calc(var(--safe-bottom) + 14px);
  z-index: 6;
  pointer-events: none;
  transition: transform 1.7s cubic-bezier(0.45, 0, 0.55, 1);
  will-change: transform;
}
.mascot-cat.hidden { display: none; }

/* Oyun ekranında: masanın İÇİNDE dolaşır, ÖNDE görünür (metinlerin arkasında
   gizlenmez) ama dikey konumu client.js (getMascotTableTop) tarafından canlı
   ölçülerek kelime/timer bloğunun ASLA üzerine gelmeyecek şekilde ayarlanır. */
.mascot-cat.mascot-cat-on-table {
  position: absolute;
  bottom: auto;
  top: 60%;
  z-index: 6;
  transition: transform 1.7s cubic-bezier(0.45, 0, 0.55, 1);
}

.mascot-cat-body {
  position: relative;
  display: inline-block;
  pointer-events: auto;
  background: none;
  border: none;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  /* Sürükleme sırasında tarayıcının kendi kaydırma/yakınlaştırma jestlerini
     devreye sokmaması için — dokunmatik ekranda tutup taşımak sayfayı
     kaydırmaya çalışmasın diye şart. */
  touch-action: none;
}

/* Kediyi tutup sürüklerken (bkz. client.js mascotDrag*) — normal duruştan
   daha büyük, "havada tutuluyor" hissi veren bir gölge ile öne çıkar.
   Sürükleme kareleri (drag-1..6.png) arka planı temizlenmiş gerçek şeffaf
   PNG'lerdir (bkz. CLAUDE.md — flood-fill tabanlı arka plan temizleme). */
.mascot-cat-dragging {
  z-index: 999 !important;
  cursor: grabbing;
}
.mascot-cat-dragging .mascot-cat-emoji {
  width: 96px;
  animation: none !important;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
  transform: none !important;
}

@keyframes mascot-wobble {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-9deg); }
  40%      { transform: rotate(7deg); }
  60%      { transform: rotate(-6deg); }
  80%      { transform: rotate(5deg); }
}
.mascot-wobble .mascot-cat-emoji {
  animation: mascot-wobble 0.5s ease-in-out infinite !important;
}

.mascot-cat-emoji {
  display: block;
  width: 62px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 6px rgba(10, 6, 26, 0.35));
  animation: mascot-idle-bounce 2.6s ease-in-out infinite;
  transform-origin: bottom center;
}
.mascot-cat.face-left .mascot-cat-emoji { transform: scaleX(-1); }

@keyframes mascot-idle-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.mascot-cat.face-left .mascot-cat-emoji { animation-name: mascot-idle-bounce-flip; }
@keyframes mascot-idle-bounce-flip {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-3px); }
}

/* Yürüme */
.mascot-cat.state-walk .mascot-cat-emoji { animation: mascot-walk 0.45s ease-in-out infinite; }
@keyframes mascot-walk {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-4deg); }
}
.mascot-cat.state-walk.face-left .mascot-cat-emoji { animation-name: mascot-walk-flip; }
@keyframes mascot-walk-flip {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
  50%      { transform: scaleX(-1) translateY(-7px) rotate(4deg); }
}

/* Kendini yalama */
.mascot-cat.state-groom .mascot-cat-emoji { animation: mascot-groom 0.8s ease-in-out infinite; }
@keyframes mascot-groom {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(-14deg); }
  65%      { transform: rotate(6deg); }
}

/* Oyunculara bakma (izleme) */
.mascot-cat.state-watch .mascot-cat-emoji { animation: mascot-watch 1.9s ease-in-out infinite; }
@keyframes mascot-watch {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(8deg); }
}

/* Dans etme — etek zaten görselin üzerinde (bkz. behlul-tutu.png), burada
   sadece daha enerjik bir zıplama/dönme uygulanır. */
.mascot-cat.state-dance .mascot-cat-emoji { animation: mascot-dance 0.4s ease-in-out infinite; }
@keyframes mascot-dance {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50%      { transform: translateY(-11px) rotate(12deg); }
}

/* Uyuma — behlul-sleep.png zaten yan yatmış çizildiği için döndürmeye gerek
   yok, sadece hafifçe "nefes alır" gibi büyüyüp küçülür. */
.mascot-cat.state-sleep .mascot-cat-emoji {
  transform-origin: center;
  animation: mascot-sleep-breathe 2.8s ease-in-out infinite;
}
@keyframes mascot-sleep-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.mascot-cat-zzz {
  position: absolute;
  top: -6px;
  left: 2px;
  font-size: 1rem;
  opacity: 0;
  animation: mascot-zzz-float 2.4s ease-in-out infinite;
}
@keyframes mascot-zzz-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px) scale(1.15); }
}

/* Tıklayınca: behlul-roll.png (sırtüstü, keyifli poz) zaten doğru pozu
   gösteriyor — burada sadece mutlu bir sağa-sola sallanma uygulanır. */
.mascot-cat.state-roll .mascot-cat-emoji {
  transform-origin: center;
  animation: mascot-roll-wiggle 1.3s ease-in-out 1;
}
@keyframes mascot-roll-wiggle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  15%      { transform: rotate(-10deg) translateY(-3px); }
  35%      { transform: rotate(9deg) translateY(0); }
  55%      { transform: rotate(-7deg) translateY(-2px); }
  75%      { transform: rotate(5deg) translateY(0); }
  90%      { transform: rotate(-2deg) translateY(-1px); }
}

/* Konuşma balonu ("Miyav!") */
.mascot-cat-bubble {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: #2b2140;
  font-weight: 800;
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  pointer-events: none;
}
.mascot-cat-bubble.pop { animation: mascot-pop 1.3s ease-out; }
.mascot-cat-bubble.hidden { display: none; }

/* İsim etiketi ("Behlül") — pembe, parlak */
.mascot-cat-name {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  color: #FF6FB0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(255, 111, 176, 0.7), 0 2px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.mascot-cat-name.pop { animation: mascot-pop 1.6s ease-out; }
.mascot-cat-name.hidden { display: none; }

@keyframes mascot-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.6); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15); }
  28%  { transform: translateX(-50%) translateY(0) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.9); }
}

/* Tıklayınca fışkıran kalpler */
.mascot-cat-hearts {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mascot-heart {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.15rem;
  opacity: 1;
  animation: mascot-heart-pop 1s ease-out forwards;
}
@keyframes mascot-heart-pop {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(var(--dx, -20px), -70px) scale(1.3); }
}

@media (max-width: 380px) {
  .mascot-cat-emoji { width: 52px; }
}

/* Çerez onayı (KVKK) — ekranın altında, tam genişlikte sabit bir şerit.
   Kullanıcı bir tercih yapana kadar durur; tercih localStorage'a kalıcı
   olarak kaydedilir, bir daha gösterilmez (bkz. client.js). */
.cookie-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  padding: 14px 16px calc(14px + var(--safe-bottom, 0px));
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -10px 30px var(--shadow-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: expand-down 220ms ease;
}
.cookie-consent-banner.hidden { display: none; }
.cookie-consent-banner p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}
.cookie-consent-banner a { color: var(--accent-mint); font-weight: 700; }
.cookie-consent-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.cookie-consent-actions .btn {
  width: auto;
  padding: 10px 18px;
  font-size: 0.85rem;
}

@media (min-width: 640px) {
  .cookie-consent-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .cookie-consent-banner p { flex: 1; }
}

/* Bağlantı bandı */
.connection-banner {
  position: fixed;
  top: calc(var(--safe-top) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--accent-coral);
  color: #2A0E0E;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.35);
  animation: banner-pulse 1.6s ease-in-out infinite;
  max-width: calc(100% - 32px);
  text-align: center;
}

@keyframes banner-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.03); }
}

/* Üç bağımsız ses düğmesinin (müzik/efekt/kedi) ortak sabit-köşe konteyneri. */
.sound-controls {
  position: fixed;
  top: var(--safe-top, 0px);
  right: 10px;
  margin-top: 8px;
  z-index: 998;
  display: flex;
  gap: 6px;
}

.btn-mute {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--bg-card, #23212f);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: opacity 150ms ease;
}

/* Kapatılmış bir ses kategorisi soluklaşır — bir bakışta hangisinin kapalı
   olduğu anlaşılsın diye (bkz. client.js'in eklediği .is-muted sınıfı). */
.btn-mute.is-muted {
  opacity: 0.45;
}

/* Dil düğmesi (TR/EN) diğer ses düğmeleriyle aynı dairesel görünümde ama
   emoji yerine 2 harf gösterdiği için biraz daha küçük yazı tipi gerekiyor. */
.btn-lang-toggle {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------
   4) ORTAK BİLEŞENLER: BUTON, INPUT, KART
---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 15px 22px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  width: 100%;
}

.btn:active { transform: scale(0.96); }

.btn-primary {
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  color: #fff;
  box-shadow: 0 5px 0 var(--primary-dim), 0 14px 26px rgba(108, 92, 231, 0.45);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { box-shadow: 0 2px 0 var(--primary-dim), 0 6px 14px rgba(108, 92, 231, 0.35); }
.btn-primary:disabled {
  background: var(--bg-elevated);
  color: var(--text-faint);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-danger {
  background: linear-gradient(180deg, #ff8a7a, var(--accent-coral));
  color: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18), 0 14px 26px rgba(255, 107, 107, 0.35);
}
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:active { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 6px 14px rgba(255, 107, 107, 0.25); }

.btn-secondary {
  background: var(--bg-card-soft);
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
  box-shadow: 0 5px 0 var(--bg-elevated);
}
.btn-secondary:active { box-shadow: 0 2px 0 var(--bg-elevated); }

/* Hızlı Başlangıç — ana CTA olarak öne çıksın diye altın/amber vurgusu */
.btn-quick-match {
  background: linear-gradient(180deg, #FFDD8A, var(--accent-amber));
  color: #2A1B00;
  box-shadow: 0 5px 0 var(--accent-amber-dim), 0 14px 26px rgba(255, 200, 87, 0.4);
  margin-bottom: 16px;
}
.btn-quick-match:active { box-shadow: 0 2px 0 var(--accent-amber-dim), 0 6px 14px rgba(255, 200, 87, 0.3); }

/* "Herkese açık oda" seçeneği — Oda Kur'dan hemen önce, tıklanabilir tüm satır */
.public-room-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 14px;
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin: 14px 0 18px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.public-room-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--primary-light);
}
.public-room-toggle em { display: block; margin-top: 2px; color: var(--text-faint); font-style: normal; font-weight: 600; font-size: 0.76rem; }

.btn-share-invite { margin-top: 16px; }

/* Lobideki "herkese açık" rozeti (oda kodu kutusunda) */
.practice-badge {
  background: rgba(255, 190, 92, 0.2);
  color: var(--accent-amber);
}

.game-header-top .practice-badge { margin-left: 0; margin-right: auto; }

.public-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(63, 221, 191, 0.18);
  color: var(--accent-mint);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  vertical-align: middle;
}

#btn-share-invite-lobby,
#btn-invite-friends { margin-bottom: 14px; }

.btn-text {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: auto;
}

.btn-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  padding: 0;
}

.btn-icon:active { transform: scale(0.9); }

.btn-back { position: absolute; top: 18px; left: 18px; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  text-align: left;
}

.form-group label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  padding-left: 4px;
}

input[type="text"] {
  background: var(--bg-deep-2);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 15px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

input[type="text"]::placeholder { color: var(--text-faint); font-weight: 600; }

input[type="text"]:focus {
  border-color: var(--accent-amber);
  background: var(--bg-card);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 200, 87, 0.18);
}

.error-text {
  color: var(--accent-coral);
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  margin-top: 4px;
  animation: shake-x 320ms ease;
}

@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(3px); }
}

/* ----------------------------------------------------------------------
   5) EKRAN 1 — GİRİŞ (LANDING)
---------------------------------------------------------------------- */
#screen-auth,
#screen-landing {
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}

/* Dekoratif, hafif hareket eden arkaplan "harf taşı" lekeleri — menü/lobi
   niteliğindeki tüm ekranlarda; canlı oyun arenasında dikkat dağıtmasın. */
#screen-auth::before,
#screen-auth::after,
#screen-landing::before,
#screen-landing::after,
#screen-profile::before,
#screen-profile::after,
#screen-friends::before,
#screen-friends::after,
#screen-lobby::before,
#screen-lobby::after,
#screen-draft::before,
#screen-draft::after,
#screen-gameover::before,
#screen-gameover::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  z-index: 0;
  animation: blob-float 12s ease-in-out infinite;
  /* Leke, ekran kenarına (overflow: hidden) ulaşmadan KENDİ içinde tamamen
     saydamlaşsın diye maskelenir — aksi halde bulanıklık ekran sınırında
     aniden kesiliyor ve sert, belirgin bir çizgi oluşturuyordu. */
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
#screen-auth::before,
#screen-landing::before,
#screen-profile::before,
#screen-friends::before,
#screen-lobby::before,
#screen-draft::before,
#screen-gameover::before {
  background: var(--primary);
  top: -80px;
  left: -60px;
}
#screen-auth::after,
#screen-landing::after,
#screen-profile::after,
#screen-friends::after,
#screen-lobby::after,
#screen-draft::after,
#screen-gameover::after {
  background: var(--accent-mint);
  bottom: -90px;
  right: -70px;
  animation-delay: -6s;
}

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -24px) scale(1.08); }
}

/* Gece gökyüzü hissi: giriş ekranlarının kenarlarında yumuşakça parlayıp
   sönen yıldızlar + ağır ağır süzülen dev "kelime" harfleri (bkz. referans
   tasarımdaki uçuşan E/N/U harfleri). Saf dekor — etkileşime kapalı. */
.home-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.decor-star {
  position: absolute;
  filter: drop-shadow(0 0 6px rgba(255, 200, 87, 0.55));
  animation: star-twinkle 2.8s ease-in-out infinite;
}
.decor-star-1 { top: 9%;  left: 10%; font-size: 1.1rem; animation-delay: 0s; }
.decor-star-2 { top: 15%; right: 9%; font-size: 1.6rem; animation-delay: -1s; }
.decor-star-3 { bottom: 24%; left: 7%; font-size: 1.2rem; animation-delay: -1.9s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.decor-letter {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.14);
  animation: letter-drift 9s ease-in-out infinite;
}
.decor-letter-1 { top: 7%;    right: 6%;  animation-delay: 0s; }
.decor-letter-2 { bottom: 12%; right: 12%; font-size: 2.1rem; animation-delay: -3s; }
.decor-letter-3 { top: 44%;   left: 4%;   font-size: 1.8rem; animation-delay: -6s; }

@keyframes letter-drift {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

.landing-card {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.landing-card h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-shadow: 0 2px 12px rgba(108, 92, 231, 0.4);
}

/* Kurdele/afiş görünümlü logo şeridi — alt köşelerdeki üçgen "kıvrım"
   uçları ve kalın taban gölgesiyle 3D, oyuncul bir rozet hissi verir. */
.logo-banner {
  position: relative;
  display: inline-block;
  padding: 13px 30px;
  margin: 4px 0 12px;
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--primary-dim), 0 18px 32px rgba(20, 14, 46, 0.55);
}
.logo-banner::before,
.logo-banner::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 0;
  height: 0;
  border-style: solid;
}
.logo-banner::before {
  left: 0;
  border-width: 9px 0 0 13px;
  border-color: transparent transparent transparent var(--primary-dim);
}
.logo-banner::after {
  right: 0;
  border-width: 9px 13px 0 0;
  border-color: transparent var(--primary-dim) transparent transparent;
}

.logo {
  font-size: 2rem;
  color: #fff;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.logo span { color: var(--accent-amber); }

.tagline {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 32px;
}

/* Belirgin dil/sözlük seçimi (giriş/ana ekran) — sağ üstteki küçük TR/EN
   simge düğmesi fark edilmediği için (kullanıcı geri bildirimi) buraya da
   eklendi, iki seçenek her zaman aynı anda görünür/tıklanabilir bir
   segment kontrolü olarak. */
.lang-select-prominent {
  display: flex;
  gap: 8px;
  margin-top: -18px;
  margin-bottom: 10px;
  justify-content: center;
}
.lang-select-btn {
  flex: 1;
  max-width: 150px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
}
.lang-select-btn:hover {
  transform: translateY(-1px);
}
.lang-select-btn.active {
  border-color: var(--accent-mint);
  color: var(--text-primary);
  background: var(--bg-card-soft);
  box-shadow: 0 0 0 1px var(--accent-mint) inset;
}
.lang-select-hint {
  color: var(--text-muted);
  font-size: 0.74rem;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 18px;
  opacity: 0.85;
}

/* "Oda Kur" / "Odaya Katıl" — yan yana, renkli, kabartma efektli mod
   kartları (referans tasarımdaki oyun modu kutucuklarından ilham alındı). */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 6px;
}

.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 10px 18px;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.mode-card:active { transform: translateY(2px) scale(0.97); }

.mode-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.15);
}

.mode-card-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.mode-card-purple {
  background: linear-gradient(160deg, var(--primary-light), var(--primary) 70%);
  box-shadow: 0 6px 0 var(--primary-dim), 0 16px 26px rgba(108, 92, 231, 0.35);
}
.mode-card-purple:active {
  box-shadow: 0 2px 0 var(--primary-dim), 0 8px 16px rgba(108, 92, 231, 0.3);
}

.mode-card-coral {
  background: linear-gradient(160deg, #FF9A8F, var(--accent-coral) 70%);
  box-shadow: 0 6px 0 var(--accent-coral-dim), 0 16px 26px rgba(255, 107, 107, 0.35);
}
.mode-card-coral:active {
  box-shadow: 0 2px 0 var(--accent-coral-dim), 0 8px 16px rgba(255, 107, 107, 0.3);
}

/* Bu başlık "Zamana Karşı Yarış"/"Saatli Bomba" gibi kısa başlıklardan
   (.race-intro-title) daha UZUN bir metin ("Hangi modda oynamak
   istersin?") olduğu için, sadece dikey boşluk bırakmak (o class'ın
   34px'i) yetmiyordu — ortalanmış uzun metin sola taşıp sol üstteki ←
   geri düğmesinin (top:18px, 40px yükseklik → alt kenarı 58px) ALTINA
   değil ÜSTÜNE/yanına biniyordu (ekran görüntüsüyle yakalandı). Düğmenin
   tamamen altında kalacak kadar (58px + pay) margin-top veriliyor. */
.mode-select-title {
  margin-top: 58px;
  font-size: 1.3rem;
  line-height: 1.3;
}

/* Mod seçim ekranı — "Oda Kur"/"Hızlı Başlat"/"Odaya Katıl" seçildikten
   SONRA hangi oyun modunda oynanacağını seçtiren geniş, dikey kartlar.
   Renk paleti diğer ekranlarla tutarlı: mor=düello, amber=yarış,
   kırmızı/mercan=bomba (bkz. .btn-race-mode / .btn-bomb-mode). */
.mode-select-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 6px;
}
.mode-select-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius-lg);
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.mode-select-card:active { transform: translateY(2px) scale(0.98); }
.mode-select-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.15);
}
.mode-select-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mode-select-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.mode-select-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}
.mode-select-duel {
  background: linear-gradient(160deg, var(--primary-light), var(--primary) 70%);
  box-shadow: 0 6px 0 var(--primary-dim), 0 16px 26px rgba(108, 92, 231, 0.35);
}
.mode-select-race {
  background: linear-gradient(160deg, #FFD97A, var(--accent-amber) 70%);
  box-shadow: 0 6px 0 #C98F1E, 0 16px 26px rgba(255, 200, 87, 0.35);
}
.mode-select-race .mode-select-name,
.mode-select-race .mode-select-desc { color: #2A1B00; text-shadow: none; }
.mode-select-bomb {
  background: linear-gradient(160deg, #FF9A8F, var(--accent-coral) 70%);
  box-shadow: 0 6px 0 var(--accent-coral-dim), 0 16px 26px rgba(255, 107, 107, 0.35);
}

.btn-icon-emoji { font-size: 1.1rem; }

.join-form {
  margin-top: 18px;
  animation: expand-down 260ms ease;
}

@keyframes expand-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.join-form-row {
  display: flex;
  gap: 10px;
}

.room-code-input {
  text-align: center;
  letter-spacing: 6px;
  text-transform: uppercase;
  flex: 1;
}

.join-form-row .btn { width: auto; padding-left: 20px; padding-right: 20px; }

.rules-toggle-wrap { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ----------------------------------------------------------------------
   6) EKRAN 2 — LOBİ
---------------------------------------------------------------------- */
#screen-lobby { padding: 24px 20px; align-items: stretch; position: relative; overflow: hidden; }

.lobby-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-soft));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 28px 20px 24px;
  margin-top: 46px;
  box-shadow: 0 20px 48px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lobby-card h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-shadow: 0 2px 12px rgba(108, 92, 231, 0.4);
}

.room-code-box {
  background: var(--bg-deep-2);
  border: 1px dashed var(--primary-light);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  margin-bottom: 22px;
}

.room-code-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.room-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#lobby-room-code {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 6px;
  color: var(--accent-amber);
}

.room-code-hint {
  display: block;
  margin-top: 8px;
  color: var(--text-faint);
  font-size: 0.8rem;
  font-weight: 600;
}

.lobby-player-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  max-height: 40vh;
  overflow-y: auto;
}

.lobby-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card-soft);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  animation: pop-in 220ms ease;
  cursor: pointer; /* dokununca profil/arkadaş ekle baloncuğu açılır */
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.lobby-player-row .avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
}

.lobby-player-row .name {
  font-weight: 700;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player-row .host-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--bg-deep);
  background: var(--accent-amber);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.btn-kick-player {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 107, 107, 0.18);
  color: var(--accent-coral);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-kick-player:disabled { opacity: 0.5; }

.lobby-hint {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.waiting-text .dots span { animation: dots-blink 1.4s infinite; }
@keyframes dots-blink {
  0%, 20% { opacity: 0; }
  50%     { opacity: 1; }
  100%    { opacity: 0; }
}

/* ----------------------------------------------------------------------
   6b) EKRAN 2b — DRAFT (oyun başı yetenek seçimi)
---------------------------------------------------------------------- */
#screen-draft {
  justify-content: center;
  padding: 24px 18px;
  position: relative;
  overflow: hidden;
}

.draft-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-soft));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 24px 18px 20px;
  box-shadow: 0 20px 48px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

.draft-card h2 {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.draft-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.4;
}
.draft-sub strong { color: var(--accent-amber); }

.draft-pool {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.draft-pool-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 10px 8px;
  transition: border-color 150ms ease, background 150ms ease;
}

.draft-pool-card.has-picks {
  border-color: var(--primary-light);
  background: rgba(139, 127, 240, 0.1);
}

.draft-pool-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.draft-pool-icon { font-size: 1.15rem; line-height: 1; }
.draft-pool-label {
  font-size: 0.78rem;
  font-weight: 800;
}

.draft-pool-desc {
  font-size: 0.68rem;
  color: var(--text-dim, #b8b3d6);
  line-height: 1.35;
  margin: 0 0 8px;
  flex: 1;
}

.draft-pool-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.draft-step-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  font-weight: 900;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.draft-step-btn:active:not(:disabled) { transform: scale(0.9); }
.draft-step-btn:disabled { opacity: 0.35; }

.draft-pool-count {
  font-weight: 800;
  font-size: 0.95rem;
  min-width: 16px;
  text-align: center;
}

.draft-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.draft-remaining {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-muted);
}

.draft-waiting {
  margin-top: 18px;
  text-align: center;
}

.draft-waiting-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-amber);
  margin-bottom: 10px;
}

.draft-waiting-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.draft-waiting-item {
  background: var(--bg-card-soft);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: left;
}
.draft-waiting-item.ready { color: var(--accent-mint); }

/* ----------------------------------------------------------------------
   7) EKRAN 3 — OYUN (ÜST / ORTA / ALT)
---------------------------------------------------------------------- */
#screen-game {
  height: 100dvh;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

.game-header {
  padding: 12px 16px 10px;
  flex-shrink: 0;
}

.game-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  /* Sağ üst köşedeki sabit ses+dil düğmeleri (.sound-controls, tüm
     ekranlarda görünür, artık 4 düğme) kapatma butonunun üzerine gelmesin
     diye burada yer açılıyor. */
  padding-right: 168px;
}

.room-code-chip {
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------
   7b) MASA ARENASI — oyuncular masanın etrafında, sana bakan
   perspektifle otururlar. "Sen" her zaman önde/altta, rakipler karşı
   yarım daire üzerinde dizilir (poker masası perspektifi).
---------------------------------------------------------------------- */
.game-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 6px 14px 4px;
  position: relative;
  min-height: 0;
}

.table-arena {
  position: relative;
  flex: 1;
  min-height: 300px;
  width: 100%;
}

/* Masa TAMAMEN KALDIRILDI (kullanıcı isteği, 2026-09-09) — oyun alanı
   artık body'nin kendi yıldızlı uzay arka planı üzerinde (bkz. body::before/
   ::after, twinkle+drift animasyonları) doğrudan duruyor, altında hiçbir
   masa/zemin grafiği yok. `.table-arena` zaten şeffaftı, sadece içindeki
   `.table-surface`/`.table-surface-inner` div'leri (ve onların CSS'i)
   kaldırıldı — `index.html`'de de artık yoklar.

   Oyun ekranına özel, biraz daha belirgin bir yıldız parıltısı: body'nin
   genel twinkle'ından bağımsız, sadece bu ekranda görünen ikinci bir
   katman — "uzayda oturuyormuş" hissini güçlendirir. */
#screen-game::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(1.3px 1.3px at 70% 20%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 40% 65%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 85% 55%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.4px 1.4px at 55% 90%, rgba(255,255,255,0.6), transparent 60%);
  background-repeat: repeat;
  background-size: 180px 180px;
  animation: bg-twinkle 5.5s ease-in-out infinite;
  animation-delay: -2s;
}

/* Rakip koltuklarının bulunduğu üst yarım-daire katmanı */
.opponents-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 1;
  transition: opacity 200ms ease;
}

/* Mobil sanal klavye açıkken (bkz. client.js initKeyboardOpenDetection)
   görünür alan küçülüyor, yüzde bazlı konumlanan rakip koltukları VE
   dolaşan maskot kedi mevcut kelime/timer alanının üstüne binip ekranı
   karmakarışık yapıyordu — klavye açıkken ikisini de geçici olarak
   gizliyoruz, sadece kelime/input alanı kalsın. */
body.keyboard-open #screen-game .opponents-layer,
body.keyboard-open #screen-game .mascot-cat.mascot-cat-on-table {
  opacity: 0;
  pointer-events: none;
}

/* Saatli Bomba: dairesel oturma düzeni (.bomb-circle-arena) kelime giriş
   formuyla AYNI dikey alanı paylaşıyor — klavye açılınca (QA
   denetiminde bulunan gerçek bir bug: giriş kutusu tamamen ekranın
   dışına taşıyordu, bkz. client.js initKeyboardOpenDetection) daireyi
   TAMAMEN düzen akışından çıkarıyoruz (`display:none`, sadece
   `opacity:0` YETMEZ — o durumda boş alanı hâlâ işgal eder). Böylece
   `.bomb-game-main` (flex:1) boşalan alanı otomatik doldurup formu
   ortalar. */
body.keyboard-open #screen-bomb-game .bomb-circle-arena {
  display: none;
}

/* Tek bir koltuk (avatar + isim + can barı) — hem rakip hem "ben" için
   ortak taban stil; konum/boyut farkları .seat-opponent / .seat-me ile
   ve JS'in verdiği --seat-scale ile ayrışır. */
.seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.seat-opponent {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--seat-scale, 1));
  z-index: 4;
  cursor: pointer; /* hedef seçiminde vurmak, aksi halde profil/arkadaş ekle baloncuğunu açmak için */
}

.seat-opponent.current-turn { z-index: 6; }

.me-seat {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  z-index: 5;
}

.seat-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 7px 9px 6px;
  min-width: 62px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  transition: border-color 200ms ease, transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}

.seat-me .seat-bubble {
  background: var(--bg-card-soft);
  min-width: 84px;
  padding: 9px 12px 8px;
}

.seat.current-turn .seat-bubble {
  border-color: var(--accent-mint);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(63, 221, 191, 0.35);
  animation: turn-glow 1.6s ease-in-out infinite;
}

@keyframes turn-glow {
  0%, 100% { box-shadow: 0 6px 18px rgba(63, 221, 191, 0.28); }
  50%      { box-shadow: 0 6px 22px rgba(63, 221, 191, 0.55); }
}

.seat.eliminated {
  opacity: 0.35;
  filter: grayscale(0.8);
}

.seat.disconnected .seat-name::after {
  content: " 📡";
}

/* ------------------------------------------------------------------
   TATLI OTURAN KARAKTER — daire avatarların yerini alan kafa+vücut
   figürü. .seat-avatar artık dairesel bir çerçeve değil, SVG'nin
   doğal en-boy oranını (100x112) koruyan şeffaf bir kapsayıcı.
------------------------------------------------------------------ */
.seat-avatar {
  width: 46px;
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.seat-me .seat-avatar {
  width: 62px;
  height: 70px;
}

/* ------------------------------------------------------------------
   PROFİL FOTOĞRAFI — hesabında fotoğraf yükleyen oyuncular için,
   çizgi karakterin yerine geçen yuvarlak gerçek fotoğraf çerçevesi.
------------------------------------------------------------------ */
.avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.seat-avatar-has-photo {
  width: 52px;
  height: 52px;
  align-items: center;
}

.seat-me .seat-avatar-has-photo {
  width: 68px;
  height: 68px;
}

.seat-avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  display: block;
}

.character-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: char-idle-bob 2.6s ease-in-out infinite;
  /* Karakteri koyu masa zemininden hafifçe "kaldırır" — anahatla birlikte
     kalabalık bir masada bile net bir siluet oluşturur. */
  filter: drop-shadow(0 3px 3px rgba(10, 4, 24, 0.4));
}

.seat:nth-child(2n) .character-svg { animation-delay: -0.6s; }
.seat:nth-child(3n) .character-svg { animation-delay: -1.3s; }
.seat:nth-child(2n) .char-torso { animation-delay: -0.6s; }
.seat:nth-child(3n) .char-torso { animation-delay: -1.3s; }

@keyframes char-idle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}

/* Sakin nefes alma: gövde çok hafifçe büyüyüp küçülür (Disney'in "squash &
   stretch" ilkesinin en ince hali) — idle-bob ile birlikte karakter hiçbir
   zaman tam donuk durmaz. */
.char-torso {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: char-breathe 2.6s ease-in-out infinite;
}
@keyframes char-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.045); }
}

.char-shadow { fill: rgba(0,0,0,0.28); }
.char-eye { fill: #241833; transform-origin: center; animation: char-blink 4.4s ease-in-out infinite; }
.char-eye:nth-of-type(2) { animation-delay: 0.05s; }
.char-eye-shine { fill: #fff; opacity: 0.85; pointer-events: none; }
.char-cheek { fill: #ff9fb1; opacity: 0.55; }
.char-mouth { stroke: #241833; }

@keyframes char-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.12); }
}

/* Sıra kendisindeyken kollarını sallayıp "bana bak!" der gibi olur */
.seat.current-turn .char-arm { animation: char-wave 0.9s ease-in-out infinite; transform-origin: 30px 58px; }
.seat.current-turn .char-arm-r { animation-delay: 0.1s; transform-origin: 70px 58px; }
@keyframes char-wave {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-8deg); }
}

.seat.eliminated .char-wobble { transform: rotate(12deg) translateY(4px); transform-origin: 50px 90px; }
.seat.eliminated .char-eye { animation: none; transform: scaleY(1); }
.seat.eliminated .char-mouth { d: path("M42,44 Q50,38 58,44"); }

.char-initials {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 800;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
  pointer-events: none;
}

.seat-me .char-initials {
  width: 19px;
  height: 19px;
  font-size: 0.58rem;
}

.char-rip {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.seat-avatar .crown {
  position: absolute;
  top: -13px;
  right: 0;
  font-size: 0.85rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  z-index: 2;
}

.seat-avatar .shield-badge {
  position: absolute;
  bottom: 2px;
  left: -8px;
  font-size: 0.8rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  animation: shield-pulse 1.4s ease-in-out infinite;
  z-index: 2;
}

@keyframes shield-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.seat-avatar .reflect-badge { left: auto; right: -8px; bottom: 2px; }
.seat-avatar .bounce-badge { left: 50%; bottom: -6px; transform: translateX(-50%); }
.seat-avatar .bounce-badge { animation: shield-pulse 1.4s ease-in-out infinite; }
.seat-avatar .vampiric-badge { left: -8px; bottom: -6px; }
.seat-avatar .poisoning-badge { right: -8px; top: 2px; bottom: auto; }

.seat-name {
  font-size: 0.7rem;
  font-weight: 800;
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-me .seat-name { font-size: 0.78rem; max-width: 90px; }

.seat-hpbar {
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep-2);
  overflow: hidden;
}

.seat-hpbar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-mint-dim), var(--accent-mint));
  transition: width 300ms ease, background 300ms ease;
}

.seat-hpbar.low .seat-hpbar-fill {
  background: linear-gradient(90deg, var(--accent-coral-dim), var(--accent-coral));
}

.seat-hearts {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--accent-coral);
}

.seat-hearts .heart-icon { font-size: 0.68rem; }
.seat-hearts.low { animation: heart-pulse 1s ease-in-out infinite; }

@keyframes heart-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* Ortadaki kelime + zamanlayıcı, masanın üzerinde "duruyormuş" gibi */
.table-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 12px;
  pointer-events: none;
}

/* --- Saldırı animasyonları sırasında koltuk tepkileri --- */
.seat.attacker-lunge .seat-bubble { animation: seat-lunge 420ms ease; }
@keyframes seat-lunge {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-6px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

.seat.hit-shake .seat-bubble { animation: seat-hit 460ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes seat-hit {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px) rotate(-2deg); }
  30% { transform: translateX(6px) rotate(2deg); }
  45% { transform: translateX(-5px) rotate(-1.5deg); }
  60% { transform: translateX(4px) rotate(1deg); }
  75% { transform: translateX(-2px); }
}

.seat.hit-shake-big .seat-bubble { animation: seat-hit-big 620ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes seat-hit-big {
  0%, 100% { transform: translateX(0) scale(1); }
  10% { transform: translateX(-10px) scale(0.94) rotate(-3deg); }
  25% { transform: translateX(9px) scale(1.05) rotate(3deg); }
  40% { transform: translateX(-7px) rotate(-2deg); }
  55% { transform: translateX(6px) rotate(2deg); }
  70% { transform: translateX(-3px); }
  85% { transform: translateX(2px); }
}

.seat.hit-flash-green .seat-avatar { animation: flash-green 550ms ease; }
@keyframes flash-green {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 8px rgba(63, 221, 191, 0.45); }
}

.seat.hit-flash-red .seat-avatar { animation: flash-red 550ms ease; }
@keyframes flash-red {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0.5); }
}

.seat.hit-flash-blue .seat-avatar { animation: flash-blue 550ms ease; }
@keyframes flash-blue {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 12px rgba(76, 139, 245, 0.5); }
}

.turn-indicator {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  min-height: 34px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  box-shadow: 0 8px 20px var(--shadow-color);
  transition: color 200ms ease, border-color 200ms ease;
}

.turn-indicator.my-turn {
  color: var(--accent-mint);
  border-color: var(--accent-mint);
  animation: my-turn-bounce 700ms ease;
}

@keyframes my-turn-bounce {
  0%   { transform: scale(0.9); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.word-display-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.word-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-faint);
}

.current-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
}

/* Her harf ayrı bir "kelime taşı" olarak render edilir (client.js tarafından) */
.word-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 52px;
  background: linear-gradient(155deg, var(--bg-elevated), var(--bg-card-soft));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.2);
  animation: tile-drop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.word-letter.last-letter {
  background: linear-gradient(155deg, var(--accent-amber), var(--accent-amber-dim));
  color: #3A2600;
  box-shadow: 0 4px 0 var(--accent-amber-dim), 0 8px 20px rgba(255, 200, 87, 0.45);
}

@keyframes tile-drop {
  from { opacity: 0; transform: translateY(-14px) rotate(-6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

.required-letter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card-soft);
  border: 1px solid var(--accent-amber);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  animation: pop-in 260ms ease;
}
.required-letter-badge strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--accent-amber);
}

.timer-wrap {
  width: 100%;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.timer-bar-track {
  flex: 1;
  height: 12px;
  background: var(--bg-deep-2);
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}

.timer-bar-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-mint-dim), var(--accent-mint));
  transition: width 220ms linear, background 300ms ease;
}

.timer-bar-fill.timer-warn {
  background: linear-gradient(90deg, var(--accent-amber-dim), var(--accent-amber));
}

.timer-bar-fill.timer-danger {
  background: linear-gradient(90deg, var(--accent-coral-dim), var(--accent-coral));
  animation: timer-shake 400ms ease-in-out infinite;
}

@keyframes timer-shake {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}

.timer-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  min-width: 28px;
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.game-toast {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 8px 18px 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 10px 24px var(--shadow-color);
  z-index: 20;
  animation: toast-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Girişteki gibi belirgin bir çıkış da olsun diye — eskiden toast anında
   display:none oluyordu (bkz. client.js processToastQueue), bu da her
   mesajın "kesilip atılması" gibi rahatsız edici bir his veriyordu. */
.game-toast.toast-out {
  animation: toast-out 200ms ease-in forwards;
}

/* Tür rozeti: sadece kenarlık rengine bakıp ayırt etmek yerine (özellikle
   hızlı oyun sırasında bir bakışta), Duolingo/Clash Royale tarzı küçük
   renkli ikon rozeti — renk körlüğünde bile ✓/✕/i şekliyle ayırt edilir. */
.game-toast::before {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
}

.game-toast.toast-error   { border-color: var(--accent-coral); }
.game-toast.toast-error::before   { content: '✕'; background: var(--accent-coral); color: #2A0A0A; }

.game-toast.toast-success { border-color: var(--accent-mint); }
.game-toast.toast-success::before { content: '✓'; background: var(--accent-mint); color: #052620; }

.game-toast.toast-info    { border-color: var(--accent-amber); }
.game-toast.toast-info::before    { content: 'i'; background: var(--accent-amber); color: #3A2600; }

/* Dramatik eşik anonsu ("Yarı Final!" / "Final! Son 2 kişi!") — oyunu asla
   engellemez, masanın üzerinde büyük harflerle belirip birkaç saniyede
   kaybolur (bkz. Stumble Guys'ın kademeli eleme dalgası anonsları). */
.milestone-banner {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  pointer-events: none;
  text-align: center;
  /* `left:50%` + `translateX(-50%)` ortalama deseninde, genişlik `auto`
     kalırsa tarayıcı "shrink-to-fit" hesabını `left` konumundan viewport
     sonuna kadar kalan alanla (burada viewport'un YARISIYLA) sınırlıyor —
     içerik o alana sığmayınca gereksiz yere satır kırıyor. Kısa metinlerde
     ("🔥 SIRA SENDE!" gibi) hiç fark edilmiyordu, ama daha uzun bir metinle
     (bkz. Saatli Bomba "😅 Son anda kurtardı!" banner'ı) gerçek bir
     kırpılma/satır kırma bug'ı olarak ortaya çıktı (ekran görüntüsüyle
     yakalandı). `max-content` bu sınırlamayı devre dışı bırakıp gerçek
     içerik genişliğini kullandırıyor; `max-width` dar ekranlarda taşmayı
     önlüyor. */
  width: max-content;
  max-width: 86vw;
}
.milestone-banner.hidden { display: none; }
.milestone-banner span {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  padding: 14px 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-soft));
  box-shadow: 0 20px 48px var(--shadow-color), inset 0 1px 0 rgba(255,255,255,0.08);
  border: 2px solid var(--accent-amber);
  color: var(--accent-amber);
  text-shadow: 0 0 18px rgba(255, 200, 87, 0.5);
  animation: milestone-pop 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.milestone-banner.milestone-final span {
  border-color: var(--accent-coral);
  color: var(--accent-coral);
  text-shadow: 0 0 18px rgba(255, 107, 107, 0.55);
}
@keyframes milestone-pop {
  0%   { opacity: 0; transform: scale(0.7) translateY(10px); }
  12%  { opacity: 1; transform: scale(1.08) translateY(0); }
  20%  { transform: scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.96) translateY(-8px); }
}
@media (max-width: 380px) {
  .milestone-banner span { font-size: 1.25rem; padding: 12px 20px; }
}

/* "Sıra sende!" bildirimi — milestone-banner ile aynı taban stili, mint
   renk teması ve daha kısa süre (her tur çıkacağı için milestone kadar
   uzun kalmamalı). */
.turn-banner span {
  border-color: var(--accent-mint);
  color: var(--accent-mint);
  text-shadow: 0 0 18px rgba(63, 221, 191, 0.55);
  animation-duration: 1.5s;
}

/* ==========================================================================
   HEDEF SEÇİM BİLDİRİMİ — kelime kabul edildikten SONRA görünen, tur
   sahibinin rakibine tıklayarak hasarını yönlendirdiği 15sn'lik pencere.
   ========================================================================== */

.target-banner {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 92%;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 16;
  background: rgba(15, 10, 32, 0.75);
  backdrop-filter: blur(5px);
  border: 1px solid var(--accent-coral, #ff6b6b);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  animation: target-banner-in 200ms ease-out;
}

.target-banner.my-pick {
  border-color: var(--accent-amber, #ffc857);
  animation: target-banner-in 200ms ease-out, target-banner-pulse 1.1s ease-in-out infinite;
}

@keyframes target-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes target-banner-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(255, 200, 87, 0.5); }
  50%      { box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 0 6px rgba(255, 200, 87, 0); }
}

.target-banner-text {
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.target-banner-timer-track {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  flex-shrink: 0;
}

.target-banner-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-coral-dim, #c64545), var(--accent-coral, #ff6b6b));
  border-radius: 3px;
  transition: width 120ms linear;
}

.target-banner-timer-text {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--text-dim, #b8b3d6);
  flex-shrink: 0;
}

/* Hedef seçilebilir rakip koltukları — tıklama sırasında belirgin bir
   "buraya dokun" ipucu (glow + hafif büyüme + işaretçi imleci) verir. */
.seat-opponent.seat-clickable {
  cursor: pointer;
}

.seat-opponent.seat-clickable .seat-bubble {
  animation: seat-pickable-glow 1s ease-in-out infinite;
}

@keyframes seat-pickable-glow {
  0%, 100% { box-shadow: 0 8px 18px rgba(0,0,0,0.35), 0 0 0 0 rgba(255, 107, 107, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 8px 18px rgba(0,0,0,0.35), 0 0 0 5px rgba(255, 107, 107, 0.28); transform: scale(1.035); }
}

/* ==========================================================================
   2x HASAR "BUFF" ROZETİ — gökten harf etkinliğini kazanan oyuncu üzerinde
   ========================================================================== */

.seat-avatar .buff-badge {
  position: absolute;
  bottom: 2px;
  right: -10px;
  background: linear-gradient(135deg, #ffd166, #ff9f43);
  color: #3a2200;
  font-size: 0.5rem;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 6px rgba(255, 159, 67, 0.5);
  animation: buff-pulse 1s ease-in-out infinite;
  z-index: 2;
  white-space: nowrap;
}

@keyframes buff-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* ==========================================================================
   KOMBO ROZETİ — koltuk üzerinde, herkese görünür (server "combo" alanını
   gizlemez)
   ========================================================================== */

.seat-avatar .combo-badge {
  position: absolute;
  top: -8px;
  left: -10px;
  background: linear-gradient(135deg, var(--accent-coral, #ff6b6b), #ff9f43);
  color: #2a0d0d;
  font-size: 0.5rem;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.55);
  animation: buff-pulse 1s ease-in-out infinite;
  z-index: 2;
  white-space: nowrap;
}

/* ==========================================================================
   AÇIK DURUM ROZETLERİ — stun / kör / melek / zehir (herkese görünür)
   ========================================================================== */

.seat-avatar .stun-badge {
  top: auto;
  bottom: -18px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #74d4ff, #3fa9dd);
  color: #06283a;
}

.seat-avatar .blind-badge {
  top: auto;
  bottom: -32px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6b5b95, #362a52);
  color: #f0e9ff;
}

.seat-avatar .angel-badge {
  top: -8px;
  right: -10px;
  left: auto;
  background: linear-gradient(135deg, #fff3b0, #ffd166);
  color: #4a3400;
}

.seat-avatar .poison-badge {
  top: -8px;
  right: auto;
  left: -10px;
  background: linear-gradient(135deg, #b7f07a, #5fae2f);
  color: #12360a;
}

/* ==========================================================================
   KÖR EDİLMİŞ YETENEK ÇUBUĞU — bu tur tüm butonlar karanlık/pasif görünür
   ========================================================================== */

.powerup-bar.powerup-bar-blinded {
  position: relative;
  filter: grayscale(0.7) brightness(0.55);
}

.powerup-bar.powerup-bar-blinded::after {
  content: "🌑 Kör oldun — bu tur yetenek kullanamazsın";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: rgba(10, 6, 20, 0.55);
  border-radius: var(--radius-md);
  padding: 4px;
  pointer-events: none;
}

/* ==========================================================================
   ENVANTER ŞERİDİ — koltuk kartında rakibin elindeki yeteneklerin (kaçar
   adet olduğu) küçük ikonlarla gösterimi
   ========================================================================== */

.seat-inventory {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin-top: 2px;
  max-width: 84px;
}

.seat-inventory-chip {
  display: flex;
  align-items: center;
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  padding: 1px 3px;
  line-height: 1;
}

.seat-inventory-icon { font-size: 0.56rem; }
.seat-inventory-count {
  font-size: 0.5rem;
  font-weight: 800;
  color: var(--text-dim, #b8b3d6);
}

.seat-me .seat-inventory { max-width: 130px; }
.seat-me .seat-inventory-icon { font-size: 0.68rem; }
.seat-me .seat-inventory-count { font-size: 0.58rem; }

/* ==========================================================================
   SON 5 SANİYE — TÜM EKRAN TİTREMESİ (süre baskısını hissettirir)
   ========================================================================== */

body.screen-danger-shake #app {
  animation: screen-danger-shake 140ms ease-in-out infinite;
}

@keyframes screen-danger-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

/* ==========================================================================
   GÖKTEN HARF DÜŞMESİ — tam ekran overlay
   ========================================================================== */

.letter-event-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 25, 0.78);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  padding: 16px;
  animation: overlay-fade-in 200ms ease-out;
}

@keyframes overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.letter-event-card {
  background: var(--bg-card, #251C43);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.1));
  border-radius: 22px;
  padding: 22px 20px 18px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}

.letter-event-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.letter-event-letter {
  font-family: 'Baloo 2', sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: #ffd166;
  text-shadow: 0 4px 0 rgba(0,0,0,0.35);
  margin: 4px 0 8px;
}

.letter-event-letter.letter-drop-anim {
  animation: letter-drop 650ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes letter-drop {
  0%   { transform: translateY(-140px) rotate(-15deg); opacity: 0; }
  60%  { transform: translateY(8px) rotate(4deg); opacity: 1; }
  80%  { transform: translateY(-4px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.letter-event-sub {
  font-size: 0.82rem;
  color: var(--text-dim, #b8b3d6);
  margin: 0 0 14px;
  line-height: 1.4;
}

.letter-event-timer-track {
  height: 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-bottom: 14px;
}

.letter-event-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ffd166, #ff9f43);
  border-radius: 5px;
  transition: width 120ms linear;
}
.letter-event-timer-fill.timer-danger {
  background: linear-gradient(90deg, var(--accent-coral, #ff6b6b), #ff4757);
}

.letter-event-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.letter-event-form input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.12));
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.letter-event-form input:focus { outline: 2px solid #ffd166; }

/* BUG DÜZELTMESİ: paylaşılan .btn sınıfı "width: 100%" tanımlıyor — bu
   satırda (input ile yan yana, flex satırında) düğmenin neredeyse TÜM
   genişliği yutup input'u görünmez denecek kadar daraltmasına sebep
   oluyordu (yazdığın harfler DOM'da vardı ama kutu o kadar dardı ki
   görünmüyordu). Düğmeyi burada içeriğine göre daraltıyoruz. */
.letter-event-form .btn {
  width: auto;
  flex: 0 0 auto;
  padding: 10px 18px;
}

.letter-event-best {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-mint, #3fddbf);
  min-height: 1.1em;
  margin: 4px 0;
}

.letter-event-error {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-coral, #ff6b6b);
  margin: 2px 0 4px;
}

.letter-event-feed {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 90px;
  overflow-y: auto;
}

.letter-event-feed li {
  font-size: 0.72rem;
  color: var(--text-dim, #b8b3d6);
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 4px 8px;
  text-align: left;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  to   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.92); }
}

/* --- ALT BÖLÜM --- */
.game-footer {
  flex-shrink: 0;
  padding: 10px 16px calc(14px + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, var(--bg-deep-2) 30%);
}

/* --- Kombo takipçisi: kenarda biriken pip'ler --- */
.combo-tracker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--accent-amber-dim);
  border-radius: var(--radius-pill);
  width: fit-content;
  animation: combo-tracker-in 220ms ease;
}

@keyframes combo-tracker-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.combo-tracker-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-amber);
  letter-spacing: 0.2px;
}

.combo-tracker-pips {
  display: flex;
  gap: 4px;
}

.combo-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-deep-2);
  border: 1px solid var(--border-soft);
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.combo-pip.filled {
  background: linear-gradient(135deg, var(--accent-amber), var(--accent-coral));
  border-color: transparent;
  box-shadow: 0 0 6px rgba(255, 200, 87, 0.7);
  transform: scale(1.15);
}

.combo-tracker-bonus {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--accent-mint);
}

/* Kombonun hangi harfte yapıldığını gösteren küçük rozet — kombo çubuğunun
   kenarında, hangi harfi tekrarlaman gerektiğini hatırlatır. */
.combo-tracker-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-amber);
  color: #3A2200;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.powerup-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.powerup-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 9px 4px 8px;
  transition: transform 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.powerup-btn:active:not(:disabled) { transform: scale(0.92); }

.powerup-btn:not(:disabled):not(.powerup-btn-inactive) {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 1px rgba(139, 127, 240, 0.15), 0 6px 14px rgba(108, 92, 231, 0.25);
}

.powerup-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Sıra bende değilken (ya da hedef seçimi sırasında "süre"/"joker" gibi o an
   kullanılamayan bir yetenek için) buton artık native disabled DEĞİL —
   dokununca kısa açıklamasını gösterebilsin diye tıklanabilir kalıyor,
   ama görsel olarak "şu an kullanılamaz" hissi vermesi için soluklaştırılıyor. */
.powerup-btn-inactive {
  opacity: 0.45;
}
.powerup-btn-inactive:active { transform: scale(0.95); }

.powerup-icon { font-size: 1.35rem; line-height: 1; }
.powerup-name {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  text-align: center;
}

.powerup-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent-coral);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-deep);
}

.powerup-count.zero { background: var(--text-faint); }

.powerup-btn.just-used { animation: powerup-pop 380ms ease; }
@keyframes powerup-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2) rotate(-6deg); }
  70%  { transform: scale(0.95) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.powerup-btn.bonus-flash { animation: bonus-flash 900ms ease; }
@keyframes bonus-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 200, 87, 0.8); }
  100% { box-shadow: 0 0 0 16px rgba(255, 200, 87, 0); }
}

.word-form {
  display: flex;
  gap: 10px;
}

#input-word {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#input-word:disabled {
  background: var(--bg-card);
  color: var(--text-faint);
}

#input-word.input-shake { animation: shake-x 320ms ease; border-color: var(--accent-coral); }
#input-word.input-success { border-color: var(--accent-mint); }

.btn-submit {
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
  transition: transform 150ms ease, filter 150ms ease;
}
.btn-submit:active:not(:disabled) { transform: scale(0.9); }
.btn-submit:disabled {
  background: var(--bg-elevated);
  color: var(--text-faint);
  box-shadow: none;
  cursor: not-allowed;
}

/* ----------------------------------------------------------------------
   8) EKRAN 4 — OYUN SONU
---------------------------------------------------------------------- */
#screen-gameover {
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}

#screen-profile,
#screen-friends {
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--safe-top) + 24px) 20px 24px;
  position: relative;
  overflow: hidden;
}

.gameover-card {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-soft));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 40px 26px;
  box-shadow: 0 24px 56px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.gameover-emoji {
  font-size: 4rem;
  margin-bottom: 12px;
  animation: emoji-bounce 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emoji-bounce {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.gameover-card h2 { font-size: 1.7rem; margin-bottom: 10px; }

.gameover-winner {
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 28px;
  font-size: 1rem;
}
.gameover-winner strong { color: var(--accent-amber); }

/* ----------------------------------------------------------------------
   9) MODALLAR
---------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 6, 26, 0.7);
  backdrop-filter: blur(3px);
  animation: modal-fade 200ms ease;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  background: linear-gradient(160deg, var(--bg-card), var(--bg-card-soft));
  border: 1px solid var(--border-soft);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  padding: 30px 20px calc(20px + var(--safe-bottom));
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: sheet-up 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-content::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.modal-content h3 {
  text-align: center;
  font-size: 1.15rem;
  margin-bottom: 18px;
}

.joker-target-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.joker-target-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  transition: border-color 150ms ease, transform 150ms ease;
}
.joker-target-item:active { transform: scale(0.97); }
.joker-target-item:hover { border-color: var(--primary-light); }

.joker-target-item .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.75rem; color: #fff;
  flex-shrink: 0;
}

.joker-target-item .lives-mini {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--accent-coral);
  font-weight: 800;
}

.harf-letter-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.harf-letter-btn {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.harf-letter-btn:active { transform: scale(0.88); }
.harf-letter-btn:hover {
  border-color: var(--accent-amber);
  background: var(--bg-elevated);
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.rules-list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}
.rules-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--accent-mint);
  font-weight: 900;
}
.rules-list li strong { color: var(--text-primary); }

/* Kural listesi artık 3 modu (Düello/Yarış/Bomba) tek modalda ayrı ayrı
   listeliyor — her modun kendi başlığıyla görsel olarak ayrılması için. */
.rules-mode-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent-amber);
  margin: 22px 0 10px;
  text-align: center;
}
.rules-mode-heading:first-of-type { margin-top: 4px; }

/* --- Öğretici (adım adım "nasıl oynanır") --- */
.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-bottom: 14px;
}
.tutorial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-soft);
  transition: background 150ms ease, transform 150ms ease;
}
.tutorial-dot.active {
  background: var(--primary-light);
  transform: scale(1.3);
}
.tutorial-step-body {
  min-height: 160px;
  text-align: center;
  padding: 8px 4px 20px;
}
.tutorial-step-body h3 { font-size: 1.2rem; margin-bottom: 12px; }
.tutorial-step-body p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.tutorial-step-body p strong { color: var(--text-primary); }
.tutorial-final-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* ----------------------------------------------------------------------
   9b) SALDIRI ANİMASYONLARI (kelime uzunluğuna göre: gaz / tokat / silah /
   atom bombası) — client.js tarafından #attack-fx-layer içine dinamik
   olarak eklenip WAAPI ile oynatılan, kısa ama doyurucu efektler.
---------------------------------------------------------------------- */
.attack-fx-layer {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}

.fx-projectile {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

.fx-projectile.fx-gas {
  font-size: 1.9rem;
  /* Standart gölgenin üstüne koyu, "toksik" bir yeşil-sarı parıltı ekler —
     hafif/pastel duman yerine daha koyu ve göze çarpan bir osuruk bulutu. */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)) drop-shadow(0 0 16px rgba(70, 100, 15, 0.95)) brightness(0.8) saturate(1.6);
}
.fx-projectile.fx-slap { font-size: 2rem; }
.fx-projectile.fx-gun { font-size: 1.1rem; }
.fx-projectile.fx-bomb { font-size: 1.9rem; }

.fx-muzzle {
  position: fixed;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  margin-top: -23px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,150,0.95), rgba(255,150,50,0.5) 55%, transparent 75%);
  will-change: transform, opacity;
}

.fx-impact-text {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 18px currentColor;
  white-space: nowrap;
  will-change: transform, opacity;
}

.fx-impact-text.fx-text-gas   { color: #A8C400; font-size: 1.4rem; -webkit-text-stroke: 1px #2E3A00; }
.fx-impact-text.fx-text-slap  { color: var(--accent-amber); font-size: 1.5rem; }
.fx-impact-text.fx-text-gun   { color: #fff; font-size: 1.6rem; }
.fx-impact-text.fx-text-bomb  { color: var(--accent-coral); font-size: 2.4rem; -webkit-text-stroke: 1.5px #3A0E0E; }
.fx-impact-text.fx-text-block { color: #4C8BF5; font-size: 1.05rem; }

/* Hasar sayısı: saldırı ağırlığına göre kademelendirilmiş (gas < slap < gun
   < bomb — attackTierFor() ile aynı eşikler, bkz. client.js) — küçük bir
   kelime küçük/soluk bir sayı, büyük bir kelime/kombo büyük/parlak bir sayı
   üretir. Her boyutta okunaklı kalsın diye koyu bir dış çizgi (stroke) var —
   arcade oyunlarındaki "floating combat text" tekniği (herhangi bir masa/
   koltuk rengi arkasında bile okunur). */
.fx-dmg-number {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--accent-amber);
  -webkit-text-stroke: 1.4px rgba(35, 12, 8, 0.7);
  text-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 0 14px currentColor;
  will-change: transform, opacity;
  pointer-events: none;
  z-index: 45;
}

.fx-dmg-number.dmg-tier-gas  { font-size: 1.02rem; color: #C6E86B; text-shadow: 0 2px 0 rgba(0,0,0,0.3), 0 0 10px currentColor; }
.fx-dmg-number.dmg-tier-slap { font-size: 1.3rem;  color: var(--accent-amber); }
.fx-dmg-number.dmg-tier-gun  { font-size: 1.55rem; color: #FF9F5A; -webkit-text-stroke: 1.7px rgba(40, 10, 0, 0.75); }
.fx-dmg-number.dmg-tier-bomb {
  font-size: 2rem;
  color: var(--accent-coral);
  -webkit-text-stroke: 2px rgba(45, 0, 0, 0.8);
  text-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 0 20px currentColor;
}

.fx-ring {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 3px solid currentColor;
  will-change: transform, opacity;
}

.fx-poof {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform, opacity;
}

/* Osuruk izi — koyu, toksik yeşil-sarı, dalgalanan duman baloncukları
   (daha koyu/belirgin olsun diye eski pastel mint tondan koyu olive'e çekildi) */
.fx-fart-puff {
  position: fixed;
  left: 0;
  top: 0;
  border-radius: 48% 52% 55% 45% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 35% 35%, rgba(150, 190, 60, 0.95), rgba(75, 105, 20, 0.85) 55%, rgba(45, 65, 10, 0.4) 80%);
  box-shadow: 0 0 14px rgba(75, 105, 20, 0.75);
  will-change: transform, opacity;
  z-index: 40;
}

.fx-spark {
  position: fixed;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFE699;
  box-shadow: 0 0 6px 2px rgba(255, 230, 150, 0.8);
  will-change: transform, opacity;
}

.fx-flash-screen {
  position: fixed;
  inset: 0;
  background: #fff;
  will-change: opacity;
}

.arena-shake { animation: arena-shake 480ms ease; }
@keyframes arena-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 3px); }
  20% { transform: translate(5px, -4px); }
  30% { transform: translate(-5px, 4px); }
  40% { transform: translate(6px, -2px); }
  50% { transform: translate(-4px, 2px); }
  60% { transform: translate(3px, -3px); }
  70% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
  90% { transform: translate(-1px, 1px); }
}

/* ----------------------------------------------------------------------
   10) KÜÇÜK EKRAN / EN AZ 320PX GENİŞLİK UYUMU
---------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Koltuklar (rakip + kendi) mobilde belirgin şekilde küçülür ki masanın
     ortasındaki kelime/timer alanıyla asla çakışmasınlar. */
  .seat-bubble { min-width: 50px; padding: 5px 6px 4px; gap: 2px; }
  .seat-me .seat-bubble { min-width: 62px; padding: 6px 8px 5px; }
  .seat-avatar { width: 34px; height: 38px; }
  .seat-me .seat-avatar { width: 44px; height: 50px; }
  .seat-name { font-size: 0.6rem; max-width: 48px; }
  .seat-me .seat-name { font-size: 0.66rem; max-width: 68px; }
  .seat-hearts { font-size: 0.6rem; }

  /* Envanter şeridi ve durum rozetleri çok daha küçük ve sıkışık */
  .seat-inventory { max-width: 62px; gap: 2px; margin-top: 1px; }
  .seat-inventory-chip { padding: 0 2px; }
  .seat-inventory-icon { font-size: 0.46rem; }
  .seat-inventory-count { font-size: 0.42rem; }
  .seat-me .seat-inventory { max-width: 96px; }
  .seat-me .seat-inventory-icon { font-size: 0.56rem; }
  .seat-me .seat-inventory-count { font-size: 0.48rem; }

  .buff-badge, .combo-badge { font-size: 0.44rem; padding: 0 3px; }
  .shield-badge { font-size: 0.66rem; }

  /* Kendi koltuğun tam alt kenara yakın, masanın ortasındaki kelimeye asla
     değmeyecek şekilde konumlanır. */
  .me-seat { bottom: 0; }

  .word-letter { width: 34px; height: 44px; font-size: 1.25rem; }
  .powerup-name { display: none; }
  .powerup-btn { padding: 10px 4px; }
}

@media (max-width: 360px) {
  .seat-bubble { min-width: 46px; padding: 4px 5px 4px; }
  .seat-avatar { width: 28px; height: 30px; }
  .seat-me .seat-avatar { width: 38px; height: 40px; }
}

@media (max-height: 640px) {
  .game-main { gap: 6px; padding: 4px 14px 2px; }
  .table-arena { min-height: 240px; }
  .word-letter { height: 44px; }
}

@media (max-height: 560px) {
  .table-arena { min-height: 200px; }
  .table-center { gap: 8px; }
}

/* Aynı zamanda kısa VE mobil-genişlikte bir ekransa (çoğu telefon dikey
   modda buraya düşer) koltukları biraz daha da küçült — masanın ortasındaki
   kelime/timer alanına yer açmak için. */
@media (max-width: 480px) and (max-height: 800px) {
  .table-arena { min-height: 220px; }
  .me-seat { bottom: 0; }
  .seat-bubble { padding: 4px 5px 4px; }
  .seat-avatar { width: 30px; height: 34px; }
  .seat-me .seat-avatar { width: 40px; height: 46px; }
}

/* ----------------------------------------------------------------------
   11) HAREKET AZALTMA TERCİHİ
---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #screen-landing::before, #screen-landing::after { display: none; }
}

/* ----------------------------------------------------------------------
   12) HESAP — GİRİŞ/KAYIT, PROFİL, ARKADAŞLAR
---------------------------------------------------------------------- */

.global-toast {
  position: fixed;
  top: calc(var(--safe-top) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px var(--shadow-color);
  max-width: calc(100% - 32px);
  text-align: center;
  border: 1px solid var(--border-soft);
  animation: expand-down 200ms ease;
}

input[type="email"], input[type="password"] {
  background: var(--bg-deep-2);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 15px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  width: 100%;
}
input[type="email"]::placeholder, input[type="password"]::placeholder { color: var(--text-faint); font-weight: 600; }
input[type="email"]:focus, input[type="password"]:focus {
  border-color: var(--accent-amber);
  background: var(--bg-card);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(255, 200, 87, 0.18);
}

.auth-tabs {
  display: flex;
  gap: 8px;
  background: var(--bg-deep-2);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 22px;
}
.auth-tab {
  flex: 1;
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 0;
  border-radius: var(--radius-pill);
  transition: background 150ms ease, color 150ms ease;
}
.auth-tab.active {
  background: linear-gradient(180deg, var(--primary-light), var(--primary));
  color: #fff;
  box-shadow: 0 3px 0 var(--primary-dim);
}

.auth-form.hidden { display: none; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--text-faint);
  font-size: 0.8rem;
  font-weight: 700;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

/* --- Landing ekranındaki hesap çubuğu --- */
.account-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 6px 8px 6px 6px;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(10, 6, 26, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.account-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--accent-amber), 0 0 0 4px rgba(255, 200, 87, 0.22);
}
.account-name {
  flex: 1;
  text-align: left;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-login-link { margin-bottom: 14px; }

/* --- Profil ekranı --- */
.profile-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.profile-avatar-lg {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.8rem;
  color: #fff;
  border: 3px solid var(--border-soft);
}
.profile-photo-wrap .btn { width: auto; padding-left: 18px; padding-right: 18px; }

/* Hazır avatar galerisi — profil ekranında ızgara halinde küçük seçilebilir
   yuvarlaklar. Seçili olan mint renkli halkayla vurgulanır. */
.preset-avatar-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.preset-avatar-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 0;
  border: 3px solid transparent;
  cursor: pointer;
  overflow: hidden;
  background: var(--bg-card-soft);
  transition: transform 120ms ease, border-color 120ms ease;
}
.preset-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preset-avatar-btn:hover { transform: scale(1.06); }
.preset-avatar-btn.selected { border-color: var(--accent-mint); }

/* --- Arkadaşlar ekranı --- */
.friends-card { text-align: left; padding-top: 46px; }
.friends-section { margin-top: 22px; }
.friends-section-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.friend-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
.friend-row .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
}
.friend-row-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.friend-row-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.friend-row-status {
  font-size: 0.72rem;
  color: var(--text-faint);
  font-weight: 700;
}
.friend-row-status.online { color: var(--accent-mint); }
.friend-row-btn { flex-shrink: 0; }

.modal-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.modal-actions-row .btn { width: auto; flex: 1; }

/* --- Oyuncu profili modalı (lobi/oyun içi "arkadaş ekle" baloncuğu) --- */
.player-profile-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.player-profile-content .profile-avatar-lg { margin-bottom: 6px; }
.player-profile-content h3 { margin-bottom: 4px; }
.player-profile-content .btn { margin-top: 8px; }
#player-profile-note { margin-bottom: 4px; }

/* --- Oyun sonu: "tekrar oyna?" oylaması --- */
.gameover-rematch-question {
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 6px;
}
.gameover-rematch-timer {
  color: var(--accent-amber);
  font-family: var(--font-display);
}
.gameover-rematch-status {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  min-height: 1.2em;
  margin-bottom: 18px;
}

/* ============================================================================
   ZAMANA KARŞI YARIŞ MODU — düello oyunundan görsel olarak da ayırt
   edilsin diye ana vurgu rengi altın/amber (--accent-amber), kalp atışı
   gibi kırmızı/mor değil.
============================================================================ */

/* Giriş ekranındaki başlık — "Zamana Karşı Yarış" diğer ekranlardaki kısa
   marka adlarından (KelimeTüret gibi) uzun olduğu için sıkışık
   .logo-banner kutusuna SIĞMIYOR ve sağ üstteki sabit ses/dil
   düğmeleriyle çakışıyordu (Playwright ekran görüntüsüyle yakalandı) —
   onun yerine diğer ekranların (lobi vb.) kullandığı sade h2 tarzı
   kullanılıyor. margin-top, sol üstteki ← geri düğmesiyle çakışmaması
   için (.landing-card bu düğme için ekstra boşluk BIRAKMIYOR, sadece
   .lobby-card bırakıyordu — bu ekran ise .landing-card kullanıyor). */
.race-intro-title {
  margin-top: 34px;
  font-size: 1.4rem;
  text-align: center;
  text-shadow: 0 2px 12px rgba(255, 200, 87, 0.35);
}

.btn-race-mode {
  margin-top: 14px;
  background: linear-gradient(180deg, #FFD97A, var(--accent-amber));
  color: #2A1B00;
  box-shadow: 0 5px 0 #C98F1E, 0 14px 26px rgba(255, 200, 87, 0.35);
}
.btn-race-mode:hover { filter: brightness(1.06); }
.btn-race-mode:active { box-shadow: 0 2px 0 #C98F1E, 0 6px 14px rgba(255, 200, 87, 0.25); }

/* --- Lider tablosu paneli (giriş ekranı + sonuç ekranı, ikisinde de aynı) --- */
.race-leaderboard-panel {
  margin-top: 26px;
  text-align: left;
}
.race-leaderboard-panel h3 {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--accent-amber);
}
.race-leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}
.race-leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card-soft);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.85rem;
}
.race-leaderboard-row.is-me {
  border: 1px solid var(--accent-amber);
  background: rgba(255, 200, 87, 0.12);
  /* Global tabloya girildiğinde satırın aşağıdan yukarı "yükselerek"
     yerine oturması için (kullanıcı isteği) — bkz. client.js
     renderRaceLeaderboardList(..., animateRise). JS satırı önce bir
     transform/opacity ile aşağıda-ve-soluk konumlandırıp bir sonraki
     karede bu stilleri temizliyor, bu transition o geçişi yumuşatıyor. */
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms ease, background 300ms ease;
}
.race-leaderboard-celebration {
  text-align: center;
  color: var(--accent-amber);
  font-weight: 800;
  font-size: 0.95rem;
  margin: -4px 0 14px;
  animation: race-countdown-pop 700ms ease;
}
.race-leaderboard-rank {
  width: 22px;
  flex-shrink: 0;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
}
.race-leaderboard-row:nth-child(1) .race-leaderboard-rank { color: #FFD700; }
.race-leaderboard-row:nth-child(2) .race-leaderboard-rank { color: #C9C9C9; }
.race-leaderboard-row:nth-child(3) .race-leaderboard-rank { color: #CD7F32; }
.race-leaderboard-row .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.65rem; color: #fff;
  flex-shrink: 0;
}
.race-leaderboard-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text-primary);
}
.race-leaderboard-score {
  font-weight: 800;
  color: var(--accent-amber);
  font-family: var(--font-display);
}
.race-leaderboard-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
  padding: 12px 0;
  list-style: none;
}

/* --- Yarış lobisi --- */
#race-lobby-room-code {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 6px;
  color: var(--accent-amber);
}
#race-lobby-player-list .lobby-player-row.is-ready {
  border: 1px solid var(--accent-mint);
}
.lobby-player-ready-badge {
  margin-left: auto;
  font-size: 1.1rem;
}

.race-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 20, 0.7);
  backdrop-filter: blur(2px);
}
.race-countdown-number {
  font-family: var(--font-display);
  font-size: 7rem;
  color: var(--accent-amber);
  text-shadow: 0 0 40px rgba(255, 200, 87, 0.6);
  animation: race-countdown-pop 1s ease;
}
@keyframes race-countdown-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  30%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Yarış oyun ekranı --- */
#screen-race-game {
  position: relative;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  align-items: stretch;
  justify-content: flex-start;
}

.race-live-scores {
  position: absolute;
  top: calc(14px + var(--safe-top));
  left: 14px;
  z-index: 5;
  background: rgba(21, 15, 40, 0.82);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  max-width: 160px;
  backdrop-filter: blur(4px);
}
.race-live-scores h4 {
  font-size: 0.62rem;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 6px;
  white-space: nowrap;
}
.race-live-scores-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.race-live-scores-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.race-live-scores-list li.is-me { color: var(--accent-amber); }
.race-live-scores-list .rls-name { overflow: hidden; text-overflow: ellipsis; max-width: 80px; }
.race-live-scores-list li.is-disconnected { opacity: 0.45; text-decoration: line-through; }

.race-game-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: calc(30px + var(--safe-top));
  margin-bottom: 18px;
}

.race-timer-number {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--text-primary);
  min-width: 1.6em;
  text-align: center;
  transition: color 200ms ease;
}
.race-timer-number.race-timer-danger { color: var(--accent-coral); }
/* Son 10 saniye: her saniye değiştiğinde büyüyüp küçülen "nabız" efekti
   (kullanıcı isteği: "rakamlar düştükçe büyür sonra küçülür rakam
   değişince yine büyür") — JS her saniye .race-timer-pulse class'ını
   kaldırıp yeniden ekleyerek animasyonu yeniden tetikler. */
@keyframes race-timer-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}
.race-timer-number.race-timer-pulse {
  animation: race-timer-pulse 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.race-own-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 700;
}
.race-own-score strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent-amber);
}

.race-game-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

#race-current-word {
  font-family: var(--font-display);
  font-size: 2.2rem;
  letter-spacing: 2px;
  color: var(--text-primary);
  text-shadow: 0 2px 12px rgba(255, 200, 87, 0.35);
}

#race-word-form { width: 100%; max-width: 360px; }

.race-btn-leave {
  position: absolute;
  /* Sağ üstteki sabit ses+dil düğmeleri (.sound-controls, z-index:998,
     tüm ekranlarda görünür) TAM bu köşeyi kaplıyor — aynı satıra
     koyarsak üst üste biner (Playwright ekran görüntüsüyle yakalandı).
     Onların altına, temiz bir boşlukla yerleştiriliyor. */
  top: calc(62px + var(--safe-top));
  right: 14px;
  z-index: 5;
}

/* Yanlış/sözlükte olmayan kelime: TÜM EKRAN çok hızlı ve sert bir kere
   sarsılır (kullanıcı isteği: "çok hızlı gerçekleşsin") — duel modundaki
   sürekli/yavaş "screen-danger-shake" (son 5sn uyarısı) ile KARIŞTIRILMASIN,
   bu tamamen ayrı, tek seferlik ve çok daha hızlı bir efekt. */
@keyframes race-wrong-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-10px) rotate(-1deg); }
  30% { transform: translateX(9px) rotate(1deg); }
  45% { transform: translateX(-7px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(2px); }
}
/* Yarış VE Bomba ekranlarının ikisi de "yanlış kelime" tepkisi için aynı
 * body class'ını ve keyframe'i paylaşıyor (bkz. client.js
 * triggerWrongWordFeedback) — o an aktif olan ekran hangisiyse titreşen
 * odur, ikisi asla aynı anda aktif olmadığı için çakışma riski yok. */
body.race-wrong-shake #screen-race-game,
body.race-wrong-shake #screen-bomb-game {
  animation: race-wrong-shake 180ms linear;
}
#race-input-word.input-shake,
#bomb-input-word.input-shake { animation: shake-x 320ms ease; border-color: var(--accent-coral); }

/* --- Yarış sonuç ekranı: podyum --- */
.race-results-card { padding-top: 30px; }

.race-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 10px;
}

.race-podium-place {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
}

.race-podium-avatar-wrap { margin-bottom: 6px; }
.race-podium-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; color: #fff;
  border: 3px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--accent-amber);
}
.race-podium-1 .race-podium-avatar { width: 64px; height: 64px; box-shadow: 0 0 0 3px #FFD700; }

.race-podium-name {
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--text-primary);
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-podium-score {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent-amber);
  margin-bottom: 6px;
}

.race-podium-box {
  width: 100%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.race-podium-box-1 {
  height: 92px;
  background: linear-gradient(180deg, #FFE07A, #FFD700 60%, #C9A227);
}
.race-podium-box-2 {
  height: 66px;
  background: linear-gradient(180deg, #E6E6E6, #C9C9C9 60%, #9B9B9B);
}
.race-podium-box-3 {
  height: 48px;
  background: linear-gradient(180deg, #E8A87C, #CD7F32 60%, #9C5A22);
}

.race-podium-crown {
  position: absolute;
  top: -26px;
  font-size: 1.8rem;
  animation: emoji-bounce 900ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.race-podium-rest {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
}
.race-podium-rest li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card-soft);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.85rem;
}
.race-podium-rest .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.65rem; color: #fff;
  flex-shrink: 0;
}
.race-podium-rest .rp-rank { width: 20px; text-align: center; color: var(--text-muted); font-weight: 800; }
.race-podium-rest .rp-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-podium-rest .rp-score { font-weight: 800; color: var(--accent-amber); }

.race-solo-result { margin: 20px 0 26px; }
.race-solo-score {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--accent-amber);
  text-shadow: 0 2px 16px rgba(255, 200, 87, 0.4);
}
.race-solo-stats {
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 4px;
}
.race-solo-rank {
  color: var(--text-primary);
  font-weight: 800;
  margin-top: 10px;
}

@media (max-width: 380px) {
  .race-podium-place { width: 76px; }
  .race-podium-avatar { width: 44px; height: 44px; }
  .race-podium-1 .race-podium-avatar { width: 54px; height: 54px; }
  .race-timer-number { font-size: 2.1rem; }
}

/* ============================================================================
   SAATLİ BOMBA MODU — kırmızı/turuncu bir "tehlike" paleti, diğer iki modun
   renklerinden (mor=düello, amber=yarış) kasıtlı olarak farklı.
============================================================================ */

.btn-bomb-mode {
  margin-top: 12px;
  background: linear-gradient(180deg, #FF8A6E, var(--accent-coral));
  color: #fff;
  box-shadow: 0 5px 0 var(--accent-coral-dim), 0 14px 26px rgba(255, 107, 107, 0.35);
}
.btn-bomb-mode:hover { filter: brightness(1.06); }
.btn-bomb-mode:active { box-shadow: 0 2px 0 var(--accent-coral-dim), 0 6px 14px rgba(255, 107, 107, 0.25); }

/* --- Lobi: düello lobisiyle aynı bileşenleri kullanıyor, sadece oda kodu
   rengi kırmızı/turuncu tonuna çekildi --- */
#bomb-lobby-room-code {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 6px;
  color: var(--accent-coral);
}

/* --- Oyun ekranı --- */
.bomb-screen {
  position: relative;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  align-items: stretch;
  justify-content: flex-start;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 107, 107, 0.08), transparent 60%);
}

/* Oyuncular artık masanın etrafında GERÇEK bir daire üzerinde oturuyor
   (eskiden yatay kaydırmalı bir şeritti) — ortadaki dev bombayı elden ele
   dolaşan gerçek bir "sıcak patates" gibi hissettirsin diye. Konum
   (left/top %) her render'da JS tarafından açı/yarıçap hesabıyla
   basılıyor (bkz. client.js renderBombPlayerStrip), CSS sadece merkezleme
   ve görünümden sorumlu. */
.bomb-circle-arena {
  position: relative;
  width: min(80vw, 340px);
  height: min(80vw, 340px);
  margin: calc(56px + var(--safe-top)) auto 4px;
  flex-shrink: 0;
}

.bomb-player-strip {
  position: absolute;
  inset: 0;
}

.bomb-player-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-card-soft);
  border: 1px solid var(--border-soft);
  min-width: 64px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.bomb-player-chip .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; color: #fff;
  flex-shrink: 0;
  position: relative;
}
.bomb-player-chip .bomb-chip-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bomb-player-chip .bomb-chip-hearts { font-size: 0.7rem; letter-spacing: 1px; }

/* Bombayı elinde tutan oyuncunun kartı KIRMIZI YANIP SÖNER — herkesin
   ekranında, "bomba şu an kimde" bir bakışta anlaşılsın diye (gizli olan
   sadece SÜREDİR, kimde olduğu değil). */
.bomb-player-chip.is-holder {
  z-index: 2;
  transform: translate(-50%, -50%) scale(1.14);
  animation: bomb-holder-blink-red 900ms ease-in-out infinite;
}
.bomb-player-chip.is-holder .bomb-chip-name { color: #fff; font-weight: 800; }
@keyframes bomb-holder-blink-red {
  0%, 100% {
    border-color: rgba(255, 46, 46, 0.9);
    background: rgba(255, 46, 46, 0.28);
    box-shadow: 0 0 0 3px rgba(255, 46, 46, 0.55), 0 0 22px rgba(255, 46, 46, 0.45);
  }
  50% {
    border-color: rgba(255, 46, 46, 0.35);
    background: var(--bg-card-soft);
    box-shadow: 0 0 0 1px rgba(255, 46, 46, 0.15), 0 0 6px rgba(255, 46, 46, 0.1);
  }
}
.bomb-player-chip.is-eliminated { opacity: 0.35; filter: grayscale(1); }

.bomb-game-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

/* Bomba artık sabit merkezde değil — sırası kimdeyse onun YANINA (aynı
   açıda ama dairenin merkezine doğru çekilmiş bir noktaya) taşınıyor.
   `.bomb-icon-anchor` konumu (left/top %) her render'da JS tarafından
   hesaplanıyor (bkz. client.js renderBombPlayerStrip — bombRadius =
   koltuk yarıçapı - 24 puan); `left`/`top` geçişi animasyonlu olduğu için
   bomba el değiştirince yumuşakça kayarak taşınır.
   ÖNEMLİ (2026-09-11 düzeltmesi): eskiden bomba koltuğun TAM ÜZERİNE
   sabit bir piksel ofsetiyle ("yukarı kaydırılmış") yerleştiriliyordu —
   bu, gerçek bir telefonda (dar/kısa görünüm alanı) oyuncunun yüzünü/
   koltuk kartını KAPATAN gerçek bir bug'a yol açtı (kullanıcı ekran
   görüntüsüyle bildirdi). Artık ofset ekran pikseli DEĞİL, dairenin
   kendi yüzdesi cinsinden (merkeze doğru) hesaplandığı için bomba HER
   ZAMAN dairenin güvenli iç bölgesinde kalır, cihaz/ekran boyutundan
   bağımsız olarak asla koltuk kartıyla çakışmaz. */
.bomb-icon-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: left 320ms ease, top 320ms ease;
  pointer-events: none;
}

/* Kullanıcı isteğiyle biraz küçültüldü (5.6rem → 4.1rem). */
.bomb-icon {
  position: relative;
  font-size: 4.1rem;
  filter: drop-shadow(0 8px 18px rgba(255, 107, 107, 0.4));
  animation: bomb-idle-sway 2.4s ease-in-out infinite;
}
@keyframes bomb-idle-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
/* Fitil kritik anına girdiğinde (bkz. bomb_fuse_critical) — GERÇEK süre
   BİLGİSİ vermeden, sadece "her an patlayabilir" gerilimini artıran bir
   ipucu. Ekranı olduğu gibi kırmızıya boyayıp panik hissi verir. */
.bomb-icon.is-critical {
  animation: bomb-critical-shake 220ms ease-in-out infinite;
}
@keyframes bomb-critical-shake {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(6deg) scale(1.08); }
}
body.bomb-critical-flash #screen-bomb-game {
  animation: bomb-critical-bg-pulse 500ms ease-in-out infinite;
}
@keyframes bomb-critical-bg-pulse {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(255, 60, 60, 0.12); }
}

/* Bombayı elinde tutan oyuncunun KENDİ ekranı hafifçe titrer — gerçek bir
   bombayı elinde tutuyormuş hissi versin diye (diğer oyuncuların
   ekranında bu efekt YOK, sadece o oyuncunun kendi client'ında
   isMyTurn===true iken açılıyor, bkz. client.js renderBombState). Genlik
   bilinçli olarak çok düşük tutuldu (±1-2px) — okumayı zorlaştırmasın,
   sadece hissedilsin. */
@keyframes bomb-holding-tremble {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(1px, -1.5px); }
  75% { transform: translate(-1px, -1px); }
}
body.bomb-holding-tremble #screen-bomb-game {
  animation: bomb-holding-tremble 160ms steps(2, end) infinite;
}
/* Bomba elindeyken AYNI ZAMANDA kritik ana da girilmişse (fitil bitmek
   üzere) iki efekt birleşip hem kızarma hem titreme birlikte oynamalı —
   tek bir selector'ün `animation` kısayolu diğerinin üzerine yazacağı
   için (aynı elementte iki ayrı body class'ı aynı özelliği paylaşamaz),
   bu durum için özel, daha yüksek özgüllükte birleşik bir kural gerekiyor. */
body.bomb-critical-flash.bomb-holding-tremble #screen-bomb-game {
  animation: bomb-critical-bg-pulse 500ms ease-in-out infinite, bomb-holding-tremble 160ms steps(2, end) infinite;
}

#bomb-current-word { font-family: var(--font-display); font-size: 2.1rem; letter-spacing: 2px; }

.bomb-turn-hint {
  font-weight: 800;
  color: var(--text-muted);
  min-height: 1.4em;
}
.bomb-turn-hint.is-my-turn { color: var(--accent-coral); }

#bomb-word-form { width: 100%; max-width: 400px; display: flex; gap: 8px; }
#bomb-word-form input { flex: 1; min-width: 0; }
/* .btn'in varsayılan width:100%'ü, aynı satırda ÜÇ eleman (kutu+mikrofon+
   gönder) olduğunda gönder düğmesinin gereğinden çok yer isteyip taşmasına
   sebep oluyordu (ekran görüntüsüyle yakalandı — "Gönder" kırpılmış
   görünüyordu). join-form-row'daki AYNI çözüm burada da uygulanıyor. */
#bomb-word-form button[type="submit"] { width: auto; flex-shrink: 0; padding-left: 18px; padding-right: 18px; }

/* Patlama: "yanlış kelime" sarsıntısından (180ms, hafif) daha BÜYÜK ve
   daha uzun bir efekt — gerçek bir patlamanın ağırlığını hissettirsin. */
@keyframes bomb-explosion-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-14px, 6px) rotate(-2deg); }
  20% { transform: translate(12px, -8px) rotate(2deg); }
  30% { transform: translate(-10px, 8px) rotate(-2deg); }
  40% { transform: translate(10px, -6px) rotate(1deg); }
  50% { transform: translate(-8px, 4px) rotate(-1deg); }
  65% { transform: translate(6px, -3px) rotate(1deg); }
  80% { transform: translate(-3px, 2px) rotate(0); }
}
body.bomb-explosion-shake #screen-bomb-game {
  animation: bomb-explosion-shake 420ms ease-in-out;
}
.bomb-explosion-flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.bomb-explosion-flash.flash-active {
  animation: bomb-flash-fade 350ms ease-out;
}
@keyframes bomb-flash-fade {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

@media (max-width: 380px) {
  .bomb-circle-arena { width: min(84vw, 260px); height: min(84vw, 260px); }
  .bomb-icon { font-size: 3.1rem; }
  .bomb-player-chip { min-width: 52px; padding: 6px 7px; }
  .bomb-player-chip .bomb-chip-name { max-width: 46px; font-size: 0.6rem; }
}