html, body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button, input {
  font-family: inherit;
}

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

:root {
  /* ---------- FONT ---------- */
  --font-display: "Baloo 2", "Segoe UI", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;

  /* ---------- NÖTR / METİN (temadan bağımsız) ---------- */
  --text-1: #23202F;
  --text-2: #5A5A6B;
  --text-muted: #8B8B99;
  --text-faint: #AFAFBA;

  --surface: #ffffff;
  --input-border: #DDDBE6;

  /* ---------- SEMANTİK DURUM (3 temada da SABİT) ----------
     Bunlar anlam taşır (doğru / şüpheli / yanlış).
     Asla temaya boyanmaz, yoksa anlam kaybolur. */
  --ok: #1A7A3A;
  --ok-bg: #DDEFE1;
  --warn: #8A6209;
  --warn-bg: #FAF0D2;
  --bad: #A32222;
  --bad-bg: #FBE3E3;

  /* ---------- KÖŞE ---------- */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---------- TÜRETİLMİŞ (tema değişince otomatik uyar) ----------
     --shadow-rgb temaya göre değişir, bunlar peşinden gelir.
     Bu yüzden gölge/çizgi için tema başına override GEREKMEZ. */
  --line: rgba(var(--shadow-rgb), 0.10);
  --line-strong: rgba(var(--shadow-rgb), 0.16);

  --shadow-sm: 0 1px 3px rgba(var(--shadow-rgb), 0.10);
  --shadow-md: 0 4px 12px rgba(var(--shadow-rgb), 0.14);
  --shadow-lg: 0 12px 28px rgba(var(--shadow-rgb), 0.22);
  --shadow-brand: 0 6px 16px rgba(var(--shadow-rgb), 0.32);
  --shadow-bubble: 0 2px 6px rgba(var(--shadow-rgb), 0.09);
  --bubble-border: rgba(var(--shadow-rgb), 0.09);
    /* Gradient üstünde duran beyaz katman — temadan bağımsız */
  --on-grad-fill: rgba(255, 255, 255, 0.14);
  --on-grad-fill-strong: rgba(255, 255, 255, 0.2);
}

/* =========================================================
   TEMA A — ŞARAP VE GECE   (varsayılan)
   ========================================================= */
:root,
[data-theme="sarap"] {
  --brand: #1E1B5C;
  --brand-deep: #8E1537;
  --brand-tint: #E9E7F5;

  --grad-app: linear-gradient(135deg, #8E1537, #1E1B5C);
  --grad-brand: linear-gradient(135deg, #8E1537, #1E1B5C);
  --btn-primary-bg: var(--grad-brand);

  --accent: #FFB020;
  --accent-rgb: 255, 176, 32;
  --accent-ink: #B57A00;
  --accent-on: #4A2E00;
  --accent-bg: #FFF3DA;

  --shadow-rgb: 30, 27, 92;

  --surface-sunken: #F2F0F6;
  --surface-hover: #E9E6F0;

  --chat-bg: #F7F4FA;
  --chat-bubble-me: #EDE8F7;
  --chat-bubble-them: #ffffff;
}

/* =========================================================
   TEMA B — GECE YARISI
   ========================================================= */
[data-theme="gece"] {
  --brand: #332878;
  --brand-deep: #221B5E;
  --brand-tint: #E9E8F7;

  --grad-app: linear-gradient(135deg, #14113F, #332878);
  --grad-brand: linear-gradient(135deg, #221B5E, #332878);
  --btn-primary-bg: #E0344F; /* B'de birincil buton düz bordo */

  --accent: #E0344F;
  --accent-rgb: 224, 52, 79;
  --accent-ink: #C42440;
  --accent-on: #ffffff;
  --accent-bg: #FCE7EA;

  --shadow-rgb: 20, 17, 63;

  --surface-sunken: #F1F1F9;
  --surface-hover: #E7E7F2;

  --chat-bg: #F5F5FC;
  --chat-bubble-me: #E7E6F7;
  --chat-bubble-them: #ffffff;
}

/* =========================================================
   TEMA C — KADİFE
   ========================================================= */
[data-theme="kadife"] {
  --brand: #A32046;
  --brand-deep: #7D1435;
  --brand-tint: #F7E9EE;

  --grad-app: linear-gradient(135deg, #4A0C24, #A32046);
  --grad-brand: linear-gradient(135deg, #A32046, #4A0C24);
  --btn-primary-bg: var(--grad-brand);

  --accent: #F2D08A;
  --accent-rgb: 242, 208, 138;
  --accent-ink: #8A6414;
  --accent-on: #4A0C24;
  --accent-bg: #FAF1DE;

  --shadow-rgb: 74, 12, 36;

  --surface-sunken: #F6F1F3;
  --surface-hover: #EEE6EA;

  --chat-bg: #FBF5F8;
  --chat-bubble-me: #F6E6EC;
  --chat-bubble-them: #ffffff;
}

body {
  font-family: var(--font-body);
  background: var(--grad-app);
  color: var(--text-1);

  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  justify-content: center;

  align-items: center;
  align-items: safe center;

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


body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--grad-app);
  z-index: -1;
}

.screen {
  display: none;
  width: 100%;
}

.screen.active {
  display: block;
}

.container {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 32px 24px;
  width: 100%;
  max-width: 380px;
  margin: 20px auto;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

/* ANA EKRAN */
.game-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  color: var(--brand-deep);
  margin-bottom: 10px;
}

.subtitle {
  color: var(--text-2);
  margin-bottom: 30px;
  font-size: 14px;
}

.btn {
  border: none;
  border-radius: var(--r-md);
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: white;
  box-shadow: var(--shadow-brand);
}

.btn-secondary {
  background: var(--accent);
  color: var(--accent-on);
  margin-top: 20px;
  box-shadow: 0 6px 16px rgba(var(--shadow-rgb), 0.22);
}

/* OYUN EKRANI */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--grad-brand);
  padding: 14px 18px;
  color: #ffffff;
}

.game-body {
  padding: 20px 18px;
}

.round-info {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--r-xs);
  background: var(--on-grad-fill-strong);
  white-space: nowrap;
}

/* Gradient şeridin üstünde ters çevrildi: kutu beyaz, harf marka renginde */
.letter-box {
  background: #ffffff;
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timer {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}

/* Son 10 saniye. JS bu sınıfı ekliyor. */
.timer.is-urgent {
  color: var(--accent);
  animation: timerPulse 1s ease-in-out infinite;
}

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

.category-row {
  text-align: left;
  margin-bottom: 14px;
}

.category-row label {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 4px;
  font-weight: 600;
  transition: font-size 0.15s ease, color 0.15s ease;
}

.category-row input,
.category-row [contenteditable] {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--input-border);
  border-radius: var(--r-sm);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
  font-family: inherit;
  background: white;
  min-height: 46px;
  cursor: text;
}

.category-row input:focus,
.category-row [contenteditable]:focus {
  border-color: var(--brand);
}

/* Placeholder efekti */
.category-row [contenteditable]:empty::before {
  content: "...";
  color: var(--text-faint);
  pointer-events: none;
}

.category-row.active label {
  font-size: 15px;
  color: var(--brand);
  transition: font-size 0.15s ease, color 0.15s ease;
}

/* ISIM VE ISIM ALT KATEGORİLERİ */
.isim-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: 3px;
}

.isim-group .option-chip {
  border-radius: var(--r-xs);
  margin: 0;
  background: transparent;
  border: 2px solid transparent;
  box-shadow: none;
}

.isim-group .option-chip.selected {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.18);
}

/* SONUÇ EKRANI */
.results {
  text-align: left;
  margin: 20px 0;
}

.result-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
}

/* ONBOARDING */
.onboarding-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 24px;
  color: var(--brand-deep);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.avatar-option {
  font-size: 28px;
  background: var(--surface-sunken);
  border: 3px solid transparent;
  border-radius: var(--r-md);
  padding: 12px 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.avatar-option.selected {
  border-color: var(--brand);
  background: var(--brand-tint);
  transform: scale(1.05);
}

.nickname-input {
  width: 100%;
  padding: 14px;
  border: 2px solid var(--input-border);
  border-radius: var(--r-md);
  font-size: 16px;
  text-align: center;
  outline: none;
  margin-bottom: 20px;
  transition: border-color 0.15s ease;
}

.nickname-input[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}

.nickname-input:focus {
  border-color: var(--brand);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* ANA EKRAN */
.profile-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  padding: 8px 16px;
  width: fit-content;
  margin: 0 auto 24px;
  box-shadow: var(--shadow-sm);

  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

.profile-card:hover {
  box-shadow: var(--shadow-md);
}

.profile-card:active {
  transform: scale(0.97);
}

.profile-avatar {
  font-size: 20px;
}

.profile-nickname {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.btn-outline {
  background: white;
  color: var(--brand);
  border: 2px solid var(--brand);
  margin-top: 12px;
}

.join-code-area {
  display: none;
  margin-top: 16px;
  gap: 10px;
  flex-direction: column;
}

.join-code-area.open {
  display: flex;
}

.room-code-input {
  width: 100%;
  padding: 14px;
  border: 2px solid var(--input-border);
  border-radius: var(--r-md);
  font-size: 18px;
  text-align: center;
  letter-spacing: 4px;
  text-transform: uppercase;
  outline: none;
  transition: border-color 0.15s ease;
}

.room-code-input[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}

.room-code-input:focus {
  border-color: var(--brand);
}

/* ODA AYARLARI */
.screen-title {
  font-size: 22px;
  color: var(--brand-deep);
  margin-bottom: 24px;
}

.setting-group {
  text-align: left;
  margin-bottom: 22px;
}

.setting-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 10px;
}

.option-row {
  display: flex;
  gap: 8px;
}

.option-row.wrap {
  flex-wrap: wrap;
}

.option-chip {
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  padding: 12px 16px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.option-chip.selected {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.18);
}

/* STOP modu - süre seçici */
.duration-row {
  display: flex;
  align-items: stretch;  /* stretch: divider tam yüksekliğe uzasın */
  gap: 8px;
  width: 100%;
}

.duration-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.duration-col .option-row {
  flex-wrap: wrap;
}

.duration-col .option-chip {
  width: 60px;        /* fixed genişlik — her iki taraf eşit */
  padding: 12px 0;    /* yatay padding'i sıfırla, metin ortada kalsın */
  text-align: center;
}

.duration-mode-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.option-chip.stop-chip.selected {
  background: var(--accent-bg);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

.btn-text {
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 8px;
}

/* LOBİ EKRANI */
.lobby-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.room-code-display {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 6px;
  color: var(--brand);
  margin-bottom: 12px;
}

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

.room-code-display {
  margin-bottom: 0;
}

.copy-code-icon-btn {
  background: var(--surface-sunken);
  border: none;
  color: var(--brand);
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.lobby-info-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.lobby-info-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 5px 10px;
  border-radius: var(--r-sm);
}

.lobby-players {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.lobby-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: 10px 14px;
  text-align: left;
}

.lobby-player-row .player-avatar {
  font-size: 22px;
}

.lobby-player-row .player-name {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
}

.lobby-player-row .host-badge {
  font-size: 11px;
  background: var(--brand);
  color: white;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  font-weight: 600;
}

/* TUR BİLGİSİ */
.round-info {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-sunken);
  padding: 6px 12px;
  border-radius: var(--r-sm);
}

.round-result-title {
  font-size: 14px;
  color: var(--brand);
  margin: 16px 0 8px;
}

.round-result-title:first-child {
  margin-top: 0;
}

/* KATEGORİ SONUÇ EKRANI - SOHBET */
.chat-container {
  padding: 0;
  overflow: hidden;
  max-width: 380px;
}

.chat-header {
  background: var(--grad-brand);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}

.chat-header-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

.chat-header-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.chat-header-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.chat-header-sub {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.2;
  margin-top: 2px;
}

.chat-header-badge {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.18);
  padding: 4px 9px;
  border-radius: var(--r-sm);
  font-weight: 600;
  white-space: nowrap;
}

.chat-body {
  background: var(--chat-bg);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: min(280px, 38dvh);
  max-height: clamp(220px, 52dvh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-row.chat-row-me {
  align-items: flex-end;
}

.chat-row.chat-row-them {
  align-items: flex-start;
}

.chat-author {
  font-size: 13px;
  font-weight: 700;
  margin: 0 6px 1px;
  color: var(--text-2);
}

.chat-bubble {
  background: var(--chat-bubble-them);
  border: 2px solid var(--bubble-border);
  border-radius: 18px 18px 18px 6px;
  padding: 10px 15px;
  max-width: 80%;
  box-shadow: var(--shadow-bubble);
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-row-me .chat-bubble {
  background: var(--chat-bubble-me);
  border-radius: 18px 18px 6px 18px;
}

.chat-bubble-word {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  word-break: break-word;
}

.chat-bubble-word.empty {
  color: var(--text-muted);
  font-style: italic;
}

.chat-bubble-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.chat-legend {
  text-align: center;
  margin: 4px 0;
}

.chat-legend span {
  font-size: 12px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

.chat-footer {
  padding: 10px 12px 16px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.chat-footer .btn {
  margin: 0;
}

.chat-footer-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 0 16px;
  background: var(--surface);
}

/* TUR ÖZET EKRANI */
.round-summary-category {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  margin: 16px 0 6px;
}

.round-summary-category:first-child {
  margin-top: 0;
}

/* TUR ÖZET - oyuncu başlığı */
.round-summary-player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 4px;
  padding: 0 2px;
}
.round-summary-player-name {
  font-weight: 700;
  font-size: 15px;
}
.round-summary-player-score {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-tint);
  padding: 3px 10px;
  border-radius: var(--r-sm);
}

/* result-item sağ taraf (puan + ikon) */
.result-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.result-points {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}

/* FİNAL SKOR TABLOSU */
.final-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-sunken);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.final-rank { font-size: 20px; width: 28px; text-align: center; }
.final-player-info { flex: 1; text-align: left; }
.final-player-name { font-weight: 700; font-size: 15px; }
.final-player-total { font-size: 13px; color: var(--text-muted); }
.final-score-badge { font-size: 18px; font-weight: 700; color: var(--brand); }

/* TYPING ANIMATION */
.chat-bubble-typing {
  padding: 10px 16px;
}

.typing-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}

.typing-dots span {
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  animation: typingBounce 1.2s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- SOHBET HAREKETLERİ ----
   Satır "yazıyor" göstergesiyle birlikte yandan süzülerek giriyor,
   gerçek baloncuk onun yerine oturunca ayrıca "pat" diye açılıyor.
   İkon ve tepki (parıltı/sarsıntı) baloncuktan SONRA geliyor: aynı
   anda gelince ✅/❌ göze çarpmıyordu.
   Hareket azaltma tercihi global @media bloğuyla zaten kapanıyor. */
.chat-row {
  animation: chatRowIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.chat-row-them { --chat-row-from: -14px; }
.chat-row-me { --chat-row-from: 14px; }

@keyframes chatRowIn {
  from { opacity: 0; transform: translate(var(--chat-row-from, 0), 6px); }
  to { opacity: 1; transform: translate(0, 0); }
}

.chat-bubble-reveal {
  animation: chatBubblePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

@keyframes chatBubblePop {
  from { opacity: 0; transform: scale(0.86); }
  60% { opacity: 1; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

.chat-bubble-reveal .chat-bubble-icon {
  animation: chatIconStamp 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) 0.16s backwards;
}

@keyframes chatIconStamp {
  from { opacity: 0; transform: scale(2.1) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* Doğru cevap: dışa doğru bir kez yeşil halka.
   Sadece box-shadow oynatıyor, yani pop'un transform'una karışmıyor. */
.chat-bubble-reveal.chat-bubble-ok {
  animation:
    chatBubblePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    chatGlowOk 0.75s ease-out 0.16s backwards;
}

@keyframes chatGlowOk {
  0% { box-shadow: var(--shadow-bubble), 0 0 0 0 rgba(26, 122, 58, 0.35); }
  35% { box-shadow: var(--shadow-bubble), 0 0 0 6px rgba(26, 122, 58, 0.22); }
  100% { box-shadow: var(--shadow-bubble), 0 0 0 12px rgba(26, 122, 58, 0); }
}

/* Yanlış cevap: kısa bir "hayır" sallaması. Gecikmesi pop'un bitişiyle
   aynı (0.3s) ve fill YOK: 'backwards' olsaydı bekleme sırasında pop'un
   transform'unu ezerdi, 'forwards' olsaydı bitince transform elde kalıp
   emote'un :active geri bildirimini öldürürdü. */
.chat-bubble-reveal.chat-bubble-bad {
  animation:
    chatBubblePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    chatShake 0.36s ease-in-out 0.3s;
}

@keyframes chatShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

/* İTİRAZ SİSTEMİ */
.dispute-widget {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;

  background: var(--surface);
  border: 1.5px solid var(--bubble-border);
  border-radius: 22px;
  box-shadow: var(--shadow-bubble);

  padding: 5px 6px 6px;
  margin: 6px 0 0 6px;
  width: auto;
  animation: disputeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes disputeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-row-me .dispute-widget {
  align-self: flex-end;
  margin: 6px 6px 0 0;
}

.dispute-buttons {
  display: flex;
  gap: 6px;
}

.dispute-btn {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dispute-btn:disabled {
  cursor: default;
}

.dispute-btn-face {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease,
    transform 0.12s ease;
}

.dispute-face-yanlis {
  background: var(--bad-bg);
  color: var(--bad);
}
.dispute-face-yazim {
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 15px;
}
.dispute-face-dogru {
  background: var(--ok-bg);
  color: var(--ok);
}

.dispute-widget-voted .dispute-btn-face {
  opacity: 0.45;
}
.dispute-widget-voted .dispute-btn.chosen .dispute-btn-face {
  opacity: 1;
  color: var(--surface);
}
.dispute-btn.chosen .dispute-face-yanlis {
  background: var(--bad);
}
.dispute-btn.chosen .dispute-face-yazim {
  background: var(--warn);
}
.dispute-btn.chosen .dispute-face-dogru {
  background: var(--ok);
}

.dispute-widget-owner .dispute-btn-face {
  background: var(--surface-sunken);
  color: var(--text-faint);
}

.dispute-btn-count {
  position: absolute;
  top: 0;
  right: 0;

  min-width: 18px;
  height: 18px;
  padding: 0 4px;

  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);

  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);

  display: flex;
  align-items: center;
  justify-content: center;
}

.dispute-btn-count[hidden] {
  display: none;
}

.dispute-btn-count.chosen {
  border-color: currentColor;
}

/* ---- SAYAÇ BARI ---- */
.dispute-bar {
  height: 3px;
  margin-top: 6px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.dispute-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--brand);
  border-radius: var(--r-pill);
  transform-origin: left center;
  animation: dispute-countdown 10s linear forwards;
}

@keyframes dispute-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* ---- SONUÇ ---- */
.dispute-widget-done {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 61px;
  justify-content: center;
  align-items: flex-start;
}

.dispute-widget-mirrored {
  min-height: 0;
}

.dispute-result {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--r-pill);
}

.dispute-result-dogru {
  background: var(--ok-bg);
  color: var(--ok);
}
.dispute-result-yazim {
  background: var(--warn-bg);
  color: var(--warn);
}
.dispute-result-yanlis {
  background: var(--bad-bg);
  color: var(--bad);
}

.dispute-result-note {
  font-size: 11px;
  color: var(--text-faint);
  margin: 3px 0 0 8px;
}

@media (hover: hover) and (pointer: fine) {
  .dispute-btn:not(:disabled):hover .dispute-btn-face {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dispute-btn-face {
    transition: none;
  }
  .dispute-btn:not(:disabled):hover .dispute-btn-face {
    transform: none;
  }
}

/* HARF SEÇİM EKRANI */
.letter-picker-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin: 24px 0 8px;
}

.letter-picker-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.letter-pick-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--r-md);
  border: 2px solid var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.letter-pick-btn:disabled {
  border-color: var(--line-strong);
  background: var(--surface-sunken);
  color: var(--text-faint);
  cursor: default;
  transform: none;
}

/* ---- MIXX TOGGLE ---- */
.mixx-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mixx-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mixx-toggle-desc {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.settings-legal-link {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  display: block;
  width: 51px;
  height: 31px;
  background: var(--input-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 25px;
  height: 25px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: left 0.2s ease;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--brand);
}

.toggle-switch input:checked + .toggle-track::after {
  left: 23px;
}

/* MIXX modunda sönen chip'ler */
.option-chip.mixx-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* LOBİ EKRANI - HAZIRLIK DURUMU */
.ready-toggle-btn {
  border: none;
  border-radius: var(--r-xs);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.ready-toggle-btn.is-ready {
  background: var(--ok-bg); 
  color: var(--ok);
}

.ready-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.ready-badge.is-ready {
  background: var(--ok-bg); 
  color: var(--ok);
}

/* ---- AÇIK ODALAR ---- */
.rooms-subtitle {
  color: var(--text-2);
  font-size: 13px;
  margin-bottom: 20px;
}

.rooms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  min-height: 60px;
}

.room-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 12px 14px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.room-card-avatar {
  font-size: 26px;
  flex-shrink: 0;
}

.room-card-info {
  flex: 1;
  min-width: 0;
}

.room-card-host {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.room-card-join {
  flex-shrink: 0;
  background: var(--grad-brand);
  color: #ffffff;
  border: none;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.room-card-join:active {
  filter: brightness(0.94);
}

.room-card-join:disabled {
  opacity: 0.5;
  cursor: default;
}

.rooms-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

/* ---- PROFİL SATIRI + DİŞLİ ---- */
.profile-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 24px;
  width: fit-content;
}

.profile-row .profile-card {
  margin: 0;
}

.icon-btn {
  background: var(--surface);
  border: none;
  border-radius: var(--r-pill);
  width: 36px;
  height: 36px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}

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

/* ---- TEMA SEÇİCİ ---- */
.theme-row {
  display: flex;
  gap: 10px;
}

.theme-swatch {
  flex: 1;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  padding: 10px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.theme-chip {
  display: block;
  width: 100%;
  height: 38px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.theme-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}

.theme-swatch.selected {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.theme-swatch.selected .theme-name {
  color: var(--brand);
}

/* =========================================================
   DOKUNMATİK / KLAVYE / İŞARETLEME
   ========================================================= */

/* ---- Hover: sadece gerçek imleci olan cihazlarda ---- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn-primary:hover { box-shadow: 0 9px 22px rgba(var(--shadow-rgb), 0.42); }
  .btn-outline:hover { background: var(--brand-tint); }
  .btn-text:hover { color: var(--text-1); transform: none; }

  .option-chip:hover,
  .isim-group .option-chip:hover,
  .avatar-option:hover,
  .copy-code-icon-btn:hover { background: var(--surface-hover); }

  .letter-pick-btn:hover:not(:disabled) {
    background: var(--brand);
    color: white;
    transform: scale(1.08);
  }

  .room-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .icon-btn:hover { box-shadow: var(--shadow-md); }
  .theme-swatch:hover { background: var(--surface-hover); }
}

/* ---- Basma geri bildirimi ---- */
.option-chip:active,
.avatar-option:active,
.theme-swatch:active,
.letter-pick-btn:active:not(:disabled),
.copy-code-icon-btn:active { transform: scale(0.96); }

.room-card:active { transform: scale(0.99); }

/* ---- Klavye odağı ---- */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.chat-header :focus-visible,
.btn-primary:focus-visible {
  outline-color: #ffffff;
}

/* ---- Küçük ikon butonlarının dokunma alanı ---- */
.icon-btn,
.copy-code-icon-btn { position: relative; }

.icon-btn::after,
.copy-code-icon-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---- Uzun takma ad taşmasın ---- */
.profile-nickname,
.room-card-nickname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

/* ---- Hareket azaltma tercihi ----*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   TUR ÖZET EKRANI
   ========================================================= */

/* Gradient başlık kenarlara değsin diye kartın kendi padding'i sıfırlanır.
   .chat-container da aynı işi yapıyor; ileride ikisi bu sınıfta
   birleştirilebilir. */
.container-flush {
  padding: 0;
  overflow: hidden;
}

.summary-head {
  background: var(--grad-brand);
  padding: 16px 16px 18px;
  color: #ffffff;
}

.summary-head-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.82;
  text-align: center;
  margin-bottom: 11px;
}

/* ---- Sıralama ---- */
.standings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.standing-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--on-grad-fill);
  border-radius: var(--r-sm);
  padding: 7px 9px;
}

.standing-row.is-leader {
  background: rgba(var(--accent-rgb), 0.24);
  box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), 0.6);
}

.standing-row.is-left {
  opacity: 0.5;
}

.standing-rank {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  width: 15px;
  opacity: 0.75;
  flex-shrink: 0;
}

.standing-row.is-leader .standing-rank {
  opacity: 1;
  color: var(--accent);
}

.standing-name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standing-delta {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--on-grad-fill-strong);
  flex-shrink: 0;
}

.standing-total {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 26px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Gövde ---- */
.summary-body {
  padding: 16px 18px 20px;
}

.summary-body .btn-primary {
  margin-top: 20px;
}

.btn-reveal {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--surface-sunken);
  border: none;
  border-radius: var(--r-md);
  padding: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  min-height: 46px;
}

.btn-reveal .chev {
  font-size: 11px;
  transition: transform 0.2s ease;
}

.btn-reveal[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* ---- Kategori akordeonu ---- */
.category-accordion {
  margin-top: 12px;
}

.cat-block {
  border-bottom: 1px solid var(--line);
}

.cat-block:last-child {
  border-bottom: none;
}

.cat-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 12px 2px;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  min-height: 46px;
}

.cat-name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-deep);
}

/* Kapalıyken bile kendi sonucunu görürsün — açma sebebi bu zaten */
.cat-mine {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.cat-chev {
  font-size: 10px;
  color: var(--text-faint);
  transition: transform 0.2s ease;
}

.cat-block.open .cat-chev {
  transform: rotate(180deg);
}

/* 0fr -> 1fr geçişi. Desteklemeyen tarayıcıda animasyon olmaz,
   açılıp kapanma yine çalışır. */
.cat-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}

.cat-block.open .cat-panel {
  grid-template-rows: 1fr;
}

.cat-panel-inner {
  overflow: hidden;
}

.cat-panel-pad {
  padding-bottom: 10px;
}

/* ---- Cevap satırı ---- */
.ans-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  margin-bottom: 4px;
  background: var(--surface-sunken);
}

/* O kategorinin en yüksek puanı */
.ans-row.is-best {
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1.5px rgba(var(--shadow-rgb), 0.18);
}

.ans-row.is-empty {
  background: transparent;
}

.ans-avatar {
  font-size: 14px;
  flex-shrink: 0;
}

.ans-word {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ans-row.is-empty .ans-word {
  font-weight: 600;
  font-style: italic;
  color: var(--text-faint);
}

.ans-points {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ans-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.summary-empty {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 14px 0;
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* =========================================================
   FİNAL SKOR
   ========================================================= */
.final-head {
  background: var(--grad-brand);
  color: #ffffff;
  padding: 18px 18px 22px;
  text-align: center;
}

.final-head-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 14px;
}

.final-winner-avatar {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 8px;
}

.final-winner-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
  word-break: break-word;
}

.final-winner-score {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), 0.24);
  box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), 0.6);
}

.final-body {
  padding: 16px 18px 20px;
}

/* Kazanan yukarıda gösterildi, buradaki liste 2. sıradan başlıyor */
.results {
  text-align: left;
  margin: 0 0 4px;
}

.final-score-row.is-left {
  opacity: 0.5;
}

.final-left-tag {
  font-size: 0.75em;
  color: var(--text-muted);
  font-weight: 600;
}

.final-body .btn-primary {
  margin-top: 16px;
}

/* ---- KUTLAMA SATIRI (sonuç ekranı) ---- */
.celebrate-bar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.celebrate-bar[hidden] {
  display: none;
}

.celebrate-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-2);

  background: var(--surface);
  border: none;
  box-shadow: inset 0 0 0 2px var(--line);
  border-radius: var(--r-pill);
  padding: 14px 12px;

  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    background 0.16s ease;
}

.celebrate-btn:not(:disabled):active {
  transform: scale(0.97);
}

.celebrate-emoji {
  font-size: 24px;
  line-height: 1;
}

.celebrate-count {
  font-size: 12px;
  font-weight: 800;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(var(--shadow-rgb), 0.08);
}

.celebrate-count[hidden] {
  display: none;
}

/* Alkış basılı durumdayken "eylem" olmaktan çıkıp "durum"a dönüyor —
   lobideki hazır butonuyla aynı dil. */
.celebrate-btn.is-on {
  background: var(--brand-tint);
  color: var(--brand);
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* Konfeti tek seferlik: basıldıktan sonra buton kilitleniyor. */
.celebrate-btn:disabled {
  cursor: default;
}

.celebrate-btn.is-spent {
  color: var(--ok);
  background: var(--ok-bg);
  box-shadow: inset 0 0 0 2px var(--ok);
  opacity: 1;
}

/* Kazananda butonlar yok: aynı satır salt okunur sayaç rozetine dönüyor. */
.celebrate-bar.is-readonly .celebrate-btn {
  cursor: default;
  box-shadow: inset 0 0 0 1.5px var(--line);
}

.final-celebrate-marks {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.final-mark {
  font-size: 16px;
  line-height: 1;
  opacity: 0.18;
  filter: grayscale(1);
  transition:
    opacity 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease;
}

.final-mark.is-on {
  opacity: 1;
  filter: none;
}

/* Yanma anı fark edilsin diye tek seferlik bir zıplama. */
.final-mark.is-lighting {
  animation: chatBubblePop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.final-solo {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0 2px;
}

/* ---- Lobi hazır durumu ---- */
.lobby-ready-status {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0 12px;
  min-height: 16px;
}

.lobby-ready-status.all-ready {
  color: var(--ok);
}

/* Hazır olunca buton "eylem" olmaktan çıkıp "durum"a dönüşüyor:
   dolu vurgu rengi yerine yeşil çerçeve. */
#ready-btn.is-ready {
  background: var(--ok-bg);
  color: var(--ok);
  box-shadow: inset 0 0 0 2px var(--ok);
}

.you-tag {
  font-size: 0.75em;
  font-weight: 700;
  color: var(--text-faint);
}

/* =========================================================
   FAZ 4 — HAREKET VE GERİ BİLDİRİM
   (style.css'in EN SONUNA eklenecek)

   Kural: buradaki her animasyon "to" adımında transform: none
   ile bitiyor. Aksi halde fill-mode yüzünden eleman kalıcı bir
   transform taşır ve içindeki position:fixed öğeler bozulur.
   ========================================================= */

/* ---------- 1. EKRAN GEÇİŞİ ----------
   .is-entering sınıfını showScreen SADECE ekran gerçekten
   değiştiğinde ekliyor. Firebase her snapshot'ta showScreen
   çağırdığı için, bu kontrol olmadan kart sürekli zıplardı. */
/* Taşan kart body'nin overflow-x: hidden'ı ile kırpılıyor,
   yani gerçekten ekran dışından kayıyor. */
.screen.is-in-fwd > .container {
  animation: swipeInFwd 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.screen.is-in-back > .container {
  animation: swipeInBack 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes swipeInFwd {
  0% {
    opacity: 0;
    transform: translateX(26%);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes swipeInBack {
  0% {
    opacity: 0;
    transform: translateX(-26%);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 2. HARF REVEAL ---------- */
.letter-box {
  position: relative;
}

.letter-box.is-revealing {
  animation: letterPop 620ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Harfin etrafında bir kez açılıp kaybolan halka */
.letter-box.is-revealing::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--r-md) + 8px);
  border: 2px solid var(--accent);
  pointer-events: none;
  animation: letterRing 700ms 100ms ease-out both;
}

@keyframes letterPop {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-16deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.16) rotate(5deg);
  }
  78% {
    transform: scale(0.95) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes letterRing {
  0% {
    opacity: 0.85;
    transform: scale(0.75);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* ---------- 3. HARF SEÇİM EKRANI ---------- */
.letter-pick-btn.is-chosen {
  animation: pickPop 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.letter-picker-options.has-choice .letter-pick-btn:not(.is-chosen) {
  opacity: 0.3;
  transform: scale(0.94);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

@keyframes pickPop {
  0% {
    transform: none;
  }
  45% {
    transform: scale(1.18);
  }
  100% {
    transform: none;
  }
}

/* ---------- 4. SIRALAMA / SKOR GİRİŞİ ----------
   --i satır indeksi, JS tarafından set ediliyor. */
.standings.is-counting .standing-row,
.results.is-counting .final-score-row {
  animation: rowRise 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* Tur puanı (+7) sayaç dönmeye başladıktan sonra patlıyor */
.standings.is-counting .standing-delta {
  animation: deltaPop 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(340ms + var(--i, 0) * 70ms);
}

.final-winner.is-revealing {
  animation: winnerRise 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rowRise {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes deltaPop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.25);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes winnerRise {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 5. TOAST ---------- */
.toast-root {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 50%;
  z-index: 60;
  width: min(420px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Boş alan tıklamayı yutmasın */
  pointer-events: none;
  transform: translateX(-50%);
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 11px 12px;
  background: var(--surface);
  color: var(--text-1);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}

.toast-success {
  border-left-color: var(--ok);
}
.toast-success .toast-icon {
  background: var(--ok);
}

.toast-error {
  border-left-color: var(--bad);
}
.toast-error .toast-icon {
  background: var(--bad);
}

.toast.is-in {
  animation: toastIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast.is-out {
  animation: toastOut 200ms ease-in both;
}

@keyframes toastIn {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes toastOut {
  0% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

/* Sayaç dönerken rakam genişliği değişip satır zıplamasın */
.standing-total,
.final-score-value,
.final-winner-score-value {
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   FAZ 4B — TUR AÇILIŞI, ZAMAN ÇUBUĞU, KONFETİ, ÇELENK
   (style.css'in EN SONUNA eklenecek)

   Katman sırası:
     50  zaman çubuğu
     55  konfeti
     70  tur açılışı (her şeyi kapatır)
     80  toast (her zaman okunabilir kalmalı)
   ========================================================= */

/* ---------- 1. ZAMAN ÇUBUĞU ----------
   #game-screen'in çocuğu ama position: fixed, yani viewport'un
   tepesinde duruyor. Ekran gizliyken (display:none) çubuk da
   otomatik kayboluyor — ayrıca JS ile gizlemeye gerek yok.

   Akış tek bir CSS animasyonuyla: süre --timer-total, geçen
   süre negatif gecikme (--timer-offset). JS saniyede bir DOM'a
   dokunmuyor, bu yüzden klavye açıkken bile takılmıyor. */
.timer-bar {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--vv-offset-top, 0px));
  left: 0;
  right: 0;
  height: 4px;
  z-index: 50;
  background: rgba(var(--shadow-rgb), 0.3);
}

.timer-bar.is-visible {
  display: block;
}

.timer-bar-fill {
  height: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  background: var(--accent);
  /* STOP modunda ilk "Bitir"e kadar sönük bekler */
  opacity: 0.4;
}

.timer-bar-fill.is-running {
  opacity: 1;
  animation:
    timerDrain var(--timer-total, 30s) linear var(--timer-offset, 0s) both,
    timerHeat var(--timer-total, 30s) linear var(--timer-offset, 0s) both;
}

@keyframes timerDrain {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

/* Son üçte birde renk ısınıyor: sayıya bakmadan da anlaşılsın */
@keyframes timerHeat {
  0%,
  66% {
    background: var(--accent);
  }
  100% {
    background: var(--bad);
  }
}

/* Zaman çubuğu süs değil, bilgi. Hareket azaltma açıkken de
   gerçek süreyi göstermeli — global !important kuralının
   dışında tutuluyor. */
@media (prefers-reduced-motion: reduce) {
  .timer-bar-fill.is-running {
    animation-duration: var(--timer-total, 30s) !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 2. TUR AÇILIŞI ---------- */
.round-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px
    calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: var(--grad-app);
}

.round-intro.is-open {
  display: flex;
  animation: introFade 200ms ease both;
}

.round-intro-inner {
  text-align: center;
  color: #ffffff;
}

.round-intro-round {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 20px;
}

/* Oyun ekranındaki .letter-box'ın büyük hali — aynı dil */
.round-intro-letter {
  width: 132px;
  height: 132px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--brand-deep);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-display);
  font-size: 74px;
  font-weight: 800;
  line-height: 1;
}

.round-intro-letter.is-in {
  animation: introLetter 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.round-intro-count {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  min-height: 44px;
  font-variant-numeric: tabular-nums;
}

.round-intro-count.is-tick {
  animation: introTick 700ms ease-out both;
}

.round-intro-count.is-go {
  color: var(--accent);
}

@keyframes introFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes introLetter {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-10deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes introTick {
  0% {
    opacity: 0.2;
    transform: scale(1.7);
  }
  35% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 3. KONFETİ ---------- */
.confetti-root {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -24px;
  display: block;
  border-radius: 2px;
  animation: confettiFall var(--fall, 3s) var(--delay, 0s)
    cubic-bezier(0.3, 0.55, 0.5, 1) both;
}

@keyframes confettiFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -24px, 0) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift, 0px), 105vh, 0) rotate(var(--spin, 0deg));
  }
}

/* ---------- 4. KAZANAN ÇELENGİ ----------
   Mevcut .final-winner-avatar kuralını EZİYOR (dosyada daha
   sonra geldiği için). Yukarıdaki kurala dokunma. */
.final-winner-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin-bottom: 10px;
}

.final-winner-avatar .wreath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
  pointer-events: none;
}

.final-winner-emoji {
  position: relative;
  font-size: 42px;
  line-height: 1;
}

.final-winner.is-revealing .wreath {
  animation: wreathIn 720ms 160ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes wreathIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-14deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 5. TOAST KATMANI ----------
   Tur açılışı (70) toast'ın üstünde kalmasın. */
.toast-root {
  z-index: 80;
}

/* Tur açılışında "2/4 oyuncu hazır" satırı */
.round-intro-wait {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  opacity: 0.7;
  min-height: 18px;
}

/* =========================================================
   EMOTE — cevaplara tepki
   ========================================================= */

/* Tepki verilebilir baloncuk: dokunulabilir olduğu belli olsun */
.chat-bubble-reactable {
  cursor: pointer;
  transition: transform 0.12s ease;
}

.chat-bubble-reactable:active {
  transform: scale(0.97);
}

/* ---- TEPKİ ŞERİDİ ----
   Baloncuğun alt kenarına biniyor: tam altta olsaydı her tepki
   satır yüksekliğini büyütür, sohbet aşağı kayardı. */
.emote-lane {
  display: none;
  gap: 4px;
  margin-top: -7px;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}

.chat-row-me .emote-lane {
  justify-content: flex-end;
}

.emote-chip {
  display: flex;
  align-items: center;
  gap: 3px;

  background: var(--surface);
  border: 1.5px solid var(--bubble-border);
  border-radius: var(--r-pill);
  padding: 2px 7px 2px 5px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);

  cursor: pointer;
  box-shadow: var(--shadow-sm);

  animation: emote-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.emote-chip:disabled {
  cursor: default;
}

/* Kendi verdiğim tepki: markalı kenarlık */
.emote-chip-mine {
  border-color: var(--brand);
  color: var(--brand);
}

.emote-chip-glyph {
  font-size: 13px;
  line-height: 1;
}

.emote-chip-count {
  line-height: 1;
  min-width: 7px;
  text-align: center;
}

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

/* ---- SEÇİCİ ----
   Baloncuğun üstünde açılıyor, altta açılsa sonraki satırı iterdi. */
.emote-picker {
  display: flex;
  gap: 1px;
  margin-bottom: 6px;

  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 4px 6px;
  box-shadow: var(--shadow-md);

  animation: emote-picker-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes emote-picker-in {
  from {
    transform: translateY(6px) scale(0.94);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.emote-picker-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  border-radius: var(--r-pill);

  font-size: 21px;
  line-height: 1;
  cursor: pointer;

  transition:
    background 0.12s ease,
    transform 0.12s ease;
}

.emote-picker-btn.selected {
  background: var(--brand-tint);
}

.emote-picker-btn:active {
  transform: scale(0.88);
}

@media (hover: hover) and (pointer: fine) {
  .emote-picker-btn:hover {
    background: var(--surface-hover);
  }

  .emote-chip:not(:disabled):hover {
    border-color: var(--line-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emote-chip,
  .emote-picker {
    animation: none;
  }

  .chat-bubble-reactable:active,
  .emote-picker-btn:active {
    transform: none;
  }
}

/* ---------- OYUN İÇİ ÇIKIŞ ----------
   Yüzen tek düğme yerine her ekran kendi çıkışını taşıyor: ekran
   gizlenince düğme de gizleniyor, z-index ve sabit konumlandırma
   derdi kalmıyor.

   Onay düğmenin üstünde: ilk basışta etiket "Çık?" olup düğme
   genişliyor. Toast kullanmıyoruz çünkü toast tıklamayı yutuyor
   ve tam bu düğmenin üstüne düşüyor. */
.screen-exit {
  flex-shrink: 0;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: var(--r-xs);

  background: var(--on-grad-fill-strong);
  color: #ffffff;

  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;

  transition: background 0.15s ease;
}

.screen-exit:hover {
  background: rgba(255, 255, 255, 0.34);
}

/* Gradyan başlığı olmayan iki ekranda (tur özeti, final) başlık
   flex değil: düğme sağ üst köşeye oturuyor. */
.summary-head,
.final-head {
  position: relative;
}

.summary-head > .screen-exit,
.final-head > .screen-exit {
  position: absolute;
  top: 10px;
  right: 10px;

  /* Bu iki başlıktaki metinlerde opacity < 1 var; opacity kendi yığılma
     bağlamını yaratıyor ve DOM'da düğmeden sonra geldikleri için düğmenin
     üstüne boyanıyorlar. z-index olmadan düğmenin yalnızca metin kutusunun
     üstünde kalan birkaç pikseli tıklanabiliyor. */
  z-index: 2;
}

/* İkinci basış bekleniyor: uyarı rengi + genişleyen etiket */
[data-leave-game].is-armed .screen-exit-label {
  font-size: 11px;
}

.screen-exit.is-armed {
  background: var(--bad-bg);
  color: var(--bad);
}

.btn-text.is-armed {
  color: var(--bad);
}
/* Penceredeki profil formu onboarding'in ızgarasını ve metin alanını
   aynen kullanıyor; kart içinde daha derli toplu dursun diye sadece
   alt boşlukları kısıyoruz. */
#profile-avatar-grid {
  margin-bottom: 14px;
}

#profile-nickname-input {
  margin-bottom: 12px;
}
/* ---------- PENCERE (MODAL) ----------
   round-intro ile aynı desen: display:none → .is-open ile flex.
   Arka plan temaya göre koyulaşsın diye --shadow-rgb kullanılıyor,
   sabit siyah değil. */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px
    calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: rgba(var(--shadow-rgb), 0.55);
  overflow-y: auto;
}

.modal.is-open {
  display: flex;
  animation: introFade 180ms ease both;
}

.modal-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 24px 20px 16px;
  width: 100%;
  max-width: 340px;
  max-height: 100%;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  text-align: center;

  animation: modalPop 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

/* Oda ayarları uzun bir liste: kapsayıcı ekranla aynı genişlikte dursun */
.modal-card-wide {
  max-width: 380px;
  padding: 24px 24px 16px;
}

/* Kapatma düğmesi başlığın üstünde durabiliyor; başlık ve etiketlerde
   opacity kullanıldığı için z-index olmadan tıklanamaz kalırdı. */
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);

  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
  background: var(--line);
  color: var(--text-1);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--text-1);
  margin-bottom: 18px;
  padding: 0 34px; /* kapatma düğmesinin altına kaymasın */
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ---------- MARKA İŞARETİ ----------
   Ana ekranda "İsim Şehir" başlığının altında duran MIXX markası.
   İki yanındaki çizgiler ortalamayı güvenceye alıyor: metin uzunluğu
   ne olursa olsun blok simetrik kalıyor. */
.game-title-mark {
  display: flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  margin: -2px auto 14px;

  font-family: var(--font-display);
  /* Başlık 38px; MIXX ona yakın durmalı çünkü etiket değil, markanın
     ikinci satırı. Küçük tutulunca alt yazı gibi okunuyordu. */
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* letter-spacing sondaki boşluğu dengele */
  color: var(--accent-ink);
}

.game-title-mark::before,
.game-title-mark::after {
  content: "";
  width: 38px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

/* ---------- HIZLI BAŞLANGIÇ ----------
   İki mod yan yana. İki satırlı içerik olduğu için .btn'in dikey
   hizalamasını grid ile eziyoruz. */
.quick-play-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.btn.quick-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 14px 10px;
  margin: 0;
  width: 100%;
  text-align: center;
}

.quick-play-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
}

.quick-play-desc {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.72;
}